smodusermc commited on
Commit
a265cba
·
verified ·
1 Parent(s): 9ee63bf

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +101 -309
static/index.html CHANGED
@@ -6,20 +6,43 @@
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">
@@ -27,7 +50,7 @@
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">
@@ -36,226 +59,132 @@
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
 
@@ -267,286 +196,149 @@
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>
 
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
+ <!-- External CSS (main stylesheet) -->
19
  <link rel="stylesheet" href="/static/style.css">
20
+
21
+ <!-- CRITICAL INLINE STYLES: ensures screens are hidden by default even if external CSS fails -->
22
+ <style>
23
+ /* ========== CRITICAL HIDE / SHOW LOGIC ========== */
24
+ .screen { display: none !important; }
25
+ .screen.active { display: flex !important; }
26
+
27
+ /* Minimal layout so the page isn't completely broken */
28
+ * { margin: 0; padding: 0; box-sizing: border-box; }
29
+ html, body { height: 100vh; width: 100vw; overflow: hidden; font-family: 'Inter', sans-serif; }
30
+ #auth-screen { background: #F9FAFB; justify-content: center; align-items: center; }
31
+ #chat-screen { flex-direction: column; background: #fff; }
32
+ .hidden { display: none !important; }
33
+
34
+ /* Quick auth form styling (will be overridden by style.css) */
35
+ .auth-container { max-width: 400px; margin: auto; padding: 2rem; background: white; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.1); }
36
+ .auth-tabs { display: flex; gap: 0.5rem; margin: 1rem 0; }
37
+ .auth-tab { flex: 1; padding: 0.5rem; border: none; background: #E5E7EB; border-radius: 8px; cursor: pointer; }
38
+ .auth-tab.active { background: #2563EB; color: white; }
39
+ .auth-form { display: none; }
40
+ .auth-form.active { display: block; }
41
+ </style>
42
  </head>
43
  <body>
44
  <!-- =========================================== -->
45
+ <!-- AUTH SCREEN (visible by default) -->
46
  <!-- =========================================== -->
47
  <div id="auth-screen" class="screen active">
48
  <div class="auth-bg">
 
50
  <div class="auth-bg-circle auth-bg-circle-2"></div>
51
  <div class="auth-bg-circle auth-bg-circle-3"></div>
52
  </div>
53
+
54
  <div class="auth-container">
55
  <div class="auth-header">
56
  <div class="auth-logo">
 
59
  <h1 class="auth-title">InfinityChat</h1>
60
  <p class="auth-subtitle">Secure, private, real-time messaging</p>
61
  </div>
62
+
63
  <div class="auth-tabs">
64
  <button class="auth-tab active" data-tab="login">
65
+ <i class="fas fa-sign-in-alt"></i> Sign In
 
66
  </button>
67
  <button class="auth-tab" data-tab="signup">
68
+ <i class="fas fa-user-plus"></i> Create Account
 
69
  </button>
70
  </div>
71
+
72
  <!-- Login Form -->
73
+ <form id="login-form" class="auth-form active">
74
  <div class="form-group">
75
+ <label for="login-username"><i class="fas fa-user"></i> Username</label>
 
 
 
76
  <div class="input-wrapper">
77
+ <input type="text" id="login-username" class="form-input" placeholder="Enter your username" required autocomplete="username" spellcheck="false">
 
 
 
 
 
 
 
 
78
  </div>
79
  </div>
 
80
  <div class="form-group">
81
+ <label for="login-password"><i class="fas fa-lock"></i> Password</label>
 
 
 
82
  <div class="input-wrapper">
83
+ <input type="password" id="login-password" class="form-input" placeholder="Enter your password" required autocomplete="current-password">
 
 
 
 
 
 
 
84
  <button type="button" class="input-toggle" data-toggle="login-password">
85
  <i class="fas fa-eye"></i>
86
  </button>
87
  </div>
88
  </div>
 
89
  <button type="submit" class="btn btn-primary btn-block">
90
+ <i class="fas fa-arrow-right"></i> Sign In
 
91
  </button>
92
  </form>
93
+
94
  <!-- Signup Form -->
95
+ <form id="signup-form" class="auth-form">
96
  <div class="form-group">
97
+ <label for="signup-username"><i class="fas fa-user"></i> Username</label>
 
 
 
98
  <div class="input-wrapper">
99
+ <input type="text" id="signup-username" class="form-input" placeholder="Choose a username" required minlength="3" maxlength="30" pattern="[a-zA-Z0-9_]+" autocomplete="off" spellcheck="false">
 
 
 
 
 
 
 
 
 
 
 
 
100
  </div>
101
+ <small class="form-hint">3-30 characters, letters, numbers, underscores</small>
102
  </div>
 
103
  <div class="form-group">
104
+ <label for="signup-display"><i class="fas fa-id-card"></i> Display Name</label>
 
 
 
105
  <div class="input-wrapper">
106
+ <input type="text" id="signup-display" class="form-input" placeholder="Your display name (optional)" maxlength="50" autocomplete="off">
 
 
 
 
 
 
 
107
  </div>
108
  </div>
 
109
  <div class="form-group">
110
+ <label for="signup-password"><i class="fas fa-lock"></i> Password</label>
 
 
 
111
  <div class="input-wrapper">
112
+ <input type="password" id="signup-password" class="form-input" placeholder="Create a password" required minlength="6" autocomplete="new-password">
 
 
 
 
 
 
 
 
113
  <button type="button" class="input-toggle" data-toggle="signup-password">
114
  <i class="fas fa-eye"></i>
115
  </button>
116
  </div>
117
  <small class="form-hint">At least 6 characters</small>
118
  </div>
 
119
  <div class="password-strength">
120
+ <div class="strength-bar"><div id="strength-fill" class="strength-fill"></div></div>
 
 
121
  <span id="strength-text" class="strength-text">Weak</span>
122
  </div>
 
123
  <button type="submit" class="btn btn-primary btn-block">
124
+ <i class="fas fa-user-plus"></i> Create Account
 
125
  </button>
126
  </form>
127
+
128
  <div id="auth-error" class="alert alert-error">
129
+ <i class="fas fa-exclamation-circle"></i> <span id="auth-error-text"></span>
 
130
  </div>
 
131
  <div id="auth-loading" class="auth-loading hidden">
132
+ <div class="spinner"></div><span>Please wait...</span>
 
133
  </div>
134
  </div>
135
  </div>
136
 
137
  <!-- =========================================== -->
138
+ <!-- CHAT SCREEN (hidden by default) -->
139
  <!-- =========================================== -->
140
  <div id="chat-screen" class="screen">
141
+ <!-- Header -->
142
  <header class="chat-header">
143
  <div class="header-section header-left">
144
+ <button id="menu-btn" class="btn-icon" aria-label="Menu"><i class="fas fa-bars"></i></button>
145
+ <div class="header-avatar" id="header-avatar-placeholder"><i class="fas fa-user-circle"></i></div>
 
 
 
 
146
  <img id="header-avatar" class="header-avatar-img hidden" alt="Avatar">
147
  <div class="header-info">
148
  <h2 class="header-name" id="header-display-name">InfinityChat</h2>
149
  <span class="header-status" id="header-status">
150
+ <span class="status-dot online"></span> Online
 
151
  </span>
152
  </div>
153
  </div>
 
154
  <div class="header-section header-right">
155
  <button id="online-btn" class="btn-icon" aria-label="Online users">
156
  <i class="fas fa-users"></i>
157
  <span id="online-badge" class="badge">0</span>
158
  </button>
159
+ <button id="settings-btn" class="btn-icon" aria-label="Settings"><i class="fas fa-cog"></i></button>
 
 
160
  </div>
161
  </header>
162
 
163
  <!-- Connection Status -->
164
  <div id="connection-status" class="connection-status">
165
+ <i class="fas fa-wifi"></i> <span id="connection-text">Connecting...</span>
 
166
  </div>
167
 
168
+ <!-- Messages -->
169
  <div id="messages-container" class="messages-container">
170
  <div id="messages-scroll" class="messages-scroll">
171
  <div id="load-more" class="load-more">
172
+ <button id="load-older-btn" class="btn btn-ghost hidden"><i class="fas fa-chevron-up"></i> Load older messages</button>
 
 
 
173
  </div>
 
174
  <div id="messages-list" class="messages-list">
175
  <div id="empty-state" class="empty-state">
176
+ <div class="empty-icon"><i class="fas fa-comments"></i></div>
 
 
177
  <h3>No messages yet</h3>
178
  <p>Start the conversation by sending a message below</p>
179
  </div>
180
  </div>
181
  </div>
182
+ <div id="scroll-bottom-btn" class="scroll-bottom-btn hidden"><i class="fas fa-chevron-down"></i></div>
 
 
 
183
  </div>
184
 
185
  <!-- Typing Indicator -->
186
  <div id="typing-indicator" class="typing-indicator hidden">
187
+ <div class="typing-dots"><span class="typing-dot"></span><span class="typing-dot"></span><span class="typing-dot"></span></div>
 
 
 
 
188
  <span id="typing-text" class="typing-text"></span>
189
  </div>
190
 
 
196
  <span class="reply-label">Replying to <span id="reply-user"></span></span>
197
  <span id="reply-text" class="reply-text"></span>
198
  </div>
199
+ <button id="cancel-reply" class="btn-icon btn-icon-sm"><i class="fas fa-times"></i></button>
 
 
200
  </div>
201
  </div>
202
 
203
  <!-- Compose Area -->
204
  <div class="compose-area">
205
  <div id="upload-preview" class="upload-preview hidden">
206
+ <div class="upload-info"><i class="fas fa-file"></i><span id="upload-filename"></span></div>
207
+ <button id="cancel-upload" class="btn-icon btn-icon-sm"><i class="fas fa-times"></i></button>
 
 
 
 
 
208
  </div>
209
+
210
  <form id="compose-form" class="compose-form">
211
  <div class="compose-tools">
212
+ <button type="button" id="attach-btn" class="btn-icon" aria-label="Attach file"><i class="fas fa-paperclip"></i></button>
213
+ <button type="button" id="emoji-btn" class="btn-icon" aria-label="Emoji picker"><i class="fas fa-smile"></i></button>
 
 
 
 
214
  </div>
 
215
  <input type="file" id="file-input" multiple accept="image/*,video/*,audio/*,.pdf,.doc,.docx,.txt" style="display:none">
 
216
  <div class="input-area">
217
+ <textarea id="message-input" class="message-input" placeholder="Type a message..." rows="1" maxlength="10000"></textarea>
 
 
 
 
 
 
218
  </div>
219
+ <button type="submit" id="send-btn" class="btn btn-send" aria-label="Send message" disabled><i class="fas fa-paper-plane"></i></button>
 
 
 
220
  </form>
 
221
  <div id="upload-progress" class="upload-progress hidden">
222
+ <div class="progress-track"><div id="progress-fill" class="progress-fill" style="width:0%"></div></div>
 
 
223
  <span id="progress-text" class="progress-text">0%</span>
224
  </div>
225
  </div>
226
  </div>
227
 
228
  <!-- =========================================== -->
229
+ <!-- MODALS & PICKER (hidden by default) -->
230
  <!-- =========================================== -->
231
  <div id="settings-modal" class="modal hidden">
232
  <div class="modal-backdrop" data-close="settings-modal"></div>
233
  <div class="modal-container">
234
  <div class="modal-header">
235
  <h2><i class="fas fa-cog"></i> Settings</h2>
236
+ <button class="btn-icon" data-close="settings-modal"><i class="fas fa-times"></i></button>
 
 
237
  </div>
 
238
  <div class="modal-body">
 
239
  <section class="settings-section">
240
  <h3><i class="fas fa-user"></i> Profile</h3>
 
241
  <div class="settings-row">
242
  <div class="avatar-section">
243
+ <div id="settings-avatar-preview" class="settings-avatar"><i class="fas fa-user-circle"></i></div>
 
 
244
  <img id="settings-avatar-img" class="settings-avatar-img hidden" alt="Avatar">
245
+ <button id="avatar-upload-btn" class="btn btn-secondary btn-sm"><i class="fas fa-camera"></i> Change Photo</button>
 
 
 
246
  <input type="file" id="avatar-input" accept="image/*" style="display:none">
247
  </div>
248
  </div>
 
249
  <div class="form-group">
250
  <label for="settings-display-name">Display Name</label>
251
+ <div class="input-wrapper"><input type="text" id="settings-display-name" class="form-input" maxlength="50"></div>
 
 
 
 
 
 
 
 
252
  </div>
 
253
  <div class="form-group">
254
+ <label for="settings-username">Username <span class="label-hint">(cannot be changed)</span></label>
255
+ <div class="input-wrapper"><input type="text" id="settings-username" class="form-input" disabled></div>
 
 
 
 
 
 
 
 
 
 
256
  </div>
257
  </section>
 
 
258
  <section class="settings-section">
259
  <h3><i class="fas fa-palette"></i> Appearance</h3>
 
260
  <div class="form-group">
261
  <label>Theme</label>
262
  <div class="theme-selector">
263
  <button class="theme-option active" data-theme="light">
264
+ <div class="theme-preview theme-preview-light"><div class="theme-preview-header"></div><div class="theme-preview-body"><div class="theme-preview-message self"></div><div class="theme-preview-message other"></div></div></div>
 
 
 
 
 
 
265
  <span>Light</span>
266
  </button>
267
  <button class="theme-option" data-theme="dark">
268
+ <div class="theme-preview theme-preview-dark"><div class="theme-preview-header"></div><div class="theme-preview-body"><div class="theme-preview-message self"></div><div class="theme-preview-message other"></div></div></div>
 
 
 
 
 
 
269
  <span>Dark</span>
270
  </button>
271
  <button class="theme-option" data-theme="custom">
272
+ <div class="theme-preview theme-preview-custom"><div class="theme-preview-header"></div><div class="theme-preview-body"><div class="theme-preview-message self"></div><div class="theme-preview-message other"></div></div></div>
 
 
 
 
 
 
273
  <span>Custom</span>
274
  </button>
275
  </div>
276
  </div>
 
277
  <div id="custom-theme-settings" class="custom-theme-section hidden">
278
  <div class="color-picker-row">
279
  <div class="color-picker-group">
280
  <label>Your Messages</label>
281
+ <div class="color-input-wrapper"><input type="color" id="custom-self-color" value="#2563EB"><span class="color-hex" id="self-color-hex">#2563EB</span></div>
 
 
 
282
  </div>
283
  <div class="color-picker-group">
284
  <label>Their Messages</label>
285
+ <div class="color-input-wrapper"><input type="color" id="custom-other-color" value="#F3F4F6"><span class="color-hex" id="other-color-hex">#F3F4F6</span></div>
 
 
 
286
  </div>
287
  <div class="color-picker-group">
288
  <label>Text Color</label>
289
+ <div class="color-input-wrapper"><input type="color" id="custom-text-color" value="#111827"><span class="color-hex" id="text-color-hex">#111827</span></div>
 
 
 
290
  </div>
291
  </div>
292
  </div>
293
  </section>
 
 
294
  <section class="settings-section">
295
  <h3><i class="fas fa-info-circle"></i> About</h3>
296
  <div class="about-info">
297
+ <div class="about-row"><span>Version</span><span class="text-secondary">1.0.0</span></div>
298
+ <div class="about-row"><span>Encryption</span><span class="text-success"><i class="fas fa-shield-alt"></i> AES-256-GCM</span></div>
299
+ <div class="about-row"><span>Storage</span><span class="text-secondary">HF Xet Buckets</span></div>
 
 
 
 
 
 
 
 
 
 
 
 
300
  </div>
301
  </section>
302
  </div>
 
303
  <div class="modal-footer">
304
  <button class="btn btn-ghost" data-close="settings-modal">Cancel</button>
305
+ <button id="save-settings" class="btn btn-primary"><i class="fas fa-check"></i> Save Changes</button>
 
 
 
306
  </div>
307
  </div>
308
  </div>
309
 
 
 
 
310
  <div id="online-modal" class="modal hidden">
311
  <div class="modal-backdrop" data-close="online-modal"></div>
312
  <div class="modal-container modal-sm">
313
  <div class="modal-header">
314
  <h2><i class="fas fa-users"></i> Online Users</h2>
315
+ <button class="btn-icon" data-close="online-modal"><i class="fas fa-times"></i></button>
 
 
316
  </div>
317
  <div id="online-users-list" class="online-users-list">
318
+ <div class="loading-state"><div class="spinner spinner-sm"></div><span>Loading...</span></div>
 
 
 
 
 
 
319
  </div>
320
+ <div class="modal-footer"><span id="online-total" class="text-secondary">0 users online</span></div>
321
  </div>
322
  </div>
323
 
 
 
 
324
  <div id="emoji-picker" class="emoji-picker hidden">
325
  <div class="emoji-header">
326
  <div class="emoji-categories">
327
+ <button class="emoji-cat active" data-cat="smileys"><i class="fas fa-smile"></i></button>
328
+ <button class="emoji-cat" data-cat="people"><i class="fas fa-user"></i></button>
329
+ <button class="emoji-cat" data-cat="animals"><i class="fas fa-dog"></i></button>
330
+ <button class="emoji-cat" data-cat="food"><i class="fas fa-utensils"></i></button>
331
+ <button class="emoji-cat" data-cat="activities"><i class="fas fa-futbol"></i></button>
332
+ <button class="emoji-cat" data-cat="objects"><i class="fas fa-lightbulb"></i></button>
333
+ <button class="emoji-cat" data-cat="symbols"><i class="fas fa-heart"></i></button>
334
+ <button class="emoji-cat" data-cat="flags"><i class="fas fa-flag"></i></button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
335
  </div>
336
  </div>
337
  <div id="emoji-grid" class="emoji-grid"></div>
338
  </div>
339
 
 
 
 
340
  <div id="toast-container" class="toast-container"></div>
341
 
 
342
  <script src="/static/script.js"></script>
343
  </body>
344
  </html>