Hugging Face's logo

Spaces:
samirerty
/
anycoder-88b8f2bc
Running

App Files Community
samirerty commited on
Commit
5e18176
·
verified ·
1 Parent(s): f71a4a4

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +790 -537
index.html CHANGED
@@ -2,756 +2,1009 @@
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>Glassmorphism Chat</title>
 
 
7
 
8
- <!-- Fonts: Outfit for a modern, airy feel -->
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=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
12
-
13
- <!-- Icons: Phosphor Icons for minimal, clean lines -->
14
- <script src="https://unpkg.com/@phosphor-icons/web"></script>
15
-
16
  <style>
17
- /* --- CSS Reset & Variables --- */
18
  :root {
19
- --bg-gradient-1: #ff9a9e;
20
- --bg-gradient-2: #fad0c4;
21
- --bg-gradient-3: #a18cd1;
22
- --bg-gradient-4: #fbc2eb;
 
 
 
 
 
23
 
24
- --glass-bg: rgba(255, 255, 255, 0.25);
25
- --glass-border: rgba(255, 255, 255, 0.5);
26
- --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
27
- --glass-blur: blur(20px);
28
 
29
- --text-primary: #2d3436;
30
- --text-secondary: #636e72;
31
 
32
- --bubble-sent: rgba(255, 255, 255, 0.6);
33
- --bubble-received: rgba(255, 255, 255, 0.3);
 
34
 
35
- --accent-color: #6c5ce7;
36
- --accent-hover: #5649c0;
 
 
37
 
38
- --font-main: 'Outfit', sans-serif;
 
 
 
39
  }
40
 
41
  * {
 
42
  margin: 0;
43
  padding: 0;
44
- box-sizing: border-box;
45
  }
46
 
47
  body {
48
- font-family: var(--font-main);
 
 
49
  height: 100vh;
50
  width: 100vw;
51
- overflow: hidden; /* Prevent body scroll, handle inside app */
52
- display: flex;
53
- justify-content: center;
54
- align-items: center;
55
- background: #f0f2f5;
56
- position: relative;
57
  }
58
 
59
- /* --- Animated Background Blobs --- */
60
- .background-blobs {
61
- position: absolute;
62
- top: 0;
63
- left: 0;
64
- width: 100%;
65
  height: 100%;
66
- z-index: -1;
67
- overflow: hidden;
68
  }
69
 
70
- .blob {
71
- position: absolute;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
72
  border-radius: 50%;
73
- filter: blur(60px);
74
- opacity: 0.8;
75
- animation: float 10s infinite ease-in-out alternate;
 
 
 
 
 
 
 
 
 
 
 
 
76
  }
77
 
78
- .blob-1 {
79
- top: -10%;
80
- left: -10%;
81
- width: 500px;
82
- height: 500px;
83
- background: var(--bg-gradient-1);
84
- animation-delay: 0s;
85
  }
86
 
87
- .blob-2 {
88
- bottom: -10%;
89
- right: -10%;
90
- width: 600px;
91
- height: 600px;
92
- background: var(--bg-gradient-3);
93
- animation-delay: -2s;
 
 
 
 
 
94
  }
95
 
96
- .blob-3 {
97
- top: 40%;
98
- left: 40%;
99
- width: 300px;
100
- height: 300px;
101
- background: var(--bg-gradient-4);
102
- animation-delay: -5s;
103
  }
104
 
105
- @keyframes float {
106
- 0% { transform: translate(0, 0) scale(1); }
107
- 100% { transform: translate(20px, 40px) scale(1.1); }
108
  }
109
 
110
- /* --- Main App Container --- */
111
- .app-container {
112
- width: 90%;
113
- max-width: 1200px; /* Wide desktop view */
114
- height: 90vh;
115
- background: var(--glass-bg);
116
- backdrop-filter: var(--glass-blur);
117
- -webkit-backdrop-filter: var(--glass-blur);
118
- border-radius: 24px;
119
- border: 1px solid var(--glass-border);
120
- box-shadow: var(--glass-shadow);
121
- display: flex;
122
- overflow: hidden;
123
- position: relative;
124
- /* Inner glow for depth */
125
- &::before {
126
- content: '';
127
- position: absolute;
128
- top: 0;
129
- left: 0;
130
- right: 0;
131
- height: 1px;
132
- background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
133
- }
134
  }
135
 
136
- /* --- Sidebar (Contacts) --- */
137
- .sidebar {
138
- width: 300px;
139
- border-right: 1px solid rgba(255, 255, 255, 0.3);
140
  display: flex;
141
  flex-direction: column;
142
- background: rgba(255, 255, 255, 0.1);
143
- transition: transform 0.3s ease;
144
  }
145
 
146
- .sidebar-header {
147
- padding: 24px;
 
148
  display: flex;
149
  align-items: center;
150
  justify-content: space-between;
 
 
 
 
 
 
 
 
151
  }
152
 
153
- .brand-logo {
154
- font-size: 1.2rem;
155
- font-weight: 600;
156
- color: var(--text-primary);
 
 
 
157
  display: flex;
158
  align-items: center;
159
- gap: 8px;
 
 
 
 
 
 
 
160
  }
161
-
162
- .search-bar {
163
- margin: 0 20px 20px;
164
- position: relative;
165
  }
166
-
167
- .search-input {
168
- width: 100%;
169
- padding: 10px 16px 10px 40px;
170
- border-radius: 12px;
171
- border: 1px solid rgba(255, 255, 255, 0.4);
172
- background: rgba(255, 255, 255, 0.2);
173
- color: var(--text-primary);
174
- font-family: var(--font-main);
175
- outline: none;
176
- transition: background 0.3s;
177
  }
178
 
179
- .search-input:focus {
180
- background: rgba(255, 255, 255, 0.4);
 
 
 
 
 
 
 
181
  }
182
 
183
- .search-icon {
184
- position: absolute;
185
- left: 12px;
186
- top: 50%;
187
- transform: translateY(-50%);
188
- color: var(--text-secondary);
189
  }
190
 
191
- .contact-list {
192
- flex: 1;
193
- overflow-y: auto;
194
- padding: 10px;
195
  }
196
 
197
- /* Custom Scrollbar */
198
- ::-webkit-scrollbar {
199
- width: 6px;
 
200
  }
201
- ::-webkit-scrollbar-track {
202
- background: transparent;
203
- }
204
- ::-webkit-scrollbar-thumb {
205
- background: rgba(255, 255, 255, 0.3);
206
- border-radius: 10px;
 
 
207
  }
208
 
209
- .contact-item {
210
  display: flex;
211
  align-items: center;
212
- padding: 12px;
213
- border-radius: 12px;
 
214
  cursor: pointer;
215
- transition: background 0.2s;
216
- margin-bottom: 4px;
217
  }
218
-
219
- .contact-item:hover, .contact-item.active {
220
- background: rgba(255, 255, 255, 0.3);
221
  }
222
 
223
- .avatar {
224
- width: 48px;
225
- height: 48px;
226
  border-radius: 50%;
227
- object-fit: cover;
228
- border: 2px solid rgba(255, 255, 255, 0.5);
229
- margin-right: 12px;
 
230
  }
231
-
232
- .contact-info {
233
- flex: 1;
 
 
 
 
 
 
234
  }
235
 
236
- .contact-name {
237
- font-weight: 500;
238
- color: var(--text-primary);
239
- margin-bottom: 2px;
240
  }
