Hugging Face's logo

Spaces:
samirerty
/
anycoder-48afeb5c
Running

App Files Community
samirerty commited on
Commit
ef99788
·
verified ·
1 Parent(s): c01b721

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +408 -505
index.html CHANGED
@@ -3,321 +3,311 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>چت روم - Glassmorphism Design</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <style>
9
- @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap');
10
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  * {
12
  margin: 0;
13
  padding: 0;
14
  box-sizing: border-box;
15
  }
16
-
17
- :root {
18
- --primary: #6366f1;
19
- --primary-light: #818cf8;
20
- --secondary: #ec4899;
21
- --accent: #06b6d4;
22
- --success: #10b981;
23
- --warning: #f59e0b;
24
- --error: #ef4444;
25
- --bg-gradient-1: #0f0c29;
26
- --bg-gradient-2: #302b63;
27
- --bg-gradient-3: #24243e;
28
- --glass-bg: rgba(255, 255, 255, 0.08);
29
- --glass-border: rgba(255, 255, 255, 0.15);
30
- --glass-highlight: rgba(255, 255, 255, 0.05);
31
- --text-primary: #f8fafc;
32
- --text-secondary: #cbd5e1;
33
- --text-muted: #94a3b8;
34
- --shadow-glow: 0 8px 32px rgba(99, 102, 241, 0.3);
35
- }
36
-
37
  body {
38
- font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
39
- background: linear-gradient(135deg, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 50%, var(--bg-gradient-3) 100%);
40
- min-height: 100vh;
 
 
41
  color: var(--text-primary);
42
- overflow-x: hidden;
43
- }
44
-
45
- /* Animated background particles */
46
- body::before {
47
- content: '';
48
- position: fixed;
49
- top: 0;
50
- left: 0;
51
- width: 100%;
52
- height: 100%;
53
- background:
54
- radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
55
- radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
56
- radial-gradient(circle at 40% 40%, rgba(6, 182, 212, 0.1) 0%, transparent 40%);
57
- pointer-events: none;
58
- z-index: 0;
59
  }
60
-
 
61
  .chat-page {
62
- position: relative;
63
- z-index: 1;
 
64
  }
65
-
66
  .chat-container {
67
  display: flex;
68
  height: 100vh;
69
- gap: 1rem;
70
- padding: 1rem;
 
 
71
  }
72
-
73
- /* Glassmorphism Sidebar */
74
  .chat-sidebar {
75
  width: 320px;
76
  background: var(--glass-bg);
77
  backdrop-filter: blur(20px);
78
  -webkit-backdrop-filter: blur(20px);
79
- border: 1px solid var(--glass-border);
80
- border-radius: 24px;
81
  display: flex;
82
  flex-direction: column;
83
- overflow: hidden;
84
- box-shadow:
85
- 0 8px 32px rgba(0, 0, 0, 0.3),
86
- inset 0 1px 0 var(--glass-highlight);
87
  }
88
-
89
  .sidebar-header {
90
  padding: 1.5rem;
91
- background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(236, 72, 153, 0.1) 100%);
 
92
  border-bottom: 1px solid var(--glass-border);
 
 
 
93
  }
94
-
95
  .sidebar-header h3 {
 
 
 
96
  display: flex;
97
  align-items: center;
98
  gap: 0.75rem;
99
- font-size: 1.125rem;
100
- font-weight: 600;
101
- color: var(--text-primary);
102
  }
103
-
104
  .sidebar-header h3 i {
105
- width: 40px;
106
- height: 40px;
107
- display: flex;
108
- align-items: center;
109
- justify-content: center;
110
- background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
111
- border-radius: 12px;
112
- font-size: 1rem;
113
  }
114
-
115
  .room-name {
116
- display: block;
117
- margin-top: 0.5rem;
118
  font-size: 0.875rem;
119
- color: var(--text-secondary);
120
- font-weight: 400;
121
  }
122
-
123
  .users-list {
124
  flex: 1;
125
  overflow-y: auto;
126
  padding: 1rem;
 
 
 
127
  }
128
-
129
  .users-list::-webkit-scrollbar {
130
  width: 6px;
131
  }
132
-
133
  .users-list::-webkit-scrollbar-track {
134
- background: transparent;
135
  }
136
-
137
  .users-list::-webkit-scrollbar-thumb {
138
- background: var(--glass-border);
139
- border-radius: 3px;
140
  }
141
-
142
  .user-item {
143
  display: flex;
144
  align-items: center;
145
  gap: 0.875rem;
146
  padding: 0.875rem;
147
- margin-bottom: 0.5rem;
148
- background: var(--glass-highlight);
149
- border: 1px solid transparent;
150
- border-radius: 16px;
151
  transition: all 0.3s ease;
152
  cursor: pointer;
153
  }
154
-
155
  .user-item:hover {
156
- background: rgba(99, 102, 241, 0.1);
157
- border-color: var(--glass-border);
158
  transform: translateX(-4px);
 
159
  }
160
-
161
  .user-avatar {
162
- width: 44px;
163
- height: 44px;
 
 
164
  display: flex;
165
  align-items: center;
166
  justify-content: center;
167
- background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary) 100%);
168
- border-radius: 14px;
169
- font-size: 1.25rem;
170
  color: white;
 
 
 
171
  }
172
-
173
  .user-info {
 
 
 
174
  flex: 1;
175
  }
176
-
177
  .user-name {
178
- display: block;
 
179
  font-size: 0.9375rem;
180
- font-weight: 500;
181
- color: var(--text-primary);
182
  }
183
-
184
  .user-status {
 
185
  display: flex;
186
  align-items: center;
187
  gap: 0.375rem;
188
- font-size: 0.75rem;
189
- margin-top: 0.25rem;
190
  }
191
-
192
  .user-status.online {
193
- color: var(--success);
194
  }
195
-
196
  .user-status.offline {
197
  color: var(--text-muted);
198
  }
199
-
200
  .user-status i {
201
  font-size: 0.5rem;
202
  }
203
-
204
  .sidebar-footer {
205
- padding: 1rem 1.5rem;
206
  border-top: 1px solid var(--glass-border);
 
207
  }
208
-
209
  /* Main Chat Area */
210
  .chat-main {
211
  flex: 1;
212
  display: flex;
213
  flex-direction: column;
214
- background: var(--glass-bg);
215
- backdrop-filter: blur(20px);
216
- -webkit-backdrop-filter: blur(20px);
217
- border: 1px solid var(--glass-border);
218
- border-radius: 24px;
219
  overflow: hidden;
220
- box-shadow:
221
- 0 8px 32px rgba(0, 0, 0, 0.3),
222
- inset 0 1px 0 var(--glass-highlight);
223
  }
224
-
225
  .chat-header {
 
 
 
 
226
  display: flex;
227
- align-items: center;
228
  justify-content: space-between;
229
- padding: 1.25rem 1.5rem;
230
- background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);
231
- border-bottom: 1px solid var(--glass-border);
232
  }
233
-
234
  .header-info h1 {
 
 
 
235
  display: flex;
236
  align-items: center;
237
  gap: 0.75rem;
238
- font-size: 1.25rem;
239
- font-weight: 600;
240
  }
241
-
242
- .header-info h1 i {
243
- width: 44px;
244
- height: 44px;
245
- display: flex;
246
- align-items: center;
247
- justify-content: center;
248
- background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
249
- border-radius: 14px;
250
- font-size: 1.125rem;
251
- }
252
-
253
  .header-info p {
254
- margin-top: 0.375rem;
255
  font-size: 0.875rem;
256
- color: var(--text-secondary);
257
  }
258
-
259
  .header-actions {
260
  display: flex;
261
  gap: 0.75rem;
262
  }
263
-
264
  /* Buttons */
265
  .btn {
266
- display: inline-flex;
267
- align-items: center;
268
- gap: 0.5rem;
269
  padding: 0.625rem 1.25rem;
270
- font-size: 0.875rem;
271
- font-weight: 500;
272
- font-family: inherit;
273
  border: none;
274
- border-radius: 12px;
 
 
 
275
  cursor: pointer;
 
 
 
276
  transition: all 0.3s ease;
277
- text-decoration: none;
 
 
278
  }
279
-
280
  .btn-primary {
281
- background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
282
- color: white;
283
- box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
284
  }
285
-
286
  .btn-primary:hover {
287
  transform: translateY(-2px);
288
- box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
 
289
  }
290
-
291
  .btn-secondary {
292
- background: var(--glass-highlight);
293
- color: var(--text-primary);
294
- border: 1px solid var(--glass-border);
295
  }
296
-
297
  .btn-secondary:hover {
298
- background: rgba(255, 255, 255, 0.1);
299
  transform: translateY(-2px);
300
  }
301
-
302
  .btn-icon {
303
- width: 40px;
304
- height: 40px;
305
- display: flex;
 
 
 
 
 
 
306
  align-items: center;
307
  justify-content: center;
308
- background: var(--glass-highlight);
309
- border: 1px solid var(--glass-border);
310
- border-radius: 12px;
311
- font-size: 1.25rem;
312
- cursor: pointer;
313
  transition: all 0.2s ease;
 
314
  }
315
-
316
  .btn-icon:hover {
317
- background: rgba(255, 255, 255, 0.15);
318
  transform: scale(1.1);
319
  }
320
-
321
  /* Messages Area */
322
  .chat-messages {
323
  flex: 1;
@@ -326,234 +316,255 @@
326
  display: flex;
327
  flex-direction: column;
328
  gap: 1rem;
 
329
  }
330
-
331
  .chat-messages::-webkit-scrollbar {
332
  width: 8px;
333
  }
334
-
335
  .chat-messages::-webkit-scrollbar-track {
336
- background: transparent;
 
337
  }
338
-
339
  .chat-messages::-webkit-scrollbar-thumb {
340
- background: var(--glass-border);
341
- border-radius: 4px;
342
  }
343
-
344
  .chat-messages::-webkit-scrollbar-thumb:hover {
345
- background: rgba(255, 255, 255, 0.2);
346
  }
347
-
 
348
  .message {
349
- max-width: 75%;
350
- padding: 1rem 1.25rem;
351
- background: var(--glass-highlight);
352
- border: 1px solid var(--glass-border);
353
- border-radius: 20px 20px 20px 4px;
354
- animation: messageSlide 0.3s ease;
 
 
355
  }
356
-
357
  @keyframes messageSlide {
358
  from {
359
  opacity: 0;
360
- transform: translateY(10px);
361
  }
362
  to {
363
  opacity: 1;
364
- transform: translateY(0);
365
  }
366
  }
367
-
 
 
 
 
 
 
368
  .message.own {
369
  align-self: flex-start;
370
- background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(236, 72, 153, 0.15) 100%);
371
- border-color: rgba(99, 102, 241, 0.3);
372
- border-radius: 20px 20px 4px 20px;
373
- }
374
-
 
 
 
 
 
 
 
 
 
 
375
  .message-header {
376
  display: flex;
377
  align-items: center;
378
  gap: 0.75rem;
379
  margin-bottom: 0.5rem;
380
- flex-wrap: wrap;
 
381
  }
382
-
383
  .message-sender {
384
- font-size: 0.875rem;
385
- font-weight: 600;
386
- color: var(--primary-light);
387
  }
388
-
389
  .message-time {
390
  font-size: 0.75rem;
391
- color: var(--text-muted);
392
- }
393
-
394
- .sending-status {
395
- font-size: 0.75rem;
396
- color: var(--accent);
397
  }
398
-
399
  .message-content {
400
  font-size: 0.9375rem;
401
- line-height: 1.7;
402
- color: var(--text-primary);
403
  word-wrap: break-word;
404
  }
405
-
406
  .message-actions-admin {
 
407
  display: flex;
408
  gap: 0.5rem;
409
- margin-right: auto;
410
  }
411
-
412
  .message-actions-admin button {
413
- width: 28px;
414
- height: 28px;
 
 
 
 
 
415
  display: flex;
416
  align-items: center;
417
  justify-content: center;
418
- background: rgba(239, 68, 68, 0.2);
419
- border: none;
420
- border-radius: 8px;
421
- color: var(--error);
422
  font-size: 0.75rem;
423
- cursor: pointer;
424
  transition: all 0.2s ease;
425
  }
426
-
 
 
 
 
427
  .message-actions-admin button:hover {
428
- background: var(--error);
429
  color: white;
 
430
  }
431
-
432
- /* Footer & Input */
 
 
 
 
 
 
 
 
 
 
 
 
 
433
  .chat-footer {
434
- padding: 1.25rem 1.5rem;
435
- background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, transparent 100%);
436
  border-top: 1px solid var(--glass-border);
 
 
437
  }
438
-
439
  #message-form {
440
  display: flex;
441
  flex-direction: column;
442
- gap: 0.875rem;
443
  }
444
-
445
  .message-input {
446
  display: flex;
447
- gap: 0.875rem;
448
  align-items: center;
449
  }
450
-
451
  #message-input {
452
  flex: 1;
453
  padding: 0.875rem 1.25rem;
454
- background: var(--glass-highlight);
455
- border: 1px solid var(--glass-border);
456
- border-radius: 16px;
457
- color: var(--text-primary);
458
- font-size: 0.9375rem;
459
  font-family: inherit;
 
 
 
460
  transition: all 0.3s ease;
 
461
  }
462
-
 
 
 
 
 
 
463
  #message-input::placeholder {
464
  color: var(--text-muted);
465
  }
466
-
467
- #message-input:focus {
468
- outline: none;
469
- border-color: var(--primary-light);
470
- box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
471
- }
472
-
473
  .message-actions {
474
  display: flex;
475
  gap: 0.5rem;
476
  padding: 0 0.5rem;
477
  }
478
-
479
  /* Loading & Empty States */
480
- .loading, .empty, .error {
481
  text-align: center;
482
- padding: 2rem;
483
- color: var(--text-muted);
 
 
 
 
 
 
 
 
 
484
  }
485
-
486
- .loading::after {
487
  content: '';
488
- display: inline-block;
489
- width: 20px;
490
- height: 20px;
491
- margin-right: 0.5rem;
492
- border: 2px solid var(--glass-border);
493
- border-top-color: var(--primary);
494
  border-radius: 50%;
495
  animation: spin 1s linear infinite;
496
  }
497
-
498
  @keyframes spin {
499
  to { transform: rotate(360deg); }
500
  }
501
-
502
- .empty-state, .error-state {
503
- display: flex;
504
- flex-direction: column;
505
- align-items: center;
506
- justify-content: center;
507
- padding: 3rem;
508
- text-align: center;
509
- color: var(--text-secondary);
510
- }
511
-
512
  .empty-state i, .error-state i {
513
- width: 80px;
514
- height: 80px;
515
- display: flex;
516
- align-items: center;
517
- justify-content: center;
518
- background: var(--glass-highlight);
519
- border-radius: 24px;
520
- font-size: 2rem;
521
- margin-bottom: 1rem;
522
- }
523
-
524
- .empty-state i {
525
- color: var(--accent);
526
  }
527
-
528
  .error-state i {
529
- color: var(--error);
530
- }
531
-
532
- .empty-state p, .error-state p {
533
- font-size: 1rem;
534
- margin-bottom: 0.5rem;
535
  }
536
-
537
  .small-text {
538
  font-size: 0.875rem;
539
- color: var(--text-muted);
540
  }
541
-
542
- /* Alert Notifications */
543
  .alert {
 
 
 
 
544
  display: flex;
545
  align-items: center;
546
  gap: 0.75rem;
547
- padding: 1rem 1.25rem;
548
- border-radius: 16px;
549
- font-size: 0.9375rem;
550
- font-weight: 500;
551
- backdrop-filter: blur(20px);
552
- -webkit-backdrop-filter: blur(20px);
553
- animation: alertSlide 0.3s ease;
554
  }
555
-
556
- @keyframes alertSlide {
557
  from {
558
  opacity: 0;
559
  transform: translateY(-20px);
@@ -563,212 +574,156 @@
563
  transform: translateY(0);
564
  }
565
  }
566
-
567
  .alert.success {
568
- background: rgba(16, 185, 129, 0.15);
569
- border: 1px solid rgba(16, 185, 129, 0.3);
570
- color: var(--success);
571
  }
572
-
573
  .alert.error {
574
- background: rgba(239, 68, 68, 0.15);
575
- border: 1px solid rgba(239, 68, 68, 0.3);
576
- color: var(--error);
577
  }
578
-
579
- /* Temp Message */
580
- .temp-message {
581
- opacity: 0.7;
582
- }
583
-
584
  /* Responsive Design */
585
- @media (max-width: 1024px) {
586
  .chat-sidebar {
587
- width: 280px;
 
 
 
 
588
  }
589
- }
590
-
591
- @media (max-width: 768px) {
592
- .chat-container {
593
- flex-direction: column;
594
- padding: 0.5rem;
595
  }
596
-
597
- .chat-sidebar {
598
- width: 100%;
599
- height: auto;
600
- max-height: 200px;
601
  }
602
-
603
- .users-list {
604
- max-height: 120px;
 
605
  }
606
-
607
- .sidebar-footer {
608
- display: none;
 
609
  }
610
-
 
 
611
  .chat-header {
612
- flex-direction: column;
613
- gap: 1rem;
614
- align-items: flex-start;
615
  }
616
-
617
- .header-actions {
618
- width: 100%;
619
- justify-content: flex-end;
620
  }
621
-
 
 
 
 
622
  .message {
623
  max-width: 90%;
 
 
 
624
  }
625
-
626
- .message-input {
627
- flex-wrap: wrap;
628
  }
629
-
630
  #message-input {
631
- width: 100%;
632
  }
633
  }
634
-
635
- @media (max-width: 480px) {
636
- .chat-header h1 {
637
- font-size: 1rem;
 
638
  }
639
 
640
- .chat-header h1 i {
641
- width: 36px;
642
- height: 36px;
643
- font-size: 1rem;
644
  }
645
 
646
- .btn {
647
- padding: 0.5rem 1rem;
648
- font-size: 0.8125rem;
 
649
  }
650
-
651
- .btn span {
652
- display: none;
 
 
 
 
 
653
  }
654
-
655
- .message {
656
- padding: 0.875rem;
 
 
 
 
 
657
  }
658
 
659
- .message-content {
660
- font-size: 0.875rem;
661
  }
662
  }
663
-
664
- /* Focus visible for accessibility */
665
- *:focus-visible {
666
- outline: 2px solid var(--primary-light);
667
- outline-offset: 2px;
668
- }
669
-
670
- /* Selection color */
671
- ::selection {
672
- background: rgba(99, 102, 241, 0.3);
673
- color: var(--text-primary);
674
- }
675
  </style>
676
  </head>
677
  <body class="chat-page">
 
 
 
 
 
 
678
  <div class="chat-container">
679
- <!-- نوار کناری کاربران -->
680
  <aside class="chat-sidebar">
681
  <div class="sidebar-header">
682
  <h3><i class="fas fa-users"></i> کاربران آنلاین</h3>
683
- <span class="room-name">اتاق گفتگوی عمومی</span>
684
  </div>
685
 
686
  <div class="users-list" id="users-list">
687
- <!-- نمونه کاربران -->
688
- <div class="user-item">
689
- <div class="user-avatar">
690
- <i class="fas fa-user-circle"></i>
691
- </div>
692
- <div class="user-info">
693
- <span class="user-name">علی احمدی</span>
694
- <span class="user-status online">
695
- <i class="fas fa-circle"></i> آنلاین
696
- </span>
697
- </div>
698
- </div>
699
- <div class="user-item">
700
- <div class="user-avatar">
701
- <i class="fas fa-user-circle"></i>
702
- </div>
703
- <div class="user-info">
704
- <span class="user-name">مریم رضایی</span>
705
- <span class="user-status online">
706
- <i class="fas fa-circle"></i> آنلاین
707
- </span>
708
- </div>
709
- </div>
710
- <div class="user-item">
711
- <div class="user-avatar">
712
- <i class="fas fa-user-circle"></i>
713
- </div>
714
- <div class="user-info">
715
- <span class="user-name">حسن محمدی</span>
716
- <span class="user-status offline">
717
- <i class="fas fa-circle"></i> آفلاین
718
- </span>
719
- </div>
720
- </div>
721
  </div>
722
 
723
  <div class="sidebar-footer">
724
- <a href="dashboard.php" class="btn btn-secondary">
725
  <i class="fas fa-arrow-right"></i> بازگشت
726
  </a>
727
  </div>
728
  </aside>
729
 
730
- <!-- بخش اصلی چت -->
731
  <main class="chat-main">
732
  <header class="chat-header">
733
  <div class="header-info">
734
- <h1><i class="fas fa-comments"></i> اتاق گفتگوی عمومی</h1>
735
- <p>فضایی برای گفتگو و تبادل نظر</p>
736
  </div>
737
  <div class="header-actions">
738
  <button class="btn btn-primary" onclick="clearChat()">
739
- <i class="fas fa-trash"></i> <span>پاک کردن چت</span>
740
  </button>
741
  <button class="btn btn-secondary" onclick="leaveRoom()">
742
- <i class="fas fa-sign-out-alt"></i> <span>ترک اتاق</span>
743
  </button>
744
  </div>
745
  </header>
746
 
747
  <div class="chat-messages" id="chat-messages">
748
- <!-- نمونه پیام -->
749
- <div class="message">
750
- <div class="message-header">
751
- <span class="message-sender">علی احمدی</span>
752
- <span class="message-time">۱۴:۳۰</span>
753
- </div>
754
- <div class="message-content">سلام به همه! 👋</div>
755
- </div>
756
-
757
- <div class="message own">
758
- <div class="message-header">
759
- <span class="message-sender">شما</span>
760
- <span class="message-time">۱۴:۳۲</span>
761
- </div>
762
- <div class="message-content">سلام علی! خوبی؟</div>
763
- </div>
764
-
765
- <div class="message">
766
- <div class="message-header">
767
- <span class="message-sender">مریم رضایی</span>
768
- <span class="message-time">۱۴:۳۵</span>
769
- </div>
770
- <div class="message-content">سلام دوستان! 😊</div>
771
- </div>
772
  </div>
773
 
774
  <footer class="chat-footer">
@@ -776,7 +731,7 @@
776
  <div class="message-input">
777
  <input type="text" id="message-input" placeholder="پیام خود را بنویسید..." autocomplete="off">
778
  <button type="submit" class="btn btn-primary">
779
- <i class="fas fa-paper-plane"></i> <span>ارسال</span>
780
  </button>
781
  </div>
782
  <div class="message-actions">
@@ -789,57 +744,5 @@
789
  </footer>
790
  </main>
791
  </div>
792
-
793
- <script>
794
- // نمونه توابع برای نمایش عملکرد
795
- function insertEmoji(emoji) {
796
- const input = document.getElementById('message-input');
797
- input.value += emoji;
798
- input.focus();
799
- }
800
-
801
- function clearChat() {
802
- if (confirm('آیا مطمئن هستید؟')) {
803
- document.getElementById('chat-messages').innerHTML = `
804
- <div class="empty-state">
805
- <i class="fas fa-trash"></i>
806
- <p>تمامی پیام‌ها پاک شدند</p>
807
- </div>
808
- `;
809
- }
810
- }
811
-
812
- function leaveRoom() {
813
- if (confirm('آیا می‌خواهید این اتاق را ترک کنید؟')) {
814
- alert('در حال بازگشت به داشبورد...');
815
- }
816
- }
817
-
818
- document.getElementById('message-form').addEventListener('submit', function(e) {
819
- e.preventDefault();
820
- const input = document.getElementById('message-input');
821
- const message = input.value.trim();
822
-
823
- if (message) {
824
- const messagesContainer = document.getElementById('chat-messages');
825
- const emptyState = messagesContainer.querySelector('.empty-state');
826
- if (emptyState) emptyState.remove();
827
-
828
- const messageDiv = document.createElement('div');
829
- messageDiv.className = 'message own';
830
- const time = new Date().toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' });
831
- messageDiv.innerHTML = `
832
- <div class="message-header">
833
- <span class="message-sender">شما</span>
834
- <span class="message-time">${time}</span>
835
- </div>
836
- <div class="message-content">${message}</div>
837
- `;
838
- messagesContainer.appendChild(messageDiv);
839
- messagesContainer.scrollTop = messagesContainer.scrollHeight;
840
- input.value = '';
841
- }
842
- });
843
- </script>
844
  </body>
845
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Chat Room - Glassmorphism UI</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <style>
9
+ :root {
10
+ --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
11
+ --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
12
+ --glass-bg: rgba(255, 255, 255, 0.15);
13
+ --glass-bg-strong: rgba(255, 255, 255, 0.25);
14
+ --glass-border: rgba(255, 255, 255, 0.3);
15
+ --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
16
+
17
+ --message-own-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
18
+ --message-other-bg: rgba(255, 255, 255, 0.9);
19
+ --message-own-color: #ffffff;
20
+ --message-other-color: #2d3748;
21
+
22
+ --text-primary: #1a202c;
23
+ --text-secondary: #718096;
24
+ --text-muted: #a0aec0;
25
+
26
+ --online-color: #48bb78;
27
+ --offline-color: #cbd5e0;
28
+ --accent-color: #ed8936;
29
+
30
+ --radius-sm: 0.5rem;
31
+ --radius-md: 1rem;
32
+ --radius-lg: 1.5rem;
33
+ --radius-full: 9999px;
34
+ }
35
+
36
  * {
37
  margin: 0;
38
  padding: 0;
39
  box-sizing: border-box;
40
  }
41
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42
  body {
43
+ font-family: 'Segoe UI', 'Vazirmatn', 'Tahoma', system-ui, -apple-system, sans-serif;
44
+ background: var(--primary-gradient);
45
+ background-attachment: fixed;
46
+ height: 100vh;
47
+ overflow: hidden;
48
  color: var(--text-primary);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  }
50
+
51
+ /* Main Container */
52
  .chat-page {
53
+ height: 100vh;
54
+ width: 100vw;
55
+ overflow: hidden;
56
  }
57
+
58
  .chat-container {
59
  display: flex;
60
  height: 100vh;
61
+ width: 100%;
62
+ position: relative;
63
+ background: rgba(0, 0, 0, 0.1);
64
+ backdrop-filter: blur(20px);
65
  }
66
+
67
+ /* Sidebar - Glassmorphism Panel */
68
  .chat-sidebar {
69
  width: 320px;
70
  background: var(--glass-bg);
71
  backdrop-filter: blur(20px);
72
  -webkit-backdrop-filter: blur(20px);
73
+ border-left: 1px solid var(--glass-border);
 
74
  display: flex;
75
  flex-direction: column;
76
+ box-shadow: var(--glass-shadow);
77
+ z-index: 10;
78
+ transition: transform 0.3s ease;
 
79
  }
80
+
81
  .sidebar-header {
82
  padding: 1.5rem;
83
+ background: var(--glass-bg-strong);
84
+ backdrop-filter: blur(20px);
85
  border-bottom: 1px solid var(--glass-border);
86
+ display: flex;
87
+ flex-direction: column;
88
+ gap: 0.5rem;
89
  }
90
+
91
  .sidebar-header h3 {
92
+ color: white;
93
+ font-size: 1.25rem;
94
+ font-weight: 600;
95
  display: flex;
96
  align-items: center;
97
  gap: 0.75rem;
98
+ text-shadow: 0 2px 4px rgba(0,0,0,0.1);
 
 
99
  }
100
+
101
  .sidebar-header h3 i {
102
+ font-size: 1.1rem;
103
+ opacity: 0.9;
 
 
 
 
 
 
104
  }
105
+
106
  .room-name {
107
+ color: rgba(255, 255, 255, 0.8);
 
108
  font-size: 0.875rem;
109
+ font-weight: 500;
110
+ padding-right: 2rem;
111
  }
112
+
113
  .users-list {
114
  flex: 1;
115
  overflow-y: auto;
116
  padding: 1rem;
117
+ display: flex;
118
+ flex-direction: column;
119
+ gap: 0.75rem;
120
  }
121
+
122
  .users-list::-webkit-scrollbar {
123
  width: 6px;
124
  }
125
+
126
  .users-list::-webkit-scrollbar-track {
127
+ background: rgba(255,255,255,0.1);
128
  }
129
+
130
  .users-list::-webkit-scrollbar-thumb {
131
+ background: rgba(255,255,255,0.3);
132
+ border-radius: var(--radius-full);
133
  }
134
+
135
  .user-item {
136
  display: flex;
137
  align-items: center;
138
  gap: 0.875rem;
139
  padding: 0.875rem;
140
+ background: rgba(255, 255, 255, 0.1);
141
+ border-radius: var(--radius-md);
142
+ border: 1px solid rgba(255, 255, 255, 0.1);
 
143
  transition: all 0.3s ease;
144
  cursor: pointer;
145
  }
146
+
147
  .user-item:hover {
148
+ background: rgba(255, 255, 255, 0.2);
 
149
  transform: translateX(-4px);
150
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
151
  }
152
+
153
  .user-avatar {
154
+ width: 40px;
155
+ height: 40px;
156
+ border-radius: 50%;
157
+ background: var(--secondary-gradient);
158
  display: flex;
159
  align-items: center;
160
  justify-content: center;
 
 
 
161
  color: white;
162
+ font-size: 1.25rem;
163
+ flex-shrink: 0;
164
+ box-shadow: 0 2px 8px rgba(0,0,0,0.2);
165
  }
