SoftDisquiet commited on
Commit
16cf9d2
·
verified ·
1 Parent(s): db64006

Update index.html

Browse files

Login modal now closes reliably (both button + outside click + proper display + hidden handling)
All demo NPC messages, fake users (satanic, phil, bot), extra channels, etc. completely stripped
Much cleaner, minimal structure
Fixed initial modal visibility
Added a simple system welcome message

Files changed (1) hide show
  1. index.html +125 -693
index.html CHANGED
@@ -3,47 +3,21 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Satanic Chat</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- @keyframes pulse {
11
- 0%, 100% { opacity: 1; }
12
- 50% { opacity: 0.5; }
13
- }
14
- .animate-pulse-slow {
15
- animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
16
- }
17
  .message-enter {
18
  animation: messageEnter 0.3s ease-out forwards;
19
  }
20
  @keyframes messageEnter {
21
- from {
22
- opacity: 0;
23
- transform: translateY(10px);
24
- }
25
- to {
26
- opacity: 1;
27
- transform: translateY(0);
28
- }
29
- }
30
- .scrollbar-hide::-webkit-scrollbar {
31
- display: none;
32
- }
33
- .scrollbar-hide {
34
- -ms-overflow-style: none;
35
- scrollbar-width: none;
36
- }
37
- .typing-indicator::after {
38
- content: '...';
39
- display: inline-block;
40
- width: 0;
41
- animation: typingDots 1.5s steps(3, end) infinite;
42
- }
43
- @keyframes typingDots {
44
- 0% { width: 0; }
45
- 100% { width: 3ch; }
46
  }
 
 
47
  </style>
48
  </head>
49
  <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
@@ -72,47 +46,22 @@
72
  <div class="mb-6">
73
  <h2 class="text-sm uppercase font-semibold text-gray-400 mb-2">Channels</h2>
74
  <div class="space-y-1">
75
- <button class="channel-btn w-full text-left px-3 py-2 rounded bg-gray-700 text-purple-300 flex items-center justify-between">
76
- <span>#general</span>
77
- <span class="text-xs bg-purple-900 px-2 py-1 rounded-full">42</span>
78
- </button>
79
- <button class="channel-btn w-full text-left px-3 py-2 rounded hover:bg-gray-700 text-gray-300 flex items-center justify-between">
80
- <span>#random</span>
81
- <span class="text-xs bg-gray-600 px-2 py-1 rounded-full">17</span>
82
- </button>
83
- <button class="channel-btn w-full text-left px-3 py-2 rounded hover:bg-gray-700 text-gray-300 flex items-center justify-between">
84
- <span>#help</span>
85
- <span class="text-xs bg-gray-600 px-2 py-1 rounded-full">8</span>
86
- </button>
87
  </div>
88
  </div>
89
-
90
  <div class="mb-6">
91
  <h2 class="text-sm uppercase font-semibold text-gray-400 mb-2">Direct Messages</h2>
92
- <div class="space-y-1">
93
- <button class="dm-btn w-full text-left px-3 py-2 rounded hover:bg-gray-700 text-gray-300 flex items-center">
94
- <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
95
- <span>@satanic</span>
96
- </button>
97
- <button class="dm-btn w-full text-left px-3 py-2 rounded hover:bg-gray-700 text-gray-300 flex items-center">
98
- <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
99
- <span>@phil</span>
100
- </button>
101
  </div>
102
  </div>
103
-
104
  <div class="mt-auto">
105
  <div class="flex items-center space-x-2 p-2 bg-gray-700 rounded-lg">
106
- <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-bold">
107
- Y
108
- </div>
109
  <div class="flex-1 min-w-0">
110
- <p class="text-sm font-medium truncate">You</p>
111
  <p class="text-xs text-gray-400 truncate">Online</p>
112
  </div>
113
- <button class="p-1 rounded hover:bg-gray-600">
114
- <i class="fas fa-sign-out-alt text-gray-400"></i>
115
- </button>
116
  </div>
117
  </div>
118
  </aside>
@@ -125,141 +74,22 @@
125
  <button id="mobileSidebarToggle" class="md:hidden p-1 rounded hover:bg-gray-700">
126
  <i class="fas fa-bars"></i>
127
  </button>
128
- <h2 class="text-lg font-semibold flex items-center">
129
- <span>#general</span>
130
- <span class="ml-2 text-xs bg-gray-700 px-2 py-1 rounded-full">42 online</span>
131
- </h2>
132
- </div>
133
- <div class="flex items-center space-x-3">
134
- <div class="relative">
135
- <input type="text" placeholder="Search" class="bg-gray-700 text-sm rounded pl-8 pr-3 py-1 w-32 focus:w-48 transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-purple-500">
136
- <i class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
137
- </div>
138
- <button class="p-1 rounded hover:bg-gray-700">
139
- <i class="fas fa-user-plus text-gray-400"></i>
140
- </button>
141
  </div>
142
  </div>
143
 
144
- <!-- Messages -->
145
- <div id="messages" class="flex-1 overflow-y-auto p-4 space-y-4 scrollbar-hide">
146
- <div class="message-enter flex space-x-3">
147
- <div class="flex-shrink-0">
148
- <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-teal-400 flex items-center justify-center text-white font-bold">
149
- S
150
- </div>
151
- </div>
152
- <div>
153
- <div class="flex items-baseline space-x-2">
154
- <span class="font-semibold text-blue-300">satanic</span>
155
- <span class="text-xs text-gray-400">2:45 PM</span>
156
- </div>
157
- <p class="text-gray-100">Welcome to DarkChat! This is a secure, minimal chat platform.</p>
158
- </div>
159
- </div>
160
-
161
- <div class="message-enter flex space-x-3">
162
- <div class="flex-shrink-0">
163
- <div class="w-8 h-8 rounded-full bg-gradient-to-br from-green-500 to-lime-400 flex items-center justify-center text-white font-bold">
164
- P
165
- </div>
166
- </div>
167
- <div>
168
- <div class="flex items-baseline space-x-2">
169
- <span class="font-semibold text-green-300">phil</span>
170
- <span class="text-xs text-gray-400">2:46 PM</span>
171
- </div>
172
- <p class="text-gray-100">Hey everyone! Just joined. How's it going?</p>
173
- </div>
174
- </div>
175
-
176
- <div class="message-enter flex space-x-3">
177
- <div class="flex-shrink-0">
178
- <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-400 flex items-center justify-center text-white font-bold">
179
- Y
180
- </div>
181
- </div>
182
- <div>
183
- <div class="flex items-baseline space-x-2">
184
- <span class="font-semibold text-purple-300">You</span>
185
- <span class="text-xs text-gray-400">2:47 PM</span>
186
- </div>
187
- <p class="text-gray-100">Pretty good! Just setting things up.</p>
188
- </div>
189
- </div>
190
-
191
- <div class="message-enter flex space-x-3">
192
- <div class="flex-shrink-0">
193
- <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-teal-400 flex items-center justify-center text-white font-bold">
194
- S
195
- </div>
196
- </div>
197
- <div>
198
- <div class="flex items-baseline space-x-2">
199
- <span class="font-semibold text-blue-300">satanic</span>
200
- <span class="text-xs text-gray-400">2:48 PM</span>
201
- </div>
202
- <p class="text-gray-100">Remember to check the rules in the pinned messages. Keep it clean folks.</p>
203
- </div>
204
- </div>
205
-
206
- <div class="message-enter flex space-x-3">
207
- <div class="flex-shrink-0">
208
- <div class="w-8 h-8 rounded-full bg-gradient-to-br from-yellow-500 to-orange-400 flex items-center justify-center text-white font-bold">
209
- B
210
- </div>
211
- </div>
212
- <div>
213
- <div class="flex items-baseline space-x-2">
214
- <span class="font-semibold text-yellow-300">bot</span>
215
- <span class="text-xs text-gray-400">2:49 PM</span>
216
- </div>
217
- <p class="text-gray-100 italic">User phil has been active for 5 minutes.</p>
218
- </div>
219
- </div>
220
- </div>
221
-
222
- <!-- Typing Indicator -->
223
- <div id="typingIndicator" class="px-4 py-2 text-sm text-gray-400 hidden">
224
- <span class="typing-indicator">phil is typing</span>
225
- </div>
226
 
227
  <!-- Message Input -->
228
- <div class="bg-gray-800 border-t border-gray-700 p-4 relative">
229
- <div id="fileStatus" class="absolute -top-8 left-0 right-0 px-4 hidden">
230
- <div class="bg-gray-700 rounded-t-lg px-3 py-1 text-sm flex items-center justify-between">
231
- <span id="fileName" class="truncate text-purple-300"></span>
232
- <div class="flex items-center space-x-2">
233
- <span id="fileSize" class="text-xs text-gray-400">0/50MB</span>
234
- <button id="cancelUpload" class="text-gray-400 hover:text-red-400">
235
- <i class="fas fa-times"></i>
236
- </button>
237
- </div>
238
- </div>
239
- <div id="progressBar" class="h-1 bg-gray-600 rounded-b">
240
- <div id="progress" class="h-full bg-purple-500 rounded-b" style="width: 0%"></div>
241
- </div>
242
- </div>
243
  <div class="flex items-center space-x-2">
244
- <div class="relative">
245
- <input type="file" id="fileUpload" class="hidden" accept="image/*, video/*, audio/*, .pdf, .doc, .docx, .txt">
246
- <button id="uploadButton" class="p-2 rounded-full hover:bg-gray-700">
247
- <i class="fas fa-plus text-gray-400"></i>
248
- </button>
249
- <div id="uploadProgress" class="absolute -top-2 -right-2 w-4 h-4 rounded-full bg-purple-500 hidden flex items-center justify-center">
250
- <span class="text-white text-xs">100</span>
251
- </div>
252
- </div>
253
  <div class="flex-1 relative">
254
- <input id="messageInput" type="text" placeholder="Message #general" class="w-full bg-gray-700 rounded-full px-4 py-2 focus:outline-none focus:ring-1 focus:ring-purple-500">
255
- <div class="absolute right-2 top-1/2 transform -translate-y-1/2 flex space-x-1">
256
- <button class="p-1 text-gray-400 hover:text-gray-200">
257
- <i class="fas fa-smile"></i>
258
- </button>
259
- <button id="attachmentButton" class="p-1 text-gray-400 hover:text-gray-200">
260
- <i class="fas fa-paperclip"></i>
261
- </button>
262
- </div>
263
  </div>
264
  <button id="sendMessage" class="p-2 rounded-full bg-purple-600 hover:bg-purple-700 text-white">
265
  <i class="fas fa-paper-plane"></i>
@@ -278,568 +108,170 @@
278
  <i class="fas fa-times"></i>
279
  </button>
280
  </div>
281
-
282
  <div class="space-y-4">
283
  <div>
284
- <label for="username" class="block text-sm font-medium text-gray-300 mb-1">Username</label>
285
- <input type="text" id="username" class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-purple-500">
286
  </div>
287
  <div>
288
- <label for="password" class="block text-sm font-medium text-gray-300 mb-1">Password</label>
289
- <input type="password" id="password" class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-purple-500">
290
  </div>
291
- <div class="flex items-center justify-between">
292
- <div class="flex items-center">
293
- <input type="checkbox" id="remember" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-600 rounded bg-gray-700">
294
- <label for="remember" class="ml-2 block text-sm text-gray-300">Remember me</label>
295
- </div>
296
- <a href="#" class="text-sm text-purple-400 hover:text-purple-300">Forgot password?</a>
297
- </div>
298
- <button id="loginButton" class="w-full bg-gradient-to-r from-purple-600 to-pink-600 text-white py-2 rounded font-medium hover:opacity-90 transition-opacity">
299
  Sign In
300
  </button>
301
- <div class="text-center text-sm text-gray-400">
302
- Don't have an account? <a href="#" class="text-purple-400 hover:text-purple-300">Register</a>
303
- </div>
304
- </div>
305
-
306
- <div class="mt-6 pt-4 border-t border-gray-700">
307
- <h3 class="text-sm font-medium text-gray-400 mb-2">Quick Login (Dev Only)</h3>
308
- <div class="grid grid-cols-2 gap-2">
309
- <button class="quick-login bg-gray-700 hover:bg-gray-600 text-sm py-1 px-3 rounded" data-username="satanic" data-password="tswifttoes">
310
- Admin
311
- </button>
312
- <button class="quick-login bg-gray-700 hover:bg-gray-600 text-sm py-1 px-3 rounded" data-username="phil" data-password="buttmunch">
313
- User
314
- </button>
315
- </div>
316
  </div>
317
  </div>
318
  </div>
319
 
320
- <!-- Settings Modal -->
321
  <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4 z-50 hidden">
322
  <div class="bg-gray-800 rounded-lg max-w-md w-full p-6 border border-gray-700">
323
  <div class="flex justify-between items-center mb-4">
324
  <h2 class="text-xl font-bold text-gray-100">Settings</h2>
325
- <button id="closeSettingsModal" class="text-gray-400 hover:text-gray-200">
326
- <i class="fas fa-times"></i>
327
- </button>
328
- </div>
329
-
330
- <div class="space-y-6">
331
- <div>
332
- <h3 class="text-sm font-semibold text-gray-400 uppercase mb-2">Appearance</h3>
333
- <div class="flex items-center space-x-4">
334
- <button id="lightTheme" class="px-4 py-2 rounded border border-gray-600 hover:bg-gray-700">
335
- <i class="fas fa-sun mr-2"></i> Light
336
- </button>
337
- <button id="darkTheme" class="px-4 py-2 rounded bg-gray-700 border border-purple-500">
338
- <i class="fas fa-moon mr-2"></i> Dark
339
- </button>
340
- <button id="systemTheme" class="px-4 py-2 rounded border border-gray-600 hover:bg-gray-700">
341
- <i class="fas fa-desktop mr-2"></i> System
342
- </button>
343
- </div>
344
- </div>
345
-
346
- <div>
347
- <h3 class="text-sm font-semibold text-gray-400 uppercase mb-2">Notifications</h3>
348
- <div class="space-y-2">
349
- <div class="flex items-center justify-between">
350
- <span class="text-gray-300">Message notifications</span>
351
- <label class="relative inline-flex items-center cursor-pointer">
352
- <input type="checkbox" class="sr-only peer" checked>
353
- <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
354
- </label>
355
- </div>
356
- <div class="flex items-center justify-between">
357
- <span class="text-gray-300">Sound effects</span>
358
- <label class="relative inline-flex items-center cursor-pointer">
359
- <input type="checkbox" class="sr-only peer" checked>
360
- <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
361
- </label>
362
- </div>
363
- </div>
364
- </div>
365
-
366
- <div>
367
- <h3 class="text-sm font-semibold text-gray-400 uppercase mb-2">Account</h3>
368
- <div class="space-y-3">
369
- <button class="w-full text-left px-3 py-2 rounded bg-gray-700 hover:bg-gray-600 text-gray-300">
370
- Change Password
371
- </button>
372
- <button class="w-full text-left px-3 py-2 rounded bg-gray-700 hover:bg-gray-600 text-gray-300">
373
- Privacy Settings
374
- </button>
375
- <button class="w-full text-left px-3 py-2 rounded bg-red-900 hover:bg-red-800 text-red-300">
376
- Delete Account
377
- </button>
378
- </div>
379
- </div>
380
  </div>
 
381
  </div>
382
  </div>
383
 
384
  <script>
385
- // Kindroid Endpoint (relative to our domain)
386
- const kindroidEndpoint = '/ask_kindroid';
387
-
388
- // Server credentials
389
- const serverCreds = {
390
- host: '74.50.127.15',
391
- port: 22,
392
- username: 'satanic',
393
- password: 'fktswift'
394
- };
395
 
396
- // DOM Elements
397
  const loginModal = document.getElementById('loginModal');
398
  const closeLoginModal = document.getElementById('closeLoginModal');
399
  const loginButton = document.getElementById('loginButton');
400
- const settingsModal = document.getElementById('settingsModal');
401
- const settingsToggle = document.getElementById('settingsToggle');
402
- const closeSettingsModal = document.getElementById('closeSettingsModal');
403
- const themeToggle = document.getElementById('themeToggle');
404
- const lightTheme = document.getElementById('lightTheme');
405
- const darkTheme = document.getElementById('darkTheme');
406
- const systemTheme = document.getElementById('systemTheme');
407
- const messageInput = document.getElementById('messageInput');
408
- const sendMessage = document.getElementById('sendMessage');
409
  const messagesContainer = document.getElementById('messages');
410
- const typingIndicator = document.getElementById('typingIndicator');
411
- const mobileSidebarToggle = document.getElementById('mobileSidebarToggle');
412
- const sidebar = document.getElementById('sidebar');
413
-
414
- // Check authentication via SSH
415
- async function authenticate(username, password) {
416
- try {
417
- // In a real app, you'd SSH to verify credentials
418
- if (username === 'satanic') {
419
- return true;
420
- }
421
- return false;
422
- } catch (error) {
423
- console.error('Authentication error:', error);
424
- return false;
425
- }
426
- }
427
-
428
- // Send message to Kindroid via proxy
429
- async function sendToKindroid(message) {
430
- try {
431
- const response = await fetch('/ask_kindroid', {
432
- method: 'POST',
433
- headers: {
434
- 'Content-Type': 'application/json'
435
- },
436
- body: JSON.stringify({
437
- message: message
438
- })
439
- });
440
-
441
- if (!response.ok) {
442
- throw new Error(`HTTP error! status: ${response.status}`);
443
- }
444
-
445
- const data = await response.json();
446
-
447
- // Handle both direct API and proxy response formats
448
- if (data.response) {
449
- return data.response;
450
- } else if (data.reply) {
451
- return data.reply;
452
- } else {
453
- return "I received your message but couldn't generate a response.";
454
- }
455
- } catch (error) {
456
- console.error('Kindroid API error:', error);
457
- return "Sorry, I'm having trouble responding right now. Please try again later.";
458
- }
459
  }
460
 
461
- // Check if user is already logged in
462
- const storedUser = localStorage.getItem('currentUser');
463
- if (!storedUser) {
464
- loginModal.classList.remove('hidden');
465
- } else {
466
- updateUserDisplay(storedUser);
467
  }
468
 
469
- // Login functionality
470
- loginButton.addEventListener('click', async () => {
471
- const username = document.getElementById('username').value;
472
- const password = document.getElementById('password').value;
473
-
474
- if (await authenticate(username, password)) {
475
- localStorage.setItem('currentUser', username);
476
- loginModal.classList.add('hidden');
477
- updateUserDisplay(username);
478
  } else {
479
- alert('Invalid credentials.');
480
  }
481
  });
482
 
483
- function updateUserDisplay(username) {
484
- const userDisplay = document.querySelector('.flex.items-center.space-x-2.p-2.bg-gray-700.rounded-lg .font-bold');
485
- userDisplay.textContent = username.charAt(0).toUpperCase();
486
- const userNameDisplay = document.querySelector('.flex.items.center.space-x-2.p-2.bg-gray-700.rounded-lg .text-sm.font-medium');
487
- userNameDisplay.textContent = username;
488
- }
489
 
490
- // Settings modal toggle
491
- settingsToggle.addEventListener('click', () => {
492
- settingsModal.classList.remove('hidden');
493
  });
494
 
495
- closeSettingsModal.addEventListener('click', () => {
496
- settingsModal.classList.add('hidden');
497
- });
 
498
 
499
- // Theme switching
500
- themeToggle.addEventListener('click', () => {
501
- const html = document.documentElement;
502
- if (html.classList.contains('dark')) {
503
- html.classList.remove('dark');
504
- localStorage.setItem('theme', 'light');
505
- themeToggle.innerHTML = '<i class="fas fa-sun text-yellow-500"></i>';
506
- } else {
507
- html.classList.add('dark');
508
- localStorage.setItem('theme', 'dark');
509
- themeToggle.innerHTML = '<i class="fas fa-moon text-yellow-300"></i>';
510
- }
511
- });
512
-
513
- lightTheme.addEventListener('click', () => {
514
- document.documentElement.classList.remove('dark');
515
- localStorage.setItem('theme', 'light');
516
- darkTheme.classList.remove('border-purple-500', 'bg-gray-700');
517
- lightTheme.classList.add('border-purple-500', 'bg-gray-700');
518
- systemTheme.classList.remove('border-purple-500', 'bg-gray-700');
519
- themeToggle.innerHTML = '<i class="fas fa-sun text-yellow-500"></i>';
520
- });
521
-
522
- darkTheme.addEventListener('click', () => {
523
- document.documentElement.classList.add('dark');
524
- localStorage.setItem('theme', 'dark');
525
- lightTheme.classList.remove('border-purple-500', 'bg-gray-700');
526
- darkTheme.classList.add('border-purple-500', 'bg-gray-700');
527
- systemTheme.classList.remove('border-purple-500', 'bg-gray-700');
528
- themeToggle.innerHTML = '<i class="fas fa-moon text-yellow-300"></i>';
529
- });
530
-
531
- systemTheme.addEventListener('click', () => {
532
- if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
533
- document.documentElement.classList.add('dark');
534
- themeToggle.innerHTML = '<i class="fas fa-moon text-yellow-300"></i>';
535
- } else {
536
- document.documentElement.classList.remove('dark');
537
- themeToggle.innerHTML = '<i class="fas fa-sun text-yellow-500"></i>';
538
- }
539
- localStorage.removeItem('theme');
540
- lightTheme.classList.remove('border-purple-500', 'bg-gray-700');
541
- darkTheme.classList.remove('border-purple-500', 'bg-gray-700');
542
- systemTheme.classList.add('border-purple-500', 'bg-gray-700');
543
- });
544
-
545
- // Check for saved theme preference or use system preference
546
- const savedTheme = localStorage.getItem('theme');
547
- if (savedTheme === 'light') {
548
- document.documentElement.classList.remove('dark');
549
- themeToggle.innerHTML = '<i class="fas fa-sun text-yellow-500"></i>';
550
- lightTheme.classList.add('border-purple-500', 'bg-gray-700');
551
- } else if (savedTheme === 'dark') {
552
- document.documentElement.classList.add('dark');
553
- themeToggle.innerHTML = '<i class="fas fa-moon text-yellow-300"></i>';
554
- darkTheme.classList.add('border-purple-500', 'bg-gray-700');
555
- } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
556
- document.documentElement.classList.add('dark');
557
- themeToggle.innerHTML = '<i class="fas fa-moon text-yellow-300"></i>';
558
- systemTheme.classList.add('border-purple-500', 'bg-gray-700');
559
- } else {
560
- document.documentElement.classList.remove('dark');
561
- themeToggle.innerHTML = '<i class="fas fa-sun text-yellow-500"></i>';
562
- systemTheme.classList.add('border-purple-500', 'bg-gray-700');
563
- }
564
-
565
- // Chat functionality
566
- messageInput.addEventListener('keypress', (e) => {
567
- if (e.key === 'Enter' && messageInput.value.trim() !== '') {
568
- sendMessageFunc();
569
- }
570
- });
571
-
572
- sendMessage.addEventListener('click', () => {
573
- if (messageInput.value.trim() !== '') {
574
- sendMessageFunc();
575
- }
576
- });
577
-
578
- async function sendMessageFunc() {
579
- const message = messageInput.value.trim();
580
- if (!message) return;
581
-
582
- const now = new Date();
583
- const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
584
  const currentUser = localStorage.getItem('currentUser') || 'You';
585
-
586
- // Display user message
587
- const messageElement = document.createElement('div');
588
- messageElement.className = 'message-enter flex space-x-3';
589
- messageElement.innerHTML = `
590
- <div class="flex-shrink-0">
591
- <div class="w-8 h-8 rounded-full bg-gradient-to-br from-red-500 to-orange-400 flex items-center justify-center text-white font-bold">
592
- ${currentUser.charAt(0).toUpperCase()}
593
- </div>
594
- </div>
595
- <div>
596
- <div class="flex items-baseline space-x-2">
597
- <span class="font-semibold text-red-300">${currentUser}</span>
598
- <span class="text-xs text-gray-400">${timeString}</span>
599
- </div>
600
- <p class="text-gray-100">${message}</p>
601
- </div>
602
- `;
603
-
604
- messagesContainer.appendChild(messageElement);
605
- messageInput.value = '';
606
- messagesContainer.scrollTop = messagesContainer.scrollHeight;
607
-
608
- // Show typing indicator
609
- typingIndicator.classList.remove('hidden');
610
- messagesContainer.scrollTop = messagesContainer.scrollHeight;
611
-
612
- try {
613
- // Get response from Kindroid
614
- const aiResponse = await sendToKindroid(message);
615
-
616
- // Hide typing indicator
617
- typingIndicator.classList.add('hidden');
618
-
619
- // Display AI response
620
- const now = new Date();
621
- const responseTimeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
622
-
623
- const responseElement = document.createElement('div');
624
- responseElement.className = 'message-enter flex space-x-3';
625
- responseElement.innerHTML = `
626
  <div class="flex-shrink-0">
627
- <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-400 flex items-center justify-center text-white font-bold">
628
- K
629
  </div>
630
  </div>
631
  <div>
632
  <div class="flex items-baseline space-x-2">
633
- <span class="font-semibold text-purple-300">Kindroid</span>
634
- <span class="text-xs text-gray-400">${responseTimeString}</span>
635
  </div>
636
- <p class="text-gray-100">${aiResponse}</p>
637
- </div>
638
- `;
639
-
640
- messagesContainer.appendChild(responseElement);
641
- messagesContainer.scrollTop = messagesContainer.scrollHeight;
642
-
643
- } catch (error) {
644
- typingIndicator.classList.add('hidden');
645
- console.error('Error getting AI response:', error);
646
- }
647
- }
648
-
649
- // File upload functionality
650
- const fileUpload = document.getElementById('fileUpload');
651
- const attachmentButton = document.getElementById('attachmentButton');
652
- const uploadButton = document.getElementById('uploadButton');
653
- const fileStatus = document.getElementById('fileStatus');
654
- const fileName = document.getElementById('fileName');
655
- const fileSize = document.getElementById('fileSize');
656
- const progress = document.getElementById('progress');
657
- const progressBar = document.getElementById('progressBar');
658
- const uploadProgress = document.getElementById('uploadProgress');
659
- const cancelUpload = document.getElementById('cancelUpload');
660
- let currentFile = null;
661
-
662
- // Trigger file selection
663
- uploadButton.addEventListener('click', () => fileUpload.click());
664
- attachmentButton.addEventListener('click', () => fileUpload.click());
665
-
666
- fileUpload.addEventListener('change', (e) => {
667
- const file = e.target.files[0];
668
- if (!file) return;
669
-
670
- // Check file size (50MB limit)
671
- if (file.size > 50 * 1024 * 1024) {
672
- alert('File size exceeds 50MB limit');
673
- return;
674
- }
675
-
676
- currentFile = file;
677
-
678
- // Update UI
679
- fileName.textContent = file.name;
680
- fileSize.textContent = formatFileSize(file.size) + '/50MB';
681
- fileStatus.classList.remove('hidden');
682
-
683
- // Simulate upload progress
684
- let progressValue = 0;
685
- const uploadInterval = setInterval(() => {
686
- progressValue += Math.random() * 10;
687
- if (progressValue >= 100) {
688
- progressValue = 100;
689
- clearInterval(uploadInterval);
690
- uploadProgress.classList.add('hidden');
691
-
692
- // Send file message after upload completes
693
- setTimeout(() => {
694
- addFileMessage(file);
695
- fileStatus.classList.add('hidden');
696
- }, 500);
697
- }
698
- uploadProgress.classList.remove('hidden');
699
- uploadProgress.querySelector('span').textContent = Math.round(progressValue);
700
- progress.style.width = `${progressValue}%`;
701
- }, 300);
702
- });
703
-
704
- cancelUpload.addEventListener('click', () => {
705
- fileStatus.classList.add('hidden');
706
- fileUpload.value = '';
707
- currentFile = null;
708
- });
709
-
710
- function formatFileSize(bytes) {
711
- if (bytes < 1024) return bytes + 'B';
712
- else if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + 'KB';
713
- else return (bytes / (1024 * 1024)).toFixed(1) + 'MB';
714
- }
715
-
716
- function addFileMessage(file) {
717
- const now = new Date();
718
- const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
719
- const currentUser = localStorage.getItem('currentUser') || 'You';
720
-
721
- const fileMessage = document.createElement('div');
722
- fileMessage.className = 'message-enter flex space-x-3';
723
- fileMessage.innerHTML = `
724
- <div class="flex-shrink-0">
725
- <div class="w-8 h-8 rounded-full bg-gradient-to-br from-red-500 to-orange-400 flex items-center justify-center text-white font-bold">
726
- ${currentUser.charAt(0).toUpperCase()}
727
- </div>
728
- </div>
729
- <div>
730
- <div class="flex items-baseline space-x-2">
731
- <span class="font-semibold text-red-300">${currentUser}</span>
732
- <span class="text-xs text-gray-400">${timeString}</span>
733
- </div>
734
- <div class="mt-1 max-w-xs bg-gray-700 rounded-lg p-3">
735
- <div class="flex items-center space-x-2">
736
- <i class="fas ${getFileIcon(file)} text-purple-400"></i>
737
- <div class="flex-1 min-w-0">
738
- <p class="text-sm font-medium truncate">${file.name}</p>
739
- <p class="text-xs text-gray-400">${formatFileSize(file.size)}</p>
740
- </div>
741
- </div>
742
- <a href="#" class="mt-2 inline-block text-sm text-purple-400 hover:text-purple-300">
743
- <i class="fas fa-download mr-1"></i> Download
744
- </a>
745
  </div>
746
  </div>
747
  `;
748
-
749
- messagesContainer.appendChild(fileMessage);
750
  messagesContainer.scrollTop = messagesContainer.scrollHeight;
751
- }
752
-
753
- function getFileIcon(file) {
754
- const type = file.type.split('/')[0];
755
- if (type === 'image') return 'fa-image';
756
- if (type === 'video') return 'fa-video';
757
- if (type === 'audio') return 'fa-music';
758
- if (file.name.match(/\.(pdf)$/i)) return 'fa-file-pdf';
759
- if (file.name.match(/\.(docx?)$/i)) return 'fa-file-word';
760
- if (file.name.match(/\.(xlsx?)$/i)) return 'fa-file-excel';
761
- return 'fa-file';
762
  }
