<!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="/cover.jpg">/cover.jpg</a> <span class="note">— current album art</span></li>
    <li><a class="route" href="/track">/track?p=&lt;base64&gt;</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>
