smodusermc commited on
Commit
32a9b6f
·
verified ·
1 Parent(s): e62bb51

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +474 -116
static/index.html CHANGED
@@ -1,194 +1,552 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
  <title>InfinityChat - Secure Messaging</title>
 
 
 
 
 
 
 
 
 
 
 
7
  <link rel="stylesheet" href="/static/style.css">
8
  </head>
9
  <body>
10
- <!-- Auth Screen -->
 
 
11
  <div id="auth-screen" class="screen active">
12
- <div class="auth-background"></div>
 
 
 
 
 
13
  <div class="auth-container">
14
- <div class="auth-logo">
15
- <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
16
- <circle cx="24" cy="24" r="22" stroke="currentColor" stroke-width="2"/>
17
- <path d="M16 28L24 20L32 28" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
18
- </svg>
19
- <h1>InfinityChat</h1>
20
- <p class="auth-subtitle">Secure. Private. Real-time.</p>
21
  </div>
22
 
23
  <div class="auth-tabs">
24
- <button class="auth-tab active" data-tab="login">Sign In</button>
25
- <button class="auth-tab" data-tab="signup">Create Account</button>
 
 
 
 
 
 
26
  </div>
27
 
28
- <form id="login-form" class="auth-form active">
29
- <div class="input-group">
30
- <label for="login-username">Username</label>
31
- <input type="text" id="login-username" placeholder="Enter your username" required autocomplete="username">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
32
  </div>
33
- <div class="input-group">
34
- <label for="login-password">Password</label>
35
- <input type="password" id="login-password" placeholder="Enter your password" required autocomplete="current-password">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  </div>
37
- <button type="submit" class="btn btn-primary">Sign In</button>
 
 
 
 
38
  </form>
39
 
40
- <form id="signup-form" class="auth-form">
41
- <div class="input-group">
42
- <label for="signup-username">Username</label>
43
- <input type="text" id="signup-username" placeholder="Choose a username" required autocomplete="username">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  </div>
45
- <div class="input-group">
46
- <label for="signup-display">Display Name</label>
47
- <input type="text" id="signup-display" placeholder="Your display name" required>
 
 
 
 
 
 
 
 
 
 
 
 
 
48
  </div>
49
- <div class="input-group">
50
- <label for="signup-password">Password</label>
51
- <input type="password" id="signup-password" placeholder="Create a password" required autocomplete="new-password">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
52
  </div>
53
- <button type="submit" class="btn btn-primary">Create Account</button>
 
 
 
 
 
 
 
 
 
 
 
54
  </form>
55
 
56
- <div id="auth-error" class="error-message"></div>
 
 
 
 
 
 
 
 
57
  </div>
58
  </div>
59
 
60
- <!-- Chat Screen -->
 
 
61
  <div id="chat-screen" class="screen">
 
62
  <header class="chat-header">
63
- <div class="header-left">
64
- <button id="settings-btn" class="icon-btn" aria-label="Settings">
65
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
66
- <circle cx="12" cy="12" r="3"/>
67
- <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
68
- </svg>
69
  </button>
 
 
 
 
 
 
 
 
 
 
 
70
  </div>
71
- <div class="header-center">
72
- <h2 class="chat-title">InfinityChat</h2>
73
- <span id="online-count" class="online-count">0 online</span>
74
- </div>
75
- <div class="header-right">
76
- <button id="logout-btn" class="icon-btn" aria-label="Logout">
77
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
78
- <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/>
79
- </svg>
80
  </button>
81
  </div>
82
  </header>
83
 
84
- <!-- Typing Indicator -->
85
- <div id="typing-indicator" class="typing-indicator"></div>
 
 
 
86
 
87
  <!-- Messages Container -->
88
  <div id="messages-container" class="messages-container">
89
- <div id="messages-list" class="messages-list"></div>
90
- <div id="load-more" class="load-more">
91
- <button id="load-older-btn" class="btn btn-secondary hidden">Load older messages</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
  </div>
93
  </div>
94
 
 
 
 
 
 
 
 
 
 
 
95
  <!-- Reply Preview -->
