forked from
me.webbeef.org/browser.html
Rewild Your Web
1<!DOCTYPE html>
2<!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
3<html>
4 <head>
5 <meta charset="UTF-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
7 <title>Remote Control</title>
8 <link rel="stylesheet" href="beaver://theme/index.css" />
9 <link rel="stylesheet" href="beaver://shared/fonts/fonts.css" />
10 <link rel="stylesheet" href="beaver://shared/third_party/lucide/lucide.css" />
11 <script type="module" src="beaver://shared/lucide_icon.js"></script>
12 <script type="module" src="beaver://shared/theme.js"></script>
13 <link rel="stylesheet" href="index.css" />
14 <script type="module" src="index.js"></script>
15 </head>
16 <body>
17 <!-- Device selector (shown when not connected) -->
18 <div id="device-selector" class="screen">
19 <div class="selector-header">
20 <div class="app-title">Remote</div>
21 <div class="app-subtitle">Beaver Media Center</div>
22 </div>
23 <div id="device-list" class="device-list">
24 <div class="loading">
25 <lucide-icon name="loader-circle" class="spinner"></lucide-icon>
26 <span>Looking for media centers…</span>
27 </div>
28 </div>
29 </div>
30
31 <!-- PIN entry (shown when connecting as guest) -->
32 <div id="pin-entry" class="screen hidden">
33 <div class="selector-header">
34 <div class="app-title">Guest Access</div>
35 <div class="app-subtitle" id="pin-device-name">Enter the PIN shown on the media center</div>
36 </div>
37 <div class="pin-form">
38 <input type="text" id="pin-input" class="pin-input" maxlength="6"
39 inputmode="numeric" pattern="[0-9]*" placeholder="000000" autocomplete="off" />
40 <div id="pin-error" class="pin-error hidden">Wrong PIN. Try again.</div>
41 <div class="pin-actions">
42 <button id="pin-cancel" class="pin-btn pin-btn-cancel">Cancel</button>
43 <button id="pin-submit" class="pin-btn pin-btn-submit">Connect</button>
44 </div>
45 </div>
46 </div>
47
48 <!-- Remote control (shown when connected) -->
49 <div id="remote-control" class="screen hidden">
50 <!-- Connection status -->
51 <div id="connection-bar" class="connection-bar">
52 <lucide-icon name="monitor-smartphone" class="connected-icon"></lucide-icon>
53 <span id="connected-name">Connected</span>
54 <button id="disconnect-btn" class="disconnect-btn">
55 <lucide-icon name="x"></lucide-icon>
56 </button>
57 </div>
58
59 <!-- Now playing -->
60 <div id="now-playing" class="now-playing hidden">
61 <div class="now-playing-info">
62 <div id="np-title" class="np-title">Nothing playing</div>
63 <div id="np-artist" class="np-artist"></div>
64 </div>
65 <div class="transport-controls">
66 <button class="transport-btn" data-action="previoustrack">
67 <lucide-icon name="skip-back"></lucide-icon>
68 </button>
69 <button class="transport-btn play-btn" id="np-play" data-action="play">
70 <lucide-icon name="play" id="np-play-icon"></lucide-icon>
71 </button>
72 <button class="transport-btn" data-action="nexttrack">
73 <lucide-icon name="skip-forward"></lucide-icon>
74 </button>
75 </div>
76 </div>
77
78 <!-- D-Pad -->
79 <div class="dpad-area">
80 <div class="dpad">
81 <button class="dpad-btn up" data-key="ArrowUp" data-code="ArrowUp">
82 <lucide-icon name="chevron-up"></lucide-icon>
83 </button>
84 <button class="dpad-btn left" data-key="ArrowLeft" data-code="ArrowLeft">
85 <lucide-icon name="chevron-left"></lucide-icon>
86 </button>
87 <button class="dpad-btn ok" data-key="Enter" data-code="Enter">
88 OK
89 </button>
90 <button class="dpad-btn right" data-key="ArrowRight" data-code="ArrowRight">
91 <lucide-icon name="chevron-right"></lucide-icon>
92 </button>
93 <button class="dpad-btn down" data-key="ArrowDown" data-code="ArrowDown">
94 <lucide-icon name="chevron-down"></lucide-icon>
95 </button>
96 </div>
97 </div>
98
99 <!-- Utility buttons -->
100 <div class="utility-bar">
101 <button class="utility-btn" data-key="Home" data-code="Home">
102 <lucide-icon name="house"></lucide-icon>
103 </button>
104 <button class="utility-btn" data-key="Escape" data-code="Escape">
105 <lucide-icon name="arrow-left"></lucide-icon>
106 </button>
107 <button class="utility-btn" data-key="q" data-code="KeyQ">
108 <lucide-icon name="menu"></lucide-icon>
109 </button>
110 </div>
111 </div>
112 </body>
113</html>