smodusermc commited on
Commit
3102be6
·
verified ·
1 Parent(s): a265cba

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +163 -111
static/index.html CHANGED
@@ -1,65 +1,29 @@
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
- <!-- 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">
49
  <div class="auth-bg-circle auth-bg-circle-1"></div>
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">
57
- <i class="fas fa-infinity"></i>
58
- </div>
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
@@ -68,19 +32,21 @@
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>
@@ -90,26 +56,31 @@
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>
@@ -117,32 +88,32 @@
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>
@@ -156,120 +127,174 @@
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
 
191
- <!-- Reply Preview -->
192
  <div id="reply-preview" class="reply-preview hidden">
193
  <div class="reply-bar">
194
  <i class="fas fa-reply reply-icon"></i>
195
  <div class="reply-content">
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>
@@ -278,49 +303,76 @@
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">
 
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</title>
 
7
  <meta name="theme-color" content="#2563EB">
 
 
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
 
 
9
  <link rel="preconnect" href="https://fonts.googleapis.com">
10
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 
 
12
  <link rel="stylesheet" href="/static/style.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  </head>
14
  <body>
 
 
 
15
  <div id="auth-screen" class="screen active">
16
  <div class="auth-bg">
17
  <div class="auth-bg-circle auth-bg-circle-1"></div>
18
  <div class="auth-bg-circle auth-bg-circle-2"></div>
19
  <div class="auth-bg-circle auth-bg-circle-3"></div>
20
  </div>
 
21
  <div class="auth-container">
22
  <div class="auth-header">
23
+ <div class="auth-logo"><i class="fas fa-infinity"></i></div>
 
 
24
  <h1 class="auth-title">InfinityChat</h1>
25
  <p class="auth-subtitle">Secure, private, real-time messaging</p>
26
  </div>
 
27
  <div class="auth-tabs">
28
  <button class="auth-tab active" data-tab="login">
29
  <i class="fas fa-sign-in-alt"></i> Sign In
 
32
  <i class="fas fa-user-plus"></i> Create Account
33
  </button>
34
  </div>
 
 
35
  <form id="login-form" class="auth-form active">
36
  <div class="form-group">
37
  <label for="login-username"><i class="fas fa-user"></i> Username</label>
38
  <div class="input-wrapper">
39
+ <input type="text" id="login-username" class="form-input"
40
+ placeholder="Enter your username" required
41
+ autocomplete="username" spellcheck="false">
42
  </div>
43
  </div>
44
  <div class="form-group">
45
  <label for="login-password"><i class="fas fa-lock"></i> Password</label>
46
  <div class="input-wrapper">
47
+ <input type="password" id="login-password" class="form-input"
48
+ placeholder="Enter your password" required
49
+ autocomplete="current-password">
50
  <button type="button" class="input-toggle" data-toggle="login-password">
51
  <i class="fas fa-eye"></i>
52
  </button>
 
56
  <i class="fas fa-arrow-right"></i> Sign In
57
  </button>
58
  </form>
 
 
59
  <form id="signup-form" class="auth-form">
60
  <div class="form-group">
61
  <label for="signup-username"><i class="fas fa-user"></i> Username</label>
62
  <div class="input-wrapper">
63
+ <input type="text" id="signup-username" class="form-input"
64
+ placeholder="Choose a username" required
65
+ minlength="3" maxlength="30"
66
+ pattern="[a-zA-Z0-9_]+" autocomplete="off" spellcheck="false">
67
  </div>
68
  <small class="form-hint">3-30 characters, letters, numbers, underscores</small>
69
  </div>
70
  <div class="form-group">
71
  <label for="signup-display"><i class="fas fa-id-card"></i> Display Name</label>
72
  <div class="input-wrapper">
73
+ <input type="text" id="signup-display" class="form-input"
74
+ placeholder="Your display name (optional)"
75
+ maxlength="50" autocomplete="off">
76
  </div>
77
  </div>
78
  <div class="form-group">