241
-
242
- .last-message {
243
  font-size: 0.85rem;
244
- color: var(--text-secondary);
245
- white-space: nowrap;
246
- overflow: hidden;
247
- text-overflow: ellipsis;
248
- max-width: 160px;
249
  }
250
-
251
- .meta-time {
252
  font-size: 0.75rem;
253
- color: var(--text-secondary);
 
 
 
 
 
 
 
 
 
 
 
254
  }
255
 
256
- /* --- Chat Area --- */
257
  .chat-area {
258
- flex: 1;
259
  display: flex;
260
  flex-direction: column;
261
  position: relative;
 
262
  }
263
 
264
- /* Chat Header */
265
  .chat-header {
266
- padding: 16px 24px;
 
267
  display: flex;
268
  align-items: center;
269
- justify-content: space-between;
270
- border-bottom: 1px solid rgba(255, 255, 255, 0.3);
271
- background: rgba(255, 255, 255, 0.15);
272
- z-index: 10;
273
  }
274
 
275
- .chat-user-info {
276
- display: flex;
277
- align-items: center;
278
- gap: 12px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
279
  }
280
 
281
- .user-status {
 
 
 
 
282
  display: flex;
283
  flex-direction: column;
284
  }
285
-
286
- .status-dot {
287
- width: 8px;
288
- height: 8px;
289
- background-color: #00b894;
 
 
 
 
 
 
 
290
  border-radius: 50%;
291
- display: inline-block;
292
- margin-right: 4px;
 
 
 
 
293
  }
294
-
295
- .status-text {
296
- font-size: 0.8rem;
297
- color: var(--text-secondary);
 
 
 
 
298
  }
299
 
300
- .header-actions {
 
 
 
 
 
 
 
 
 
 
 
301
  display: flex;
302
  gap: 16px;
303
  }
304
 
305
- .icon-btn {
306
- background: transparent;
307
- border: none;
308
- color: var(--text-primary);
309
- font-size: 1.2rem;
310
  cursor: pointer;
311
- transition: transform 0.2s, color 0.2s;
312
- display: flex;
313
- align-items: center;
314
- justify-content: center;
315
  }
316
 
317
- .icon-btn:hover {
318
- transform: scale(1.1);
319
- color: var(--accent-color);
320
  }
321
 
322
- .mobile-menu-btn {
323
- display: none;
 
 
 
324
  }
325
 
326
- /* Messages List */
327
- .messages-container {
328
- flex: 1;
329
- padding: 24px;
330
- overflow-y: auto;
 
 
 
 
 
 
331
  display: flex;
332
- flex-direction: column;
333
- gap: 16px;
334
  }
335
-
336
- .message {
337
- max-width: 70%;
338
- padding: 12px 18px;
339
- border-radius: 18px;
340
- position: relative;
341
- font-size: 0.95rem;
342
- line-height: 1.5;
343
- animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
344
- word-wrap: break-word;
 
 
345
  }
346
 
347
- @keyframes popIn {
348
- from { opacity: 0; transform: translateY(10px) scale(0.95); }
349
- to { opacity: 1; transform: translateY(0) scale(1); }
 
350
  }
351
 
352
- .message.received {
353
- align-self: flex-start;
354
- background: var(--bubble-received);
355
- backdrop-filter: blur(5px);
356
- border-bottom-left-radius: 4px;
357
- border: 1px solid rgba(255, 255, 255, 0.2);
358
- color: var(--text-primary);
359
  }
360
-
361
- .message.sent {
362
- align-self: flex-end;
363
- background: var(--bubble-sent);
364
- backdrop-filter: blur(10px);
365
- border-bottom-right-radius: 4px;
366
- border: 1px solid rgba(255, 255, 255, 0.4);
367
- color: var(--text-primary);
368
- box-shadow: 0 4px 15px rgba(0,0,0,0.05);
369
  }
370
 
371
- .message-time {
372
- font-size: 0.7rem;
373
- color: var(--text-secondary);
374
- text-align: right;
375
- margin-top: 4px;
376
- opacity: 0.7;
 
 
 
 
 
 
 
 
 
 
 
377
  }
378
 
379
  /* Input Area */
380
  .input-area {
381
- padding: 20px;
382
- background: rgba(255, 255, 255, 0.1);
383
- border-top: 1px solid rgba(255, 255, 255, 0.3);
 
 
 
 
 
384
  display: flex;
385
  align-items: center;
386
- gap: 12px;
 
387
  }
388
 
389
- .attach-btn {
390
- background: rgba(255, 255, 255, 0.3);
391
- border: 1px solid rgba(255, 255, 255, 0.4);
392
- width: 44px;
393
- height: 44px;
394
- border-radius: 50%;
395
- display: flex;
396
- align-items: center;
397
- justify-content: center;
398
  cursor: pointer;
399
- transition: all 0.2s;
400
- color: var(--text-secondary);
 
 
 
 
401
  }
402
-
403
- .attach-btn:hover {
404
- background: rgba(255, 255, 255, 0.5);
405
- color: var(--text-primary);
406
  }
407
 
408
- .message-input-wrapper {
409
- flex: 1;
410
- position: relative;
411
- }
412
-
413
- .message-input {
414
  width: 100%;
415
- padding: 14px 20px;
416
- border-radius: 24px;
417
- border: 1px solid rgba(255, 255, 255, 0.4);
418
- background: rgba(255, 255, 255, 0.4);
419
- color: var(--text-primary);
420
- font-family: var(--font-main);
421
  font-size: 1rem;
422
- outline: none;
423
- transition: all 0.3s;
424
- box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
 
425
  }
426
 
427
- .message-input:focus {
428
- background: rgba(255, 255, 255, 0.8);
429
- box-shadow: 0 4px 20px rgba(0,0,0,0.05);
430
- border-color: rgba(255, 255, 255, 0.8);
 
 
 
431
  }
432
 
433
- .send-btn {
434
- background: var(--accent-color);
435
- color: white;
436
- border: none;
437
- width: 44px;
438
- height: 44px;
439
- border-radius: 50%;
 
 
 
 
 
 
440
  display: flex;
441
  align-items: center;
442
- justify-content: center;
 
443
  cursor: pointer;
444
- transition: all 0.2s;
445
- box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
446
  }
447
-
448
- .send-btn:hover {
449
- background: var(--accent-hover);
450
- transform: scale(1.05);
451
- box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
 
452
  }
453
 
