2026-01-17 08:49:53 -05:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2026-01-18 18:27:35 -05:00
|
|
|
<title>ECHO REALITY</title>
|
|
|
|
|
<link rel="icon" type="image/png" href="/assets/favicon-96x96.png" sizes="96x96" />
|
|
|
|
|
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
|
|
|
|
|
<link rel="shortcut icon" href="/assets/favicon.ico" />
|
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png" />
|
|
|
|
|
<meta name="apple-mobile-web-app-title" content="ECHO REALITY" />
|
|
|
|
|
<link rel="manifest" href="/assets/site.webmanifest" />
|
|
|
|
|
<link rel="stylesheet" href="assets/styles.css">
|
2026-01-17 08:49:53 -05:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="player">
|
|
|
|
|
<button class="eject-btn" id="ejectBtn" title="Eject"></button>
|
2026-01-17 08:59:24 -05:00
|
|
|
<button class="lightning-btn" id="lightningBtn" title="Menu">⚡</button>
|
2026-01-17 08:49:53 -05:00
|
|
|
|
2026-01-17 15:12:54 -05:00
|
|
|
<div class="display" id="display">
|
|
|
|
|
<!-- Dim spots - worn phosphor effect (slowly drifting) -->
|
|
|
|
|
<div class="dim-spots-container">
|
|
|
|
|
<div class="dim-spot dim-spot-1"></div>
|
|
|
|
|
<div class="dim-spot dim-spot-2"></div>
|
|
|
|
|
<div class="dim-spot dim-spot-3"></div>
|
|
|
|
|
<div class="dim-spot dim-spot-4"></div>
|
|
|
|
|
<div class="dim-spot dim-spot-5"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- VHS tracking lines overlay (controlled by DisplayGlitch module) -->
|
|
|
|
|
<div class="vhs-tracking" id="vhsTracking"></div>
|
2026-01-17 08:49:53 -05:00
|
|
|
<!-- Track name with inner span for marquee scrolling -->
|
|
|
|
|
<div class="display-text" id="trackName"><span class="display-text-inner" id="trackNameInner">TRACK 1</span></div>
|
|
|
|
|
<div class="time-display" id="timeDisplay">00:00 / 00:00</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="cassette">
|
|
|
|
|
<div class="cassette-label">ECHO REALITY</div>
|
|
|
|
|
<div class="tape-window">
|
|
|
|
|
<div class="reel reel-left" id="reelContainerLeft">
|
|
|
|
|
<div class="tape-wound" id="tapeLeft"></div>
|
|
|
|
|
<div class="reel-inner" id="reelLeft"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="reel reel-right" id="reelContainerRight">
|
|
|
|
|
<div class="tape-wound" id="tapeRight"></div>
|
|
|
|
|
<div class="reel-inner" id="reelRight"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="controls">
|
|
|
|
|
<button class="btn btn-prev" id="prevBtn"></button>
|
|
|
|
|
<button class="btn btn-play" id="playBtn"></button>
|
|
|
|
|
<button class="btn btn-pause" id="pauseBtn"></button>
|
|
|
|
|
<button class="btn btn-stop" id="stopBtn"></button>
|
|
|
|
|
<button class="btn btn-next" id="nextBtn"></button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="volume-control">
|
|
|
|
|
<span class="volume-label">VOL</span>
|
|
|
|
|
<input type="range" id="volumeSlider" min="0" max="100" value="70">
|
|
|
|
|
</div>
|
2026-01-17 19:09:53 -05:00
|
|
|
|
|
|
|
|
<!-- Version button - subtle, bottom right -->
|
|
|
|
|
<button class="version-btn" id="versionBtn" title="Version Info">v</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Version Modal -->
|
|
|
|
|
<div class="version-overlay" id="versionOverlay"></div>
|
|
|
|
|
<div class="version-modal" id="versionModal">
|
|
|
|
|
<div class="version-modal-header">
|
|
|
|
|
<span class="version-modal-title">VERSION</span>
|
|
|
|
|
<button class="version-close-btn" id="versionCloseBtn">×</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="version-modal-body">
|
|
|
|
|
<div class="version-number" id="versionNumber">...</div>
|
|
|
|
|
</div>
|
2026-01-17 08:49:53 -05:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="video-overlay" id="videoOverlay">
|
2026-01-17 08:59:24 -05:00
|
|
|
<button class="close-video" id="closeVideo">×</button>
|
2026-01-17 08:49:53 -05:00
|
|
|
<video id="videoPlayer" autoplay></video>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- ========================================
|
|
|
|
|
ALBY LIGHTNING PANEL - START
|
|
|
|
|
Slide-out panel for Lightning payments/boosts
|
2026-01-17 08:59:24 -05:00
|
|
|
Triggered by the lightning button (⚡) on the player
|
2026-01-17 08:49:53 -05:00
|
|
|
======================================== -->
|
|
|
|
|
|
|
|
|
|
<!-- Backdrop overlay - clicking closes the panel -->
|
|
|
|
|
<div class="alby-overlay" id="albyOverlay"></div>
|
|
|
|
|
|
|
|
|
|
<!-- Main panel container -->
|
|
|
|
|
<div class="alby-panel" id="albyPanel">
|
|
|
|
|
<!-- Panel header with title and close button -->
|
|
|
|
|
<div class="alby-panel-header">
|
|
|
|
|
<div class="alby-panel-title">
|
2026-01-17 08:59:24 -05:00
|
|
|
<span class="lightning-icon">⚡</span>
|
2026-01-17 08:49:53 -05:00
|
|
|
<span>LIGHTNING BOOST</span>
|
|
|
|
|
</div>
|
2026-01-17 08:59:24 -05:00
|
|
|
<button class="alby-close-btn" id="albyCloseBtn" title="Close">×</button>
|
2026-01-17 08:49:53 -05:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Panel body content -->
|
|
|
|
|
<div class="alby-panel-body">
|
|
|
|
|
<!-- Lightning address display section -->
|
|
|
|
|
<div class="alby-label">LIGHTNING ADDRESS</div>
|
|
|
|
|
<div class="alby-address-box">
|
|
|
|
|
<div class="alby-address">hyperspaceout@getalby.com</div>
|
|
|
|
|
<div class="alby-node-id">NODE: 0325ab94e785e40877fe7421ec9a523bbb6021663dfb5c18987f40e17d5d507921</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="alby-divider"></div>
|
|
|
|
|
|
|
|
|
|
<!-- Amount input with increment/decrement controls -->
|
|
|
|
|
<div class="alby-label">AMOUNT (USD)</div>
|
|
|
|
|
<div class="alby-amount-controls">
|
2026-01-17 08:59:24 -05:00
|
|
|
<button class="alby-btn" id="albyDecrementBtn" title="Decrease">-</button>
|
2026-01-17 08:49:53 -05:00
|
|
|
<input type="number" class="alby-input" id="albyAmount" value="1.0" min="0.1" step="0.1">
|
|
|
|
|
<button class="alby-btn" id="albyIncrementBtn" title="Increase">+</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Memo textarea -->
|
|
|
|
|
<div class="alby-label">MEMO</div>
|
|
|
|
|
<textarea class="alby-textarea" id="albyMemo" maxlength="400" placeholder="Your message..."></textarea>
|
|
|
|
|
<div class="alby-char-count"><span id="albyCharCount">0</span>/400</div>
|
|
|
|
|
|
2026-01-17 10:38:45 -05:00
|
|
|
<!-- Current track info section (visible when audio playing) -->
|
|
|
|
|
<div class="alby-track-section" id="albyTrackSection">
|
|
|
|
|
<div class="alby-label">CURRENT TRACK</div>
|
|
|
|
|
<div class="alby-track-box">
|
|
|
|
|
<div class="alby-track-name" id="albyTrackName">TRACK 1 - PINK FLIGHT ATTENDANT</div>
|
|
|
|
|
</div>
|
|
|
|
|
<label class="alby-checkbox-label">
|
|
|
|
|
<input type="checkbox" id="albyIncludeTrack" checked>
|
|
|
|
|
<span class="alby-checkbox-text">Include current track?</span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-01-17 08:49:53 -05:00
|
|
|
<!-- Boost button - triggers simple-boost payment -->
|
|
|
|
|
<button class="alby-boost-btn" id="albyBoostBtn">
|
2026-01-17 08:59:24 -05:00
|
|
|
<span>⚡</span>
|
2026-01-17 08:49:53 -05:00
|
|
|
<span>BOOST $<span id="albyDisplayAmount">1.00</span></span>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<!-- Hidden simple-boost component - handles actual Lightning payment -->
|
|
|
|
|
<simple-boost
|
|
|
|
|
id="albySimpleBoost"
|
|
|
|
|
noconfetti
|
|
|
|
|
memo=""
|
|
|
|
|
currency="usd"
|
|
|
|
|
amount="1.0"
|
|
|
|
|
address="hyperspaceout@getalby.com">
|
|
|
|
|
</simple-boost>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Load simple-boost web component for Lightning payments -->
|
|
|
|
|
<script type="module" src="https://esm.sh/simple-boost@latest" defer></script>
|
|
|
|
|
|
|
|
|
|
<!-- ALBY LIGHTNING PANEL - END -->
|
|
|
|
|
|
2026-01-17 13:37:46 -05:00
|
|
|
<audio id="audio" preload="metadata"></audio>
|
2026-01-17 08:49:53 -05:00
|
|
|
|
2026-01-18 18:27:35 -05:00
|
|
|
<script src="src/app.js"></script>
|
2026-01-17 08:49:53 -05:00
|
|
|
</body>
|
2026-01-17 18:26:36 -05:00
|
|
|
</html>
|
