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>
This commit is contained in:
Moritz 2026-04-21 10:20:39 +02:00
parent 27ab7dc1dc
commit e663386a19
4 changed files with 83 additions and 35 deletions

View file

@ -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>