166
+
167
  .user-info {
168
+ display: flex;
169
+ flex-direction: column;
170
+ gap: 0.25rem;
171
  flex: 1;
172
  }
173
+
174
  .user-name {
175
+ color: white;
176
+ font-weight: 600;
177
  font-size: 0.9375rem;
 
 
178
  }
179
+
180
  .user-status {
181
+ font-size: 0.75rem;
182
  display: flex;
183
  align-items: center;
184
  gap: 0.375rem;
185
+ font-weight: 500;
 
186
  }
187
+
188
  .user-status.online {
189
+ color: var(--online-color);
190
  }
191
+
192
  .user-status.offline {
193
  color: var(--text-muted);
194
  }
195
+
196
  .user-status i {
197
  font-size: 0.5rem;
198
  }
199
+
200
  .sidebar-footer {
201
+ padding: 1.25rem;
202
  border-top: 1px solid var(--glass-border);
203
+ background: rgba(0,0,0,0.1);
204
  }
205
+
206
  /* Main Chat Area */
207
  .chat-main {
208
  flex: 1;
209
  display: flex;
210
  flex-direction: column;
211
+ background: rgba(248, 249, 250, 0.85);
212
+ backdrop-filter: blur(10px);
213
+ position: relative;
 
 
214
  overflow: hidden;
 
 
 
215
  }
216
+
217
  .chat-header {
218
+ background: var(--glass-bg);
219
+ backdrop-filter: blur(20px);
220
+ border-bottom: 1px solid var(--glass-border);
221
+ padding: 1.25rem 1.5rem;
222
  display: flex;
 
223
  justify-content: space-between;
224
+ align-items: center;
225
+ box-shadow: 0 4px 20px rgba(0,0,0,0.05);
226
+ z-index: 5;
227
  }
228
+
229
  .header-info h1 {
230
+ font-size: 1.5rem;
231
+ font-weight: 700;
232
+ color: white;
233
  display: flex;
234
  align-items: center;
235
  gap: 0.75rem;
236
+ margin-bottom: 0.25rem;
237
+ text-shadow: 0 2px 4px rgba(0,0,0,0.1);
238
  }
239
+
 
 
 
 
 
 
 
 
 
 
 
240
  .header-info p {
241
+ color: rgba(255,255,255,0.8);
242
  font-size: 0.875rem;
243
+ font-weight: 500;
244
  }
245
+
246
  .header-actions {
247
  display: flex;
248
  gap: 0.75rem;
249
  }
250
+
251
  /* Buttons */
252
  .btn {
 
 
 
253
  padding: 0.625rem 1.25rem;
 
 
 
254
  border: none;
255
+ border-radius: var(--radius-md);
256
+ font-family: inherit;
257
+ font-size: 0.875rem;
258
+ font-weight: 600;
259
  cursor: pointer;
260
+ display: inline-flex;
261
+ align-items: center;
262
+ gap: 0.5rem;
263
  transition: all 0.3s ease;
264
+ backdrop-filter: blur(10px);
265
+ border: 1px solid rgba(255,255,255,0.2);
266
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
267
  }
268
+
269
  .btn-primary {
270
+ background: rgba(255,255,255,0.9);
271
+ color: #667eea;
 
272
  }
273
+
274
  .btn-primary:hover {
275
  transform: translateY(-2px);
276
+ box-shadow: 0 6px 20px rgba(0,0,0,0.2);
277
+ background: white;
278
  }
279
+
280
  .btn-secondary {
281
+ background: rgba(255,255,255,0.1);
282
+ color: white;
 
283
  }
284
+
285
  .btn-secondary:hover {
286
+ background: rgba(255,255,255,0.2);
287
  transform: translateY(-2px);
288
  }
289
+
290
  .btn-icon {
291
+ width: 36px;
292
+ height: 36px;
293
+ border-radius: 50%;
294
+ border: none;
295
+ background: rgba(255,255,255,0.2);
296
+ color: white;
297
+ font-size: 1.125rem;
298
+ cursor: pointer;
299
+ display: inline-flex;
300
  align-items: center;
301
  justify-content: center;
 
 
 
 
 
302
  transition: all 0.2s ease;
303
+ backdrop-filter: blur(10px);
304
  }
305
+
306
  .btn-icon:hover {
307
+ background: rgba(255,255,255,0.3);
308
  transform: scale(1.1);
309
  }
310
+
311
  /* Messages Area */
312
  .chat-messages {
313
  flex: 1;
 
316
  display: flex;
317
  flex-direction: column;
318
  gap: 1rem;
319
+ background: rgba(255,255,255,0.05);
320
  }
321
+
322
  .chat-messages::-webkit-scrollbar {
323
  width: 8px;
324
  }
325
+
326
  .chat-messages::-webkit-scrollbar-track {
327
+ background: rgba(0,0,0,0.05);
328
+ border-radius: var(--radius-full);
329
  }
330
+
331
  .chat-messages::-webkit-scrollbar-thumb {
332
+ background: rgba(102, 126, 234, 0.5);
333
+ border-radius: var(--radius-full);
334
  }
335
+
336
  .chat-messages::-webkit-scrollbar-thumb:hover {
337
+ background: rgba(102, 126, 234, 0.7);
338
  }
339
+
340
+ /* Message Bubbles */
341
  .message {
342
+ max-width: 70%;
343
+ min-width: 200px;
344
+ padding: 0.875rem 1.125rem;
345
+ border-radius: var(--radius-lg);
346
+ position: relative;
347
+ animation: messageSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
348
+ box-shadow: 0 4px 15px rgba(0,0,0,0.1);
349
+ transition: transform 0.2s ease;
350
  }
351
+
352
  @keyframes messageSlide {
353
  from {
354
  opacity: 0;
355
+ transform: translateY(20px) scale(0.95);
356
  }
357
  to {
358
  opacity: 1;
359
+ transform: translateY(0) scale(1);
360
  }
361
  }
362
+
363
+ .message:hover {
364
+ transform: translateY(-2px);
365
+ box-shadow: 0 6px 20px rgba(0,0,0,0.15);
366
+ }
367
+
368
+ /* Own Messages - Right Side (RTL: flex-start) */
369
  .message.own {
370
  align-self: flex-start;
371
+ background: var(--message-own-bg);
372
+ color: var(--message-own-color);
373
+ border-bottom-right-radius: 0.375rem;
374
+ margin-left: 2rem;
375
+ }
376
+
377
+ /* Other Messages - Left Side (RTL: flex-end) */
378
+ .message:not(.own) {
379
+ align-self: flex-end;
380
+ background: var(--message-other-bg);
381
+ color: var(--message-other-color);
382
+ border-bottom-left-radius: 0.375rem;
383
+ margin-right: 2rem;
384
+ }
385
+
386
  .message-header {
387
  display: flex;
388
  align-items: center;
389
  gap: 0.75rem;
390
  margin-bottom: 0.5rem;
391
+ font-size: 0.8125rem;
392
+ opacity: 0.9;
393
  }
394
+
395
  .message-sender {
396
+ font-weight: 700;
 
 
397
  }
398
+
399
  .message-time {
400
  font-size: 0.75rem;
401
+ opacity: 0.8;
402
+ font-weight: 500;
 
 
 
 
403
  }
404
+
405
  .message-content {
406
  font-size: 0.9375rem;
407
+ line-height: 1.5;
 
408
  word-wrap: break-word;
409
  }
410
+
411
  .message-actions-admin {
412
+ margin-right: auto;
413
  display: flex;
414
  gap: 0.5rem;
 
415
  }
416
+
417
  .message-actions-admin button {
418
+ background: rgba(255,255,255,0.2);
419
+ border: none;
420
+ color: inherit;
421
+ width: 24px;
422
+ height: 24px;
423
+ border-radius: 50%;
424
+ cursor: pointer;
425
  display: flex;
426
  align-items: center;
427
  justify-content: center;
 
 
 
 
428
  font-size: 0.75rem;
429
+ opacity: 0;
430
  transition: all 0.2s ease;
431
  }
432
+
433
+ .message:hover .message-actions-admin button {
434
+ opacity: 1;
435
+ }
436
+
437
  .message-actions-admin button:hover {
438
+ background: rgba(245, 87, 108, 0.9);
439
  color: white;
440
+ transform: scale(1.1);
441
  }
442
+
443
+ /* Temp Message */
444
+ .temp-message {
445
+ opacity: 0.7;
446
+ }
447
+
448
+ .sending-status {
449
+ font-size: 0.75rem;
450
+ margin-right: auto;
451
+ display: flex;
452
+ align-items: center;
453
+ gap: 0.25rem;
454
+ }
455
+
456
+ /* Input Area */
457
  .chat-footer {
458
+ background: var(--glass-bg);
459
+ backdrop-filter: blur(20px);
460
  border-top: 1px solid var(--glass-border);
461
+ padding: 1.25rem 1.5rem;
462
+ box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
463
  }
464
+
465
  #message-form {
466
  display: flex;
467
  flex-direction: column;
468
+ gap: 0.75rem;
469
  }
470
+
471
  .message-input {
472
  display: flex;
473
+ gap: 0.75rem;
474
  align-items: center;
475
  }
476
+
477
  #message-input {
478
  flex: 1;
479
  padding: 0.875rem 1.25rem;
480
+ border: 2px solid rgba(255,255,255,0.2);
481
+ border-radius: var(--radius-full);
482
+ background: rgba(255,255,255,0.9);
 
 
483
  font-family: inherit;
484
+ font-size: 0.9375rem;
485
+ color: var(--text-primary);
486
+ outline: none;
487
  transition: all 0.3s ease;
488
+ box-shadow: 0 2px 8px rgba(0,0,0,0.05);
489
  }
490
+
491
+ #message-input:focus {
492
+ border-color: rgba(102, 126, 234, 0.5);
493
+ box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
494
+ background: white;
495
+ }
496
+
497
  #message-input::placeholder {
498
  color: var(--text-muted);
499
  }
500
+
 
 
 
 
 
 
501
  .message-actions {
502
  display: flex;
503
  gap: 0.5rem;
504
  padding: 0 0.5rem;
505
  }
506
+
507
  /* Loading & Empty States */
508
+ .loading, .empty-state, .error-state {
509
  text-align: center;
510
+ padding: 3rem;
511
+ color: var(--text-secondary);
512
+ display: flex;
513
+ flex-direction: column;
514
+ align-items: center;
515
+ gap: 1rem;
516
+ background: rgba(255,255,255,0.1);
517
+ border-radius: var(--radius-lg);
518
+ backdrop-filter: blur(10px);
519
+ margin: 2rem;
520
+ border: 1px solid var(--glass-border);
521
  }
522
+
523
+ .loading::before {
524
  content: '';
525
+ width: 40px;
526
+ height: 40px;
527
+ border: 3px solid rgba(255,255,255,0.3);
528
+ border-top-color: white;
 
 
529
  border-radius: 50%;
530
  animation: spin 1s linear infinite;
531
  }
532
+
533
  @keyframes spin {
534
  to { transform: rotate(360deg); }
535
  }
536
+
 
 
 
 
 
 
 
 
 
 
537
  .empty-state i, .error-state i {
538
+ font-size: 3rem;
539
+ color: rgba(255,255,255,0.5);
540
+ margin-bottom: 0.5rem;
 
 
 
 
 
 
 
 
 
 
541
  }
542
+
543
  .error-state i {
544
+ color: #f5576c;
 
 
 
 
 
545
  }
546
+
547
  .small-text {
548
  font-size: 0.875rem;
549
+ opacity: 0.8;
550
  }
551
+
552
+ /* Alerts */
553
  .alert {
554
+ padding: 1rem 1.5rem;
555
+ border-radius: var(--radius-md);
556
+ color: white;
557
+ font-weight: 600;
558
  display: flex;
559
  align-items: center;
560
  gap: 0.75rem;
561
+ box-shadow: 0 10px 25px rgba(0,0,0,0.2);
562
+ backdrop-filter: blur(10px);
563
+ border: 1px solid rgba(255,255,255,0.2);
564
+ animation: slideDown 0.3s ease;
 
 
 
565
  }
566
+
567
+ @keyframes slideDown {
568
  from {
569
  opacity: 0;
570
  transform: translateY(-20px);
 
574
  transform: translateY(0);
575
  }
576
  }
577
+
578
  .alert.success {
579
+ background: rgba(72, 187, 120, 0.9);
 
 
580
  }
581
+
582
  .alert.error {
583
+ background: rgba(245, 87, 108, 0.9);
 
 
584
  }
585
+
 
 
 
 
 
586
  /* Responsive Design */
587
+ @media (max-width: 968px) {
588
  .chat-sidebar {
589
+ position: fixed;
590
+ right: -320px;
591
+ top: 0;
592
+ height: 100vh;
593
+ transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
594
  }
595
+
596
+ .chat-sidebar.active {
597
+ right: 0;
 
 
 
598
  }
599
+
600
+ .message {
601
+ max-width: 85%;
 
 
602
  }
603
+
604
+ .header-actions {
605
+ flex-wrap: wrap;
606
+ gap: 0.5rem;
607
  }
608
+
609
+ .btn {
610
+ padding: 0.5rem 1rem;
611
+ font-size: 0.8125rem;
612
  }
613
+ }
614
+
615
+ @media (max-width: 640px) {
616
  .chat-header {
617
+ padding: 1rem;
 
 
618
  }
619
+
620
+ .header-info h1 {
621
+ font-size: 1.125rem;
 
622
  }
623
+
624
+ .chat-messages {
625
+ padding: 1rem;
626
+ }
627
+
628
  .message {
629
  max-width: 90%;
630
+ min-width: auto;
631
+ margin-left: 0.5rem;
632
+ margin-right: 0.5rem;
633
  }
634
+
635
+ .chat-footer {
636
+ padding: 1rem;
637
  }
638
+
639
  #message-input {
640
+ padding: 0.75rem 1rem;
641
  }
642
  }
643
+
644
+ /* Print Styles */
645
+ @media print {
646
+ .chat-sidebar, .chat-footer, .header-actions {
647
+ display: none;
648
  }
649
 
650
+ .chat-main {
651
+ background: white;
 
 
652
  }
653
 
654
+ .message {
655
+ break-inside: avoid;
656
+ box-shadow: none;
657
+ border: 1px solid #ddd;
658
  }
659
+ }
660
+
661
+ /* Reduced Motion */
662
+ @media (prefers-reduced-motion: reduce) {
663
+ * {
664
+ animation-duration: 0.01ms !important;
665
+ animation-iteration-count: 1 !important;
666
+ transition-duration: 0.01ms !important;
667
  }
668
+ }
669
+
670
+ /* Dark Mode Support (System Preference) */
671
+ @media (prefers-color-scheme: dark) {
672
+ :root {
673
+ --message-other-bg: rgba(30, 41, 59, 0.9);
674
+ --message-other-color: #e2e8f0;
675
+ --text-primary: #f7fafc;
676
  }
677
 
678
+ .chat-main {
679
+ background: rgba(15, 23, 42, 0.85);
680
  }
681
  }
 
 
 
 
 
 
 
 
 
 
 
 
682
  </style>
683
  </head>
684
  <body class="chat-page">
685
+ <div style="position: fixed; top: 20px; left: 20px; z-index: 9999; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); padding: 8px 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.3); font-size: 0.875rem; color: white; font-weight: 600;">
686
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: white; text-decoration: none; display: flex; align-items: center; gap: 8px;">
687
+ <i class="fas fa-code"></i> Built with anycoder
688
+ </a>
689
+ </div>
690
+
691
  <div class="chat-container">
 
692
  <aside class="chat-sidebar">
693
  <div class="sidebar-header">
694
  <h3><i class="fas fa-users"></i> کاربران آنلاین</h3>
695
+ <span class="room-name">اتاق گفتگوی اصلی</span>
696
  </div>
697
 
698
  <div class="users-list" id="users-list">
699
+ <div class="loading">در حال بارگذاری...</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
700
  </div>
701
 
702
  <div class="sidebar-footer">
703
+ <a href="dashboard.php" class="btn btn-secondary" style="width: 100%; justify-content: center;">
704
  <i class="fas fa-arrow-right"></i> بازگشت
705
  </a>
706
  </div>
707
  </aside>
708
 
 
709
  <main class="chat-main">
710
  <header class="chat-header">
711
  <div class="header-info">
712
+ <h1><i class="fas fa-comments"></i> اتاق گفتگو</h1>
713
+ <p>گفتگوی زنده با کاربران</p>
714
  </div>
715
  <div class="header-actions">
716
  <button class="btn btn-primary" onclick="clearChat()">
717
+ <i class="fas fa-trash"></i> پاک کردن چت
718
  </button>
719
  <button class="btn btn-secondary" onclick="leaveRoom()">
720
+ <i class="fas fa-sign-out-alt"></i> ترک اتاق
721
  </button>
722
  </div>
723
  </header>
724
 
725
  <div class="chat-messages" id="chat-messages">
726
+ <div class="loading">در حال بارگذاری پیام‌ها...</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
727
  </div>
728
 
729
  <footer class="chat-footer">
 
731
  <div class="message-input">
732
  <input type="text" id="message-input" placeholder="پیام خود را بنویسید..." autocomplete="off">
733
  <button type="submit" class="btn btn-primary">
734
+ <i class="fas fa-paper-plane"></i> ارسال
735
  </button>
736
  </div>
737
  <div class="message-actions">
 
744
  </footer>
745
  </main>
746
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
747
  </body>
748
  </html>