| {% extends "base.html" %} |
| {% block title %}Setup - FireTracker{% endblock %} |
| {% block content %} |
| <div class="max-w-lg mx-auto mt-12"> |
| <div class="text-center mb-8"> |
| <h1 class="text-3xl font-bold text-green-400 mb-2">Willkommen bei FireTracker</h1> |
| <p class="text-slate-400">3 Zahlen — und du siehst dein FI-Datum.</p> |
| </div> |
|
|
| <form action="/api/setup" method="POST" class="bg-slate-800 rounded-xl p-8 border border-slate-700 space-y-6"> |
| <div> |
| <label class="block text-sm font-medium text-slate-300 mb-2">Monatliches Netto-Einkommen</label> |
| <div class="relative"> |
| <input type="number" name="monthly_income" step="50" required |
| class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 text-lg text-white focus:border-green-400 focus:ring-1 focus:ring-green-400 outline-none" |
| placeholder="2.500"> |
| <span class="absolute right-4 top-3.5 text-slate-400">EUR</span> |
| </div> |
| </div> |
|
|
| <div> |
| <label class="block text-sm font-medium text-slate-300 mb-2">Monatliche Ausgaben</label> |
| <div class="relative"> |
| <input type="number" name="monthly_expenses" step="50" required |
| class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 text-lg text-white focus:border-green-400 focus:ring-1 focus:ring-green-400 outline-none" |
| placeholder="1.500"> |
| <span class="absolute right-4 top-3.5 text-slate-400">EUR</span> |
| </div> |
| </div> |
|
|
| <div> |
| <label class="block text-sm font-medium text-slate-300 mb-2">Geburtsjahr</label> |
| <input type="number" name="birth_year" min="1950" max="2010" required |
| class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 text-lg text-white focus:border-green-400 focus:ring-1 focus:ring-green-400 outline-none" |
| placeholder="2002"> |
| </div> |
|
|
| <button type="submit" class="w-full fire-gradient text-white font-semibold py-3 rounded-lg text-lg hover:opacity-90 transition"> |
| Zeig mir mein FI-Datum |
| </button> |
|
|
| <p class="text-center text-sm text-slate-500">Du kannst alles spaeter aendern. Assets kommen danach.</p> |
| </form> |
| </div> |
| {% endblock %} |
|
|
