Wiederherstellung von Funktionalität
This commit is contained in:
@@ -1,50 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de" class="{% if current_user.theme == 'dark' %}dark{% endif %}">
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{{ driver.name }} - Details</title>
|
||||
<script>
|
||||
tailwind.config = { darkMode: 'class' }
|
||||
</script>
|
||||
<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="bg-slate-50 text-slate-900 dark:bg-[#0a0e17] dark:text-white p-8 transition-colors">
|
||||
<body class="p-4 md:p-8">
|
||||
<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>
|
||||
<!-- 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>
|
||||
|
||||
<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>
|
||||
<!-- 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="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 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="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 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>
|
||||
|
||||
<h2 class="text-xl font-bold mb-4 uppercase text-slate-400">Geplante Einsätze</h2>
|
||||
<div class="space-y-2">
|
||||
<!-- 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="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 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-mono">{{ s.date }}</div>
|
||||
<div class="text-lg font-black">{{ s.start }} - {{ s.end }}</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-xs font-bold text-slate-500 uppercase">Stint #{{ s.number }}</div>
|
||||
<div class="text-sm font-black">{{ s.laps }} Runden</div>
|
||||
<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-12 text-slate-500 italic">Keine Stints für diesen Fahrer geplant.</div>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user