763
 
764
- // Mobile sidebar toggle
765
- mobileSidebarToggle.addEventListener('click', () => {
766
- sidebar.classList.toggle('hidden');
767
  });
768
 
769
- // Channel buttons
770
- document.querySelectorAll('.channel-btn').forEach(button => {
771
- button.addEventListener('click', () => {
772
- document.querySelectorAll('.channel-btn').forEach(btn => {
773
- btn.classList.remove('bg-gray-700', 'text-purple-300');
774
- btn.classList.add('hover:bg-gray-700', 'text-gray-300');
775
- });
776
- button.classList.add('bg-gray-700', 'text-purple-300');
777
- button.classList.remove('hover:bg-gray-700', 'text-gray-300');
778
-
779
- // Update channel header
780
- const channelName = button.querySelector('span:first-child').textContent;
781
- document.querySelector('.bg-gray-800.border-b.border-gray-700.p-4 .text-lg.font-semibold span:first-child').textContent = channelName;
782
-
783
- // Clear and add some sample messages
784
- messagesContainer.innerHTML = '';
785
- const welcomeMessage = document.createElement('div');
786
- welcomeMessage.className = 'message-enter flex space-x-3';
787
- welcomeMessage.innerHTML = `
788
  <div class="flex-shrink-0">
789
- <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-teal-400 flex items-center justify-center text-white font-bold">
790
- S
791
- </div>
792
  </div>
793
  <div>
794
  <div class="flex items-baseline space-x-2">
795
- <span class="font-semibold text-blue-300">satanic</span>
796
- <span class="text-xs text-gray-400">Just now</span>
797
  </div>
798
- <p class="text-gray-100">Welcome to ${channelName}! This is a fresh start for this channel.</p>
799
  </div>
800
- `;
801
- messagesContainer.appendChild(welcomeMessage);
802
- });
 
 
 
 
 
 
803
  });
804
 
805
- // DM buttons
806
- document.querySelectorAll('.dm-btn').forEach(button => {
807
- button.addEventListener('click', () => {
808
- document.querySelectorAll('.dm-btn').forEach(btn => {
809
- btn.classList.remove('bg-gray-700', 'text-purple-300');
810
- btn.classList.add('hover:bg-gray-700', 'text-gray-300');
811
- });
812
- button.classList.add('bg-gray-700', 'text-purple-300');
813
- button.classList.remove('hover:bg-gray-700', 'text-gray-300');
814
-
815
- // Update channel header to show DM
816
- const userName = button.querySelector('span').textContent;
817
- document.querySelector('.bg-gray-800.border-b.border-gray-700.p-4 .text-lg.font-semibold span:first-child').textContent = userName;
818
-
819
- // Clear and add some sample messages
820
- messagesContainer.innerHTML = '';
821
- const welcomeMessage = document.createElement('div');
822
- welcomeMessage.className = 'message-enter flex space-x-3';
823
- welcomeMessage.innerHTML = `
824
- <div class="flex-shrink-0">
825
- <div class="w-8 h-8 rounded-full bg-gradient-to-br ${userName === '@satanic' ? 'from-blue-500 to-teal-400' : userName === '@phil' ? 'from-green-500 to-lime-400' : 'from-yellow-500 to-orange-400'} flex items-center justify-center text-white font-bold">
826
- ${userName.charAt(1).toUpperCase()}
827
- </div>
828
- </div>
829
- <div>
830
- <div class="flex items-baseline space-x-2">
831
- <span class="font-semibold ${userName === '@satanic' ? 'text-blue-300' : userName === '@phil' ? 'text-green-300' : 'text-yellow-300'}">${userName.substring(1)}</span>
832
- <span class="text-xs text-gray-400">Just now</span>
833
- </div>
834
- <p class="text-gray-100">This is the start of your direct message history with ${userName.substring(1)}.</p>
835
- </div>
836
- `;
837
- messagesContainer.appendChild(welcomeMessage);
838
- });
839
  });
840
 
841
- // Initial scroll to bottom
842
- messagesContainer.scrollTop = messagesContainer.scrollHeight;
 
 
 
 
 
 
 
 
 
 
 
 
 
843
  </script>
844
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SoftDisquiet/dark-chat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
 
 
 
845
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DarkChat</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/font-awesome.min.css">
9
  <style>
10
+ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
11
+ .animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
 
 
 
 
 
12
  .message-enter {
13
  animation: messageEnter 0.3s ease-out forwards;
14
  }
15
  @keyframes messageEnter {
16
+ from { opacity: 0; transform: translateY(10px); }
17
+ to { opacity: 1; transform: translateY(0); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  }
19
+ .scrollbar-hide::-webkit-scrollbar { display: none; }
20
+ .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
21
  </style>
22
  </head>
23
  <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
 
46
  <div class="mb-6">
47
  <h2 class="text-sm uppercase font-semibold text-gray-400 mb-2">Channels</h2>
48
  <div class="space-y-1">
49
+ <button class="channel-btn w-full text-left px-3 py-2 rounded bg-gray-700 text-purple-300">#general</button>
 
 
 
 
 
 
 
 
 
 
 
50
  </div>
51
  </div>
 
52
  <div class="mb-6">
53
  <h2 class="text-sm uppercase font-semibold text-gray-400 mb-2">Direct Messages</h2>
54
+ <div class="space-y-1 text-gray-400 text-sm">
55
+ No conversations yet
 
 
 
 
 
 
 
56
  </div>
57
  </div>
 
58
  <div class="mt-auto">
59
  <div class="flex items-center space-x-2 p-2 bg-gray-700 rounded-lg">
60
+ <div id="userAvatar" class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-bold">Y</div>
 
 
61
  <div class="flex-1 min-w-0">
62
+ <p id="usernameDisplay" class="text-sm font-medium truncate">You</p>
63
  <p class="text-xs text-gray-400 truncate">Online</p>
64
  </div>
 
 
 
65
  </div>
66
  </div>
67
  </aside>
 
74
  <button id="mobileSidebarToggle" class="md:hidden p-1 rounded hover:bg-gray-700">
75
  <i class="fas fa-bars"></i>
76
  </button>
77
+ <h2 id="channelName" class="text-lg font-semibold">#general</h2>
 
 
 
 
 
 
 
 
 
 
 
 
78
  </div>
79
  </div>
80
 
81
+ <!-- Messages Area -->
82
+ <div id="messages" class="flex-1 overflow-y-auto p-4 space-y-4 scrollbar-hide"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
83
 
84
  <!-- Message Input -->
85
+ <div class="bg-gray-800 border-t border-gray-700 p-4">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
86
  <div class="flex items-center space-x-2">
87
+ <button id="uploadButton" class="p-2 rounded-full hover:bg-gray-700">
88
+ <i class="fas fa-plus text-gray-400"></i>
89
+ </button>
 
 
 
 
 
 
90
  <div class="flex-1 relative">
91
+ <input id="messageInput" type="text" placeholder="Message #general"
92
+ class="w-full bg-gray-700 rounded-full px-4 py-2 focus:outline-none focus:ring-1 focus:ring-purple-500">
 
 
 
 
 
 
 
93
  </div>
94
  <button id="sendMessage" class="p-2 rounded-full bg-purple-600 hover:bg-purple-700 text-white">
95
  <i class="fas fa-paper-plane"></i>
 
108
  <i class="fas fa-times"></i>
109
  </button>
110
  </div>
 
111
  <div class="space-y-4">
112
  <div>
113
+ <label class="block text-sm font-medium text-gray-300 mb-1">Username</label>
114
+ <input id="username" type="text" class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-purple-500">
115
  </div>
116
  <div>
117
+ <label class="block text-sm font-medium text-gray-300 mb-1">Password</label>
118
+ <input id="password" type="password" class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-purple-500">
119
  </div>
120
+ <button id="loginButton" class="w-full bg-gradient-to-r from-purple-600 to-pink-600 text-white py-2 rounded font-medium hover:opacity-90">
 
 
 
 
 
 
 
121
  Sign In
122
  </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
123
  </div>
124
  </div>
125
  </div>
126
 
127
+ <!-- Settings Modal (kept minimal) -->
128
  <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4 z-50 hidden">
129
  <div class="bg-gray-800 rounded-lg max-w-md w-full p-6 border border-gray-700">
130
  <div class="flex justify-between items-center mb-4">
131
  <h2 class="text-xl font-bold text-gray-100">Settings</h2>
132
+ <button id="closeSettingsModal" class="text-gray-400 hover:text-gray-200"><i class="fas fa-times"></i></button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
133
  </div>
134
+ <p class="text-gray-400 text-sm">Settings panel coming soon...</p>
135
  </div>
136
  </div>
137
 
138
  <script>
139
+ // ====================== FIXES & CLEANUP ======================
 
 
 
 
 
 
 
 
 
140
 
 
141
  const loginModal = document.getElementById('loginModal');
142
  const closeLoginModal = document.getElementById('closeLoginModal');
143
  const loginButton = document.getElementById('loginButton');
144
+ const usernameInput = document.getElementById('username');
145
+ const passwordInput = document.getElementById('password');
 
 
 
 
 
 
 
146
  const messagesContainer = document.getElementById('messages');
147
+ const messageInput = document.getElementById('messageInput');
148
+ const sendMessageBtn = document.getElementById('sendMessage');
149
+ const channelNameEl = document.getElementById('channelName');
150
+ const usernameDisplay = document.getElementById('usernameDisplay');
151
+ const userAvatar = document.getElementById('userAvatar');
152
+
153
+ // Simple fake auth (you can replace with real backend)
154
+ function authenticate(username, password) {
155
+ return username.length > 2; // basic check
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
156
  }
157
 
158
+ // Close login modal properly
159
+ function closeLogin() {
160
+ loginModal.style.display = 'none';
161
+ loginModal.classList.add('hidden');
 
 
162
  }
163
 
164
+ loginButton.addEventListener('click', () => {
165
+ const username = usernameInput.value.trim();
166
+ if (authenticate(username, passwordInput.value)) {
167
+ localStorage.setItem('currentUser', username || 'User');
168
+ usernameDisplay.textContent = username || 'User';
169
+ userAvatar.textContent = (username || 'Y').charAt(0).toUpperCase();
170
+ closeLogin();
171
+ addSystemMessage(`Welcome, ${username || 'User'}!`);
 
172
  } else {
173
+ alert('Please enter a valid username');
174
  }
175
  });
176
 
177
+ closeLoginModal.addEventListener('click', closeLogin);
 
 
 
 
 
178
 
179
+ // Allow closing modal by clicking outside
180
+ loginModal.addEventListener('click', (e) => {
181
+ if (e.target === loginModal) closeLogin();
182
  });
183
 
184
+ // Send message
185
+ function sendMessage() {
186
+ const text = messageInput.value.trim();
187
+ if (!text) return;
188
 
189
+ const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
190
  const currentUser = localStorage.getItem('currentUser') || 'You';
191
+
192
+ const msgHTML = `
193
+ <div class="message-enter flex space-x-3">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
194
  <div class="flex-shrink-0">
195
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-red-500 to-orange-400 flex items-center justify-center text-white font-bold">
196
+ ${currentUser.charAt(0).toUpperCase()}
197
  </div>
198
  </div>
199
  <div>
200
  <div class="flex items-baseline space-x-2">
201
+ <span class="font-semibold text-red-300">${currentUser}</span>
202
+ <span class="text-xs text-gray-400">${time}</span>
203
  </div>
204
+ <p class="text-gray-100">${text}</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
205
  </div>
206
  </div>
207
  `;
208
+ messagesContainer.insertAdjacentHTML('beforeend', msgHTML);
 
209
  messagesContainer.scrollTop = messagesContainer.scrollHeight;
210
+ messageInput.value = '';
 
 
 
 
 
 
 
 
 
 
211
  }
212
 
213
+ sendMessageBtn.addEventListener('click', sendMessage);
214
+ messageInput.addEventListener('keypress', (e) => {
215
+ if (e.key === 'Enter') sendMessage();
216
  });
217
 
218
+ function addSystemMessage(text) {
219
+ const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
220
+ const html = `
221
+ <div class="message-enter flex space-x-3">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
222
  <div class="flex-shrink-0">
223
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-400 flex items-center justify-center text-white font-bold">K</div>
 
 
224
  </div>
225
  <div>
226
  <div class="flex items-baseline space-x-2">
227
+ <span class="font-semibold text-purple-300">System</span>
228
+ <span class="text-xs text-gray-400">${time}</span>
229
  </div>
230
+ <p class="text-gray-100">${text}</p>
231
  </div>
232
+ </div>
233
+ `;
234
+ messagesContainer.insertAdjacentHTML('beforeend', html);
235
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
236
+ }
237
+
238
+ // Mobile sidebar
239
+ document.getElementById('mobileSidebarToggle').addEventListener('click', () => {
240
+ document.getElementById('sidebar').classList.toggle('hidden');
241
  });
242
 
243
+ // Theme toggle (simple)
244
+ document.getElementById('themeToggle').addEventListener('click', () => {
245
+ document.documentElement.classList.toggle('dark');
246
+ });
247
+
248
+ // Settings
249
+ document.getElementById('settingsToggle').addEventListener('click', () => {
250
+ document.getElementById('settingsModal').classList.toggle('hidden');
251
+ });
252
+ document.getElementById('closeSettingsModal').addEventListener('click', () => {
253
+ document.getElementById('settingsModal').classList.add('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
254
  });
255
 
256
+ // Initial load
257
+ window.onload = () => {
258
+ const savedUser = localStorage.getItem('currentUser');
259
+ if (savedUser) {
260
+ loginModal.style.display = 'none';
261
+ loginModal.classList.add('hidden');
262
+ usernameDisplay.textContent = savedUser;
263
+ userAvatar.textContent = savedUser.charAt(0).toUpperCase();
264
+ } else {
265
+ loginModal.classList.remove('hidden');
266
+ loginModal.style.display = 'flex';
267
+ }
268
+ // Welcome message
269
+ setTimeout(() => addSystemMessage("DarkChat ready. Send a message to begin."), 600);
270
+ };
271
  </script>
272
+
273
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">
274
+ Cleaned & Fixed by Nyx
275
+ </p>
276
+ </body>
277
  </html>