Hugging Face's logo

Spaces:
samirerty
/
anycoder-88b8f2bc
Running

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

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +743 -893
index.html CHANGED
@@ -1,907 +1,757 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
-
4
  <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7
- <title>Glassmorphism Chat</title>
8
- <!-- Importing Remix Icon -->
9
- <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
10
- <!-- Importing Google Fonts -->
11
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
-
13
- <style>
14
- /* --- Design Tokens & Variables --- */
15
- :root {
16
- /* Glassmorphism Palette */
17
- --glass-bg: rgba(255, 255, 255, 0.65);
18
- --glass-border: rgba(255, 255, 255, 0.5);
19
- --glass-highlight: rgba(255, 255, 255, 0.8);
20
- --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
21
-
22
- /* Typography */
23
- --text-main: #2d3436;
24
- --text-secondary: #636e72;
25
- --text-light: #b2bec3;
26
-
27
- /* Accents */
28
- --accent-color: #6c5ce7;
29
- /* Soft Purple */
30
- --accent-gradient: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
31
- --accent-glow: 0 4px 15px rgba(108, 92, 231, 0.3);
32
-
33
- /* Layout */
34
- --sidebar-width: 280px;
35
- --members-width: 260px;
36
- --header-height: 70px;
37
- }
38
-
39
- * {
40
- margin: 0;
41
- padding: 0;
42
- box-sizing: border-box;
43
- -webkit-tap-highlight-color: transparent;
44
- }
45
-
46
- body {
47
- font-family: 'Inter', sans-serif;
48
- height: 100vh;
49
- width: 100vw;
50
- overflow: hidden;
51
- display: flex;
52
- justify-content: center;
53
- align-items: center;
54
- /* Animated Gradient Background */
55
- background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
56
- background-size: 400% 400%;
57
- animation: gradientBG 15s ease infinite;
58
- color: var(--text-main);
59
- }
60
-
61
- @keyframes gradientBG {
62
- 0% { background-position: 0% 50%; }
63
- 50% { background-position: 100% 50%; }
64
- 100% { background-position: 0% 50%; }
65
- }
66
-
67
- /* Ambient Background Blobs for Depth */
68
- .ambient-blob {
69
- position: absolute;
70
- border-radius: 50%;
71
- filter: blur(80px);
72
- z-index: -1;
73
- opacity: 0.6;
74
- animation: float 10s infinite ease-in-out alternate;
75
- }
76
-
77
- .blob-1 {
78
- top: 10%;
79
- left: 10%;
80
- width: 300px;
81
- height: 300px;
82
- background: #a29bfe;
83
- }
84
-
85
- .blob-2 {
86
- bottom: 20%;
87
- right: 10%;
88
- width: 400px;
89
- height: 400px;
90
- background: #74b9ff;
91
- animation-delay: -5s;
92
- }
93
-
94
- @keyframes float {
95
- 0% { transform: translate(0, 0); }
96
- 100% { transform: translate(30px, 50px); }
97
- }
98
-
99
- /* --- Main App Container (The Glass Window) --- */
100
- .app-container {
101
- width: 95vw;
102
- height: 92vh;
103
- max-width: 1600px;
104
- background: var(--glass-bg);
105
- backdrop-filter: blur(16px);
106
- -webkit-backdrop-filter: blur(16px);
107
- border-radius: 24px;
108
- border: 1px solid var(--glass-border);
109
- box-shadow: var(--glass-shadow);
110
- display: flex;
111
- overflow: hidden;
112
- position: relative;
113
- }
114
-
115
- /* --- Scrollbar Styling --- */
116
- ::-webkit-scrollbar {
117
- width: 6px;
118
- }
119
-
120
- ::-webkit-scrollbar-track {
121
- background: transparent;
122
- }
123
-
124
- ::-webkit-scrollbar-thumb {
125
- background: rgba(0, 0, 0, 0.1);
126
- border-radius: 10px;
127
- }
128
-
129
- ::-webkit-scrollbar-thumb:hover {
130
- background: rgba(0, 0, 0, 0.2);
131
- }
132
-
133
- /* --- 1. Sidebar (Navigation) --- */
134
- .sidebar {
135
- width: var(--sidebar-width);
136
- background: rgba(255, 255, 255, 0.3);
137
- border-right: 1px solid var(--glass-border);
138
- display: flex;
139
- flex-direction: column;
140
- padding: 20px;
141
- flex-shrink: 0;
142
- transition: transform 0.3s ease;
143
- }
144
-
145
- .brand {
146
- font-size: 1.25rem;
147
- font-weight: 700;
148
- margin-bottom: 30px;
149
- display: flex;
150
- align-items: center;
151
- gap: 10px;
152
- color: var(--accent-color);
153
- }
154
-
155
- .nav-section-title {
156
- font-size: 0.75rem;
157
- text-transform: uppercase;
158
- letter-spacing: 1px;
159
- color: var(--text-secondary);
160
- margin-bottom: 12px;
161
- font-weight: 600;
162
- }
163
-
164
- .nav-item {
165
- display: flex;
166
- align-items: center;
167
- padding: 12px 16px;
168
- margin-bottom: 8px;
169
- border-radius: 12px;
170
- cursor: pointer;
171
- transition: all 0.2s ease;
172
- color: var(--text-main);
173
- font-weight: 500;
174
- position: relative;
175
- overflow: hidden;
176
- }
177
-
178
- .nav-item i {
179
- margin-right: 12px;
180
- font-size: 1.1rem;
181
- color: var(--text-secondary);
182
- transition: color 0.2s;
183
- }
184
-
185
- .nav-item::before {
186
- content: '';
187
- position: absolute;
188
- left: 0;
189
- top: 0;
190
- height: 100%;
191
- width: 3px;
192
- background: var(--accent-color);
193
- transform: scaleY(0);
194
- transition: transform 0.2s ease;
195
- }
196
-
197
- .nav-item:hover {
198
- background: rgba(255, 255, 255, 0.5);
199
- transform: translateX(4px);
200
- }
201
-
202
- .nav-item.active {
203
- background: var(--accent-gradient);
204
- color: white;
205
- box-shadow: var(--accent-glow);
206
- }
207
-
208
- .nav-item.active i {
209
- color: white;
210
- }
211
-
212
- .nav-item.active::before {
213
- transform: scaleY(1);
214
- }
215
-
216
- .user-mini-profile {
217
- margin-top: auto;
218
- display: flex;
219
- align-items: center;
220
- padding: 12px;
221
- background: rgba(255, 255, 255, 0.4);
222
- border-radius: 16px;
223
- border: 1px solid var(--glass-border);
224
- transition: transform 0.2s;
225
- }
226
-
227
- .user-mini-profile:hover {
228
- transform: translateY(-2px);
229
- }
230
-
231
- .mini-avatar {
232
- width: 40px;
233
- height: 40px;
234
- border-radius: 12px;
235
- background-image: url('https://picsum.photos/seed/user/100/100');
236
- background-size: cover;
237
- margin-right: 12px;
238
- }
239
-
240
- .mini-info h4 {
241
- font-size: 0.9rem;
242
- font-weight: 600;
243
- }
244
-
245
- .mini-info span {
246
- font-size: 0.75rem;
247
- color: var(--text-secondary);
248
- }
249
-
250
- /* --- 2. Chat Area --- */
251
- .chat-area {
252
- flex: 1;
253
- display: flex;
254
- flex-direction: column;
255
- position: relative;
256
- min-width: 0;
257
- }
258
-
259
- /* Header */
260
- .chat-header {
261
- height: var(--header-height);
262
- display: flex;
263
- align-items: center;
264
- justify-content: space-between;
265
- padding: 0 24px;
266
- border-bottom: 1px solid var(--glass-border);
267
- background: rgba(255, 255, 255, 0.2);
268
- backdrop-filter: blur(10px);
269
- flex-shrink: 0;
270
- z-index: 10;
271
- }
272
-
273
- .chat-title {
274
- display: flex;
275
- align-items: center;
276
- gap: 12px;
277
- }
278
-
279
- .chat-title h2 {
280
- font-size: 1.1rem;
281
- font-weight: 600;
282
- }
283
-
284
- .chat-status {
285
- display: flex;
286
- align-items: center;
287
- gap: 6px;
288
- font-size: 0.8rem;
289
- color: var(--text-secondary);
290
- }
291
-
292
- .status-dot {
293
- width: 8px;
294
- height: 8px;
295
- background-color: #00b894;
296
- border-radius: 50%;
297
- box-shadow: 0 0 8px rgba(0, 184, 148, 0.5);
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-secondary);
309
- font-size: 1.2rem;
310
- cursor: pointer;
311
- transition: color 0.2s, transform 0.2s;
312
- display: flex;
313
- align-items: center;
314
- position: relative;
315
- }
316
-
317
- .icon-btn:hover {
318
- color: var(--accent-color);
319
- transform: scale(1.1);
320
- }
321
-
322
- .icon-btn:active {
323
- transform: scale(0.95);
324
- }
325
-
326
- /* Messages */
327
- .messages-container {
328
- flex: 1;
329
- padding: 24px;
330
- overflow-y: auto;
331
- display: flex;
332
- flex-direction: column;
333
- gap: 20px;
334
- scroll-behavior: smooth;
335
- }
336
-
337
- .message {
338
- display: flex;
339
- gap: 16px;
340
- max-width: 85%;
341
- animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
342
- }
343
-
344
- @keyframes popIn {
345
- from { opacity: 0; transform: translateY(10px); }
346
- to { opacity: 1; transform: translateY(0); }
347
- }
348
-
349
- .message.incoming {
350
- align-self: flex-start;
351
- }
352
-
353
- .message.outgoing {
354
- align-self: flex-end;
355
- flex-direction: row-reverse;
356
- }
357
-
358
- .msg-avatar {
359
- width: 36px;
360
- height: 36px;
361
- border-radius: 12px;
362
- background-size: cover;
363
- flex-shrink: 0;
364
- box-shadow: 0 4px 10px rgba(0,0,0,0.1);
365
- }
366
-
367
- .msg-bubble {
368
- padding: 12px 18px;
369
- border-radius: 18px;
370
- font-size: 0.95rem;
371
- line-height: 1.5;
372
- position: relative;
373
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
374
- word-wrap: break-word;
375
- }
376
-
377
- .incoming .msg-bubble {
378
- background: rgba(255, 255, 255, 0.7);
379
- border-top-left-radius: 4px;
380
- border: 1px solid var(--glass-border);
381
- color: var(--text-main);
382
- }
383
-
384
- .outgoing .msg-bubble {
385
- background: var(--accent-gradient);
386
- border-top-right-radius: 4px;
387
- color: white;
388
- box-shadow: var(--accent-glow);
389
- }
390
-
391
- .msg-meta {
392
- font-size: 0.7rem;
393
- margin-top: 6px;
394
- color: var(--text-secondary);
395
- opacity: 0.8;
396
- }
397
-
398
- .incoming .msg-meta {
399
- margin-left: 4px;
400
- }
401
-
402
- .outgoing .msg-meta {
403
- margin-right: 4px;
404
- text-align: right;
405
- color: rgba(255, 255, 255, 0.8);
406
- }
407
-
408
- /* Input Area */
409
- .input-area {
410
- padding: 20px 24px;
411
- background: rgba(255, 255, 255, 0.3);
412
- border-top: 1px solid var(--glass-border);
413
- backdrop-filter: blur(10px);
414
- display: flex;
415
- align-items: flex-end;
416
- gap: 12px;
417
- }
418
-
419
- .input-wrapper {
420
- flex: 1;
421
- background: rgba(255, 255, 255, 0.6);
422
- border: 1px solid var(--glass-border);
423
- border-radius: 20px;
424
- padding: 12px 16px;
425
- display: flex;
426
- align-items: center;
427
- transition: box-shadow 0.2s, background 0.2s;
428
- }
429
-
430
- .input-wrapper:focus-within {
431
- background: rgba(255, 255, 255, 0.9);
432
- box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.2);
433
- }
434
-
435
- .msg-input {
436
- flex: 1;
437
- background: transparent;
438
- border: none;
439
- outline: none;
440
- font-family: inherit;
441
- font-size: 0.95rem;
442
- color: var(--text-main);
443
- resize: none;
444
- max-height: 100px;
445
- overflow-y: auto;
446
- padding: 0;
447
- margin: 0;
448
- line-height: 1.5;
449
- }
450
-
451
- .send-btn {
452
- width: 44px;
453
- height: 44px;
454
- border-radius: 50%;
455
- background: var(--accent-gradient);
456
- border: none;
457
- color: white;
458
- display: flex;
459
- align-items: center;
460
- justify-content: center;
461
- cursor: pointer;
462
- box-shadow: var(--accent-glow);
463
- transition: transform 0.2s, box-shadow 0.2s;
464
- flex-shrink: 0;
465
- }
466
-
467
- .send-btn:hover {
468
- transform: scale(1.05);
469
- box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
470
- }
471
-
472
- .send-btn:active {
473
- transform: scale(0.95);
474
- }
475
-
476
- /* --- 3. Members Sidebar (Right) --- */
477
- .members-sidebar {
478
- width: var(--members-width);
479
- background: rgba(255, 255, 255, 0.2);
480
- border-left: 1px solid var(--glass-border);
481
- padding: 24px;
482
- overflow-y: auto;
483
- flex-shrink: 0;
484
- display: flex;
485
- flex-direction: column;
486
- }
487
-
488
- .member-card {
489
- display: flex;
490
- align-items: center;
491
- padding: 10px;
492
- border-radius: 12px;
493
- margin-bottom: 8px;
494
- cursor: pointer;
495
- transition: background 0.2s;
496
- }
497
-
498
- .member-card:hover {
499
- background: rgba(255, 255, 255, 0.4);
500
- }
501
-
502
- .member-avatar {
503
- width: 32px;
504
- height: 32px;
505
- border-radius: 50%;
506
- background-size: cover;
507
- margin-right: 12px;
508
- position: relative;
509
- }
510
-
511
- .online-indicator {
512
- position: absolute;
513
- bottom: 0;
514
- right: 0;
515
- width: 8px;
516
- height: 8px;
517
- background: #00b894;
518
- border-radius: 50%;
519
- border: 2px solid rgba(255, 255, 255, 0.5);
520
- }
521
-
522
- .member-name {
523
- font-size: 0.9rem;
524
- font-weight: 500;
525
- color: var(--text-main);
526
- }
527
-
528
- /* Mandatory Link */
529
- .anycoder-link {
530
- font-size: 0.8rem;
531
- color: var(--text-secondary);
532
- text-decoration: none;
533
- margin-left: 8px;
534
- opacity: 0.7;
535
- transition: opacity 0.2s;
536
- }
537
-
538
- .anycoder-link:hover {
539
- opacity: 1;
540
- color: var(--accent-color);
541
- }
542
-
543
- /* --- Responsive Design --- */
544
- .mobile-menu-btn {
545
- display: none;
546
- background: none;
547
- border: none;
548
- font-size: 1.5rem;
549
- color: var(--text-main);
550
- cursor: pointer;
551
- }
552
-
553
- @media (max-width: 1024px) {
554
- .members-sidebar {
555
- display: none;
556
- }
557
- }
558
-
559
- @media (max-width: 768px) {
560
- .app-container {
561
- width: 100vw;
562
- height: 100vh;
563
- border-radius: 0;
564
- border: none;
565
- }
566
-
567
- .mobile-menu-btn {
568
- display: block;
569
- }
570
-
571
- .sidebar {
572
- position: absolute;
573
- left: 0;
574
- top: 0;
575
- height: 100%;
576
- z-index: 100;
577
- transform: translateX(-100%);
578
- background: rgba(255, 255, 255, 0.95);
579
- backdrop-filter: blur(20px);
580
- }
581
-
582
- .sidebar.open {
583
- transform: translateX(0);
584
- box-shadow: 10px 0 30px rgba(0, 0, 0, 0.1);
585
- }
586
-
587
- .overlay {
588
- position: absolute;
589
- top: 0;
590
- left: 0;
591
- width: 100%;
592
- height: 100%;
593
- background: rgba(0, 0, 0, 0.2);
594
- z-index: 90;
595
- opacity: 0;
596
- pointer-events: none;
597
- transition: opacity 0.3s;
598
- }
599
-
600
- .overlay.open {
601
- opacity: 1;
602
- pointer-events: auto;
603
- }
604
-
605
- .chat-header {
606
- padding: 0 16px;
607
- }
608
-
609
- .input-area {
610
- padding: 16px;
611
- }
612
- }
613
- </style>
614
- </head>
615
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
616
  <body>
617
 
618
- <!-- Ambient Background Elements -->
619
- <div class="ambient-blob blob-1"></div>
620
- <div class="ambient-blob blob-2"></div>
621
-
622
- <div class="app-container">
623
- <!-- Mobile Overlay -->
624
- <div class="overlay" id="overlay"></div>
625
-
626
- <!-- 1. Sidebar -->
627
- <aside class="sidebar" id="sidebar">
628
- <div class="brand">
629
- <i class="ri-chat-smile-3-fill"></i> GlassChat
630
- </div>
631
-
632
- <div class="nav-section-title">Channels</div>
633
- <div class="nav-item active">
634
- <i class="ri-hashtag"></i> general
635
- </div>
636
- <div class="nav-item">
637
- <i class="ri-hashtag"></i> design-inspiration
638
- </div>
639
- <div class="nav-item">
640
- <i class="ri-hashtag"></i> frontend-dev
641
- </div>
642
- <div class="nav-item">
643
- <i class="ri-hashtag"></i> show-and-tell
644
- </div>
645
-
646
- <div class="nav-section-title" style="margin-top: 24px;">Direct Messages</div>
647
- <div class="nav-item">
648
- <i class="ri-user-smile-line"></i> Sarah Connor
649
- </div>
650
- <div class="nav-item">
651
- <i class="ri-robot-line"></i> DesignBot
652
- </div>
653
-
654
- <div class="user-mini-profile">
655
- <div class="mini-avatar"></div>
656
- <div class="mini-info">
657
- <h4>My User</h4>
658
- <span>#9821</span>
659
- </div>
660
- <i class="ri-settings-3-line" style="margin-left: auto; cursor: pointer; color: var(--text-secondary);"></i>
661
- </div>
662
- </aside>
663
-
664
- <!-- 2. Main Chat Area -->
665
- <main class="chat-area">
666
- <header class="chat-header">
667
- <div class="chat-title">
668
- <button class="mobile-menu-btn" id="menuBtn">
669
- <i class="ri-menu-line"></i>
670
- </button>
671
- <i class="ri-hashtag" style="color: var(--text-secondary); font-size: 1.2rem;"></i>
672
- <h2>general</h2>
673
- <div class="chat-status">
674
- <div class="status-dot"></div>
675
- <span>12 Online</span>
676
- </div>
677
- </div>
678
-
679
- <div class="header-actions">
680
- <button class="icon-btn"><i class="ri-phone-line"></i></button>
681
- <button class="icon-btn"><i class="ri-vidicon-line"></i></button>
682
- <button class="icon-btn"><i class="ri-information-line"></i></button>
683
- <span style="font-size: 0.8rem; color: var(--text-light); align-self: center; margin-left: 8px;">
684
- Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">anycoder</a>
685
- </span>
686
- </div>
687
- </header>
688
-
689
- <div class="messages-container" id="messagesContainer">
690
- <!-- Date Separator -->
691
- <div
692
- style="text-align: center; font-size: 0.75rem; color: var(--text-secondary); margin: 10px 0; position: relative;">
693
- <span style="background: rgba(255,255,255,0.4); padding: 4px 12px; border-radius: 10px; backdrop-filter: blur(4px);">Today</span>
694
- </div>
695
-
696
- <!-- Message 1 -->
697
- <div class="message incoming">
698
- <div class="msg-avatar" style="background-image: url('https://picsum.photos/seed/sarah/50/50');"></div>
699
- <div>
700
- <div class="msg-bubble">
701
- Hey! Have you seen the new glassmorphism trend? It's absolutely beautiful. 😍
702
  </div>
703
- <div class="msg-meta">Sarah Connor • 10:30 AM</div>
704
- </div>
705
- </div>
706
-
707
- <!-- Message 2 -->
708
- <div class="message incoming">
709
- <div class="msg-avatar" style="background-image: url('https://picsum.photos/seed/mike/50/50');"></div>
710
- <div>
711
- <div class="msg-bubble">
712
- Yeah! The blur effects and transparency really add depth to the UI. It feels so modern.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
713
  </div>
714
- <div class="msg-meta">Mike Design • 10:32 AM</div>
715
- </div>
716
- </div>
717
-
718
- <!-- Message 3 (User) -->
719
- <div class="message outgoing">
720
- <div class="msg-avatar" style="background-image: url('https://picsum.photos/seed/user/50/50');"></div>
721
- <div>
722
- <div class="msg-bubble">
723
- I'm actually trying to build a chat interface using that style right now!
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
724
  </div>
725
- <div class="msg-meta">You • 10:33 AM</div>
726
- </div>
727
- </div>
728
- </div>
729
-
730
- <footer class="input-area">
731
- <button class="icon-btn" style="margin-bottom: 8px;"><i class="ri-add-circle-line"></i></button>
732
- <div class="input-wrapper">
733
- <textarea id="messageInput" class="msg-input" placeholder="Message #general" rows="1"></textarea>
734
- <button class="icon-btn" style="margin-bottom: 2px; color: var(--text-light);"><i class="ri-emotion-line"></i></button>
735
- </div>
736
- <button id="sendBtn" class="send-btn">
737
- <i class="ri-send-plane-fill"></i>
738
- </button>
739
- </footer>
740
- </main>
741
-
742
- <!-- 3. Members Sidebar -->
743
- <aside class="members-sidebar">
744
- <div class="nav-section-title">Online — 4</div>
745
-
746
- <div class="member-card">
747
- <div class="member-avatar" style="background-image: url('https://picsum.photos/seed/sarah/50/50');">
748
- <div class="online-indicator"></div>
749
- </div>
750
- <div class="member-name">Sarah Connor</div>
751
- </div>
752
-
753
- <div class="member-card">
754
- <div class="member-avatar" style="background-image: url('https://picsum.photos/seed/mike/50/50');">
755
- <div class="online-indicator"></div>
756
- </div>
757
- <div class="member-name">Mike Design</div>
758
- </div>
759
-
760
- <div class="member-card">
761
- <div class="member-avatar" style="background-image: url('https://picsum.photos/seed/user/50/50');">
762
- <div class="online-indicator"></div>
763
- </div>
764
- <div class="member-name">You</div>
765
- </div>
766
-
767
- <div class="nav-section-title" style="margin-top: 24px;">Offline — 2</div>
768
-
769
- <div class="member-card" style="opacity: 0.6;">
770
- <div class="member-avatar" style="background-image: url('https://picsum.photos/seed/john/50/50');"></div>
771
- <div class="member-name">John Doe</div>
772
- </div>
773
- </aside>
774
- </div>
775
-
776
- <script>
777
- document.addEventListener('DOMContentLoaded', () => {
778
- const messagesContainer = document.getElementById('messagesContainer');
779
- const messageInput = document.getElementById('messageInput');
780
- const sendBtn = document.getElementById('sendBtn');
781
- const menuBtn = document.getElementById('menuBtn');
782
- const sidebar = document.getElementById('sidebar');
783
- const overlay = document.getElementById('overlay');
784
-
785
- // Auto-scroll to bottom
786
- messagesContainer.scrollTop = messagesContainer.scrollHeight;
787
-
788
- // Auto-resize textarea
789
- messageInput.addEventListener('input', function() {
790
- this.style.height = 'auto';
791
- this.style.height = (this.scrollHeight) + 'px';
792
- if(this.value === '') {
793
- this.style.height = 'auto';
794
- }
795
- });
796
-
797
- // Mobile Menu Toggle
798
- function toggleMenu() {
799
- sidebar.classList.toggle('open');
800
- overlay.classList.toggle('open');
801
- }
802
-
803
- menuBtn.addEventListener('click', toggleMenu);
804
- overlay.addEventListener('click', toggleMenu);
805
-
806
- // Send Message Function
807
- function sendMessage() {
808
- const text = messageInput.value.trim();
809
- if (!text) return;
810
-
811
- // Get time
812
- const now = new Date();
813
- const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
814
-
815
- // Create Message HTML (Outgoing)
816
- const msgDiv = document.createElement('div');
817
- msgDiv.classList.add('message', 'outgoing');
818
- msgDiv.innerHTML = `
819
- <div class="msg-avatar" style="background-image: url('https://picsum.photos/seed/user/50/50');"></div>
820
- <div>
821
- <div class="msg-bubble">${escapeHtml(text)}</div>
822
- <div class="msg-meta">You • ${timeString}</div>
823
- </div>
824
- `;
825
-
826
- messagesContainer.appendChild(msgDiv);
827
 
828
- // Clear input
829
- messageInput.value = '';
830
- messageInput.style.height = 'auto';
831
- messagesContainer.scrollTo({ top: messagesContainer.scrollHeight, behavior: 'smooth' });
832
-
833
- // Simulate Reply
834
- simulateReply(text);
835
- }
836
-
837
- function simulateReply(userText) {
838
- // Show "typing" state logic could go here
839
- const replies = [
840
- "That looks great! 👍",
841
- "I love the transparency effect.",
842
- "Can you share the CSS for that?",
843
- "Glassmorphism is definitely the future of UI.",
844
- "Nice! How did you handle the blur?"
845
- ];
846
 
847
- const randomReply = replies[Math.floor(Math.random() * replies.length)];
848
- const now = new Date();
849
- const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
850
-
851
- setTimeout(() => {
852
- const replyDiv = document.createElement('div');
853
- replyDiv.classList.add('message', 'incoming');
854
- replyDiv.innerHTML = `
855
- <div class="msg-avatar" style="background-image: url('https://picsum.photos/seed/sarah/50/50');"></div>
856
- <div>
857
- <div class="msg-bubble">${randomReply}</div>
858
- <div class="msg-meta">Sarah Connor • ${timeString}</div>
859
- </div>
860
- `;
861
- messagesContainer.appendChild(replyDiv);
862
- messagesContainer.scrollTo({ top: messagesContainer.scrollHeight, behavior: 'smooth' });
863
- }, 1500 + Math.random() * 1000);
864
- }
865
-
866
- function escapeHtml(text) {
867
- const map = {
868
- '&': '&amp;',
869
- '<': '&lt;',
870
- '>': '&gt;',
871
- '"': '&quot;',
872
- "'": '&#039;'
873
- };
874
- return text.replace(/[&<>"']/g, function(m) { return map[m]; });
875
- }
876
-
877
- // Event Listeners
878
- sendBtn.addEventListener('click', sendMessage);
879
-
880
- messageInput.addEventListener('keypress', (e) => {
881
- if (e.key === 'Enter' && !e.shiftKey) {
882
- e.preventDefault();
883
- sendMessage();
884
- }
885
- });
886
-
887
- // Simple interaction for Nav items
888
- const navItems = document.querySelectorAll('.nav-item');
889
- navItems.forEach(item => {
890
- item.addEventListener('click', () => {
891
- // Only remove active from channel items, not profile
892
- if(!item.querySelector('.mini-avatar')) {
893
- navItems.forEach(i => i.classList.remove('active'));
894
- item.classList.add('active');
895
-
896
- // On mobile, close menu after selection
897
- if(window.innerWidth <= 768) {
898
- toggleMenu();
899
- }
900
- }
901
  });
902
- });
903
- });
904
- </script>
905
- </body>
906
 
 
 
907
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
 
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
+ <title>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>