From e663386a1982e64ecff435ebef6b1e13bdfbd0e5 Mon Sep 17 00:00:00 2001
From: Moritz <moritz@moritz.run>
Date: Tue, 21 Apr 2026 10:20:39 +0200
Subject: [PATCH] ui: switch to white/light-blue summer palette

Replace the dark theme with a light/airy look: sky-blue gradient bg,
white cards with soft blue borders, sunny gradient brand mark, pastel
status chips, and readable slate tones.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web/templates/_dashboard_body.html | 16 +++----
 web/templates/base.html            | 75 ++++++++++++++++++++++++------
 web/templates/dashboard.html       |  6 +--
 web/templates/login.html           | 21 +++++----
 4 files changed, 83 insertions(+), 35 deletions(-)

diff --git a/web/templates/_dashboard_body.html b/web/templates/_dashboard_body.html
index 04f9251..af1bc73 100644
--- a/web/templates/_dashboard_body.html
+++ b/web/templates/_dashboard_body.html
@@ -77,16 +77,16 @@
 {% if not apply_allowed %}
 <div class="card p-4 border-red-900/50">
     <span class="chip chip-bad">apply blockiert</span>
-    <span class="ml-2 text-sm text-slate-300">{{ apply_block_reason }}</span>
+    <span class="ml-2 text-sm text-slate-600">{{ apply_block_reason }}</span>
 </div>
 {% endif %}
 
 <section class="card">
-    <div class="flex items-center justify-between px-4 py-3 border-b border-[#1e2335]">
+    <div class="flex items-center justify-between px-4 py-3 border-b border-soft">
         <h2 class="font-semibold">Wohnungen</h2>
         <span class="text-xs text-slate-400">{{ flats|length }} zuletzt gesehen</span>
     </div>
-    <div class="divide-y divide-[#1e2335]">
+    <div class="divide-y divide-soft">
         {% for flat in flats %}
         <div class="px-4 py-3 flex flex-col md:flex-row md:items-center gap-3">
             <div class="flex-1 min-w-0">
@@ -138,8 +138,8 @@
 
 <section class="grid grid-cols-1 lg:grid-cols-2 gap-6">
     <div class="card">
-        <div class="px-4 py-3 border-b border-[#1e2335]"><h2 class="font-semibold">Letzte Bewerbungen</h2></div>
-        <div class="divide-y divide-[#1e2335]">
+        <div class="px-4 py-3 border-b border-soft"><h2 class="font-semibold">Letzte Bewerbungen</h2></div>
+        <div class="divide-y divide-soft">
             {% for a in applications %}
             <div class="px-4 py-3 text-sm">
                 <div class="flex items-center gap-2">
@@ -159,13 +159,13 @@
     </div>
 
     <div class="card">
-        <div class="px-4 py-3 border-b border-[#1e2335]"><h2 class="font-semibold">Audit-Log</h2></div>
-        <div class="divide-y divide-[#1e2335]">
+        <div class="px-4 py-3 border-b border-soft"><h2 class="font-semibold">Audit-Log</h2></div>
+        <div class="divide-y divide-soft">
             {% for e in audit %}
             <div class="px-4 py-2 text-xs font-mono">
                 <span class="text-slate-500">{{ e.timestamp }}</span>
                 <span class="text-slate-400">{{ e.actor }}</span>
-                <span class="text-slate-200">{{ e.action }}</span>
+                <span class="text-slate-700">{{ e.action }}</span>
                 {% if e.details %}<span class="text-slate-500">— {{ e.details }}</span>{% endif %}
             </div>
             {% else %}
diff --git a/web/templates/base.html b/web/templates/base.html
index f923bd3..a1135ec 100644
--- a/web/templates/base.html
+++ b/web/templates/base.html
@@ -8,21 +8,66 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/htmx.org@2.0.3"></script>
     <style>