96
  <div id="reply-preview" class="reply-preview hidden">
97
- <div class="reply-content">
98
- <span class="reply-label">Replying to</span>
99
- <span id="reply-preview-text" class="reply-text"></span>
100
- </div>
101
- <button id="cancel-reply" class="cancel-reply" aria-label="Cancel reply">
102
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
103
- <path d="M12 4l-8 8M4 4l8 8"/>
104
- </svg>
105
- </button>
 
106
  </div>
107
 
108
  <!-- Compose Area -->
109
- <div class="compose-container">
 
 
 
 
 
 
 
 
 
 
110
  <form id="compose-form" class="compose-form">
111
- <button type="button" id="attach-btn" class="attach-btn" aria-label="Attach file">
112
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
113
- <path d="M14 7l-5 5a2 2 0 01-2.83-2.83l6-6a3.5 3.5 0 014.95 4.95l-7 7a5 5 0 01-7.07-7.07l5-5"/>
114
- </svg>
115
- </button>
116
- <input type="file" id="file-input" multiple style="display:none">
117
- <textarea id="message-input" class="message-input" placeholder="Type a message..." rows="1"></textarea>
118
- <button type="submit" id="send-btn" class="send-btn" aria-label="Send message">
119
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
120
- <path d="M1 10l17-9-9 17-4-8-4-4z"/>
121
- </svg>
 
 
 
 
 
 
 
 
 
 
 
 
122
  </button>
123
  </form>
 
124
  <div id="upload-progress" class="upload-progress hidden">
125
- <div class="progress-bar">
126
- <div id="upload-bar" class="progress-fill" style="width: 0%"></div>
127
  </div>
128
- <span id="upload-filename" class="upload-filename"></span>
129
  </div>
130
  </div>
131
  </div>
132
 
133
- <!-- Settings Modal -->
 
 
134
  <div id="settings-modal" class="modal hidden">
135
- <div class="modal-overlay"></div>
136
- <div class="modal-content">
137
  <div class="modal-header">
138
- <h2>Settings</h2>
139
- <button id="close-settings" class="icon-btn" aria-label="Close">
140
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
141
- <path d="M15 5l-10 10M5 5l10 10"/>
142
- </svg>
143
  </button>
144
  </div>
 
145
  <div class="modal-body">
146
- <div class="setting-section">
147
- <h3>Profile</h3>
148
- <div class="setting-item">
149
- <label for="setting-display-name">Display Name</label>
150
- <input type="text" id="setting-display-name" class="input">
 
 
 
 
 
 
 
 
 
 
 
151
  </div>
152
- <div class="setting-item">
153
- <label>Avatar</label>
154
- <div class="avatar-upload">
155
- <img id="avatar-preview" class="avatar-preview" src="" alt="Avatar" style="display:none">
156
- <input type="file" id="setting-avatar" accept="image/*">
 
 
 
 
 
 
157
  </div>
158
  </div>
159
- </div>
160
- <div class="setting-section">
161
- <h3>Appearance</h3>
162
- <div class="setting-item">
163
- <label for="theme-select">Theme</label>
164
- <select id="theme-select" class="input">
165
- <option value="light">Light</option>
166
- <option value="dark">Dark</option>
167
- <option value="custom">Custom</option>
168
- </select>
 
 
 
 
169
  </div>
170
- <div id="custom-theme-settings" class="custom-theme hidden">
171
- <div class="setting-item">
172
- <label>Your Messages</label>
173
- <input type="color" id="custom-self-color" value="#2563EB">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
174
  </div>
175
- <div class="setting-item">
176
- <label>Their Messages</label>
177
- <input type="color" id="custom-other-color" value="#F3F4F6">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
178
  </div>
179
- <div class="setting-item">
180
- <label>Text Color</label>
181
- <input type="color" id="custom-text-color" value="#111827">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
182
  </div>
183
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
184
  </div>
185
  </div>
186
  <div class="modal-footer">
187
- <button id="save-settings" class="btn btn-primary">Save Changes</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
188
  </div>
189
  </div>
 
190
  </div>
191
 
 
 
 
 
 
 
192
  <script src="/static/script.js"></script>
193
  </body>
194
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="en" data-theme="light">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
  <title>InfinityChat - Secure Messaging</title>
7
+ <meta name="description" content="Secure, private, real-time messaging platform">
8
+ <meta name="theme-color" content="#2563EB">
9
+
10
+ <!-- Font Awesome 6 (Free) -->
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
12
+
13
+ <!-- Google Fonts -->
14
+ <link rel="preconnect" href="https://fonts.googleapis.com">
15
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
17
+
18
  <link rel="stylesheet" href="/static/style.css">
19
  </head>
20
  <body>
21
+ <!-- =========================================== -->
22
+ <!-- AUTH SCREEN -->
23
+ <!-- =========================================== -->
24
  <div id="auth-screen" class="screen active">
25
+ <div class="auth-bg">
26
+ <div class="auth-bg-circle auth-bg-circle-1"></div>
27
+ <div class="auth-bg-circle auth-bg-circle-2"></div>
28
+ <div class="auth-bg-circle auth-bg-circle-3"></div>
29
+ </div>
30
+
31
  <div class="auth-container">
32
+ <div class="auth-header">
33
+ <div class="auth-logo">
34
+ <i class="fas fa-infinity"></i>
35
+ </div>
36
+ <h1 class="auth-title">InfinityChat</h1>
37
+ <p class="auth-subtitle">Secure, private, real-time messaging</p>
 
38
  </div>
39
 
40
  <div class="auth-tabs">
41
+ <button class="auth-tab active" data-tab="login">
42
+ <i class="fas fa-sign-in-alt"></i>
43
+ Sign In
44
+ </button>
45
+ <button class="auth-tab" data-tab="signup">
46
+ <i class="fas fa-user-plus"></i>
47
+ Create Account
48
+ </button>
49
  </div>
50
 
51
+ <!-- Login Form -->
52
+ <form id="login-form" class="auth-form active" autocomplete="off">
53
+ <div class="form-group">
54
+ <label for="login-username">
55
+ <i class="fas fa-user"></i>
56
+ Username
57
+ </label>
58
+ <div class="input-wrapper">
59
+ <input
60
+ type="text"
61
+ id="login-username"
62
+ class="form-input"
63
+ placeholder="Enter your username"
64
+ required
65
+ autocomplete="username"
66
+ spellcheck="false"
67
+ >
68
+ </div>
69
  </div>
70
+
71
+ <div class="form-group">
72
+ <label for="login-password">
73
+ <i class="fas fa-lock"></i>
74
+ Password
75
+ </label>
76
+ <div class="input-wrapper">
77
+ <input
78
+ type="password"
79
+ id="login-password"
80
+ class="form-input"
81
+ placeholder="Enter your password"
82
+ required
83
+ autocomplete="current-password"
84
+ >
85
+ <button type="button" class="input-toggle" data-toggle="login-password">
86
+ <i class="fas fa-eye"></i>
87
+ </button>
88
+ </div>
89
  </div>
90
+
91
+ <button type="submit" class="btn btn-primary btn-block">
92
+ <i class="fas fa-arrow-right"></i>
93
+ Sign In
94
+ </button>
95
  </form>
96
 
97
+ <!-- Signup Form -->
98
+ <form id="signup-form" class="auth-form" autocomplete="off">
99
+ <div class="form-group">
100
+ <label for="signup-username">
101
+ <i class="fas fa-user"></i>
102
+ Username
103
+ </label>
104
+ <div class="input-wrapper">
105
+ <input
106
+ type="text"
107
+ id="signup-username"
108
+ class="form-input"
109
+ placeholder="Choose a username"
110
+ required
111
+ autocomplete="off"
112
+ minlength="3"
113
+ maxlength="30"
114
+ pattern="[a-zA-Z0-9_]+"
115
+ title="Only letters, numbers, and underscores"
116
+ spellcheck="false"
117
+ >
118
+ </div>
119
+ <small class="form-hint">3-30 characters, letters, numbers, and underscores</small>
120
  </div>
121
+
122
+ <div class="form-group">
123
+ <label for="signup-display">
124
+ <i class="fas fa-id-card"></i>
125
+ Display Name
126
+ </label>
127
+ <div class="input-wrapper">
128
+ <input
129
+ type="text"
130
+ id="signup-display"
131
+ class="form-input"
132
+ placeholder="Your display name (optional)"
133
+ maxlength="50"
134
+ autocomplete="off"
135
+ >
136
+ </div>
137
  </div>
138
+
139
+ <div class="form-group">
140
+ <label for="signup-password">
141
+ <i class="fas fa-lock"></i>
142
+ Password
143
+ </label>
144
+ <div class="input-wrapper">
145
+ <input
146
+ type="password"
147
+ id="signup-password"
148
+ class="form-input"
149
+ placeholder="Create a password"
150
+ required
151
+ autocomplete="new-password"
152
+ minlength="6"
153
+ >
154
+ <button type="button" class="input-toggle" data-toggle="signup-password">
155
+ <i class="fas fa-eye"></i>
156
+ </button>
157
+ </div>
158
+ <small class="form-hint">At least 6 characters</small>
159
  </div>
160
+
161
+ <div class="password-strength">
162
+ <div class="strength-bar">
163
+ <div id="strength-fill" class="strength-fill"></div>
164
+ </div>
165
+ <span id="strength-text" class="strength-text">Weak</span>
166
+ </div>
167
+
168
+ <button type="submit" class="btn btn-primary btn-block">
169
+ <i class="fas fa-user-plus"></i>
170
+ Create Account
171
+ </button>
172
  </form>
173
 
174
+ <div id="auth-error" class="alert alert-error">
175
+ <i class="fas fa-exclamation-circle"></i>
176
+ <span id="auth-error-text"></span>
177
+ </div>
178
+
179
+ <div id="auth-loading" class="auth-loading hidden">
180
+ <div class="spinner"></div>
181
+ <span>Please wait...</span>
182
+ </div>
183
  </div>
184
  </div>
185
 
186
+ <!-- =========================================== -->
187
+ <!-- CHAT SCREEN -->
188
+ <!-- =========================================== -->
189
  <div id="chat-screen" class="screen">
190
+ <!-- Chat Header -->
191
  <header class="chat-header">
192
+ <div class="header-section header-left">
193
+ <button id="menu-btn" class="btn-icon" aria-label="Menu">
194
+ <i class="fas fa-bars"></i>
 
 
 
195
  </button>
196
+ <div class="header-avatar" id="header-avatar-placeholder">
197
+ <i class="fas fa-user-circle"></i>
198
+ </div>
199
+ <img id="header-avatar" class="header-avatar-img hidden" alt="Avatar">
200
+ <div class="header-info">
201
+ <h2 class="header-name" id="header-display-name">InfinityChat</h2>
202
+ <span class="header-status" id="header-status">
203
+ <span class="status-dot online"></span>
204
+ Online
205
+ </span>
206
+ </div>
207
  </div>
208
+
209
+ <div class="header-section header-right">
210
+ <button id="online-btn" class="btn-icon" aria-label="Online users">
211
+ <i class="fas fa-users"></i>
212
+ <span id="online-badge" class="badge">0</span>
213
+ </button>
214
+ <button id="settings-btn" class="btn-icon" aria-label="Settings">
215
+ <i class="fas fa-cog"></i>
 
216
  </button>
217
  </div>
218
  </header>
219
 
220
+ <!-- Connection Status -->
221
+ <div id="connection-status" class="connection-status">
222
+ <i class="fas fa-wifi"></i>
223
+ <span id="connection-text">Connecting...</span>
224
+ </div>
225
 
226
  <!-- Messages Container -->
227
  <div id="messages-container" class="messages-container">
