admin/raceplaner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Einführung von Light Mode

Browse Source
This commit is contained in:
Thomas Arnold
2026-01-23 23:08:24 +01:00
parent d98f07a4b2
commit db6d11cf60
6 changed files with 182 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/templates/driver_detail.html
View File

@@ -1,47 +1,52 @@
<!DOCTYPE html>
<html lang="de">
<html lang="de" class="{% if current_user.theme == 'dark' %}dark{% endif %}">
<head>
<meta charset="UTF-8">
<title>{{ driver.name }} - Details</title>
<script>
tailwind.config = { darkMode: 'class' }
</script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-[#0a0e17] text-white p-8">
<body class="bg-slate-50 text-slate-900 dark:bg-[#0a0e17] dark:text-white p-8 transition-colors">
<div class="max-w-4xl mx-auto">
<div class="flex justify-between items-center mb-8">
<h1 class="text-4xl font-black uppercase italic">{{ driver.name }} <span class="text-blue-500">#{{ driver.car_number }}</span></h1>
<a href="/" class="bg-slate-800 px-4 py-2 rounded text-xs uppercase font-bold">Zurück</a>
<a href="/" class="bg-slate-200 dark:bg-slate-800 text-slate-800 dark:text-white px-4 py-2 rounded text-xs uppercase font-bold hover:bg-blue-500 hover:text-white transition-all">Zurück</a>
</div>
<div class="grid grid-cols-3 gap-4 mb-8">
<div class="bg-slate-900/50 p-4 rounded-xl border border-white/5">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<div class="bg-white dark:bg-slate-900/50 p-4 rounded-xl border border-slate-200 dark:border-white/5 shadow-sm">
<div class="text-[10px] text-slate-500 uppercase font-bold">Verbrauch/Runde</div>
<div class="text-2xl font-black text-green-500">{{ driver.cons_per_lap }}L</div>
<div class="text-2xl font-black text-green-600 dark:text-green-500">{{ driver.cons_per_lap }}L</div>
</div>
<div class="bg-slate-900/50 p-4 rounded-xl border border-white/5">
<div class="bg-white dark:bg-slate-900/50 p-4 rounded-xl border border-slate-200 dark:border-white/5 shadow-sm">
<div class="text-[10px] text-slate-500 uppercase font-bold">Ø Rundenzeit</div>
<div class="text-2xl font-black text-blue-500">{{ driver.avg_lap_time }}s</div>
<div class="text-2xl font-black text-blue-600 dark:text-blue-500">{{ driver.avg_lap_time }}s</div>
</div>
<div class="bg-slate-900/50 p-4 rounded-xl border border-white/5">
<div class="bg-white dark:bg-slate-900/50 p-4 rounded-xl border border-slate-200 dark:border-white/5 shadow-sm">
<div class="text-[10px] text-slate-500 uppercase font-bold">Stints Gesamt</div>
<div class="text-2xl font-black text-orange-500">{{ stints|length }}</div>
<div class="text-2xl font-black text-orange-600 dark:text-orange-500">{{ stints|length }}</div>
</div>
</div>
<h2 class="text-xl font-bold mb-4 uppercase text-slate-400">Geplante Einsätze</h2>
<div class="space-y-2">
{% for s in stints %}
<div class="bg-slate-900/80 p-4 rounded-lg flex justify-between items-center border-l-4 border-blue-600">
<div class="bg-white dark:bg-slate-900/80 p-4 rounded-lg flex justify-between items-center border-l-4 border-blue-600 shadow-sm">
<div>
<div class="text-[10px] text-slate-500 font-mono">{{ s.date }}</div>
<div class="text-lg font-black">{{ s.start }} - {{ s.end }}</div>
</div>
<div class="text-right">
<div class="text-sm font-bold">{{ s.laps }} Runden</div>
<div class="text-xs text-green-500">{{ s.fuel }}L Benzin</div>
<div class="text-xs font-bold text-slate-500 uppercase">Stint #{{ s.number }}</div>
<div class="text-sm font-black">{{ s.laps }} Runden</div>
</div>
</div>
{% else %}
<div class="text-center py-12 text-slate-500 italic">Keine Stints für diesen Fahrer geplant.</div>
{% endfor %}
</div>
</div>
</body>
</html>
</html>

0
app/templates/index.h
View File

0
app/templates/index.hmtl
View File

173
app/templates/index.html
View File

@@ -1,124 +1,81 @@
<!DOCTYPE html>
<html lang="de">
<html lang="de" class="{% if current_user.theme == 'dark' %}dark{% endif %}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RACEPLANNER 2026</title>
<script>
tailwind.config = {
darkMode: 'class',
}
</script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
body { font-family: 'Inter', sans-serif; background-color: #0a0e17; color: #e2e8f0; }
.glass { background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.05); }
body { font-family: 'Inter', sans-serif; transition: background-color 0.3s, color 0.3s; }
.glass { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); border: 1px solid rgba(0,0,0,0.05); }
.dark .glass { background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255,255,255,0.05); }
.stint-card { transition: all 0.2s ease; border-left: 4px solid transparent; }
.stint-card:hover { transform: translateX(4px); background: rgba(30, 41, 59, 0.7); }
.stint-card:hover { transform: translateX(4px); }
.dark .stint-card:hover { background: rgba(30, 41, 59, 0.7); }
.light .stint-card:hover { background: rgba(241, 245, 249, 1); }
.handle { cursor: grab; }
input, select { background: #0f172a; border: 1px solid #1e293b; color: white; padding: 0.5rem; border-radius: 0.375rem; }
</style>
</head>
<body class="p-4 md:p-8">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row justify-between items-center mb-8 gap-4">
<h1 class="text-3xl font-black italic tracking-tighter text-blue-500 uppercase">Raceplanner <span class="text-white">2026</span></h1>
<div class="flex gap-4 items-center glass p-4 rounded-xl">
<form action="/save_scenario" method="POST" class="flex gap-2">
<input type="text" name="scenario_name" placeholder="Scenario Name" class="text-xs w-32" required>
<button class="bg-green-600 hover:bg-green-500 text-[10px] font-bold px-3 py-2 rounded uppercase">Save</button>
</form>
<form action="/load_scenario" method="POST" class="flex gap-2 border-l border-slate-700 pl-4">
<select name="scenario_file" class="text-xs w-32">
{% for s in scenarios %}<option value="{{ s }}">{{ s }}</option>{% endfor %}
</select>
<button class="bg-blue-600 hover:bg-blue-500 text-[10px] font-bold px-3 py-2 rounded uppercase">Load</button>
</form>
<a href="/logout" class="text-xs text-slate-500 hover:text-white ml-2">Logout</a>
</div>
<body class="bg-slate-50 text-slate-900 dark:bg-[#0a0e17] dark:text-e2e8f0 min-h-screen">
<nav class="glass sticky top-0 z-50 px-6 py-4 flex justify-between items-center mb-8 border-b dark:border-white/5">
<div class="flex items-center gap-4">
<h1 class="text-2xl font-black italic tracking-tighter text-blue-600 dark:text-blue-500">RACEPLANNER <span class="text-slate-400">2026</span></h1>
</div>
<form action="/update_config" method="POST" class="glass p-6 rounded-2xl mb-12 grid grid-cols-2 md:grid-cols-6 gap-6 items-end">
<div class="col-span-2">
<label class="block text-[10px] uppercase font-bold text-slate-500 mb-2">Race Start</label>
<input type="datetime-local" name="start_datetime" value="{{ config.start_time.strftime('%Y-%m-%dT%H:%M') }}" class="w-full font-mono text-sm">
<div class="flex items-center gap-4">
<!-- Theme Toggle -->
<button onclick="toggleTheme()" class="p-2 rounded-full bg-slate-200 dark:bg-slate-800 hover:ring-2 ring-blue-500 transition-all">
<span id="theme-icon-light" class="hidden dark:block">☀️</span>
<span id="theme-icon-dark" class="block dark:hidden">🌙</span>
</button>
<div class="text-right">
<div class="text-[10px] font-bold uppercase opacity-50">User</div>
<div class="text-sm font-bold">{{ current_user.username }}</div>
</div>
<div><label class="block text-[10px] uppercase font-bold text-slate-500 mb-2">Dur(h)</label><input type="number" name="race_duration_hours" value="{{ config.race_duration_hours }}" class="w-full text-center"></div>
<div><label class="block text-[10px] uppercase font-bold text-slate-500 mb-2">Tank</label><input type="number" step="0.1" name="tank_capacity" value="{{ config.tank_capacity }}" class="w-full text-center"></div>
<div><label class="block text-[10px] uppercase font-bold text-slate-500 mb-2">Box(s)</label><input type="number" name="min_pit_stop_sec" value="{{ config.min_pit_stop_sec }}" class="w-full text-center"></div>
<div class="flex items-center gap-2 pb-3">
<input type="checkbox" name="always_change_tires" id="tires" {% if config.always_change_tires %}checked{% endif %}>
<label for="tires" class="text-[10px] uppercase font-bold text-slate-400">Force Tires</label>
<button type="submit" class="ml-4 bg-blue-600 hover:bg-blue-500 text-white font-black text-xs px-6 py-2 rounded uppercase shadow-lg shadow-blue-900/20">Apply</button>
</div>
</form>
<a href="/logout" class="bg-red-500/10 text-red-500 px-4 py-2 rounded-lg text-xs font-bold uppercase hover:bg-red-500 hover:text-white transition-all">Logout</a>
</div>
</nav>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
{% for car_num, drivers, schedule in [(1, car1_drivers, schedule1), (2, car2_drivers, schedule2)] %}
<div class="max-w-[1400px] mx-auto px-6 pb-20">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
{% for car_num in [1, 2] %}
{% set schedule = car1 if car_num == 1 else car2 %}
<div class="space-y-6">
<div class="flex items-center justify-between border-b border-slate-800 pb-4">
<h2 class="text-2xl font-black italic uppercase"><span class="text-blue-500">#{{ car_num }}</span> Vehicle Dashboard</h2>
<div class="flex gap-2">
<a href="/export/car/{{ car_num }}" target="_blank" class="bg-slate-800 hover:bg-slate-700 text-[10px] font-bold px-3 py-1.5 rounded uppercase">PDF Plan</a>
<a href="/generate_schedule/{{ car_num }}" class="bg-red-950 text-red-400 border border-red-900/50 text-[10px] font-bold px-3 py-1.5 rounded uppercase">Auto-Generate</a>
</div>
<div class="flex justify-between items-end border-b-2 border-blue-600 pb-2">
<h2 class="text-4xl font-black italic">CAR <span class="text-blue-600">#{{ car_num }}</span></h2>
<a href="/export_pdf/{{ car_num }}" class="bg-blue-600 text-white px-4 py-2 rounded font-bold text-xs uppercase tracking-widest hover:bg-blue-700">PDF Export</a>
</div>
<div class="space-y-3">
{% for d in drivers %}
<form action="/update_driver/{{ d.id }}" method="POST" class="glass p-4 rounded-xl flex items-center gap-4 stint-card">
<div class="w-8 h-8 rounded-full bg-orange-500/20 text-orange-500 flex items-center justify-center font-black text-xs">{{ stint_counts.get(d.id, 0) }}</div>
<div class="flex-1"><input type="text" name="name" value="{{ d.name }}" class="bg-transparent border-none p-0 font-bold text-blue-400 w-full"></div>
<div class="text-right"><label class="block text-[8px] uppercase text-slate-500">L/R</label><input type="number" step="0.1" name="cons" value="{{ d.cons_per_lap }}" class="w-16 bg-slate-900/50 text-[10px] text-center"></div>
<div class="text-right"><label class="block text-[8px] uppercase text-slate-500">Sec</label><input type="number" step="0.1" name="lap_time" value="{{ d.avg_lap_time }}" class="w-16 bg-slate-900/50 text-[10px] text-center"></div>
<div class="flex gap-2 ml-auto">
<button type="submit" class="bg-blue-600/20 text-blue-400 text-[10px] px-2 py-1 rounded font-black border border-blue-600/30">OK</button>
<a href="/export/driver/{{ d.id }}" target="_blank" class="bg-gray-800 px-2 py-1 rounded text-xs hover:bg-green-600">📄</a>
<a href="/driver/{{ d.id }}" class="bg-gray-800 px-2 py-1 rounded text-xs hover:bg-blue-600">👁️</a>
<a href="/delete_driver/{{ d.id }}" class="text-slate-600 hover:text-red-500"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M6 18L18 6M6 6l12 12"/></svg></a>
</div>
</form>
{% endfor %}
<form action="/add_driver" method="POST" class="flex gap-2 mt-4">
<input type="hidden" name="car_number" value="{{ car_num }}">
<input type="text" name="name" placeholder="Driver Name" class="flex-1 text-sm h-10" required>
<input type="number" step="0.1" name="cons" placeholder="L/R" class="w-20 text-sm h-10">
<input type="number" step="0.1" name="lap_time" placeholder="Sec" class="w-20 text-sm h-10">
<button class="bg-blue-600 text-white font-black text-[10px] px-6 py-2 rounded uppercase">Add</button>
</form>
</div>
<div class="relative py-8">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div class="w-full border-t border-slate-800"></div>
</div>
<div class="relative flex justify-center">
<span class="bg-[#0a0e17] px-4 text-xs font-black text-slate-500 uppercase tracking-widest">Race Schedule #{{ car_num }}</span>
</div>
</div>
<div id="stints-car-{{ car_num }}" class="space-y-2">
<div id="stints-car-{{ car_num }}" class="space-y-3">
{% for s in schedule %}
<div class="stint-item glass rounded-xl p-4 stint-card grid grid-cols-12 gap-2 items-center" data-id="{{ s.stint_id }}">
<div class="col-span-1 text-sm font-black text-blue-400">#{{ s.number }}</div>
<div class="col-span-1 handle text-slate-700 hover:text-slate-400">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M7 7h2v2H7V7zm0 4h2v2H7v-2zm4-4h2v2h-2V7zm0 4h2v2h-2v-2zM7 15h2v2H7v-2zm4 0h2v2h-2v-2z"/></svg>
<div data-id="{{ s.id }}" class="stint-card glass p-4 rounded-xl flex items-center gap-4 border-l-4 {% if s.is_finish %}border-l-blue-500{% else %}border-l-slate-300 dark:border-l-slate-700{% endif %}">
<div class="handle text-slate-400 hover:text-blue-500">⠿</div>
<div class="w-12 text-center">
<div class="text-[10px] font-bold text-slate-500">STINT</div>
<div class="text-xl font-black">#{{ s.number }}</div>
</div>
<div class="col-span-2 font-mono">
<div class="text-[11px] font-bold text-slate-300 mb-0.5">{{ s.date }}</div>
<div class="text-sm font-black text-blue-500">{{ s.start }}</div>
<div class="text-[10px] text-slate-500">{{ s.end }}</div>
</div>
<div class="col-span-4">
<select onchange="updateStintDriver('{{ s.stint_id }}', this.value)" class="w-full bg-slate-900/80 border-slate-800 text-xs font-bold py-1">
{% for d in drivers %}<option value="{{ d.id }}" {% if d.id == s.driver_id %}selected{% endif %}>{{ d.name }}</option>{% endfor %}
<div class="flex-1">
<div class="flex items-center gap-2 mb-1">
<span class="text-[10px] font-mono bg-slate-200 dark:bg-slate-800 px-2 py-0.5 rounded">{{ s.date }}</span>
<span class="text-sm font-black">{{ s.start }} — {{ s.end }}</span>
</div>
<select onchange="updateStintDriver({{ s.id }}, this.value)" class="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded px-2 py-1 text-sm font-bold focus:ring-2 ring-blue-500 outline-none">
{% for d in drivers %}
<option value="{{ d.id }}" {% if d.id == s.driver_id %}selected{% endif %}>{{ d.name }}</option>
{% endfor %}
</select>
</div>
<div class="col-span-2 text-center">
<div class="font-black">{{ s.laps }} R</div>
<div class="text-[10px] text-green-500">{{ s.fuel }}L</div>
</div>
<div class="col-span-2 text-right">
{% if s.is_finish %}<span class="bg-blue-600 text-[8px] font-black px-2 py-1 rounded text-white uppercase">Finish</span>
{% elif s.change_tires %}<span class="bg-green-600/20 text-green-500 text-[8px] font-black px-2 py-1 rounded border border-green-500/30 uppercase">Tires</span>{% endif %}
<div class="text-right min-w-[80px]">
<div class="text-[10px] font-bold text-green-600 dark:text-green-500">{{ s.fuel }}L</div>
<div class="text-lg font-black">{{ s.laps }} <span class="text-[10px] text-slate-500 uppercase">Laps</span></div>
{% if s.is_finish %}<span class="bg-blue-600 text-white text-[8px] font-black px-2 py-1 rounded uppercase">Finish</span>
{% elif s.change_tires %}<span class="bg-green-600/20 text-green-600 dark:text-green-500 text-[8px] font-black px-2 py-1 rounded border border-green-500/30 uppercase">Tires</span>{% endif %}
</div>
</div>
{% endfor %}
@@ -129,6 +86,23 @@
</div>
<script>
function toggleTheme() {
const isDark = document.documentElement.classList.contains('dark');
const newTheme = isDark ? 'light' : 'dark';
if (newTheme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
fetch('/update_theme', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({theme: newTheme})
});
}
function updateStintDriver(stintId, driverId) {
fetch('/update_stint_driver', {
method: 'POST',
@@ -136,6 +110,7 @@
body: JSON.stringify({stint_id: stintId, driver_id: driverId})
}).then(() => window.location.reload());
}
[1, 2].forEach(num => {
const el = document.getElementById('stints-car-' + num);
if(el) {
@@ -154,4 +129,4 @@
});
</script>
</body>
</html>
</html>

21
app/templates/login.html
View File

@@ -5,21 +5,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RacePlanner Login</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body { font-family: 'Inter', sans-serif; }
</style>
</head>
<body class="bg-gray-900 text-white flex items-center justify-center h-screen">
<div class="bg-gray-800 p-8 rounded-2xl shadow-2xl w-full max-w-sm border border-gray-700">
<h1 class="text-3xl font-black text-blue-500 mb-6 text-center italic">RACEPLANNER</h1>
<body class="bg-slate-100 flex items-center justify-center h-screen">
<div class="bg-white p-8 rounded-2xl shadow-xl w-full max-w-sm border border-slate-200">
<h1 class="text-3xl font-black text-blue-600 mb-6 text-center italic">RACEPLANNER</h1>
<form action="/login" method="POST" class="space-y-4">
<div>
<label class="block text-xs font-bold text-gray-500 uppercase mb-1">Benutzer</label>
<input type="text" name="username" class="w-full bg-gray-900 border-none rounded p-3" required>
<label class="block text-xs font-bold text-slate-400 uppercase mb-1">Benutzer</label>
<input type="text" name="username" class="w-full bg-slate-50 border border-slate-200 rounded p-3 text-slate-900 focus:ring-2 ring-blue-500 outline-none" placeholder="z.B. mscaltenbach" required>
</div>
<div>
<label class="block text-xs font-bold text-gray-500 uppercase mb-1">Passwort</label>
<input type="password" name="password" class="w-full bg-gray-900 border-none rounded p-3" required>
<label class="block text-xs font-bold text-slate-400 uppercase mb-1">Passwort</label>
<input type="password" name="password" class="w-full bg-slate-50 border border-slate-200 rounded p-3 text-slate-900 focus:ring-2 ring-blue-500 outline-none" required>
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 font-bold py-3 rounded uppercase transition">Anmelden</button>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-black py-3 rounded-lg uppercase tracking-widest transition-all">Anmelden</button>
</form>
</div>
</body>
</html>
</html>