147 lines
9.0 KiB
HTML
147 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>RACEPLANNER 2026</title>
|
|
<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');
|
|
: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' }};
|
|
--text-muted: {{ '#64748b' if current_user.theme == 'dark' else '#94a3b8' }};
|
|
--border-color: {{ 'rgba(255,255,255,0.05)' if current_user.theme == 'dark' else '#e2e8f0' }};
|
|
}
|
|
body { font-family: 'Inter', sans-serif; background-color: var(--bg-body); color: var(--text-main); transition: background 0.3s ease; }
|
|
.glass { background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
|
|
.stint-card { transition: all 0.2s ease; border-left: 4px solid transparent; background: {{ 'rgba(30, 41, 59, 0.5)' if current_user.theme == 'dark' else '#f1f5f9' }}; }
|
|
.stint-card:hover { transform: translateX(4px); background: {{ 'rgba(30, 41, 59, 0.8)' if current_user.theme == 'dark' else '#e2e8f0' }}; }
|
|
.handle { cursor: grab; }
|
|
select { background: {{ '#1e293b' if current_user.theme == 'dark' else '#ffffff' }}; border: 1px solid var(--border-color); color: var(--text-main); outline: none; }
|
|
</style>
|
|
</head>
|
|
<body class="p-4 md:p-8">
|
|
<div class="max-w-7xl mx-auto">
|
|
<!-- Header -->
|
|
<header class="flex flex-col md:flex-row justify-between items-center mb-10 gap-4">
|
|
<div>
|
|
<h1 class="text-4xl font-black italic tracking-tighter text-blue-600">RACEPLANNER <span class="text-slate-400 not-italic font-light">2026</span></h1>
|
|
<p class="text-xs font-bold uppercase tracking-widest text-slate-500">Endurance Strategy Engine</p>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center gap-4 justify-center">
|
|
<!-- Scenario Actions -->
|
|
<button onclick="saveScenarioPrompt()" class="bg-emerald-600 hover:bg-emerald-700 text-white text-[10px] font-black px-4 py-2 rounded-full uppercase tracking-widest">Sichern</button>
|
|
<button onclick="loadScenarioList()" class="bg-slate-600 hover:bg-slate-700 text-white text-[10px] font-black px-4 py-2 rounded-full uppercase tracking-widest">Laden</button>
|
|
|
|
<div class="flex bg-slate-200 dark:bg-slate-800 p-1 rounded-lg">
|
|
<button onclick="setTheme('light')" class="px-3 py-1 rounded {{ 'bg-white shadow-sm' if current_user.theme == 'light' else '' }} text-xs font-bold uppercase">Light</button>
|
|
<button onclick="setTheme('dark')" class="px-3 py-1 rounded {{ 'bg-blue-600 text-white shadow-sm' if current_user.theme == 'dark' else '' }} text-xs font-bold uppercase">Dark</button>
|
|
</div>
|
|
<a href="/logout" class="text-xs font-bold uppercase px-4 py-2 border border-red-500/50 text-red-500 rounded hover:bg-red-500 transition-all">Logout</a>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
{% for car_num in [1, 2] %}
|
|
<div class="glass rounded-3xl overflow-hidden p-6">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h2 class="text-2xl font-black italic">CAR <span class="text-blue-600">#{{ car_num }}</span></h2>
|
|
<a href="/export_pdf/{{ car_num }}" class="bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-black px-4 py-2 rounded-full uppercase tracking-widest">PDF Export</a>
|
|
</div>
|
|
|
|
<div id="stints-car-{{ car_num }}" class="space-y-3">
|
|
{% set schedule = car1 if car_num == 1 else car2 %}
|
|
{% for s in schedule %}
|
|
<div class="stint-card p-4 rounded-xl flex items-center gap-4 group {{ 'border-blue-600' if s.is_finish else 'border-slate-400/20' }}" data-id="{{ s.id }}">
|
|
<div class="handle text-slate-500 opacity-20 group-hover:opacity-100">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M7 10l5-5 5 5M7 14l5 5 5-5"/></svg>
|
|
</div>
|
|
<div class="w-16">
|
|
<div class="text-[10px] font-bold text-slate-500 uppercase">{{ s.date }}</div>
|
|
<div class="text-lg font-black">{{ s.start }}</div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<select onchange="updateStintDriver({{ s.id }}, this.value)" class="text-sm font-bold p-1 rounded">
|
|
{% for d in drivers %}
|
|
<option value="{{ d.id }}" {{ 'selected' if d.id == s.driver_id else '' }}>{{ d.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<div class="text-[10px] font-bold text-slate-500 uppercase mt-1">
|
|
{{ s.laps }} Runden · <span class="text-green-500">{{ s.fuel }}L</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-lg font-black">{{ s.end }}</div>
|
|
{% if s.is_finish %}<span class="bg-blue-600 text-white text-[8px] font-black px-2 py-1 rounded uppercase">Finish</span>{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modals (Simple Replacement for alert/prompt) -->
|
|
<div id="scenario-modal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
|
|
<div class="glass max-w-md w-full p-8 rounded-3xl">
|
|
<h3 id="modal-title" class="text-xl font-black mb-4 uppercase italic">Szenario</h3>
|
|
<div id="modal-content" class="space-y-4"></div>
|
|
<div class="flex justify-end gap-4 mt-6">
|
|
<button onclick="closeModal()" class="text-xs font-bold uppercase text-slate-500">Abbrechen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function setTheme(theme) {
|
|
fetch('/update_theme', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({theme: theme})}).then(() => window.location.reload());
|
|
}
|
|
|
|
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());
|
|
}
|
|
|
|
function saveScenarioPrompt() {
|
|
const name = prompt("Name für das Szenario:");
|
|
if(name) {
|
|
fetch('/save_scenario', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({name: name})})
|
|
.then(r => r.json()).then(() => alert("Gespeichert!"));
|
|
}
|
|
}
|
|
|
|
function loadScenarioList() {
|
|
fetch('/list_scenarios').then(r => r.json()).then(files => {
|
|
const list = files.map(f => `<button onclick="loadScenario('${f}')" class="w-full text-left p-3 hover:bg-blue-600 rounded-lg text-sm font-bold border border-white/5 mb-2">${f}</button>`).join('');
|
|
document.getElementById('modal-title').innerText = "Szenario Laden";
|
|
document.getElementById('modal-content').innerHTML = list || "Keine Szenarien gefunden.";
|
|
document.getElementById('scenario-modal').classList.remove('hidden');
|
|
});
|
|
}
|
|
|
|
function loadScenario(file) {
|
|
fetch('/load_scenario', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({filename: file})})
|
|
.then(() => window.location.reload());
|
|
}
|
|
|
|
function closeModal() { document.getElementById('scenario-modal').classList.add('hidden'); }
|
|
|
|
[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> |