228
+ <div id="messages-scroll" class="messages-scroll">
229
+ <div id="load-more" class="load-more">
230
+ <button id="load-older-btn" class="btn btn-ghost hidden">
231
+ <i class="fas fa-chevron-up"></i>
232
+ Load older messages
233
+ </button>
234
+ </div>
235
+
236
+ <div id="messages-list" class="messages-list">
237
+ <div id="empty-state" class="empty-state">
238
+ <div class="empty-icon">
239
+ <i class="fas fa-comments"></i>
240
+ </div>
241
+ <h3>No messages yet</h3>
242
+ <p>Start the conversation by sending a message below</p>
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <div id="scroll-bottom-btn" class="scroll-bottom-btn hidden" aria-label="Scroll to bottom">
248
+ <i class="fas fa-chevron-down"></i>
249
  </div>
250
  </div>
251
 
252
+ <!-- Typing Indicator -->
253
+ <div id="typing-indicator" class="typing-indicator hidden">
254
+ <div class="typing-dots">
255
+ <span class="typing-dot"></span>
256
+ <span class="typing-dot"></span>
257
+ <span class="typing-dot"></span>
258
+ </div>
259
+ <span id="typing-text" class="typing-text"></span>
260
+ </div>
261
+
262
  <!-- Reply Preview -->
263
  <div id="reply-preview" class="reply-preview hidden">
264
+ <div class="reply-bar">
265
+ <i class="fas fa-reply reply-icon"></i>
266
+ <div class="reply-content">
267
+ <span class="reply-label">Replying to <span id="reply-user"></span></span>
268
+ <span id="reply-text" class="reply-text"></span>
269
+ </div>
270
+ <button id="cancel-reply" class="btn-icon btn-icon-sm" aria-label="Cancel reply">
271
+ <i class="fas fa-times"></i>
272
+ </button>
273
+ </div>
274
  </div>
275
 
276
  <!-- Compose Area -->
277
+ <div class="compose-area">
278
+ <div id="upload-preview" class="upload-preview hidden">
279
+ <div class="upload-info">
280
+ <i class="fas fa-file"></i>
281
+ <span id="upload-filename"></span>
282
+ </div>
283
+ <button id="cancel-upload" class="btn-icon btn-icon-sm" aria-label="Cancel upload">
284
+ <i class="fas fa-times"></i>
285
+ </button>
286
+ </div>
287
+
288
  <form id="compose-form" class="compose-form">
289
+ <div class="compose-tools">
290
+ <button type="button" id="attach-btn" class="btn-icon" aria-label="Attach file">
291
+ <i class="fas fa-paperclip"></i>
292
+ </button>
293
+ <button type="button" id="emoji-btn" class="btn-icon" aria-label="Emoji picker">
294
+ <i class="fas fa-smile"></i>
295
+ </button>
296
+ </div>
297
+
298
+ <input type="file" id="file-input" multiple accept="image/*,video/*,audio/*,.pdf,.doc,.docx,.txt" style="display:none">
299
+
300
+ <div class="input-area">
301
+ <textarea
302
+ id="message-input"
303
+ class="message-input"
304
+ placeholder="Type a message..."
305
+ rows="1"
306
+ maxlength="10000"
307
+ ></textarea>
308
+ </div>
309
+
310
+ <button type="submit" id="send-btn" class="btn btn-send" aria-label="Send message" disabled>
311
+ <i class="fas fa-paper-plane"></i>
312
  </button>
313
  </form>
314
+
315
  <div id="upload-progress" class="upload-progress hidden">
316
+ <div class="progress-track">
317
+ <div id="progress-fill" class="progress-fill" style="width: 0%"></div>
318
  </div>
319
+ <span id="progress-text" class="progress-text">0%</span>
320
  </div>
321
  </div>
322
  </div>
323
 
324
+ <!-- =========================================== -->
325
+ <!-- SETTINGS MODAL -->
326
+ <!-- =========================================== -->
327
  <div id="settings-modal" class="modal hidden">
328
+ <div class="modal-backdrop" data-close="settings-modal"></div>
329
+ <div class="modal-container">
330
  <div class="modal-header">
331
+ <h2><i class="fas fa-cog"></i> Settings</h2>
332
+ <button class="btn-icon" data-close="settings-modal" aria-label="Close">
333
+ <i class="fas fa-times"></i>
 
 
334
  </button>
335
  </div>
336
+
337
  <div class="modal-body">
338
+ <!-- Profile Section -->
339
+ <section class="settings-section">
340
+ <h3><i class="fas fa-user"></i> Profile</h3>
341
+
342
+ <div class="settings-row">
343
+ <div class="avatar-section">
344
+ <div id="settings-avatar-preview" class="settings-avatar">
345
+ <i class="fas fa-user-circle"></i>
346
+ </div>
347
+ <img id="settings-avatar-img" class="settings-avatar-img hidden" alt="Avatar">
348
+ <button id="avatar-upload-btn" class="btn btn-secondary btn-sm">
349
+ <i class="fas fa-camera"></i>
350
+ Change Photo
351
+ </button>
352
+ <input type="file" id="avatar-input" accept="image/*" style="display:none">
353
+ </div>
354
  </div>
355
+
356
+ <div class="form-group">
357
+ <label for="settings-display-name">Display Name</label>
358
+ <div class="input-wrapper">
359
+ <input
360
+ type="text"
361
+ id="settings-display-name"
362
+ class="form-input"
363
+ maxlength="50"
364
+ placeholder="Your display name"
365
+ >
366
  </div>
367
  </div>
368
+
369
+ <div class="form-group">
370
+ <label for="settings-username">
371
+ Username
372
+ <span class="label-hint">(cannot be changed)</span>
373
+ </label>
374
+ <div class="input-wrapper">
375
+ <input
376
+ type="text"
377
+ id="settings-username"
378
+ class="form-input"
379
+ disabled
380
+ >
381
+ </div>
382
  </div>
383
+ </section>
384
+
385
+ <!-- Appearance Section -->
386
+ <section class="settings-section">
387
+ <h3><i class="fas fa-palette"></i> Appearance</h3>
388
+
389
+ <div class="form-group">
390
+ <label>Theme</label>
391
+ <div class="theme-selector">
392
+ <button class="theme-option active" data-theme="light">
393
+ <div class="theme-preview theme-preview-light">
394
+ <div class="theme-preview-header"></div>
395
+ <div class="theme-preview-body">
396
+ <div class="theme-preview-message self"></div>
397
+ <div class="theme-preview-message other"></div>
398
+ </div>
399
+ </div>
400
+ <span>Light</span>
401
+ </button>
402
+ <button class="theme-option" data-theme="dark">
403
+ <div class="theme-preview theme-preview-dark">
404
+ <div class="theme-preview-header"></div>
405
+ <div class="theme-preview-body">
406
+ <div class="theme-preview-message self"></div>
407
+ <div class="theme-preview-message other"></div>
408
+ </div>
409
+ </div>
410
+ <span>Dark</span>
411
+ </button>
412
+ <button class="theme-option" data-theme="custom">
413
+ <div class="theme-preview theme-preview-custom">
414
+ <div class="theme-preview-header"></div>
415
+ <div class="theme-preview-body">
416
+ <div class="theme-preview-message self"></div>
417
+ <div class="theme-preview-message other"></div>
418
+ </div>
419
+ </div>
420
+ <span>Custom</span>
421
+ </button>
422
  </div>
423
+ </div>
424
+
425
+ <div id="custom-theme-settings" class="custom-theme-section hidden">
426
+ <div class="color-picker-row">
427
+ <div class="color-picker-group">
428
+ <label>Your Messages</label>
429
+ <div class="color-input-wrapper">
430
+ <input type="color" id="custom-self-color" value="#2563EB">
431
+ <span class="color-hex" id="self-color-hex">#2563EB</span>
432
+ </div>
433
+ </div>
434
+ <div class="color-picker-group">
435
+ <label>Their Messages</label>
436
+ <div class="color-input-wrapper">
437
+ <input type="color" id="custom-other-color" value="#F3F4F6">
438
+ <span class="color-hex" id="other-color-hex">#F3F4F6</span>
439
+ </div>
440
+ </div>
441
+ <div class="color-picker-group">
442
+ <label>Text Color</label>
443
+ <div class="color-input-wrapper">
444
+ <input type="color" id="custom-text-color" value="#111827">
445
+ <span class="color-hex" id="text-color-hex">#111827</span>
446
+ </div>
447
+ </div>
448
  </div>
