46 lines
1.9 KiB
HTML
46 lines
1.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Wolloseum | Live viewer</title>
|
|
<link rel="stylesheet" href="/assets/app.css">
|
|
<script>try { var t = localStorage.getItem('wolloseum.theme'); if (t) document.documentElement.dataset.theme = t; } catch (_) { }</script>
|
|
<script src="/assets/app.js" defer></script>
|
|
</head>
|
|
|
|
<body data-page="viewer">
|
|
<div class="shell">
|
|
<header class="topbar">
|
|
<a class="brand" href="/"><span class="brand-mark">W</span> WOLLOSEUM</a>
|
|
<nav class="nav"><a href="/">Player</a><a href="/viewer" aria-current="page">Live viewer</a><a
|
|
href="/admin">Admin</a><button id="theme-toggle" class="icon-button secondary button" type="button"
|
|
aria-label="Toggle dark mode">☽</button></nav>
|
|
</header>
|
|
<main>
|
|
<div class="page-head viewer-head">
|
|
<div>
|
|
<p class="eyebrow">Public stream | websocket</p>
|
|
<h1>World activity</h1>
|
|
<p class="lede">A live, ordered view of server state changes.</p>
|
|
</div>
|
|
<span id="socket-status" class="status-chip"><i class="status-dot"></i><span
|
|
id="socket-label">CONNECTING</span></span>
|
|
</div>
|
|
<section class="panel">
|
|
<div class="panel-head">
|
|
<div class="viewer-summary"><span>Latest <strong id="latest-sequence">-</strong></span><span>Received <strong
|
|
id="event-count">0</strong></span></div>
|
|
<div class="event-filters"><input id="event-search" type="search" placeholder="Filter event names or data"
|
|
aria-label="Filter events"></div>
|
|
</div>
|
|
<div id="event-list" class="event-list"></div>
|
|
<div id="event-empty" class="empty">Waiting for the first event...</div>
|
|
</section>
|
|
</main>
|
|
<footer><span>WOLLOSEUM | LIVE VIEWER</span><span>Snapshots restore state after reconnect</span></footer>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |