Hugging Face's logo

Spaces:
samirerty
/
anycoder-c0ad34ef
Running

App Files Community
samirerty commited on
Commit
67666c0
·
verified ·
1 Parent(s): b768903

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +617 -959
index.html CHANGED
@@ -4,7 +4,7 @@
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>چت روم پیشرفته | گفتگوی واقعی</title>
8
 
9
  <!-- Persian Font: Vazirmatn -->
10
  <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -21,33 +21,36 @@
21
  --primary-dark: #4f46e5;
22
  --secondary: #ec4899;
23
  --background: #0f172a;
24
- --surface: rgba(30, 41, 59, 0.8);
 
25
  --text: #f8fafc;
26
  --text-muted: #94a3b8;
27
  --border: rgba(148, 163, 184, 0.1);
28
  --success: #10b981;
29
  --warning: #f59e0b;
30
- --danger: #ef4444;
31
  --glass: rgba(255, 255, 255, 0.05);
32
  --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
33
- --message-sent: linear-gradient(135deg, #6366f1, #4f46e5);
34
- --message-received: rgba(255, 255, 255, 0.1);
35
  }
36
 
37
  [data-theme="light"] {
38
  --background: #f1f5f9;
39
- --surface: rgba(255, 255, 255, 0.9);
 
40
  --text: #1e293b;
41
  --text-muted: #64748b;
42
  --border: rgba(148, 163, 184, 0.2);
43
  --glass: rgba(255, 255, 255, 0.6);
44
- --message-received: rgba(241, 245, 249, 0.9);
 
45
  }
46
 
47
  * {
48
  margin: 0;
49
  padding: 0;
50
  box-sizing: border-box;
 
51
  }
52
 
53
  html {
@@ -59,7 +62,7 @@
59
  background: var(--background);
60
  color: var(--text);
61
  min-height: 100vh;
62
- overflow-x: hidden;
63
  transition: background 0.3s ease, color 0.3s ease;
64
  }
65
 
@@ -72,13 +75,14 @@
72
  height: 100%;
73
  z-index: -1;
74
  overflow: hidden;
 
75
  }
76
 
77
  .bg-animation .circle {
78
  position: absolute;
79
  border-radius: 50%;
80
  filter: blur(80px);
81
- opacity: 0.4;
82
  animation: float 20s infinite ease-in-out;
83
  }
84
 
@@ -88,6 +92,7 @@
88
  background: var(--primary);
89
  top: -100px;
90
  right: -100px;
 
91
  }
92
 
93
  .circle:nth-child(2) {
@@ -99,29 +104,9 @@
99
  animation-delay: 5s;
100
  }
101
 
102
- .circle:nth-child(3) {
103
- width: 250px;
104
- height: 250px;
105
- background: var(--success);
106
- top: 50%;
107
- left: 50%;
108
- animation-delay: 10s;
109
- }
110
-
111
  @keyframes float {
112
-
113
- 0%,
114
- 100% {
115
- transform: translate(0, 0) scale(1);
116
- }
117
-
118
- 33% {
119
- transform: translate(30px, -50px) scale(1.1);
120
- }
121
-
122
- 66% {
123
- transform: translate(-20px, 20px) scale(0.9);
124
- }
125
  }
126
 
127
  /* Header */
@@ -129,7 +114,7 @@
129
  position: fixed;
130
  top: 0;
131
  width: 100%;
132
- padding: 1rem 2rem;
133
  background: var(--glass);
134
  backdrop-filter: blur(12px);
135
  border-bottom: 1px solid var(--border);
@@ -137,10 +122,11 @@
137
  display: flex;
138
  justify-content: space-between;
139
  align-items: center;
 
140
  }
141
 
142
  .logo {
143
- font-size: 1.5rem;
144
  font-weight: 900;
145
  background: linear-gradient(135deg, var(--primary), var(--secondary));
146
  -webkit-background-clip: text;
@@ -170,10 +156,10 @@
170
  .built-with:hover {
171
  background: var(--primary);
172
  color: white;
 
173
  }
174
 
175
- .theme-toggle,
176
- .sound-toggle {
177
  background: var(--glass);
178
  border: 1px solid var(--border);
179
  color: var(--text);
@@ -187,100 +173,67 @@
187
  transition: all 0.3s ease;
188
  }
189
 
190
- .theme-toggle:hover,
191
- .sound-toggle:hover {
192
  background: var(--primary);
193
- transform: scale(1.1);
194
  }
195
 
196
- /* Auth Container */
 
 
 
 
 
 
 
 
 
197
  .auth-container {
198
- min-height: 100vh;
199
  display: flex;
200
- align-items: center;
201
  justify-content: center;
 
202
  padding: 2rem;
 
 
 
 
 
 
203
  }
204
 
205
  .auth-box {
206
  background: var(--surface);
207
- backdrop-filter: blur(20px);
208
  border: 1px solid var(--border);
209
  border-radius: 2rem;
210
  padding: 3rem;
211
  width: 100%;
212
- max-width: 450px;
213
- box-shadow: var(--shadow);
214
- animation: slideUp 0.5s ease;
215
- }
216
-
217
- @keyframes slideUp {
218
- from {
219
- opacity: 0;
220
- transform: translateY(30px);
221
- }
222
-
223
- to {
224
- opacity: 1;
225
- transform: translateY(0);
226
- }
227
- }
228
-
229
- .auth-header {
230
  text-align: center;
231
- margin-bottom: 2rem;
232
- }
233
-
234
- .auth-header h1 {
235
- font-size: 2rem;
236
- margin-bottom: 0.5rem;
237
- background: linear-gradient(135deg, var(--primary), var(--secondary));
238
- -webkit-background-clip: text;
239
- -webkit-text-fill-color: transparent;
240
  }
241
 
242
- .auth-tabs {
243
- display: flex;
244
- gap: 1rem;
245
  margin-bottom: 2rem;
246
- background: var(--glass);
247
- padding: 0.5rem;
248
- border-radius: 1rem;
249
- }
250
-
251
- .auth-tab {
252
- flex: 1;
253
- padding: 0.75rem;
254
- border: none;
255
- background: transparent;
256
- color: var(--text-muted);
257
- font-family: inherit;
258
- font-weight: 700;
259
- cursor: pointer;
260
- border-radius: 0.5rem;
261
- transition: all 0.3s;
262
- }
263
-
264
- .auth-tab.active {
265
- background: var(--primary);
266
- color: white;
267
  }
268
 
269
  .form-group {
270
  margin-bottom: 1.5rem;
 
271
  }
272
 
273
  .form-group label {
274
  display: block;
275
  margin-bottom: 0.5rem;
276
- color: var(--text);
277
- font-weight: 500;
278
  font-size: 0.9rem;
279
  }
280
 
281
  .form-group input {
282
  width: 100%;
283
- padding: 0.875rem 1rem;
284
  border: 2px solid var(--border);
285
  border-radius: 1rem;
286
  background: var(--glass);
@@ -291,13 +244,13 @@
291
  }
292
 
293
  .form-group input:focus {
294
- outline: none;
295
  border-color: var(--primary);
296
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
297
  }
298
 
299
  .btn {
300
- padding: 1rem 2rem;
 
301
  border-radius: 1rem;
302
  font-family: inherit;
303
  font-size: 1rem;
@@ -305,535 +258,330 @@
305
  cursor: pointer;
306
  transition: all 0.3s ease;
307
  border: none;
308
- display: inline-flex;
309
  align-items: center;
310
  justify-content: center;
311
  gap: 0.5rem;
312
- width: 100%;
313
  }
314
 
315
  .btn-primary {
316
- background: linear-gradient(135deg, var(--primary), var(--primary-dark));
317
  color: white;
318
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
319
  }
320
 
321
  .btn-primary:hover {
 
322
  transform: translateY(-2px);
323
- box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
324
  }
325
 
326
- /* Chat Application */
 
 
 
 
 
 
 
 
 
 
 
 
 
327
  #chat-app {
328
  display: none;
329
- height: 100vh;
330
- padding-top: 70px;
 
 
 
 
331
  }
332
 
333
- .chat-wrapper {
334
  display: grid;
335
  grid-template-columns: 320px 1fr;
336
  height: 100%;
337
- max-width: 1600px;
338
- margin: 0 auto;
339
  }
340
 
341
  /* Sidebar */
342
  .sidebar {
343
  background: var(--surface);
344
- border-left: 1px solid var(--border);
 
 
345
  display: flex;
346
  flex-direction: column;
347
- backdrop-filter: blur(10px);
 
348
  }
349
 
350
  .sidebar-header {
351
  padding: 1.5rem;
352
  border-bottom: 1px solid var(--border);
353
- }
354
-
355
- .user-profile {
356
  display: flex;
357
  align-items: center;
358
  gap: 1rem;
359
- margin-bottom: 1.5rem;
360
  }
361
 
362
- .avatar {
363
  width: 50px;
364
  height: 50px;
365
  border-radius: 50%;
366
- background: linear-gradient(135deg, var(--primary), var(--secondary));
367
  display: flex;
368
  align-items: center;
369
  justify-content: center;
370
- font-size: 1.5rem;
371
- font-weight: 700;
372
  color: white;
373
- position: relative;
374
- }
375
-
376
- .avatar::after {
377
- content: '';
378
- position: absolute;
379
- bottom: 2px;
380
- right: 2px;
381
- width: 12px;
382
- height: 12px;
383
- background: var(--success);
384
- border-radius: 50%;
385
- border: 2px solid var(--surface);
386
  }
387
 
388
- .user-info h3 {
389
- font-size: 1.1rem;
390
- margin-bottom: 0.25rem;
391
  }
392
 