449
+ </div>
450
+ </section>
451
+
452
+ <!-- About Section -->
453
+ <section class="settings-section">
454
+ <h3><i class="fas fa-info-circle"></i> About</h3>
455
+ <div class="about-info">
456
+ <div class="about-row">
457
+ <span>Version</span>
458
+ <span class="text-secondary">1.0.0</span>
459
+ </div>
460
+ <div class="about-row">
461
+ <span>Encryption</span>
462
+ <span class="text-success">
463
+ <i class="fas fa-shield-alt"></i>
464
+ AES-256-GCM
465
+ </span>
466
+ </div>
467
+ <div class="about-row">
468
+ <span>Storage</span>
469
+ <span class="text-secondary">HF Xet Buckets</span>
470
  </div>
471
  </div>
472
+ </section>
473
+ </div>
474
+
475
+ <div class="modal-footer">
476
+ <button class="btn btn-ghost" data-close="settings-modal">Cancel</button>
477
+ <button id="save-settings" class="btn btn-primary">
478
+ <i class="fas fa-check"></i>
479
+ Save Changes
480
+ </button>
481
+ </div>
482
+ </div>
483
+ </div>
484
+
485
+ <!-- =========================================== -->
486
+ <!-- ONLINE USERS MODAL -->
487
+ <!-- =========================================== -->
488
+ <div id="online-modal" class="modal hidden">
489
+ <div class="modal-backdrop" data-close="online-modal"></div>
490
+ <div class="modal-container modal-sm">
491
+ <div class="modal-header">
492
+ <h2><i class="fas fa-users"></i> Online Users</h2>
493
+ <button class="btn-icon" data-close="online-modal" aria-label="Close">
494
+ <i class="fas fa-times"></i>
495
+ </button>
496
+ </div>
497
+ <div id="online-users-list" class="online-users-list">
498
+ <div class="loading-state">
499
+ <div class="spinner spinner-sm"></div>
500
+ <span>Loading...</span>
501
  </div>
502
  </div>
503
  <div class="modal-footer">
504
+ <span id="online-total" class="text-secondary">0 users online</span>
505
+ </div>
506
+ </div>
507
+ </div>
508
+
509
+ <!-- =========================================== -->
510
+ <!-- EMOJI PICKER -->
511
+ <!-- =========================================== -->
512
+ <div id="emoji-picker" class="emoji-picker hidden">
513
+ <div class="emoji-header">
514
+ <div class="emoji-categories">
515
+ <button class="emoji-cat active" data-cat="smileys">
516
+ <i class="fas fa-smile"></i>
517
+ </button>
518
+ <button class="emoji-cat" data-cat="people">
519
+ <i class="fas fa-user"></i>
520
+ </button>
521
+ <button class="emoji-cat" data-cat="animals">
522
+ <i class="fas fa-dog"></i>
523
+ </button>
524
+ <button class="emoji-cat" data-cat="food">
525
+ <i class="fas fa-utensils"></i>
526
+ </button>
527
+ <button class="emoji-cat" data-cat="activities">
528
+ <i class="fas fa-futbol"></i>
529
+ </button>
530
+ <button class="emoji-cat" data-cat="objects">
531
+ <i class="fas fa-lightbulb"></i>
532
+ </button>
533
+ <button class="emoji-cat" data-cat="symbols">
534
+ <i class="fas fa-heart"></i>
535
+ </button>
536
+ <button class="emoji-cat" data-cat="flags">
537
+ <i class="fas fa-flag"></i>
538
+ </button>
539
  </div>
540
  </div>
541
+ <div id="emoji-grid" class="emoji-grid"></div>
542
  </div>
543
 
544
+ <!-- =========================================== -->
545
+ <!-- TOAST NOTIFICATIONS -->
546
+ <!-- =========================================== -->
547
+ <div id="toast-container" class="toast-container"></div>
548
+
549
+ <!-- Main Script -->
550
  <script src="/static/script.js"></script>
551
  </body>
552
  </html>