Hugging Face's logo

Spaces:
samirerty
/
anycoder-0f5271e4
Running

App Files Community
samirerty commited on
Commit
9b41e49
·
verified ·
1 Parent(s): 50bfe4e

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1359 -19
index.html CHANGED
@@ -1,19 +1,1359 @@
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
+ <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>