From b377f0bd3c951a2e7babafbf02bb05ba2afa8214 Mon Sep 17 00:00:00 2001
From: cato447 <simon@bussmann.es>
Date: Fri, 25 Apr 2025 19:07:11 +0200
Subject: [PATCH] updated styling

---
 app/templates/admin.html | 232 +++++++++++++++++++++++----------------
 app/templates/index.html |  12 +-
 2 files changed, 141 insertions(+), 103 deletions(-)
diff --git a/app/templates/admin.html b/app/templates/admin.html
index 6de0746..d42725a 100644
--- a/app/templates/admin.html
+++ b/app/templates/admin.html
@@ -1,149 +1,187 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
 <head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Deck Admin</title>
-  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@4.1.4/dist/tailwind.min.css" rel="stylesheet">
+
+  <!-- Tailwind CSS v4.1.4 CDN -->
+  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
+
+  <!-- Tailwind Config (Dark Mode + Theme Colors) -->
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          colors: {
+            background: '#121418',   // dark slate with blue/gray tone
+            surface: '#1e2127',      // a bit lighter for containers/cards
+            border: '#2a2d34',       // visible but subtle borders
+            primary: '#4f8cff',      // soft blue that pops but is not neon
+            text: '#e4e4e7',         // light gray for high contrast
+            muted: '#a0a0ad',        // for subdued text
+          },
+        },
+      }
+    };
+  </script>
+
+
+  <!-- Flowbite -->
   <link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet">
 </head>
-<body class="bg-gray-100">
-  <div class="container mx-auto p-6">
+<body class="bg-background text-text min-h-screen font-sans">
 
-    <!-- Add New Deck Form -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-      <div class="bg-white p-6 rounded-lg shadow-md">
-        <h2 class="text-xl font-semibold mb-4">Add New Deck</h2>
-        <form method="POST">
+  <div class="container mx-auto px-6 py-10 space-y-12">
+
+    <!-- Admin Title -->
+    <h1 class="text-3xl font-bold text-center mb-8">Deck & Password Admin</h1>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
+
+      <!-- Deck Form + Decks -->
+      <div class="bg-surface rounded-xl p-6 shadow-lg space-y-6">
+        <h2 class="text-2xl font-semibold">Add New Deck</h2>
+        <form method="POST" class="space-y-4">
           {{ deck_form.hidden_tag() }}
 
-          <div class="mb-4">
-            <label class="block text-sm font-medium text-gray-700">{{ deck_form.name.label }}</label>
-            {{ deck_form.name(class="form-input mt-1 block w-full") }}
+          <div>
+            <label class="block mb-1 text-sm font-medium">{{ deck_form.name.label }}</label>
+            {{ deck_form.name(class="w-full rounded-lg p-3 bg-background border border-border text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary") }}
           </div>
 
-          <div class="mb-4">
-            <label class="block text-sm font-medium text-gray-700">{{ deck_form.deck.label }}</label>
-            {{ deck_form.deck(multiple=True, class="form-input mt-1 block w-full") }}
+          <div>
+            <label class="block mb-1 text-sm font-medium">{{ deck_form.deck.label }}</label>
+            {{ deck_form.deck(multiple=True, class="w-full rounded-lg p-3 bg-background border border-border text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary") }}
           </div>
 
-          <div class="mb-4">
-            <label class="block text-sm font-medium text-gray-700">{{ deck_form.description.label }}</label>
-            {{ deck_form.description(class="form-input mt-1 block w-full") }}
+          <div>
+            <label class="block mb-1 text-sm font-medium">{{ deck_form.description.label }}</label>
+            {{ deck_form.description(class="w-full rounded-lg p-3 bg-background border border-border text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary") }}
           </div>
 
-          <div class="mb-4">
-            {{ deck_form.submit_deck(class="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 w-full") }}
+          <div>
+            {{ deck_form.submit_deck(class="w-full bg-primary hover:bg-blue-700 text-white py-2 px-4 rounded-lg") }}
           </div>
         </form>
-        <h2 class="text-xl font-semibold mb-4">Existing Decks</h2>
+
+        <!-- Existing Decks Table -->
+        <h2 class="text-2xl font-semibold pt-6">Existing Decks</h2>
         {% if decks %}
