ClaudeandClaude Sonnet 5
977d348c4f
Apply the ship/vessel and terminology rename mappings throughout the live app (index.html, css/style.css, js/*.js) and reference docs, per Ship_IP_Changes.md and Theme_Terminology_IP_Changes.md, including: - Ship/theme names and generic terminology (Starfleet, LCARS, Warp Core, TARDIS, etc.) in both code strings and visible UI text, while leaving internal code identifiers (theme keys, CSS classes, preset IDs) untouched. - Made "Species 8675309" canonical and fixed the dotted T.A.R.D.I.X. acronym on the Whataverse theme. - Replaced the per-preset era/pulseShape franchise tag in the preset list with the existing safe universe category name, since those codes are also used functionally by the audio and observation engines and weren't covered by either mapping document. Also rewrite README.md to lead with end-user ambience usage (how to run it, universe/vessel overview, mixer channels, sleep timer, observation mode, hotkeys) with the developer/build notes moved into a collapsed section. Co-Authored-By: Claude Sonnet 5 <[email protected]> Claude-Session: https://claude.ai/code/session_01Jt872nc9Fi2WMaJhAKGyDq
369 lines
18 KiB
HTML
369 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">STARFLIGHT</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 INTERPRISE-G // 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">STARFLIGHT 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">INTERPRISE-G: MAIN BRIDGE</div>
|
||
<div class="panel-sub" id="current-preset-desc">Warm, low-frequency 50Hz hull tone with gentle ventilation and soft LCARD 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</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: Worp Core Pulse -->
|
||
<div class="channel-strip">
|
||
<div class="channel-header">
|
||
<span>2. WORP 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: Worp Core Intermix Chamber & LCARD 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">LCARD 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 LCARD 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>
|
||
|
||
<!-- LCARD 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/core-animations.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>
|