454
- .send-btn:active {
455
- transform: scale(0.95);
 
 
 
 
 
456
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
457
 
458
- /* Anycoder Link */
459
- .anycoder-link {
460
- font-size: 0.75rem;
461
- color: var(--text-secondary);
462
- text-decoration: none;
463
  font-weight: 500;
464
- opacity: 0.7;
465
- transition: opacity 0.3s;
466
- margin-left: auto;
467
- margin-right: 10px;
468
  }
469
 
470
- .anycoder-link:hover {
471
- opacity: 1;
472
- color: var(--accent-color);
 
 
 
 
 
 
 
 
 
473
  }
474
 
475
- /* --- Responsive Design --- */
476
- @media (max-width: 768px) {
477
  .app-container {
478
- width: 100%;
479
- height: 100%;
480
- border-radius: 0;
481
- border: none;
482
  }
 
483
 
484
- .sidebar {
485
- position: absolute;
486
- left: 0;
 
 
 
 
487
  top: 0;
488
  bottom: 0;
489
- z-index: 20;
 
490
  transform: translateX(-100%);
491
- background: rgba(255, 255, 255, 0.85);
492
- backdrop-filter: blur(25px);
493
- -webkit-backdrop-filter: blur(25px);
494
- box-shadow: 10px 0 30px rgba(0,0,0,0.1);
 
 
 
495
  }
496
 
497
- .sidebar.open {
 
498
  transform: translateX(0);
499
  }
500
-
501
- .mobile-menu-btn {
502
- display: block;
503
- margin-right: 10px;
 
 
 
504
  }
505
-
506
- .chat-header {
507
- padding: 12px 16px;
 
 
508
  }
509
-
510
- .message {
511
- max-width: 85%;
 
 
512
  }
513
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
514
  </style>
515
  </head>
516
  <body>
517
 
518
- <!-- Background Elements -->
519
- <div class="background-blobs">
520
- <div class="blob blob-1"></div>
521
- <div class="blob blob-2"></div>
522
- <div class="blob blob-3"></div>
523
- </div>
524
 
525
- <!-- Main App -->
526
  <div class="app-container">
527
 
528
- <!-- Sidebar -->
529
- <aside class="sidebar" id="sidebar">
530
- <div class="sidebar-header">
531
- <div class="brand-logo">
532
- <i class="ph ph-chat-circle-dots" style="font-size: 1.5rem; color: var(--accent-color);"></i>
533
- <span>GlassChat</span>
534
- </div>
535
- <button class="icon-btn" onclick="toggleSidebar()" style="display: none;" id="close-sidebar-btn">
536
- <i class="ph ph-x"></i>
537
- </button>
538
  </div>
539
-
540
- <div class="search-bar">
541
- <i class="ph ph-magnifying-glass search-icon"></i>
542
- <input type="text" class="search-input" placeholder="Search chats...">
543
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
544
 
545
- <div class="contact-list">
546
- <!-- Contact 1 (Active) -->
547
- <div class="contact-item active" onclick="selectContact(this)">
548
- <img src="https://picsum.photos/seed/alex/100/100" alt="Avatar" class="avatar">
549
- <div class="contact-info">
550
- <div class="contact-name">Alex Morgan</div>
551
- <div class="last-message">Sounds good! Let's meet later.</div>
552
- </div>
553
- <div class="meta-time">2m</div>
 
 
 
 
 
 
 
 
 
 
554
  </div>
555
 
556
- <!-- Contact 2 -->
557
- <div class="contact-item" onclick="selectContact(this)">
558
- <img src="https://picsum.photos/seed/sarah/100/100" alt="Avatar" class="avatar">
559
- <div class="contact-info">
560
- <div class="contact-name">Sarah Jenkins</div>
561
- <div class="last-message">Can you send the design file?</div>
562
- </div>
563
- <div class="meta-time">1h</div>
 
 
 
 
 
 
 
564
  </div>
565
 
566
- <!-- Contact 3 -->
567
- <div class="contact-item" onclick="selectContact(this)">
568
- <img src="https://picsum.photos/seed/david/100/100" alt="Avatar" class="avatar">
569
- <div class="contact-info">
570
- <div class="contact-name">David Chen</div>
571
- <div class="last-message">The project is almost done.</div>
572
- </div>
573
- <div class="meta-time">3h</div>
574
  </div>
 
 
 
 
 
 
 
 
 
575
 
576
- <!-- Contact 4 -->
577
- <div class="contact-item" onclick="selectContact(this)">
578
- <img src="https://picsum.photos/seed/emily/100/100" alt="Avatar" class="avatar">
579
- <div class="contact-info">
580
- <div class="contact-name">Emily Rose</div>
581
- <div class="last-message">Are you coming to the party?</div>
582
  </div>
583
- <div class="meta-time">1d</div>
 
 
 
 
 
 
 
 
584
  </div>
585
  </div>
586
  </aside>
587
 
588
- <!-- Chat Interface -->
589
  <main class="chat-area">
590
- <!-- Header -->
591
  <header class="chat-header">
592
- <div class="chat-user-info">
593
- <button class="icon-btn mobile-menu-btn" onclick="toggleSidebar()">
594
- <i class="ph ph-list"></i>
595
- </button>
596
- <img src="https://picsum.photos/seed/alex/100/100" alt="User" class="avatar" id="current-chat-avatar">
597
- <div class="user-status">
598
- <span class="contact-name" id="current-chat-name">Alex Morgan</span>
599
- <span class="status-text"><span class="status-dot"></span>Online</span>
 
 
 
 
600
  </div>
601
- </div>
602
-
603
- <div class="header-actions">
604
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a>
605
- <button class="icon-btn"><i class="ph ph-phone"></i></button>
606
- <button class="icon-btn"><i class="ph ph-video-camera"></i></button>
607
- <button class="icon-btn"><i class="ph ph-dots-three-vertical"></i></button>
608
  </div>
609
  </header>
610
 
611
- <!-- Messages -->
612
- <div class="messages-container" id="messages-list">
613
- <div class="message received">
614
- Hey! How is the new design coming along?
615
- <div class="message-time">10:30 AM</div>
616
- </div>
617
 
618
- <div class="message sent">
619
- It's going great! I'm finalizing the glassmorphism effects right now.
620
- <div class="message-time">10:32 AM</div>
 
 
 
 
 
 
 
 
 
 
621
  </div>
622
 
623
- <div class="message received">
624
- Awesome. Can you show me a preview?
625
- <div class="message-time">10:33 AM</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
626
  </div>
627
 
628
- <div class="message sent">
629
- Sure, I'm just polishing the responsiveness for mobile.
630
- <div class="message-time">10:35 AM</div>
 
 
 
 
 
 
 
 
631
  </div>
632
 
633
- <div class="message received">
634
- Sounds good! Let's meet later.
635
- <div class="message-time">10:36 AM</div>
 
 
 
 
 
 
 
 
636
  </div>
 
637
  </div>
638
 
639
- <!-- Input Area -->
640
- <div class="input-area">
641
- <button class="attach-btn" title="Attach file">
642
- <i class="ph ph-plus"></i>
643
- </button>
644
- <div class="message-input-wrapper">
645
- <input type="text" id="message-input" class="message-input" placeholder="Type a message..." autocomplete="off">
646
  </div>
647
- <button class="send-btn" id="send-btn" title="Send message">
648
- <i class="ph ph-paper-plane-right"></i>
649
- </button>
650
- </div>
651
  </main>
652
- </div>
653
 
654
- <script>
655
- // DOM Elements
656
- const messageInput = document.getElementById('message-input');
657
- const sendBtn = document.getElementById('send-btn');
658
- const messagesList = document.getElementById('messages-list');
659
- const sidebar = document.getElementById('sidebar');
660
- const closeSidebarBtn = document.getElementById('close-sidebar-btn');
661
-
662
- // Toggle Sidebar for Mobile
663
- function toggleSidebar() {
664
- sidebar.classList.toggle('open');
665
- if (sidebar.classList.contains('open')) {
666
- closeSidebarBtn.style.display = 'flex';
667
- } else {
668
- closeSidebarBtn.style.display = 'none';
669
- }
670
- }
671
-
672
- // Handle Contact Selection (Visual Only)
673
- function selectContact(element) {
674
- // Remove active class from all
675
- document.querySelectorAll('.contact-item').forEach(item => {
676
- item.classList.remove('active');
677
- });
678
- // Add active to clicked
679
- element.classList.add('active');
680
-
681
- // Update Header Info
682
- const name = element.querySelector('.contact-name').innerText;
683
- const img = element.querySelector('img').src;
684
 
685
- document.getElementById('current-chat-name').innerText = name;
686
- document.getElementById('current-chat-avatar').src = img;
 
 
 
 
687
 
688
- // On mobile, close sidebar after selection
689
- if (window.innerWidth <= 768) {
690
- toggleSidebar();
691
- }
692
- }
 
693
 
694
- // Send Message Functionality
695
- function sendMessage() {
696
- const text = messageInput.value.trim();
697
- if (text === "") return;
 
 
698
 
699
- // Create Sent Message
700
- addMessageToDOM(text, 'sent');
701
- messageInput.value = "";
702
 
703
- // Simulate Reply
704
- setTimeout(() => {
705
- const replies = [
706
- "That looks interesting!",
707
- "Can you tell me more?",
708
- "I totally agree with you.",
709
- "Let's discuss this in the meeting.",
710
- "Got it, thanks!"
711
- ];
712
- const randomReply = replies[Math.floor(Math.random() * replies.length)];
713
- addMessageToDOM(randomReply, 'received');
714
- }, 1500 + Math.random() * 1000);
715
- }
716
 
717
- function addMessageToDOM(text, type) {
718
- const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
719
-
720
- const messageDiv = document.createElement('div');
721
- messageDiv.classList.add('message', type);
722
- messageDiv.innerHTML = `
723
- ${text}
724
- <div class="message-time">${time}</div>
725
- `;
726
-
727
- messagesList.appendChild(messageDiv);
 
 
 
 
728
 
729
- // Scroll to bottom
730
- messagesList.scrollTop = messagesList.scrollHeight;
731
- }
 
 
732
 
733
- // Event Listeners
734
- sendBtn.addEventListener('click', sendMessage);
735
-
736
- messageInput.addEventListener('keypress', (e) => {
737
- if (e.key === 'Enter') {
738
- sendMessage();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
739
  }
740
- });
741
 
742
- // Initialize Sidebar Button state
743
- if (window.innerWidth <= 768) {
744
- closeSidebarBtn.style.display = 'none';
745
- }
746
-
747
- // Handle Resize
748
- window.addEventListener('resize', () => {
749
- if (window.innerWidth > 768) {
750
- sidebar.classList.remove('open');
751
- closeSidebarBtn.style.display = 'none';
752
  }
753
- });
754
 
 
 
 
 
 
 
 
 
 
 
755
  </script>
756
  </body>
757
  </html>
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Discord Clone - Modern Chat Interface</title>
7
+ <!-- Importing FontAwesome for Icons -->
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
 
 
 
 
 
 
 
 
 
10
  <style>
11
+ /* --- CSS VARIABLES & RESET --- */
12
  :root {
13
+ /* Discord-inspired Color Palette */
14
+ --bg-tertiary: #202225; /* Server List */
15
+ --bg-secondary: #2f3136; /* Sidebar/Channels */
16
+ --bg-primary: #36393f; /* Main Chat Area */
17
+ --bg-modifier-hover: rgba(79,84,92, 0.32);
18
+ --bg-modifier-selected: rgba(79,84,92, 0.6);
19
+
20
+ --channel-text: #8e9297;
21
+ --channel-text-selected: #fff;
22
 
23
+ --header-primary: #fff;
24
+ --header-secondary: #b9bbbe;
 
 
25
 
26
+ --text-normal: #dcddde;
27
+ --text-muted: #72767d;
28
 
29
+ --interactive-normal: #b9bbbe;
30
+ --interactive-hover: #dcddde;
31
+ --interactive-active: #fff;
32
 
33
+ --divider: #202225; /* Darker separator */
34
+ --brand-experiment: #5865F2; /* Blurple */
35
+ --green: #3ba55c;
36
+ --red: #ed4245;
37
 
38
+ --scrollbar-thumb: #202225;
39
+ --scrollbar-track: #2e3338;
40
+
41
+ --font-primary: 'gg sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
42
  }
43
 
44
  * {
45
+ box-sizing: border-box;
46
  margin: 0;
47
  padding: 0;
48
+ outline: none;
49
  }
50
 
51
  body {
52
+ font-family: var(--font-primary);
53
+ background-color: var(--bg-primary);
54
+ color: var(--text-normal);
55
  height: 100vh;
56
  width: 100vw;
57
+ overflow: hidden; /* Prevent body scroll, handle inside containers */
58
+ font-size: 16px;
59
+ line-height: 1.375rem;
 
 
 
60
  }
61
 
62
+ /* --- LAYOUT GRID --- */
63
+ .app-container {
64
+ display: grid;
65
+ grid-template-columns: 72px 240px 1fr 240px; /* Servers, Channels, Chat, Members */
 
 
66
  height: 100%;
67
+ width: 100%;
68
+ transition: grid-template-columns 0.3s ease;
69
  }
70
 
71
+ /* --- SCROLLBAR CUSTOMIZATION --- */
72
+ ::-webkit-scrollbar {
73
+ width: 8px;
74
+ height: 8px;
75
+ background-color: var(--scrollbar-track);
76
+ }
77
+ ::-webkit-scrollbar-thumb {
78
+ background-color: var(--scrollbar-thumb);
79
+ border-radius: 4px;
80
+ }
81
+ ::-webkit-scrollbar-track {
82
+ background-color: #2e3338;
83
+ border-radius: 4px;
84
+ }
85
+
86
+ /* --- 1. SERVER NAVIGATION (Leftmost) --- */
87
+ .server-nav {
88
+ background-color: var(--bg-tertiary);
89
+ display: flex;
90
+ flex-direction: column;
91
+ align-items: center;
92
+ padding-top: 12px;
93
+ overflow-y: auto;
94
+ z-index: 20;
95
+ }
96
+
97
+ .server-icon {
98
+ width: 48px;
99
+ height: 48px;
100
+ background-color: var(--bg-primary);
101
  border-radius: 50%;
102
+ margin-bottom: 8px;
103
+ display: flex;
104
+ justify-content: center;
105
+ align-items: center;
106
+ cursor: pointer;
107
+ transition: border-radius 0.2s ease, background-color 0.2s ease, color 0.2s;
108
+ color: var(--text-normal);
109
+ font-size: 1.2rem;
110
+ position: relative;
111
+ }
112
+
113
+ .server-icon:hover {
114
+ border-radius: 16px;
115
+ background-color: var(--brand-experiment);
116
+ color: white;
117
  }
118
 
119
+ .server-icon.active {
120
+ border-radius: 16px;
121
+ background-color: var(--brand-experiment);
 
 
 
 
122
  }
123
 
124
+ /* Little white pill indicator on hover/active */
125
+ .server-icon::before {
126
+ content: '';
127
+ position: absolute;
128
+ left: -12px; /* Hidden by default */
129
+ top: 50%;
130
+ transform: translateY(-50%);
131
+ width: 4px;
132
+ height: 0px;
133
+ background-color: white;
134
+ border-radius: 0 4px 4px 0;
135
+ transition: height 0.2s ease;
136
  }
137
 
138
+ .server-icon:hover::before {
139
+ height: 20px;
140
+ left: -12px;
 
 
 
 
141
  }
142
 
143
+ .server-icon.active::before {
144
+ height: 40px;
145
+ left: -12px;
146
  }
147
 
148
+ .separator {
149
+ width: 32px;
150
+ height: 2px;
151
+ background-color: var(--bg-modifier-selected);
152
+ margin-bottom: 8px;
153
+ border-radius: 1px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
154
  }
155
 
156
+ /* --- 2. CHANNEL SIDEBAR --- */
157
+ .channel-sidebar {
158
+ background-color: var(--bg-secondary);
 
159
  display: flex;
160
  flex-direction: column;
161
+ border-top-left-radius: 8px; /* Slight aesthetic curve */
 
162
  }
163
 
164
+ .server-header {
165
+ height: 48px;
166
+ padding: 0 16px;
167
  display: flex;
168
  align-items: center;
169
  justify-content: space-between;
170
+ font-weight: 700;
171
+ color: var(--header-primary);
172
+ box-shadow: 0 1px 0 rgba(4,4,5,0.2), 0 1.5px 0 rgba(6,6,7,0.05), 0 2px 0 rgba(4,4,5,0.05);
173
+ cursor: pointer;
174
+ transition: background-color 0.2s;
175
+ }
176
+ .server-header:hover {
177
+ background-color: rgba(79,84,92, 0.16);
178
  }
179
 
180
+ .channel-list {
181
+ flex: 1;
182
+ padding: 16px 8px;
183
+ overflow-y: auto;
184
+ }
185
+
186
+ .category-label {
187
  display: flex;
188
  align-items: center;
189
+ color: var(--channel-text);
190
+ font-size: 0.75rem;
191
+ font-weight: 700;
192
+ text-transform: uppercase;
193
+ margin-bottom: 4px;
194
+ padding: 0 8px;
195
+ margin-top: 16px;
196
+ cursor: pointer;
197
  }
198
+ .category-label:hover {
199
+ color: var(--interactive-hover);
 
 
200
  }
201
+ .category-label i {
202
+ font-size: 0.6rem;
203
+ margin-right: 4px;
 
 
 
 
 
 
 
 
204
  }
205
 
206
+ .channel-item {
207
+ display: flex;
208
+ align-items: center;
209
+ padding: 6px 8px;
210
+ margin: 1px 0;
211
+ border-radius: 4px;
212
+ color: var(--channel-text);
213
+ cursor: pointer;
214
+ font-weight: 500;
215
  }
216
 
217
+ .channel-item:hover {
218
+ background-color: var(--bg-modifier-hover);
219
+ color: var(--interactive-hover);
 
 
 
220
  }
221
 
222
+ .channel-item.active {
223
+ background-color: rgba(79,84,92, 0.6);
224
+ color: var(--channel-text-selected);
 
225
  }
226
 
227
+ .channel-item i {
228
+ color: var(--text-muted);
229
+ margin-right: 6px;
230
+ font-size: 1.1rem;
231
  }
232
+
233
+ .user-panel {
234
+ height: 52px;
235
+ background-color: #292b2f;
236
+ display: flex;
237
+ align-items: center;
238
+ padding: 0 8px;
239
+ justify-content: space-between;
240
  }
241
 
242
+ .user-info {
243
  display: flex;
244
  align-items: center;
245
+ flex: 1;
246
+ border-radius: 4px;
247
+ padding: 4px;
248
  cursor: pointer;
 
 
249
  }
250
+ .user-info:hover {
251
+ background-color: var(--bg-modifier-hover);
 
252
  }
253
 
254
+ .user-avatar-sm {
255
+ width: 32px;
256
+ height: 32px;
257
  border-radius: 50%;
258
+ background-image: url('https://picsum.photos/seed/me/200/200');
259
+ background-size: cover;
260
+ margin-right: 8px;
261
+ position: relative;
262
  }
263
+ .status-indicator {
264
+ position: absolute;
265
+ bottom: -2px;
266
+ right: -2px;
267
+ width: 10px;
268
+ height: 10px;
269
+ background-color: var(--green);
270
+ border-radius: 50%;
271
+ border: 2px solid #292b2f;
272
  }
273
 
274
+ .user-text {
275
+ display: flex;
276
+ flex-direction: column;
277
+ line-height: 1.1;
278
  }
279
+ .username {
 
280
  font-size: 0.85rem;
281
+ font-weight: 600;
282
+ color: #fff;
 
 
 
283
  }
284
+ .discriminator {
 
285
  font-size: 0.75rem;
286
+ color: var(--text-muted);
287
+ }
288
+
289
+ .panel-icons i {
290
+ padding: 8px;
291
+ cursor: pointer;
292
+ border-radius: 4px;
293
+ color: var(--interactive-normal);
294
+ }
295
+ .panel-icons i:hover {
296
+ background-color: var(--bg-modifier-hover);
297
+ color: var(--interactive-hover);
298
  }
299
 
300
+ /* --- 3. MAIN CHAT AREA --- */
301
  .chat-area {
302
+ background-color: var(--bg-primary);
303
  display: flex;
304
  flex-direction: column;
305
  position: relative;
306
+ min-width: 0; /* Fix flex text overflow */
307
  }
308
 
309
+ /* Header */
310
  .chat-header {
311
+ height: 48px;
312
+ padding: 0 16px;
313
  display: flex;
314
  align-items: center;
315
+ border-bottom: 1px solid #26272d;
316
+ box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.1);
317
+ flex-shrink: 0;
 
318
  }
319
 
320
+ .header-hash {
321
+ font-size: 1.5rem;
322
+ color: var(--text-muted);
323
+ margin-right: 8px;
324
+ font-weight: 400;
325
+ }
326
+ .header-title {
327
+ color: var(--header-primary);
328
+ font-weight: 700;
329
+ margin-right: 16px;
330
+ }
331
+ .header-topic {
332
+ color: var(--text-muted);
333
+ font-size: 0.875rem;
334
+ white-space: nowrap;
335
+ overflow: hidden;
336
+ text-overflow: ellipsis;
337
+ flex: 1;
338
+ }
339
+
340
+ .header-icons i {
341
+ color: var(--interactive-normal);
342
+ font-size: 1.1rem;
343
+ margin-left: 16px;
344
+ cursor: pointer;
345
+ }
346
+ .header-icons i:hover {
347
+ color: var(--interactive-hover);
348
  }
349
 
350
+ /* Messages */
351
+ .messages-wrapper {
352
+ flex: 1;
353
+ overflow-y: auto;
354
+ padding: 16px 0;
355
  display: flex;
356
  flex-direction: column;
357
  }
358
+
359
+ /* Welcome Placeholder */
360
+ .welcome-section {
361
+ padding: 16px;
362
+ margin: 0 auto;
363
+ text-align: center;
364
+ margin-top: 40px;
365
+ }
366
+ .welcome-icon {
367
+ width: 68px;
368
+ height: 68px;
369
+ background-color: #4f545c;
370
  border-radius: 50%;
371
+ display: flex;
372
+ align-items: center;
373
+ justify-content: center;
374
+ margin: 0 auto 16px;
375
+ color: white;
376
+ font-size: 32px;
377
  }
378
+ .welcome-title {
379
+ font-size: 1.25rem;
380
+ color: #fff;
381
+ font-weight: 700;
382
+ margin-bottom: 8px;
383
+ }
384
+ .welcome-desc {
385
+ color: var(--text-muted);
386
  }
387
 
388
+ /* Message Groups */
389
+ .message-group {
390
+ padding: 2px 16px;
391
+ margin-top: 17px;
392
+ position: relative;
393
+ }
394
+ .message-group:hover {
395
+ background-color: rgba(4, 4, 5, 0.07);
396
+ }
397
+
398
+ /* Compact Layout: Avatar + Header + Body in one line or tight grid */
399
+ .message-content {
400
  display: flex;
401
  gap: 16px;
402
  }
403
 
404
+ .message-avatar {
405
+ width: 40px;
406
+ height: 40px;
407
+ border-radius: 50%;
408
+ background-size: cover;
409
  cursor: pointer;
410
+ flex-shrink: 0;
411
+ margin-top: 2px;
 
 
412
  }
413
 
414
+ .message-body {
415
+ flex: 1;
416
+ min-width: 0;
417
  }
418
 
419
+ .message-header {
420
+ display: flex;
421
+ align-items: baseline;
422
+ margin-bottom: 2px;
423
+ cursor: pointer;
424
  }
425
 
426
+ .message-username {
427
+ color: #fff;
428
+ font-weight: 500;
429
+ margin-right: 8px;
430
+ font-size: 1rem;
431
+ }
432
+ .message-username:hover {
433
+ text-decoration: underline;
434
+ }
435
+ .message-username.bot {
436
+ color: var(--brand-experiment);
437
  display: flex;
438
+ align-items: center;
 
439
  }
440
+ .bot-tag {
441
+ background-color: var(--brand-experiment);
442
+ color: white;
443
+ font-size: 0.625rem;
444
+ padding: 1px 4px;
445
+ border-radius: 3px;
446
+ vertical-align: middle;
447
+ margin-left: 4px;
448
+ line-height: 1.3;
449
+ height: 15px;
450
+ display: inline-flex;
451
+ align-items: center;
452
  }
453
 
454
+ .message-timestamp {
455
+ color: var(--text-muted);
456
+ font-size: 0.75rem;
457
+ font-weight: 400;
458
  }
459
 
460
+ .message-text {
461
+ color: var(--text-normal);
462
+ font-size: 0.9375rem;
463
+ white-space: pre-wrap;
464
+ word-wrap: break-word;
465
+ line-height: 1.375rem;
 
466
  }
467
+
468
+ .message-text:hover {
469
+ color: #dbdee1; /* Slight highlight on hover */
 
 
 
 
 
 
470
  }
471
 
472
+ .date-divider {
473
+ display: flex;
474
+ align-items: center;
475
+ margin: 24px 16px 8px;
476
+ color: var(--text-muted);
477
+ font-size: 0.75rem;
478
+ font-weight: 600;
479
+ text-transform: uppercase;
480
+ }
481
+ .date-divider::before, .date-divider::after {
482
+ content: '';
483
+ flex: 1;
484
+ height: 1px;
485
+ background-color: var(--divider);
486
+ }
487
+ .date-divider span {
488
+ margin: 0 10px;
489
  }
490
 
491
  /* Input Area */
492
  .input-area {
493
+ padding: 0 16px 24px;
494
+ flex-shrink: 0;
495
+ position: relative;
496
+ }
497
+
498
+ .input-wrapper {
499
+ background-color: #40444b;
500
+ border-radius: 8px;
501
  display: flex;
502
  align-items: center;
503
+ padding: 0 16px;
504
+ min-height: 44px;
505
  }
506
 
507
+ .input-btn {
508
+ color: var(--interactive-normal);
 
 
 
 
 
 
 
509
  cursor: pointer;
510
+ background: none;
511
+ border: none;
512
+ font-size: 1.2rem;
513
+ padding: 4px;
514
+ margin-right: 8px;
515
+ transition: color 0.2s;
516
  }
517
+ .input-btn:hover {
518
+ color: var(--interactive-hover);
 
 
519
  }
520
 
521
+ .chat-input {
522
+ background: transparent;
523
+ border: none;
524
+ color: var(--text-normal);
 
 
525
  width: 100%;
526
+ height: 44px;
 
 
 
 
 
527
  font-size: 1rem;
528
+ font-family: var(--font-primary);
529
+ }
530
+ .chat-input::placeholder {
531
+ color: #72767d;
532
  }
533
 
534
+ /* --- 4. MEMBERS SIDEBAR (Right) --- */
535
+ .members-sidebar {
536
+ background-color: var(--bg-secondary);
537
+ padding: 24px 16px;
538
+ overflow-y: auto;
539
+ display: flex;
540
+ flex-direction: column;
541
  }
542
 
543
+ .role-header {
544
+ color: var(--text-muted);
545
+ font-size: 0.75rem;
546
+ font-weight: 700;
547
+ text-transform: uppercase;
548
+ margin-bottom: 12px;
549
+ margin-top: 20px;
550
+ }
551
+ .role-header:first-child {
552
+ margin-top: 0;
553
+ }
554
+
555
+ .member-item {
556
  display: flex;
557
  align-items: center;
558
+ padding: 6px 8px;
559
+ border-radius: 4px;
560
  cursor: pointer;
561
+ opacity: 0.9;
562
+ margin-bottom: 2px;
563
  }
564
+ .member-item:hover {
565
+ background-color: var(--bg-modifier-hover);
566
+ opacity: 1;
567
+ }
568
+ .member-item.offline {
569
+ opacity: 0.5;
570
  }
571
 
572
+ .member-avatar {
573
+ width: 32px;
574
+ height: 32px;
575
+ border-radius: 50%;
576
+ margin-right: 10px;
577
+ background-size: cover;
578
+ position: relative;
579
  }
580
+ .member-status {
581
+ position: absolute;
582
+ bottom: -2px;
583
+ right: -2px;
584
+ width: 10px;
585
+ height: 10px;
586
+ border-radius: 50%;
587
+ border: 2px solid var(--bg-secondary);
588
+ }
589
+ .status-online { background-color: var(--green); }
590
+ .status-idle { background-color: #faa61a; }
591
+ .status-dnd { background-color: var(--red); }
592
+ .status-offline { background-color: #747f8d; }
593
 
594
+ .member-name {
595
+ color: var(--channel-text);
 
 
 
596
  font-weight: 500;
597
+ }
598
+ .member-name:hover {
599
+ color: var(--interactive-hover);
 
600
  }
601
 
602
+ /* --- RESPONSIVE DESIGN --- */
603
+
604
+ /* Checkbox Hack for Mobile Menu */
605
+ #nav-toggle {
606
+ display: none;
607
+ }
608
+ .nav-toggle-label {
609
+ display: none;
610
+ color: var(--header-primary);
611
+ font-size: 1.5rem;
612
+ cursor: pointer;
613
+ margin-right: 16px;
614
  }
615
 
616
+ /* Tablet & Mobile */
617
+ @media (max-width: 900px) {
618
  .app-container {
619
+ grid-template-columns: 72px 240px 1fr 0; /* Hide members */
620
+ }
621
+ .members-sidebar {
622
+ display: none;
623
  }
624
+ }
625
 
626
+ @media (max-width: 768px) {
627
+ .app-container {
628
+ grid-template-columns: 72px 0 1fr 0; /* Hide channels */
629
+ }
630
+ .channel-sidebar {
631
+ position: fixed;
632
+ left: 72px;
633
  top: 0;
634
  bottom: 0;
635
+ width: 240px;
636
+ z-index: 30;
637
  transform: translateX(-100%);
638
+ transition: transform 0.3s ease;
639
+ box-shadow: 4px 0 15px rgba(0,0,0,0.5);
640
+ }
641
+
642
+ /* Show menu toggle */
643
+ .nav-toggle-label {
644
+ display: block;
645
  }
646
 
647
+ /* Logic to slide in sidebar */
648
+ #nav-toggle:checked ~ .app-container .channel-sidebar {
649
  transform: translateX(0);
650
  }
651
+
652
+ /* Overlay for mobile */
653
+ #nav-toggle:checked ~ .overlay {
654
+ position: fixed;
655
+ top: 0; left: 0; right: 0; bottom: 0;
656
+ background: rgba(0,0,0,0.5);
657
+ z-index: 25;
658
  }
659
+ }
660
+
661
+ @media (max-width: 480px) {
662
+ .app-container {
663
+ grid-template-columns: 0 0 1fr 0; /* Hide servers too, maybe add bottom nav? For now just chat */
664
  }
665
+ .server-nav {
666
+ display: none;
667
+ }
668
+ .channel-sidebar {
669
+ left: 0;
670
  }
671
  }
