Spaces:

MarianaCodebase
/

lost-frequency-radio

Running

App Files Files Community

lost-frequency-radio / index.html

MarianaCodebase

Upload index.html with huggingface_hub

da26a0c verified about 13 hours ago

raw

history blame contribute delete

10.5 kB

	<!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 FREQUENCY 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>

	<p class="boot-tip" id="boot-tip"></p>

	<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>
	<button type="button" data-lang="fr">FR</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">audífonos recomendados</p>
	</div>
	</div>

	<div class="tv-cabinet">
	<div class="tv-screen" id="tv-screen">
	<div class="screen-content">

	<header class="screen-header">
	<h1>LOST FREQUENCY 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">></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">></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>
	<button type="button" data-lang="fr">FR</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>
	<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>

	<script type="module" src="/static/js/radio.js?v=2"></script>
	</body>
	</html>