61 lines
2.7 KiB
HTML
61 lines
2.7 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: 1; min-height: 0;">
|
|
<div class="panel-header">DEVICES <button class="panel-manage-btn" id="devices-manage-toggle" title="Manage devices">⚙ MANAGE</button></div>
|
|
<div class="panel-content" id="device-list">
|
|
<span class="text-dim">loading...</span>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
<div class="panel" id="animations-panel" style="flex: 0 0 120px;">
|
|
<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; align-items: center; justify-content: center;">
|
|
<span>[ TIMELINE — PHASE 2+ ]</span>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="transport-bar" id="transport-panel">
|
|
<span>[ TRANSPORT — PHASE 2+ ]</span>
|
|
</footer>
|
|
|
|
</div>
|
|
<script src="/app.js" type="module"></script>
|
|
</body>
|
|
</html>
|