79
  <label for="signup-password"><i class="fas fa-lock"></i> Password</label>
80
  <div class="input-wrapper">
81
+ <input type="password" id="signup-password" class="form-input"
82
+ placeholder="Create a password" required
83
+ minlength="6" autocomplete="new-password">
84
  <button type="button" class="input-toggle" data-toggle="signup-password">
85
  <i class="fas fa-eye"></i>
86
  </button>
 
88
  <small class="form-hint">At least 6 characters</small>
89
  </div>
90
  <div class="password-strength">
91
+ <div class="strength-bar">
92
+ <div id="strength-fill" class="strength-fill"></div>
93
+ </div>
94
+ <span id="strength-text" class="strength-text"></span>
95
  </div>
96
  <button type="submit" class="btn btn-primary btn-block">
97
  <i class="fas fa-user-plus"></i> Create Account
98
  </button>
99
  </form>
 
100
  <div id="auth-error" class="alert alert-error">
101
+ <i class="fas fa-exclamation-circle"></i>
102
+ <span id="auth-error-text"></span>
103
  </div>
104
  <div id="auth-loading" class="auth-loading hidden">
105
+ <div class="spinner"></div>
106
+ <span>Please wait...</span>
107
  </div>
108
  </div>
109
  </div>
110
 
 
 
 
111
  <div id="chat-screen" class="screen">
 
112
  <header class="chat-header">
113
  <div class="header-section header-left">
114
+ <div class="header-avatar-wrap" id="header-avatar-placeholder">
115
+ <i class="fas fa-user-circle"></i>
116
+ </div>
117
  <img id="header-avatar" class="header-avatar-img hidden" alt="Avatar">
118
  <div class="header-info">
119
  <h2 class="header-name" id="header-display-name">InfinityChat</h2>
 
127
  <i class="fas fa-users"></i>
128
  <span id="online-badge" class="badge">0</span>
129
  </button>
130
+ <button id="settings-btn" class="btn-icon" aria-label="Settings">
131
+ <i class="fas fa-cog"></i>
132
+ </button>
133
+ <button id="logout-btn" class="btn-icon" aria-label="Logout">
134
+ <i class="fas fa-sign-out-alt"></i>
135
+ </button>
136
  </div>
137
  </header>
138
 
 
139
  <div id="connection-status" class="connection-status">
140
+ <i class="fas fa-wifi"></i>
141
+ <span id="connection-text">Connecting...</span>
142
  </div>
143
 
 
144
  <div id="messages-container" class="messages-container">
145
  <div id="messages-scroll" class="messages-scroll">
146
  <div id="load-more" class="load-more">
147
+ <button id="load-older-btn" class="btn btn-ghost hidden">
148
+ <i class="fas fa-chevron-up"></i> Load older messages
149
+ </button>
150
  </div>
151
  <div id="messages-list" class="messages-list">
152
  <div id="empty-state" class="empty-state">
153
  <div class="empty-icon"><i class="fas fa-comments"></i></div>
154
  <h3>No messages yet</h3>
155
+ <p>Start the conversation below</p>
156
  </div>
157
  </div>
158
  </div>
159
+ <button id="scroll-bottom-btn" class="scroll-bottom-btn hidden">
160
+ <i class="fas fa-chevron-down"></i>
161
+ </button>
162
  </div>
163
 
 
164
  <div id="typing-indicator" class="typing-indicator hidden">
165
+ <div class="typing-dots">
166
+ <span class="typing-dot"></span>
167
+ <span class="typing-dot"></span>
168
+ <span class="typing-dot"></span>
169
+ </div>
170
  <span id="typing-text" class="typing-text"></span>
171
  </div>
172
 
 
173
  <div id="reply-preview" class="reply-preview hidden">
174
  <div class="reply-bar">
175
  <i class="fas fa-reply reply-icon"></i>
176
  <div class="reply-content">
177
+ <span class="reply-label">Replying to <strong id="reply-user"></strong></span>
178
  <span id="reply-text" class="reply-text"></span>
