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 */ /* 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 { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
margin: 0;
padding: 0;
} }
header { header {
@ -13,15 +18,13 @@ header {
} }
main { main {
flex: 1; /* Make the main content area grow to fill the available space */
padding: 1em; padding: 1em;
} }
/* Mobile styles */ footer {
@media (max-width: 600px) { background-color: #333;
header { color: white;
font-size: 1.5em; text-align: center;
} padding: 1em;
main {
padding: 0.5em;
}
} }

8
templates/add_account.html
View File

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

98
templates/home.html
View File

@ -1,4 +1,3 @@
<!-- templates/index.html -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -6,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KTVManager</title> <title>KTVManager</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <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> </head>
<body> <body>
@ -30,60 +30,60 @@
</div> </div>
</nav> </nav>
<!-- Main Content --> <!-- Main Content -->
<div class="container mt-5"> <main class="container mt-5">
<h1>Welcome {{ username }}!</h1> <h1>Welcome {{ username }}!</h1>
<br> <br>
<h2>You have {{ accounts }} active accounts</h2> <h2>You have {{ accounts }} active accounts</h2>
<br> <br>
{% if current_month_accounts %} {% if current_month_accounts %}
<h3>Accounts Expiring This Month</h3> <h3>Accounts Expiring This Month</h3>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead class="thead-dark"> <thead class="thead-dark">
<tr>
<th>Stream Name</th>
<th>Username</th>
<th>Expiry Date</th>
</tr>
</thead>
<tbody>
{% for account in current_month_accounts %}
<tr> <tr>
<td>{{ account.stream }}</td> <th>Stream Name</th>
<td>{{ account.username }}</td> <th>Username</th>
<td>{{ account.expiaryDate_rendered }}</td> <th>Expiry Date</th>
</tr> </tr>
{% endfor %} </thead>
</tbody> <tbody>
</table> {% for account in current_month_accounts %}
{% endif %} <tr>
{% if expired_accounts %} <td>{{ account.stream }}</td>
<h3>Expired Accounts</h3> <td>{{ account.username }}</td>
<table class="table table-bordered table-striped"> <td>{{ account.expiaryDate_rendered }}</td>
<thead class="thead-dark"> </tr>
<tr> {% endfor %}
<th>Stream Name</th> </tbody>
<th>Username</th> </table>
<th>Expiry Date</th> {% endif %}
</tr> {% if expired_accounts %}
</thead> <h3>Expired Accounts</h3>
<tbody> <table class="table table-bordered table-striped">
{% for account in expired_accounts %} <thead class="thead-dark">
<tr> <tr>
<td>{{ account.stream }}</td> <th>Stream Name</th>
<td>{{ account.username }}</td> <th>Username</th>
<td>{{ account.expiaryDate_rendered }}</td> <th>Expiry Date</th>
</tr> </tr>
{% endfor %} </thead>
</tbody> <tbody>
</table> {% for account in expired_accounts %}
{% endif %} <tr>
</div> <td>{{ account.stream }}</td>
<td>{{ account.username }}</td>
<td>{{ account.expiaryDate_rendered }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
</main>
<!-- Footer -->
<footer class="bg-dark text-white text-center py-3 mt-5"> <footer class="bg-dark text-white text-center py-3 mt-5">
<p>&copy; 2024 KTV Manager | All rights reserved</p> <p></p>
</footer> </footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <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> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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="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/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') }}" /> <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') }}" /> <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" /> <meta name="apple-mobile-web-app-title" content="kTvManager" />
<link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}" /> <link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}" />
</head> </head>
<body> <body>
@ -37,7 +38,7 @@
</nav> </nav>
<!-- Main Content --> <!-- Main Content -->
<div class="container mt-5"> <main div class="container mt-5">
<h1>Welcome to KTV Manager</h1> <h1>Welcome to KTV Manager</h1>
<!-- Login Form --> <!-- Login Form -->
@ -56,9 +57,10 @@
{% endif %} {% endif %}
</form> </form>
</div> </div>
</main>
<footer class="bg-dark text-white text-center py-3 mt-5"> <footer class="bg-dark text-white text-center py-3 mt-5">
<p>&copy; 2024 KTV Manager | All rights reserved</p> <p></p>
</footer> </footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

8
templates/urls.html
View File

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