Initial Arcana FX soundboard

2026-05-20 23:51:18 +02:00
commit 232e6923e3
19 changed files with 2520 additions and 0 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Arcana FX — Soundboard</title>
+    <link rel="stylesheet" href="/styles.css" />
+    <link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><text y='52' font-size='52'>%F0%9F%94%AE</text></svg>" />
+  </head>
+  <body>
+    <div class="aurora"></div>
+
+    <header class="topbar">
+      <div class="brand">
+        <span class="sigil">&#x1F52E;</span>
+        <div>
+          <h1>Arcana FX</h1>
+          <p class="tagline">Dungeon Master&rsquo;s Control Room</p>
+        </div>
+      </div>
+
+      <div class="status" id="status">
+        <span class="dot" id="status-dot"></span>
+        <span id="status-text">Summoning effects&hellip;</span>
+      </div>
+
+      <div class="actions">
+        <button id="refresh-btn" class="ghost" title="Rescan share">Rescan</button>
+        <button id="stop-btn" class="danger" title="Stop current playback">&#x25A0; Stop</button>
+      </div>
+    </header>
+
+    <main>
+      <section class="panel">
+        <div class="panel-head">
+          <h2>Sound Effects</h2>
+          <div class="panel-controls">
+            <input id="search" type="search" placeholder="Search the grimoire&hellip;" autocomplete="off" />
+          </div>
+        </div>
+
+        <div id="categories" class="categories" role="tablist" aria-label="Categories"></div>
+
+        <div id="grid" class="grid" aria-live="polite"></div>
+
+        <p id="empty" class="empty" hidden>No effects match your incantation.</p>
+      </section>
+
+      <section class="panel future">
+        <div class="panel-head">
+          <h2>Light Control</h2>
+          <span class="badge">Coming soon</span>
+        </div>
+        <p class="muted">
+          A scrying mirror for the lantern circuits. Coloured washes, flicker spells, and
+          power runes will appear here once the relays are bound.
+        </p>
+        <div id="lights" class="lights"></div>
+      </section>
+    </main>
+
+    <footer>
+      <span>Bound to <code id="entity-label">media_player.&hellip;</code></span>
+      <span class="sep">&middot;</span>
+      <span id="count-label">0 effects</span>
+    </footer>
+
+    <script src="/app.js"></script>
+  </body>
+</html>