672
+
673
+ /* --- BUILT WITH ANYCODER LINK --- */
674
+ .anycoder-link {
675
+ color: var(--text-muted);
676
+ font-size: 0.75rem;
677
+ text-decoration: none;
678
+ margin-left: auto;
679
+ transition: color 0.2s;
680
+ }
681
+ .anycoder-link:hover {
682
+ color: var(--brand-experiment);
683
+ text-decoration: underline;
684
+ }
685
+
686
  </style>
687
  </head>
688
  <body>
689
 
690
+ <!-- Mobile Navigation Toggle -->
691
+ <input type="checkbox" id="nav-toggle">
692
+ <div class="overlay"></div>
 
 
 
693
 
 
694
  <div class="app-container">
695
 
696
+ <!-- 1. SERVER LIST -->
697
+ <nav class="server-nav">
698
+ <div class="server-icon" title="Home">
699
+ <i class="fab fa-discord"></i>
 
 
 
 
 
 
700
  </div>
701
+ <div class="separator"></div>
702
+ <div class="server-icon active" title="AnyCoder Community">
703
+ <img src="https://picsum.photos/seed/server1/48/48" style="border-radius: 50%; width: 100%; height: 100%; object-fit: cover;" alt="Server">
 
704
  </div>
705
+ <div class="server-icon" title="Gaming">
706
+ <i class="fas fa-gamepad"></i>
707
+ </div>
708
+ <div class="server-icon" title="Music">
709
+ <i class="fas fa-music"></i>
710
+ </div>
711
+ <div class="server-icon" title="Add Server">
712
+ <i class="fas fa-plus" style="color: var(--green);"></i>
713
+ </div>
714
+ <div class="server-icon" title="Explore Servers">
715
+ <i class="fas fa-compass" style="color: var(--green);"></i>
716
+ </div>
717
+ </nav>
718
 
