150 lines
4.0 KiB
HTML
150 lines
4.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>NinjaCross Timer</title>
|
|
<link rel="stylesheet" href="index.css" />
|
|
</head>
|
|
<body>
|
|
<a href="/about" class="logo" title="Über NinjaCross Timer">
|
|
<img src="/pictures/logo.png" alt="NinjaCross Logo" />
|
|
</a>
|
|
|
|
<a href="/settings" class="settings-btn">⚙️</a>
|
|
|
|
<div class="header">
|
|
<h1>🏊♀️ NinjaCross Timer</h1>
|
|
<p>Professioneller Zeitmesser für Ninjacross Wettkämpfe</p>
|
|
</div>
|
|
|
|
<div id="learning-display" class="learning-mode" style="display: none">
|
|
<h3>📚 Lernmodus aktiv</h3>
|
|
<p>
|
|
Bitte drücken Sie den Button für: <span id="learning-button"></span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="timer-container">
|
|
<div class="lane">
|
|
<h2>🏊♀️ Bahn 1</h2>
|
|
<div id="time1" class="time-display">00.00</div>
|
|
<div id="status1" class="status ready">Bereit</div>
|
|
</div>
|
|
|
|
<div class="lane">
|
|
<h2>🏊♂️ Bahn 2</h2>
|
|
<div id="time2" class="time-display">00.00</div>
|
|
<div id="status2" class="status ready">Bereit</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="best-times">
|
|
<h3>🏆 Beste Zeiten des Tages</h3>
|
|
<div class="best-time-row">
|
|
<span>Bahn 1:</span>
|
|
<span id="best1">--.-</span>
|
|
</div>
|
|
<div class="best-time-row">
|
|
<span>Bahn 2:</span>
|
|
<span id="best2">--.-</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// State variables
|
|
let timer1 = 0;
|
|
let timer2 = 0;
|
|
let status1 = "ready";
|
|
let status2 = "ready";
|
|
let best1 = 0;
|
|
let best2 = 0;
|
|
let lastSync = Date.now();
|
|
let learningMode = false;
|
|
let learningButton = "";
|
|
|
|
function formatTime(seconds) {
|
|
if (seconds === 0) return "00.00";
|
|
return seconds.toFixed(2);
|
|
}
|
|
|
|
function updateDisplay() {
|
|
// Calculate elapsed time since last sync
|
|
const now = Date.now();
|
|
let display1 = timer1;
|
|
let display2 = timer2;
|
|
|
|
if (status1 === "running") {
|
|
display1 += (now - lastSync) / 1000;
|
|
}
|
|
if (status2 === "running") {
|
|
display2 += (now - lastSync) / 1000;
|
|
}
|
|
|
|
|
|
document.getElementById("time1").textContent = formatTime(display1);
|
|
const s1 = document.getElementById("status1");
|
|
s1.className = `status ${status1}`;
|
|
s1.textContent =
|
|
status1 === "ready"
|
|
? "Bereit"
|
|
: status1 === "running"
|
|
? "Läuft..."
|
|
: "Beendet";
|
|
|
|
document.getElementById("time2").textContent = formatTime(display2);
|
|
const s2 = document.getElementById("status2");
|
|
s2.className = `status ${status2}`;
|
|
s2.textContent =
|
|
status2 === "ready"
|
|
? "Bereit"
|
|
: status2 === "running"
|
|
? "Läuft..."
|
|
: "Beendet";
|
|
|
|
document.getElementById("best1").textContent =
|
|
best1 > 0 ? formatTime(best1) + "s" : "--.-";
|
|
document.getElementById("best2").textContent =
|
|
best2 > 0 ? formatTime(best2) + "s" : "--.-";
|
|
|
|
// Lernmodus
|
|
const learningDisplay = document.getElementById("learning-display");
|
|
if (learningMode) {
|
|
document.getElementById("learning-button").textContent = learningButton;
|
|
learningDisplay.style.display = "block";
|
|
} else {
|
|
learningDisplay.style.display = "none";
|
|
}
|
|
}
|
|
|
|
function syncFromBackend() {
|
|
fetch("/api/data")
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
timer1 = data.time1;
|
|
timer2 = data.time2;
|
|
status1 = data.status1;
|
|
status2 = data.status2;
|
|
best1 = data.best1;
|
|
best2 = data.best2;
|
|
learningMode = data.learningMode;
|
|
learningButton = data.learningButton || "";
|
|
lastSync = Date.now();
|
|
updateDisplay();
|
|
})
|
|
.catch((error) =>
|
|
console.error("Fehler beim Laden der Daten:", error)
|
|
);
|
|
}
|
|
|
|
// Sync with backend every 2 seconds
|
|
setInterval(syncFromBackend, 2000);
|
|
|
|
// Smooth update every 50ms
|
|
setInterval(updateDisplay, 50);
|
|
|
|
// Initial load
|
|
syncFromBackend();
|
|
</script>
|
|
</body>
|
|
</html> |