-        <table class="min-w-full table-auto text-left text-gray-700">
-          <thead>
-            <tr class="border-b">
-              <th class="px-4 py-2">Name</th>
-              <th class="px-4 py-2">Passwords</th>
-              <th class="px-4 py-2">Action</th>
-            </tr>
-          </thead>
-          <tbody>
-            {% for deck in decks %}
-              <tr class="border-b">
-                <td class="px-4 py-2">{{ deck.name }}</td>
+        <div class="overflow-x-auto">
+          <table class="w-full table-auto text-left text-sm">
+            <thead class="text-muted border-b border-border">
+              <tr>
+                <th class="px-4 py-2">Name</th>
+                <th class="px-4 py-2">Passwords</th>
+                <th class="px-4 py-2">Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for deck in decks %}
+              <tr class="border-b border-border hover:bg-background/30">
+                <td class="px-4 py-2 font-medium">{{ deck.name }}</td>
                 <td class="px-4 py-2">
                   {% if deck.passwords %}
-                    <ul class="list-disc pl-5">
-                      {% for password in deck.passwords %}
-                        <li>{{ password.value }}</li>
-                      {% endfor %}
-                    </ul>
+                  <ul class="list-disc list-inside text-muted">
+                    {% for password in deck.passwords %}
+                    <li>{{ password.value }}</li>
+                    {% endfor %}
+                  </ul>
                   {% else %}
-                    <em>None</em>
+                  <em class="text-muted">None</em>
                   {% endif %}
                 </td>
                 <td class="px-4 py-2">
-                  <form method="POST" action="{{ url_for('main.delete_deck', deck_id=deck.id) }}" style="display:inline;">
-                    <button type="submit" class="bg-red-500 text-white py-1 px-4 rounded-md hover:bg-red-600">Delete</button>
+                  <form method="POST" action="{{ url_for('main.delete_deck', deck_id=deck.id) }}">
+                    <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-lg text-sm">Delete</button>
                   </form>
                 </td>
               </tr>
-            {% endfor %}
-          </tbody>
-        </table>
-      {% else %}
-        <p class="text-center [48;48;178;1632;2848tmt-4 text-gray-500 dark:text-gray-300">No decks available.</p>
-      {% endif %}
+              {% endfor %}
+            </tbody>
+          </table>
+        </div>
+        {% else %}
+        <p class="text-center text-muted">No decks available.</p>
+        {% endif %}
       </div>
 
-      <!-- Add New Password Form -->
-      <div class="bg-white p-6 rounded-lg shadow-md">
-        <h2 class="text-xl font-semibold mb-4">Add New Password</h2>
-        <form method="POST">
+      <!-- Password Form + Passwords -->
+      <div class="bg-surface rounded-xl p-6 shadow-lg space-y-6">
+        <h2 class="text-2xl font-semibold">Add New Password</h2>
+        <form method="POST" class="space-y-4">
           {{ password_form.hidden_tag() }}
 
-          <div class="mb-4">
-            <label class="block text-sm font-medium text-gray-700">{{ password_form.value.label }}</label>
-            {{ password_form.value(class="form-input mt-1 block w-full") }}
+          <div>
+            <label class="block mb-1 text-sm font-medium">{{ password_form.value.label }}</label>
+            {{ password_form.value(class="w-full rounded-lg p-3 bg-background border border-border text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary") }}
           </div>
 
-          <div class="mb-4">
-            <label class="block text-sm font-medium text-gray-700">{{ password_form.expires_at.label }}</label>
-            {{ password_form.expires_at(class="form-input mt-1 block w-full", type="datetime-local") }}
+          <div>
+            <label class="block mb-1 text-sm font-medium">{{ password_form.expires_at.label }}</label>
+            {{ password_form.expires_at(class="w-full rounded-lg p-3 bg-background border border-border text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary", type="datetime-local") }}
           </div>
 
-          <div class="mb-4">
-            <label class="block text-sm font-medium text-gray-700">{{ password_form.decks.label }}</label>
-            {{ password_form.decks(class="form-input mt-1 block w-full") }}
+          <div>
+            <label class="block mb-1 text-sm font-medium">{{ password_form.decks.label }}</label>
+            {{ password_form.decks(class="w-full rounded-lg p-3 bg-background border border-border text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary") }}
           </div>
 
-          <div class="mb-4">
-            {{ password_form.submit_password(class="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 w-full") }}
+          <div>
+            {{ password_form.submit_password(class="w-full bg-primary hover:bg-blue-700 text-white py-2 px-4 rounded-lg") }}
           </div>
         </form>
-      <!-- Password Cards -->
-      <h2 class="text-xl font-semibold mb-4">Existing Passwords</h2>
-      {% if passwords %}
-          <table class="min-w-full table-auto text-left text-gray-700">
-          <thead>
-            <tr class="border-b">
-              <th class="px-4 py-2">Password</th>
-              <th class="px-4 py-2">Expired by</th>
-              <th class="px-4 py-2">Decks</th>
-              <th class="px-4 py-2">Action</th>
-            </tr>
-          </thead>
-          <tbody>
-            {% for password in passwords %}
-              <tr class="border-b">
-                <td class="px-4 py-2">{{ password.value }}</td>
+
+        <!-- Existing Passwords Table -->
+        <h2 class="text-2xl font-semibold pt-6">Existing Passwords</h2>
+        {% if passwords %}
+        <div class="overflow-x-auto">
+          <table class="w-full table-auto text-left text-sm">
+            <thead class="text-muted border-b border-border">
+              <tr>
+                <th class="px-4 py-2">Password</th>
+                <th class="px-4 py-2">Expires</th>
+                <th class="px-4 py-2">Decks</th>
+                <th class="px-4 py-2">Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for password in passwords %}
+              <tr class="border-b border-border hover:bg-background/30">
+                <td class="px-4 py-2 font-medium">{{ password.value }}</td>
                 <td class="px-4 py-2">{{ password.expires_at }}</td>
                 <td class="px-4 py-2">
                   {% if password.decks %}
-                    <ul class="list-disc pl-5">
-                      {% for deck in password.decks %}
-                        <li>{{ deck.name }}</li>
-                      {% endfor %}
-                    </ul>
+                  <ul class="list-disc list-inside text-muted">
+                    {% for deck in password.decks %}
+                    <li>{{ deck.name }}</li>
+                    {% endfor %}
+                  </ul>
                   {% else %}
-                    <em>None</em>
+                  <em class="text-muted">None</em>
                   {% endif %}
                 </td>
                 <td class="px-4 py-2">
-                  <form method="POST" action="{{ url_for('main.delete_password', password_id=password.id) }}" style="display:inline;">
-                    <button type="submit" class="bg-red-500 text-white py-1 px-4 rounded-md hover:bg-red-600">Delete</button>
+                  <form method="POST" action="{{ url_for('main.delete_password', password_id=password.id) }}">
+                    <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-lg text-sm">Delete</button>
                   </form>
                 </td>
               </tr>
-            {% endfor %}
-          </tbody>
-        </table>
-      {% else %}
-        <p class="text-center mt-4 text-gray-500 dark:text-gray-300">No passwords available.</p>
-      {% endif %}
-    </div>
+              {% endfor %}
+            </tbody>
+          </table>
+        </div>
+        {% else %}
+        <p class="text-center text-muted">No passwords available.</p>
+        {% endif %}
+      </div>
+
+    </div>
+  </div>
 
-  <!-- Flowbite Script -->
   <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
 </body>
 </html>
diff --git a/app/templates/index.html b/app/templates/index.html
index 9a7f3b1..2b5a74c 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -15,12 +15,12 @@
       theme: {
         extend: {
           colors: {
-            background: '#09090b',
-            surface: '#18181b',
-            border: '#27272a',
-            primary: '#3b82f6',
-            text: '#f4f4f5',
-            muted: '#a1a1aa',
+            background: '#121418',   // dark slate with blue/gray tone
+            surface: '#1e2127',      // a bit lighter for containers/cards
+            border: '#2a2d34',       // visible but subtle borders
+            primary: '#4f8cff',      // soft blue that pops but is not neon
+            text: '#e4e4e7',         // light gray for high contrast
+            muted: '#a0a0ad',        // for subdued text
           },
         },
       }