179
  </div>
180
+ <button id="cancel-reply" class="btn-icon btn-icon-sm">
181
+ <i class="fas fa-times"></i>
182
+ </button>
183
  </div>
184
  </div>
185
 
 
186
  <div class="compose-area">
187
  <div id="upload-preview" class="upload-preview hidden">
188
+ <div class="upload-info">
189
+ <i class="fas fa-file-alt"></i>
190
+ <span id="upload-filename"></span>
191
+ </div>
192
+ <button id="cancel-upload" class="btn-icon btn-icon-sm">
193
+ <i class="fas fa-times"></i>
194
+ </button>
195
  </div>
 
196
  <form id="compose-form" class="compose-form">
197
  <div class="compose-tools">
198
+ <button type="button" id="attach-btn" class="btn-icon" aria-label="Attach">
199
+ <i class="fas fa-paperclip"></i>
200
+ </button>
201
+ <button type="button" id="emoji-btn" class="btn-icon" aria-label="Emoji">
202
+ <i class="fas fa-smile"></i>
203
+ </button>
204
  </div>
205
+ <input type="file" id="file-input" multiple
206
+ accept="image/*,video/*,audio/*,.pdf,.doc,.docx,.txt"
207
+ style="display:none">
208
  <div class="input-area">
209
+ <textarea id="message-input" class="message-input"
210
+ placeholder="Type a message..." rows="1"
211
+ maxlength="10000"></textarea>
212
  </div>
213
+ <button type="submit" id="send-btn" class="btn btn-send" disabled>
214
+ <i class="fas fa-paper-plane"></i>
215
+ </button>
216
  </form>
217
  <div id="upload-progress" class="upload-progress hidden">
218
+ <div class="progress-track">
219
+ <div id="progress-fill" class="progress-fill" style="width:0%"></div>
220
+ </div>
221
  <span id="progress-text" class="progress-text">0%</span>
222
  </div>
223
  </div>
224
  </div>
225
 
226
+ <!-- Settings Modal -->
 
 
227
  <div id="settings-modal" class="modal hidden">
228
  <div class="modal-backdrop" data-close="settings-modal"></div>
229
  <div class="modal-container">
230
  <div class="modal-header">
231
  <h2><i class="fas fa-cog"></i> Settings</h2>
232
+ <button class="btn-icon" data-close="settings-modal">
233
+ <i class="fas fa-times"></i>
234
+ </button>
235
  </div>
236
  <div class="modal-body">
237
  <section class="settings-section">
238
+ <h3>Profile</h3>
239
+ <div class="avatar-section">
240
+ <div id="settings-avatar-preview" class="settings-avatar">
241
+ <i class="fas fa-user-circle"></i>
 
 
 
242
  </div>
243
+ <img id="settings-avatar-img" class="settings-avatar-img hidden" alt="Avatar">
244
+ <button id="avatar-upload-btn" class="btn btn-secondary btn-sm">
245
+ <i class="fas fa-camera"></i> Change Photo
246
+ </button>
247
+ <input type="file" id="avatar-input" accept="image/*" style="display:none">
248
  </div>
249
  <div class="form-group">
250
  <label for="settings-display-name">Display Name</label>
251
+ <div class="input-wrapper">
252
+ <input type="text" id="settings-display-name" class="form-input" maxlength="50">
253
+ </div>
254
  </div>
255
  <div class="form-group">
256
+ <label for="settings-username">
257
+ Username <span class="label-hint">(cannot be changed)</span>
258
+ </label>
259
+ <div class="input-wrapper">
260
+ <input type="text" id="settings-username" class="form-input" disabled>
261
+ </div>
262
  </div>
263
  </section>
264
+
265
  <section class="settings-section">
266
+ <h3>Appearance</h3>
267
  <div class="form-group">
268
  <label>Theme</label>
269
  <div class="theme-selector">
270
  <button class="theme-option active" data-theme="light">
271
+ <div class="theme-preview theme-preview-light">
272
+ <div class="theme-preview-header"></div>
273
+ <div class="theme-preview-body">
274
+ <div class="theme-preview-message self"></div>
275
+ <div class="theme-preview-message other"></div>
276
+ </div>
277
+ </div>
278
  <span>Light</span>
279
  </button>
280
  <button class="theme-option" data-theme="dark">
281
+ <div class="theme-preview theme-preview-dark">
282
+ <div class="theme-preview-header"></div>
283
+ <div class="theme-preview-body">
284
+ <div class="theme-preview-message self"></div>
285
+ <div class="theme-preview-message other"></div>
286
+ </div>
287
+ </div>
288
  <span>Dark</span>
289
  </button>
290
  <button class="theme-option" data-theme="custom">
291
+ <div class="theme-preview theme-preview-custom">
292
+ <div class="theme-preview-header"></div>
293
+ <div class="theme-preview-body">
294
+ <div class="theme-preview-message self"></div>
295
+ <div class="theme-preview-message other"></div>
296
+ </div>
297
+ </div>
298
  <span>Custom</span>
299
  </button>
300
  </div>
 
303
  <div class="color-picker-row">
304
  <div class="color-picker-group">
305
  <label>Your Messages</label>
306
+ <div class="color-input-wrapper">
307
+ <input type="color" id="custom-self-color" value="#2563EB">
308
+ <span class="color-hex" id="self-color-hex">#2563EB</span>
309
+ </div>
310
  </div>
311
  <div class="color-picker-group">
312
  <label>Their Messages</label>
313
+ <div class="color-input-wrapper">
314
+ <input type="color" id="custom-other-color" value="#F3F4F6">
315
+ <span class="color-hex" id="other-color-hex">#F3F4F6</span>
316
+ </div>
317
  </div>
318
  <div class="color-picker-group">
319
  <label>Text Color</label>
320
+ <div class="color-input-wrapper">
321
+ <input type="color" id="custom-text-color" value="#111827">
322
+ <span class="color-hex" id="text-color-hex">#111827</span>
323
+ </div>
324
  </div>
325
  </div>
326
  </div>
327
  </section>
328
+
329
  <section class="settings-section">
330
+ <h3>About</h3>
331
  <div class="about-info">
332
+ <div class="about-row">
333
+ <span>Version</span>
334
+ <span class="text-secondary">1.0.0</span>
335
+ </div>
336
+ <div class="about-row">
337
+ <span>Encryption</span>
338
+ <span class="text-success">
339
+ <i class="fas fa-shield-alt"></i> AES-256-GCM
340
+ </span>
341
+ </div>
342
+ <div class="about-row">
343
+ <span>Storage</span>
344
+ <span class="text-secondary">HF Xet Buckets</span>
345
+ </div>
346
  </div>
347
  </section>
348
  </div>
349
  <div class="modal-footer">
350
  <button class="btn btn-ghost" data-close="settings-modal">Cancel</button>
351
+ <button id="save-settings" class="btn btn-primary">
352
+ <i class="fas fa-check"></i> Save Changes
353
+ </button>
354
  </div>
355
  </div>
356
  </div>
357
 
358
+ <!-- Online Modal -->
359
  <div id="online-modal" class="modal hidden">
360
  <div class="modal-backdrop" data-close="online-modal"></div>
361
  <div class="modal-container modal-sm">
362
  <div class="modal-header">
363
  <h2><i class="fas fa-users"></i> Online Users</h2>
364
+ <button class="btn-icon" data-close="online-modal">
365
+ <i class="fas fa-times"></i>
366
+ </button>
367
  </div>
368
+ <div id="online-users-list" class="online-users-list"></div>
369
+ <div class="modal-footer">
370
+ <span id="online-total" class="text-secondary">0 users online</span>
371
  </div>
 
372
  </div>
373
  </div>
374
 
375
+ <!-- Emoji Picker -->
376
  <div id="emoji-picker" class="emoji-picker hidden">
377
  <div class="emoji-header">
378
  <div class="emoji-categories">