148f16ba5e
- Replace timeline placeholder with waveform canvas + playback cursor - Replace transport placeholder with full transport bar controls - Add play/pause/stop buttons, seek slider, time display, audio path input - Add drawWaveform(), loadWaveform(), updatePosition(), formatTime() to app.js - Dispatch msg.type=tick to updatePosition in handleMessage - Wire transport buttons via WebSocket commands - Add transport/waveform styles to style.css using existing CSS variables - Deploy via ~/bin/deploy.sh
84 lines
4.0 KiB
HTML
84 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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">
|
|
<!-- JetBrains Mono via Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
|
|
</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 id="show-name" class="text-dim">— no show loaded —</span>
|
|
</header>
|
|
|
|
<aside class="sidebar">
|
|
<div class="panel" id="devices-panel" style="flex: 0 0 auto;">
|
|
<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 DEVICES</summary>
|
|
<form id="add-device-form" class="device-form">
|
|
<input type="text" name="name" placeholder="Device 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 DEVICE</button>
|
|
</form>
|
|
</details>
|
|
</div>
|
|
<div class="panel" id="animations-panel" style="flex: 1; min-height: 0;">
|
|
<div class="panel-header">ANIMATIONS</div>
|
|
<div class="panel-content text-dim">[ PHASE 3+ ]</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main-area">
|
|
<div class="panel" id="timeline-panel" style="flex: 1; display: flex; flex-direction: column;">
|
|
<div class="panel-header">TIMELINE</div>
|
|
<div class="waveform-container" style="flex: 1; position: relative; min-height: 100px;">
|
|
<canvas id="waveform-canvas" style="width: 100%; height: 100%;"></canvas>
|
|
<div id="playback-cursor" class="playback-cursor"></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="transport-bar" id="transport-panel">
|
|
<div class="transport-controls">
|
|
<button id="btn-play" class="transport-btn" title="Play">▶</button>
|
|
<button id="btn-pause" class="transport-btn" title="Pause" style="display:none">▮▮</button>
|
|
<button id="btn-stop" class="transport-btn" title="Stop">■</button>
|
|
</div>
|
|
<div class="transport-time">
|
|
<span id="time-current">0:00.0</span>
|
|
<span class="text-dim">/</span>
|
|
<span id="time-duration">0:00.0</span>
|
|
</div>
|
|
<div class="transport-seek">
|
|
<input type="range" id="seek-bar" min="0" max="100" value="0" step="0.1" class="seek-slider">
|
|
</div>
|
|
<div class="transport-file">
|
|
<input type="text" id="audio-path" placeholder="Audio file path on server..." class="audio-path-input">
|
|
<button id="btn-load" class="transport-btn" title="Load audio">LOAD</button>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
<script src="/app.js" type="module"></script>
|
|
</body>
|
|
</html>
|