719
+ <!-- 2. CHANNEL SIDEBAR -->
720
+ <aside class="channel-sidebar">
721
+ <header class="server-header">
722
+ <span>AnyCoder Community</span>
723
+ <i class="fas fa-chevron-down"></i>
724
+ </header>
725
+
726
+ <div class="channel-list">
727
+ <div class="category-label">
728
+ <i class="fas fa-chevron-down"></i>
729
+ <span>Information</span>
730
+ </div>
731
+ <div class="channel-item">
732
+ <i class="fas fa-hashtag"></i>
733
+ <span>announcements</span>
734
+ </div>
735
+ <div class="channel-item">
736
+ <i class="fas fa-hashtag"></i>
737
+ <span>rules</span>
738
  </div>
739
 
740
+ <div class="category-label">
741
+ <i class="fas fa-chevron-down"></i>
742
+ <span>General</span>
743
+ </div>
744
+ <div class="channel-item active">
745
+ <i class="fas fa-hashtag"></i>
746
+ <span>general-chat</span>
747
+ </div>
748
+ <div class="channel-item">
749
+ <i class="fas fa-hashtag"></i>
750
+ <span>design-critique</span>
751
+ </div>
752
+ <div class="channel-item">
753
+ <i class="fas fa-hashtag"></i>
754
+ <span>showcase</span>
755
  </div>
