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>

1 files changed, 17 insertions, 17 deletions

diff --git a/web/templates/partials/todoist-tasks.html b/web/templates/partials/todoist-tasks.html
index 25faf47..3296745 100644
--- a/web/templates/partials/todoist-tasks.html
+++ b/web/templates/partials/todoist-tasks.html
@@ -1,30 +1,30 @@
 {{define "todoist-tasks"}}
-<section class="card" id="todoist-list">
+<section class="card text-shadow-sm" id="todoist-list">
     <!-- Section Header with Brand Color -->
     <div class="flex items-center gap-3 mb-6">
         <div class="w-1 h-8 bg-todoist rounded"></div>
-        <h2 class="text-2xl font-bold text-gray-900">Todoist Tasks</h2>
+        <h2 class="text-2xl font-light text-white tracking-wide">Todoist Tasks</h2>
     </div>
 
     <!-- Quick Add Form -->
     {{if .Projects}}
     <details class="mb-6" open>
-        <summary class="cursor-pointer text-sm text-indigo-600 hover:text-indigo-800 font-medium transition-colors mb-2">
+        <summary class="cursor-pointer text-sm text-white/70 hover:text-white font-medium transition-colors mb-2">
             + Quick Add Task
         </summary>
         <form hx-post="/tasks"
               hx-target="#todoist-list"
               hx-swap="outerHTML"
-              class="mt-3 space-y-3 bg-white/40 p-4 rounded-lg">
+              class="mt-3 space-y-3 bg-black/30 p-4 rounded-lg">
 
             <input type="text"
                    name="content"
                    placeholder="Task content"
                    required
-                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                   class="w-full px-3 py-2 bg-black/40 border border-white/20 rounded-lg text-sm text-white placeholder-white/50 focus:ring-2 focus:ring-white/30 focus:border-transparent">
 
             <select name="project_id"
-                    class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                    class="w-full px-3 py-2 bg-black/40 border border-white/20 rounded-lg text-sm text-white focus:ring-2 focus:ring-white/30 focus:border-transparent">
                 <option value="">Select project (optional)...</option>
                 {{range .Projects}}
                 <option value="{{.ID}}">{{.Name}}</option>
@@ -32,7 +32,7 @@
             </select>
 
             <button type="submit"
-                    class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
+                    class="w-full bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                 Add Task
             </button>
         </form>
@@ -51,31 +51,31 @@
                    hx-vals='{"task_id": "{{.ID}}"}'
                    hx-target="closest .todoist-task-item"
                    hx-swap="outerHTML"
-                   class="mt-1 h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer">
+                   class="mt-1 h-5 w-5 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer">
 
             <div class="flex-1">
-                <p class="font-medium text-gray-900 {{if .Completed}}line-through text-gray-500{{end}}">
+                <p class="font-medium text-white {{if .Completed}}line-through text-white/50{{end}}">
                     {{.Content}}
                 </p>
                 {{if .Description}}
-                <p class="text-sm text-gray-600 mt-1">{{.Description}}</p>
+                <p class="text-sm text-white/60 mt-1">{{.Description}}</p>
                 {{end}}
                 <div class="flex flex-wrap gap-2 mt-2">
                     {{if .ProjectName}}
-                    <span class="badge bg-gray-100 text-gray-700">{{.ProjectName}}</span>
+                    <span class="badge bg-white/10 text-white/70">{{.ProjectName}}</span>
                     {{end}}
                     {{if .DueDate}}
-                    <span class="badge bg-yellow-100 text-yellow-800">
+                    <span class="badge bg-yellow-900/50 text-yellow-300">
                         Due: {{.DueDate.Format "Jan 2"}}
                     </span>
                     {{end}}
                     {{range .Labels}}
-                    <span class="badge bg-blue-100 text-blue-800">{{.}}</span>
+                    <span class="badge bg-blue-900/50 text-blue-300">{{.}}</span>
                     {{end}}
                 </div>
             </div>
             {{if .URL}}
-            <a href="{{.URL}}" target="_blank" class="text-todoist hover:text-todoist/80 transition-colors">
+            <a href="{{.URL}}" target="_blank" class="text-white/70 hover:text-white transition-colors">
                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                 </svg>
@@ -86,11 +86,11 @@
     </div>
     {{else}}
     <div class="text-center py-16">
-        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg class="mx-auto h-12 w-12 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
         </svg>
-        <h3 class="mt-4 text-lg font-medium text-gray-900">No tasks found</h3>
-        <p class="mt-2 text-sm text-gray-500">
+        <h3 class="mt-4 text-lg font-medium text-white">No tasks found</h3>
+        <p class="mt-2 text-sm text-white/50">
             All tasks completed or no tasks available.
         </p>
     </div>