Karl/KTVManager_UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rework the style

Browse Source
This commit is contained in:
Karl Hudgell 2024-11-08 08:44:47 +00:00
parent 9573a4f0ca
commit 24435e57b0
6 changed files with 81 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
static/styles.css
View File

@ -1,8 +1,13 @@
/* Base styles */
html, body {
height: 100%; /* Ensure the body and html elements fill the viewport height */
margin: 0; /* Remove default margin */
display: flex;
flex-direction: column;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
@ -13,15 +18,13 @@ header {
}
main {
flex: 1; /* Make the main content area grow to fill the available space */
padding: 1em;
}
/* Mobile styles */
@media (max-width: 600px) {
header {
font-size: 1.5em;
}
main {
padding: 0.5em;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
}

6
templates/add_account.html
View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Account - KTVManager</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}" />
<style>
/* Hide the spinner by default */
#loadingSpinner {
@ -51,7 +52,7 @@
</div>
<!-- Main Content -->
<div class="container mt-5">
<main div class="container mt-5">
<h1>Add Account</h1>
<br>
@ -74,9 +75,10 @@
</button>
</form>
</div>
</main>
<footer class="bg-dark text-white text-center py-3 mt-5">
<p>&copy; 2024 KTV Manager | All rights reserved</p>
<p></p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

12
templates/home.html
View File

@ -1,4 +1,3 @@
<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
@ -6,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KTVManager</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}" />
</head>
<body>
@ -30,8 +30,8 @@
</div>
</nav>
<!-- Main Content -->
<div class="container mt-5">
<!-- Main Content -->
<main class="container mt-5">
<h1>Welcome {{ username }}!</h1>
<br>
<h2>You have {{ accounts }} active accounts</h2>
@ -79,11 +79,11 @@
</tbody>
</table>
{% endif %}
</div>
</main>
<!-- Footer -->
<footer class="bg-dark text-white text-center py-3 mt-5">
<p>&copy; 2024 KTV Manager | All rights reserved</p>
<p></p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

8
templates/index.html
View File

@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KTV Manager</title>
<title>KTVManager</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon-96x96.png') }}" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}" />
@ -12,6 +12,7 @@
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}" />
<meta name="apple-mobile-web-app-title" content="kTvManager" />
<link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}" />
</head>
<body>
@ -37,7 +38,7 @@
</nav>
<!-- Main Content -->
<div class="container mt-5">
<main div class="container mt-5">
<h1>Welcome to KTV Manager</h1>
<!-- Login Form -->
@ -56,9 +57,10 @@
{% endif %}
</form>
</div>
</main>
<footer class="bg-dark text-white text-center py-3 mt-5">
<p>&copy; 2024 KTV Manager | All rights reserved</p>
<p></p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

6
templates/urls.html
View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KTVManager</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}" />
</head>
<body>
@ -32,7 +33,7 @@
<!-- Main Content -->
<div class="container mt-5">
<main div class="container mt-5">
<h2>URLs</h2>
<table class="table table-striped">
<thead>
@ -51,9 +52,10 @@
</tbody>
</table>
</div>
</main>
<footer class="bg-dark text-white text-center py-3 mt-5">
<p>&copy; 2024 KTVManager | All rights reserved</p>
<p></p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

6
templates/user_accounts.html
View File

@ -7,6 +7,7 @@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}" />
</head>
<body>
<!-- Navbar -->
@ -39,7 +40,7 @@
</div>
<!-- Main Content -->
<div class="container mt-5">
<main div class="container mt-5">
<h2>{{ username }}'s Accounts</h2>
<div class="table-responsive">
<table class="table table-striped" id="accountsTable">
@ -78,9 +79,10 @@
</table>
</div>
</div>
</main>
<footer class="bg-dark text-white text-center py-3 mt-5">
<p>&copy; 2024 KTVManager | All rights reserved</p>
<p></p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>