37f483e880
- Replace waveform+DAW layout with animation controller - Animations as vertical list with > cursor, no icons - Transport: play/pause button, seek slider, time display - Browser <audio> handles playback, 10Hz ticks to server - Sidebar: devices only (200px) - python:3.11-slim base (replaces Alpine, fixes librosa/numba build) - libsndfile symlink kept for soundfile - Remove python-mpv, add librosa for beat detection
112 lines
5.1 KiB
HTML
112 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LIGHTSYNC</title>
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="app-shell">
|
|
|
|
<header class="header">
|
|
<span class="header-title">■ LIGHTSYNC</span>
|
|
<div class="status-dot" id="status-dot"></div>
|
|
<span id="status-text" class="text-dim">OFFLINE</span>
|
|
<span class="header-sep">|</span>
|
|
<span id="show-name" class="text-dim">— no file loaded —</span>
|
|
<div style="flex:1"></div>
|
|
<div id="beat-indicator" class="beat-indicator" title="Beat"></div>
|
|
<span id="beat-label" class="text-dim beat-label">BEAT</span>
|
|
</header>
|
|
|
|
<aside class="sidebar">
|
|
<div class="panel" style="flex: 1; min-height: 0;">
|
|
<div class="panel-header">DEVICES</div>
|
|
<div class="panel-content" id="device-list">
|
|
<span class="text-dim">loading...</span>
|
|
</div>
|
|
<details class="device-manage-section">
|
|
<summary>⚙ MANAGE</summary>
|
|
<form id="add-device-form" class="device-form">
|
|
<input type="text" name="name" placeholder="Name" required>
|
|
<select name="strip_type" required>
|
|
<option value="sk6812">SK6812</option>
|
|
<option value="ws2801">WS2801</option>
|
|
<option value="generic">Generic</option>
|
|
</select>
|
|
<input type="number" name="led_count" placeholder="LED count" min="1" max="1000" required>
|
|
<input type="text" name="ip" placeholder="IP address" required>
|
|
<input type="number" name="port" placeholder="Port" min="1" max="65535" value="21324" required>
|
|
<button type="submit">+ ADD</button>
|
|
</form>
|
|
</details>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main-area">
|
|
<div class="section-header">ANIMATIONS</div>
|
|
<div class="animation-list" id="animation-grid">
|
|
<button class="anim-tile active" data-anim="beat_pulse">
|
|
<span class="anim-cursor">></span>
|
|
<span class="anim-name">BEAT_PULSE</span>
|
|
<span class="anim-desc">flash on every beat</span>
|
|
</button>
|
|
<button class="anim-tile" data-anim="strobe">
|
|
<span class="anim-cursor">></span>
|
|
<span class="anim-name">STROBE</span>
|
|
<span class="anim-desc">rapid flash burst</span>
|
|
</button>
|
|
<button class="anim-tile" data-anim="color_wave">
|
|
<span class="anim-cursor">></span>
|
|
<span class="anim-name">COLOR_WAVE</span>
|
|
<span class="anim-desc">rolling color sweep</span>
|
|
</button>
|
|
<button class="anim-tile" data-anim="rainbow">
|
|
<span class="anim-cursor">></span>
|
|
<span class="anim-name">RAINBOW</span>
|
|
<span class="anim-desc">cycling hue rotation</span>
|
|
</button>
|
|
<button class="anim-tile" data-anim="fire">
|
|
<span class="anim-cursor">></span>
|
|
<span class="anim-name">FIRE</span>
|
|
<span class="anim-desc">warm flickering flames</span>
|
|
</button>
|
|
<button class="anim-tile" data-anim="chase">
|
|
<span class="anim-cursor">></span>
|
|
<span class="anim-name">CHASE</span>
|
|
<span class="anim-desc">single pixel chase</span>
|
|
</button>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="transport-bar">
|
|
<audio id="player" style="display:none;"></audio>
|
|
|
|
<button id="btn-play" class="transport-btn transport-playpause" title="Play/Pause">▶</button>
|
|
|
|
<span id="time-current" class="transport-time">0:00</span>
|
|
<span class="text-dim">/</span>
|
|
<span id="time-duration" class="transport-time">0:00</span>
|
|
|
|
<input type="range" id="seek-bar" min="0" max="100" value="0" step="0.1" class="seek-slider">
|
|
|
|
<div class="transport-sep"></div>
|
|
|
|
<label class="transport-btn" title="Upload MP3/WAV/FLAC/OGG" style="cursor:pointer;">
|
|
+ UPLOAD
|
|
<input type="file" id="audio-upload" accept=".mp3,.wav,.flac,.ogg" style="display:none;">
|
|
</label>
|
|
|
|
<select id="audio-select" class="transport-file-select">
|
|
<option value="">— no files —</option>
|
|
</select>
|
|
|
|
<button id="btn-load" class="transport-btn" title="Load selected file">LOAD</button>
|
|
</footer>
|
|
|
|
</div>
|
|
<script src="/app.js" type="module"></script>
|
|
</body>
|
|
</html>
|