rothmanandClaude Opus 5.5
19595aaf39
Dark grey background, name top left, date and clock top right, a flat panel with a blue top edge. The pages show the kiosk link (token masked) and the management address; the clock code is shared in kiosk.js. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
52 lines
1.6 KiB
HTML
52 lines
1.6 KiB
HTML
<!doctype html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Geen verbinding</title>
|
|
<link rel="stylesheet" href="kiosk.css">
|
|
</head>
|
|
<body>
|
|
<div class="screen" id="screen">
|
|
<header class="top">
|
|
<div class="name" id="name"></div>
|
|
<div class="when">
|
|
<div class="date" id="date"></div>
|
|
<div class="clock" id="clock">--:--</div>
|
|
</div>
|
|
</header>
|
|
<main class="middle">
|
|
<section class="panel">
|
|
<h1>Geen verbinding</h1>
|
|
<p>De informatie is tijdelijk niet beschikbaar. Het scherm verbindt automatisch opnieuw.</p>
|
|
<p id="since" hidden></p>
|
|
<div class="link" id="link">Pagina: <span class="url" id="link-url"></span><br><span id="reason"></span></div>
|
|
</section>
|
|
</main>
|
|
<footer class="bottom">
|
|
<span id="admin"></span>
|
|
<span>VoxIP Kiosk</span>
|
|
</footer>
|
|
</div>
|
|
<script src="kiosk.js"></script>
|
|
<script>
|
|
const reason = params.get("reason");
|
|
setText("reason", reason ? "Reden: " + reason : "");
|
|
const since = Number(params.get("since")) * 1000;
|
|
if (since) {
|
|
const el = document.getElementById("since");
|
|
el.textContent = "Offline sinds " + fmtTime.format(new Date(since)) + ".";
|
|
el.hidden = false;
|
|
}
|
|
|
|
// Shift everything 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("screen").style.transform = "translate(" + dx + "px," + dy + "px)";
|
|
}, 60000);
|
|
</script>
|
|
</body>
|
|
</html>
|