From 068b04c0004e38a760c463589d45c7cfd090eec8 Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Thu, 22 Jan 2026 15:19:00 -1000
Subject: Complete dark translucent theme for all templates

Update all HTML templates to match terst.org styling:
- Dark semi-transparent backgrounds (bg-black/60)
- White text with opacity variants for hierarchy
- Glass effect with backdrop-blur
- Dark form inputs with subtle borders
- Updated modals and FAB button
- Login page with background image

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 web/templates/index.html | 57 ++++++++++++++++++++++++------------------------
 1 file changed, 29 insertions(+), 28 deletions(-)

(limited to 'web/templates/index.html')

diff --git a/web/templates/index.html b/web/templates/index.html
index da27e74..f525a09 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -72,7 +72,8 @@
 
     <!-- Unified Action Button (FAB) -->
     <button onclick="openActionModal()"
-            class="fixed bottom-4 right-4 bg-primary-600 hover:bg-primary-700 text-white p-4 rounded-full shadow-lg no-print"
+            class="fixed bottom-4 right-4 bg-black/60 hover:bg-black/80 backdrop-blur-sm text-white p-4 rounded-full no-print"
+            style="box-shadow: 0 0 12px black;"
             title="Quick Actions (Ctrl+K)">
         <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
@@ -80,20 +81,20 @@
     </button>
 
     <!-- Unified Action Modal -->
-    <div id="action-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
-        <div class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[80vh] overflow-hidden">
-            <div class="p-4 border-b border-gray-200 flex justify-between items-center">
+    <div id="action-modal" class="hidden fixed inset-0 bg-black/70 flex items-center justify-center p-4 z-50">
+        <div class="bg-black/80 backdrop-blur-sm rounded-lg max-w-md w-full max-h-[80vh] overflow-hidden" style="box-shadow: 0 0 20px black;">
+            <div class="p-4 border-b border-white/10 flex justify-between items-center">
                 <div class="flex gap-2">
                     <button onclick="switchActionTab('add')" id="tab-add"
-                            class="px-3 py-1 rounded-lg text-sm font-medium bg-primary-100 text-primary-700">
+                            class="px-3 py-1 rounded-lg text-sm font-medium bg-white/20 text-white">
                         ✓ Quick Add
                     </button>
                     <button onclick="switchActionTab('bug')" id="tab-bug"
-                            class="px-3 py-1 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-100">
+                            class="px-3 py-1 rounded-lg text-sm font-medium text-white/60 hover:bg-white/10">
                         🐛 Bug
                     </button>
                 </div>
-                <button onclick="closeActionModal()" class="text-gray-400 hover:text-gray-600">✕</button>
+                <button onclick="closeActionModal()" class="text-white/40 hover:text-white">✕</button>
             </div>
 
             <!-- Quick Add Tab -->
@@ -104,21 +105,21 @@
                     <input type="text"
                            name="title"
                            placeholder="Task name..."
-                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm mb-3"
+                           class="w-full bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 mb-3"
                            required
                            autofocus>
                     <div class="flex gap-2 mb-3">
                         <input type="date"
                                name="due_date"
                                id="modal-add-date"
-                               class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm">
-                        <select name="source" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
+                               class="flex-1 bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white">
+                        <select name="source" class="bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white">
                             <option value="todoist">Todoist</option>
                             <option value="trello">Trello</option>
                         </select>
                     </div>
                     <button type="submit"
-                            class="w-full bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
+                            class="w-full bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium">
                         Add Task
                     </button>
                 </form>
@@ -132,20 +133,20 @@
                       hx-on::after-request="if(event.detail.successful) { this.reset(); closeActionModal(); }">
                     <textarea name="description"
                               placeholder="Describe the bug..."
-                              class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm mb-3 h-24"
+                              class="w-full bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 mb-3 h-24"
                               required></textarea>
                     <button type="submit"
-                            class="w-full bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium">
+                            class="w-full bg-red-900/50 hover:bg-red-900/70 text-red-300 px-4 py-2 rounded-lg text-sm font-medium">
                         Submit Bug Report
                     </button>
                 </form>
-                <div class="mt-4 border-t border-gray-200 pt-4">
-                    <h3 class="text-sm font-medium text-gray-700 mb-2">Recent Reports</h3>
+                <div class="mt-4 border-t border-white/10 pt-4">
+                    <h3 class="text-sm font-medium text-white/70 mb-2">Recent Reports</h3>
                     <div id="bug-list"
                          class="max-h-32 overflow-y-auto"
                          hx-get="/bugs"
                          hx-trigger="load">
-                        <p class="text-gray-400 text-sm">Loading...</p>
+                        <p class="text-white/40 text-sm">Loading...</p>
                     </div>
                 </div>
             </div>
@@ -171,12 +172,12 @@
         function switchActionTab(tab) {
             document.getElementById('panel-add').classList.toggle('hidden', tab !== 'add');
             document.getElementById('panel-bug').classList.toggle('hidden', tab !== 'bug');
-            document.getElementById('tab-add').classList.toggle('bg-primary-100', tab === 'add');
-            document.getElementById('tab-add').classList.toggle('text-primary-700', tab === 'add');
-            document.getElementById('tab-add').classList.toggle('text-gray-600', tab !== 'add');
-            document.getElementById('tab-bug').classList.toggle('bg-red-100', tab === 'bug');
-            document.getElementById('tab-bug').classList.toggle('text-red-700', tab === 'bug');
-            document.getElementById('tab-bug').classList.toggle('text-gray-600', tab !== 'bug');
+            document.getElementById('tab-add').classList.toggle('bg-white/20', tab === 'add');
+            document.getElementById('tab-add').classList.toggle('text-white', tab === 'add');
+            document.getElementById('tab-add').classList.toggle('text-white/60', tab !== 'add');
+            document.getElementById('tab-bug').classList.toggle('bg-red-900/50', tab === 'bug');
+            document.getElementById('tab-bug').classList.toggle('text-red-300', tab === 'bug');
+            document.getElementById('tab-bug').classList.toggle('text-white/60', tab !== 'bug');
         }
         // Keyboard shortcut: Ctrl+K or Cmd+K
         document.addEventListener('keydown', function(e) {
@@ -200,14 +201,14 @@
     </script>
 
     <!-- Task Edit Modal -->
-    <div id="task-edit-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
-        <div class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[80vh] overflow-hidden">
-            <div class="p-4 border-b border-gray-200 flex justify-between items-center">
-                <h2 class="font-semibold text-gray-900">Edit Task</h2>
-                <button onclick="closeTaskModal()" class="text-gray-400 hover:text-gray-600">✕</button>
+    <div id="task-edit-modal" class="hidden fixed inset-0 bg-black/70 flex items-center justify-center p-4 z-50">
+        <div class="bg-black/80 backdrop-blur-sm rounded-lg max-w-md w-full max-h-[80vh] overflow-hidden" style="box-shadow: 0 0 20px black;">
+            <div class="p-4 border-b border-white/10 flex justify-between items-center">
+                <h2 class="font-medium text-white">Edit Task</h2>
+                <button onclick="closeTaskModal()" class="text-white/40 hover:text-white">✕</button>
             </div>
             <div id="task-edit-content">
-                <p class="p-4 text-gray-500 text-sm">Loading...</p>
+                <p class="p-4 text-white/50 text-sm">Loading...</p>
             </div>
         </div>
     </div>
-- 
cgit v1.2.3