132 lines
7.2 KiB
HTML
132 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<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; 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); }
|
|
.dark .stint-card:hover { background: rgba(30, 41, 59, 0.7); }
|
|
.light .stint-card:hover { background: rgba(241, 245, 249, 1); }
|
|
.handle { cursor: grab; }
|
|
</style>
|
|
</head>
|
|
<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>
|
|
<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>
|
|
<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="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 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 id="stints-car-{{ car_num }}" class="space-y-3">
|
|
{% for s in schedule %}
|
|
<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="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="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 %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</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',
|
|
headers: {'Content-Type': 'application/json'},
|
|
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) {
|
|
Sortable.create(el, {
|
|
handle: '.handle', animation: 150,
|
|
onEnd: function() {
|
|
const order = Array.from(el.children).map(item => item.dataset.id);
|
|
fetch('/reorder_stints', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({order: order})
|
|
}).then(() => window.location.reload());
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |