Hugging Face's logo

Spaces:
samirerty
/
anycoder-0f5271e4
Running

App Files Community
samirerty commited on
Commit
780c85d
·
verified ·
1 Parent(s): e56ddf0

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +810 -1089
index.html CHANGED
@@ -3,1357 +3,1078 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>چت روم مینیمال</title>
 
 
 
 
 
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
- <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
9
  <style>
10
  :root {
11
- --primary: #6366f1;
12
- --primary-dark: #4f46e5;
13
- --secondary: #818cf8;
14
- --glass-bg: rgba(255, 255, 255, 0.1);
15
- --glass-border: rgba(255, 255, 255, 0.2);
16
- --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
17
- --text-primary: #f3f4f6;
18
- --text-secondary: #d1d5db;
19
- --bg-gradient: radial-gradient(circle at top right, #1e3a8a, #0c0e21);
20
- --success: #10b981;
21
- --danger: #ef4444;
22
- --warning: #f59e0b;
23
- --card-bg: rgba(30, 41, 59, 0.6);
24
- --sidebar-width: 300px;
25
- --transition: all 0.3s ease;
26
  }
27
 
28
  * {
 
29
  margin: 0;
30
  padding: 0;
31
- box-sizing: border-box;
32
- font-family: 'Vazirmatn', sans-serif;
33
  }
34
 
35
  body {
36
- background: var(--bg-gradient);
37
- color: var(--text-primary);
38
- min-height: 100vh;
 
39
  overflow: hidden;
40
- position: relative;
41
- }
42
-
43
- body::before {
44
- content: '';
45
- position: absolute;
46
- top: 0;
47
- left: 0;
48
- width: 100%;
49
- height: 100%;
50
- background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxjaXJjbGUgY3g9IjEwIiBjeT0iMTAiIHI9IjAuNSIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjEpIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3BhdHRlcm4pIiBvcGFjaXR5PSIwLjEiLz48L3N2Zz4=');
51
- opacity: 0.3;
52
- z-index: -1;
53
  }
54
 
55
- .header {
 
 
 
56
  display: flex;
57
  justify-content: space-between;
58
  align-items: center;
59
- padding: 1rem 2rem;
60
- backdrop-filter: blur(10px);
61
- background: var(--glass-bg);
62
- border-bottom: 1px solid var(--glass-border);
63
- box-shadow: var(--glass-shadow);
64
- position: sticky;
65
- top: 0;
66
  z-index: 100;
67
  }
68
 
69
- .logo {
70
- display: flex;
71
- align-items: center;
72
- gap: 12px;
 
73
  }
74
 
75
- .logo i {
76
- font-size: 1.8rem;
77
- color: var(--secondary);
 
 
 
 
 
78
  }
79
 
80
- .logo h1 {
81
- font-weight: 700;
82
- font-size: 1.5rem;
83
- background: linear-gradient(90deg, var(--secondary), var(--primary));
84
- -webkit-background-clip: text;
85
- -webkit-text-fill-color: transparent;
86
  }
87
 
88
- .anycoder-link {
89
- color: var(--text-secondary);
90
- font-size: 0.9rem;
91
- text-decoration: none;
92
- transition: var(--transition);
93
- display: flex;
 
 
94
  align-items: center;
95
- gap: 6px;
 
 
 
 
 
 
 
 
 
 
 
 
96
  }
97
 
98
- .anycoder-link:hover {
99
- color: var(--secondary);
 
100
  }
101
 
102
- .container {
103
- display: flex;
104
- height: calc(100vh - 80px);
 
 
 
 
 
 
 
105
  }
106
 
107
- /* Sidebar Styles */
108
- .sidebar {
109
- width: var(--sidebar-width);
110
- border-left: 1px solid var(--glass-border);
111
- backdrop-filter: blur(10px);
112
- background: var(--glass-bg);
113
- box-shadow: var(--glass-shadow);
114
- padding: 1.5rem;
115
  transition: var(--transition);
116
- overflow-y: auto;
117
  }
118
 
119
- .sidebar-header {
 
 
 
 
120
  display: flex;
121
- justify-content: space-between;
122
  align-items: center;
123
- margin-bottom: 1.5rem;
124
  }
125
 
126
- .sidebar-header h2 {
127
- font-size: 1.3rem;
128
- font-weight: 600;
 
 
 
 
 
129
  }
130
 
131
- .add-room-btn {
132
- background: var(--primary);
133
- color: white;
134
  border: none;
135
- width: 40px;
136
- height: 40px;
137
- border-radius: 50%;
138
  cursor: pointer;
139
- font-size: 1.2rem;
 
 
140
  transition: var(--transition);
141
- display: flex;
142
- align-items: center;
143
- justify-content: center;
144
  }
145
 
146
- .add-room-btn:hover {
147
- background: var(--primary-dark);
148
- transform: scale(1.05);
149
  }
150
 
151
- .room-list {
152
- display: flex;
153
- flex-direction: column;
154
- gap: 1rem;
155
  }
156
 
157
- .room-card {
158
- background: var(--card-bg);
159
- border-radius: 12px;
160
- padding: 1rem;
161
- transition: var(--transition);
162
- border: 1px solid var(--glass-border);
163
- cursor: pointer;
164
  }
165
 
166
- .room-card.active {
167
- border-color: var(--primary);
168
- box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
169
  }
170
 
171
- .room-card:hover {
172
- transform: translateY(-3px);
173
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 
 
 
 
174
  }
175
 
176
- .room-header {
177
  display: flex;
178
- justify-content: space-between;
179
  align-items: center;
180
- margin-bottom: 0.5rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
181
  }
182
 
183
- .room-title {
184
- font-weight: 500;
185
- font-size: 1.1rem;
 
 
186
  display: flex;
187
  align-items: center;
188
- gap: 8px;
 
 
 
189
  }
190
 
191
- .room-title i {
192
- color: var(--secondary);
 
193
  }
194
 
195
- .room-members {
196
  display: flex;
197
- font-size: 0.85rem;
198
- color: var(--text-secondary);
199
  }
200
 
201
- .room-members i {
202
- margin-left: 5px;
 
 
 
 
 
 
 
 
203
  }
204
 
205
- .room-actions {
206
- display: flex;
207
- justify-content: flex-end;
208
- gap: 10px;
209
- margin-top: 0.8rem;
210
  }
211
 
212
- .action-btn {
213
- background: transparent;
214
- border: 1px solid var(--glass-border);
215
- color: var(--text-secondary);
216
- border-radius: 8px;
217
- padding: 5px 10px;
218
  font-size: 0.8rem;
219
- cursor: pointer;
220
- transition: var(--transition);
 
 
221
  display: flex;
222
  align-items: center;
223
  gap: 5px;
 
 
 
 
 
224
  }
225
 
226
- .action-btn:hover {
227
- background: var(--glass-bg);
228
- color: var(--text-primary);
 
 
229
  }
230
 
231
- .action-btn.copy:hover {
232
- color: var(--success);
233
- border-color: var(--success);
 
 
 
 
 
 
 
 
 
 
 
 
 
234
  }
235
 
236
- .action-btn.delete:hover {
237
- color: var(--danger);
238
- border-color: var(--danger);
239
  }
240
 
241
- /* Main Chat Area */
242
- .chat-area {
243
- flex: 1;
244
- display: flex;
245
- flex-direction: column;
246
- padding: 1.5rem;
247
  }
248
 
249
  .chat-header {
 
 
250
  display: flex;
251
- justify-content: space-between;
252
  align-items: center;
253
- padding-bottom: 1rem;
254
- border-bottom: 1px solid var(--glass-border);
255
- margin-bottom: 1.5rem;
256
  }
257
 
258
- .chat-title {
259
- font-size: 1.5rem;
260
- font-weight: 600;
261
  display: flex;
262
  align-items: center;
263
  gap: 10px;
264
  }
265
 
266
- .chat-title i {
267
- color: var(--secondary);
 
 
 
 
 
 
 
 
 
 
 
268
  }
269
 
270
  .chat-actions {
271
- display: flex;
272
- gap: 15px;
273
  }
274
 
275
- .chat-actions-btn {
276
- background: transparent;
277
  border: none;
278
- color: var(--text-secondary);
279
  font-size: 1.2rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
280
  cursor: pointer;
281
- transition: var(--transition);
282
- width: 40px;
283
- height: 40px;
284
- border-radius: 50%;
285
  display: flex;
286
  align-items: center;
287
- justify-content: center;
 
 
 
 
 
 
 
288
  }
289
 
290
- .chat-actions-btn:hover {
291
- background: var(--glass-bg);
292
- color: var(--text-primary);
293
  }
294
 
295
  .messages-container {
296
  flex: 1;
 
297
  overflow-y: auto;
298
- padding: 1rem;
299
  display: flex;
300
  flex-direction: column;
301
- gap: 1.5rem;
302
- margin-bottom: 1.5rem;
303
  }
304
 
305
  .message {
306
- max-width: 80%;
307
- padding: 1rem;
308
  border-radius: 12px;
309
  position: relative;
310
- animation: fadeIn 0.3s ease-out;
311
- backdrop-filter: blur(5px);
312
- background: var(--glass-bg);
313
- border: 1px solid var(--glass-border);
314
- }
315
-
316
- @keyframes fadeIn {
317
- from { opacity: 0; transform: translateY(10px); }
318
- to { opacity: 1; transform: translateY(0); }
319
  }
320
 
321
- .message.sent {
322
- align-self: flex-end;
323
- background: rgba(79, 70, 229, 0.2);
324
- border: 1px solid rgba(99, 102, 241, 0.3);
325
  }
326
 
327
  .message.received {
328
  align-self: flex-start;
 
 
 
329
  }
330
 
331
- .message-header {
332
- display: flex;
333
- justify-content: space-between;
334
- margin-bottom: 0.5rem;
 
335
  }
336
 
337
- .sender-name {
338
- font-weight: 600;
339
- color: var(--secondary);
 
 
 
 
 
340
  }
341
 
342
- .message-time {
 
 
 
 
 
 
 
 
343
  font-size: 0.8rem;
344
- color: var(--text-secondary);
345
- }
346
-
347
- .message-content {
348
- line-height: 1.5;
349
- margin-bottom: 0.5rem;
350
- }
351
-
352
- .message-reply {
353
- background: rgba(0, 0, 0, 0.1);
354
- border-right: 3px solid var(--primary);
355
- padding: 0.5rem;
356
- border-radius: 6px;
357
- margin-bottom: 0.5rem;
358
- font-size: 0.9rem;
359
- }
360
-
361
- .message-reply .replying-to {
362
- font-weight: 600;
363
- color: var(--secondary);
364
  }
365
 
366
- .message-actions {
367
  display: flex;
368
- gap: 10px;
369
- justify-content: flex-end;
370
  }
371
 
372
- .message-action {
373
- background: transparent;
374
- border: none;
375
- color: var(--text-secondary);
376
  cursor: pointer;
377
- font-size: 0.9rem;
378
- transition: var(--transition);
379
- padding: 3px;
380
  }
381
 
382
- .message-action:hover {
383
- color: var(--text-primary);
384
  }
385
 
386
- .reactions {
 
 
 
 
 
 
 
 
 
 
 
 
 
387
  display: flex;
388
- gap: 5px;
389
- margin-top: 0.5rem;
390
  }
391
 
392
- .reaction {
393
- background: var(--card-bg);
394
- border: 1px solid var(--glass-border);
395
- border-radius: 20px;
396
- padding: 3px 8px;
397
  font-size: 0.8rem;
398
- cursor: pointer;
399
- transition: var(--transition);
400
  display: flex;
 
401
  align-items: center;
402
- gap: 3px;
403
- }
404
-
405
- .reaction:hover {
406
- transform: scale(1.1);
407
- }
408
-
409
- .reaction-count {
410
- font-size: 0.7rem;
411
  }
412
 
413
- .input-area {
414
  display: flex;
415
- gap: 1rem;
416
- padding: 1rem;
417
- backdrop-filter: blur(10px);
418
- background: var(--glass-bg);
419
- border: 1px solid var(--glass-border);
420
- border-radius: 12px;
421
- box-shadow: var(--glass-shadow);
422
  }
423
 
424
- .message-input {
425
  flex: 1;
426
- background: transparent;
427
- border: 1px solid var(--glass-border);
428
- border-radius: 8px;
429
- padding: 0.8rem 1rem;
430
- color: var(--text-primary);
431
- font-size: 1rem;
432
- outline: none;
433
- transition: var(--transition);
434
- }
435
-
436
- .message-input:focus {
437
- border-color: var(--primary);
438
- }
439
-
440
- .message-input::placeholder {
441
- color: var(--text-secondary);
442
  }
443
 
444
- .send-btn {
445
- background: var(--primary);
446
- color: white;
 
 
 
447
  border: none;
448
- border-radius: 8px;
449
- padding: 0 1.5rem;
450
- cursor: pointer;
451
- font-size: 1rem;
452
- transition: var(--transition);
453
  display: flex;
454
  align-items: center;
455
- gap: 8px;
 
 
456
  }
457
 
458
- .send-btn:hover {
459
- background: var(--primary-dark);
460
- transform: translateY(-2px);
461
  }
462
 
463
- /* Authentication Modal */
464
- .modal {
465
  position: fixed;
466
  top: 0;
467
  left: 0;
468
  width: 100%;
469
  height: 100%;
470
- background: rgba(0, 0, 0, 0.7);
471
- backdrop-filter: blur(5px);
472
- display: flex;
473
- align-items: center;
474
  justify-content: center;
 
475
  z-index: 1000;
476
- opacity: 0;
477
- visibility: hidden;
478
- transition: all 0.3s ease;
479
  }
480
 
481
- .modal.active {
482
- opacity: 1;
483
- visibility: visible;
484
  }
485
 
486
  .modal-content {
487
- background: var(--card-bg);
488
- backdrop-filter: blur(10px);
489
- border: 1px solid var(--glass-border);
490
- border-radius: 16px;
491
- padding: 2rem;
492
- width: 100%;
493
- max-width: 400px;
494
- box-shadow: var(--glass-shadow);
495
- transform: translateY(20px);
496
- transition: transform 0.3s ease;
497
  }
498
 
499
- .modal.active .modal-content {
500
- transform: translateY(0);
501
- }
502
-
503
- .modal-header {
504
- margin-bottom: 1.5rem;
505
- text-align: center;
506
  }
507
 
508
- .modal-title {
509
- font-size: 1.5rem;
510
- font-weight: 600;
511
- margin-bottom: 0.5rem;
512
- }
513
-
514
- .modal-subtitle {
515
- color: var(--text-secondary);
516
- font-size: 0.9rem;
517
- }
518
-
519
- .input-group {
520
- margin-bottom: 1.5rem;
521
- }
522
-
523
- .input-label {
524
- display: block;
525
- margin-bottom: 0.5rem;
526
- font-size: 0.9rem;
527
- color: var(--text-secondary);
528
- }
529
-
530
- .phone-input {
531
  display: flex;
532
  gap: 10px;
 
 
 
533
  }
534
 
535
- .country-code {
536
- background: var(--glass-bg);
537
- border: 1px solid var(--glass-border);
538
- border-radius: 8px;
539
- padding: 0.8rem;
540
- width: 80px;
541
- color: var(--text-primary);
542
- text-align: center;
543
- }
544
-
545
- .phone-number {
546
- flex: 1;
547
- background: transparent;
548
- border: 1px solid var(--glass-border);
549
- border-radius: 8px;
550
- padding: 0.8rem 1rem;
551
- color: var(--text-primary);
552
- font-size: 1rem;
553
- outline: none;
554
- transition: var(--transition);
555
- }
556
-
557
- .phone-number:focus {
558
- border-color: var(--primary);
559
- }
560
-
561
- .submit-btn {
562
- width: 100%;
563
- background: var(--primary);
564
- color: white;
565
- border: none;
566
- border-radius: 8px;
567
- padding: 1rem;
568
  cursor: pointer;
569
- font-size: 1rem;
570
- font-weight: 500;
571
  transition: var(--transition);
572
  }
573
 
574
- .submit-btn:hover {
575
- background: var(--primary-dark);
576
- }
577
-
578
- .otp-group {
579
- display: flex;
580
- gap: 10px;
581
- margin-bottom: 1.5rem;
582
- }
583
-
584
- .otp-input {
585
- flex: 1;
586
- background: transparent;
587
- border: 1px solid var(--glass-border);
588
- border-radius: 8px;
589
- padding: 0.8rem;
590
- text-align: center;
591
- color: var(--text-primary);
592
- font-size: 1.2rem;
593
- outline: none;
594
- transition: var(--transition);
595
- }
596
-
597
- .otp-input:focus {
598
- border-color: var(--primary);
599
- }
600
-
601
- .modal-footer {
602
- text-align: center;
603
- margin-top: 1.5rem;
604
- font-size: 0.9rem;
605
- color: var(--text-secondary);
606
- }
607
-
608
- .resend-link {
609
- color: var(--secondary);
610
- text-decoration: none;
611
- cursor: pointer;
612
- }
613
-
614
- /* Responsive Design */
615
- @media (max-width: 768px) {
616
- .container {
617
- flex-direction: column;
618
- }
619
-
620
- .sidebar {
621
- width: 100%;
622
- height: auto;
623
- max-height: 40vh;
624
- border-left: none;
625
- border-bottom: 1px solid var(--glass-border);
626
- }
627
-
628
- .chat-area {
629
- height: 60vh;
630
- }
631
-
632
- .messages-container {
633
- padding: 0.5rem;
634
- }
635
-
636
- .message {
637
- max-width: 90%;
638
- }
639
-
640
- .header {
641
- padding: 1rem;
642
- }
643
-
644
- .logo h1 {
645
- font-size: 1.3rem;
646
- }
647
- }
648
-
649
- @media (max-width: 480px) {
650
- .input-area {
651
- flex-direction: column;
652
- }
653
-
654
- .send-btn {
655
- width: 100%;
656
- justify-content: center;
657
- }
658
-
659
- .chat-actions {
660
- display: none;
661
- }
662
-
663
- .room-title {
664
- font-size: 1rem;
665
- }
666
-
667
- .room-actions .action-btn span {
668
- display: none;
669
- }
670
-
671
- .modal-content {
672
- padding: 1.5rem;
673
- margin: 1rem;
674
- }
675
  }
676
 
677
- /* Toast Notification */
678
  .toast {
679
  position: fixed;
680
  bottom: 20px;
681
  left: 50%;
682
- transform: translateX(-50%) translateY(100px);
683
- background: var(--card-bg);
684
- backdrop-filter: blur(10px);
685
- border: 1px solid var(--glass-border);
686
- border-radius: 8px;
687
- padding: 1rem;
688
- display: flex;
689
- align-items: center;
690
- gap: 10px;
691
- box-shadow: var(--glass-shadow);
692
- z-index: 2000;
693
  opacity: 0;
694
- transition: all 0.3s ease;
 
 
695
  }
696
 
697
  .toast.show {
698
- transform: translateX(-50%) translateY(0);
699
  opacity: 1;
700
  }
701
 
702
- .toast.success {
703
- border-left: 4px solid var(--success);
704
- }
705
-
706
- .toast i {
707
- font-size: 1.2rem;
708
- }
709
-
710
- .toast.success i {
711
- color: var(--success);
712
- }
713
-
714
- .toast-message {
715
- font-size: 0.9rem;
716
- }
717
-
718
- /* Reaction Selector */
719
- .reaction-selector {
720
- position: absolute;
721
- bottom: 100%;
722
- right: 0;
723
- background: var(--card-bg);
724
- backdrop-filter: blur(10px);
725
- border: 1px solid var(--glass-border);
726
- border-radius: 30px;
727
- padding: 0.5rem;
728
- display: flex;
729
- gap: 8px;
730
- box-shadow: var(--glass-shadow);
731
- z-index: 10;
732
- }
733
-
734
- .reaction-option {
735
- font-size: 1.2rem;
736
- cursor: pointer;
737
- transition: var(--transition);
738
- }
739
-
740
- .reaction-option:hover {
741
- transform: scale(1.3);
742
- }
743
  </style>
744
  </head>
745
  <body>
 
746
  <!-- Header -->
747
- <header class="header">
748
- <div class="logo">
749
- <i class="fas fa-comment-dots"></i>
750
- <h1>چت روم مینیمال</h1>
751
- </div>
752
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
753
- <span>Built with anycoder</span>
754
- <i class="fas fa-external-link-alt"></i>
755
- </a>
756
  </header>
757
 
758
- <!-- Main Container -->
759
- <div class="container">
760
- <!-- Sidebar for Rooms -->
761
- <aside class="sidebar">
762
- <div class="sidebar-header">
763
- <h2>اتاق‌های گفتگو</h2>
764
- <button class="add-room-btn">
765
- <i class="fas fa-plus"></i>
766
- </button>
767
- </div>
768
-
769
- <div class="room-list">
770
- <div class="room-card active">
771
- <div class="room-header">
772
- <div class="room-title">
773
- <i class="fas fa-hashtag"></i>
774
- <span>توسعه‌دهندگان</span>
775
- </div>
776
- <div class="room-members">
777
- <i class="fas fa-user"></i>
778
- <span>۱۲ نفر</span>
779
- </div>
780
  </div>
781
- <p>گفتگو در مورد پروژه‌های برنامه‌نویسی و تکنولوژی‌های جدید</p>
782
- <div class="room-actions">
783
- <button class="action-btn copy">
784
- <i class="fas fa-link"></i>
785
- <span>لینک اتاق</span>
786
- </button>
787
- <button class="action-btn delete">
788
- <i class="fas fa-trash"></i>
789
- <span>ترک اتاق</span>
790
- </button>
791
- </div>
792
- </div>
793
-
794
- <div class="room-card">
795
- <div class="room-header">
796
- <div class="room-title">
797
- <i class="fas fa-hashtag"></i>
798
- <span>طراحی رابط کاربری</span>
799
- </div>
800
- <div class="room-members">
801
- <i class="fas fa-user"></i>
802
- <span>۸ نفر</span>
803
  </div>
804
  </div>
805
- <p>بهترین روش‌های طراحی UX/UI و ابزارهای جدید</p>
806
- <div class="room-actions">
807
- <button class="action-btn copy">
808
- <i class="fas fa-link"></i>
809
- <span>لینک اتاق</span>
810
- </button>
811
- <button class="action-btn delete">
812
- <i class="fas fa-trash"></i>
813
- <span>ترک اتاق</span>
814
- </button>
 
 
 
 
815
  </div>
 
816
  </div>
817
-
818
- <div class="room-card">
819
- <div class="room-header">
820
- <div class="room-title">
821
- <i class="fas fa-hashtag"></i>
822
- <span>عمومی</span>
823
- </div>
824
- <div class="room-members">
825
- <i class="fas fa-user"></i>
826
- <span>۲۴ نفر</span>
827
- </div>
828
- </div>
829
- <p>گفتگوی عمومی در هر زمینه‌ای</p>
830
- <div class="room-actions">
831
- <button class="action-btn copy">
832
- <i class="fas fa-link"></i>
833
- <span>لینک اتاق</span>
834
- </button>
835
- <button class="action-btn delete">
836
- <i class="fas fa-trash"></i>
837
- <span>ترک اتاق</span>
838
- </button>
839
- </div>
840
  </div>
841
  </div>
842
- </aside>
843
 
844
- <!-- Main Chat Area -->
845
- <main class="chat-area">
 
 
 
 
 
 
 
 
 
846
  <div class="chat-header">
847
- <div class="chat-title">
848
- <i class="fas fa-hashtag"></i>
849
- <span>توسعه‌دهندگان</span>
850
- </div>
851
- <div class="chat-actions">
852
- <button class="chat-actions-btn" title="اعضای اتاق">
853
- <i class="fas fa-users"></i>
854
- </button>
855
- <button class="chat-actions-btn" title="تنظیمات">
856
- <i class="fas fa-cog"></i>
857
  </button>
858
- </div>
859
- </div>
860
-
861
- <div class="messages-container">
862
- <!-- Message Example 1 -->
863
- <div class="message received">
864
- <div class="message-header">
865
- <span class="sender-name">علی رضایی</span>
866
- <span class="message-time">۱۰:۴۵</span>
867
- </div>
868
- <div class="message-content">
869
- سلام به همه! کسی تجربه کار با WebSocket برای چت ریل‌تایم داره؟
870
- </div>
871
- <div class="message-actions">
872
- <button class="message-action reply-btn" title="پاسخ">
873
- <i class="fas fa-reply"></i>
874
- </button>
875
- <button class="message-action react-btn" title="واکنش">
876
- <i class="far fa-smile"></i>
877
- </button>
878
  </div>
879
- <div class="reactions">
880
- <div class="reaction">
881
- <span>👍</span>
882
- <span class="reaction-count">۲</span>
883
- </div>
884
- <div class="reaction">
885
- <span>❤️</span>
886
- <span class="reaction-count">۱</span>
887
  </div>
888
  </div>
889
  </div>
890
 
891
- <!-- Message Example 2 -->
892
- <div class="message sent">
893
- <div class="message-header">
894
- <span class="sender-name">شما</span>
895
- <span class="message-time">۱۰:۴۸</span>
896
- </div>
897
- <div class="message-content">
898
- بله، من با Socket.IO کار کردم. واقعا کتابخونه خوبیه و پیاده‌سازی راحتی داره.
899
- </div>
900
- <div class="message-actions">
901
- <button class="message-action delete-btn" title="حذف">
902
- <i class="fas fa-trash"></i>
903
- </button>
904
- <button class="message-action react-btn" title="واکنش">
905
- <i class="far fa-smile"></i>
906
- </button>
907
- </div>
908
- </div>
909
-
910
- <!-- Message Example 3 with Reply -->
911
- <div class="message received">
912
- <div class="message-header">
913
- <span class="sender-name">سارا محمدی</span>
914
- <span class="message-time">۱۰:۵۰</span>
915
- </div>
916
- <div class="message-reply">
917
- در پاسخ به <span class="replying-to">شما</span>: بله، من با Socket.IO کار کردم...
918
- </div>
919
- <div class="message-content">
920
- منم برای پروژه‌م از Socket.IO استفاده کردم. مستنداتش خیلی خوبه.
921
- </div>
922
- <div class="message-actions">
923
- <button class="message-action reply-btn" title="پاسخ">
924
- <i class="fas fa-reply"></i>
925
- </button>
926
- <button class="message-action react-btn" title="واکنش">
927
- <i class="far fa-smile"></i>
928
- </button>
929
- </div>
930
- <div class="reactions">
931
- <div class="reaction">
932
- <span>👏</span>
933
- <span class="reaction-count">۳</span>
934
  </div>
935
- </div>
936
- </div>
937
-
938
- <!-- Message Example 4 -->
939
- <div class="message received">
940
- <div class="message-header">
941
- <span class="sender-name">محمد حسینی</span>
942
- <span class="message-time">۱۰:۵۳</span>
943
- </div>
944
- <div class="message-content">
945
- کسی تجربه استفاده از Pusher رو داره؟ برای پروژه‌های کوچیک خوبه؟
946
- </div>
947
- <div class="message-actions">
948
- <button class="message-action reply-btn" title="پاسخ">
949
- <i class="fas fa-reply"></i>
950
- </button>
951
- <button class="message-action react-btn" title="واکنش">
952
- <i class="far fa-smile"></i>
953
- </button>
954
  </div>
955
  </div>
956
  </div>
957
-
958
- <!-- Message Input Area -->
959
- <div class="input-area">
960
- <input type="text" class="message-input" placeholder="پیام خود را بنویسید...">
961
- <button class="send-btn">
962
- <span>ارسال</span>
 
 
 
 
 
 
 
963
  <i class="fas fa-paper-plane"></i>
964
  </button>
965
  </div>
966
- </main>
967
- </div>
968
 
969
- <!-- Authentication Modal -->
970
- <div class="modal" id="auth-modal">
 
971
  <div class="modal-content">
972
- <div class="modal-header">
973
- <h3 class="modal-title">ورود به چت روم</h3>
974
- <p class="modal-subtitle">لطفاً شماره موبایل خود را وارد کنید</p>
975
- </div>
976
-
977
- <div class="input-group">
978
- <label class="input-label">شماره موبایل</label>
979
- <div class="phone-input">
980
- <div class="country-code">+۹۸</div>
981
- <input type="tel" class="phone-number" placeholder="۹۱۲۳۴۵۶۷۸۹" maxlength="10">
982
- </div>
983
  </div>
984
-
985
- <div class="input-group" id="otp-group" style="display: none;">
986
- <label class="input-label">کد تایید</label>
987
- <div class="otp-group">
988
- <input type="text" class="otp-input" maxlength="1">
989
- <input type="text" class="otp-input" maxlength="1">
990
- <input type="text" class="otp-input" maxlength="1">
991
- <input type="text" class="otp-input" maxlength="1">
992
- <input type="text" class="otp-input" maxlength="1">
993
  </div>
994
  </div>
995
-
996
- <button class="submit-btn" id="submit-btn">دریافت کد تایید</button>
997
-
998
- <div class="modal-footer">
999
- <p>با ورود یا ثبت‌نام، شما با <a href="#">شرایط استفاده</a> و <a href="#">سیاست حفظ حریم خصوصی</a> ما موافقت می‌کنید.</p>
1000
- <p id="resend-text" style="display: none;">کد تایید را دریافت نکردید؟ <a class="resend-link">ارسال مجدد</a></p>
1001
  </div>
1002
  </div>
1003
  </div>
1004
 
1005
- <!-- Toast Notification -->
1006
- <div class="toast" id="toast">
1007
- <i class="fas fa-check-circle"></i>
1008
- <div class="toast-message">پیام با موفقیت ارسال شد!</div>
 
 
 
 
 
 
 
 
 
1009
  </div>
1010
 
 
 
 
1011
  <script>
1012
- document.addEventListener('DOMContentLoaded', function() {
1013
- // Elements
1014
- const authModal = document.getElementById('auth-modal');
1015
- const submitBtn = document.getElementById('submit-btn');
1016
- const otpGroup = document.getElementById('otp-group');
1017
- const resendText = document.getElementById('resend-text');
1018
- const phoneInput = document.querySelector('.phone-number');
1019
- const otpInputs = document.querySelectorAll('.otp-input');
1020
- const toast = document.getElementById('toast');
1021
- const messageInput = document.querySelector('.message-input');
1022
- const sendBtn = document.querySelector('.send-btn');
1023
- const messagesContainer = document.querySelector('.messages-container');
1024
- const roomCards = document.querySelectorAll('.room-card');
1025
- const copyButtons = document.querySelectorAll('.action-btn.copy');
1026
- const replyButtons = document.querySelectorAll('.reply-btn');
1027
- const reactButtons = document.querySelectorAll('.react-btn');
1028
- const deleteButtons = document.querySelectorAll('.delete-btn');
1029
- const addRoomBtn = document.querySelector('.add-room-btn');
1030
-
1031
- // Show authentication modal on page load
1032
- setTimeout(() => {
1033
- authModal.classList.add('active');
1034
- }, 1000);
1035
-
1036
- // Handle phone submission
1037
- submitBtn.addEventListener('click', function() {
1038
- if (phoneInput.value.length === 10) {
1039
- otpGroup.style.display = 'flex';
1040
- resendText.style.display = 'block';
1041
- submitBtn.textContent = 'تایید و ورود';
1042
-
1043
- // Focus on first OTP input
1044
- otpInputs[0].focus();
1045
-
1046
- // Handle OTP inputs
1047
- otpInputs.forEach((input, index) => {
1048
- input.addEventListener('input', function() {
1049
- if (this.value.length === 1 && index < otpInputs.length - 1) {
1050
- otpInputs[index + 1].focus();
1051
- }
1052
- });
1053
-
1054
- input.addEventListener('keydown', function(e) {
1055
- if (e.key === 'Backspace' && this.value.length === 0 && index > 0) {
1056
- otpInputs[index - 1].focus();
1057
- }
1058
- });
1059
- });
1060
-
1061
- // Change submit button behavior for OTP verification
1062
- submitBtn.onclick = function() {
1063
- let otpComplete = true;
1064
- otpInputs.forEach(input => {
1065
- if (input.value === '') otpComplete = false;
1066
- });
1067
-
1068
- if (otpComplete) {
1069
- authModal.classList.remove('active');
1070
- showToast('ورود با موفقیت انجام شد!');
1071
- }
1072
- };
1073
- } else {
1074
- showToast('لطفاً شماره موبایل را صحیح وارد کنید', 'error');
1075
- }
1076
- });
1077
-
1078
- // Handle sending messages
1079
- sendBtn.addEventListener('click', sendMessage);
1080
 
1081
- messageInput.addEventListener('keypress', function(e) {
 
1082
  if (e.key === 'Enter') {
1083
  sendMessage();
1084
  }
1085
  });
 
 
 
 
 
 
 
 
1086
 
1087
- function sendMessage() {
1088
- const message = messageInput.value.trim();
1089
- if (message) {
1090
- // Create new message element
1091
- const newMessage = document.createElement('div');
1092
- newMessage.className = 'message sent';
1093
- newMessage.innerHTML = `
1094
- <div class="message-header">
1095
- <span class="sender-name">شما</span>
1096
- <span class="message-time">${getCurrentTime()}</span>
1097
- </div>
1098
- <div class="message-content">${message}</div>
1099
- <div class="message-actions">
1100
- <button class="message-action delete-btn" title="حذف">
1101
- <i class="fas fa-trash"></i>
1102
- </button>
1103
- <button class="message-action react-btn" title="واکنش">
1104
- <i class="far fa-smile"></i>
1105
- </button>
1106
- </div>
1107
- `;
1108
-
1109
- // Add to messages container
1110
- messagesContainer.appendChild(newMessage);
1111
-
1112
- // Clear input
1113
- messageInput.value = '';
1114
-
1115
- // Show toast
1116
- showToast('پیام با موفقیت ارسال شد!');
1117
-
1118
- // Scroll to bottom
1119
- messagesContainer.scrollTop = messagesContainer.scrollHeight;
1120
-
1121
- // Add event listeners to new buttons
1122
- addMessageEventListeners(newMessage);
1123
- }
1124
  }
1125
-
1126
- // Get current time in HH:MM format
1127
- function getCurrentTime() {
1128
- const now = new Date();
1129
- return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
1130
  }
1131
-
1132
- // Show toast notification
1133
- function showToast(message, type = 'success') {
1134
- toast.querySelector('.toast-message').textContent = message;
1135
- toast.className = `toast ${type}`;
1136
- toast.classList.add('show');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1137
 
1138
- setTimeout(() => {
1139
- toast.classList.remove('show');
1140
- }, 3000);
1141
- }
1142
-
1143
- // Room selection
1144
- roomCards.forEach(card => {
1145
- card.addEventListener('click', function() {
1146
- // Remove active class from all cards
1147
- roomCards.forEach(c => c.classList.remove('active'));
1148
-
1149
- // Add active class to clicked card
1150
- this.classList.add('active');
1151
-
1152
- // Update chat title
1153
- document.querySelector('.chat-title span').textContent =
1154
- this.querySelector('.room-title span').textContent;
1155
-
1156
- // Show room switched toast
1157
- showToast(`اتاق گفتگو تغییر کرد`);
1158
- });
1159
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1160
 
1161
- // Copy room link
1162
- copyButtons.forEach(button => {
1163
- button.addEventListener('click', function(e) {
1164
- e.stopPropagation();
1165
- navigator.clipboard.writeText(window.location.href);
1166
- showToast('لینک اتاق در کلیپ‌بورد کپی شد');
1167
- });
1168
- });
 
1169
 
1170
- // Reply to message
1171
- function handleReply(e) {
1172
- e.stopPropagation();
1173
- const message = this.closest('.message');
1174
- const sender = message.querySelector('.sender-name').textContent;
1175
- const content = message.querySelector('.message-content').textContent;
1176
-
1177
- messageInput.value = `در پاسخ به ${sender}: ${content}`;
1178
- messageInput.focus();
1179
- showToast('در حال پاسخ به پیام');
1180
- }
1181
 
1182
- // Show reaction selector
1183
- function handleReact(e) {
1184
- e.stopPropagation();
1185
- const message = this.closest('.message');
1186
-
1187
- // Create reaction selector
1188
- let reactionSelector = message.querySelector('.reaction-selector');
1189
- if (!reactionSelector) {
1190
- reactionSelector = document.createElement('div');
1191
- reactionSelector.className = 'reaction-selector';
1192
- reactionSelector.innerHTML = `
1193
- <div class="reaction-option">👍</div>
1194
- <div class="reaction-option">❤️</div>
1195
- <div class="reaction-option">😂</div>
1196
- <div class="reaction-option">😮</div>
1197
- <div class="reaction-option">👏</div>
1198
- <div class="reaction-option">👎</div>
1199
- `;
1200
- message.appendChild(reactionSelector);
1201
-
1202
- // Position selector
1203
- const rect = message.getBoundingClientRect();
1204
- reactionSelector.style.right = '10px';
1205
-
1206
- // Add event listeners to reaction options
1207
- reactionSelector.querySelectorAll('.reaction-option').forEach(option => {
1208
- option.addEventListener('click', function() {
1209
- addReactionToMessage(message, this.textContent);
1210
- reactionSelector.remove();
1211
- });
1212
- });
1213
-
1214
- // Close selector when clicking outside
1215
- setTimeout(() => {
1216
- document.addEventListener('click', function closeSelector() {
1217
- reactionSelector.remove();
1218
- document.removeEventListener('click', closeSelector);
1219
- });
1220
- }, 100);
1221
- } else {
1222
- reactionSelector.remove();
1223
- }
1224
- }
1225
 
1226
- // Add reaction to message
1227
- function addReactionToMessage(message, reaction) {
1228
- let reactionsContainer = message.querySelector('.reactions');
1229
- if (!reactionsContainer) {
1230
- reactionsContainer = document.createElement('div');
1231
- reactionsContainer.className = 'reactions';
1232
- message.appendChild(reactionsContainer);
1233
- }
1234
-
1235
- // Check if reaction already exists
1236
- let existingReaction = null;
1237
- reactionsContainer.querySelectorAll('.reaction').forEach(reactionEl => {
1238
- if (reactionEl.textContent.includes(reaction)) {
1239
- existingReaction = reactionEl;
1240
- }
1241
- });
1242
-
1243
- if (existingReaction) {
1244
- // Update count
1245
- const countEl = existingReaction.querySelector('.reaction-count');
1246
- countEl.textContent = parseInt(countEl.textContent) + 1;
1247
- } else {
1248
- // Create new reaction element
1249
- const reactionEl = document.createElement('div');
1250
- reactionEl.className = 'reaction';
1251
- reactionEl.innerHTML = `
1252
- <span>${reaction}</span>
1253
- <span class="reaction-count">1</span>
1254
- `;
1255
- reactionsContainer.appendChild(reactionEl);
1256
- }
1257
-
1258
- showToast('واکنش شما ثبت شد');
1259
- }
1260
 
1261
- // Delete message
1262
- function handleDelete(e) {
1263
- e.stopPropagation();
1264
- const message = this.closest('.message');
1265
- if (confirm('آیا از حذف این پیام اطمینان دارید؟')) {
1266
- message.style.animation = 'fadeOut 0.3s forwards';
1267
- setTimeout(() => {
1268
- message.remove();
1269
- showToast('پیام حذف شد');
1270
- }, 300);
1271
  }
1272
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1273
 
1274
- // Add event listeners to message actions
1275
- function addMessageEventListeners(message) {
1276
- message.querySelector('.reply-btn')?.addEventListener('click', handleReply);
1277
- message.querySelector('.react-btn')?.addEventListener('click', handleReact);
1278
- message.querySelector('.delete-btn')?.addEventListener('click', handleDelete);
 
 
 
 
 
 
 
 
1279
  }
 
 
1280
 
1281
- // Initialize event listeners for existing messages
1282
- document.querySelectorAll('.message').forEach(addMessageEventListeners);
 
1283
 
1284
- // Add new room
1285
- addRoomBtn.addEventListener('click', function() {
1286
- const roomName = prompt('نام اتاق جدید را وارد کنید:');
1287
- if (roomName && roomName.trim() !== '') {
1288
- const roomList = document.querySelector('.room-list');
1289
-
1290
- const newRoom = document.createElement('div');
1291
- newRoom.className = 'room-card';
1292
- newRoom.innerHTML = `
1293
- <div class="room-header">
1294
- <div class="room-title">
1295
- <i class="fas fa-hashtag"></i>
1296
- <span>${roomName}</span>
1297
- </div>
1298
- <div class="room-members">
1299
- <i class="fas fa-user"></i>
1300
- <span>۱ نفر</span>
1301
- </div>
1302
- </div>
1303
- <p>اتاق جدید</p>
1304
- <div class="room-actions">
1305
- <button class="action-btn copy">
1306
- <i class="fas fa-link"></i>
1307
- <span>لینک اتاق</span>
1308
- </button>
1309
- <button class="action-btn delete">
1310
- <i class="fas fa-trash"></i>
1311
- <span>ترک اتاق</span>
1312
- </button>
1313
- </div>
1314
- `;
1315
-
1316
- roomList.prepend(newRoom);
1317
-
1318
- // Add event listeners to new room
1319
- newRoom.addEventListener('click', function() {
1320
- roomCards.forEach(c => c.classList.remove('active'));
1321
- this.classList.add('active');
1322
- document.querySelector('.chat-title span').textContent = roomName;
1323
- showToast(`اتاق ${roomName} ایجاد شد`);
1324
- });
1325
-
1326
- newRoom.querySelector('.action-btn.copy').addEventListener('click', function(e) {
1327
- e.stopPropagation();
1328
- navigator.clipboard.writeText(window.location.href);
1329
- showToast('لینک اتاق در کلیپ‌بورد کپی شد');
1330
- });
1331
-
1332
- newRoom.querySelector('.action-btn.delete').addEventListener('click', function(e) {
1333
- e.stopPropagation();
1334
- if (confirm(`آیا از ترک اتاق ${roomName} اطمینان دارید؟`)) {
1335
- newRoom.remove();
1336
- showToast(`اتاق ${roomName} ترک شد`);
1337
- }
1338
- });
1339
-
1340
- // Activate the new room
1341
- roomCards.forEach(c => c.classList.remove('active'));
1342
- newRoom.classList.add('active');
1343
- document.querySelector('.chat-title span').textContent = roomName;
1344
  }
 
 
 
 
 
 
 
 
 
 
1345
  });
1346
-
1347
- // Add CSS for fadeOut animation
1348
- const style = document.createElement('style');
1349
- style.textContent = `
1350
- @keyframes fadeOut {
1351
- from { opacity: 1; transform: translateY(0); }
1352
- to { opacity: 0; transform: translateY(20px); }
1353
- }
1354
- `;
1355
- document.head.appendChild(style);
1356
- });
1357
- </script>
1358
- </body>
1359
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>چت‌روم پیشرفته</title>
7
+
8
+ <!-- اتصال فونت فارسی وزیرمتن -->
9
+ <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet" type="text/css" />
10
+
11
+ <!-- اتصال کتابخانه آیکون FontAwesome -->
12
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
+
14
  <style>
15
  :root {
16
+ --primary-color: #6C63FF;
17
+ --secondary-color: #4CAF50;
18
+ --danger-color: #FF5252;
19
+ --bg-color: #f4f7f6;
20
+ --chat-bg: #e5ddd5;
21
+ --white: #ffffff;
22
+ --text-dark: #333333;
23
+ --text-light: #777777;
24
+ --shadow: 0 4px 15px rgba(0,0,0,0.1);
25
+ --radius: 12px;
26
+ --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 
 
 
 
27
  }
28
 
29
  * {
30
+ box-sizing: border-box;
31
  margin: 0;
32
  padding: 0;
33
+ outline: none;
 
34
  }
35
 
36
  body {
37
+ font-family: 'Vazirmatn', sans-serif;
38
+ background-color: var(--bg-color);
39
+ color: var(--text-dark);
40
+ height: 100vh;
41
  overflow: hidden;
42
+ display: flex;
43
+ flex-direction: column;
 
 
 
 
 
 
 
 
 
 
 
44
  }
45
 
46
+ /* --- Header / Branding --- */
47
+ .app-header {
48
+ background: var(--white);
49
+ padding: 10px 20px;
50
  display: flex;
51
  justify-content: space-between;
52
  align-items: center;
53
+ box-shadow: 0 2px 5px rgba(0,0,0,0.05);
 
 
 
 
 
 
54
  z-index: 100;
55
  }
56
 
57
+ .brand-link {
58
+ font-size: 0.8rem;
59
+ color: var(--primary-color);
60
+ text-decoration: none;
61
+ font-weight: bold;
62
  }
63
 
64
+ /* --- Views Management --- */
65
+ .view {
66
+ display: none;
67
+ height: calc(100vh - 50px);
68
+ width: 100%;
69
+ overflow-y: auto;
70
+ position: relative;
71
+ animation: fadeIn 0.4s ease;
72
  }
73
 
74
+ .view.active {
75
+ display: flex;
76
+ flex-direction: column;
 
 
 
77
  }
78
 
79
+ @keyframes fadeIn {
80
+ from { opacity: 0; transform: translateY(10px); }
81
+ to { opacity: 1; transform: translateY(0); }
82
+ }
83
+
84
+ /* --- Login View --- */
85
+ #login-view {
86
+ justify-content: center;
87
  align-items: center;
88
+ background: linear-gradient(135deg, var(--primary-color), #8E84FF);
89
+ color: var(--white);
90
+ }
91
+
92
+ .login-card {
93
+ background: var(--white);
94
+ padding: 2rem;
95
+ border-radius: var(--radius);
96
+ box-shadow: 0 10px 25px rgba(0,0,0,0.2);
97
+ width: 90%;
98
+ max-width: 400px;
99
+ text-align: center;
100
+ color: var(--text-dark);
101
  }
102
 
103
+ .login-card h2 {
104
+ margin-bottom: 1.5rem;
105
+ color: var(--primary-color);
106
  }
107
 
108
+ .form-group {
109
+ margin-bottom: 1rem;
110
+ text-align: right;
111
+ }
112
+
113
+ .form-group label {
114
+ display: block;
115
+ margin-bottom: 0.5rem;
116
+ font-size: 0.9rem;
117
+ color: var(--text-light);
118
  }
119
 
120
+ .form-input {
121
+ width: 100%;
122
+ padding: 12px;
123
+ border: 2px solid #eee;
124
+ border-radius: 8px;
125
+ font-family: inherit;
 
 
126
  transition: var(--transition);
 
127
  }
128
 
129
+ .form-input:focus {
130
+ border-color: var(--primary-color);
131
+ }
132
+
133
+ .captcha-container {
134
  display: flex;
135
+ gap: 10px;
136
  align-items: center;
137
+ margin-bottom: 1rem;
138
  }
139
 
140
+ .captcha-code {
141
+ background: #eee;
142
+ padding: 10px 15px;
143
+ border-radius: 8px;
144
+ font-weight: bold;
145
+ letter-spacing: 3px;
146
+ font-family: monospace;
147
+ user-select: none;
148
  }
149
 
150
+ .btn {
151
+ background: var(--primary-color);
152
+ color: var(--white);
153
  border: none;
154
+ padding: 12px 24px;
155
+ border-radius: 8px;
 
156
  cursor: pointer;
157
+ font-family: inherit;
158
+ font-size: 1rem;
159
+ width: 100%;
160
  transition: var(--transition);
 
 
 
161
  }
162
 
163
+ .btn:hover {
164
+ transform: translateY(-2px);
165
+ box-shadow: 0 5px 15px rgba(108, 99, 255, 0.4);
166
  }
167
 
168
+ .btn-secondary {
169
+ background: var(--secondary-color);
 
 
170
  }
171
 
172
+ .btn-danger {
173
+ background: var(--danger-color);
 
 
 
 
 
174
  }
175
 
176
+ /* --- Dashboard View --- */
177
+ #dashboard-view {
178
+ background: var(--bg-color);
179
  }
180
 
181
+ .dash-header {
182
+ background: var(--white);
183
+ padding: 15px 20px;
184
+ display: flex;
185
+ align-items: center;
186
+ justify-content: space-between;
187
+ box-shadow: 0 2px 5px rgba(0,0,0,0.05);
188
  }
189
 
190
+ .user-profile {
191
  display: flex;
 
192
  align-items: center;
193
+ gap: 10px;
194
+ cursor: pointer;
195
+ }
196
+
197
+ .user-avatar {
198
+ width: 45px;
199
+ height: 45px;
200
+ border-radius: 50%;
201
+ object-fit: cover;
202
+ border: 2px solid var(--primary-color);
203
+ }
204
+
205
+ .user-info h3 {
206
+ font-size: 1rem;
207
+ margin-bottom: 2px;
208
+ }
209
+
210
+ .user-info p {
211
+ font-size: 0.8rem;
212
+ color: var(--text-light);
213
+ }
214
+
215
+ .room-list {
216
+ padding: 20px;
217
+ flex: 1;
218
+ overflow-y: auto;
219
  }
220
 
221
+ .room-card {
222
+ background: var(--white);
223
+ padding: 15px;
224
+ border-radius: var(--radius);
225
+ margin-bottom: 15px;
226
  display: flex;
227
  align-items: center;
228
+ justify-content: space-between;
229
+ cursor: pointer;
230
+ transition: var(--transition);
231
+ box-shadow: 0 2px 8px rgba(0,0,0,0.03);
232
  }
233
 
234
+ .room-card:hover {
235
+ transform: scale(1.02);
236
+ box-shadow: 0 5px 15px rgba(0,0,0,0.08);
237
  }
238
 
239
+ .room-details {
240
  display: flex;
241
+ align-items: center;
242
+ gap: 15px;
243
  }
244
 
245
+ .room-icon {
246
+ width: 50px;
247
+ height: 50px;
248
+ background: #eef2ff;
249
+ border-radius: 12px;
250
+ display: flex;
251
+ align-items: center;
252
+ justify-content: center;
253
+ color: var(--primary-color);
254
+ font-size: 1.2rem;
255
  }
256
 
257
+ .room-text h4 {
258
+ margin-bottom: 4px;
 
 
 
259
  }
260
 
261
+ .room-text span {
 
 
 
 
 
262
  font-size: 0.8rem;
263
+ color: var(--text-light);
264
+ }
265
+
266
+ .online-badge {
267
  display: flex;
268
  align-items: center;
269
  gap: 5px;
270
+ font-size: 0.8rem;
271
+ background: #e8f5e9;
272
+ color: var(--secondary-color);
273
+ padding: 4px 8px;
274
+ border-radius: 20px;
275
  }
276
 
277
+ .dot {
278
+ width: 8px;
279
+ height: 8px;
280
+ background: var(--secondary-color);
281
+ border-radius: 50%;
282
  }
283
 
284
+ .fab-create {
285
+ position: absolute;
286
+ bottom: 30px;
287
+ left: 30px;
288
+ width: 60px;
289
+ height: 60px;
290
+ border-radius: 50%;
291
+ background: var(--primary-color);
292
+ color: var(--white);
293
+ display: flex;
294
+ align-items: center;
295
+ justify-content: center;
296
+ font-size: 1.5rem;
297
+ box-shadow: 0 5px 20px rgba(108, 99, 255, 0.5);
298
+ cursor: pointer;
299
+ transition: var(--transition);
300
  }
301
 
302
+ .fab-create:hover {
303
+ transform: rotate(90deg) scale(1.1);
 
304
  }
305
 
306
+ /* --- Chat View --- */
307
+ #chat-view {
308
+ background: var(--chat-bg);
 
 
 
309
  }
310
 
311
  .chat-header {
312
+ background: var(--white);
313
+ padding: 10px 15px;
314
  display: flex;
 
315
  align-items: center;
316
+ justify-content: space-between;
317
+ box-shadow: 0 1px 5px rgba(0,0,0,0.1);
318
+ z-index: 10;
319
  }
320
 
321
+ .chat-info {
 
 
322
  display: flex;
323
  align-items: center;
324
  gap: 10px;
325
  }
326
 
327
+ .btn-back {
328
+ background: none;
329
+ border: none;
330
+ font-size: 1.2rem;
331
+ color: var(--text-dark);
332
+ cursor: pointer;
333
+ padding: 5px;
334
+ }
335
+
336
+ .chat-stats {
337
+ font-size: 0.75rem;
338
+ color: var(--secondary-color);
339
+ margin-top: 2px;
340
  }
341
 
342
  .chat-actions {
343
+ position: relative;
 
344
  }
345
 
346
+ .btn-menu {
347
+ background: none;
348
  border: none;
 
349
  font-size: 1.2rem;
350
+ color: var(--text-dark);
351
+ cursor: pointer;
352
+ padding: 5px 10px;
353
+ }
354
+
355
+ .menu-dropdown {
356
+ position: absolute;
357
+ top: 100%;
358
+ left: 0;
359
+ background: var(--white);
360
+ border-radius: 8px;
361
+ box-shadow: 0 5px 20px rgba(0,0,0,0.15);
362
+ width: 150px;
363
+ display: none;
364
+ flex-direction: column;
365
+ overflow: hidden;
366
+ }
367
+
368
+ .menu-dropdown.show {
369
+ display: flex;
370
+ }
371
+
372
+ .menu-item {
373
+ padding: 10px 15px;
374
  cursor: pointer;
 
 
 
 
375
  display: flex;
376
  align-items: center;
377
+ gap: 10px;
378
+ font-size: 0.9rem;
379
+ color: var(--text-dark);
380
+ transition: background 0.2s;
381
+ }
382
+
383
+ .menu-item:hover {
384
+ background: #f0f0f0;
385
  }
386
 
387
+ .menu-item.danger {
388
+ color: var(--danger-color);
 
389
  }
390
 
391
  .messages-container {
392
  flex: 1;
393
+ padding: 15px;
394
  overflow-y: auto;
 
395
  display: flex;
396
  flex-direction: column;
397
+ gap: 10px;
 
398
  }
399
 
400
  .message {
401
+ max-width: 75%;
402
+ padding: 10px 15px;
403
  border-radius: 12px;
404
  position: relative;
405
+ font-size: 0.95rem;
406
+ line-height: 1.5;
407
+ animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 
 
 
 
 
 
408
  }
409
 
410
+ @keyframes popIn {
411
+ from { transform: scale(0.8); opacity: 0; }
412
+ to { transform: scale(1); opacity: 1; }
 
413
  }
414
 
415
  .message.received {
416
  align-self: flex-start;
417
+ background: var(--white);
418
+ border-bottom-right-radius: 2px;
419
+ box-shadow: 0 1px 2px rgba(0,0,0,0.1);
420
  }
421
 
422
+ .message.sent {
423
+ align-self: flex-end;
424
+ background: #dcf8c6;
425
+ border-bottom-left-radius: 2px;
426
+ box-shadow: 0 1px 2px rgba(0,0,0,0.1);
427
  }
428
 
429
+ .msg-meta {
430
+ font-size: 0.7rem;
431
+ color: #999;
432
+ text-align: left;
433
+ margin-top: 5px;
434
+ display: flex;
435
+ justify-content: space-between;
436
+ align-items: center;
437
  }
438
 
439
+ .msg-actions {
440
+ position: absolute;
441
+ top: -10px;
442
+ background: var(--white);
443
+ border-radius: 20px;
444
+ padding: 2px 8px;
445
+ box-shadow: 0 2px 5px rgba(0,0,0,0.2);
446
+ display: none;
447
+ gap: 8px;
448
  font-size: 0.8rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
449
  }
450
 
451
+ .message:hover .msg-actions {
452
  display: flex;
 
 
453
  }
454
 
455
+ .action-icon {
 
 
 
456
  cursor: pointer;
457
+ color: var(--text-light);
458
+ transition: color 0.2s;
 
459
  }
460
 
461
+ .action-icon:hover {
462
+ color: var(--primary-color);
463
  }
464
 
465
+ .reply-preview {
466
+ font-size: 0.8rem;
467
+ color: var(--text-light);
468
+ border-right: 3px solid var(--primary-color);
469
+ padding-right: 8px;
470
+ margin-bottom: 5px;
471
+ background: rgba(0,0,0,0.05);
472
+ padding: 4px;
473
+ border-radius: 4px;
474
+ }
475
+
476
+ .chat-input-area {
477
+ background: var(--white);
478
+ padding: 10px;
479
  display: flex;
480
+ align-items: flex-end;
481
+ gap: 10px;
482
  }
483
 
484
+ .reply-bar {
485
+ background: #f0f0f0;
486
+ width: 100%;
487
+ padding: 5px 10px;
 
488
  font-size: 0.8rem;
 
 
489
  display: flex;
490
+ justify-content: space-between;
491
  align-items: center;
492
+ border-bottom: 1px solid #ddd;
493
+ display: none;
 
 
 
 
 
 
 
494
  }
495
 
496
+ .reply-bar.active {
497
  display: flex;
 
 
 
 
 
 
 
498
  }
499
 
500
+ #message-input {
501
  flex: 1;
502
+ padding: 10px;
503
+ border: 1px solid #ddd;
504
+ border-radius: 20px;
505
+ resize: none;
506
+ height: 40px;
507
+ max-height: 100px;
508
+ font-family: inherit;
 
 
 
 
 
 
 
 
 
509
  }
510
 
511
+ .btn-send {
512
+ width: 40px;
513
+ height: 40px;
514
+ border-radius: 50%;
515
+ background: var(--primary-color);
516
+ color: var(--white);
517
  border: none;
 
 
 
 
 
518
  display: flex;
519
  align-items: center;
520
+ justify-content: center;
521
+ cursor: pointer;
522
+ transition: var(--transition);
523
  }
524
 
525
+ .btn-send:hover {
526
+ background: #5a52d5;
 
527
  }
528
 
529
+ /* --- Modals --- */
530
+ .modal-overlay {
531
  position: fixed;
532
  top: 0;
533
  left: 0;
534
  width: 100%;
535
  height: 100%;
536
+ background: rgba(0,0,0,0.5);
537
+ display: none;
 
 
538
  justify-content: center;
539
+ align-items: center;
540
  z-index: 1000;
541
+ backdrop-filter: blur(3px);
 
 
542
  }
543
 
544
+ .modal-overlay.active {
545
+ display: flex;
 
546
  }
547
 
548
  .modal-content {
549
+ background: var(--white);
550
+ padding: 20px;
551
+ border-radius: var(--radius);
552
+ width: 90%;
553
+ max-width: 350px;
554
+ animation: slideUp 0.3s ease;
 
 
 
 
555
  }
556
 
557
+ @keyframes slideUp {
558
+ from { transform: translateY(20px); opacity: 0; }
559
+ to { transform: translateY(0); opacity: 1; }
 
 
 
 
560
  }
561
 
562
+ .avatar-selection {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
563
  display: flex;
564
  gap: 10px;
565
+ margin-top: 10px;
566
+ justify-content: center;
567
+ flex-wrap: wrap;
568
  }
569
 
570
+ .avatar-option {
571
+ width: 50px;
572
+ height: 50px;
573
+ border-radius: 50%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
574
  cursor: pointer;
575
+ border: 2px solid transparent;
 
576
  transition: var(--transition);
577
  }
578
 
579
+ .avatar-option.selected {
580
+ border-color: var(--primary-color);
581
+ transform: scale(1.1);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
582
  }
583
 
584
+ /* --- Toast Notification --- */
585
  .toast {
586
  position: fixed;
587
  bottom: 20px;
588
  left: 50%;
589
+ transform: translateX(-50%);
590
+ background: rgba(50, 50, 50, 0.9);
591
+ color: var(--white);
592
+ padding: 10px 20px;
593
+ border-radius: 30px;
594
+ font-size: 0.9rem;
 
 
 
 
 
595
  opacity: 0;
596
+ pointer-events: none;
597
+ transition: opacity 0.3s;
598
+ z-index: 2000;
599
  }
600
 
601
  .toast.show {
 
602
  opacity: 1;
603
  }
604
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
605
  </style>
606
  </head>
607
  <body>
608
+
609
  <!-- Header -->
610
+ <header class="app-header">
611
+ <div style="font-weight: bold; color: var(--primary-color);">چت‌روم من</div>
612
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="brand-link">Built with anycoder</a>
 
 
 
 
 
 
613
  </header>
614
 
615
+ <main>
616
+ <!-- LOGIN PAGE -->
617
+ <section id="login-view" class="view active">
618
+ <div class="login-card">
619
+ <h2>ورود به حساب</h2>
620
+ <form id="login-form">
621
+ <div class="form-group">
622
+ <label>شماره موبایل</label>
623
+ <input type="tel" id="phone-input" class="form-input" placeholder="0912..." required>
 
 
 
 
 
 
 
 
 
 
 
 
 
624
  </div>
625
+
626
+ <div class="form-group">
627
+ <label>کد امنیتی</label>
628
+ <div class="captcha-container">
629
+ <div class="captcha-code" id="captcha-display">1234</div>
630
+ <button type="button" class="btn" style="width: auto; padding: 5px 10px; font-size: 0.8rem;" onclick="generateCaptcha()">
631
+ <i class="fas fa-sync"></i>
632
+ </button>
633
+ <input type="text" id="captcha-input" class="form-input" placeholder="کد را وارد کنید" required>
 
 
 
 
 
 
 
 
 
 
 
 
 
634
  </div>
635
  </div>
636
+
637
+ <button type="submit" class="btn">ورود به داشبورد</button>
638
+ </form>
639
+ </div>
640
+ </section>
641
+
642
+ <!-- DASHBOARD PAGE -->
643
+ <section id="dashboard-view" class="view">
644
+ <div class="dash-header">
645
+ <div class="user-profile" onclick="openProfileModal()">
646
+ <img src="https://ui-avatars.com/api/?name=User&background=random" alt="Avatar" class="user-avatar" id="dash-avatar">
647
+ <div class="user-info">
648
+ <h3 id="dash-username">کاربر مهمان</h3>
649
+ <p id="dash-phone">پروفایل</p>
650
  </div>
651
+ <i class="fas fa-chevron-down" style="font-size: 0.8rem; margin-right: 5px;"></i>
652
  </div>
653
+ <div>
654
+ <i class="fas fa-cog" style="color: var(--text-light); cursor: pointer;" onclick="openProfileModal()"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
655
  </div>
656
  </div>
 
657
 
658
+ <div class="room-list" id="room-list-container">
659
+ <!-- Rooms will be injected here via JS -->
660
+ </div>
661
+
662
+ <div class="fab-create" onclick="openCreateRoomModal()">
663
+ <i class="fas fa-plus"></i>
664
+ </div>
665
+ </section>
666
+
667
+ <!-- CHAT ROOM PAGE -->
668
+ <section id="chat-view" class="view">
669
  <div class="chat-header">
670
+ <div class="chat-info">
671
+ <button class="btn-back" onclick="switchView('dashboard-view')">
672
+ <i class="fas fa-arrow-right"></i>
 
 
 
 
 
 
 
673
  </button>
674
+ <div class="room-icon" id="chat-room-icon" style="width: 40px; height: 40px; font-size: 1rem;">
675
+ <i class="fas fa-users"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
676
  </div>
677
+ <div>
678
+ <h4 id="chat-room-name">نام اتاق</h4>
679
+ <div class="chat-stats">
680
+ <span id="chat-online-count" style="display: flex; align-items: center; gap: 4px;">
681
+ <span class="dot"></span> 0 آنلاین
682
+ </span>
683
+ <span style="margin: 0 5px;">|</span>
684
+ <span id="chat-total-count">0 عضو</span>
685
  </div>
686
  </div>
687
  </div>
688
 
689
+ <div class="chat-actions">
690
+ <button class="btn-menu" onclick="toggleChatMenu()">
691
+ <i class="fas fa-ellipsis-v"></i>
692
+ </button>
693
+ <div class="menu-dropdown" id="chat-menu-dropdown">
694
+ <div class="menu-item" onclick="shareGroup()">
695
+ <i class="fas fa-share-alt"></i> اشتراک‌گذاری
696
+ </div>
697
+ <div class="menu-item danger" onclick="deleteGroup()">
698
+ <i class="fas fa-trash"></i> حذف گروه
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
699
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
700
  </div>
701
  </div>
702
  </div>
703
+
704
+ <div class="messages-container" id="messages-container">
705
+ <!-- Messages injected here -->
706
+ </div>
707
+
708
+ <div class="reply-bar" id="reply-bar">
709
+ <span id="reply-text-preview">در حال پاسخ به...</span>
710
+ <i class="fas fa-times" style="cursor: pointer;" onclick="cancelReply()"></i>
711
+ </div>
712
+
713
+ <div class="chat-input-area">
714
+ <input type="text" id="message-input" placeholder="پیام خود را بنویسید..." autocomplete="off">
715
+ <button class="btn-send" onclick="sendMessage()">
716
  <i class="fas fa-paper-plane"></i>
717
  </button>
718
  </div>
719
+ </section>
720
+ </main>
721
 
722
+ <!-- Modals -->
723
+ <!-- Profile Modal -->
724
+ <div class="modal-overlay" id="profile-modal">
725
  <div class="modal-content">
726
+ <h3>تنظیمات پروفایل</h3>
727
+ <div class="form-group" style="margin-top: 15px;">
728
+ <label>نام نمایشی</label>
729
+ <input type="text" id="edit-name" class="form-input">
 
 
 
 
 
 
 
730
  </div>
731
+ <div class="form-group">
732
+ <label>انتخاب آواتار</label>
733
+ <div class="avatar-selection" id="avatar-selection">
734
+ <!-- Avatars generated via JS -->
 
 
 
 
 
735
  </div>
736
  </div>
737
+ <div style="display: flex; gap: 10px; margin-top: 20px;">
738
+ <button class="btn btn-secondary" onclick="saveProfile()">ذخیره</button>
739
+ <button class="btn" style="background: #ccc;" onclick="closeModal('profile-modal')">انصراف</button>
 
 
 
740
  </div>
741
  </div>
742
  </div>
743
 
744
+ <!-- Create Room Modal -->
745
+ <div class="modal-overlay" id="create-room-modal">
746
+ <div class="modal-content">
747
+ <h3>ساخت اتاق جدید</h3>
748
+ <div class="form-group" style="margin-top: 15px;">
749
+ <label>نام اتاق</label>
750
+ <input type="text" id="new-room-name" class="form-input" placeholder="مثلاً: برنامه نویسان">
751
+ </div>
752
+ <div style="display: flex; gap: 10px; margin-top: 20px;">
753
+ <button class="btn btn-secondary" onclick="createRoom()">ایجاد</button>
754
+ <button class="btn" style="background: #ccc;" onclick="closeModal('create-room-modal')">انصراف</button>
755
+ </div>
756
+ </div>
757
  </div>
758
 
759
+ <!-- Toast -->
760
+ <div id="toast" class="toast">پیام سیستم</div>
761
+
762
  <script>
763
+ // --- State Management ---
764
+ const state = {
765
+ currentUser: {
766
+ name: 'کاربر',
767
+ phone: '',
768
+ avatar: 'https://ui-avatars.com/api/?name=User&background=6C63FF&color=fff'
769
+ },
770
+ currentCaptcha: '',
771
+ currentRoomId: null,
772
+ replyTo: null, // { text: '', id: '' }
773
+ rooms: [
774
+ { id: 1, name: 'عمومی', online: 12, total: 145, icon: 'fa-globe', color: '#4CAF50' },
775
+ { id: 2, name: 'طراحی UI/UX', online: 5, total: 32, icon: 'fa-paint-brush', color: '#FF9800' },
776
+ { id: 3, name: 'برنامه نویسی', online: 8, total: 89, icon: 'fa-code', color: '#2196F3' }
777
+ ],
778
+ messages: {
779
+ 1: [
780
+ { id: 101, sender: 'علی', text: 'سلام به همه!', time: '10:00', type: 'received', reactions: 2 },
781
+ { id: 102, sender: 'me', text: 'سلام علی، چطوری؟', time: '10:05', type: 'sent' }
782
+ ],
783
+ 2: [],
784
+ 3: []
785
+ }
786
+ };
787
+
788
+ // --- Initialization ---
789
+ document.addEventListener('DOMContentLoaded', () => {
790
+ generateCaptcha();
791
+ renderRooms();
792
+ setupAvatarSelection();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
793
 
794
+ // Enter key for message input
795
+ document.getElementById('message-input').addEventListener('keypress', function (e) {
796
  if (e.key === 'Enter') {
797
  sendMessage();
798
  }
799
  });
800
+ });
801
+
802
+ // --- View Navigation ---
803
+ function switchView(viewId) {
804
+ document.querySelectorAll('.view').forEach(view => {
805
+ view.classList.remove('active');
806
+ });
807
+ document.getElementById(viewId).classList.add('active');
808
 
809
+ // Close menu if open
810
+ const menu = document.getElementById('chat-menu-dropdown');
811
+ if(menu) menu.classList.remove('show');
812
+ }
813
+
814
+ // --- Login Logic ---
815
+ function generateCaptcha() {
816
+ const num = Math.floor(1000 + Math.random() * 9000);
817
+ state.currentCaptcha = num;
818
+ document.getElementById('captcha-display').innerText = num;
819
+ }
820
+
821
+ document.getElementById('login-form').addEventListener('submit', (e) => {
822
+ e.preventDefault();
823
+ const phone = document.getElementById('phone-input').value;
824
+ const captcha = document.getElementById('captcha-input').value;
825
+
826
+ if (captcha != state.currentCaptcha) {
827
+ showToast('کد امنیتی اشتباه است');
828
+ generateCaptcha();
829
+ return;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
830
  }
831
+
832
+ if(phone.length < 10) {
833
+ showToast('شماره موبایل نامعتبر است');
834
+ return;
 
835
  }
836
+
837
+ // Login Success
838
+ state.currentUser.phone = phone;
839
+ state.currentUser.name = phone; // Default name to phone initially
840
+ updateDashboardProfile();
841
+ switchView('dashboard-view');
842
+ showToast('خوش آمدید!');
843
+ });
844
+
845
+ function updateDashboardProfile() {
846
+ document.getElementById('dash-username').innerText = state.currentUser.name;
847
+ document.getElementById('dash-phone').innerText = state.currentUser.phone;
848
+ document.getElementById('dash-avatar').src = state.currentUser.avatar;
849
+ }
850
+
851
+ // --- Dashboard Logic ---
852
+ function renderRooms() {
853
+ const container = document.getElementById('room-list-container');
854
+ container.innerHTML = '';
855
+
856
+ state.rooms.forEach(room => {
857
+ const card = document.createElement('div');
858
+ card.className = 'room-card';
859
+ card.onclick = () => enterRoom(room.id);
860
 
861
+ card.innerHTML = `
862
+ <div class="room-details">
863
+ <div class="room-icon" style="color: ${room.color}; background: ${room.color}20;">
864
+ <i class="fas ${room.icon}"></i>
865
+ </div>
866
+ <div class="room-text">
867
+ <h4>${room.name}</h4>
868
+ <span>برای مشاهده کلیک کنید</span>
869
+ </div>
870
+ </div>
871
+ <div class="online-badge">
872
+ <span class="dot"></span> ${room.online}
873
+ </div>
874
+ `;
875
+ container.appendChild(card);
 
 
 
 
 
 
876
  });
877
+ }
878
+
879
+ function openCreateRoomModal() {
880
+ document.getElementById('new-room-name').value = '';
881
+ document.getElementById('create-room-modal').classList.add('active');
882
+ }
883
+
884
+ function createRoom() {
885
+ const name = document.getElementById('new-room-name').value;
886
+ if (!name) return showToast('لطفا نام اتاق را وارد کنید');
887
+
888
+ const newRoom = {
889
+ id: Date.now(),
890
+ name: name,
891
+ online: 1,
892
+ total: 1,
893
+ icon: 'hashtag', // FontAwesome requires fa-hashtag usually, but handled dynamically
894
+ color: '#9C27B0'
895
+ };
896
+ // Fix icon class
897
+ newRoom.icon = 'fa-hashtag';
898
+
899
+ state.rooms.unshift(newRoom);
900
+ state.messages[newRoom.id] = [];
901
 
902
+ renderRooms();
903
+ closeModal('create-room-modal');
904
+ showToast('اتاق با موفقیت ساخته شد');
905
+ }
906
+
907
+ // --- Chat Room Logic ---
908
+ function enterRoom(roomId) {
909
+ state.currentRoomId = roomId;
910
+ const room = state.rooms.find(r => r.id === roomId);
911
 
912
+ // Update Header
913
+ document.getElementById('chat-room-name').innerText = room.name;
914
+ document.getElementById('chat-online-count').innerHTML = `<span class="dot"></span> ${room.online} آنلاین`;
915
+ document.getElementById('chat-total-count').innerText = `${room.total} عضو`;
 
 
 
 
 
 
 
916
 
917
+ const iconContainer = document.getElementById('chat-room-icon');
918
+ iconContainer.innerHTML = `<i class="fas ${room.icon}"></i>`;
919
+ iconContainer.style.color = room.color;
920
+ iconContainer.style.background = room.color + '20';
921
+
922
+ // Render Messages
923
+ renderMessages();
924
+ switchView('chat-view');
925
+ }
926
+
927
+ function renderMessages() {
928
+ const container = document.getElementById('messages-container');
929
+ container.innerHTML = '';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
930
 
931
+ const msgs = state.messages[state.currentRoomId] || [];
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
932
 
933
+ msgs.forEach(msg => {
934
+ const div = document.createElement('div');
935
+ div.className = `message ${msg.type}`;
936
+
937
+ let replyHTML = '';
938
+ if(msg.replyTo) {
939
+ replyHTML = `<div class="reply-preview"><i class="fas fa-reply"></i> ${msg.replyTo}</div>`;
 
 
 
940
  }
941
+
942
+ div.innerHTML = `
943
+ ${replyHTML}
944
+ ${msg.text}
945
+ <div class="msg-meta">
946
+ <span>${msg.time}</span>
947
+ ${msg.type === 'sent' ? '<i class="fas fa-check-double" style="color: #4CAF50;"></i>' : ''}
948
+ ${msg.reactions ? `<span style="margin-right:5px; color:#FF5252;">❤️ ${msg.reactions}</span>` : ''}
949
+ </div>
950
+ <div class="msg-actions">
951
+ <i class="fas fa-reply action-icon" onclick="setReply('${msg.text}', ${msg.id})" title="پاسخ"></i>
952
+ <i class="fas fa-heart action-icon" onclick="addReaction(${msg.id})" title="ریاکشن"></i>
953
+ ${msg.type === 'sent' ? `<i class="fas fa-trash action-icon" onclick="deleteMessage(${msg.id})" title="حذف"></i>` : ''}
954
+ </div>
955
+ `;
956
+ container.appendChild(div);
957
+ });
958
+
959
+ // Scroll to bottom
960
+ container.scrollTop = container.scrollHeight;
961
+ }
962
+
963
+ function sendMessage() {
964
+ const input = document.getElementById('message-input');
965
+ const text = input.value.trim();
966
 
967
+ if (!text) return;
968
+
969
+ const newMsg = {
970
+ id: Date.now(),
971
+ sender: 'me',
972
+ text: text,
973
+ time: new Date().toLocaleTimeString('fa-IR', {hour: '2-digit', minute:'2-digit'}),
974
+ type: 'sent',
975
+ replyTo: state.replyTo ? state.replyTo.text : null
976
+ };
977
+
978
+ if (!state.messages[state.currentRoomId]) {
979
+ state.messages[state.currentRoomId] = [];
980
  }
981
+
982
+ state.messages[state.currentRoomId].push(newMsg);
983
 
984
+ // Clear input and reply state
985
+ input.value = '';
986
+ cancelReply();
987
 
988
+ renderMessages();
989
+ }
990
+
991
+ // --- Chat Interactions ---
992
+ function setReply(text, id) {
993
+ state.replyTo = { text: text, id: id };
994
+ const bar = document.getElementById('reply-bar');
995
+ document.getElementById('reply-text-preview').innerText = `پاسخ به: ${text}`;
996
+ bar.classList.add('active');
997
+ document.getElementById('message-input').focus();
998
+ }
999
+
1000
+ function cancelReply() {
1001
+ state.replyTo = null;
1002
+ document.getElementById('reply-bar').classList.remove('active');
1003
+ }
1004
+
1005
+ function addReaction(msgId) {
1006
+ const msgs = state.messages[state.currentRoomId];
1007
+ const msg = msgs.find(m => m.id === msgId);
1008
+ if (msg) {
1009
+ msg.reactions = (msg.reactions || 0) + 1;
1010
+ renderMessages();
1011
+ }
1012
+ }
1013
+
1014
+ function deleteMessage(msgId) {
1015
+ const msgs = state.messages[state.currentRoomId];
1016
+ const index = msgs.findIndex(m => m.id === msgId);
1017
+ if (index > -1) {
1018
+ msgs.splice(index, 1);
1019
+ renderMessages();
1020
+ showToast('پیام حذف شد');
1021
+ }
1022
+ }
1023
+
1024
+ function toggleChatMenu() {
1025
+ document.getElementById('chat-menu-dropdown').classList.toggle('show');
1026
+ }
1027
+
1028
+ function deleteGroup() {
1029
+ if(confirm('آیا مطمئن هستید که می‌خواهید این گروه را حذف کنید؟')) {
1030
+ const index = state.rooms.findIndex(r => r.id === state.currentRoomId);
1031
+ if(index > -1) {
1032
+ state.rooms.splice(index, 1);
1033
+ delete state.messages[state.currentRoomId];
1034
+ renderRooms();
1035
+ switchView('dashboard-view');
1036
+ showToast('گروه حذف شد');
 
 
 
 
 
 
 
 
 
 
 
1037
  }
1038
+ }
1039
+ }
1040
+
1041
+ function shareGroup() {
1042
+ // Mock share
1043
+ const roomName = document.getElementById('chat-room-name').innerText;
1044
+ navigator.clipboard.writeText(`به گروه "${roomName}" بپیوندید!`).then(() => {
1045
+ showToast('لینک دعوت کپی شد');
1046
+ }).catch(() => {
1047
+ showToast('اشتراک‌گذاری انجام شد');
1048
  });
1049
+ document.getElementById('chat-menu-dropdown').classList.remove('show');
1050
+ }
1051
+
1052
+ // --- Profile Settings ---
1053
+ function openProfileModal() {
1054
+ document.getElementById('edit-name').value = state.currentUser.name;
1055
+ document.getElementById('profile-modal').classList.add('active');
1056
+ }
1057
+
1058
+ function setupAvatarSelection() {
1059
+ const colors = ['6C63FF', '4CAF50', 'FF5252', 'FF9800', '2196F3', '9C27B0'];
1060
+ const container = document.getElementById('avatar-selection');
1061
+ container.innerHTML = '';
1062
+
1063
+ colors.forEach(color => {
1064
+ const url = `https://ui-avatars.com/api/?name=${state.currentUser.name}&background=${color}&color=fff`;
1065
+ const img = document.createElement('img');
1066
+ img.src = url;
1067
+ img.className = 'avatar-option';
1068
+ if(state.currentUser.avatar.includes(color)) img.classList.add('selected');
1069
+
1070
+ img.onclick = () => {
1071
+ document.querySelectorAll('.avatar-option').forEach(el => el.classList.remove('selected'));
1072
+ img.classList.add('selected');
1073
+ state.currentUser.avatar = url;
1074
+ };
1075
+ container.appendChild(img);
1076
+ });
1077
+ }
1078
+
1079
+ function saveProfile() {
1080
+ const name = document.getElementById('