File size: 2,368 Bytes
f91bd05 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | {% 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 %}
|