Styling fixes and Olden Era mmodule

2026-05-21 15:00:12 +02:00
parent 4ceff4015a
commit dd3493921b
136 changed files with 1028 additions and 111 deletions
--- a/webapp/resources/views/scenes.blade.php
+++ b/webapp/resources/views/scenes.blade.php
@@ -0,0 +1,107 @@
+<!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=&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>