393
- .user-info p {
394
  font-size: 0.8rem;
395
- color: var(--text-muted);
396
- }
397
-
398
- .search-box {
399
- position: relative;
400
- }
401
-
402
- .search-box input {
403
- width: 100%;
404
- padding: 0.75rem 1rem 0.75rem 2.5rem;
405
- border: 1px solid var(--border);
406
- border-radius: 1rem;
407
- background: var(--glass);
408
- color: var(--text);
409
- font-family: inherit;
410
  }
411
 
412
- .search-box i {
413
- position: absolute;
414
- left: 1rem;
415
- top: 50%;
416
- transform: translateY(-50%);
417
- color: var(--text-muted);
 
418
  }
419
 
420
  .rooms-section {
 
421
  flex: 1;
422
  overflow-y: auto;
423
- padding: 1rem;
424
  }
425
 
426
  .section-title {
427
- font-size: 0.75rem;
428
- color: var(--text-muted);
429
  text-transform: uppercase;
430
  letter-spacing: 1px;
 
431
  margin-bottom: 1rem;
432
- display: flex;
433
- justify-content: space-between;
434
- align-items: center;
435
- }
436
-
437
- .add-room-btn {
438
- background: none;
439
- border: none;
440
- color: var(--primary);
441
- cursor: pointer;
442
- font-size: 1rem;
443
- width: 24px;
444
- height: 24px;
445
- border-radius: 50%;
446
- display: flex;
447
- align-items: center;
448
- justify-content: center;
449
- transition: all 0.3s;
450
  }
451
 
452
- .add-room-btn:hover {
453
- background: var(--glass);
454
- }
455
-
456
- .room-item {
457
  padding: 1rem;
458
  margin-bottom: 0.5rem;
459
  border-radius: 1rem;
 
 
 
 
460
  cursor: pointer;
461
- transition: all 0.3s;
462
  display: flex;
463
  align-items: center;
464
- gap: 0.75rem;
465
- border: 1px solid transparent;
466
  position: relative;
467
  }
468
 
469
- .room-item:hover {
470
  background: var(--glass);
471
  }
472
 
473
- .room-item.active {
474
- background: rgba(99, 102, 241, 0.15);
475
- border-color: var(--primary);
476
  }
477
 
478
- .room-item.unread::before {
479
  content: '';
480
  position: absolute;
481
- right: 0.5rem;
482
  top: 50%;
483
  transform: translateY(-50%);
484
- width: 8px;
485
- height: 8px;
486
- background: var(--secondary);
487
- border-radius: 50%;
488
  }
489
 
490
- .room-icon {
491
- width: 45px;
492
- height: 45px;
493
- border-radius: 1rem;
494
  background: var(--glass);
 
 
 
 
 
495
  display: flex;
496
  align-items: center;
497
  justify-content: center;
498
- font-size: 1.25rem;
499
  }
500
 
501
- .room-item.active .room-icon {
502
- background: var(--primary);
503
  color: white;
504
- }
505
-
506
- .room-details {
507
- flex: 1;
508
- }
509
-
510
- .room-name {
511
- font-weight: 700;
512
- margin-bottom: 0.25rem;
513
- display: flex;
514
- justify-content: space-between;
515
- }
516
-
517
- .room-time {
518
- font-size: 0.75rem;
519
- color: var(--text-muted);
520
- }
521
-
522
- .room-preview {
523
- font-size: 0.85rem;
524
- color: var(--text-muted);
525
- white-space: nowrap;
526
- overflow: hidden;
527
- text-overflow: ellipsis;
528
- max-width: 150px;
529
- }
530
-
531
- .online-count {
532
- font-size: 0.75rem;
533
- background: rgba(16, 185, 129, 0.2);
534
- color: var(--success);
535
- padding: 0.25rem 0.5rem;
536
- border-radius: 1rem;
537
  }
538
 
539
  /* Main Chat Area */
540
- .chat-main {
 
 
 
 
541
  display: flex;
542
  flex-direction: column;
543
- background: var(--background);
544
  position: relative;
545
  }
546
 
547
- .chat-header {
548
- padding: 1rem 2rem;
549
- background: var(--surface);
550
  border-bottom: 1px solid var(--border);
551
  display: flex;
552
  justify-content: space-between;
553
  align-items: center;
554
- backdrop-filter: blur(10px);
555
  }
556
 
557
- .chat-header-info {
 
558
  display: flex;
559
  align-items: center;
560
- gap: 1rem;
561
- }
562
-
563
- .chat-header-actions {
564
- display: flex;
565
  gap: 0.5rem;
566
  }
567
 
568
- .icon-btn {
569
- width: 40px;
570
- height: 40px;
571
- border-radius: 50%;
572
- border: none;
573
- background: var(--glass);
574
- color: var(--text);
575
- cursor: pointer;
576
- display: flex;
577
- align-items: center;
578
- justify-content: center;
579
- transition: all 0.3s;
580
- font-size: 1rem;
581
- }
582
-
583
- .icon-btn:hover {
584
- background: var(--primary);
585
- color: white;
586
- transform: scale(1.1);
587
- }
588
-
589
- .chat-messages {
590
  flex: 1;
 
591
  overflow-y: auto;
592
- padding: 2rem;
593
  display: flex;
594
  flex-direction: column;
595
  gap: 1rem;
596
- scroll-behavior: smooth;
597
  }
598
 
 
599
  .message {
600
  max-width: 70%;
601
- padding: 1rem 1.25rem;
602
- border-radius: 1.25rem;
603
  position: relative;
604
- animation: messagePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 
605
  word-wrap: break-word;
 
606
  }
607
 
608
- @keyframes messagePop {
609
- from {
610
- opacity: 0;
611
- transform: scale(0.8) translateY(20px);
612
- }
613
-
614
- to {
615
- opacity: 1;
616
- transform: scale(1) translateY(0);
617
- }
618
  }
619
 
 
620
  .message.sent {
621
- align-self: flex-end;
622
  background: var(--message-sent);
623
  color: white;
624
- border-bottom-left-radius: 0.25rem;
 
625
  }
626
 
627
  .message.received {
628
- align-self: flex-start;
629
  background: var(--message-received);
 
 
630
  border: 1px solid var(--border);
631
- border-bottom-right-radius: 0.25rem;
632
  }
633
 
634
- .message-header {
 
 
 
635
  display: flex;
636
- justify-content: space-between;
637
  align-items: center;
638
- margin-bottom: 0.5rem;
639
- font-size: 0.85rem;
640
  }
641
 
642
  .message-author {
643
  font-weight: 700;
644
- display: flex;
645
- align-items: center;
646
- gap: 0.5rem;
647
  }
648
 
649
- .message-time {
650
- font-size: 0.75rem;
651
- opacity: 0.7;
 
652
  }
653
 
654
- .message-content {
655
- line-height: 1.5;
656
- font-size: 0.95rem;
657
- }
658
-
659
- .message-image {
660
- max-width: 300px;
661
- border-radius: 0.75rem;
662
- margin-top: 0.5rem;
663
- cursor: pointer;
664
- transition: transform 0.3s;
665
- }
666
-
667
- .message-image:hover {
668
- transform: scale(1.05);
669
- }
670
-
671
- .message-status {
672
- font-size: 0.7rem;
673
- margin-top: 0.5rem;
674
- display: flex;
675
- align-items: center;
676
- gap: 0.25rem;
677
- opacity: 0.8;
678
- }
679
-
680
- .message-actions {
681
- position: absolute;
682
- top: -30px;
683
- left: 0;
684
- background: var(--surface);
685
  border: 1px solid var(--border);
686
- border-radius: 0.5rem;
687
- padding: 0.25rem;
688
- display: none;
689
- gap: 0.25rem;
690
- box-shadow: var(--shadow);
691
- }
692
-
693
- .message:hover .message-actions {
694
- display: flex;
695
  }
696
 
697
- .message-action-btn {
698
- background: none;
699
- border: none;
700
- color: var(--text);
701
- cursor: pointer;
702
- padding: 0.25rem 0.5rem;
703
- border-radius: 0.25rem;
704
- font-size: 0.8rem;
705
- transition: all 0.2s;
706
- }
707
-
708
- .message-action-btn:hover {
709
- background: var(--primary);
710
- color: white;
711
- }
712
-
713
- .typing-indicator {
714
- display: none;
715
- align-self: flex-start;
716
- background: var(--surface);
717
  padding: 1rem 1.5rem;
718
- border-radius: 1.25rem;
719
- border-bottom-right-radius: 0.25rem;
720
- border: 1px solid var(--border);
721
- margin-bottom: 1rem;
722
- }
723
-
724
- .typing-indicator.active {
725
- display: flex;
726
- gap: 0.25rem;
727
- }
728
-
729
- .typing-dot {
730
- width: 8px;
731
- height: 8px;
732
- background: var(--text-muted);
733
- border-radius: 50%;
734
- animation: typing 1.4s infinite;
735
- }
736
-
737
- .typing-dot:nth-child(2) {
738
- animation-delay: 0.2s;
739
- }
740
-
741
- .typing-dot:nth-child(3) {
742
- animation-delay: 0.4s;
743
- }
744
-
745
- @keyframes typing {
746
-
747
- 0%,
748
- 60%,
749
- 100% {
750
- transform: translateY(0);
751
- }
752
-
753
- 30% {
754
- transform: translateY(-10px);
755
- }
756
- }
757
-
758
- /* Chat Input */
759
- .chat-input-container {
760
- padding: 1.5rem 2rem;
761
- background: var(--surface);
762
  border-top: 1px solid var(--border);
763
- backdrop-filter: blur(10px);
764
- }
765
-
766
- .chat-input-wrapper {
767
  display: flex;
768
- gap: 1rem;
769
  align-items: center;
770
- background: var(--glass);
771
- padding: 0.5rem;
772
- border-radius: 1.5rem;
773
- border: 1px solid var(--border);
774
- transition: all 0.3s;
775
  }
776
 
777
- .chat-input-wrapper:focus-within {
778
- border-color: var(--primary);
779
- box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
780
  }
781
 
782
- .chat-input {
783
- flex: 1;
784
- border: none;
785
- background: none;
 
 
786
  color: var(--text);
787
  font-family: inherit;
788
- font-size: 1rem;
789
- padding: 0.75rem;
790
- outline: none;
791
- }
792
-
793
- .chat-input::placeholder {
794
- color: var(--text-muted);
795
- }
796
-
797
- .input-actions {
798
- display: flex;
799
- gap: 0.5rem;
800
- padding: 0 0.5rem;
801
- }
802
-
803
- .input-btn {
804
- background: none;
805
- border: none;
806
- color: var(--text-muted);
807
- cursor: pointer;
808
- width: 36px;
809
- height: 36px;
810
- border-radius: 50%;
811
- display: flex;
812
- align-items: center;
813
- justify-content: center;
814
  transition: all 0.3s;
815
- font-size: 1.1rem;
816
  }
817
 
818
- .input-btn:hover {
819
- background: var(--glass);
820
- color: var(--primary);
821
- transform: scale(1.1);
822
  }
823
 
824
  .send-btn {
 
 
 
825
  background: var(--primary);
826
  color: white;
827
  border: none;
828
- width: 40px;
829
- height: 40px;
830
- border-radius: 50%;
831
  cursor: pointer;
832
  display: flex;
833
  align-items: center;
834
  justify-content: center;
835
  transition: all 0.3s;
836
- font-size: 1.1rem;
837
  }
838
 
839
  .send-btn:hover {
@@ -841,313 +589,140 @@
841
  transform: scale(1.1) rotate(-10deg);
842
  }
843
 
844
- .send-btn:disabled {
845
- opacity: 0.5;
846
- cursor: not-allowed;
847
- transform: none;
848
  }
849
 
850
- /* Emoji Picker */
851
- .emoji-picker {
 
 
852
  position: absolute;
853
- bottom: 100%;
854
- left: 2rem;
855
- background: var(--surface);
856
- border: 1px solid var(--border);
857
- border-radius: 1rem;
858
- padding: 1rem;
859
- display: none;
860
- grid-template-columns: repeat(8, 1fr);
861
- gap: 0.5rem;
862
- box-shadow: var(--shadow);
863
- margin-bottom: 0.5rem;
864
- max-height: 200px;
865
- overflow-y: auto;
866
  }
867
 
868
- .emoji-picker.active {
869
- display: grid;
 
 
 
 
 
 
 
 
870
  }
871
 
872
- .emoji-item {
873
- background: none;
874
- border: none;
875
- font-size: 1.5rem;
876
- cursor: pointer;
877
- padding: 0.25rem;
878
- border-radius: 0.5rem;
879
- transition: transform 0.2s;
880
  }
881
 
882
- .emoji-item:hover {
883
- transform: scale(1.2);
884
- background: var(--glass);
885
- }
886
 
887
- /* Reply Preview */
888
- .reply-preview {
889
- background: var(--glass);
890
- padding: 0.75rem 1rem;
891
- border-radius: 0.75rem;
892
- margin-bottom: 0.5rem;
893
- border-right: 3px solid var(--primary);
894
- display: none;
895
- align-items: center;
896
- justify-content: space-between;
897
  }
898
 
899
- .reply-preview.active {
 
 
 
 
 
900
  display: flex;
 
 
901
  }
902
 
903
- .reply-content {
904
- font-size: 0.9rem;
905
- color: var(--text-muted);
906
- }
907
-
908
- .close-reply {
909
- background: none;
910
- border: none;
911
- color: var(--text-muted);
912
- cursor: pointer;
913
- }
914
-
915
- /* Notifications */
916
- .notification {
917
- position: fixed;
918
- top: 100px;
919
- left: 2rem;
920
- background: var(--surface);
921
  border: 1px solid var(--border);
922
  padding: 1rem 1.5rem;
923
  border-radius: 1rem;
924
- box-shadow: var(--shadow);
925
  display: flex;
926
  align-items: center;
927
- gap: 1rem;
928
- transform: translateX(-150%);
929
- transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
930
- z-index: 3000;
931
- backdrop-filter: blur(10px);
932
- }
933
-
934
- .notification.show {
935
- transform: translateX(0);
936
- }
937
-
938
- .notification-icon {
939
- width: 40px;
940
- height: 40px;
941
- border-radius: 50%;
942
- background: var(--primary);
943
- color: white;
944
- display: flex;
945
- align-items: center;
946
- justify-content: center;
947
  }
948
 
949
- /* Mobile Menu */
950
- .mobile-menu-btn {
951
- display: none;
952
- background: none;
953
- border: none;
954
- color: var(--text);
955
- font-size: 1.5rem;
956
- cursor: pointer;
957
- margin-left: 1rem;
958
  }
959
 
960
  /* Responsive */
961
- @media (max-width: 968px) {
962
- .chat-wrapper {
963
  grid-template-columns: 1fr;
964
  }
965
-
966
  .sidebar {
967
- position: fixed;
968
- right: -100%;
969
- top: 70px;
970
- height: calc(100vh - 70px);
971
- width: 300px;
972
- z-index: 999;
973
- transition: right 0.3s ease;
974
- box-shadow: var(--shadow);
975
- }
976
-
977
- .sidebar.open {
978
  right: 0;
 
 
 
 
 
979
  }
980
 
981
- .mobile-menu-btn {
982
- display: block;
983
- }
984
-
985
- .message {
986
- max-width: 85%;
987
  }
988
- }
989
 
990
- @media (max-width: 640px) {
991
- .chat-messages {
992
- padding: 1rem;
 
 
 
 
 
 
 
993
  }
994
 
995
- .chat-header {
996
- padding: 1rem;
997
- }
998
-
999
- .chat-input-container {
1000
- padding: 1rem;
1001
  }
1002
- }
1003
-
1004
- /* Scrollbar */
1005
- ::-webkit-scrollbar {
1006
- width: 6px;
1007
- height: 6px;
1008
- }
1009
-
1010
- ::-webkit-scrollbar-track {
1011
- background: transparent;
1012
- }
1013
-
1014
- ::-webkit-scrollbar-thumb {
1015
- background: var(--border);
1016
- border-radius: 3px;
1017
- }
1018
 
1019
- ::-webkit-scrollbar-thumb:hover {
1020
- background: var(--primary);
1021
- }
1022
-
1023
- /* System Message */
1024
- .system-message {
1025
- text-align: center;
1026
- color: var(--text-muted);
1027
- font-size: 0.85rem;
1028
- margin: 1rem 0;
1029
- display: flex;
1030
- align-items: center;
1031
- justify-content: center;
1032
- gap: 0.5rem;
1033
- }
1034
-
1035
- .system-message::before,
1036
- .system-message::after {
1037
- content: '';
1038
- flex: 1;
1039
- height: 1px;
1040
- background: var(--border);
1041
- max-width: 100px;
1042
- }
1043
-
1044
- /* Image Modal */
1045
- .image-modal {
1046
- display: none;
1047
- position: fixed;
1048
- top: 0;
1049
- left: 0;
1050
- width: 100%;
1051
- height: 100%;
1052
- background: rgba(0, 0, 0, 0.9);
1053
- z-index: 4000;
1054
- justify-content: center;
1055
- align-items: center;
1056
- cursor: zoom-out;
1057
- }
1058
-
1059
- .image-modal.active {
1060
- display: flex;
1061
- }
1062
-
1063
- .image-modal img {
1064
- max-width: 90%;
1065
- max-height: 90%;
1066
- border-radius: 0.5rem;
1067
- animation: zoomIn 0.3s;
1068
- }
1069
-
1070
- @keyframes zoomIn {
1071
- from {
1072
- transform: scale(0.5);
1073
- opacity: 0;
1074
  }
1075
 
1076
- to {
1077
- transform: scale(1);
1078
- opacity: 1;
1079
  }
1080
  }
1081
 
1082
- /* Edit Modal */
1083
- .edit-modal {
1084
  display: none;
1085
- position: fixed;
1086
- top: 0;
1087
- left: 0;
1088
- width: 100%;
1089
- height: 100%;
1090
- background: rgba(0, 0, 0, 0.5);
1091
- z-index: 4000;
1092
- justify-content: center;
1093
- align-items: center;
1094
- backdrop-filter: blur(5px);
1095
- }
1096
-
1097
- .edit-modal.active {
1098
- display: flex;
1099
- }
1100
-
1101
- .edit-box {
1102
- background: var(--surface);
1103
- padding: 2rem;
1104
- border-radius: 1rem;
1105
- border: 1px solid var(--border);
1106
- width: 90%;
1107
- max-width: 500px;
1108
- }
1109
-
1110
- .edit-box h3 {
1111
- margin-bottom: 1rem;
1112
- }
1113
-
1114
- .edit-box textarea {
1115
- width: 100%;
1116
- padding: 1rem;
1117
- border: 1px solid var(--border);
1118
- border-radius: 0.5rem;
1119
- background: var(--glass);
1120
- color: var(--text);
1121
- font-family: inherit;
1122
- resize: vertical;
1123
- min-height: 100px;
1124
- margin-bottom: 1rem;
1125
- }
1126
-
1127
- .edit-actions {
1128
- display: flex;
1129
- gap: 1rem;
1130
- }
1131
-
1132
- .edit-actions button {
1133
- flex: 1;
1134
- padding: 0.75rem;
1135
  border: none;
1136
- border-radius: 0.5rem;
 
1137
  cursor: pointer;
1138
- font-family: inherit;
1139
- font-weight: 700;
1140
  }
1141
 
1142
- .btn-save {
1143
- background: var(--primary);
1144
- color: white;
1145
- }
 
1146
 
1147
- .btn-cancel {
1148
- background: var(--glass);
1149
- color: var(--text);
1150
- }
1151
  </style>
1152
  </head>
1153
 
@@ -1156,310 +731,393 @@
1156
  <div class="bg-animation">
1157
  <div class="circle"></div>
1158
  <div class="circle"></div>
1159
- <div class="circle"></div>
1160
  </div>
1161
 
1162
  <!-- Header -->
1163
- <header id="main-header" style="display: none;">
1164
  <div class="logo">
1165
  <i class="fas fa-comments"></i>
1166
- <span>چت روم پیشرفته</span>
1167
  </div>
1168
  <div class="header-actions">
1169
  <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
1170
  <i class="fas fa-code"></i> Built with anycoder
1171
  </a>
1172
- <button class="sound-toggle" onclick="toggleSound()" title="صدا">
1173
- <i class="fas fa-volume-up" id="sound-icon"></i>
1174
- </button>
1175
  <button class="theme-toggle" onclick="toggleTheme()" title="تغییر تم">
1176
- <i class="fas fa-moon" id="theme-icon"></i>
1177
  </button>
1178
  </div>
1179
  </header>
1180
 
1181
- <!-- Auth Screen -->
1182
- <div class="auth-container" id="auth-screen">
1183
- <div class="auth-box">
1184
- <div class="auth-header">
1185
- <h1>👋 خوش آمدید</h1>
1186
- <p style="color: var(--text-muted);">وارد حساب کاربری خود شوید یا ثبت‌نام کنید</p>
1187
- </div>
1188
-
1189
- <div class="auth-tabs">
1190
- <button class="auth-tab active" onclick="switchAuthTab('login')">ورود</button>
1191
- <button class="auth-tab" onclick="switchAuthTab('register')">ثبت‌نام</button>
1192
- </div>
1193
-
1194
- <form id="login-form" onsubmit="handleAuth(event, 'login')">
1195
- <div class="form-group">
1196
- <label>نام کاربری</label>
1197
- <input type="text" id="login-username" placeholder="نام خود را وارد کنید" required>
1198
- </div>
1199
- <div class="form-group">
1200
- <label>رمز عبور</label>
1201
- <input type="password" placeholder="••••••••" required>
1202
- </div>
1203
- <button type="submit" class="btn btn-primary">
1204
- <i class="fas fa-sign-in-alt"></i>
1205
- ورود به چت
1206
- </button>
1207
- </form>
1208
-
1209
- <form id="register-form" style="display: none;" onsubmit="handleAuth(event, 'register')">
1210
- <div class="form-group">
1211
- <label>نام کامل</label>
1212
- <input type="text" id="reg-name" placeholder="نام و نام خانوادگی" required>
1213
- </div>
1214
- <div class="form-group">
1215
- <label>نام کاربری</label>
1216
- <input type="text" id="reg-username" placeholder="یک نام کاربری انتخاب کنید" required>
1217
- </div>
1218
- <div class="form-group">
1219
- <label>رمز عبور</label>
1220
- <input type="password" placeholder="حداقل ۶ کاراکتر" required minlength="6">
1221
  </div>
1222
- <button type="submit" class="btn btn-primary">
1223
- <i class="fas fa-user-plus"></i>
1224
- ایجاد حساب
1225
- </button>
1226
- </form>
1227
  </div>
1228
- </div>
1229
 
1230
- <!-- Chat Application -->
1231
- <div id="chat-app">
1232
- <div class="chat-wrapper">
1233
- <!-- Sidebar -->
1234
- <aside class="sidebar" id="sidebar">
1235
- <div class="sidebar-header">
1236
- <div class="user-profile">
1237
- <div class="avatar" id="user-avatar">👤</div>
 
 
 
1238
  <div class="user-info">
1239
- <h3 id="user-display-name">کاربر</h3>
1240
- <p>آنلاین</p>
1241
  </div>
1242
  </div>
1243
- <div class="search-box">
1244
- <i class="fas fa-search"></i>
1245
- <input type="text" placeholder="جستجو در گفتگوها..." onkeyup="searchMessages(this.value)">
1246
- </div>
1247
- </div>
1248
 
1249
- <div class="rooms-section">
1250
- <div class="section-title">
1251
- <span>گفتگوها</span>
1252
- <button class="add-room-btn" onclick="createRoom()" title="گفتگوی جدید">
1253
- <i class="fas fa-plus"></i>
1254
- </button>
1255
  </div>
1256
- <div id="rooms-list"></div>
1257
- </div>
1258
- </aside>
1259
-
1260
- <!-- Main Chat -->
1261
- <main class="chat-main">
1262
- <div class="chat-header">
1263
- <div class="chat-header-info">
1264
- <button class="mobile-menu-btn" onclick="toggleSidebar()">
1265
- <i class="fas fa-bars"></i>
1266
- </button>
1267
- <div class="room-icon" id="header-icon"
1268
- style="width: 45px; height: 45px; border-radius: 1rem; background: var(--glass); display: flex; align-items: center; justify-content: center; font-size: 1.25rem;">
1269
- 💬
 
 
 
 
1270
  </div>
1271
- <div>
1272
- <h3 id="chat-title">انتخاب گفتگو</h3>
1273
- <p style="font-size: 0.85rem; color: var(--text-muted);">
1274
- <span id="typing-status" style="display: none; color: var(--primary);">در حال تایپ...</span>
1275
- <span id="online-status"><span id="online-count">0</span> عضو آنلاین</span>
1276
- </p>
1277
  </div>
1278
  </div>
1279
- <div class="chat-header-actions">
1280
- <button class="icon-btn" onclick="clearChat()" title="پاک کردن تاریخچه">
1281
- <i class="fas fa-trash"></i>
1282
- </button>
1283
- <button class="icon-btn" onclick="logout()" title="خروج">
1284
- <i class="fas fa-sign-out-alt"></i>
1285
- </button>
1286
- </div>
1287
- </div>
1288
-
1289
- <div class="chat-messages" id="chat-messages">
1290
- <div class="system-message">یک گفتگو را انتخاب کنید</div>
1291
- </div>
1292
 
1293
- <div class="typing-indicator" id="typing-indicator">
1294
- <div class="typing-dot"></div>
1295
- <div class="typing-dot"></div>
1296
- <div class="typing-dot"></div>
1297
- </div>
1298
-
1299
- <div class="chat-input-container" style="position: relative;">
1300
- <div class="emoji-picker" id="emoji-picker"></div>
1301
 
1302
- <div class="reply-preview" id="reply-preview">
1303
- <div>
1304
- <div style="font-size: 0.8rem; color: var(--primary); margin-bottom: 0.25rem;">پاسخ به:</div>
1305
- <div class="reply-content" id="reply-content"></div>
1306
  </div>
1307
- <button class="close-reply" onclick="cancelReply()">
1308
- <i class="fas fa-times"></i>
1309
- </button>
1310
  </div>
1311
 
1312
- <div class="chat-input-wrapper">
1313
- <input type="file" id="file-input" accept="image/*" style="display: none;" onchange="handleImageUpload(event)">
1314
-
1315
- <div class="input-actions">
1316
- <button class="input-btn" onclick="document.getElementById('file-input').click()" title="افزودن تصویر">
1317
- <i class="fas fa-image"></i>
1318
- </button>
1319
- <button class="input-btn" onclick="toggleEmojiPicker()" title="اموجی">
1320
- <i class="fas fa-smile"></i>
1321
- </button>
1322
  </div>
1323
-
1324
- <input type="text" class="chat-input" id="message-input" placeholder="پیام خود را بنویسید..." onkeypress="handleKeyPress(event)" oninput="handleTyping()">
1325
-
1326
- <button class="send-btn" id="send-btn" onclick="sendMessage()">
1327
  <i class="fas fa-paper-plane"></i>
1328
  </button>
1329
  </div>
1330
- </div>
1331
- </main>
1332
- </div>
1333
- </div>
1334
-
1335
- <!-- Notification -->
1336
- <div class="notification" id="notification">
1337
- <div class="notification-icon">
1338
- <i class="fas fa-bell"></i>
1339
- </div>
1340
- <div>
1341
- <div style="font-weight: 700; margin-bottom: 0.25rem;" id="notif-title">اعلان</div>
1342
- <div style="font-size: 0.9rem; color: var(--text-muted);" id="notif-body">متن اعلان</div>
1343
  </div>
1344
  </div>
1345
 
1346
- <!-- Image Modal -->
1347
- <div class="image-modal" id="image-modal" onclick="closeImageModal()">
1348
- <img src="" alt="تصویر بزرگ" id="modal-image">
1349
- </div>
1350
 
1351
- <!-- Edit Modal -->
1352
- <div class="edit-modal" id="edit-modal">
1353
- <div class="edit-box">
1354
- <h3>ویرایش پیام</h3>
1355
- <textarea id="edit-textarea"></textarea>
1356
- <div class="edit-actions">
1357
- <button class="btn-save" onclick="saveEdit()">ذخیره</button>
1358
- <button class="btn-cancel" onclick="closeEditModal()">انصراف</button>
1359
- </div>
1360
- </div>
1361
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
1362
 
1363
  <script>
