108 lines
3.8 KiB
PHP
108 lines
3.8 KiB
PHP
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>OPHI-118 / scenes</title>
|
||
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}">
|
||
<link rel="stylesheet" href="{{ asset('css/hud.css') }}">
|
||
<style>
|
||
html, body {
|
||
color: var(--term-fg);
|
||
font-family: var(--mono);
|
||
font-size: 14px;
|
||
line-height: 1.55;
|
||
user-select: text;
|
||
}
|
||
|
||
h1 {
|
||
color: var(--term-fg-bright);
|
||
text-shadow: 0 0 8px var(--term-glow);
|
||
font-size: 18px; font-weight: 700;
|
||
letter-spacing: 0.18em;
|
||
margin: 8px 0 4px;
|
||
}
|
||
.lede {
|
||
color: var(--term-fg-dim);
|
||
font-size: 13px;
|
||
margin-bottom: 26px;
|
||
}
|
||
|
||
.group-title {
|
||
color: var(--hud); letter-spacing: 0.14em;
|
||
font-size: 12px; font-weight: 700;
|
||
margin: 22px 0 8px;
|
||
border-bottom: 1px dashed var(--hud-dim);
|
||
padding-bottom: 4px;
|
||
}
|
||
|
||
ul { list-style: none; padding: 0; }
|
||
li { padding: 4px 0; display: flex; gap: 14px; align-items: baseline; }
|
||
li::before {
|
||
content: '▸';
|
||
color: var(--term-fg-dim);
|
||
font-size: 11px;
|
||
}
|
||
a.route {
|
||
color: var(--term-fg-bright);
|
||
text-decoration: none;
|
||
border-bottom: 1px dotted transparent;
|
||
min-width: 280px;
|
||
display: inline-block;
|
||
}
|
||
a.route:hover {
|
||
text-shadow: 0 0 8px var(--term-glow);
|
||
border-bottom-color: var(--term-fg);
|
||
}
|
||
.note { color: var(--term-fg-dim); }
|
||
|
||
.scanlines, .vignette, .flicker { position: fixed; }
|
||
</style>
|
||
</head>
|
||
<body class="page-shell">
|
||
@include('partials.topbar', ['crumb' => 'SCENES'])
|
||
|
||
<h1>SCENE OVERLAY ROUTES</h1>
|
||
<div class="lede">Browser sources in <code>basic/scenes/Default_Stream_HUD.json</code> point at these URLs on 127.0.0.1:1118.</div>
|
||
|
||
<div class="group-title">OVERLAYS</div>
|
||
<ul>
|
||
<li><a class="route" href="/landing">/landing</a> <span class="note">— stand-by</span></li>
|
||
<li><a class="route" href="/loading">/loading</a> <span class="note">— project load + countdown</span></li>
|
||
<li><a class="route" href="/game">/game</a> <span class="note">— game HUD (camera-tracked)</span></li>
|
||
<li><a class="route" href="/desktop">/desktop</a> <span class="note">— desktop HUD (camera + screen)</span></li>
|
||
<li><a class="route" href="/goodbye">/goodbye</a> <span class="note">— sign-off</span></li>
|
||
<li><a class="route" href="/music-daemon">/music-daemon</a> <span class="note">— passive WS listener</span></li>
|
||
</ul>
|
||
|
||
<div class="group-title">MUSIC BOX VARIANTS</div>
|
||
<ul>
|
||
<li><a class="route" href="/music-box">/music-box</a> <span class="note">— full music box</span></li>
|
||
<li><a class="route" href="/music-box/widget">/music-box/widget</a> <span class="note">— 549×880 widget</span></li>
|
||
<li><a class="route" href="/music-box/cover">/music-box/cover</a> <span class="note">— cover art</span></li>
|
||
<li><a class="route" href="/music-box/cover?bars=0">/music-box/cover?bars=0</a> <span class="note">— compact cover</span></li>
|
||
<li><a class="route" href="/music-box/nc">/music-box/nc</a> <span class="note">— ncurses-styled music box</span></li>
|
||
</ul>
|
||
|
||
<div class="group-title">DATA ENDPOINTS</div>
|
||
<ul>
|
||
<li><a class="route" href="/data/playlist.js">/data/playlist.js</a> <span class="note">— window.__PLAYLIST</span></li>
|
||
<li><a class="route" href="/cover.jpg">/cover.jpg</a> <span class="note">— current album art</span></li>
|
||
<li><a class="route" href="/track">/track?p=<base64></a> <span class="note">— audio stream</span></li>
|
||
</ul>
|
||
|
||
<div class="scanlines"></div>
|
||
<div class="vignette"></div>
|
||
<div class="flicker"></div>
|
||
|
||
<script>
|
||
const clock = document.getElementById('clock');
|
||
function tick() {
|
||
const d = new Date();
|
||
const p = n => String(n).padStart(2, '0');
|
||
clock.textContent = `${p(d.getUTCHours())}:${p(d.getUTCMinutes())}:${p(d.getUTCSeconds())}`;
|
||
}
|
||
tick(); setInterval(tick, 1000);
|
||
</script>
|
||
</body>
|
||
</html>
|