Home Explore Help
Sign In
Karl
/
KTVManager_UI
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

rework the style

Karl Hudgell 3 weeks ago
parent
9573a4f0ca
commit
24435e57b0
6 changed files with 81 additions and 70 deletions
Unified View Show Diff Stats
  1. 13 10
      static/styles.css
  2. 5 3
      templates/add_account.html
  3. 49 49
      templates/home.html
  4. 5 3
      templates/index.html
  5. 5 3
      templates/urls.html
  6. 4 2
      templates/user_accounts.html

+ 13 - 10
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 */
 
-@media (max-width: 600px) {
 
-    header {
 
-        font-size: 1.5em;
 
-    }
 
-    main {
 
-        padding: 0.5em;
 
-    }
 
+footer {
 
+    background-color: #333;
 
+    color: white;
 
+    text-align: center;
 
+    padding: 1em;
 
 }
 
 }

+ 5 - 3
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>

+ 49 - 49
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 -->
 
-<div class="container mt-5">
 
-    <h1>Welcome {{ username }}!</h1>
 
-    <br>
 
-    <h2>You have {{ accounts }} active accounts</h2>
 
-    <br>
 
-    
-    {% if current_month_accounts %}
 
-        <h3>Accounts Expiring This Month</h3>
 
-        <table class="table table-bordered table-striped">
 
-            <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 %}
 
+    <!-- Main Content -->
 
+    <main class="container mt-5">
 
+        <h1>Welcome {{ username }}!</h1>
 
+        <br>
 
+        <h2>You have {{ accounts }} active accounts</h2>
 
+        <br>
 
+        
+        {% if current_month_accounts %}
 
+            <h3>Accounts Expiring This Month</h3>
 
+            <table class="table table-bordered table-striped">
 
+                <thead class="thead-dark">
 
                     <tr>
 
                     <tr>
 
-                        <td>{{ account.stream }}</td>
 
-                        <td>{{ account.username }}</td>
 
-                        <td>{{ account.expiaryDate_rendered }}</td>
 
+                        <th>Stream Name</th>
 
+                        <th>Username</th>
 
+                        <th>Expiry Date</th>
 
                     </tr>
 
                     </tr>
 
-                {% endfor %}
 
-            </tbody>
 
-        </table>
 
-    {% endif %}
 
-    {% if expired_accounts %}
 
-        <h3>Expired Accounts</h3>
 
-        <table class="table table-bordered table-striped">
 
-            <thead class="thead-dark">
 
-                <tr>
 
-                    <th>Stream Name</th>
 
-                    <th>Username</th>
 
-                    <th>Expiry Date</th>
 
-                </tr>
 
-            </thead>
 
-            <tbody>
 
-                {% for account in expired_accounts %}
 
+                </thead>
 
+                <tbody>
 
+                    {% for account in current_month_accounts %}
 
+                        <tr>
 
+                            <td>{{ account.stream }}</td>
 
+                            <td>{{ account.username }}</td>
 
+                            <td>{{ account.expiaryDate_rendered }}</td>
 
+                        </tr>
 
+                    {% endfor %}
 
+                </tbody>
 
+            </table>
 
+        {% endif %}
 
+        {% if expired_accounts %}
 
+            <h3>Expired Accounts</h3>
 
+            <table class="table table-bordered table-striped">
 
+                <thead class="thead-dark">
 
                     <tr>
 
                     <tr>
 
-                        <td>{{ account.stream }}</td>
 
-                        <td>{{ account.username }}</td>
 
-                        <td>{{ account.expiaryDate_rendered }}</td>
 
+                        <th>Stream Name</th>
 
+                        <th>Username</th>
 
+                        <th>Expiry Date</th>
 
                     </tr>
 
                     </tr>
 
-                {% endfor %}
 
-            </tbody>
 
-        </table>
 
-    {% endif %}    
-</div>
 
-
 
+                </thead>
 
+                <tbody>
 
+                    {% for account in expired_accounts %}
 
+                        <tr>
 
+                            <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>

+ 5 - 3
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>

+ 5 - 3
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>

+ 4 - 2
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>