756
 
757
+ <div class="category-label">
758
+ <i class="fas fa-chevron-down"></i>
759
+ <span>Voice Channels</span>
 
 
 
 
 
760
  </div>
761
+ <div class="channel-item">
762
+ <i class="fas fa-volume-up"></i>
763
+ <span>Lounge</span>
764
+ </div>
765
+ <div class="channel-item">
766
+ <i class="fas fa-volume-up"></i>
767
+ <span>Music</span>
768
+ </div>
769
+ </div>
770
 
771
+ <!-- User Panel -->
772
+ <div class="user-panel">
773
+ <div class="user-info">
774
+ <div class="user-avatar-sm">
775
+ <div class="status-indicator"></div>
 
776
  </div>
777
+ <div class="user-text">
778
+ <span class="username">GuestUser</span>
779
+ <span class="discriminator">#8821</span>
780
+ </div>
781
+ </div>
782
+ <div class="panel-icons">
783
+ <i class="fas fa-microphone"></i>
784
+ <i class="fas fa-headphones"></i>
785
+ <i class="fas fa-cog"></i>
786
  </div>
787
  </div>
788
  </aside>
789
 
790
+ <!-- 3. MAIN CHAT AREA -->
791
  <main class="chat-area">
 
792
  <header class="chat-header">