1364
- // State Management
1365
- const state = {
1366
- currentUser: null,
1367
- currentRoom: null,
1368
- rooms: [],
1369
- messages: {},
1370
- soundEnabled: true,
1371
- theme: localStorage.getItem('theme') || 'dark',
1372
- typingTimeout: null,
1373
- replyTo: null,
1374
- editingMessageId: null,
1375
- simulatedUsers: [
1376
- { name: 'علی', avatar: '👨‍💻', color: '#6366f1' },
1377
- { name: 'مریم', avatar: '👩‍🎨', color: '#ec4899' },
1378
- { name: 'حسن', avatar: '👨‍🔬', color: '#10b981' },
1379
- { name: 'سارا', avatar: '👩‍💼', color: '#f59e0b' }
1380
- ],
1381
- autoResponses: [
1382
- 'جالب بود! 👍',
1383
- 'متوجه شدم',
1384
- 'حتماً',
1385
- 'می‌تونی بیشتر توضیح بدی؟',
1386
- 'خیلی عالیه! 🎉',
1387
- 'باشه، فهمیدم',
1388
- 'جالب می‌گه 😄',
1389
- 'کاملاً موافقم',
1390
- 'بذار فکر کنم...',
1391
- 'واقعاً؟! 😮',
1392
- 'خیلی خوبه',
1393
- 'ممنون که گفتی'
1394
  ]
1395
  };
1396
 
1397
- // Initialize
1398
- document.addEventListener('DOMContentLoaded', () => {
1399
- initTheme();
1400
- initEmojiPicker();
1401
- loadFromStorage();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1402
 
1403
- if (state.currentUser) {
1404
- showChat();
 
 
 
 
 
 
 
1405
  }
1406
- });
1407
 
1408
- // Theme Management
1409
- function initTheme() {
1410
- document.documentElement.setAttribute('data-theme', state.theme);
1411
- updateThemeIcon();
 
1412
  }
1413
 
1414
- function toggleTheme() {
1415
- state.theme = state.theme === 'light' ? 'dark' : 'light';
1416
- document.documentElement.setAttribute('data-theme', state.theme);
1417
- localStorage.setItem('theme', state.theme);
1418
- updateThemeIcon();
 
1419
  }
1420
 
1421
- function updateThemeIcon() {
1422
- const icon = document.getElementById('theme-icon');
1423
- if (icon) {
1424
- icon.className = state.theme === 'light' ? 'fas fa-sun' : 'fas fa-moon';
1425
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1426
  }
1427
 
1428
- function toggleSound() {
1429
- state.soundEnabled = !state.soundEnabled;
1430
- const icon = document.getElementById('sound-icon');
1431
- icon.className = state.soundEnabled ? 'fas fa-volume-up' : 'fas fa-volume-mute';
1432
- icon.style.color = state.soundEnabled ? 'var(--text)' : 'var(--text-muted)';
 
 
 
 
 
1433
  }
1434
 
1435
- // Sound Effects
1436
- function playSound(type) {
1437
- if (!state.soundEnabled) return;
1438
 
1439
- const audioContext = new (window.AudioContext || window.webkitAudioContext)();
1440
- const oscillator = audioContext.createOscillator();
1441
- const gainNode = audioContext.createGain();
1442
 
1443
- oscillator.connect(gainNode);
1444
- gainNode.connect(audioContext.destination);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1445
 
1446
- if (type === 'send') {
1447
- oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
1448
- oscillator.frequency.exponentialRampToValueAtTime(400, audioContext.currentTime + 0.1);
1449
- gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
1450
- gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
1451
- oscillator.start(audioContext.currentTime);
1452
- oscillator.stop(audioContext.currentTime + 0.1);
1453
- } else if (type === 'receive') {
1454
- oscillator.frequency.setValueAtTime(400, audioContext.currentTime);
1455
- oscillator.frequency.exponentialRampToValueAtTime(600, audioContext.currentTime + 0.1);
1456
- gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
1457
- gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
1458
- oscillator.start(audioContext.currentTime);
1459
- oscillator.stop(audioContext.currentTime + 0.1);
 
 
 
 
 
 
 
 
 
 
 
1460
  }
1461
  }
1462
 
1463
- // Auth Functions
1464
- function switchAuthTab(tab) {
1465
- document.querySelectorAll('.auth-tab').forEach(t => t.classList.remove
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>چت روم پیشرفته | ارتباط واقعی</title>
8
 
9
  <!-- Persian Font: Vazirmatn -->
10
  <link rel="preconnect" href="https://fonts.googleapis.com">
 
21
  --primary-dark: #4f46e5;
22
  --secondary: #ec4899;
23
  --background: #0f172a;
24
+ --surface: rgba(30, 41, 59, 0.7);
25
+ --surface-solid: #1e293b;
26
  --text: #f8fafc;
27
  --text-muted: #94a3b8;
28
  --border: rgba(148, 163, 184, 0.1);
29
  --success: #10b981;
30
  --warning: #f59e0b;
 
31
  --glass: rgba(255, 255, 255, 0.05);
32
  --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
33
+ --message-sent: linear-gradient(135deg, var(--primary), var(--primary-dark));
34
+ --message-received: #334155;
35
  }
36
 
37
  [data-theme="light"] {
38
  --background: #f1f5f9;
39
+ --surface: rgba(255, 255, 255, 0.8);
40
+ --surface-solid: #ffffff;
41
  --text: #1e293b;
42
  --text-muted: #64748b;
43
  --border: rgba(148, 163, 184, 0.2);
44
  --glass: rgba(255, 255, 255, 0.6);
45
+ --message-received: #e2e8f0;
46
+ --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
47
  }
48
 
49
  * {
50
  margin: 0;
51
  padding: 0;
52
  box-sizing: border-box;
53
+ outline: none;
54
  }
55
 
56
  html {
 
62
  background: var(--background);
63
  color: var(--text);
64
  min-height: 100vh;
65
+ overflow: hidden; /* App-like feel */
66
  transition: background 0.3s ease, color 0.3s ease;
67
  }
68
 
 
75
  height: 100%;
76
  z-index: -1;
77
  overflow: hidden;
78
+ pointer-events: none;
79
  }
80
 
81
  .bg-animation .circle {
82
  position: absolute;
83
  border-radius: 50%;
84
  filter: blur(80px);
85
+ opacity: 0.3;
86
  animation: float 20s infinite ease-in-out;
87
  }
88
 
 
92
  background: var(--primary);
93
  top: -100px;
94
  right: -100px;
95
+ animation-delay: 0s;
96
  }
97
 
98
  .circle:nth-child(2) {
 
104
  animation-delay: 5s;
105
  }
106
 
 
 
 
 
 
 
 
 
 
107
  @keyframes float {
108
+ 0%, 100% { transform: translate(0, 0) scale(1); }
109
+ 50% { transform: translate(-30px, 30px) scale(1.1); }
 
 
 
 
 
 
 
 
 
 
 
110
  }
111
 
112
  /* Header */
 
114
  position: fixed;
115
  top: 0;
116
  width: 100%;
117
+ padding: 0.8rem 2rem;
118
  background: var(--glass);
119
  backdrop-filter: blur(12px);
120
  border-bottom: 1px solid var(--border);
 
122
  display: flex;
123
  justify-content: space-between;
124
  align-items: center;
125
+ height: 70px;
126
  }
127
 
128
  .logo {
129
+ font-size: 1.4rem;
130
  font-weight: 900;
131
  background: linear-gradient(135deg, var(--primary), var(--secondary));
132
  -webkit-background-clip: text;
 
156
  .built-with:hover {
157
  background: var(--primary);
158
  color: white;
159
+ transform: translateY(-2px);
160
  }
161
 
162
+ .theme-toggle {
 
163
  background: var(--glass);
164
  border: 1px solid var(--border);
165
  color: var(--text);
 
173
  transition: all 0.3s ease;
174
  }
175
 
176
+ .theme-toggle:hover {
177
+ transform: rotate(180deg);
178
  background: var(--primary);
 
179
  }
180
 
181
+ /* Main Container */
182
+ .container {
183
+ width: 100%;
184
+ height: 100vh;
185
+ padding-top: 70px;
186
+ display: flex;
187
+ flex-direction: column;
188
+ }
189
+
190
+ /* Auth Screens */
191
  .auth-container {
192
+ flex: 1;
193
  display: flex;
 
194
  justify-content: center;
195
+ align-items: center;
196
  padding: 2rem;
197
+ animation: fadeIn 0.5s ease;
198
+ }
199
+
200
+ @keyframes fadeIn {
201
+ from { opacity: 0; transform: translateY(20px); }
202
+ to { opacity: 1; transform: translateY(0); }
203
  }
204
 
205
  .auth-box {
206
  background: var(--surface);
207
+ backdrop-filter: blur(16px);
208
  border: 1px solid var(--border);
209
  border-radius: 2rem;
210
  padding: 3rem;
211
  width: 100%;
212
+ max-width: 420px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
213
  text-align: center;
214
+ box-shadow: var(--shadow);
 
 
 
 
 
 
 
 
215
  }
216
 
217
+ .auth-box h2 {
 
 
218
  margin-bottom: 2rem;
219
+ font-size: 1.8rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
220
  }
221
 
222
  .form-group {
223
  margin-bottom: 1.5rem;
224
+ text-align: right;
225
  }
226
 
227
  .form-group label {
228
  display: block;
229
  margin-bottom: 0.5rem;
230
+ color: var(--text-muted);
 
231
  font-size: 0.9rem;
232
  }
233
 
234
  .form-group input {
235
  width: 100%;
236
+ padding: 0.9rem 1rem;
237
  border: 2px solid var(--border);
238
  border-radius: 1rem;
239
  background: var(--glass);
 
244
  }
245
 
246
  .form-group input:focus {
 
247
  border-color: var(--primary);
248
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
249
  }
250
 
251
  .btn {
252
+ width: 100%;
253
+ padding: 1rem;
254
  border-radius: 1rem;
255
  font-family: inherit;
256
  font-size: 1rem;
 
258
  cursor: pointer;
259
  transition: all 0.3s ease;
260
  border: none;
261
+ display: flex;
262
  align-items: center;
263
  justify-content: center;
264
  gap: 0.5rem;
 
265
  }
266
 
267
  .btn-primary {
268
+ background: var(--primary);
269
  color: white;
270
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
271
  }
272
 
273
  .btn-primary:hover {
274
+ background: var(--primary-dark);
275
  transform: translateY(-2px);
 
276
  }
277
 
278
+ .switch-auth {
279
+ margin-top: 1.5rem;
280
+ font-size: 0.9rem;
281
+ color: var(--text-muted);
282
+ }
283
+
284
+ .switch-auth a {
285
+ color: var(--primary);
286
+ text-decoration: none;
287
+ font-weight: 700;
288
+ cursor: pointer;
289
+ }
290
+
291
+ /* Chat Layout */
292
  #chat-app {
293
  display: none;
294
+ width: 100%;
295
+ height: calc(100vh - 70px);
296
+ max-width: 1600px;
297
+ margin: 0 auto;
298
+ padding: 1rem;
299
+ gap: 1rem;
300
  }
