Hugging Face's logo

Spaces:
samirerty
/
anycoder-61a7f9e8
Running

App Files Community
samirerty commited on
Commit
6b9f33f
·
verified ·
1 Parent(s): b9780bc

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1185 -19
index.html CHANGED
@@ -1,19 +1,1185 @@
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
+ <html lang="fa" dir="rtl">
2
+ <head>
3
+ <meta charset="UTF-8">
4
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
+ <title>داشبورد - چت روم</title>
6
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
7
+ <style>
8
+ @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap');
9
+
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ :root {
17
+ --glass-bg: rgba(255, 255, 255, 0.08);
18
+ --glass-border: rgba(255, 255, 255, 0.18);
19
+ --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
20
+ --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
21
+ --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
22
+ --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
23
+ --text-primary: rgba(255, 255, 255, 0.95);
24
+ --text-secondary: rgba(255, 255, 255, 0.7);
25
+ --text-muted: rgba(255, 255, 255, 0.5);
26
+ --success-color: #00d9a5;
27
+ --warning-color: #ffb800;
28
+ --danger-color: #ff4757;
29
+ }
30
+
31
+ body {
32
+ font-family: 'Vazirmatn', 'Segoe UI', sans-serif;
33
+ min-height: 100vh;
34
+ background: linear-gradient(-45deg, #1a1a2e, #16213e, #0f3460, #1a1a2e);
35
+ background-size: 400% 400%;
36
+ animation: gradientShift 15s ease infinite;
37
+ color: var(--text-primary);
38
+ overflow-x: hidden;
39
+ position: relative;
40
+ }
41
+
42
+ @keyframes gradientShift {
43
+ 0% { background-position: 0% 50%; }
44
+ 50% { background-position: 100% 50%; }
45
+ 100% { background-position: 0% 50%; }
46
+ }
47
+
48
+ body::before {
49
+ content: '';
50
+ position: fixed;
51
+ top: -50%;
52
+ left: -20%;
53
+ width: 70%;
54
+ height: 100%;
55
+ background: radial-gradient(circle, rgba(102, 126, 234, 0.3) 0%, transparent 70%);
56
+ border-radius: 50%;
57
+ filter: blur(100px);
58
+ z-index: -1;
59
+ animation: floatOrb 20s ease-in-out infinite;
60
+ }
61
+
62
+ body::after {
63
+ content: '';
64
+ position: fixed;
65
+ bottom: -30%;
66
+ right: -10%;
67
+ width: 60%;
68
+ height: 80%;
69
+ background: radial-gradient(circle, rgba(240, 147, 251, 0.25) 0%, transparent 70%);
70
+ border-radius: 50%;
71
+ filter: blur(120px);
72
+ z-index: -1;
73
+ animation: floatOrb 25s ease-in-out infinite reverse;
74
+ }
75
+
76
+ @keyframes floatOrb {
77
+ 0%, 100% { transform: translate(0, 0) scale(1); }
78
+ 50% { transform: translate(30px, -30px) scale(1.1); }
79
+ }
80
+
81
+ .dashboard-container {
82
+ display: flex;
83
+ min-height: 100vh;
84
+ padding: 1rem;
85
+ gap: 1.5rem;
86
+ }
87
+
88
+ .sidebar {
89
+ width: 280px;
90
+ min-width: 280px;
91
+ background: var(--glass-bg);
92
+ backdrop-filter: blur(20px);
93
+ -webkit-backdrop-filter: blur(20px);
94
+ border: 1px solid var(--glass-border);
95
+ border-radius: 24px;
96
+ padding: 1.5rem;
97
+ display: flex;
98
+ flex-direction: column;
99
+ gap: 1.5rem;
100
+ box-shadow: var(--glass-shadow);
101
+ position: relative;
102
+ overflow: hidden;
103
+ }
104
+
105
+ .sidebar::before {
106
+ content: '';
107
+ position: absolute;
108
+ top: -50%;
109
+ left: -50%;
110
+ width: 200%;
111
+ height: 200%;
112
+ background: radial-gradient(circle at 30% 70%, rgba(102, 126, 234, 0.1) 0%, transparent 50%);
113
+ animation: shimmer 8s ease-in-out infinite;
114
+ }
115
+
116
+ @keyframes shimmer {
117
+ 0%, 100% { opacity: 0.5; transform: rotate(0deg); }
118
+ 50% { opacity: 1; transform: rotate(180deg); }
119
+ }
120
+
121
+ .user-info {
122
+ text-align: center;
123
+ padding-bottom: 1.5rem;
124
+ border-bottom: 1px solid var(--glass-border);
125
+ position: relative;
126
+ z-index: 1;
127
+ }
128
+
129
+ .avatar {
130
+ width: 80px;
131
+ height: 80px;
132
+ margin: 0 auto 1rem;
133
+ background: var(--primary-gradient);
134
+ border-radius: 50%;
135
+ display: flex;
136
+ align-items: center;
137
+ justify-content: center;
138
+ font-size: 2.5rem;
139
+ color: white;
140
+ box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4);
141
+ position: relative;
142
+ overflow: hidden;
143
+ }
144
+
145
+ .avatar::after {
146
+ content: '';
147
+ position: absolute;
148
+ inset: 0;
149
+ background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
150
+ animation: shine 3s infinite;
151
+ }
152
+
153
+ @keyframes shine {
154
+ 0% { transform: translateX(-100%); }
155
+ 100% { transform: translateX(100%); }
156
+ }
157
+
158
+ .user-info h3 {
159
+ font-size: 1.1rem;
160
+ font-weight: 600;
161
+ margin-bottom: 0.25rem;
162
+ }
163
+
164
+ .user-info p {
165
+ font-size: 0.85rem;
166
+ color: var(--text-secondary);
167
+ margin-bottom: 0.75rem;
168
+ }
169
+
170
+ .status {
171
+ display: inline-flex;
172
+ align-items: center;
173
+ gap: 0.4rem;
174
+ padding: 0.4rem 1rem;
175
+ background: rgba(0, 217, 165, 0.15);
176
+ border: 1px solid rgba(0, 217, 165, 0.3);
177
+ border-radius: 20px;
178
+ font-size: 0.8rem;
179
+ color: var(--success-color);
180
+ font-weight: 500;
181
+ }
182
+
183
+ .status i {
184
+ font-size: 0.6rem;
185
+ animation: pulse 2s ease-in-out infinite;
186
+ }
187
+
188
+ @keyframes pulse {
189
+ 0%, 100% { opacity: 1; transform: scale(1); }
190
+ 50% { opacity: 0.5; transform: scale(0.8); }
191
+ }
192
+
193
+ .sidebar-nav {
194
+ flex: 1;
195
+ position: relative;
196
+ z-index: 1;
197
+ }
198
+
199
+ .sidebar-nav ul {
200
+ list-style: none;
201
+ display: flex;
202
+ flex-direction: column;
203
+ gap: 0.5rem;
204
+ }
205
+
206
+ .sidebar-nav li {
207
+ position: relative;
208
+ }
209
+
210
+ .sidebar-nav li a {
211
+ display: flex;
212
+ align-items: center;
213
+ gap: 0.75rem;
214
+ padding: 0.875rem 1rem;
215
+ color: var(--text-secondary);
216
+ text-decoration: none;
217
+ border-radius: 12px;
218
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
219
+ position: relative;
220
+ overflow: hidden;
221
+ }
222
+
223
+ .sidebar-nav li a::before {
224
+ content: '';
225
+ position: absolute;
226
+ inset: 0;
227
+ background: var(--primary-gradient);
228
+ opacity: 0;
229
+ transition: opacity 0.3s ease;
230
+ border-radius: 12px;
231
+ }
232
+
233
+ .sidebar-nav li a:hover,
234
+ .sidebar-nav li.active a {
235
+ color: var(--text-primary);
236
+ background: rgba(255, 255, 255, 0.05);
237
+ }
238
+
239
+ .sidebar-nav li.active a::before {
240
+ opacity: 0.15;
241
+ }
242
+
243
+ .sidebar-nav li a i {
244
+ width: 24px;
245
+ text-align: center;
246
+ font-size: 1.1rem;
247
+ position: relative;
248
+ z-index: 1;
249
+ transition: transform 0.3s ease;
250
+ }
251
+
252
+ .sidebar-nav li a:hover i {
253
+ transform: scale(1.1);
254
+ }
255
+
256
+ .sidebar-nav li a span {
257
+ position: relative;
258
+ z-index: 1;
259
+ font-weight: 500;
260
+ }
261
+
262
+ .sidebar-footer {
263
+ padding-top: 1rem;
264
+ border-top: 1px solid var(--glass-border);
265
+ text-align: center;
266
+ font-size: 0.85rem;
267
+ color: var(--text-muted);
268
+ position: relative;
269
+ z-index: 1;
270
+ }
271
+
272
+ .sidebar-footer #online-count {
273
+ color: var(--success-color);
274
+ font-weight: 600;
275
+ }
276
+
277
+ .main-content {
278
+ flex: 1;
279
+ display: flex;
280
+ flex-direction: column;
281
+ gap: 1.5rem;
282
+ min-width: 0;
283
+ }
284
+
285
+ .header {
286
+ background: var(--glass-bg);
287
+ backdrop-filter: blur(20px);
288
+ -webkit-backdrop-filter: blur(20px);
289
+ border: 1px solid var(--glass-border);
290
+ border-radius: 20px;
291
+ padding: 1.25rem 1.5rem;
292
+ display: flex;
293
+ align-items: center;
294
+ justify-content: space-between;
295
+ box-shadow: var(--glass-shadow);
296
+ }
297
+
298
+ .header h1 {
299
+ display: flex;
300
+ align-items: center;
301
+ gap: 0.75rem;
302
+ font-size: 1.4rem;
303
+ font-weight: 700;
304
+ background: var(--primary-gradient);
305
+ -webkit-background-clip: text;
306
+ -webkit-text-fill-color: transparent;
307
+ background-clip: text;
308
+ }
309
+
310
+ .header h1 i {
311
+ font-size: 1.2rem;
312
+ -webkit-text-fill-color: #667eea;
313
+ }
314
+
315
+ .header-actions {
316
+ display: flex;
317
+ gap: 0.75rem;
318
+ }
319
+
320
+ .btn {
321
+ display: inline-flex;
322
+ align-items: center;
323
+ gap: 0.5rem;
324
+ padding: 0.75rem 1.25rem;
325
+ border: none;
326
+ border-radius: 12px;
327
+ font-family: inherit;
328
+ font-size: 0.9rem;
329
+ font-weight: 500;
330
+ cursor: pointer;
331
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
332
+ position: relative;
333
+ overflow: hidden;
334
+ }
335
+
336
+ .btn::before {
337
+ content: '';
338
+ position: absolute;
339
+ inset: 0;
340
+ background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
341
+ transform: translateX(-100%);
342
+ transition: transform 0.5s ease;
343
+ }
344
+
345
+ .btn:hover::before {
346
+ transform: translateX(100%);
347
+ }
348
+
349
+ .btn-primary {
350
+ background: var(--primary-gradient);
351
+ color: white;
352
+ box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
353
+ }
354
+
355
+ .btn-primary:hover {
356
+ transform: translateY(-2px);
357
+ box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
358
+ }
359
+
360
+ .btn-secondary {
361
+ background: rgba(255, 255, 255, 0.1);
362
+ color: var(--text-secondary);
363
+ border: 1px solid var(--glass-border);
364
+ }
365
+
366
+ .btn-secondary:hover {
367
+ background: rgba(255, 255, 255, 0.15);
368
+ color: var(--text-primary);
369
+ }
370
+
371
+ .btn-warning {
372
+ background: rgba(255, 184, 0, 0.2);
373
+ color: var(--warning-color);
374
+ border: 1px solid rgba(255, 184, 0, 0.3);
375
+ padding: 0.75rem;
376
+ }
377
+
378
+ .btn-warning:hover {
379
+ background: rgba(255, 184, 0, 0.3);
380
+ }
381
+
382
+ .content {
383
+ display: flex;
384
+ flex-direction: column;
385
+ gap: 1.5rem;
386
+ }
387
+
388
+ .announcements-section,
389
+ .rooms-section {
390
+ background: var(--glass-bg);
391
+ backdrop-filter: blur(20px);
392
+ -webkit-backdrop-filter: blur(20px);
393
+ border: 1px solid var(--glass-border);
394
+ border-radius: 24px;
395
+ padding: 1.5rem;
396
+ box-shadow: var(--glass-shadow);
397
+ position: relative;
398
+ }
399
+
400
+ .announcements-section::before,
401
+ .rooms-section::before {
402
+ content: '';
403
+ position: absolute;
404
+ top: -30%;
405
+ right: -20%;
406
+ width: 40%;
407
+ height: 60%;
408
+ background: radial-gradient(circle, rgba(79, 172, 254, 0.15) 0%, transparent 70%);
409
+ border-radius: 50%;
410
+ filter: blur(60px);
411
+ pointer-events: none;
412
+ }
413
+
414
+ .announcements-section h2,
415
+ .rooms-section h2 {
416
+ display: flex;
417
+ align-items: center;
418
+ gap: 0.75rem;
419
+ font-size: 1.2rem;
420
+ font-weight: 600;
421
+ margin-bottom: 1.25rem;
422
+ color: var(--text-primary);
423
+ }
424
+
425
+ .announcements-section h2 i {
426
+ color: var(--warning-color);
427
+ }
428
+
429
+ .rooms-section h2 i {
430
+ color: #4facfe;
431
+ }
432
+
433
+ .announcements-list {
434
+ display: flex;
435
+ flex-direction: column;
436
+ gap: 1rem;
437
+ }
438
+
439
+ .announcement-card {
440
+ background: rgba(255, 255, 255, 0.03);
441
+ border: 1px solid var(--glass-border);
442
+ border-radius: 16px;
443
+ padding: 1.25rem;
444
+ transition: all 0.3s ease;
445
+ position: relative;
446
+ overflow: hidden;
447
+ }
448
+
449
+ .announcement-card::before {
450
+ content: '';
451
+ position: absolute;
452
+ left: 0;
453
+ top: 0;
454
+ bottom: 0;
455
+ width: 4px;
456
+ background: var(--accent-gradient);
457
+ border-radius: 16px 0 0 16px;
458
+ }
459
+
460
+ .announcement-card:hover {
461
+ background: rgba(255, 255, 255, 0.06);
462
+ transform: translateX(-4px);
463
+ }
464
+
465
+ .announcement-header {
466
+ display: flex;
467
+ align-items: center;
468
+ justify-content: space-between;
469
+ margin-bottom: 0.75rem;
470
+ flex-wrap: wrap;
471
+ gap: 0.5rem;
472
+ }
473
+
474
+ .announcement-header h3 {
475
+ font-size: 1rem;
476
+ font-weight: 600;
477
+ color: var(--text-primary);
478
+ }
479
+
480
+ .announcement-date {
481
+ font-size: 0.75rem;
482
+ color: var(--text-muted);
483
+ padding: 0.25rem 0.75rem;
484
+ background: rgba(255, 255, 255, 0.05);
485
+ border-radius: 20px;
486
+ }
487
+
488
+ .announcement-content p {
489
+ font-size: 0.9rem;
490
+ color: var(--text-secondary);
491
+ line-height: 1.7;
492
+ }
493
+
494
+ .rooms-grid {
495
+ display: grid;
496
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
497
+ gap: 1.25rem;
498
+ }
499
+
500
+ .room-card {
501
+ background: rgba(255, 255, 255, 0.03);
502
+ border: 1px solid var(--glass-border);
503
+ border-radius: 20px;
504
+ padding: 1.5rem;
505
+ display: flex;
506
+ flex-direction: column;
507
+ gap: 1rem;
508
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
509
+ position: relative;
510
+ overflow: hidden;
511
+ }
512
+
513
+ .room-card::after {
514
+ content: '';
515
+ position: absolute;
516
+ top: 0;
517
+ right: 0;
518
+ width: 100px;
519
+ height: 100px;
520
+ background: radial-gradient(circle, rgba(102, 126, 234, 0.2) 0%, transparent 70%);
521
+ filter: blur(40px);
522
+ opacity: 0;
523
+ transition: opacity 0.3s ease;
524
+ }
525
+
526
+ .room-card:hover {
527
+ background: rgba(255, 255, 255, 0.06);
528
+ transform: translateY(-4px);
529
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
530
+ }
531
+
532
+ .room-card:hover::after {
533
+ opacity: 1;
534
+ }
535
+
536
+ .room-icon {
537
+ width: 56px;
538
+ height: 56px;
539
+ background: var(--primary-gradient);
540
+ border-radius: 16px;
541
+ display: flex;
542
+ align-items: center;
543
+ justify-content: center;
544
+ font-size: 1.5rem;
545
+ color: white;
546
+ box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
547
+ }
548
+
549
+ .room-info h3 {
550
+ font-size: 1.1rem;
551
+ font-weight: 600;
552
+ margin-bottom: 0.5rem;
553
+ color: var(--text-primary);
554
+ }
555
+
556
+ .room-info > p {
557
+ font-size: 0.85rem;
558
+ color: var(--text-secondary);
559
+ margin-bottom: 1rem;
560
+ line-height: 1.6;
561
+ display: -webkit-box;
562
+ -webkit-line-clamp: 2;
563
+ -webkit-box-orient: vertical;
564
+ overflow: hidden;
565
+ }
566
+
567
+ .room-stats {
568
+ display: flex;
569
+ gap: 1rem;
570
+ flex-wrap: wrap;
571
+ }
572
+
573
+ .room-stats span {
574
+ display: flex;
575
+ align-items: center;
576
+ gap: 0.4rem;
577
+ font-size: 0.8rem;
578
+ color: var(--text-muted);
579
+ }
580
+
581
+ .room-stats i {
582
+ font-size: 0.9rem;
583
+ }
584
+
585
+ .room-stats .room-user-count {
586
+ color: var(--success-color);
587
+ font-weight: 600;
588
+ }
589
+
590
+ .room-actions {
591
+ display: flex;
592
+ gap: 0.75rem;
593
+ margin-top: auto;
594
+ padding-top: 1rem;
595
+ border-top: 1px solid var(--glass-border);
596
+ }
597
+
598
+ .room-actions .btn {
599
+ flex: 1;
600
+ justify-content: center;
601
+ }
602
+
603
+ .empty-state {
604
+ display: flex;
605
+ flex-direction: column;
606
+ align-items: center;
607
+ justify-content: center;
608
+ padding: 3rem 2rem;
609
+ text-align: center;
610
+ color: var(--text-muted);
611
+ }
612
+
613
+ .empty-state i {
614
+ font-size: 3rem;
615
+ margin-bottom: 1rem;
616
+ opacity: 0.5;
617
+ }
618
+
619
+ .empty-state p {
620
+ font-size: 0.95rem;
621
+ }
622
+
623
+ .modal {
624
+ display: none;
625
+ position: fixed;
626
+ inset: 0;
627
+ background: rgba(0, 0, 0, 0.6);
628
+ backdrop-filter: blur(8px);
629
+ -webkit-backdrop-filter: blur(8px);
630
+ z-index: 1000;
631
+ align-items: center;
632
+ justify-content: center;
633
+ padding: 1rem;
634
+ animation: fadeIn 0.3s ease;
635
+ }
636
+
637
+ @keyframes fadeIn {
638
+ from { opacity: 0; }
639
+ to { opacity: 1; }
640
+ }
641
+
642
+ .modal[style*="block"] {
643
+ display: flex !important;
644
+ }
645
+
646
+ .modal-content {
647
+ background: rgba(26, 26, 46, 0.95);
648
+ backdrop-filter: blur(30px);
649
+ -webkit-backdrop-filter: blur(30px);
650
+ border: 1px solid var(--glass-border);
651
+ border-radius: 24px;
652
+ width: 100%;
653
+ max-width: 480px;
654
+ max-height: 90vh;
655
+ overflow: hidden;
656
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
657
+ animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
658
+ }
659
+
660
+ @keyframes slideUp {
661
+ from {
662
+ opacity: 0;
663
+ transform: translateY(30px) scale(0.95);
664
+ }
665
+ to {
666
+ opacity: 1;
667
+ transform: translateY(0) scale(1);
668
+ }
669
+ }
670
+
671
+ .modal-header {
672
+ display: flex;
673
+ align-items: center;
674
+ justify-content: space-between;
675
+ padding: 1.5rem;
676
+ border-bottom: 1px solid var(--glass-border);
677
+ }
678
+
679
+ .modal-header h2 {
680
+ display: flex;
681
+ align-items: center;
682
+ gap: 0.75rem;
683
+ font-size: 1.15rem;
684
+ font-weight: 600;
685
+ }
686
+
687
+ .modal-header h2 i {
688
+ color: #667eea;
689
+ }
690
+
691
+ .close-btn {
692
+ width: 36px;
693
+ height: 36px;
694
+ display: flex;
695
+ align-items: center;
696
+ justify-content: center;
697
+ background: rgba(255, 255, 255, 0.05);
698
+ border: 1px solid var(--glass-border);
699
+ border-radius: 10px;
700
+ color: var(--text-secondary);
701
+ font-size: 1.25rem;
702
+ cursor: pointer;
703
+ transition: all 0.2s ease;
704
+ }
705
+
706
+ .close-btn:hover {
707
+ background: rgba(255, 71, 87, 0.2);
708
+ color: var(--danger-color);
709
+ border-color: rgba(255, 71, 87, 0.3);
710
+ }
711
+
712
+ .modal-body {
713
+ padding: 1.5rem;
714
+ overflow-y: auto;
715
+ }
716
+
717
+ .form-group {
718
+ margin-bottom: 1.25rem;
719
+ }
720
+
721
+ .form-group label {
722
+ display: block;
723
+ margin-bottom: 0.5rem;
724
+ font-size: 0.9rem;
725
+ color: var(--text-secondary);
726
+ font-weight: 500;
727
+ }
728
+
729
+ .form-group label:has(input[type="checkbox"]) {
730
+ display: flex;
731
+ align-items: center;
732
+ gap: 0.75rem;
733
+ cursor: pointer;
734
+ padding: 0.75rem;
735
+ background: rgba(255, 255, 255, 0.03);
736
+ border-radius: 12px;
737
+ border: 1px solid var(--glass-border);
738
+ transition: all 0.2s ease;
739
+ }
740
+
741
+ .form-group label:has(input[type="checkbox"]):hover {
742
+ background: rgba(255, 255, 255, 0.06);
743
+ }
744
+
745
+ .form-group input[type="text"],
746
+ .form-group textarea {
747
+ width: 100%;
748
+ padding: 0.875rem 1rem;
749
+ background: rgba(255, 255, 255, 0.03);
750
+ border: 1px solid var(--glass-border);
751
+ border-radius: 12px;
752
+ color: var(--text-primary);
753
+ font-family: inherit;
754
+ font-size: 0.95rem;
755
+ transition: all 0.2s ease;
756
+ }
757
+
758
+ .form-group input[type="text"]:focus,
759
+ .form-group textarea:focus {
760
+ outline: none;
761
+ border-color: rgba(102, 126, 234, 0.5);
762
+ background: rgba(255, 255, 255, 0.05);
763
+ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
764
+ }
765
+
766
+ .form-group textarea {
767
+ resize: vertical;
768
+ min-height: 80px;
769
+ }
770
+
771
+ .form-group input[type="checkbox"] {
772
+ width: 20px;
773
+ height: 20px;
774
+ accent-color: #667eea;
775
+ cursor: pointer;
776
+ }
777
+
778
+ .form-actions {
779
+ display: flex;
780
+ gap: 0.75rem;
781
+ margin-top: 1.5rem;
782
+ }
783
+
784
+ .form-actions .btn {
785
+ flex: 1;
786
+ justify-content: center;
787
+ }
788
+
789
+ @media (max-width: 1024px) {
790
+ .dashboard-container {
791
+ flex-direction: column;
792
+ }
793
+
794
+ .sidebar {
795
+ width: 100%;
796
+ min-width: auto;
797
+ flex-direction: row;
798
+ align-items: center;
799
+ padding: 1rem;
800
+ }
801
+
802
+ .user-info {
803
+ border-bottom: none;
804
+ border-left: 1px solid var(--glass-border);
805
+ padding-bottom: 0;
806
+ padding-left: 1rem;
807
+ text-align: right;
808
+ }
809
+
810
+ .avatar {
811
+ width: 60px;
812
+ height: 60px;
813
+ font-size: 1.75rem;
814
+ }
815
+
816
+ .user-info h3 {
817
+ font-size: 1rem;
818
+ }
819
+
820
+ .sidebar-nav {
821
+ flex: 2;
822
+ }
823
+
824
+ .sidebar-nav ul {
825
+ flex-direction: row;
826
+ flex-wrap: wrap;
827
+ justify-content: center;
828
+ }
829
+
830
+ .sidebar-footer {
831
+ border-top: none;
832
+ border-right: 1px solid var(--glass-border);
833
+ padding-top: 0;
834
+ padding-right: 1rem;
835
+ }
836
+ }
837
+
838
+ @media (max-width: 768px) {
839
+ .dashboard-container {
840
+ padding: 0.75rem;
841
+ gap: 1rem;
842
+ }
843
+
844
+ .sidebar {
845
+ flex-direction: column;
846
+ gap: 1rem;
847
+ }
848
+
849
+ .user-info {
850
+ border-left: none;
851
+ border-bottom: 1px solid var(--glass-border);
852
+ padding-left: 0;
853
+ padding-bottom: 1rem;
854
+ }
855
+
856
+ .sidebar-nav ul {
857
+ flex-direction: column;
858
+ }
859
+
860
+ .sidebar-footer {
861
+ border-right: none;
862
+ border-top: 1px solid var(--glass-border);
863
+ padding-right: 0;
864
+ padding-top: 1rem;
865
+ }
866
+
867
+ .header {
868
+ flex-direction: column;
869
+ gap: 1rem;
870
+ text-align: center;
871
+ }
872
+
873
+ .rooms-grid {
874
+ grid-template-columns: 1fr;
875
+ }
876
+
877
+ .room-actions {
878
+ flex-direction: column;
879
+ }
880
+
881
+ .modal-content {
882
+ max-height: 95vh;
883
+ }
884
+ }
885
+
886
+ @media (max-width: 480px) {
887
+ .announcement-header {
888
+ flex-direction: column;
889
+ align-items: flex-start;
890
+ }
891
+
892
+ .room-stats {
893
+ flex-direction: column;
894
+ gap: 0.5rem;
895
+ }
896
+
897
+ .form-actions {
898
+ flex-direction: column;
899
+ }
900
+ }
901
+
902
+ .announcement-content br {
903
+ display: block;
904
+ margin: 0.5rem 0;
905
+ content: "";
906
+ }
907
+
908
+ .announcement-content p {
909
+ white-space: pre-wrap;
910
+ }
911
+
912
+ ::-webkit-scrollbar {
913
+ width: 8px;
914
+ height: 8px;
915
+ }
916
+
917
+ ::-webkit-scrollbar-track {
918
+ background: rgba(255, 255, 255, 0.02);
919
+ border-radius: 4px;
920
+ }
921
+
922
+ ::-webkit-scrollbar-thumb {
923
+ background: rgba(255, 255, 255, 0.1);
924
+ border-radius: 4px;
925
+ }
926
+
927
+ ::-webkit-scrollbar-thumb:hover {
928
+ background: rgba(255, 255, 255, 0.2);
929
+ }
930
+
931
+ ::placeholder {
932
+ color: var(--text-muted);
933
+ }
934
+
935
+ .sidebar-nav li.active {
936
+ position: relative;
937
+ }
938
+
939
+ .sidebar-nav li.active::before {
940
+ content: '';
941
+ position: absolute;
942
+ right: -1.5rem;
943
+ top: 50%;
944
+ transform: translateY(-50%);
945
+ width: 4px;
946
+ height: 60%;
947
+ background: var(--primary-gradient);
948
+ border-radius: 2px;
949
+ }
950
+
951
+ @media (max-width: 1024px) {
952
+ .sidebar-nav li.active::before {
953
+ display: none;
954
+ }
955
+ }
956
+
957
+ .room-card .room-icon {
958
+ position: relative;
959
+ }
960
+
961
+ .room-card .room-icon::after {
962
+ content: '';
963
+ position: absolute;
964
+ inset: -4px;
965
+ border-radius: 20px;
966
+ background: var(--primary-gradient);
967
+ opacity: 0.3;
968
+ filter: blur(8px);
969
+ z-index: -1;
970
+ }
971
+ </style>
972
+ </head>
973
+ <body>
974
+ <div style="position: fixed; top: 1rem; left: 1rem; z-index: 9999;">
975
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="
976
+ background: rgba(255,255,255,0.1);
977
+ backdrop-filter: blur(10px);
978
+ border: 1px solid rgba(255,255,255,0.2);
979
+ padding: 0.5rem 1rem;
980
+ border-radius: 8px;
981
+ color: rgba(255,255,255,0.8);
982
+ text-decoration: none;
983
+ font-size: 0.8rem;
984
+ transition: all 0.3s ease;
985
+ ">Built with anycoder</a>
986
+ </div>
987
+ <!-- [Previous HTML content preserved exactly as provided] -->
988
+ <div class="dashboard-container">
989
+ <!-- نوار کناری -->
990
+ <aside class="sidebar">
991
+ <div class="user-info">
992
+ <div class="avatar">
993
+ <i class="fas fa-user-circle"></i>
994
+ </div>
995
+ <h3>نام کاربر</h3>
996
+ <p>@username</p>
997
+ <span class="status online"><i class="fas fa-circle"></i> آنلاین</span>
998
+ </div>
999
+
1000
+ <nav class="sidebar-nav">
1001
+ <ul>
1002
+ <li class="active"><a href="dashboard.php"><i class="fas fa-home"></i> صفحه اصلی</a></li>
1003
+ <li><a href="chat.php?room=1"><i class="fas fa-comments"></i> چت عمومی</a></li>
1004
+ <li><a href="profile.php"><i class="fas fa-user-cog"></i> تنظیمات پروفایل</a></li>
1005
+ <li><a href="admin.php"><i class="fas fa-shield-alt"></i> پنل ادمین</a></li>
1006
+ <li><a href="logout.php"><i class="fas fa-sign-out-alt"></i> خروج</a></li>
1007
+ </ul>
1008
+ </nav>
1009
+
1010
+ <div class="sidebar-footer">
1011
+ <p>کاربران آنلاین: <span id="online-count">12</span></p>
1012
+ </div>
1013
+ </aside>
1014
+
1015
+ <!-- محتوای اصلی -->
1016
+ <main class="main-content">
1017
+ <header class="header">
1018
+ <h1><i class="fas fa-home"></i> صفحه اصلی</h1>
1019
+ <div class="header-actions">
1020
+ <button class="btn btn-primary" onclick="createRoomModal()">
1021
+ <i class="fas fa-plus"></i> ایجاد چت روم جدید
1022
+ </button>
1023
+ </div>
1024
+ </header>
1025
+
1026
+ <div class="content">
1027
+ <!-- بخش اعلان‌ها -->
1028
+ <section class="announcements-section">
1029
+ <h2><i class="fas fa-bullhorn"></i> اعلان‌ها</h2>
1030
+ <div class="announcements-list">
1031
+ <div class="announcement-card">
1032
+ <div class="announcement-header">
1033
+ <h3>به داشبورد جدید خوش آمدید</h3>
1034
+ <span class="announcement-date">1403/10/15 14:30</span>
1035
+ </div>
1036
+ <div class="announcement-content">
1037
+ <p>نسخه جدید داشبورد با طراحی مدرن و امکانات پیشرفته در دسترس است. از تجربه کاربری جدید لذت ببرید!</p>
1038
+ </div>
1039
+ </div>
1040
+ <div class="announcement-card">
1041
+ <div class="announcement-header">
1042
+ <h3>به‌روزرسانی سیستم</h3>
1043
+ <span class="announcement-date">1403/10/14 09:00</span>
1044
+ </div>
1045
+ <div class="announcement-content">
1046
+ <p>سیستم چت به‌روزرسانی شد. اکنون می‌توانید از قابلیت‌های جدید استفاده کنید.</p>
1047
+ </div>
1048
+ </div>
1049
+ </div>
1050
+ </section>
1051
+
1052
+ <!-- بخش اتاق‌های چت -->
1053
+ <section class="rooms-section">
1054
+ <h2><i class="fas fa-door-open"></i> اتاق‌های چت موجود</h2>
1055
+ <div class="rooms-grid">
1056
+ <div class="room-card">
1057
+ <div class="room-icon">
1058
+ <i class="fas fa-comments"></i>
1059
+ </div>
1060
+ <div class="room-info">
1061
+ <h3>چت عمومی</h3>
1062
+ <p>اتاق چت عمومی برای گفتگوی آزاد کاربران</p>
1063
+ <div class="room-stats">
1064
+ <span><i class="fas fa-users"></i> <span class="room-user-count" data-room="1">5</span> نفر</span>
1065
+ <span><i class="fas fa-clock"></i> 1403/01/01</span>
1066
+ </div>
1067
+ </div>
1068
+ <div class="room-actions">
1069
+ <a href="chat.php?room=1" class="btn btn-primary">
1070
+ <i class="fas fa-sign-in-alt"></i> ورود
1071
+ </a>
1072
+ <button class="btn btn-warning" onclick="editRoom(1)">
1073
+ <i class="fas fa-edit"></i>
1074
+ </button>
1075
+ </div>
1076
+ </div>
1077
+ <div class="room-card">
1078
+ <div class="room-icon">
1079
+ <i class="fas fa-comments"></i>
1080
+ </div>
1081
+ <div class="room-info">
1082
+ <h3>بحث و گفتگو</h3>
1083
+ <p>اتاق برای بحث‌های تخصصی و موضوعی</p>
1084
+ <div class="room-stats">
1085
+ <span><i class="fas fa-users"></i> <span class="room-user-count" data-room="2">3</span> نفر</span>
1086
+ <span><i class="fas fa-clock"></i> 1403/05/15</span>
1087
+ </div>
1088
+ </div>
1089
+ <div class="room-actions">
1090
+ <a href="chat.php?room=2" class="btn btn-primary">
1091
+ <i class="fas fa-sign-in-alt"></i> ورود
1092
+ </a>
1093
+ </div>
1094
+ </div>
1095
+ <div class="room-card">
1096
+ <div class="room-icon">
1097
+ <i class="fas fa-comments"></i>
1098
+ </div>
1099
+ <div class="room-info">
1100
+ <h3>اتاق بازی</h3>
1101
+ <p>گفتگو و هماهنگی برای بازی‌های گروهی</p>
1102
+ <div class="room-stats">
1103
+ <span><i class="fas fa-users"></i> <span class="room-user-count" data-room="3">8</span> نفر</span>
1104
+ <span><i class="fas fa-clock"></i> 1403/08/20</span>
1105
+ </div>
1106
+ </div>
1107
+ <div class="room-actions">
1108
+ <a href="chat.php?room=3" class="btn btn-primary">
1109
+ <i class="fas fa-sign-in-alt"></i> ورود
1110
+ </a>
1111
+ </div>
1112
+ </div>
1113
+ </div>
1114
+ </section>
1115
+ </div>
1116
+ </main>
1117
+ </div>
1118
+
1119
+ <!-- مودال ایجاد اتاق چت -->
1120
+ <div id="createRoomModal" class="modal">
1121
+ <div class="modal-content">
1122
+ <div class="modal-header">
1123
+ <h2><i class="fas fa-plus"></i> ایجاد اتاق چت جدید</h2>
1124
+ <button class="close-btn" onclick="closeModal()">&times;</button>
1125
+ </div>
1126
+ <div class="modal-body">
1127
+ <form id="createRoomForm">
1128
+ <div class="form-group">
1129
+ <label for="room_name">نام اتاق</label>
1130
+ <input type="text" id="room_name" name="room_name" required>
1131
+ </div>
1132
+
1133
+ <div class="form-group">
1134
+ <label for="room_description">توضیحات</label>
1135
+ <textarea id="room_description" name="room_description" rows="3"></textarea>
1136
+ </div>
1137
+
1138
+ <div class="form-group">
1139
+ <label>
1140
+ <input type="checkbox" id="room_locked" name="room_locked">
1141
+ قفل کردن اتاق (فقط ادمین‌ها می‌توانند وارد شوند)
1142
+ </label>
1143
+ </div>
1144
+
1145
+ <div class="form-actions">
1146
+ <button type="button" class="btn btn-secondary" onclick="closeModal()">انصراف</button>
1147
+ <button type="submit" class="btn btn-primary">ایجاد اتاق</button>
1148
+ </div>
1149
+ </form>
1150
+ </div>
1151
+ </div>
1152
+ </div>
1153
+
1154
+ <script>
1155
+ // باز کردن مودال ایجاد اتاق
1156
+ function createRoomModal() {
1157
+ document.getElementById('createRoomModal').style.display = 'flex';
1158
+ }
1159
+
1160
+ // بستن مودال
1161
+ function closeModal() {
1162
+ document.getElementById('createRoomModal').style.display = 'none';
1163
+ }
1164
+
1165
+ // بستن مودال با کلیک خارج
1166
+ document.getElementById('createRoomModal').addEventListener('click', function(e) {
1167
+ if (e.target === this) {
1168
+ closeModal();
1169
+ }
1170
+ });
1171
+
1172
+ // ارسال فرم ایجاد اتاق
1173
+ document.getElementById('createRoomForm').addEventListener('submit', function(e) {
1174
+ e.preventDefault();
1175
+ alert('اتاق با موفقیت ایجاد شد');
1176
+ closeModal();
1177
+ });
1178
+
1179
+ // ویرایش اتاق
1180
+ function editRoom(id) {
1181
+ alert('ویرایش اتاق ' + id);
1182
+ }
1183
+ </script>
1184
+ </body>
1185
+ </html>