e0e412fcd1
- Add #live-preview div between timeline-canvas and block-inspector - Add show selector (show-select + btn-load-show) to transport bar - Add keyboard-hint span at far right of transport bar - Append .live-preview, .device-strip, .strip-label, .strip-color, .strip-anim, .keyboard-hint CSS styles
111 lines
5.0 KiB
HTML
111 lines
5.0 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>
|
|
<div class="panel" style="flex: 0 0 auto;">
|
|
<div class="panel-header">ANIMATIONS</div>
|
|
<div class="panel-content animation-list" id="animation-palette">
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main-area">
|
|
<div id="timeline-toolbar" class="timeline-toolbar">
|
|
<label class="toolbar-field">
|
|
<span class="toolbar-label">ZOOM</span>
|
|
<input type="range" id="zoom-slider" min="20" max="400" step="10" value="100">
|
|
</label>
|
|
<div class="toolbar-sep"></div>
|
|
<label class="toolbar-field">
|
|
<span class="toolbar-label">BEAT OFFSET</span>
|
|
<input type="number" id="beat-offset" step="0.005" min="-0.2" max="0.2" value="0.030">
|
|
<span class="toolbar-unit">s</span>
|
|
</label>
|
|
<div class="toolbar-sep"></div>
|
|
<button id="btn-snap" class="transport-btn snap-btn active" title="Snap to beat">SNAP</button>
|
|
</div>
|
|
<canvas id="timeline-canvas"></canvas>
|
|
<div id="live-preview" class="live-preview" style="display:none;"></div>
|
|
<div id="block-inspector" class="block-inspector" style="display:none;"></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>
|
|
|
|
<select id="show-select" class="transport-file-select">
|
|
<option value="">— no shows —</option>
|
|
</select>
|
|
<button id="btn-load-show" class="transport-btn" title="Load saved show">LOAD</button>
|
|
|
|
<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>
|
|
|
|
<div style="flex:1"></div>
|
|
<span class="keyboard-hint">[SPACE] PLAY [←→] SEEK [^Z] UNDO [^S] SAVE</span>
|
|
</footer>
|
|
|
|
</div>
|
|
<script src="/app.js" type="module"></script>
|
|
</body>
|
|
</html>
|