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, 9 insertions, 9 deletions

diff --git a/web/templates/partials/plantoeat-meals.html b/web/templates/partials/plantoeat-meals.html
index 78e403e..1f016ef 100644
--- a/web/templates/partials/plantoeat-meals.html
+++ b/web/templates/partials/plantoeat-meals.html
@@ -1,19 +1,19 @@
 {{define "plantoeat-meals"}}
-<section class="card">
+<section class="card text-shadow-sm">
     <!-- Section Header with Brand Color -->
     <div class="flex items-center gap-3 mb-6">
         <div class="w-1 h-8 bg-plantoeat rounded"></div>
-        <h2 class="text-2xl font-bold text-gray-900">Upcoming Meals</h2>
+        <h2 class="text-2xl font-light text-white tracking-wide">Upcoming Meals</h2>
     </div>
 
     {{if .Meals}}
     <div class="space-y-3">
         {{range .Meals}}
-        <div class="border-l-4 border-plantoeat bg-green-50/50 pl-4 py-3 rounded-r-lg hover:bg-green-50 transition-colors">
-            <p class="font-medium text-gray-900">{{.RecipeName}}</p>
+        <div class="border-l-4 border-plantoeat bg-black/30 pl-4 py-3 rounded-r-lg hover:bg-black/40 transition-colors">
+            <p class="font-medium text-white">{{.RecipeName}}</p>
             <div class="flex justify-between items-center mt-2">
-                <span class="text-sm text-gray-600">{{.Date.Format "Mon, Jan 2"}}</span>
-                <span class="badge bg-green-100 text-green-800 capitalize">
+                <span class="text-sm text-white/60">{{.Date.Format "Mon, Jan 2"}}</span>
+                <span class="badge bg-green-900/50 text-green-300 capitalize">
                     {{.MealType}}
                 </span>
             </div>
@@ -22,11 +22,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="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
         </svg>
-        <h3 class="mt-4 text-lg font-medium text-gray-900">No meals planned</h3>
-        <p class="mt-2 text-sm text-gray-500">
+        <h3 class="mt-4 text-lg font-medium text-white">No meals planned</h3>
+        <p class="mt-2 text-sm text-white/50">
             Schedule your meals to see them here.
         </p>
     </div>