Hugging Face's logo

Spaces:
samirerty
/
anycoder-c0ad34ef
Running

App Files Community
samirerty commited on
Commit
6f718f5
·
verified ·
1 Parent(s): 81e6659

Upload folder using huggingface_hub

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