301
 
302
+ .chat-layout {
303
  display: grid;
304
  grid-template-columns: 320px 1fr;
305
  height: 100%;
306
+ gap: 1rem;
 
307
  }
308
 
309
  /* Sidebar */
310
  .sidebar {
311
  background: var(--surface);
312
+ backdrop-filter: blur(16px);
313
+ border: 1px solid var(--border);
314
+ border-radius: 1.5rem;
315
  display: flex;
316
  flex-direction: column;
317
+ overflow: hidden;
318
+ transition: transform 0.3s ease;
319
  }
320
 
321
  .sidebar-header {
322
  padding: 1.5rem;
323
  border-bottom: 1px solid var(--border);
 
 
 
324
  display: flex;
325
  align-items: center;
326
  gap: 1rem;
 
327
  }
328
 
329
+ .my-avatar {
330
  width: 50px;
331
  height: 50px;
332
  border-radius: 50%;
333
+ background: linear-gradient(135deg, var(--secondary), var(--primary));
334
  display: flex;
335
  align-items: center;
336
  justify-content: center;
337
+ font-size: 1.2rem;
338
+ font-weight: bold;
339
  color: white;
340
+ flex-shrink: 0;
 
 
 
 
 
 
 
 
 
 
 
 
341
  }
342
 
343
+ .user-info h4 {
344
+ font-size: 1rem;
345
+ margin-bottom: 0.2rem;
346
  }
347
 
348
+ .user-status {
349
  font-size: 0.8rem;
350
+ color: var(--success);
351
+ display: flex;
352
+ align-items: center;
353
+ gap: 0.3rem;
 
 
 
 
 
 
 
 
 
 
 
354
  }
355
 
356
+ .user-status::before {
357
+ content: '';
358
+ width: 8px;
359
+ height: 8px;
360
+ background: var(--success);
361
+ border-radius: 50%;
362
+ display: inline-block;
363
  }
364
 
365
  .rooms-section {
366
+ padding: 1rem;
367
  flex: 1;
368
  overflow-y: auto;
 
369
  }
370
 
371
  .section-title {
372
+ font-size: 0.8rem;
 
373
  text-transform: uppercase;
374
  letter-spacing: 1px;
375
+ color: var(--text-muted);
376
  margin-bottom: 1rem;
377
+ padding-right: 0.5rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
378
  }
379
 
380
+ .room-btn {
381
+ width: 100%;
 
 
 
382
  padding: 1rem;
383
  margin-bottom: 0.5rem;
384
  border-radius: 1rem;
385
+ background: transparent;
386
+ border: none;
387
+ color: var(--text);
388
+ text-align: right;
389
  cursor: pointer;
390
+ transition: all 0.2s;
391
  display: flex;
392
  align-items: center;
393
+ gap: 1rem;
 
394
  position: relative;
395
  }
396
 
397
+ .room-btn:hover {
398
  background: var(--glass);
399
  }
400
 
401
+ .room-btn.active {
402
+ background: rgba(99, 102, 241, 0.1);
403
+ color: var(--primary);
404
  }
405
 
406
+ .room-btn.active::before {
407
  content: '';
408
  position: absolute;
409
+ right: 0;
410
  top: 50%;
411
  transform: translateY(-50%);
412
+ width: 4px;
413
+ height: 60%;
414
+ background: var(--primary);
415
+ border-radius: 4px 0 0 4px;
416
  }
417
 
418
+ .logout-btn {
419
+ margin: 1rem;
420
+ padding: 1rem;
 
421
  background: var(--glass);
422
+ border: 1px solid var(--border);
423
+ color: var(--text-muted);
424
+ border-radius: 1rem;
425
+ cursor: pointer;
426
+ transition: all 0.3s;
427
  display: flex;
428
  align-items: center;
429
  justify-content: center;
430
+ gap: 0.5rem;
431
  }
432
 
433
+ .logout-btn:hover {
434
+ background: #ef4444;
435
  color: white;
436
+ border-color: #ef4444;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
437
  }
438
 
439
  /* Main Chat Area */
440
+ .chat-area {
441
+ background: var(--surface);
442
+ backdrop-filter: blur(16px);
443
+ border: 1px solid var(--border);
444
+ border-radius: 1.5rem;
445
  display: flex;
446
  flex-direction: column;
447
+ overflow: hidden;
448
  position: relative;
449
  }
450
 
451
+ .chat-area-header {
452
+ padding: 1rem 1.5rem;
 
453
  border-bottom: 1px solid var(--border);
454
  display: flex;
455
  justify-content: space-between;
456
  align-items: center;
457
+ background: rgba(0,0,0,0.02);
458
  }
459
 
460
+ .chat-title h3 {
461
+ font-size: 1.1rem;
462
  display: flex;
463
  align-items: center;
 
 
 
 
 
464
  gap: 0.5rem;
465
  }
466
 
467
+ .messages-container {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
468
  flex: 1;
469
+ padding: 1.5rem;
470
  overflow-y: auto;
 
471
  display: flex;
472
  flex-direction: column;
473
  gap: 1rem;
 
474
  }
475
 
476
+ /* Messages */
477
  .message {
478
  max-width: 70%;
479
+ padding: 0.8rem 1.2rem;
480
+ border-radius: 1.5rem;
481
  position: relative;
482
+ line-height: 1.5;
483
+ font-size: 0.95rem;
484
  word-wrap: break-word;
485
+ animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
486
  }
487
 
488
+ @keyframes popIn {
489
+ from { opacity: 0; transform: scale(0.9); }
490
+ to { opacity: 1; transform: scale(1); }
 
 
 
 
 
 
 
491
  }
492
 
493
+ /* RTL Specifics */
494
  .message.sent {
495
+ align-self: flex-end; /* Right side in RTL */
496
  background: var(--message-sent);
497
  color: white;
498
+ border-bottom-right-radius: 0.25rem;
499
+ box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
500
  }
501
 
502
  .message.received {
503
+ align-self: flex-start; /* Left side in RTL */
504
  background: var(--message-received);
505
+ color: var(--text);
506
+ border-bottom-left-radius: 0.25rem;
507
  border: 1px solid var(--border);
 
508
  }
509
 
510
+ .message-meta {
511
+ font-size: 0.7rem;
512
+ margin-top: 0.3rem;
513
+ opacity: 0.7;
514
  display: flex;
 
515
  align-items: center;
516
+ justify-content: flex-end;
517
+ gap: 0.3rem;
518
  }
519
 
520
  .message-author {
521
  font-weight: 700;
522
+ font-size: 0.8rem;
523
+ margin-bottom: 0.2rem;
524
+ display: block;
525
  }
526
 
527
+ .date-divider {
528
+ text-align: center;
529
+ margin: 1.5rem 0;
530
+ position: relative;
531
  }
532
 
533
+ .date-divider span {
534
+ background: var(--glass);
535
+ padding: 0.3rem 1rem;
536
+ border-radius: 1rem;
537
+ font-size: 0.75rem;
538
+ color: var(--text-muted);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
539
  border: 1px solid var(--border);
 
 
 
 
 
 
 
 
 
540
  }
541
 
542
+ /* Input Area */
543
+ .input-area {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
544
  padding: 1rem 1.5rem;
545
+ background: var(--glass);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
546
  border-top: 1px solid var(--border);
 
 
 
 
547
  display: flex;
 
548
  align-items: center;
549
+ gap: 1rem;
 
 
 
 
550
  }
551
 
552
+ .input-wrapper {
553
+ flex: 1;
554
+ position: relative;
555
  }
556
 
557
+ .input-wrapper input {
558
+ width: 100%;
559
+ padding: 0.9rem 3.5rem 0.9rem 1.2rem;
560
+ border-radius: 2rem;
561
+ border: 2px solid var(--border);
562
+ background: var(--background);
563
  color: var(--text);
564
  font-family: inherit;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
565
  transition: all 0.3s;
 
566
  }
567
 
568
+ .input-wrapper input:focus {
569
+ border-color: var(--primary);
 
 
570
  }
571
 
572
  .send-btn {
573
+ width: 50px;
574
+ height: 50px;
575
+ border-radius: 50%;
576
  background: var(--primary);
577
  color: white;
578
  border: none;
 
 
 
579
  cursor: pointer;
580
  display: flex;
581
  align-items: center;
582
  justify-content: center;
583
  transition: all 0.3s;
584
+ flex-shrink: 0;
585
  }
586
 
587
  .send-btn:hover {
 
589
  transform: scale(1.1) rotate(-10deg);
590
  }
591
 
592
+ .send-btn:active {
593
+ transform: scale(0.95);
 
 
594
  }
595
 
596
+ /* Typing Indicator */
597
+ .typing-indicator-wrapper {
598
+ padding: 0 1.5rem 0.5rem;
599
+ height: 24px;
600
  position: absolute;
601
+ bottom: 70px;
602
+ right: 20px;
603
+ pointer-events: none;
 
 
 
 
 
 
 
 
 
 
604
  }
605
 
606
+ .typing-indicator {
607
+ display: inline-flex;
608
+ gap: 4px;
609
+ background: var(--message-received);
610
+ padding: 0.5rem 1rem;
611
+ border-radius: 1rem;
612
+ border: 1px solid var(--border);
613
+ align-items: center;
614
+ font-size: 0.75rem;
615
+ color: var(--text-muted);
616
  }
617
 
618
+ .typing-indicator span {
619
+ width: 6px;
620
+ height: 6px;
621
+ background: var(--text-muted);
622
+ border-radius: 50%;
623
+ animation: bounce 1.4s infinite ease-in-out both;
 
 
624
  }
625
 
626
+ .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
627
+ .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
 
 
628
 
629
+ @keyframes bounce {
630
+ 0%, 80%, 100% { transform: scale(0); }
631
+ 40% { transform: scale(1); }
 
 
 
 
 
 
 
632
  }
633
 
634
+ /* Toast Notification */
635
+ .toast-container {
636
+ position: fixed;
637
+ top: 90px;
638
+ left: 20px; /* Left in RTL to not cover chat */
639
+ z-index: 2000;
640
  display: flex;
641
+ flex-direction: column;
642
+ gap: 10px;
643
  }
644
 
645
+ .toast {
646
+ background: var(--surface-solid);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
647
  border: 1px solid var(--border);
648
  padding: 1rem 1.5rem;
649
  border-radius: 1rem;
 
650
  display: flex;
651
  align-items: center;
652
+ gap: 0.8rem;
653
+ box-shadow: var(--shadow);
654
+ animation: slideInLeft 0.3s ease;
655
+ max-width: 300px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
656
  }
657
 
658
+ @keyframes slideInLeft {
659
+ from { opacity: 0; transform: translateX(-50px); }
660
+ to { opacity: 1; transform: translateX(0); }
 
 
 
 
 
 
661
  }
662
 
663
  /* Responsive */
664
+ @media (max-width: 768px) {
665
+ .chat-layout {
666
  grid-template-columns: 1fr;
667
  }
668
+
669
  .sidebar {
670
+ position: absolute;
671
+ top: 0;
 
 
 
 
 
 
 
 
 
672
  right: 0;
673
+ width: 85%;
674
+ height: 100%;
675
+ z-index: 100;
676
+ transform: translateX(100%);
677
+ border-radius: 0;
678
  }
679
 
680
+ .sidebar.active {
681
+ transform: translateX(0);
682
+ box-shadow: -10px 0 30px rgba(0,0,0,0.5);
 
 
 
683
  }
 
684
 
685
+ .sidebar-overlay {
686
+ position: absolute;
687
+ top: 0;
688
+ left: 0;
689
+ width: 100%;
690
+ height: 100%;
691
+ background: rgba(0,0,0,0.5);
692
+ z-index: 90;
693
+ display: none;
694
+ backdrop-filter: blur(2px);
695
  }
696
 
697
+ .sidebar-overlay.active {
698
+ display: block;
 
 
 
 
699
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
700
 
701
+ .mobile-toggle {
702
+ display: flex !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
703
  }
704
 
705
+ .message {
706
+ max-width: 85%;
 
707
  }
708
  }
709
 
710
+ .mobile-toggle {
 
711
  display: none;
712
+ background: none;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
713
  border: none;
714
+ color: var(--text);
715
+ font-size: 1.2rem;
716
  cursor: pointer;
717
+ margin-left: 1rem;
 
718
  }
719
 
720
+ /* Scrollbar */
721
+ ::-webkit-scrollbar { width: 6px; }
722
+ ::-webkit-scrollbar-track { background: transparent; }
723
+ ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
724
+ ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
725
 
 
 
 
 
726
  </style>
727
  </head>
728
 
 
731
  <div class="bg-animation">
732
  <div class="circle"></div>
733
  <div class="circle"></div>
 
734
  </div>
735
 
736
  <!-- Header -->
737
+ <header>
738
  <div class="logo">
739
  <i class="fas fa-comments"></i>
740
+ <span>چت روم واقعی</span>
741
  </div>
742
  <div class="header-actions">
743
  <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
744
  <i class="fas fa-code"></i> Built with anycoder
745
  </a>
 
 
 
746
  <button class="theme-toggle" onclick="toggleTheme()" title="تغییر تم">
747
+ <i class="fas fa-moon"></i>
748
  </button>
749
  </div>
750
  </header>
751
 
752
+ <div class="container">
753
+
754
+ <!-- Auth View -->
755
+ <div id="auth-view" class="auth-container">
756
+ <div class="auth-box">
757
+ <h2 id="auth-title">ورود به حساب</h2>
758
+ <form id="auth-form" onsubmit="handleAuth(event)">
759
+ <div class="form-group">
760
+ <label>نام کاربری</label>
761
+ <input type="text" id="username-input" placeholder="مثلاً: علی" required autocomplete="off">
762
+ </div>
763
+ <button type="submit" class="btn btn-primary">
764
+ <i class="fas fa-arrow-left"></i>
765
+ <span id="auth-btn-text">ورود</span>
766
+ </button>
767
+ </form>
768
+ <div class="switch-auth">
769
+ <a onclick="toggleAuthMode()" id="auth-switch-link">ثبت‌نام کنید</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
770
  </div>
771
+ <p style="margin-top: 2rem; font-size: 0.8rem; color: var(--text-muted); opacity: 0.7;">
772
+ <i class="fas fa-info-circle"></i>
773
+ برای تست واقعی، این صفحه را در دو تب مختلف باز کنید.
774
+ </p>
775
+ </div>
776
  </div>
 
777
 
778
+ <!-- Chat View -->
779
+ <div id="chat-app">
780
+ <div class="chat-layout">
781
+
782
+ <!-- Mobile Overlay -->
783
+ <div class="sidebar-overlay" onclick="toggleSidebar()"></div>
784
+
785
+ <!-- Sidebar -->
786
+ <aside class="sidebar" id="sidebar">
787
+ <div class="sidebar-header">
788
+ <div class="my-avatar" id="current-user-avatar">A</div>
789
  <div class="user-info">
790
+ <h4 id="current-user-name">نام کاربر</h4>
791
+ <span class="user-status">آنلاین</span>
792
  </div>
793
  </div>
 
 
 
 
 
794
 
795
+ <div class="rooms-section">
796
+ <div class="section-title">اتاق‌های گفتگو</div>
797
+ <div id="rooms-list">
798
+ <!-- Rooms will be injected here -->
799
+ </div>
 
800
  </div>
801
+
802
+ <button class="logout-btn" onclick="logout()">
803
+ <i class="fas fa-sign-out-alt"></i>
804
+ خروج از حساب
805
+ </button>
806
+ </aside>
807
+
808
+ <!-- Main Chat -->
809
+ <main class="chat-area">
810
+ <div class="chat-area-header">
811
+ <div class="chat-title">
812
+ <button class="mobile-toggle" onclick="toggleSidebar()">
813
+ <i class="fas fa-bars"></i>
814
+ </button>
815
+ <h3 id="room-title">
816
+ <i class="fas fa-hashtag"></i>
817
+ <span>عمومی</span>
818
+ </h3>
819
  </div>
820
+ <div style="display: flex; gap: 0.5rem;">
821
+ <button class="theme-toggle" style="width: 32px; height: 32px;" onclick="clearHistory()">
822
+ <i class="fas fa-trash-alt" title="پاک کردن تاریخچه"></i>
823
+ </button>
 
 
824
  </div>
825
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
826
 
827
+ <div class="messages-container" id="messages-container">
828
+ <!-- Messages will be injected here -->
829
+ </div>
 
 
 
 
 
830
 
831
+ <div class="typing-indicator-wrapper" id="typing-indicator">
832
+ <div class="typing-indicator">
833
+ <span></span><span></span><span></span>
834
+ <span style="margin-right: 5px;" id="typer-name">کاربر</span> در حال نوشتن...
835
  </div>
 
 
 
836
  </div>
837
 
838
+ <div class="input-area">
839
+ <div class="input-wrapper">
840
+ <input type="text" id="message-input" placeholder="پیام خود را بنویسید..." autocomplete="off">
 
 
 
 
 
 
 
841
  </div>
842
+ <button class="send-btn" onclick="sendMessage()">
 
 
 
843
  <i class="fas fa-paper-plane"></i>
844
  </button>
845
  </div>
846
+ </main>
847
+ </div>
 
 
 
 
 
 
 
 
 
 
 
848
  </div>
849
  </div>
850
 
851
+ <!-- Toast Container -->
852
+ <div class="toast-container" id="toast-container"></div>
 
 
853
 
854
+ <!-- Sound Effect (Base64 for simplicity) -->
855
+ <script>
856
+ // Short pop sound for messages
857
+ const audioContext = new (window.AudioContext || window.webkitAudioContext)();
858
+
859
+ function playNotificationSound() {
860
+ if (audioContext.state === 'suspended') audioContext.resume();
861
+ const oscillator = audioContext.createOscillator();
862
+ const gainNode = audioContext.createGain();
863
+
864
+ oscillator.type = 'sine';
865
+ oscillator.frequency.setValueAtTime(500, audioContext.currentTime);
866
+ oscillator.frequency.exponentialRampToValueAtTime(1000, audioContext.currentTime + 0.1);
867
+
868
+ gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
869
+ gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
870
+
871
+ oscillator.connect(gainNode);
872
+ gainNode.connect(audioContext.destination);
873
+
874
+ oscillator.start();
875
+ oscillator.stop(audioContext.currentTime + 0.3);
876
+ }
877
+ </script>
878
 
879
  <script>
880
+ // --- State Management ---
881
+ const STORE_KEY = 'persian_chat_v1';
882
+ const CHANNEL_NAME = 'persian_chat_realtime';
883
+
884
+ // Default Data Structure
885
+ const defaultData = {
886
+ users: [], // { username, color, joinedAt }
887
+ messages: [], // { id, roomId, username, text, timestamp, type }
888
+ rooms: [
889
+ { id: 'general', name: 'عمومی', icon: 'fa-globe' },
890
+ { id: 'tech', name: 'فناوری', icon: 'fa-laptop-code' },
891
+ { id: 'random', name: 'گفتگوی آزاد', icon: 'fa-comments' }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
892
  ]
893
  };
894
 
895
+ let currentState = JSON.parse(localStorage.getItem(STORE_KEY)) || defaultData;
896
+ let currentUser = JSON.parse(sessionStorage.getItem('currentUser')) || null;
897
+ let currentRoomId = 'general';
898
+ let broadcastChannel = new BroadcastChannel(CHANNEL_NAME);
899
+ let typingTimeout = null;
900
+
901
+ // --- Core Logic ---
902
+
903
+ function saveState() {
904
+ localStorage.setItem(STORE_KEY, JSON.stringify(currentState));
905
+ }
906
+
907
+ function generateId() {
908
+ return Date.now().toString(36) + Math.random().toString(36).substr(2);
909
+ }
910
+
911
+ function getCurrentUserColor(username) {
912
+ const user = currentState.users.find(u => u.username === username);
913
+ return user ? user.color : '#6366f1';
914
+ }
915
+
916
+ // --- Auth Functions ---
917
+
918
+ function handleAuth(e) {
919
+ e.preventDefault();
920
+ const username = document.getElementById('username-input').value.trim();
921
+
922
+ if (!username) return showToast('لطفا نام کاربری را وارد کنید', 'error');
923
+ if (username.length < 3) return showToast('نام کاربری باید حداقل ۳ حرف باشد', 'error');
924
+
925
+ // Simulate login/register combined logic
926
+ const existingUser = currentState.users.find(u => u.username === username);
927
 
928
+ const userObj = existingUser || {
929
+ username: username,
930
+ color: `hsl(${Math.random() * 360}, 70%, 60%)`,
931
+ joinedAt: Date.now()
932
+ };
933
+
934
+ if (!existingUser) {
935
+ currentState.users.push(userObj);
936
+ saveState();
937
  }
 
938
 
939
+ currentUser = userObj;
940
+ sessionStorage.setItem('currentUser', JSON.stringify(currentUser));
941
+
942
+ showToast(`خوش آمدید ${username}!`, 'success');
943
+ initChatApp();
944
  }
945
 
946
+ function logout() {
947
+ currentUser = null;
948
+ sessionStorage.removeItem('currentUser');
949
+ document.getElementById('chat-app').style.display = 'none';
950
+ document.getElementById('auth-view').style.display = 'flex';
951
+ document.getElementById('username-input').value = '';
952
  }
953
 
954
+ function initChatApp() {
955
+ if (!currentUser) return;
956
+
957
+ // UI Updates
958
+ document.getElementById('auth-view').style.display = 'none';
959
+ document.getElementById('chat-app').style.display = 'block';
960
+
961
+ document.getElementById('current-user-name').textContent = currentUser.username;
962
+ document.getElementById('current-user-avatar').textContent = currentUser.username.charAt(0).toUpperCase();
963
+ document.getElementById('current-user-avatar').style.background = currentUser.color;
964
+
965
+ renderRooms();
966
+ switchRoom('general');
967
+
968
+ // Broadcast Join Event
969
+ broadcastChannel.postMessage({
970
+ type: 'USER_JOINED',
971
+ payload: { username: currentUser.username }
972
+ });
973
  }
974
 
975
+ // --- Chat Functions ---
976
+
977
+ function renderRooms() {
978
+ const container = document.getElementById('rooms-list');
979
+ container.innerHTML = currentState.rooms.map(room => `
980
+ <button class="room-btn ${room.id === currentRoomId ? 'active' : ''}" onclick="switchRoom('${room.id}')">
981
+ <i class="fas ${room.icon}" style="width: 20px; text-align: center;"></i>
982
+ <span>${room.name}</span>
983
+ </button>
984
+ `).join('');
985
  }
986
 
987
+ function switchRoom(roomId) {
988
+ currentRoomId = roomId;
989
+ const room = currentState.rooms.find(r => r.id === roomId);
990
 
991
+ document.getElementById('room-title').innerHTML = `<i class="fas ${room.icon}"></i> ${room.name}`;
992
+ renderRooms();
993
+ renderMessages();
994
 
995
+ // Mobile: close sidebar
996
+ if (window.innerWidth <= 768) {
997
+ document.getElementById('sidebar').classList.remove('active');
998
+ document.querySelector('.sidebar-overlay').classList.remove('active');
999
+ }
1000
+ }
1001
+
1002
+ function renderMessages() {
1003
+ const container = document.getElementById('messages-container');
1004
+ const roomMessages = currentState.messages.filter(m => m.roomId === currentRoomId);
1005
+
1006
+ container.innerHTML = '';
1007
+
1008
+ if (roomMessages.length === 0) {
1009
+ container.innerHTML = `
1010
+ <div style="text-align:center; padding: 2rem; color: var(--text-muted);">
1011
+ <i class="fas fa-comments" style="font-size: 3rem; margin-bottom: 1rem; opacity: 0.3;"></i>
1012
+ <p>هنوز پیامی ارسال نشده است.</p>
1013
+ <p style="font-size: 0.8rem;">اولین نفری باشید که سلام می‌کند!</p>
1014
+ </div>
1015
+ `;
1016
+ return;
1017
+ }
1018
+
1019
+ let lastDate = null;
1020
+
1021
+ roomMessages.forEach((msg, index) => {
1022
+ const msgDate = new Date(msg.timestamp).toLocaleDateString('fa-IR');
1023
+
1024
+ // Date Divider
1025
+ if (msgDate !== lastDate) {
1026
+ container.innerHTML += `
1027
+ <div class="date-divider"><span>${msgDate}</span></div>
1028
+ `;
1029
+ lastDate = msgDate;
1030
+ }
1031
+
1032
+ const isMe = msg.username === currentUser.username;
1033
+ const time = new Date(msg.timestamp).toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' });
1034
+
1035
+ const msgEl = document.createElement('div');
1036
+ msgEl.className = `message ${isMe ? 'sent' : 'received'}`;
1037
+ msgEl.innerHTML = `
1038
+ ${!isMe ? `<span class="message-author" style="color: ${getCurrentUserColor(msg.username)}">${msg.username}</span>` : ''}
1039
+ ${escapeHtml(msg.text)}
1040
+ <div class="message-meta">
1041
+ <span>${time}</span>
1042
+ ${isMe ? '<i class="fas fa-check-double"></i>' : ''}
1043
+ </div>
1044
+ `;
1045
+ container.appendChild(msgEl);
1046
+ });
1047
+
1048
+ scrollToBottom();
1049
+ }
1050
+
1051
+ function sendMessage() {
1052
+ const input = document.getElementById('message-input');
1053
+ const text = input.value.trim();
1054
+
1055
+ if (!text) return;
1056
+
1057
+ const newMessage = {
1058
+ id: generateId(),
1059
+ roomId: currentRoomId,
1060
+ username: currentUser.username,
1061
+ text: text,
1062
+ timestamp: Date.now(),
1063
+ type: 'text'
1064
+ };
1065
+
1066
+ // Update Local State
1067
+ currentState.messages.push(newMessage);
1068
+ saveState();
1069
 
1070
+ // Update UI
1071
+ input.value = '';
1072
+ renderMessages();
1073
+
1074
+ // Broadcast to other tabs
1075
+ broadcastChannel.postMessage({
1076
+ type: 'NEW_MESSAGE',
1077
+ payload: newMessage
1078
+ });
1079
+
1080
+ // Stop typing indicator
1081
+ stopTyping();
1082
+ }
1083
+
1084
+ function scrollToBottom() {
1085
+ const container = document.getElementById('messages-container');
1086
+ container.scrollTop = container.scrollHeight;
1087
+ }
1088
+
1089
+ function clearHistory() {
1090
+ if(confirm('آیا مطمئن هستید که می‌خواهید تاریخچه این اتاق را پاک کنید؟')) {
1091
+ currentState.messages = currentState.messages.filter(m => m.roomId !== currentRoomId);
1092
+ saveState();
1093
+ renderMessages();
1094
+ showToast('تاریخچه پاک شد', 'success');
1095
  }
1096
  }
1097
 
1098
+ // --- Real-time Features (BroadcastChannel) ---
1099
+
1100
+ broadcastChannel.onmessage = (event) => {
1101
+ const { type, payload } = event.data;
1102
+
1103
+ if (type === 'NEW_MESSAGE') {
1104
+ // Only add if not exists (deduplication)
1105
+ if (!currentState.messages.find(m => m.id === payload.id)) {
1106
+ currentState.messages.push(payload);
1107
+ saveState();
1108
+
1109
+ if (payload.roomId === currentRoomId) {
1110
+ renderMessages();
1111
+ if (payload.username !== currentUser.username) {
1112
+ playNotificationSound();
1113
+ showToast(`پیام جدید از ${payload.username}`, 'info');
1114
+ }
1115
+ }
1116
+ }
1117
+ }
1118
+ else if (type === 'TYPING_START') {
1119
+ if (payload.roomId === currentRoomId && payload.username !== currentUser.username) {
1120
+ showTypingIndicator(payload.username);
1121
+ }
1122
+ }
1123
+ else if (type