368 lines
18 KiB
HTML
368 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<!--
|
||
SciFiAmbientDisplay_v3co.html
|
||
Version: v3co (co = Claude Opus 5) Base: v2cs Date: 2026-09-04
|
||
|
||
CHANGE: Per-theme OBSERVATION layer isolation.
|
||
v2cs correctly fixed the `.observation-stage svg > rect:first-child` selector that had
|
||
never matched, but the rule was GLOBAL -- uncovering the shared canvas layer stack in
|
||
nine themes at once and making every OBSERVATION display read as a variation of one.
|
||
v3co keeps the correct selector and makes canvas visibility an explicit, per-theme,
|
||
default-deny declaration: see the OBSERVATION_CANVAS manifest above class
|
||
ObservationEngine. Rollback point: SciFiAmbientDisplay_v2cs.html (untouched).
|
||
-->
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Sci-Fi Ambience Generator - Publish Build v13co</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body class="theme-lcars-tng">
|
||
|
||
<!-- Header Frame with Interactive Universe Dropdown -->
|
||
<header class="lcars-header">
|
||
<div class="universe-selector-container" id="universe-selector-container">
|
||
<div class="lcars-elbow-left" id="header-universe-btn" title="Click to Change Sci-Fi Universe">
|
||
<span id="header-universe-label">STARFLEET</span> <span style="font-size: 0.8rem; margin-left: 4px;">▼</span>
|
||
</div>
|
||
<div class="universe-dropdown-menu" id="universe-dropdown">
|
||
<!-- Injected dynamically from UniverseRegistry -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lcars-top-bar">
|
||
<span id="header-ship-name">USS ENTERPRISE // MAIN BRIDGE</span>
|
||
<div class="header-volume-dock">
|
||
<button class="btn-header-mute" id="btn-header-mute" title="Toggle Mute (M)">MUTE</button>
|
||
<span class="header-vol-val" id="header-vol-val">75%</span>
|
||
</div>
|
||
<span id="header-matrix-label">STARFLEET SOUND MATRIX v2.5</span>
|
||
</div>
|
||
<div class="lcars-pill-end"></div>
|
||
</header>
|
||
|
||
<!-- Main Application Container -->
|
||
<main class="lcars-container">
|
||
|
||
<!-- Left Sidebar: Active Universe Presets (Purely segregated per theme) -->
|
||
<aside class="left-sidebar">
|
||
<div class="sidebar-heading" id="sidebar-title">STARSHIP PRESETS</div>
|
||
<div class="preset-list" id="preset-container">
|
||
<!-- Dynamically injected preset buttons for active universe only -->
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Center Panel: Master Controls, Presets Description & Channel Synthesizers -->
|
||
<section class="center-panel">
|
||
|
||
<!-- Master Control Card -->
|
||
<div class="panel-card">
|
||
<div class="panel-header">
|
||
<div>
|
||
<div class="panel-title" id="current-preset-title">ENTERPRISE-D: MAIN BRIDGE</div>
|
||
<div class="panel-sub" id="current-preset-desc">Warm, low-frequency 50Hz hull tone with gentle ventilation and soft LCARS computer chirps.</div>
|
||
</div>
|
||
<div class="diagnostic-stats" style="width: 220px;">
|
||
<div class="stat-box">
|
||
<span class="stat-label">AUDIO ENGINE</span>
|
||
<span class="stat-value" id="stat-audio-status">STANDBY</span>
|
||
</div>
|
||
<div class="stat-box">
|
||
<span class="stat-label">CORE FREQ</span>
|
||
<span class="stat-value" id="stat-core-freq">58.0 Hz</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Master Transport & Actions -->
|
||
<div class="transport-bar">
|
||
<button class="btn-lcars-large" id="btn-master-play">
|
||
<span id="play-icon">▶</span> <span id="play-text">ENGAGE AMBIENCE</span>
|
||
</button>
|
||
|
||
<div class="pill-button-group" id="universe-events-container">
|
||
<!-- Dynamically populated per universe -->
|
||
</div>
|
||
<button class="btn-lcars-pill btn-observation" id="btn-observation" title="Enter passive full-screen observation display">
|
||
OBSERVATION
|
||
</button>
|
||
<label class="observation-hud-control" title="Toggle starship viewport window frame (ON: framed starship lounge / OFF: pure deep space)">
|
||
<span class="observation-hud-label">VIEWPORT</span>
|
||
<input type="checkbox" id="toggle-observation-viewport" checked aria-label="Toggle Observation Viewport Frame">
|
||
<span class="observation-hud-state" id="val-observation-viewport">ON</span>
|
||
</label>
|
||
<label class="observation-hud-control" title="Toggle vertical structural window pillars / mullions (OFF: unobstructed panoramic view / ON: structural posts)">
|
||
<span class="observation-hud-label">PILLARS</span>
|
||
<input type="checkbox" id="toggle-observation-pillars" aria-label="Toggle Window Pillars">
|
||
<span class="observation-hud-state" id="val-observation-pillars">OFF</span>
|
||
</label>
|
||
<div class="observation-activity-control" title="Controls how frequently and intensely Observation generates transient visual activity">
|
||
<span class="observation-activity-label">ACTIVITY</span>
|
||
<input type="range" id="slider-observation-activity" min="0" max="100" step="1" value="60" aria-label="Observation activity level">
|
||
<span class="observation-activity-value" id="val-observation-activity">60%</span>
|
||
</div>
|
||
<label class="observation-hud-control" title="Keep OBSERVATION profile/status information visible. Turn off to fade it out over 30 seconds.">
|
||
<span class="observation-hud-label">HUD HOLD</span>
|
||
<input type="checkbox" id="toggle-observation-hud" checked aria-label="Keep Observation information visible">
|
||
<span class="observation-hud-state" id="val-observation-hud">ON</span>
|
||
</label>
|
||
</div>
|
||
|
||
<!-- Dedicated Master Volume Console -->
|
||
<div class="master-volume-console">
|
||
<div class="master-vol-top">
|
||
<div class="master-vol-title-group">
|
||
<span class="master-vol-tag">MAIN MASTER VOLUME</span>
|
||
<span class="master-vol-readout" id="val-master-vol">75%</span>
|
||
<span class="master-vol-db" id="val-master-db">-2.5 dB</span>
|
||
</div>
|
||
<div class="master-vol-actions">
|
||
<button class="btn-lcars-pill btn-mute" id="btn-master-mute" title="Toggle Mute (M)">MUTE</button>
|
||
<div class="master-vol-presets">
|
||
<button class="btn-vol-step" data-vol="0.25">25%</button>
|
||
<button class="btn-vol-step" data-vol="0.50">50%</button>
|
||
<button class="btn-vol-step active" data-vol="0.75">75%</button>
|
||
<button class="btn-vol-step" data-vol="1.00">MAX</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="master-slider-row">
|
||
<button class="vol-adj-btn" id="btn-vol-down" title="Volume Down (-5% or Down Arrow)">−</button>
|
||
<div class="slider-track-container">
|
||
<input type="range" id="slider-master-vol" min="0" max="1" step="0.01" value="0.75" class="slider-master-large" aria-label="Main Volume">
|
||
<!-- Visual 10-Segment LED Level Meter -->
|
||
<div class="vol-meter-leds" id="vol-meter-leds">
|
||
<div class="led-pip active"></div>
|
||
<div class="led-pip active"></div>
|
||
<div class="led-pip active"></div>
|
||
<div class="led-pip active"></div>
|
||
<div class="led-pip active"></div>
|
||
<div class="led-pip active"></div>
|
||
<div class="led-pip active"></div>
|
||
<div class="led-pip active"></div>
|
||
<div class="led-pip"></div>
|
||
<div class="led-pip"></div>
|
||
</div>
|
||
</div>
|
||
<button class="vol-adj-btn" id="btn-vol-up" title="Volume Up (+5% or Up Arrow)">+</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Real-Time Frequency Spectrum Visualizer -->
|
||
<div class="panel-card">
|
||
<div class="panel-header">
|
||
<span class="panel-title">ACOUSTIC FREQUENCY SPECTRUM</span>
|
||
<span class="panel-sub">PROCEDURAL HARMONIC ANALYSIS</span>
|
||
</div>
|
||
<div class="canvas-wrapper spectrum-wrapper">
|
||
<div class="canvas-label-overlay">SPECTRUM BIN: 32 CH // REAL-TIME FFT</div>
|
||
<canvas id="spectrum-canvas"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4-Channel Synthesizer Mixer Card -->
|
||
<div class="panel-card">
|
||
<div class="panel-header">
|
||
<span class="panel-title">PROCEDURAL SOUND ENGINE MIXER</span>
|
||
<span class="panel-sub">LIVE PARAMETER MODULATION</span>
|
||
</div>
|
||
|
||
<div class="mixer-grid">
|
||
<!-- Channel 1: Hull Vibration -->
|
||
<div class="channel-strip">
|
||
<div class="channel-header">
|
||
<span>1. HULL DRONE</span>
|
||
<span id="val-hull-vol">65%</span>
|
||
</div>
|
||
<div class="control-row">
|
||
<div class="control-label"><span>LEVEL</span></div>
|
||
<input type="range" id="slider-hull-vol" min="0" max="1" step="0.01" value="0.65">
|
||
</div>
|
||
<div class="control-row">
|
||
<div class="control-label"><span>BASE TONE</span><span id="val-hull-freq">50 Hz</span></div>
|
||
<input type="range" id="slider-hull-freq" min="30" max="120" step="1" value="50">
|
||
</div>
|
||
<div class="control-row">
|
||
<div class="control-label"><span>DAMPING CUTOFF</span><span id="val-hull-cutoff">105 Hz</span></div>
|
||
<input type="range" id="slider-hull-cutoff" min="50" max="300" step="5" value="105">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Channel 2: Warp Core Pulse -->
|
||
<div class="channel-strip">
|
||
<div class="channel-header">
|
||
<span>2. WARP CORE</span>
|
||
<span id="val-warp-vol">35%</span>
|
||
</div>
|
||
<div class="control-row">
|
||
<div class="control-label"><span>LEVEL</span></div>
|
||
<input type="range" id="slider-warp-vol" min="0" max="1" step="0.01" value="0.35">
|
||
</div>
|
||
<div class="control-row">
|
||
<div class="control-label"><span>PULSE RATE (BPM)</span><span id="val-warp-bpm">48 BPM</span></div>
|
||
<input type="range" id="slider-warp-bpm" min="20" max="120" step="1" value="48">
|
||
</div>
|
||
<div class="control-row">
|
||
<div class="control-label"><span>REACTOR PITCH</span><span id="val-warp-carrier">58 Hz</span></div>
|
||
<input type="range" id="slider-warp-carrier" min="35" max="150" step="1" value="58">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Channel 3: Life Support -->
|
||
<div class="channel-strip">
|
||
<div class="channel-header">
|
||
<span>3. LIFE SUPPORT</span>
|
||
<span id="val-air-vol">55%</span>
|
||
</div>
|
||
<div class="control-row">
|
||
<div class="control-label"><span>LEVEL</span></div>
|
||
<input type="range" id="slider-air-vol" min="0" max="1" step="0.01" value="0.55">
|
||
</div>
|
||
<div class="control-row">
|
||
<div class="control-label"><span>AIRFLOW AIR FILTER</span><span id="val-air-cutoff">1600 Hz</span></div>
|
||
<input type="range" id="slider-air-cutoff" min="500" max="4000" step="50" value="1600">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Channel 4: Telemetry -->
|
||
<div class="channel-strip">
|
||
<div class="channel-header">
|
||
<span>4. TELEMETRY</span>
|
||
<span id="val-telemetry-vol">45%</span>
|
||
</div>
|
||
<div class="control-row">
|
||
<div class="control-label"><span>LEVEL</span></div>
|
||
<input type="range" id="slider-telemetry-vol" min="0" max="1" step="0.01" value="0.45">
|
||
</div>
|
||
<div class="control-row">
|
||
<div class="control-label"><span>BACKGROUND CHIRP DENSITY</span><span id="val-telemetry-density">65%</span></div>
|
||
<input type="range" id="slider-telemetry-density" min="0" max="1" step="0.05" value="0.65">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- Right Sidebar: Warp Core Intermix Chamber & LCARS Soundboard -->
|
||
<aside class="right-column">
|
||
|
||
<!-- Core / Rotor Visualizer Card -->
|
||
<div class="panel-card">
|
||
<div class="panel-header">
|
||
<span class="panel-title" id="core-visualizer-title">MATTER / ANTIMATTER CORE</span>
|
||
</div>
|
||
<div class="canvas-wrapper warp-core-wrapper">
|
||
<div class="canvas-label-overlay" id="core-visualizer-label">INTERMIX CHAMBER // ACTIVE</div>
|
||
<canvas id="warp-core-canvas"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sleep Timer & Auto-Fadeout Card -->
|
||
<div class="panel-card">
|
||
<div class="panel-header">
|
||
<span class="panel-title">SLEEP TIMER</span>
|
||
</div>
|
||
<div class="timer-readout" id="timer-display">TIMER INACTIVE (CONTINUOUS)</div>
|
||
<div class="pill-button-group">
|
||
<button class="btn-lcars-pill btn-timer" data-minutes="15">15M</button>
|
||
<button class="btn-lcars-pill btn-timer" data-minutes="30">30M</button>
|
||
<button class="btn-lcars-pill btn-timer" data-minutes="60">60M</button>
|
||
<button class="btn-lcars-pill btn-timer" data-minutes="0">OFF</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tactical Soundboard & Console Keypad -->
|
||
<div class="panel-card">
|
||
<div class="panel-header">
|
||
<span class="panel-title" id="soundboard-title">LCARS KEYPAD</span>
|
||
</div>
|
||
<div class="telemetry-triggers" id="soundboard-container">
|
||
<!-- Dynamically populated per universe -->
|
||
</div>
|
||
</div>
|
||
|
||
</aside>
|
||
|
||
</main>
|
||
|
||
|
||
<!-- OBSERVATION: passive casting / display mode. Click background to return. -->
|
||
<section class="observation-overlay" id="observation-overlay" aria-hidden="true" aria-label="Observation display">
|
||
<!-- Layer 0 & 1: 60fps Deep Celestial Canvas (Parallax 3D Stars, Warp Streaks, Nebulae, Planets, Encounters) -->
|
||
<canvas id="observation-canvas" class="observation-canvas"></canvas>
|
||
|
||
<!-- Legacy / Vector Art Stage (Preserved for compatibility and vector overlays) -->
|
||
<div class="observation-stage" id="observation-stage"></div>
|
||
<div class="observation-sim-layer" id="observation-sim-layer"></div>
|
||
<div class="observation-event-layer" id="observation-event-layer"></div>
|
||
|
||
<!-- Layer 2: Viewport Architecture & Glass (Starship Window Frames & Specular Sheen) -->
|
||
<div class="observation-viewport-frame" id="observation-viewport-frame"></div>
|
||
<div class="observation-glass-sheen"></div>
|
||
<div class="observation-scanlines"></div>
|
||
<div class="observation-vignette"></div>
|
||
|
||
<!-- Layer 3: Emergency Alert Environmental Lighting Wash -->
|
||
<div class="observation-alert-wash" id="observation-alert-wash"></div>
|
||
|
||
<!-- Layer 4: Holographic LCARS HUD & Audio Waveform Sill -->
|
||
<div class="observation-chrome">
|
||
<div class="observation-ticker" id="observation-ticker">
|
||
<span class="observation-ticker-label">SYS</span>
|
||
<div class="observation-ticker-track">
|
||
<span class="observation-ticker-text" id="observation-ticker-text">STANDBY</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="observation-topline">
|
||
<div>
|
||
<div class="observation-mode-label" id="observation-universe">OBSERVATION</div>
|
||
<div class="observation-profile" id="observation-profile">ACTIVE PROFILE</div>
|
||
</div>
|
||
<div class="observation-status" id="observation-status">
|
||
OBSERVATION ACTIVE<br>
|
||
PROCEDURAL AUDIO LINK: STANDBY
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Holographic Audio Waveform Sill -->
|
||
<div class="observation-waveform-container" id="observation-waveform-container">
|
||
<span class="observation-waveform-label">SUBSPACE HARMONICS</span>
|
||
<canvas id="observation-waveform-canvas" width="480" height="28"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- In-Observation Quick Glass Control Dock (Auto-hides on inactivity) -->
|
||
<div class="observation-control-dock" id="observation-control-dock">
|
||
<button class="obs-dock-btn" id="obs-btn-warp" title="Toggle Warp Flight / Orbital Cruise">WARP: OFF</button>
|
||
<button class="obs-dock-btn active" id="obs-btn-frame" title="Toggle Starship Viewport Framing">VIEWPORT: ON</button>
|
||
<button class="obs-dock-btn" id="obs-btn-pillars" title="Toggle Window Pillars / Mullions">PILLARS: OFF</button>
|
||
<button class="obs-dock-btn" id="obs-btn-alert" title="Toggle Red Alert">RED ALERT</button>
|
||
<select class="obs-dock-select" id="obs-select-preset" title="Switch Preset"></select>
|
||
<button class="obs-dock-btn obs-dock-close" id="obs-btn-exit" title="Return to Main Console">RETURN ✕</button>
|
||
</div>
|
||
|
||
<div class="observation-return" id="observation-return-pill">CLICK BACKGROUND TO RETURN</div>
|
||
</section>
|
||
|
||
<!-- LCARS Footer Status -->
|
||
<footer class="lcars-footer">
|
||
<span id="footer-status-label">SYSTEM STATUS: NORMAL</span>
|
||
<span><a href="https://www.labyricorn.com/" target="_blank" rel="noopener noreferrer" style="color:inherit;text-decoration:none;">VIBE ENGINEERED BY LABYRICORN STUDIOS</a></span>
|
||
<span id="footer-hotkeys-label">SPACE: PLAY/PAUSE | M: MUTE | ↑/↓: VOLUME</span>
|
||
</footer>
|
||
|
||
<!-- All-in-One Procedural Audio Engine & UI -->
|
||
<script src="js/audio.js"></script>
|
||
<script src="js/config.js"></script>
|
||
<script src="js/visualizer.js"></script>
|
||
<script src="js/observation-bezels.js"></script>
|
||
<script src="js/observation-engine.js"></script>
|
||
<script src="js/app.js"></script>
|
||
</body>
|
||
</html>
|