Hugging Face's logo

Spaces:
samirerty
/
anycoder-88b8f2bc
Running

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

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +321 -855
index.html CHANGED
@@ -3,1007 +3,473 @@
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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Minimal Glassmorphism Chat</title>
7
+ <!-- Importing Inter font for clean typography -->
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
11
+ <!-- Importing Phosphor Icons for minimal iconography -->
12
+ <script src="https://unpkg.com/@phosphor-icons/web"></script>
13
+
14
  <style>
 
15
  :root {
16
+ /* Color Palette - Soft, Neutral, Calm */
17
+ --bg-gradient-start: #fdfbfb;
18
+ --bg-gradient-end: #ebedee;
19
+ --glass-bg: rgba(255, 255, 255, 0.65);
20
+ --glass-border: rgba(255, 255, 255, 0.5);
21
+ --glass-blur: 16px;
 
 
 
 
 
 
22
 
23
+ --text-primary: #334155;
24
+ --text-secondary: #64748b;
25
 
26
+ --bubble-sent: #3b82f6; /* Soft blue */
27
+ --bubble-sent-text: #ffffff;
28
+ --bubble-received: #ffffff;
29
+ --bubble-received-text: #334155;
30
 
31
+ --input-bg: rgba(255, 255, 255, 0.8);
32
+ --input-focus-border: #94a3b8;
 
 
33
 
34
+ --shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
 
35
 
36
+ --spacing-unit: 1rem;
37
+ --radius-bubble: 18px;
38
+ --radius-container: 0px; /* Full screen on mobile */
39
  }
40
 
41
  * {
42
  box-sizing: border-box;
43
  margin: 0;
44
  padding: 0;
45
+ -webkit-tap-highlight-color: transparent;
46
  }
47
 
48
  body {
49
+ font-family: 'Inter', sans-serif;
50
+ background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
 
51
  height: 100vh;
52
+ display: flex;
53
+ justify-content: center;
54
+ color: var(--text-primary);
55
+ overflow: hidden; /* Prevent body scroll, handle inside app */
56
  }
57
 
58
+ /* App Container - Mobile First, Centered on Desktop */
59
  .app-container {
 
 
 
60
  width: 100%;
61
+ height: 100%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  display: flex;
63
  flex-direction: column;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
64
  position: relative;
65
+ background: transparent;
66
  }
67
 
68
+ @media (min-width: 768px) {
69
+ .app-container {
70
+ max-width: 600px;
71
+ height: 90vh;
72
+ margin-top: 5vh;
73
+ border-radius: 24px;
74
+ background: rgba(255, 255, 255, 0.4);
75
+ box-shadow: var(--shadow-soft);
76
+ border: 1px solid var(--glass-border);
77
+ overflow: hidden;
78
+ backdrop-filter: blur(var(--glass-blur));
79
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
80
  }
81
 
82
+ /* --- Header --- */
83
+ header {
84
+ flex-shrink: 0;
85
+ height: 60px;
86
  display: flex;
87
  align-items: center;
88
  justify-content: space-between;
89
+ padding: 0 20px;
90
+ background: var(--glass-bg);
91
+ backdrop-filter: blur(var(--glass-blur));
92
+ -webkit-backdrop-filter: blur(var(--glass-blur));
93
+ border-bottom: 1px solid rgba(0, 0, 0, 0.03);
94
+ z-index: 10;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
95
  }
96
 
97
+ .chat-title {
 
 
98
  font-size: 1.1rem;
99
+ font-weight: 500;
100
+ letter-spacing: -0.01em;
101
+ color: var(--text-primary);
 
 
 
 
 
 
 
 
 
102
  display: flex;
103
  align-items: center;
104
+ gap: 10px;
 
 
 
 
 
 
105
  }
106
 
107
+ .status-dot {
108
+ width: 8px;
109
+ height: 8px;
110
+ background-color: #10b981;
 
 
 
 
 
 
 
 
 
 
 
 
111
  border-radius: 50%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112
  }
113
 
114
+ .header-actions {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
115
  display: flex;
116
  align-items: center;
 
 
 
117
  }
118
 
119
+ /* Mandatory Link Styling */
120
+ .built-with-link {
121
+ font-size: 0.75rem;
122
+ color: var(--text-secondary);
123
+ text-decoration: none;
124
  font-weight: 400;
125
+ transition: color 0.2s ease;
126
+ opacity: 0.8;
127
  }
128
+
129
+ .built-with-link:hover {
130
+ color: var(--bubble-sent);
131
+ opacity: 1;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
132
  }
133
 
134
+ /* --- Chat Body --- */
135
+ #chat-body {
136
+ flex-grow: 1;
137
  overflow-y: auto;
138
+ padding: 20px;
139
  display: flex;
140
  flex-direction: column;
141
+ gap: 16px;
142
+ scroll-behavior: smooth;
143
  }
144
+
145
+ /* Scrollbar Styling */
146
+ #chat-body::-webkit-scrollbar {
147
+ width: 6px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
148
  }
149
+ #chat-body::-webkit-scrollbar-track {
150
+ background: transparent;
 
 
 
151
  }
152
+ #chat-body::-webkit-scrollbar-thumb {
153
+ background-color: rgba(0, 0, 0, 0.1);
154
+ border-radius: 10px;
155
  }
156
 
157
+ /* Message Bubbles */
158
+ .message-row {
 
 
 
 
 
 
 
 
 
 
159
  display: flex;
160
+ width: 100%;
161
+ opacity: 0;
162
+ animation: fadeIn 0.4s ease forwards;
163
  }
164
 
165
+ @keyframes fadeIn {
166
+ to { opacity: 1; transform: translateY(0); }
167
+ from { opacity: 0; transform: translateY(10px); }
 
 
 
 
 
168
  }
169
 
170
+ .message-row.sent {
171
+ justify-content: flex-end;
 
172
  }
173
 
174
+ .message-row.received {
175
+ justify-content: flex-start;
 
 
 
176
  }
177
 
178
+ .message-bubble {
179
+ max-width: 75%;
180
+ padding: 12px 18px;
181
+ font-size: 0.95rem;
182
+ line-height: 1.5;
183
+ position: relative;
184
+ word-wrap: break-word;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
185
  }
186
 
187
+ .received .message-bubble {
188
+ background-color: var(--bubble-received);
189
+ color: var(--bubble-received-text);
190
+ border-radius: var(--radius-bubble);
191
+ border-top-left-radius: 4px;
192
+ box-shadow: 0 2px 5px rgba(0,0,0,0.02);
193
  }
194
 
195
+ .sent .message-bubble {
196
+ background-color: var(--bubble-sent);
197
+ color: var(--bubble-sent-text);
198
+ border-radius: var(--radius-bubble);
199
+ border-bottom-right-radius: 4px;
200
+ box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
 
 
 
 
201
  }
202
 
203
+ .message-meta {
204
+ display: block;
205
+ font-size: 0.7rem;
206
+ margin-top: 4px;
207
+ opacity: 0.7;
208
+ text-align: right;
 
 
 
 
 
 
 
 
209
  }
210
+
211
+ .received .message-meta {
212
+ color: var(--text-secondary);
213
+ text-align: left;
214
  }
215
 
216
+ /* --- Input Area --- */
217
  .input-area {
 
218
  flex-shrink: 0;
219
+ padding: 16px 20px;
220
+ background: var(--glass-bg);
221
+ backdrop-filter: blur(var(--glass-blur));
222
+ -webkit-backdrop-filter: blur(var(--glass-blur));
223
+ border-top: 1px solid rgba(0, 0, 0, 0.03);
 
224
  display: flex;
225
  align-items: center;
226
+ gap: 12px;
 
227
  }
228
 
229
+ .input-wrapper {
230
+ flex-grow: 1;
231
+ position: relative;
 
 
 
 
 
 
 
 
 
232
  }
233
 
234
+ input[type="text"] {
 
 
 
235
  width: 100%;
236
+ padding: 14px 20px;
237
+ border-radius: 30px;
238
+ border: 1px solid transparent;
239
+ background: var(--input-bg);
240
+ color: var(--text-primary);
241
+ font-family: inherit;
242
+ font-size: 0.95rem;
243
+ outline: none;
244
+ transition: all 0.2s ease;
245
+ box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
246
  }
247
 
248
+ input[type="text"]::placeholder {
249
+ color: #94a3b8;
 
 
 
 
 
250
  }
251
 
252
+ input[type="text"]:focus {
253
+ background: #ffffff;
254
+ border-color: var(--input-focus-border);
255
+ box-shadow: 0 4px 12px rgba(0,0,0,0.03);
 
 
 
 
 
 
256
  }
257
 
258
+ .send-btn {
259
+ background-color: var(--bubble-sent);
260
+ color: white;
261
+ border: none;
262
+ width: 46px;
263
+ height: 46px;
264
+ border-radius: 50%;
265
  display: flex;
266
  align-items: center;
267
+ justify-content: center;
 
268
  cursor: pointer;
269
+ transition: transform 0.1s ease, background-color 0.2s ease;
270
+ flex-shrink: 0;
 
 
 
 
 
 
 
271
  }
272
 
273
+ .send-btn:hover {
274
+ background-color: #2563eb;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
275
  }
 
 
 
 
276
 
277
+ .send-btn:active {
278
+ transform: scale(0.95);
 
 
 
 
279
  }
280
 
281
+ .send-btn i {
282
+ font-size: 1.2rem;
283
+ margin-left: 2px; /* Visual centering adjustment */
 
 
 
 
 
 
 
 
 
284
  }
285
 
286
+ /* Typing Indicator */
287
+ .typing-indicator {
288
+ display: none; /* Hidden by default */
289
+ padding: 12px 16px;
290
+ background: var(--bubble-received);
291
+ border-radius: var(--radius-bubble);
292
+ border-top-left-radius: 4px;
293
+ width: fit-content;
294
+ margin-bottom: 16px;
295
+ box-shadow: 0 2px 5px rgba(0,0,0,0.02);
296
  }
297
 
298
+ .typing-dots {
299
+ display: flex;
300
+ gap: 4px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
301
  }
302
 
303
+ .typing-dot {
304
+ width: 6px;
305
+ height: 6px;
306
+ background-color: #cbd5e1;
307
+ border-radius: 50%;
308
+ animation: bounce 1.4s infinite ease-in-out both;
 
309
  }
310
+
311
+ .typing-dot:nth-child(1) { animation-delay: -0.32s; }
312
+ .typing-dot:nth-child(2) { animation-delay: -0.16s; }
313
+
314
+ @keyframes bounce {
315
+ 0%, 80%, 100% { transform: scale(0); }
316
+ 40% { transform: scale(1); }
317
  }
318
 
319
  </style>
320
  </head>
321
  <body>
322
 
 
 
 
 
323
  <div class="app-container">
324
+ <!-- Header -->
325
+ <header>
326
+ <div class="chat-title">
327
+ <span class="status-dot"></span>
328
+ Sarah Design
329
  </div>
330
+ <div class="header-actions">
331
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with-link">
332
+ Built with anycoder
333
+ </a>
334
  </div>
335
+ </header>
336
+
337
+ <!-- Chat Body -->
338
+ <main id="chat-body">
339
+ <!-- Initial Messages -->
340
+ <div class="message-row received">
341
+ <div class="message-bubble">
342
+ Hey! Did you get a chance to review the new glassmorphism concepts?
343
+ <span class="message-meta">10:23 AM</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
344
  </div>
345
  </div>
346
 
347
+ <div class="message-row sent">
348
+ <div class="message-bubble">
349
+ Yes, I just looked them over. I really like the minimal approach. It feels much cleaner now.
350
+ <span class="message-meta">10:25 AM</span>
 
 
 
 
 
 
 
 
 
 
 
351
  </div>
352
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
353
 
354
+ <div class="message-row received">
355
+ <div class="message-bubble">
356
+ Great! I'll refine the blur effects a bit more and send the final files by tonight.
357
+ <span class="message-meta">10:26 AM</span>
 
 
 
 
 
 
 
358
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
359
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
360
 
361
+ <!-- Typing Indicator (Hidden by default) -->
362
+ <div class="typing-indicator" id="typing-indicator">
363
+ <div class="typing-dots">
364
+ <div class="typing-dot"></div>
365
+ <div class="typing-dot"></div>
366
+ <div class="typing-dot"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
367
  </div>
 
368
  </div>
369
+ </main>
370
 
371
+ <!-- Input Area -->
372
+ <footer class="input-area">
373
+ <div class="input-wrapper">
374
+ <form id="chat-form">
375
+ <input type="text" id="message-input" placeholder="Type a message..." autocomplete="off">
376
+ </form>
377
  </div>
378
+ <button type="button" id="send-btn" class="send-btn" aria-label="Send Message">
379
+ <i class="ph ph-paper-plane-right"></i>
380
+ </button>
381
+ </footer>
382
  </div>
383
 
 
384
  <script>
385
  document.addEventListener('DOMContentLoaded', () => {
386
+ const chatBody = document.getElementById('chat-body');
387
+ const messageInput = document.getElementById('message-input');
388
+ const sendBtn = document.getElementById('send-btn');
389
+ const chatForm = document.getElementById('chat-form');
390
+ const typingIndicator = document.getElementById('typing-indicator');
391
+
392
+ // Helper to get current time
393
  function getCurrentTime() {
394
  const now = new Date();
395
+ return now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
396
  }
397
 
398
+ // Helper to scroll to bottom
399
+ function scrollToBottom() {
400
+ chatBody.scrollTop = chatBody.scrollHeight;
401
+ }
402
 
403
+ // Add message to DOM
404
+ function addMessage(text, type) {
405
+ const rowDiv = document.createElement('div');
406
+ rowDiv.classList.add('message-row', type);
407
+
408
+ const bubbleDiv = document.createElement('div');
409
+ bubbleDiv.classList.add('message-bubble');
410
 
411
+ // Prevent HTML injection but allow line breaks
412
+ bubbleDiv.textContent = text;
413
+
414
+ const metaSpan = document.createElement('span');
415
+ metaSpan.classList.add('message-meta');
416
+ metaSpan.textContent = getCurrentTime();
417
+
418
+ bubbleDiv.appendChild(metaSpan);
419
+ rowDiv.appendChild(bubbleDiv);
 
 
 
 
 
420
 
421
+ // Insert before typing indicator
422
+ chatBody.insertBefore(rowDiv, typingIndicator);
423
+ scrollToBottom();
424
+ }
425
+
426
+ // Handle sending logic
427
+ function handleSend() {
428
+ const text = messageInput.value.trim();
429
+ if (!text) return;
430
+
431
+ // 1. Add user message
432
+ addMessage(text, 'sent');
433
+ messageInput.value = '';
434
+ messageInput.focus();
435
+
436
+ // 2. Simulate bot typing
437
+ showTyping();
438
+
439
+ // 3. Simulate bot response after delay
440
+ setTimeout(() => {
441
+ hideTyping();
442
+ const responses = [
443
+ "That sounds perfect!",
444
+ "I agree, less is definitely more here.",
445
+ "Can you send me the updated specs?",
446
+ "Looks good to me. Let's proceed.",
447
+ "Nice, keep me posted."
448
+ ];
449
+ const randomResponse = responses[Math.floor(Math.random() * responses.length)];
450
+ addMessage(randomResponse, 'received');
451
+ }, 1500 + Math.random() * 1000); // Random delay between 1.5s and 2.5s
452
+ }
453
+
454
+ function showTyping() {
455
+ typingIndicator.style.display = 'block';
456
+ scrollToBottom();
457
  }
458
 
459
+ function hideTyping() {
460
+ typingIndicator.style.display = 'none';
 
 
 
 
 
 
 
 
461
  }
462
 
463
  // Event Listeners
464
+ sendBtn.addEventListener('click', handleSend);
465
+
466
+ chatForm.addEventListener('submit', (e) => {
467
+ e.preventDefault();
468
+ handleSend();
469
  });
470
 
471
+ // Initial scroll to bottom
472
+ scrollToBottom();
473
  });
474
  </script>
475
  </body>