793
+ <label for="nav-toggle" class="nav-toggle-label">
794
+ <i class="fas fa-bars"></i>
795
+ </label>
796
+ <span class="header-hash">#</span>
797
+ <span class="header-title">general-chat</span>
798
+ <span class="header-topic">Discussion about web development, design, and CSS tricks.</span>
799
+ <div class="header-icons">
800
+ <i class="fas fa-bell"></i>
801
+ <i class="fas fa-thumbtack"></i>
802
+ <i class="fas fa-users"></i>
803
+ <div style="width: 200px; text-align: right;">
804
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a>
805
  </div>
806
+ <i class="fas fa-inbox"></i>
807
+ <i class="fas fa-question-circle"></i>
 
 
 
 
 
808
  </div>
809
  </header>
810
 
811
+ <div class="messages-wrapper" id="messages-container">
 
 
 
 
 
812
 
813
+ <div class="date-divider"><span>October 24, 2023</span></div>
814
+
815
+ <div class="message-group">
816
+ <div class="message-content">
817
+ <div class="message-avatar" style="background-image: url('https://picsum.photos/seed/bot/200/200');"></div>
818
+ <div class="message-body">
819
+ <div class="message-header">
820
+ <span class="message-username bot">System Bot <span class="bot-tag">BOT</span></span>
821
+ <span class="message-timestamp">Today at 10:30 AM</span>
822
+ </div>
823
+ <div class="message-text">Welcome to the new server! Feel free to introduce yourselves.</div>
824
+ </div>
825
+ </div>
826
  </div>
827
 
828
+ <div class="message-group">
829
+ <div class="message-content">
830
+ <div class="message-avatar" style="background-image: url('https://picsum.photos/seed/user1/200/200');"></div>
831
+ <div class="message-body">
832
+ <div class="message-header">
833
+ <span class="message-username" style="color: #f1c40f;">DevMaster</span>
834
+ <span class="message-timestamp">Today at 10:32 AM</span>
835
+ </div>
836
+ <div class="message-text">Hey everyone! Excited to be here. Anyone working with CSS Grid lately?</div>
837
+ </div>
838
+ </div>
839
+ </div>
840
+
841
+ <div class="message-group">
842
+ <div class="message-content">
843
+ <div class="message-avatar" style="background-image: url('https://picsum.photos/seed/user2/200/200');"></div>
844
+ <div class="message-body">
845
+ <div class="message-header">
846
+ <span class="message-username" style="color: #e91e63;">SarahDesigns</span>
847
+ <span class="message-timestamp">Today at 10:45 AM</span>
848
+ </div>
849
+ <div class="message-text">Just finished a project using subgrid! It's a game changer for card layouts.</div>
850
+ </div>
851
+ </div>
852
  </div>
853
 
854
+ <div class="message-group">
855
+ <div class="message-content">
856
+ <div class="message-avatar" style="background-image: url('https://picsum.photos/seed/user3/200/200');"></div>
857
+ <div class="message-body">
858
+ <div class="message-header">
859
+ <span class="message-username">CodeNinja</span>
860
+ <span class="message-timestamp">Today at 11:00 AM</span>
861
+ </div>
862
+ <div class="message-text">That sounds awesome, Sarah. Can you share a snippet?</div>
863
+ </div>
864
+ </div>
865
  </div>
866
 
867
+ <div class="message-group">
868
+ <div class="message-content">
869
+ <div class="message-avatar" style="background-image: url('https://picsum.photos/seed/user2/200/200');"></div>
870
+ <div class="message-body">
871
+ <div class="message-header">
872
+ <span class="message-username" style="color: #e91e63;">SarahDesigns</span>
873
+ <span class="message-timestamp">Today at 11:05 AM</span>
874
+ </div>
875
+ <div class="message-text">Sure! It's super simple. You just set `grid-template-rows: subgrid` on the child element.</div>
876
+ </div>
877
+ </div>
878
  </div>
879
+
880
  </div>
881
 
882
+ <footer class="input-area">
883
+ <div class="input-wrapper">
884
+ <button class="input-btn"><i class="fas fa-plus-circle"></i></button>
885
+ <input type="text" class="chat-input" id="message-input" placeholder="Message #general-chat" autocomplete="off">
886
+ <button class="input-btn"><i class="fas fa-gift"></i></button>
887
+ <button class="input-btn"><i class="fas fa-sticky-note"></i></button>
888
+ <button class="input-btn"><i class="fas fa-smile"></i></button>
889
  </div>
890
+ </footer>
 
 
 
891
  </main>
 
892
 
893
+ <!-- 4. MEMBERS SIDEBAR -->
894
+ <aside class="members-sidebar">
895
+ <div class="role-header">Online — 3</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
896
 
897
+ <div class="member-item">
898
+ <div class="member-avatar" style="background-image: url('https://picsum.photos/seed/user1/200/200');">
899
+ <div class="member-status status-online"></div>
900
+ </div>
901
+ <div class="member-name" style="color: #f1c40f;">DevMaster</div>
902
+ </div>
903
 
904
+ <div class="member-item">
905
+ <div class="member-avatar" style="background-image: url('https://picsum.photos/seed/user2/200/200');">
906
+ <div class="member-status status-idle"></div>
907
+ </div>
908
+ <div class="member-name" style="color: #e91e63;">SarahDesigns</div>
909
+ </div>
910
 
911
+ <div class="member-item">
912
+ <div class="member-avatar" style="background-image: url('https://picsum.photos/seed/user3/200/200');">
913
+ <div class="member-status status-dnd"></div>
914
+ </div>
915
+ <div class="member-name">CodeNinja</div>
916
+ </div>
917
 
918
+ <div class="role-header">Offline — 5</div>
 
 
919
 
920
+ <div class="member-item offline">
921
+ <div class="member-avatar" style="background-image: url('https://picsum.photos/seed/user4/200/200');">
922
+ <div class="member-status status-offline"></div>
923
+ </div>
924
+ <div class="member-name">GhostUser</div>
925
+ </div>
 
 
 
 
 
 
 
926
 
927
+ <div class="member-item offline">
928
+ <div class="member-avatar" style="background-image: url('https://picsum.photos/seed/user5/200/200');">
929
+ <div class="member-status status-offline"></div>
930
+ </div>
931
+ <div class="member-name">PixelArt</div>
932
+ </div>
933
+ </aside>
934
+
935
+ </div>
936
+
937
+ <!-- Minimal JavaScript for interactivity as requested by System Prompt -->
938
+ <script>
939
+ document.addEventListener('DOMContentLoaded', () => {
940
+ const input = document.getElementById('message-input');
941
+ const messagesContainer = document.getElementById('messages-container');
942
 
943
+ // Function to format time
944
+ function getCurrentTime() {
945
+ const now = new Date();
946
+ return `Today at ${now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
947
+ }
948
 
949
+ // Handle sending messages
950
+ function sendMessage() {
951
+ const text = input.value.trim();
952
+ if (text === "") return;
953
+
954
+ // Create new message HTML structure
955
+ const messageGroup = document.createElement('div');
956
+ messageGroup.className = 'message-group';
957
+
958
+ // Random avatar for user
959
+ const avatarSeed = Math.floor(Math.random() * 1000);
960
+
961
+ messageGroup.innerHTML = `
962
+ <div class="message-content">
963
+ <div class="message-avatar" style="background-image: url('https://picsum.photos/seed/${avatarSeed}/200/200');"></div>
964
+ <div class="message-body">
965
+ <div class="message-header">
966
+ <span class="message-username">GuestUser</span>
967
+ <span class="message-timestamp">${getCurrentTime()}</span>
968
+ </div>
969
+ <div class="message-text">${escapeHtml(text)}</div>
970
+ </div>
971
+ </div>
972
+ `;
973
+
974
+ messagesContainer.appendChild(messageGroup);
975
+
976
+ // Clear input
977
+ input.value = "";
978
+
979
+ // Scroll to bottom smoothly
980
+ messagesContainer.scrollTo({
981
+ top: messagesContainer.scrollHeight,
982
+ behavior: 'smooth'
983
+ });
984
  }
 
985
 
986
+ // Basic HTML escape to prevent injection in this demo
987
+ function escapeHtml(text) {
988
+ const map = {
989
+ '&': '&amp;',
990
+ '<': '&lt;',
991
+ '>': '&gt;',
992
+ '"': '&quot;',
993
+ "'": '&#039;'
994
+ };
995
+ return text.replace(/[&<>"']/g, function(m) { return map[m]; });
996
  }
 
997
 
998
+ // Event Listeners
999
+ input.addEventListener('keypress', (e) => {
1000
+ if (e.key === 'Enter') {
1001
+ sendMessage();
1002
+ }
1003
+ });
1004
+
1005
+ // Auto scroll on load
1006
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
1007
+ });
1008
  </script>
1009
  </body>
1010
  </html>