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/partials/trello-board.html | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

(limited to 'web/templates/partials/trello-board.html')

diff --git a/web/templates/partials/trello-board.html b/web/templates/partials/trello-board.html
index 0b176cd..513c6e6 100644
--- a/web/templates/partials/trello-board.html
+++ b/web/templates/partials/trello-board.html
@@ -2,24 +2,24 @@
 <div class="board-card">
     <!-- Board Header -->
     <div class="flex items-center justify-between mb-4">
-        <h3 class="font-bold text-lg text-gray-900">{{.Name}}</h3>
+        <h3 class="font-medium text-lg text-white">{{.Name}}</h3>
     </div>
 
     <!-- Add Card Form (Collapsible) -->
     {{if .Lists}}
     <details class="mb-4">
-        <summary class="cursor-pointer text-sm text-indigo-600 hover:text-indigo-800 font-medium transition-colors">
+        <summary class="cursor-pointer text-sm text-white/70 hover:text-white font-medium transition-colors">
             + Add Card
         </summary>
         <form hx-post="/cards"
               hx-target="closest .board-card"
               hx-swap="outerHTML"
-              class="mt-3 space-y-2 bg-white/40 p-3 rounded-lg">
+              class="mt-3 space-y-2 bg-black/30 p-3 rounded-lg">
             <input type="hidden" name="board_id" value="{{.ID}}">
 
             <select name="list_id"
                     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 focus:ring-2 focus:ring-white/30 focus:border-transparent">
                 <option value="">Select list...</option>
                 {{range .Lists}}
                 <option value="{{.ID}}">{{.Name}}</option>
@@ -30,10 +30,10 @@
                    name="name"
                    placeholder="Card title"
                    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">
 
             <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 Card
             </button>
         </form>
@@ -51,24 +51,24 @@
                        hx-vals='{"card_id": "{{.ID}}"}'
                        hx-target="closest .trello-card-item"
                        hx-swap="outerHTML"
-                       class="mt-1 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer">
+                       class="mt-1 h-4 w-4 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-sm text-gray-900 mb-2">{{.Name}}</p>
+                    <p class="font-medium text-sm text-white mb-2">{{.Name}}</p>
                     <div class="flex flex-wrap gap-2 items-center">
                         {{if .ListName}}
-                        <span class="badge bg-gray-100 text-gray-700">
+                        <span class="badge bg-white/10 text-white/70">
                             {{.ListName}}
                         </span>
                         {{end}}
                         {{if .DueDate}}
-                        <span class="badge bg-red-100 text-red-800">
+                        <span class="badge bg-red-900/50 text-red-300">
                             Due: {{.DueDate.Format "Jan 2"}}
                         </span>
                         {{end}}
                         {{if .URL}}
                         <a href="{{.URL}}" target="_blank"
-                           class="text-trello hover:text-trello/80 text-xs font-medium ml-auto transition-colors">
+                           class="text-white/70 hover:text-white text-xs font-medium ml-auto transition-colors">
                             View →
                         </a>
                         {{end}}
-- 
cgit v1.2.3