52 lines
2.9 KiB
HTML
52 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<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-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-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-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-600 dark:text-green-500">{{ driver.cons_per_lap }}L</div>
|
|
</div>
|
|
<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-600 dark:text-blue-500">{{ driver.avg_lap_time }}s</div>
|
|
</div>
|
|
<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-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-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-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> |