projectMM/src/ui/index.html at main · MoonModules/projectMM · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>projectMM</title>
    <link rel="icon" type="image/png" href="/moonlight-logo.png">
    <link rel="stylesheet" href="style.css">
</head>
<body data-theme="dark">
    <header id="status-bar">
        <button type="button" id="nav-toggle" class="header-btn" aria-label="Toggle navigation" title="Toggle navigation">☰</button>
        <img id="brand-logo" src="/moonlight-logo.png" alt="MoonLight">
        <span class="brand">projectMM</span>
        <span id="device-name"></span>
        <span id="sys-stats"></span>
        <span class="spacer"></span>
        <span id="ws-dot" class="ws-dot disconnected" title="WebSocket"></span>
        <button type="button" id="reboot-btn" class="header-btn" aria-label="Reboot device" title="Reboot device">⏻</button>
        <button type="button" id="theme-toggle" class="header-btn" aria-label="Toggle light/dark theme" title="Toggle light/dark theme">☀</button>
    </header>
    <div class="content">
        <nav id="nav"></nav>
        <div id="nav-overlay"></div>
        <div class="main-area">
            <!-- Workspace: preview pane + module cards side by side on wide screens
                 (.mode-docked), or cards full-width with the preview as a floating,
                 draggable picture-in-picture on narrow screens / when popped out
                 (.mode-pip). The mode class is toggled by preview3d.js::setupLayout. -->
            <div class="workspace mode-docked">
                <div class="preview-pane">
                    <!-- Drag handle: only grabbable in PiP mode (a separate element so
                         it never fights the canvas's camera-orbit pointer handler). -->
                    <div class="preview-bar">
                        <span class="preview-grip" title="Drag preview">⠿</span>
                        <!-- Shown only when the device auto-downscales the preview because the
                             WebSocket link can't stream every light fast enough. -->
                        <span id="preview-status" class="preview-status" hidden></span>
                        <span class="preview-bar-spacer"></span>
                        <label for="preview-dot" class="visually-hidden">Dot size</label>
                        <input type="range" id="preview-dot" class="preview-dot" min="0.25" max="1.5" step="0.05" value="1" aria-label="Dot size" title="Dot size">
                        <button type="button" id="preview-numbers" class="preview-bar-btn" aria-label="Toggle LED sequence numbers" title="Show LED sequence numbers (when zoomed in enough to read)">№</button>
                        <button type="button" id="preview-reset" class="preview-bar-btn" aria-label="Reset preview to defaults" title="Reset preview (camera, dot size, numbers, layout)">⌖</button>
                        <button type="button" id="preview-dock" class="preview-bar-btn" aria-label="Pop preview out or dock" title="Pop preview out / dock">⤢</button>
                        <button type="button" id="preview-close" class="preview-bar-btn" aria-label="Hide preview" title="Hide preview">✕</button>
                    </div>
                    <!-- WebGL point sprites can't draw text; the sequence numbers are a 2D
                         canvas overlay (preview3d.js projects each light to screen space).
                         Same box as #preview, pointer-events:none so orbit still works. -->
                    <canvas id="preview"></canvas>
                    <canvas id="preview-labels"></canvas>
                </div>
                <main id="main"></main>
            </div>
            <!-- Re-show affordance: appears only when the PiP is dismissed. -->
            <button type="button" id="preview-show" class="preview-show" aria-label="Show preview" title="Show preview" hidden>◳ preview</button>
        </div>
    </div>
    <script type="module" src="app.js"></script>
</body>
</html>