Hugging Face's logo

Spaces:
samirerty
/
anycoder-dcaf1a67
Running

App Files Community
samirerty commited on
Commit
f0b0b9e
·
verified ·
1 Parent(s): 471fe3e

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +767 -19
index.html CHANGED
@@ -1,19 +1,767 @@
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, maximum-scale=1.0, user-scalable=no">
6
+ <title>چت روم ساده</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ :root {
16
+ --glass-bg: rgba(255, 255, 255, 0.1);
17
+ --glass-border: rgba(255, 255, 255, 0.2);
18
+ --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
19
+ --primary-dark: #0f3460;
20
+ --primary-purple: #533483;
21
+ --accent-pink: #E94584;
22
+ --accent-teal: #4FD3C4;
23
+ --text-primary: rgba(255, 255, 255, 0.95);
24
+ --text-secondary: rgba(255, 255, 255, 0.7);
25
+ --text-tertiary: rgba(255, 255, 255, 0.5);
26
+ }
27
+
28
+ html {
29
+ font-size: 16px;
30
+ height: 100%;
31
+ }
32
+
33
+ body {
34
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
35
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
36
+ min-height: 100vh;
37
+ overflow-x: hidden;
38
+ position: relative;
39
+ color: var(--text-primary);
40
+ }
41
+
42
+ /* Animated Background Shapes */
43
+ .bg-shapes {
44
+ position: fixed;
45
+ top: 0;
46
+ left: 0;
47
+ width: 100%;
48
+ height: 100%;
49
+ overflow: hidden;
50
+ z-index: -1;
51
+ pointer-events: none;
52
+ }
53
+
54
+ .shape {
55
+ position: absolute;
56
+ filter: blur(80px);
57
+ opacity: 0.4;
58
+ animation: float 20s infinite ease-in-out;
59
+ }
60
+
61
+ .shape-1 {
62
+ width: 300px;
63
+ height: 300px;
64
+ background: var(--accent-pink);
65
+ border-radius: 50%;
66
+ top: -100px;
67
+ right: -100px;
68
+ animation-delay: 0s;
69
+ }
70
+
71
+ .shape-2 {
72
+ width: 250px;
73
+ height: 250px;
74
+ background: var(--accent-teal);
75
+ border-radius: 50%;
76
+ bottom: 20%;
77
+ left: -50px;
78
+ animation-delay: 5s;
79
+ }
80
+
81
+ .shape-3 {
82
+ width: 200px;
83
+ height: 200px;
84
+ background: var(--primary-purple);
85
+ border-radius: 50%;
86
+ top: 40%;
87
+ right: 10%;
88
+ animation-delay: 10s;
89
+ }
90
+
91
+ @keyframes float {
92
+ 0%, 100% { transform: translate(0, 0) scale(1); }
93
+ 33% { transform: translate(30px, -30px) scale(1.1); }
94
+ 66% { transform: translate(-20px, 20px) scale(0.9); }
95
+ }
96
+
97
+ /* iOS Status Bar */
98
+ .status-bar {
99
+ display: flex;
100
+ justify-content: space-between;
101
+ align-items: center;
102
+ padding: 0.75rem 1.5rem;
103
+ font-size: 0.875rem;
104
+ font-weight: 600;
105
+ color: var(--text-primary);
106
+ position: sticky;
107
+ top: 0;
108
+ z-index: 100;
109
+ backdrop-filter: blur(20px);
110
+ background: rgba(15, 52, 96, 0.3);
111
+ border-bottom: 1px solid var(--glass-border);
112
+ }
113
+
114
+ .status-time {
115
+ font-variant-numeric: tabular-nums;
116
+ }
117
+
118
+ .status-icons {
119
+ display: flex;
120
+ gap: 0.5rem;
121
+ align-items: center;
122
+ }
123
+
124
+ .status-icons i {
125
+ font-size: 0.875rem;
126
+ }
127
+
128
+ .battery {
129
+ display: flex;
130
+ align-items: center;
131
+ gap: 0.25rem;
132
+ }
133
+
134
+ .battery-icon {
135
+ width: 22px;
136
+ height: 11px;
137
+ border: 1px solid var(--text-primary);
138
+ border-radius: 3px;
139
+ position: relative;
140
+ display: flex;
141
+ align-items: center;
142
+ padding: 1px;
143
+ }
144
+
145
+ .battery-icon::after {
146
+ content: '';
147
+ position: absolute;
148
+ right: -3px;
149
+ width: 2px;
150
+ height: 5px;
151
+ background: var(--text-primary);
152
+ border-radius: 0 1px 1px 0;
153
+ }
154
+
155
+ .battery-level {
156
+ width: 80%;
157
+ height: 100%;
158
+ background: var(--text-primary);
159
+ border-radius: 1px;
160
+ }
161
+
162
+ /* Main Container */
163
+ .ios-container {
164
+ max-width: 430px;
165
+ margin: 0 auto;
166
+ min-height: calc(100vh - 100px);
167
+ padding: 1.5rem;
168
+ display: flex;
169
+ flex-direction: column;
170
+ gap: 2rem;
171
+ position: relative;
172
+ }
173
+
174
+ /* Glass Widget (Hero) */
175
+ .glass-widget {
176
+ background: var(--glass-bg);
177
+ backdrop-filter: blur(20px);
178
+ -webkit-backdrop-filter: blur(20px);
179
+ border: 1px solid var(--glass-border);
180
+ border-radius: 24px;
181
+ padding: 1.5rem;
182
+ box-shadow: var(--glass-shadow);
183
+ position: relative;
184
+ overflow: hidden;
185
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
186
+ }
187
+
188
+ .glass-widget::before {
189
+ content: '';
190
+ position: absolute;
191
+ top: 0;
192
+ left: 0;
193
+ right: 0;
194
+ height: 1px;
195
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
196
+ }
197
+
198
+ .glass-widget:hover {
199
+ transform: translateY(-2px);
200
+ box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5);
201
+ }
202
+
203
+ .widget-header {
204
+ display: flex;
205
+ align-items: center;
206
+ gap: 0.75rem;
207
+ margin-bottom: 1rem;
208
+ }
209
+
210
+ .widget-icon {
211
+ width: 40px;
212
+ height: 40px;
213
+ background: linear-gradient(135deg, var(--accent-pink), var(--primary-purple));
214
+ border-radius: 12px;
215
+ display: flex;
216
+ align-items: center;
217
+ justify-content: center;
218
+ font-size: 1.25rem;
219
+ box-shadow: 0 4px 15px rgba(233, 69, 132, 0.4);
220
+ }
221
+
222
+ .widget-title {
223
+ font-size: 0.875rem;
224
+ color: var(--text-secondary);
225
+ text-transform: uppercase;
226
+ letter-spacing: 0.5px;
227
+ }
228
+
229
+ .hero-content h1 {
230
+ font-size: 1.75rem;
231
+ font-weight: 700;
232
+ margin-bottom: 0.5rem;
233
+ background: linear-gradient(to right, #fff, rgba(255,255,255,0.8));
234
+ -webkit-background-clip: text;
235
+ -webkit-text-fill-color: transparent;
236
+ }
237
+
238
+ .hero-content p {
239
+ font-size: 1rem;
240
+ color: var(--text-secondary);
241
+ line-height: 1.6;
242
+ }
243
+
244
+ /* App Grid */
245
+ .app-grid {
246
+ display: grid;
247
+ grid-template-columns: repeat(3, 1fr);
248
+ gap: 1.5rem 1rem;
249
+ padding: 0 0.5rem;
250
+ }
251
+
252
+ .app-item {
253
+ display: flex;
254
+ flex-direction: column;
255
+ align-items: center;
256
+ gap: 0.5rem;
257
+ cursor: pointer;
258
+ transition: transform 0.2s ease;
259
+ }
260
+
261
+ .app-item:active {
262
+ transform: scale(0.92);
263
+ filter: brightness(0.8);
264
+ }
265
+
266
+ .app-icon {
267
+ width: 64px;
268
+ height: 64px;
269
+ border-radius: 18px;
270
+ display: flex;
271
+ align-items: center;
272
+ justify-content: center;
273
+ font-size: 1.75rem;
274
+ position: relative;
275
+ box-shadow:
276
+ 0 4px 15px rgba(0,0,0,0.3),
277
+ inset 0 1px 0 rgba(255,255,255,0.2);
278
+ transition: all 0.3s ease;
279
+ }
280
+
281
+ .app-icon::before {
282
+ content: '';
283
+ position: absolute;
284
+ inset: 0;
285
+ border-radius: 18px;
286
+ background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
287
+ pointer-events: none;
288
+ }
289
+
290
+ .app-item:hover .app-icon {
291
+ transform: translateY(-4px);
292
+ box-shadow:
293
+ 0 8px 25px rgba(0,0,0,0.4),
294
+ inset 0 1px 0 rgba(255,255,255,0.3);
295
+ }
296
+
297
+ .icon-register {
298
+ background: linear-gradient(135deg, var(--accent-teal), #2E8B8B);
299
+ }
300
+
301
+ .icon-rooms {
302
+ background: linear-gradient(135deg, var(--primary-purple), #7B2D8E);
303
+ }
304
+
305
+ .icon-chat {
306
+ background: linear-gradient(135deg, var(--accent-pink), #C73E7A);
307
+ }
308
+
309
+ .app-label {
310
+ font-size: 0.75rem;
311
+ color: var(--text-primary);
312
+ font-weight: 500;
313
+ text-align: center;
314
+ text-shadow: 0 1px 2px rgba(0,0,0,0.3);
315
+ }
316
+
317
+ /* Feature Cards (Glass) */
318
+ .features-container {
319
+ display: flex;
320
+ flex-direction: column;
321
+ gap: 1rem;
322
+ }
323
+
324
+ .glass-card {
325
+ background: var(--glass-bg);
326
+ backdrop-filter: blur(20px);
327
+ -webkit-backdrop-filter: blur(20px);
328
+ border: 1px solid var(--glass-border);
329
+ border-radius: 20px;
330
+ padding: 1.25rem;
331
+ display: flex;
332
+ align-items: center;
333
+ gap: 1rem;
334
+ transition: all 0.3s ease;
335
+ cursor: pointer;
336
+ }
337
+
338
+ .glass-card:hover {
339
+ background: rgba(255, 255, 255, 0.15);
340
+ transform: translateX(-4px);
341
+ }
342
+
343
+ .glass-card:active {
344
+ transform: scale(0.98);
345
+ }
346
+
347
+ .card-icon {
348
+ width: 48px;
349
+ height: 48px;
350
+ background: rgba(255, 255, 255, 0.15);
351
+ border-radius: 14px;
352
+ display: flex;
353
+ align-items: center;
354
+ justify-content: center;
355
+ font-size: 1.5rem;
356
+ flex-shrink: 0;
357
+ border: 1px solid rgba(255,255,255,0.1);
358
+ }
359
+
360
+ .card-content h3 {
361
+ font-size: 1rem;
362
+ font-weight: 600;
363
+ margin-bottom: 0.25rem;
364
+ color: var(--text-primary);
365
+ }
366
+
367
+ .card-content p {
368
+ font-size: 0.875rem;
369
+ color: var(--text-secondary);
370
+ }
371
+
372
+ /* Bottom Dock */
373
+ .dock-container {
374
+ position: fixed;
375
+ bottom: 2rem;
376
+ left: 50%;
377
+ transform: translateX(-50%);
378
+ z-index: 50;
379
+ width: calc(100% - 3rem);
380
+ max-width: 400px;
381
+ }
382
+
383
+ .dock {
384
+ background: rgba(255, 255, 255, 0.15);
385
+ backdrop-filter: blur(25px);
386
+ -webkit-backdrop-filter: blur(25px);
387
+ border: 1px solid rgba(255, 255, 255, 0.25);
388
+ border-radius: 32px;
389
+ padding: 1rem 1.5rem;
390
+ display: flex;
391
+ justify-content: space-around;
392
+ align-items: center;
393
+ box-shadow:
394
+ 0 10px 40px rgba(0,0,0,0.4),
395
+ inset 0 1px 0 rgba(255,255,255,0.2);
396
+ }
397
+
398
+ .dock-item {
399
+ display: flex;
400
+ flex-direction: column;
401
+ align-items: center;
402
+ gap: 0.5rem;
403
+ text-decoration: none;
404
+ color: var(--text-primary);
405
+ transition: transform 0.2s ease;
406
+ position: relative;
407
+ }
408
+
409
+ .dock-item:active {
410
+ transform: scale(0.9);
411
+ }
412
+
413
+ .dock-icon {
414
+ width: 56px;
415
+ height: 56px;
416
+ border-radius: 16px;
417
+ display: flex;
418
+ align-items: center;
419
+ justify-content: center;
420
+ font-size: 1.5rem;
421
+ box-shadow:
422
+ 0 4px 15px rgba(0,0,0,0.3),
423
+ inset 0 1px 0 rgba(255,255,255,0.2);
424
+ transition: all 0.3s ease;
425
+ }
426
+
427
+ .dock-item:hover .dock-icon {
428
+ transform: translateY(-8px);
429
+ box-shadow:
430
+ 0 12px 30px rgba(0,0,0,0.4),
431
+ inset 0 1px 0 rgba(255,255,255,0.3);
432
+ }
433
+
434
+ .dock-primary {
435
+ background: linear-gradient(135deg, var(--accent-pink), var(--primary-purple));
436
+ }
437
+
438
+ .dock-secondary {
439
+ background: linear-gradient(135deg, var(--accent-teal), #2E8B8B);
440
+ }
441
+
442
+ .dock-label {
443
+ font-size: 0.75rem;
444
+ font-weight: 500;
445
+ color: var(--text-primary);
446
+ text-shadow: 0 1px 2px rgba(0,0,0,0.3);
447
+ }
448
+
449
+ /* Page Indicators */
450
+ .page-indicators {
451
+ display: flex;
452
+ justify-content: center;
453
+ gap: 0.5rem;
454
+ margin-top: 1rem;
455
+ margin-bottom: 6rem;
456
+ }
457
+
458
+ .dot {
459
+ width: 8px;
460
+ height: 8px;
461
+ border-radius: 50%;
462
+ background: rgba(255,255,255,0.3);
463
+ transition: all 0.3s ease;
464
+ }
465
+
466
+ .dot.active {
467
+ width: 24px;
468
+ border-radius: 4px;
469
+ background: var(--text-primary);
470
+ }
471
+
472
+ /* Home Indicator */
473
+ .home-indicator {
474
+ position: fixed;
475
+ bottom: 0.5rem;
476
+ left: 50%;
477
+ transform: translateX(-50%);
478
+ width: 134px;
479
+ height: 5px;
480
+ background: var(--text-primary);
481
+ border-radius: 3px;
482
+ z-index: 100;
483
+ }
484
+
485
+ /* Built with anycoder */
486
+ .anycoder-badge {
487
+ position: fixed;
488
+ top: 2.5rem;
489
+ left: 1rem;
490
+ z-index: 101;
491
+ background: rgba(255, 255, 255, 0.1);
492
+ backdrop-filter: blur(10px);
493
+ border: 1px solid rgba(255, 255, 255, 0.2);
494
+ padding: 0.5rem 1rem;
495
+ border-radius: 20px;
496
+ font-size: 0.75rem;
497
+ color: var(--text-secondary);
498
+ text-decoration: none;
499
+ transition: all 0.3s ease;
500
+ }
501
+
502
+ .anycoder-badge:hover {
503
+ background: rgba(255, 255, 255, 0.2);
504
+ color: var(--text-primary);
505
+ }
506
+
507
+ /* Animations */
508
+ @keyframes fadeInUp {
509
+ from {
510
+ opacity: 0;
511
+ transform: translateY(20px);
512
+ }
513
+ to {
514
+ opacity: 1;
515
+ transform: translateY(0);
516
+ }
517
+ }
518
+
519
+ .animate-in {
520
+ animation: fadeInUp 0.6s ease forwards;
521
+ }
522
+
523
+ .delay-1 { animation-delay: 0.1s; }
524
+ .delay-2 { animation-delay: 0.2s; }
525
+ .delay-3 { animation-delay: 0.3s; }
526
+
527
+ /* Responsive */
528
+ @media (max-width: 380px) {
529
+ .app-grid {
530
+ grid-template-columns: repeat(3, 1fr);
531
+ gap: 1.25rem 0.75rem;
532
+ }
533
+
534
+ .app-icon {
535
+ width: 58px;
536
+ height: 58px;
537
+ font-size: 1.5rem;
538
+ }
539
+
540
+ .glass-widget {
541
+ padding: 1.25rem;
542
+ }
543
+
544
+ .hero-content h1 {
545
+ font-size: 1.5rem;
546
+ }
547
+ }
548
+
549
+ @media (min-width: 768px) {
550
+ .ios-container {
551
+ max-width: 500px;
552
+ }
553
+
554
+ .app-grid {
555
+ grid-template-columns: repeat(3, 1fr);
556
+ gap: 2rem 1.5rem;
557
+ }
558
+ }
559
+
560
+ /* Scrollbar Styling */
561
+ ::-webkit-scrollbar {
562
+ width: 6px;
563
+ }
564
+
565
+ ::-webkit-scrollbar-track {
566
+ background: transparent;
567
+ }
568
+
569
+ ::-webkit-scrollbar-thumb {
570
+ background: rgba(255,255,255,0.2);
571
+ border-radius: 3px;
572
+ }
573
+
574
+ ::-webkit-scrollbar-thumb:hover {
575
+ background: rgba(255,255,255,0.3);
576
+ }
577
+ </style>
578
+ </head>
579
+ <body>
580
+ <!-- Background Shapes -->
581
+ <div class="bg-shapes">
582
+ <div class="shape shape-1"></div>
583
+ <div class="shape shape-2"></div>
584
+ <div class="shape shape-3"></div>
585
+ </div>
586
+
587
+ <!-- Built with anycoder Badge -->
588
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-badge">
589
+ Built with anycoder
590
+ </a>
591
+
592
+ <!-- iOS Status Bar -->
593
+ <div class="status-bar">
594
+ <div class="status-time" id="clock">۰۹:۴۱</div>
595
+ <div class="status-icons">
596
+ <i class="fas fa-signal"></i>
597
+ <i class="fas fa-wifi"></i>
598
+ <div class="battery">
599
+ <span>۸۰٪</span>
600
+ <div class="battery-icon">
601
+ <div class="battery-level"></div>
602
+ </div>
603
+ </div>
604
+ </div>
605
+ </div>
606
+
607
+ <!-- Main Container -->
608
+ <div class="ios-container">
609
+ <!-- Hero Widget -->
610
+ <div class="glass-widget animate-in">
611
+ <div class="widget-header">
612
+ <div class="widget-icon">
613
+ <i class="fas fa-comments"></i>
614
+ </div>
615
+ <span class="widget-title">چت روم</span>
616
+ </div>
617
+ <div class="hero-content">
618
+ <h1>چت روم ساده</h1>
619
+ <p>محلی برای گفتگو با دوستان و خانواده. با امنیت بالا و سرعت فوق‌العاده.</p>
620
+ </div>
621
+ </div>
622
+
623
+ <!-- App Grid -->
624
+ <div class="app-grid animate-in delay-1">
625
+ <div class="app-item" onclick="window.location.href='register.php'">
626
+ <div class="app-icon icon-register">
627
+ <i class="fas fa-user-plus"></i>
628
+ </div>
629
+ <span class="app-label">ثبت‌نام</span>
630
+ </div>
631
+
632
+ <div class="app-item" onclick="window.location.href='rooms.php'">
633
+ <div class="app-icon icon-rooms">
634
+ <i class="fas fa-door-open"></i>
635
+ </div>
636
+ <span class="app-label">اتاق‌ها</span>
637
+ </div>
638
+
639
+ <div class="app-item" onclick="window.location.href='chat.php'">
640
+ <div class="app-icon icon-chat">
641
+ <i class="fas fa-comment-dots"></i>
642
+ </div>
643
+ <span class="app-label">چت زنده</span>
644
+ </div>
645
+ </div>
646
+
647
+ <!-- Features List -->
648
+ <div class="features-container animate-in delay-2">
649
+ <div class="glass-card" onclick="window.location.href='register.php'">
650
+ <div class="card-icon" style="color: var(--accent-teal);">
651
+ <i class="fas fa-mobile-alt"></i>
652
+ </div>
653
+ <div class="card-content">
654
+ <h3>ثبت‌نام آسان</h3>
655
+ <p>با شماره موبایل در کمتر از یک دقیقه ثبت‌نام کنید</p>
656
+ </div>
657
+ <i class="fas fa-chevron-left" style="color: var(--text-tertiary); margin-right: auto;"></i>
658
+ </div>
659
+
660
+ <div class="glass-card" onclick="window.location.href='rooms.php'">
661
+ <div class="card-icon" style="color: var(--accent-pink);">
662
+ <i class="fas fa-users"></i>
663
+ </div>
664
+ <div class="card-content">
665
+ <h3>ساخت اتاق</h3>
666
+ <p>تا ۳ اتاق مختلف با موضوعات متنوع بسازید</p>
667
+ </div>
668
+ <i class="fas fa-chevron-left" style="color: var(--text-tertiary); margin-right: auto;"></i>
669
+ </div>
670
+
671
+ <div class="glass-card" onclick="window.location.href='chat.php'">
672
+ <div class="card-icon" style="color: var(--primary-purple);">
673
+ <i class="fas fa-bolt"></i>
674
+ </div>
675
+ <div class="card-content">
676
+ <h3>چت زنده</h3>
677
+ <p>گفتگوی آنلاین و سریع بدون تاخیر</p>
678
+ </div>
679
+ <i class="fas fa-chevron-left" style="color: var(--text-tertiary); margin-right: auto;"></i>
680
+ </div>
681
+ </div>
682
+
683
+ <!-- Page Indicators -->
684
+ <div class="page-indicators animate-in delay-3">
685
+ <div class="dot active"></div>
686
+ <div class="dot"></div>
687
+ </div>
688
+ </div>
689
+
690
+ <!-- Bottom Dock -->
691
+ <div class="dock-container animate-in delay-3">
692
+ <div class="dock">
693
+ <a href="register.php" class="dock-item">
694
+ <div class="dock-icon dock-primary">
695
+ <i class="fas fa-user-plus"></i>
696
+ </div>
697
+ <span class="dock-label">شروع کنید</span>
698
+ </a>
699
+
700
+ <a href="login.php" class="dock-item">
701
+ <div class="dock-icon dock-secondary">
702
+ <i class="fas fa-sign-in-alt"></i>
703
+ </div>
704
+ <span class="dock-label">ورود</span>
705
+ </a>
706
+ </div>
707
+ </div>
708
+
709
+ <!-- Home Indicator -->
710
+ <div class="home-indicator"></div>
711
+
712
+ <script>
713
+ // Persian Number Converter
714
+ function toPersianNum(num) {
715
+ const persianDigits = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
716
+ return num.toString().replace(/\d/g, x => persianDigits[x]);
717
+ }
718
+
719
+ // Update Clock
720
+ function updateClock() {
721
+ const now = new Date();
722
+ const hours = String(now.getHours()).padStart(2, '0');
723
+ const minutes = String(now.getMinutes()).padStart(2, '0');
724
+ document.getElementById('clock').textContent = toPersianNum(`${hours}:${minutes}`);
725
+ }
726
+
727
+ updateClock();
728
+ setInterval(updateClock, 1000);
729
+
730
+ // Add touch feedback for mobile
731
+ document.querySelectorAll('.app-item, .glass-card, .dock-item').forEach(item => {
732
+ item.addEventListener('touchstart', function() {
733
+ this.style.transform = 'scale(0.95)';
734
+ });
735
+
736
+ item.addEventListener('touchend', function() {
737
+ this.style.transform = '';
738
+ });
739
+ });
740
+
741
+ // Parallax effect for background shapes on mouse move (desktop only)
742
+ document.addEventListener('mousemove', (e) => {
743
+ if (window.innerWidth > 768) {
744
+ const shapes = document.querySelectorAll('.shape');
745
+ const x = e.clientX / window.innerWidth;
746
+ const y = e.clientY / window.innerHeight;
747
+
748
+ shapes.forEach((shape, index) => {
749
+ const speed = (index + 1) * 20;
750
+ const xOffset = (0.5 - x) * speed;
751
+ const yOffset = (0.5 - y) * speed;
752
+ shape.style.transform = `translate(${xOffset}px, ${yOffset}px)`;
753
+ });
754
+ }
755
+ });
756
+
757
+ // Page indicator interaction
758
+ const dots = document.querySelectorAll('.dot');
759
+ dots.forEach((dot, index) => {
760
+ dot.addEventListener('click', () => {
761
+ dots.forEach(d => d.classList.remove('active'));
762
+ dot.classList.add('active');
763
+ });
764
+ });
765
+ </script>
766
+ </body>
767
+ </html>