Hugging Face's logo

Spaces:
Sebebeb
/
System
Sleeping

App Files Community
Sebebeb commited on
Commit
65be0cc
·
verified ·
1 Parent(s): 9bfc2c5

Update public/admin/index.html

Browse files
Files changed (1) hide show
  1. public/admin/index.html +153 -137
public/admin/index.html CHANGED
@@ -9,166 +9,182 @@
9
  <body>
10
  <div id="root">
11
 
12
- <!-- Top Bar -->
13
- <header id="topbar">
14
- <div id="topbar-logo">DISPATCH</div>
15
- <div id="topbar-status">
16
- <span id="ws-indicator" class="indicator offline"></span>
17
- <span id="ws-label">OFFLINE</span>
 
 
 
 
 
 
 
 
 
 
 
18
  </div>
19
- </header>
20
 
21
- <!-- Tabs -->
22
- <nav id="tabs">
23
- <button class="tab-btn active" data-tab="notifications">NOTIFICATIONS</button>
24
- <button class="tab-btn" data-tab="devices">DEVICES</button>
25
- </nav>
26
 
27
- <!-- ── NOTIFICATIONS TAB ── -->
28
- <div id="tab-notifications" class="tab-panel active">
29
- <div id="notif-layout">
 
 
 
 
 
 
30
 
31
- <!-- LEFT: Create Notification Form -->
32
- <aside id="create-panel">
33
- <h2 class="panel-title">NEW NOTIFICATION</h2>
34
- <div class="form-group">
35
- <label for="f-name">Internal Name</label>
36
- <input id="f-name" type="text" placeholder="e.g. promo-sept-24" />
37
- </div>
38
- <div class="form-group">
39
- <label for="f-heading">Heading</label>
40
- <input id="f-heading" type="text" placeholder="Notification heading" />
41
- </div>
42
- <div class="form-group">
43
- <label for="f-body">Body</label>
44
- <textarea id="f-body" rows="4" placeholder="Notification body text..."></textarea>
45
- </div>
46
- <div class="form-group">
47
- <label for="f-hyperlink">Hyperlink</label>
48
- <input id="f-hyperlink" type="url" placeholder="https://..." />
49
- </div>
50
- <div class="form-group">
51
- <label for="f-sound">Sound</label>
52
- <select id="f-sound">
53
- <option value="">— No Sound —</option>
54
- </select>
55
- </div>
56
- <div class="form-group">
57
- <label>Upload Sound File</label>
58
- <div id="sound-upload-area">
59
- <input id="f-sound-file" type="file" accept="audio/*" hidden />
60
- <button id="sound-upload-btn" class="btn-outline" type="button">
61
- ▲ UPLOAD AUDIO
62
- </button>
63
- <span id="sound-file-name">No file chosen</span>
64
- </div>
65
- <input id="f-sound-name" type="text" placeholder="Sound name (required for upload)" style="margin-top:8px" />
66
- </div>
67
- <button id="create-notif-btn" class="btn-create">CREATE NOTIFICATION</button>
68
- </aside>
69
 
70
- <!-- MIDDLE: Notification List -->
71
- <main id="notif-list-panel">
72
- <h2 class="panel-title">ALL NOTIFICATIONS <span id="notif-count" class="badge">0</span></h2>
73
- <div id="notif-list">
74
- <div class="empty-state">No notifications yet.</div>
75
- </div>
76
- </main>
77
 
78
- <!-- RIGHT: Schedule Panel -->
79
- <section id="schedule-panel">
80
- <div id="schedule-empty-state">
81
- <div class="select-hint">
82
- <div class="select-hint-icon">◎</div>
83
- <p>Select a notification<br>to schedule or play it</p>
84
  </div>
85
- </div>
86
- <div id="schedule-active" style="display:none">
87
- <div id="selected-notif-info">
88
- <div id="selected-notif-name"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
89
  </div>
90
- <button id="play-now-btn" title="Play Now">
91
- <span>▶ PLAY NOW</span>
92
- </button>
93
- <div id="schedule-controls">
94
- <div class="toggle-row">
95
- <label class="toggle-label" for="now-toggle">NOW</label>
96
- <label class="toggle-switch">
97
- <input type="checkbox" id="now-toggle" />
98
- <span class="toggle-track"><span class="toggle-thumb"></span></span>
99
- </label>
100
  </div>
101
- <div id="datetime-pickers">
102
- <div class="picker-group">
103
- <label>DATE</label>
104
- <input type="date" id="sched-date" />
 
 
 
 
105
  </div>
106
- <div class="picker-group">
107
- <label>TIME</label>
108
- <input type="time" id="sched-time" />
 
 
 
 
 
 
109
  </div>
 
110
  </div>
111
- <button id="schedule-btn" class="btn-schedule">SCHEDULE</button>
112
  </div>
113
- </div>
114
- </section>
115
 
 
116
  </div>
117
- </div>
118
 
119
- <!-- ── DEVICES TAB ── -->
120
- <div id="tab-devices" class="tab-panel">
121
- <div id="devices-layout">
122
-
123
- <!-- Device List -->
124
- <aside id="device-list-panel">
125
- <h2 class="panel-title">DEVICES <span id="device-count" class="badge">0</span></h2>
126
- <div id="device-list">
127
- <div class="empty-state">No devices connected yet.</div>
128
- </div>
129
- </aside>
130
-
131
- <!-- Device Detail -->
132
- <main id="device-detail-panel">
133
- <div id="device-empty-state" class="select-hint">
134
- <div class="select-hint-icon">◉</div>
135
- <p>Select a device<br>to manage it</p>
136
- </div>
137
- <div id="device-detail" style="display:none">
138
- <div id="device-header">
139
- <div id="device-status-indicator" class="indicator"></div>
140
- <div>
141
- <div id="detail-device-name-display" class="device-detail-name"></div>
142
- <div id="detail-device-uuid" class="device-detail-uuid"></div>
143
- </div>
144
- <div id="device-name-edit-area">
145
- <input id="device-name-input" type="text" placeholder="Device name..." />
146
- <button id="device-name-save" class="btn-sm">SAVE NAME</button>
147
- </div>
148
  </div>
149
-
150
- <div id="device-sections">
151
- <div class="device-section">
152
- <h3>CACHED SOUNDS</h3>
153
- <div id="detail-sounds" class="tag-list"></div>
154
- </div>
155
- <div class="device-section">
156
- <h3>NOTIFICATIONS</h3>
157
- <div id="detail-notifications" class="notif-table-wrap"></div>
 
 
 
 
 
 
 
 
158
  </div>
159
- <div class="device-section">
160
- <h3>SCHEDULE</h3>
161
- <div id="detail-schedule" class="schedule-table-wrap"></div>
 
 
 
 
 
 
 
 
 
 
162
  </div>
163
  </div>
164
- </div>
165
- </main>
166
-
167
  </div>
168
- </div>
 
169
 
170
  </div><!-- /#root -->
171
 
172
  <script src="/admin/script.js"></script>
173
  </body>
174
- </html>
 
9
  <body>
10
  <div id="root">
11
 
12
+ <!-- ── LOGIN SCREEN ── -->
13
+ <div id="login-screen">
14
+ <div id="login-box">
15
+ <div id="login-logo">DISPATCH</div>
16
+ <div id="login-subtitle">ADMIN ACCESS</div>
17
+ <div id="login-form">
18
+ <div class="form-group">
19
+ <label for="login-password">ACCESS KEY</label>
20
+ <input id="login-password" type="password" placeholder="Enter key..." autocomplete="current-password" />
21
+ </div>
22
+ <div id="login-error"></div>
23
+ <button id="login-btn" class="btn-create">AUTHENTICATE</button>
24
+ </div>
25
+ <div id="login-connecting" style="display:none">
26
+ <div class="spinner"></div>
27
+ <span>Connecting...</span>
28
+ </div>
29
  </div>
30
+ </div>
31
 
32
+ <!-- ── MAIN APP (hidden until authenticated) ── -->
33
+ <div id="app" style="display:none">
 
 
 
34
 
35
+ <!-- Top Bar -->
36
+ <header id="topbar">
37
+ <div id="topbar-logo">DISPATCH</div>
38
+ <div id="topbar-status">
39
+ <span id="ws-indicator" class="indicator offline"></span>
40
+ <span id="ws-label">OFFLINE</span>
41
+ <button id="logout-btn" class="btn-logout">LOGOUT</button>
42
+ </div>
43
+ </header>
44
 
45
+ <!-- Tabs -->
46
+ <nav id="tabs">
47
+ <button class="tab-btn active" data-tab="notifications">NOTIFICATIONS</button>
48
+ <button class="tab-btn" data-tab="devices">DEVICES</button>
49
+ </nav>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
 
51
+ <!-- ── NOTIFICATIONS TAB ── -->
52
+ <div id="tab-notifications" class="tab-panel active">
53
+ <div id="notif-layout">
 
 
 
 
54
 
55
+ <!-- LEFT: Create Notification Form -->
56
+ <aside id="create-panel">
57
+ <h2 class="panel-title">NEW NOTIFICATION</h2>
58
+ <div class="form-group">
59
+ <label for="f-name">Internal Name</label>
60
+ <input id="f-name" type="text" placeholder="e.g. promo-sept-24" />
61
  </div>
62
+ <div class="form-group">
63
+ <label for="f-heading">Heading</label>
64
+ <input id="f-heading" type="text" placeholder="Notification heading" />
65
+ </div>
66
+ <div class="form-group">
67
+ <label for="f-body">Body</label>
68
+ <textarea id="f-body" rows="4" placeholder="Notification body text..."></textarea>
69
+ </div>
70
+ <div class="form-group">
71
+ <label for="f-hyperlink">Hyperlink</label>
72
+ <input id="f-hyperlink" type="url" placeholder="https://..." />
73
+ </div>
74
+ <div class="form-group">
75
+ <label for="f-sound">Sound</label>
76
+ <select id="f-sound">
77
+ <option value="">— No Sound —</option>
78
+ </select>
79
+ </div>
80
+ <div class="form-group">
81
+ <label>Upload Sound File</label>
82
+ <div id="sound-upload-area">
83
+ <input id="f-sound-file" type="file" accept="audio/*" hidden />
84
+ <button id="sound-upload-btn" class="btn-outline" type="button">▲ UPLOAD AUDIO</button>
85
+ <span id="sound-file-name">No file chosen</span>
86
+ </div>
87
+ <input id="f-sound-name" type="text" placeholder="Sound name (required for upload)" style="margin-top:8px" />
88
+ </div>
89
+ <button id="create-notif-btn" class="btn-create">CREATE NOTIFICATION</button>
90
+ </aside>
91
+
92
+ <!-- MIDDLE: Notification List -->
93
+ <main id="notif-list-panel">
94
+ <h2 class="panel-title">ALL NOTIFICATIONS <span id="notif-count" class="badge">0</span></h2>
95
+ <div id="notif-list">
96
+ <div class="empty-state">No notifications yet.</div>
97
+ </div>
98
+ </main>
99
+
100
+ <!-- RIGHT: Schedule Panel -->
101
+ <section id="schedule-panel">
102
+ <div id="schedule-empty-state">
103
+ <div class="select-hint">
104
+ <div class="select-hint-icon">◎</div>
105
+ <p>Select a notification<br>to schedule or play it</p>
106
+ </div>
107
  </div>
108
+ <div id="schedule-active" style="display:none">
109
+ <div id="selected-notif-info">
110
+ <div id="selected-notif-name"></div>
 
 
 
 
 
 
 
111
  </div>
112
+ <button id="play-now-btn" title="Play Now"><span>▶ PLAY NOW</span></button>
113
+ <div id="schedule-controls">
114
+ <div class="toggle-row">
115
+ <label class="toggle-label" for="now-toggle">NOW</label>
116
+ <label class="toggle-switch">
117
+ <input type="checkbox" id="now-toggle" />
118
+ <span class="toggle-track"><span class="toggle-thumb"></span></span>
119
+ </label>
120
  </div>
121
+ <div id="datetime-pickers">
122
+ <div class="picker-group">
123
+ <label>DATE</label>
124
+ <input type="date" id="sched-date" />
125
+ </div>
126
+ <div class="picker-group">
127
+ <label>TIME</label>
128
+ <input type="time" id="sched-time" />
129
+ </div>
130
  </div>
131
+ <button id="schedule-btn" class="btn-schedule">SCHEDULE</button>
132
  </div>
 
133
  </div>
134
+ </section>
 
135
 
136
+ </div>
137
  </div>
 
138
 
139
+ <!-- ── DEVICES TAB ── -->
140
+ <div id="tab-devices" class="tab-panel">
141
+ <div id="devices-layout">
142
+ <aside id="device-list-panel">
143
+ <h2 class="panel-title">DEVICES <span id="device-count" class="badge">0</span></h2>
144
+ <div id="device-list">
145
+ <div class="empty-state">No devices connected yet.</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
146
  </div>
147
+ </aside>
148
+ <main id="device-detail-panel">
149
+ <div id="device-empty-state" class="select-hint">
150
+ <div class="select-hint-icon">◉</div>
151
+ <p>Select a device<br>to manage it</p>
152
+ </div>
153
+ <div id="device-detail" style="display:none">
154
+ <div id="device-header">
155
+ <div id="device-status-indicator" class="indicator"></div>
156
+ <div>
157
+ <div id="detail-device-name-display" class="device-detail-name"></div>
158
+ <div id="detail-device-uuid" class="device-detail-uuid"></div>
159
+ </div>
160
+ <div id="device-name-edit-area">
161
+ <input id="device-name-input" type="text" placeholder="Device name..." />
162
+ <button id="device-name-save" class="btn-sm">SAVE NAME</button>
163
+ </div>
164
  </div>
165
+ <div id="device-sections">
166
+ <div class="device-section">
167
+ <h3>CACHED SOUNDS</h3>
168
+ <div id="detail-sounds" class="tag-list"></div>
169
+ </div>
170
+ <div class="device-section">
171
+ <h3>NOTIFICATIONS</h3>
172
+ <div id="detail-notifications" class="notif-table-wrap"></div>
173
+ </div>
174
+ <div class="device-section">
175
+ <h3>SCHEDULE</h3>
176
+ <div id="detail-schedule" class="schedule-table-wrap"></div>
177
+ </div>
178
  </div>
179
  </div>
180
+ </main>
181
+ </div>
 
182
  </div>
183
+
184
+ </div><!-- /#app -->
185
 
186
  </div><!-- /#root -->
187
 
188
  <script src="/admin/script.js"></script>
189
  </body>
190
+ </html>