85 lines
4.1 KiB
HTML
85 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>{{ driver.name }} - Details</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
|
|
|
|
:root {
|
|
--bg-body: {{ '#0a0e17' if current_user.theme == 'dark' else '#f8fafc' }};
|
|
--bg-card: {{ '#0f172a' if current_user.theme == 'dark' else '#ffffff' }};
|
|
--text-main: {{ '#e2e8f0' if current_user.theme == 'dark' else '#1e293b' }};
|
|
--border-color: {{ 'rgba(255,255,255,0.05)' if current_user.theme == 'dark' else '#e2e8f0' }};
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-body);
|
|
color: var(--text-main);
|
|
font-family: 'Inter', sans-serif;
|
|
transition: background 0.3s ease;
|
|
}
|
|
.card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="p-4 md:p-8">
|
|
<div class="max-w-4xl mx-auto">
|
|
<!-- Header -->
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12 gap-6">
|
|
<div>
|
|
<h1 class="text-5xl font-black italic uppercase tracking-tighter">
|
|
{{ driver.name }} <span class="text-blue-600">#{{ driver.car_number }}</span>
|
|
</h1>
|
|
<p class="text-slate-500 font-bold uppercase tracking-widest text-xs mt-2">Driver Profile & Schedule</p>
|
|
</div>
|
|
<a href="/" class="bg-blue-600 text-white px-8 py-4 rounded-2xl text-xs uppercase font-black hover:bg-blue-700 transition-all shadow-lg shadow-blue-600/20">Zurück zum Planner</a>
|
|
</div>
|
|
|
|
<!-- Stats Grid -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-12">
|
|
<div class="card p-6 rounded-3xl">
|
|
<div class="text-[10px] text-slate-500 uppercase font-bold mb-1 tracking-widest">Verbrauch / Runde</div>
|
|
<div class="text-4xl font-black text-green-500">{{ driver.cons_per_lap }}<span class="text-lg ml-1">L</span></div>
|
|
</div>
|
|
<div class="card p-6 rounded-3xl">
|
|
<div class="text-[10px] text-slate-500 uppercase font-bold mb-1 tracking-widest">Ø Rundenzeit</div>
|
|
<div class="text-4xl font-black text-blue-600">{{ driver.avg_lap_time }}<span class="text-lg ml-1">s</span></div>
|
|
</div>
|
|
<div class="card p-6 rounded-3xl">
|
|
<div class="text-[10px] text-slate-500 uppercase font-bold mb-1 tracking-widest">Anzahl Stints</div>
|
|
<div class="text-4xl font-black text-orange-500">{{ stints|length }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Schedule -->
|
|
<h2 class="text-2xl font-black mb-6 uppercase tracking-tight italic flex items-center gap-3">
|
|
<span class="w-8 h-1 bg-blue-600 rounded-full"></span>
|
|
Einsatzplanung
|
|
</h2>
|
|
|
|
<div class="space-y-4">
|
|
{% for s in stints %}
|
|
<div class="card p-6 rounded-3xl flex justify-between items-center border-l-8 border-blue-600 transition-transform hover:scale-[1.01]">
|
|
<div>
|
|
<div class="text-[10px] text-slate-500 font-bold uppercase tracking-widest mb-1">{{ s.date }}</div>
|
|
<div class="text-3xl font-black tracking-tight">{{ s.start }} — {{ s.end }}</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-sm font-black uppercase text-blue-600 mb-1">Stint #{{ s.number }}</div>
|
|
<div class="text-xs font-bold text-slate-500">{{ s.laps }} Runden · {{ s.fuel }}L Start</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-20 card rounded-[2rem] opacity-50">
|
|
<p class="font-black uppercase tracking-widest text-slate-400">Keine Stints geplant</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |