rothmanandClaude Opus 5.5
a33c4822bf
Chromium kiosk without a desktop for the Raspberry Pi 3, a Flask web interface on port 8080 (kiosk, system and network management), a restricted root helper, network changes with automatic rollback, a healthcheck timer, install/update/uninstall scripts and a pi-gen image build. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
57 lines
2.3 KiB
HTML
57 lines
2.3 KiB
HTML
<!doctype html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Geen verbinding</title>
|
|
<link rel="stylesheet" href="kiosk.css">
|
|
</head>
|
|
<body>
|
|
<main class="stage" id="stage">
|
|
<img class="logo" src="logo.svg" alt="">
|
|
<div class="device" id="device"></div>
|
|
<h1>De informatie is tijdelijk niet beschikbaar</h1>
|
|
<p id="detail">Er is op dit moment geen verbinding met de server.</p>
|
|
<div class="clock" id="clock">--:--</div>
|
|
<div class="date" id="date"></div>
|
|
<div class="status"><span class="dot" aria-hidden="true"></span><span id="status">Automatisch opnieuw verbinden…</span></div>
|
|
</main>
|
|
<script>
|
|
const params = new URLSearchParams(location.search);
|
|
const fmtTime = new Intl.DateTimeFormat("nl-NL", { hour: "2-digit", minute: "2-digit" });
|
|
const fmtDate = new Intl.DateTimeFormat("nl-NL", { weekday: "long", day: "numeric", month: "long", year: "numeric" });
|
|
document.getElementById("device").textContent = params.get("name") || "";
|
|
const host = params.get("host");
|
|
const reason = params.get("reason");
|
|
if (host) {
|
|
document.getElementById("detail").textContent =
|
|
"Geen verbinding met " + host + (reason ? " (" + reason + ")" : "") + ".";
|
|
}
|
|
const since = Number(params.get("since")) * 1000;
|
|
|
|
function tick() {
|
|
const now = new Date();
|
|
document.getElementById("clock").textContent = fmtTime.format(now);
|
|
const date = fmtDate.format(now);
|
|
document.getElementById("date").textContent = date.charAt(0).toUpperCase() + date.slice(1);
|
|
if (since) {
|
|
const minutes = Math.floor((now - since) / 60000);
|
|
document.getElementById("status").textContent = minutes >= 1
|
|
? "Offline sinds " + fmtTime.format(new Date(since)) + " — automatisch opnieuw verbinden…"
|
|
: "Automatisch opnieuw verbinden…";
|
|
}
|
|
}
|
|
tick();
|
|
setInterval(tick, 1000);
|
|
|
|
// Shift the content slowly to avoid burn-in on screens that stay offline for long.
|
|
let step = 0;
|
|
setInterval(() => {
|
|
step = (step + 1) % 8;
|
|
const dx = [0, 12, 24, 12, 0, -12, -24, -12][step];
|
|
const dy = [0, -8, 0, 8, 0, -8, 0, 8][step];
|
|
document.getElementById("stage").style.transform = "translate(" + dx + "px," + dy + "px)";
|
|
}, 60000);
|
|
</script>
|
|
</body>
|
|
</html>
|