-        html { color-scheme: dark; }
-        body { background: #0b0d12; color: #e6e8ee; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif; }
-        .card { background: #121521; border: 1px solid #1e2335; border-radius: 12px; }
-        .btn { border-radius: 8px; padding: 0.4rem 0.9rem; font-weight: 500; transition: background 0.15s; }
-        .btn-primary { background: #5b8def; color: white; }
-        .btn-primary:hover { background: #4a7ce0; }
-        .btn-danger { background: #e14a56; color: white; }
-        .btn-danger:hover { background: #c63c48; }
-        .btn-ghost { background: #1e2335; color: #e6e8ee; }
-        .btn-ghost:hover { background: #2a3048; }
-        .chip { padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; }
-        .chip-ok { background: #1a3a2a; color: #7bd88f; border: 1px solid #2d5a3f; }
-        .chip-warn { background: #3a2a1a; color: #f5b26b; border: 1px solid #5a432d; }
-        .chip-bad { background: #3a1a1f; color: #e14a56; border: 1px solid #5a2d33; }
-        .chip-info { background: #1a253a; color: #7ca7ea; border: 1px solid #2d3f5a; }
+        :root {
+            --bg-from: #e4f0fb;
+            --bg-to:   #f7fbfe;
+            --surface: #ffffff;
+            --border:  #d8e6f3;
+            --text:    #10253f;
+            --muted:   #667d98;
+            --primary: #2f8ae0;
+            --primary-hover: #1f74c8;
+            --danger:  #e05a6a;
+            --danger-hover: #c44a59;
+            --ghost:   #eaf2fb;
+            --ghost-hover: #d5e5f4;
+            --accent:  #fbd76b;
+        }
+        html { color-scheme: light; }
+        body {
+            background: linear-gradient(180deg, var(--bg-from) 0%, var(--bg-to) 100%);
+            background-attachment: fixed;
+            color: var(--text);
+            font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
+        }
+        .card {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 14px;
+            box-shadow: 0 1px 2px rgba(16, 37, 63, 0.04);
+        }
+        .border-soft { border-color: var(--border) !important; }
+        .divide-soft > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }
+        .btn { border-radius: 9px; padding: 0.45rem 0.95rem; font-weight: 500; transition: background 0.15s, box-shadow 0.15s, transform 0.05s; }
+        .btn:active { transform: translateY(1px); }
+        .btn-primary { background: var(--primary); color: white; box-shadow: 0 1px 2px rgba(47, 138, 224, 0.25); }
+        .btn-primary:hover { background: var(--primary-hover); }
+        .btn-danger { background: var(--danger); color: white; }
+        .btn-danger:hover { background: var(--danger-hover); }
+        .btn-ghost { background: var(--ghost); color: var(--text); border: 1px solid var(--border); }
+        .btn-ghost:hover { background: var(--ghost-hover); }
+        .input {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            padding: 0.55rem 0.8rem;
+            width: 100%;
+            color: var(--text);
+            transition: border-color 0.15s, box-shadow 0.15s;
+        }
+        .input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 138, 224, 0.18); }
+        .chip { padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; display: inline-block; }
+        .chip-ok   { background: #e4f6ec; color: #1f8a4a; border: 1px solid #b7e4c7; }
+        .chip-warn { background: #fff4dd; color: #a36a1f; border: 1px solid #f5d48b; }
+        .chip-bad  { background: #fde6e9; color: #b8404e; border: 1px solid #f5b5bf; }
+        .chip-info { background: #e3effc; color: #1f5f99; border: 1px solid #b6d4f0; }
+        .brand-dot {
+            width: 2rem; height: 2rem; border-radius: 10px;
+            background: linear-gradient(135deg, #66b7f2 0%, #2f8ae0 60%, #fbd76b 100%);
+            box-shadow: 0 1px 4px rgba(47, 138, 224, 0.35);
+        }
+        a { color: var(--primary); }
+        a:hover { text-decoration: underline; }
     </style>
 </head>
 <body class="min-h-screen">
diff --git a/web/templates/dashboard.html b/web/templates/dashboard.html
index 2f406c8..e79bab5 100644
--- a/web/templates/dashboard.html
+++ b/web/templates/dashboard.html
@@ -1,14 +1,14 @@
 {% extends "base.html" %}
 {% block title %}lazyflat dashboard{% endblock %}
 {% block body %}
-<header class="border-b border-[#1e2335]">
+<header class="border-b border-soft bg-white/70 backdrop-blur">
     <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
         <div class="flex items-center gap-3">
-            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-[#5b8def] to-[#7bd88f]"></div>
+            <div class="brand-dot"></div>
             <h1 class="text-xl font-semibold">lazyflat</h1>
         </div>
         <div class="flex items-center gap-3 text-sm">
-            <span class="text-slate-400">{{ user }}</span>
+            <span class="text-slate-500">{{ user }}</span>
             <form method="post" action="/logout">
                 <button class="btn btn-ghost text-sm" type="submit">Logout</button>
             </form>
diff --git a/web/templates/login.html b/web/templates/login.html
index de74e42..80c5e42 100644
--- a/web/templates/login.html
+++ b/web/templates/login.html
@@ -3,23 +3,26 @@
 {% block body %}
 <main class="flex min-h-screen items-center justify-center p-4">
     <div class="card w-full max-w-sm p-8">
-        <h1 class="text-2xl font-semibold mb-1">lazyflat</h1>
-        <p class="text-sm text-slate-400 mb-6">Anmeldung erforderlich</p>
+        <div class="flex items-center gap-3 mb-6">
+            <div class="brand-dot"></div>
+            <div>
+                <h1 class="text-2xl font-semibold leading-tight">lazyflat</h1>
+                <p class="text-sm text-slate-500">Anmeldung erforderlich</p>
+            </div>
+        </div>
 
         {% if error %}
-            <div class="chip chip-bad inline-block mb-4">{{ error }}</div>
+            <div class="chip chip-bad mb-4">{{ error }}</div>
         {% endif %}
 
         <form method="post" action="/login" class="space-y-4">
             <div>
-                <label class="block text-xs uppercase tracking-wide text-slate-400 mb-1">Benutzer</label>
-                <input type="text" name="username" autocomplete="username" required
-                       class="w-full bg-[#0b0d12] border border-[#1e2335] rounded-lg px-3 py-2 focus:outline-none focus:border-[#5b8def]">
+                <label class="block text-xs uppercase tracking-wide text-slate-500 mb-1">Benutzer</label>
+                <input class="input" type="text" name="username" autocomplete="username" required>
             </div>
             <div>
-                <label class="block text-xs uppercase tracking-wide text-slate-400 mb-1">Passwort</label>
-                <input type="password" name="password" autocomplete="current-password" required
-                       class="w-full bg-[#0b0d12] border border-[#1e2335] rounded-lg px-3 py-2 focus:outline-none focus:border-[#5b8def]">
+                <label class="block text-xs uppercase tracking-wide text-slate-500 mb-1">Passwort</label>
+                <input class="input" type="password" name="password" autocomplete="current-password" required>
             </div>
             <button type="submit" class="btn btn-primary w-full">Anmelden</button>
         </form>