Spaces:

build-small-hackathon
/

lost-frequency-radio

Running

App Files Files Community

MarianaCodebase commited on Jun 13

Commit

a350892

verified ·

1 Parent(s): 7c654bf

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +280 -0

index.html ADDED Viewed

	@@ -0,0 +1,280 @@

+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Lost Frequency Radio</title>
+  <link rel="stylesheet" href="/static/css/radio.css?v=2" />
+</head>
+<body>
+  <!-- Moving galaxy behind everything -->
+  <canvas id="galaxy" class="galaxy" aria-hidden="true"></canvas>
+  <div class="nebula nebula-a" aria-hidden="true"></div>
+  <div class="nebula nebula-b" aria-hidden="true"></div>
+  <!-- Boot screen: the wow before the radio -->
+  <div id="boot" class="boot">
+    <div class="boot-inner">
+      <div class="boot-portal" aria-hidden="true">
+        <span class="portal-ring portal-ring-1"></span>
+        <span class="portal-ring portal-ring-2"></span>
+        <span class="portal-ring portal-ring-3"></span>
+        <span class="portal-sweep"></span>
+        <img src="/static/img/host.webp" alt="" class="boot-host" draggable="false" />
+      </div>
+      <h1 class="boot-title" data-text="LOST FREQUENCY RADIO">LOST&nbsp;FREQUENCY&nbsp;RADIO</h1>
+      <div class="boot-strip" aria-hidden="true">
+        <span>87</span><span>92</span><span>97</span><span>·</span>
+        <span>102</span><span>108</span><span>112</span>
+      </div>
+      <p class="boot-sub" id="boot-sub">una radio que recibe universos perdidos</p>
+      <div class="boot-mission" id="boot-mission">
+        <div class="mission-step">
+          <span class="mission-num">1</span>
+          <span class="mission-body" id="mission-1"></span>
+        </div>
+        <div class="mission-step">
+          <span class="mission-num">2</span>
+          <span class="mission-body" id="mission-2"></span>
+        </div>
+        <div class="mission-step">
+          <span class="mission-num">3</span>
+          <span class="mission-body" id="mission-3"></span>
+        </div>
+        <div class="mission-step">
+          <span class="mission-num">4</span>
+          <span class="mission-body" id="mission-4"></span>
+        </div>
+      </div>
+      <div class="boot-langs" id="boot-langs" role="group" aria-label="Language">
+        <button type="button" data-lang="en">EN</button>
+        <button type="button" data-lang="es" class="active">ES</button>
+      </div>
+      <button type="button" id="power-btn" class="power-btn">
+        <span class="power-icon">⏻</span>
+        <span id="power-label">ENCENDER</span>
+      </button>
+      <p class="boot-hint" id="boot-hint">cada oyente recibe emisiones distintas</p>
+    </div>
+  </div>
+  <div class="tv-cabinet">
+    <div class="tv-screen" id="tv-screen">
+      <div class="screen-content">
+        <header class="screen-header">
+          <h1>LOST&nbsp;FREQUENCY&nbsp;RADIO</h1>
+          <p id="tagline">universos paralelos · sintonía manual</p>
+        </header>
+        <div class="screen-main">
+          <!-- Left panel: the transmission -->
+          <section class="panel panel-left">
+            <div id="transmission" class="transmission">— estática —</div>
+            <div id="console-wrap" class="console-wrap hidden">
+              <div id="console-log" class="console-log"></div>
+              <div class="console-input-row">
+                <span class="console-prompt">&gt;</span>
+                <input id="console-input" class="console-input" type="text"
+                       autocomplete="off" spellcheck="false"
+                       placeholder="transmitir de vuelta..." />
+              </div>
+            </div>
+          </section>
+          <!-- Center panel: tuning gauge -->
+          <section class="panel panel-center">
+            <div class="gauge-wrap" id="gauge-wrap" tabindex="0"
+                 aria-label="Dial de frecuencia">
+              <svg id="dial" class="gauge-svg" viewBox="0 0 220 150">
+                <path class="gauge-arc" d="" id="gauge-arc-bg" />
+                <g id="dial-ticks"></g>
+                <line id="needle" class="dial-needle" x1="110" y1="124" x2="110" y2="34" />
+                <circle cx="110" cy="124" r="9" class="gauge-hub" />
+              </svg>
+              <div class="gauge-ornament" aria-hidden="true"></div>
+            </div>
+            <div id="freq-display" class="freq-display">95.0</div>
+            <div class="meters">
+              <div class="vu-meter" aria-hidden="true"><div id="vu-bar" class="vu-bar"></div></div>
+              <div id="tuning-lamp" class="tuning-lamp" title="Luz de sintonía"></div>
+            </div>
+            <div id="station-name" class="station-name">· · ·</div>
+          </section>
+          <!-- Right panel: the announcer -->
+          <section class="panel panel-right">
+            <div class="announcer-frame" id="announcer-frame">
+              <img id="announcer-img" class="announcer-img" alt="" draggable="false" />
+              <div class="announcer-nosignal" id="announcer-nosignal" aria-hidden="true"></div>
+              <div class="speech-bubble" id="speech-bubble" aria-hidden="true">
+                <span></span><span></span><span></span>
+              </div>
+            </div>
+            <div class="talk-bars" id="talk-bars" aria-hidden="true">
+              <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+            </div>
+          </section>
+        </div>
+        <canvas id="scope" class="scope" width="640" height="64" aria-hidden="true"></canvas>
+        <!-- Endgame HUD: appears in the secret band; shows fragment progress -->
+        <div id="mission-hud" class="mission-hud hidden" aria-hidden="true">
+          <div class="mission-hud-text" id="mission-hud-text"></div>
+          <div class="mission-hud-track">
+            <div id="mission-hud-fill" class="mission-hud-fill"></div>
+          </div>
+          <div class="mission-hud-pips" id="mission-hud-pips"></div>
+        </div>
+        <p class="hint" id="hint">gira el dial · busca las voces entre la estática</p>
+        <!-- Endgame answer bar: the operator speaks in the screen, you type here -->
+        <div id="endgame-bar" class="endgame-bar hidden">
+          <span class="endgame-caret" aria-hidden="true">&gt;</span>
+          <input id="endgame-input" class="endgame-input" type="text"
+                 autocomplete="off" spellcheck="false" placeholder="..." />
+        </div>
+      </div>
+      <canvas id="noise" class="noise-canvas" aria-hidden="true"></canvas>
+      <div class="crt-scanlines" aria-hidden="true"></div>
+      <div class="crt-vignette" aria-hidden="true"></div>
+      <div class="crt-glass" aria-hidden="true"></div>
+      <!-- Operator intercept: the number-station warden warns you off as you
+           drift toward its frequency -->
+      <div id="intercept" class="intercept" aria-hidden="true">
+        <div class="intercept-frame">
+          <img id="intercept-img" class="intercept-img"
+               src="/static/img/st_1047.webp" alt="" draggable="false" />
+        </div>
+        <div class="intercept-text" id="intercept-text"></div>
+      </div>
+    </div>
+    <!-- Wooden bezel: the big tuning dial on the left, controls on the right -->
+    <div class="bezel">
+      <!-- Left wing: the prominent physical tuning knob -->
+      <div class="bezel-side bezel-left">
+        <div class="knob-housing">
+          <div id="tune-knob" class="tune-knob" tabindex="0" role="slider"
+               aria-label="Perilla de sintonía" aria-valuemin="87"
+               aria-valuemax="112" aria-valuenow="95">
+            <div class="knob-skirt" aria-hidden="true"></div>
+            <div id="knob-face" class="knob-face">
+              <span class="knob-marker" aria-hidden="true"></span>
+              <span class="knob-grip" aria-hidden="true"></span>
+            </div>
+          </div>
+        </div>
+        <span class="bezel-label knob-label" id="label-tuning">SINTONÍA</span>
+      </div>
+      <!-- Center: speaker grill flanking the help / host assistant button -->
+      <div class="bezel-mid">
+        <div class="speaker-grill" aria-hidden="true"></div>
+        <div class="help-wrap">
+          <button type="button" id="guide-btn" class="guide-btn" title="¿Qué es esto?">
+            <span class="guide-q" aria-hidden="true">?</span>
+          </button>
+          <span class="bezel-label help-label" id="label-help">AYUDA</span>
+        </div>
+        <div class="speaker-grill" aria-hidden="true"></div>
+      </div>
+      <!-- Right wing: language selector + static switch -->
+      <div class="bezel-side bezel-right">
+        <div class="bezel-group">
+          <span class="bezel-label" id="label-language">IDIOMA</span>
+          <div class="lang-switch" id="lang-switch" role="group" aria-label="Idioma">
+            <button type="button" data-lang="en">EN</button>
+            <button type="button" data-lang="es" class="active">ES</button>
+          </div>
+        </div>
+        <div class="bezel-group">
+          <span class="bezel-label" id="label-static">ESTÁTICA</span>
+          <button type="button" id="static-toggle" class="static-toggle on"
+                  role="switch" aria-checked="true">
+            <span class="lever"></span>
+            <span class="state-on">ON</span>
+            <span class="state-off">OFF</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Field notebook: jot frequencies, the cipher, the fragments you find -->
+  <button id="notes-tab" class="notes-tab" type="button" aria-label="Notes">
+    <span class="notes-tab-icon">✎</span>
+    <span class="notes-tab-label" id="notes-tab-label">BITÁCORA</span>
+  </button>
+  <div id="notes-callout" class="notes-callout hidden" aria-hidden="true">
+    <span class="notes-callout-text" id="notes-callout-text"></span>
+    <span class="notes-callout-arrow" aria-hidden="true">&rarr;</span>
+  </div>
+  <aside id="notes-panel" class="notes-panel" aria-hidden="true">
+    <header class="notes-head">
+      <span id="notes-title">BITÁCORA</span>
+      <button id="notes-close" class="notes-close" type="button" aria-label="Close">×</button>
+    </header>
+    <div class="notes-section">
+      <div class="notes-label" id="notes-found-label">ESTACIONES</div>
+      <ul id="notes-found" class="notes-list"></ul>
+    </div>
+    <div class="notes-section">
+      <div class="notes-label" id="notes-cipher-label">CIFRADO</div>
+      <div id="notes-cipher" class="notes-cipher">—</div>
+    </div>
+    <div class="notes-section notes-grow">
+      <div class="notes-label" id="notes-scratch-label">APUNTES</div>
+      <textarea id="notes-scratch" class="notes-scratch" spellcheck="false"
+                placeholder="..."></textarea>
+    </div>
+  </aside>
+  <!-- Finale screen: the radio goes dark, a last word, and the credits roll -->
+  <div id="finale-screen" class="finale-screen hidden" aria-hidden="true">
+    <div class="finale-content">
+      <p class="finale-message" id="finale-message"></p>
+      <button type="button" id="finale-replay" class="finale-replay-btn"></button>
+    </div>
+    <div class="finale-credits" aria-hidden="true">
+      <div class="finale-credits-track">
+        <div class="finale-credits-block">
+          <p class="finale-credits-line finale-credits-title">LOST&nbsp;FREQUENCY&nbsp;RADIO</p>
+          <p class="finale-credits-line">Built by Mariana Sinisterra</p>
+          <p class="finale-credits-line finale-credits-heading">Tools</p>
+          <p class="finale-credits-line">Gradio</p>
+          <p class="finale-credits-line">OpenBMB · MiniCPM5-1B</p>
+          <p class="finale-credits-line">llama.cpp</p>
+          <p class="finale-credits-line finale-credits-heading">Built for</p>
+          <p class="finale-credits-line">Build Small Hackathon 2026</p>
+          <p class="finale-credits-line finale-credits-heading">Find me</p>
+          <p class="finale-credits-line">
+            <a href="https://github.com/Mariana-Codebase" target="_blank" rel="noopener">GitHub · Mariana-Codebase</a>
+          </p>
+          <p class="finale-credits-line">
+            <a href="https://www.linkedin.com/in/marianasinisterra/" target="_blank" rel="noopener">LinkedIn · marianasinisterra</a>
+          </p>
+          <p class="finale-credits-line">
+            <a href="https://marianacodebase.com" target="_blank" rel="noopener">marianacodebase.com</a>
+          </p>
+          <p class="finale-credits-line">
+            <a href="https://x.com/MarianaCodebase" target="_blank" rel="noopener">X · @MarianaCodebase</a>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script type="module" src="/static/js/radio.js?v=2"></script>
+</body>
+</html>