Hugging Face's logo

Spaces:
samirerty
/
anycoder-b70f1136
Running

App Files Community
samirerty commited on
Commit
7a3ab15
·
verified ·
1 Parent(s): db4292f

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1099 -19
index.html CHANGED
@@ -1,19 +1,1099 @@
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>iOS Glassmorphism Interface</title>
7
+
8
+ <!-- Vazirmatn Font -->
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
12
+
13
+ <!-- Font Awesome 6 -->
14
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
15
+
16
+ <style>
17
+ :root {
18
+ --primary-dark: #0f3460;
19
+ --primary-purple: #533483;
20
+ --primary-black: #1a1a2e;
21
+ --accent-pink: #E94584;
22
+ --accent-cyan: #4FD3C4;
23
+ --glass-bg: rgba(255, 255, 255, 0.08);
24
+ --glass-border: rgba(255, 255, 255, 0.18);
25
+ --glass-highlight: rgba(255, 255, 255, 0.25);
26
+ --text-primary: rgba(255, 255, 255, 0.95);
27
+ --text-secondary: rgba(255, 255, 255, 0.7);
28
+ --text-tertiary: rgba(255, 255, 255, 0.5);
29
+ --shadow-glow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
30
+ --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.2);
31
+ }
32
+
33
+ * {
34
+ margin: 0;
35
+ padding: 0;
36
+ box-sizing: border-box;
37
+ -webkit-tap-highlight-color: transparent;
38
+ }
39
+
40
+ body {
41
+ font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
42
+ background: linear-gradient(135deg, var(--primary-black) 0%, var(--primary-dark) 50%, var(--primary-purple) 100%);
43
+ background-attachment: fixed;
44
+ min-height: 100vh;
45
+ overflow-x: hidden;
46
+ color: var(--text-primary);
47
+ position: relative;
48
+ }
49
+
50
+ /* Animated Background Particles */
51
+ .bg-particles {
52
+ position: fixed;
53
+ top: 0;
54
+ left: 0;
55
+ width: 100%;
56
+ height: 100%;
57
+ overflow: hidden;
58
+ z-index: -1;
59
+ pointer-events: none;
60
+ }
61
+
62
+ .particle {
63
+ position: absolute;
64
+ border-radius: 50%;
65
+ background: radial-gradient(circle, var(--accent-pink) 0%, transparent 70%);
66
+ opacity: 0.3;
67
+ animation: float 20s infinite ease-in-out;
68
+ }
69
+
70
+ @keyframes float {
71
+ 0%, 100% { transform: translate(0, 0) scale(1); }
72
+ 33% { transform: translate(30px, -50px) scale(1.1); }
73
+ 66% { transform: translate(-20px, 20px) scale(0.9); }
74
+ }
75
+
76
+ /* Container */
77
+ .iphone-container {
78
+ max-width: 430px;
79
+ margin: 0 auto;
80
+ min-height: 100vh;
81
+ position: relative;
82
+ padding-bottom: 40px;
83
+ background: rgba(0, 0, 0, 0.1);
84
+ backdrop-filter: blur(10px);
85
+ box-shadow: var(--shadow-glow);
86
+ }
87
+
88
+ /* Status Bar */
89
+ .status-bar {
90
+ display: flex;
91
+ justify-content: space-between;
92
+ align-items: center;
93
+ padding: 12px 24px;
94
+ font-size: 14px;
95
+ font-weight: 600;
96
+ position: sticky;
97
+ top: 0;
98
+ z-index: 1000;
99
+ background: rgba(26, 26, 46, 0.6);
100
+ backdrop-filter: blur(20px);
101
+ border-bottom: 1px solid var(--glass-border);
102
+ }
103
+
104
+ .status-time {
105
+ letter-spacing: 0.5px;
106
+ }
107
+
108
+ .status-icons {
109
+ display: flex;
110
+ gap: 6px;
111
+ align-items: center;
112
+ }
113
+
114
+ .signal-bars {
115
+ display: flex;
116
+ gap: 2px;
117
+ align-items: flex-end;
118
+ height: 12px;
119
+ }
120
+
121
+ .signal-bar {
122
+ width: 3px;
123
+ background: var(--text-primary);
124
+ border-radius: 1px;
125
+ }
126
+
127
+ .signal-bar:nth-child(1) { height: 4px; }
128
+ .signal-bar:nth-child(2) { height: 6px; }
129
+ .signal-bar:nth-child(3) { height: 8px; }
130
+ .signal-bar:nth-child(4) { height: 10px; }
131
+
132
+ .wifi-icon {
133
+ font-size: 14px;
134
+ }
135
+
136
+ .battery {
137
+ display: flex;
138
+ align-items: center;
139
+ gap: 4px;
140
+ }
141
+
142
+ .battery-icon {
143
+ width: 22px;
144
+ height: 11px;
145
+ border: 1.5px solid var(--text-primary);
146
+ border-radius: 3px;
147
+ position: relative;
148
+ display: flex;
149
+ align-items: center;
150
+ padding: 1px;
151
+ }
152
+
153
+ .battery-icon::after {
154
+ content: '';
155
+ position: absolute;
156
+ right: -3px;
157
+ width: 2px;
158
+ height: 5px;
159
+ background: var(--text-primary);
160
+ border-radius: 0 1px 1px 0;
161
+ }
162
+
163
+ .battery-level {
164
+ width: 80%;
165
+ height: 100%;
166
+ background: var(--accent-cyan);
167
+ border-radius: 1px;
168
+ box-shadow: 0 0 5px var(--accent-cyan);
169
+ }
170
+
171
+ /* Header / AnyCoder Link */
172
+ .header-link {
173
+ text-align: center;
174
+ padding: 8px;
175
+ font-size: 11px;
176
+ color: var(--text-tertiary);
177
+ background: rgba(255, 255, 255, 0.03);
178
+ }
179
+
180
+ .header-link a {
181
+ color: var(--accent-cyan);
182
+ text-decoration: none;
183
+ font-weight: 500;
184
+ transition: all 0.3s ease;
185
+ }
186
+
187
+ .header-link a:hover {
188
+ color: var(--accent-pink);
189
+ text-shadow: 0 0 10px var(--accent-pink);
190
+ }
191
+
192
+ /* Main Content */
193
+ .main-content {
194
+ padding: 20px;
195
+ display: flex;
196
+ flex-direction: column;
197
+ gap: 20px;
198
+ }
199
+
200
+ /* Glass Card Base */
201
+ .glass-card {
202
+ background: var(--glass-bg);
203
+ backdrop-filter: blur(20px);
204
+ -webkit-backdrop-filter: blur(20px);
205
+ border: 1px solid var(--glass-border);
206
+ border-radius: 24px;
207
+ box-shadow: var(--shadow-glow), inset 0 1px 0 var(--glass-highlight);
208
+ overflow: hidden;
209
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
210
+ }
211
+
212
+ .glass-card:hover {
213
+ transform: translateY(-2px) scale(1.01);
214
+ box-shadow: 0 12px 40px rgba(31, 38, 135, 0.5), inset 0 1px 0 var(--glass-highlight);
215
+ border-color: rgba(255, 255, 255, 0.3);
216
+ }
217
+
218
+ /* Widgets Section */
219
+ .widgets-grid {
220
+ display: grid;
221
+ grid-template-columns: 1fr 1fr;
222
+ gap: 15px;
223
+ margin-bottom: 10px;
224
+ }
225
+
226
+ .widget-large {
227
+ grid-column: span 2;
228
+ padding: 20px;
229
+ min-height: 140px;
230
+ display: flex;
231
+ flex-direction: column;
232
+ justify-content: space-between;
233
+ position: relative;
234
+ overflow: hidden;
235
+ }
236
+
237
+ .widget-large::before {
238
+ content: '';
239
+ position: absolute;
240
+ top: -50%;
241
+ right: -50%;
242
+ width: 200%;
243
+ height: 200%;
244
+ background: radial-gradient(circle, rgba(79, 211, 196, 0.15) 0%, transparent 70%);
245
+ animation: pulse 4s ease-in-out infinite;
246
+ }
247
+
248
+ @keyframes pulse {
249
+ 0%, 100% { transform: scale(1); opacity: 0.5; }
250
+ 50% { transform: scale(1.1); opacity: 0.8; }
251
+ }
252
+
253
+ .weather-widget {
254
+ background: linear-gradient(135deg, rgba(15, 52, 96, 0.6) 0%, rgba(83, 52, 131, 0.4) 100%);
255
+ }
256
+
257
+ .weather-header {
258
+ display: flex;
259
+ justify-content: space-between;
260
+ align-items: flex-start;
261
+ z-index: 1;
262
+ }
263
+
264
+ .weather-location {
265
+ font-size: 18px;
266
+ font-weight: 700;
267
+ }
268
+
269
+ .weather-condition {
270
+ font-size: 14px;
271
+ color: var(--text-secondary);
272
+ margin-top: 4px;
273
+ }
274
+
275
+ .weather-icon {
276
+ font-size: 48px;
277
+ color: #FFD700;
278
+ filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
279
+ animation: float 3s ease-in-out infinite;
280
+ }
281
+
282
+ .weather-temp {
283
+ font-size: 48px;
284
+ font-weight: 200;
285
+ z-index: 1;
286
+ line-height: 1;
287
+ }
288
+
289
+ .weather-temp span {
290
+ font-size: 24px;
291
+ vertical-align: top;
292
+ }
293
+
294
+ /* Activity Widget */
295
+ .activity-widget {
296
+ padding: 15px;
297
+ display: flex;
298
+ flex-direction: column;
299
+ gap: 12px;
300
+ }
301
+
302
+ .widget-title {
303
+ font-size: 14px;
304
+ font-weight: 700;
305
+ color: var(--text-secondary);
306
+ display: flex;
307
+ align-items: center;
308
+ gap: 8px;
309
+ }
310
+
311
+ .activity-rings {
312
+ display: flex;
313
+ justify-content: center;
314
+ align-items: center;
315
+ height: 80px;
316
+ position: relative;
317
+ }
318
+
319
+ .ring-container {
320
+ position: relative;
321
+ width: 70px;
322
+ height: 70px;
323
+ }
324
+
325
+ .ring-svg {
326
+ transform: rotate(-90deg);
327
+ width: 100%;
328
+ height: 100%;
329
+ }
330
+
331
+ .ring-bg {
332
+ fill: none;
333
+ stroke: rgba(255, 255, 255, 0.1);
334
+ stroke-width: 8;
335
+ }
336
+
337
+ .ring-progress {
338
+ fill: none;
339
+ stroke-width: 8;
340
+ stroke-linecap: round;
341
+ transition: stroke-dashoffset 1s ease;
342
+ }
343
+
344
+ .ring-red { stroke: var(--accent-pink); }
345
+ .ring-green { stroke: var(--accent-cyan); }
346
+ .ring-blue { stroke: #5B8DEF; }
347
+
348
+ .activity-stats {
349
+ display: flex;
350
+ justify-content: space-around;
351
+ text-align: center;
352
+ }
353
+
354
+ .stat-value {
355
+ font-size: 16px;
356
+ font-weight: 700;
357
+ }
358
+
359
+ .stat-label {
360
+ font-size: 11px;
361
+ color: var(--text-tertiary);
362
+ }
363
+
364
+ /* Music Widget */
365
+ .music-widget {
366
+ padding: 15px;
367
+ display: flex;
368
+ flex-direction: column;
369
+ gap: 12px;
370
+ }
371
+
372
+ .music-content {
373
+ display: flex;
374
+ gap: 12px;
375
+ align-items: center;
376
+ }
377
+
378
+ .album-art {
379
+ width: 60px;
380
+ height: 60px;
381
+ border-radius: 12px;
382
+ background: linear-gradient(135deg, var(--accent-pink) 0%, var(--primary-purple) 100%);
383
+ display: flex;
384
+ align-items: center;
385
+ justify-content: center;
386
+ font-size: 24px;
387
+ box-shadow: 0 4px 15px rgba(233, 69, 132, 0.4);
388
+ position: relative;
389
+ overflow: hidden;
390
+ }
391
+
392
+ .album-art::after {
393
+ content: '';
394
+ position: absolute;
395
+ top: -50%;
396
+ left: -50%;
397
+ width: 200%;
398
+ height: 200%;
399
+ background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
400
+ animation: shimmer 3s infinite;
401
+ }
402
+
403
+ @keyframes shimmer {
404
+ 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
405
+ 100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
406
+ }
407
+
408
+ .music-info {
409
+ flex: 1;
410
+ }
411
+
412
+ .music-title {
413
+ font-size: 14px;
414
+ font-weight: 700;
415
+ margin-bottom: 4px;
416
+ white-space: nowrap;
417
+ overflow: hidden;
418
+ text-overflow: ellipsis;
419
+ }
420
+
421
+ .music-artist {
422
+ font-size: 12px;
423
+ color: var(--text-secondary);
424
+ }
425
+
426
+ .music-controls {
427
+ display: flex;
428
+ gap: 20px;
429
+ justify-content: center;
430
+ align-items: center;
431
+ margin-top: 8px;
432
+ }
433
+
434
+ .control-btn {
435
+ background: none;
436
+ border: none;
437
+ color: var(--text-primary);
438
+ font-size: 20px;
439
+ cursor: pointer;
440
+ transition: all 0.2s;
441
+ padding: 8px;
442
+ }
443
+
444
+ .control-btn:hover {
445
+ color: var(--accent-cyan);
446
+ transform: scale(1.1);
447
+ }
448
+
449
+ .control-btn.play {
450
+ width: 36px;
451
+ height: 36px;
452
+ background: rgba(255, 255, 255, 0.2);
453
+ border-radius: 50%;
454
+ display: flex;
455
+ align-items: center;
456
+ justify-content: center;
457
+ font-size: 14px;
458
+ }
459
+
460
+ /* App Grid */
461
+ .apps-section {
462
+ margin-top: 10px;
463
+ }
464
+
465
+ .apps-grid {
466
+ display: grid;
467
+ grid-template-columns: repeat(4, 1fr);
468
+ gap: 20px 15px;
469
+ padding: 10px 0;
470
+ }
471
+
472
+ .app-item {
473
+ display: flex;
474
+ flex-direction: column;
475
+ align-items: center;
476
+ gap: 8px;
477
+ cursor: pointer;
478
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
479
+ }
480
+
481
+ .app-item:hover {
482
+ transform: scale(1.1) translateY(-5px);
483
+ }
484
+
485
+ .app-item:active {
486
+ transform: scale(0.95);
487
+ }
488
+
489
+ .app-icon {
490
+ width: 60px;
491
+ height: 60px;
492
+ border-radius: 16px;
493
+ display: flex;
494
+ align-items: center;
495
+ justify-content: center;
496
+ font-size: 28px;
497
+ position: relative;
498
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
499
+ transition: all 0.3s;
500
+ }
501
+
502
+ .app-icon::after {
503
+ content: '';
504
+ position: absolute;
505
+ bottom: 0;
506
+ left: 0;
507
+ right: 0;
508
+ height: 50%;
509
+ background: linear-gradient(to top, rgba(0,0,0,0.2), transparent);
510
+ border-radius: 0 0 16px 16px;
511
+ pointer-events: none;
512
+ }
513
+
514
+ /* App Icon Gradients */
515
+ .app-messenger { background: linear-gradient(135deg, #00B2FF 0%, #0066FF 100%); }
516
+ .app-camera { background: linear-gradient(135deg, #8E8E93 0%, #636366 100%); }
517
+ .app-calendar { background: linear-gradient(135deg, #FF3B30 0%, #FF6B6B 100%); color: white; font-size: 24px; font-weight: 700; }
518
+ .app-music { background: linear-gradient(135deg, #FF2D55 0%, #FF375F 100%); }
519
+ .app-maps { background: linear-gradient(135deg, #34C759 0%, #30D158 100%); }
520
+ .app-photos { background: linear-gradient(135deg, #5856D6 0%, #AF52DE 100%); }
521
+ .app-browser { background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%); }
522
+ .app-email { background: linear-gradient(135deg, #FF9500 0%, #FFCC00 100%); }
523
+ .app-store { background: linear-gradient(135deg, #1C1C1E 0%, #2C2C2E 100%); border: 1px solid rgba(255,255,255,0.1); }
524
+ .app-health { background: linear-gradient(135deg, #FF3B30 0%, #FF6B6B 100%); }
525
+ .app-weather { background: linear-gradient(135deg, #64D2FF 0%, #5AC8FA 100%); }
526
+ .app-notes { background: linear-gradient(135deg, #FFCC00 0%, #FF9500 100%); }
527
+
528
+ .app-label {
529
+ font-size: 11px;
530
+ font-weight: 500;
531
+ color: var(--text-primary);
532
+ text-shadow: 0 1px 2px rgba(0,0,0,0.5);
533
+ }
534
+
535
+ /* Dock */
536
+ .dock-container {
537
+ position: fixed;
538
+ bottom: 30px;
539
+ left: 50%;
540
+ transform: translateX(-50%);
541
+ width: 90%;
542
+ max-width: 380px;
543
+ z-index: 100;
544
+ }
545
+
546
+ .dock {
547
+ background: rgba(255, 255, 255, 0.1);
548
+ backdrop-filter: blur(25px);
549
+ -webkit-backdrop-filter: blur(25px);
550
+ border: 1px solid rgba(255, 255, 255, 0.2);
551
+ border-radius: 32px;
552
+ padding: 15px 20px;
553
+ display: flex;
554
+ justify-content: space-around;
555
+ align-items: center;
556
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
557
+ }
558
+
559
+ .dock-item {
560
+ width: 55px;
561
+ height: 55px;
562
+ border-radius: 14px;
563
+ display: flex;
564
+ align-items: center;
565
+ justify-content: center;
566
+ font-size: 26px;
567
+ cursor: pointer;
568
+ transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
569
+ position: relative;
570
+ }
571
+
572
+ .dock-item:hover {
573
+ transform: translateY(-10px) scale(1.1);
574
+ filter: brightness(1.2);
575
+ }
576
+
577
+ .dock-item::before {
578
+ content: '';
579
+ position: absolute;
580
+ bottom: -20px;
581
+ width: 20px;
582
+ height: 4px;
583
+ background: rgba(255, 255, 255, 0.3);
584
+ border-radius: 2px;
585
+ opacity: 0;
586
+ transition: all 0.3s;
587
+ filter: blur(2px);
588
+ }
589
+
590
+ .dock-item:hover::before {
591
+ opacity: 1;
592
+ bottom: -15px;
593
+ width: 30px;
594
+ }
595
+
596
+ .dock-phone { background: linear-gradient(135deg, #34C759 0%, #30D158 100%); }
597
+ .dock-safari { background: linear-gradient(135deg, #007AFF 0%, #00C7FF 100%); }
598
+ .dock-messages { background: linear-gradient(135deg, #34C759 0%, #30D158 100%); }
599
+ .dock-settings { background: linear-gradient(135deg, #8E8E93 0%, #636366 100%); }
600
+
601
+ /* Page Indicators */
602
+ .page-indicators {
603
+ display: flex;
604
+ justify-content: center;
605
+ gap: 8px;
606
+ margin-top: 20px;
607
+ margin-bottom: 100px;
608
+ }
609
+
610
+ .dot {
611
+ width: 8px;
612
+ height: 8px;
613
+ border-radius: 50%;
614
+ background: rgba(255, 255, 255, 0.3);
615
+ transition: all 0.3s;
616
+ }
617
+
618
+ .dot.active {
619
+ width: 24px;
620
+ border-radius: 4px;
621
+ background: var(--text-primary);
622
+ }
623
+
624
+ /* Reflection Effect */
625
+ .reflection {
626
+ position: fixed;
627
+ bottom: 0;
628
+ left: 0;
629
+ right: 0;
630
+ height: 200px;
631
+ background: linear-gradient(to top, rgba(255,255,255,0.03), transparent);
632
+ pointer-events: none;
633
+ z-index: 50;
634
+ }
635
+
636
+ /* Responsive */
637
+ @media (max-width: 380px) {
638
+ .app-icon {
639
+ width: 55px;
640
+ height: 55px;
641
+ font-size: 24px;
642
+ }
643
+ .apps-grid {
644
+ gap: 15px 10px;
645
+ }
646
+ .widget-large {
647
+ min-height: 120px;
648
+ }
649
+ }
650
+
651
+ @media (min-width: 768px) {
652
+ .iphone-container {
653
+ margin: 20px auto;
654
+ min-height: calc(100vh - 40px);
655
+ border-radius: 50px;
656
+ overflow: hidden;
657
+ border: 8px solid rgba(255, 255, 255, 0.1);
658
+ }
659
+ }
660
+
661
+ /* Parallax Scroll Effect */
662
+ .parallax-layer {
663
+ will-change: transform;
664
+ transition: transform 0.1s linear;
665
+ }
666
+
667
+ /* Notification Badge */
668
+ .badge {
669
+ position: absolute;
670
+ top: -5px;
671
+ right: -5px;
672
+ background: var(--accent-pink);
673
+ color: white;
674
+ font-size: 11px;
675
+ font-weight: 700;
676
+ width: 22px;
677
+ height: 22px;
678
+ border-radius: 50%;
679
+ display: flex;
680
+ align-items: center;
681
+ justify-content: center;
682
+ border: 2px solid rgba(0,0,0,0.3);
683
+ box-shadow: 0 2px 8px rgba(233, 69, 132, 0.5);
684
+ }
685
+
686
+ /* Loading Animation */
687
+ @keyframes appLaunch {
688
+ 0% { transform: scale(1); }
689
+ 50% { transform: scale(0.9); }
690
+ 100% { transform: scale(20); opacity: 0; }
691
+ }
692
+
693
+ .launching {
694
+ animation: appLaunch 0.5s ease forwards;
695
+ z-index: 9999;
696
+ }
697
+ </style>
698
+ </head>
699
+ <body>
700
+
701
+ <!-- Background Particles -->
702
+ <div class="bg-particles" id="particles"></div>
703
+
704
+ <div class="iphone-container">
705
+ <!-- Header Link -->
706
+ <div class="header-link">
707
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
708
+ </div>
709
+
710
+ <!-- Status Bar -->
711
+ <div class="status-bar">
712
+ <div class="status-time" id="clock">۰۹:۴۱</div>
713
+ <div class="status-icons">
714
+ <div class="signal-bars">
715
+ <div class="signal-bar"></div>
716
+ <div class="signal-bar"></div>
717
+ <div class="signal-bar"></div>
718
+ <div class="signal-bar"></div>
719
+ </div>
720
+ <div class="wifi-icon">
721
+ <i class="fas fa-wifi"></i>
722
+ </div>
723
+ <div class="battery">
724
+ <span style="font-size: 12px;">۸۵٪</span>
725
+ <div class="battery-icon">
726
+ <div class="battery-level"></div>
727
+ </div>
728
+ </div>
729
+ </div>
730
+ </div>
731
+
732
+ <!-- Main Content -->
733
+ <div class="main-content">
734
+
735
+ <!-- Widgets Section -->
736
+ <div class="widgets-grid parallax-layer" data-speed="0.5">
737
+ <!-- Weather Widget -->
738
+ <div class="glass-card widget-large weather-widget">
739
+ <div class="weather-header">
740
+ <div>
741
+ <div class="weather-location">تهران</div>
742
+ <div class="weather-condition">آفتابی</div>
743
+ </div>
744
+ <div class="weather-icon">
745
+ <i class="fas fa-sun"></i>
746
+ </div>
747
+ </div>
748
+ <div class="weather-temp">
749
+ ۲۶<span>°</span>
750
+ </div>
751
+ </div>
752
+
753
+ <!-- Activity Widget -->
754
+ <div class="glass-card activity-widget">
755
+ <div class="widget-title">
756
+ <i class="fas fa-fire" style="color: var(--accent-pink);"></i>
757
+ فعالیت روزانه
758
+ </div>
759
+ <div class="activity-rings">
760
+ <div class="ring-container">
761
+ <svg class="ring-svg" viewBox="0 0 100 100">
762
+ <circle class="ring-bg" cx="50" cy="50" r="40"></circle>
763
+ <circle class="ring-progress ring-red" cx="50" cy="50" r="40"
764
+ stroke-dasharray="251.2" stroke-dashoffset="60"></circle>
765
+ </svg>
766
+ </div>
767
+ <div class="ring-container" style="position: absolute; transform: scale(0.75);">
768
+ <svg class="ring-svg" viewBox="0 0 100 100">
769
+ <circle class="ring-bg" cx="50" cy="50" r="40"></circle>
770
+ <circle class="ring-progress ring-green" cx="50" cy="50" r="40"
771
+ stroke-dasharray="251.2" stroke-dashoffset="100"></circle>
772
+ </svg>
773
+ </div>
774
+ <div class="ring-container" style="position: absolute; transform: scale(0.5);">
775
+ <svg class="ring-svg" viewBox="0 0 100 100">
776
+ <circle class="ring-bg" cx="50" cy="50" r="40"></circle>
777
+ <circle class="ring-progress ring-blue" cx="50" cy="50" r="40"
778
+ stroke-dasharray="251.2" stroke-dashoffset="140"></circle>
779
+ </svg>
780
+ </div>
781
+ </div>
782
+ <div class="activity-stats">
783
+ <div>
784
+ <div class="stat-value" style="color: var(--accent-pink);">۴۵۰</div>
785
+ <div class="stat-label">کالری</div>
786
+ </div>
787
+ <div>
788
+ <div class="stat-value" style="color: var(--accent-cyan);">۳۰</div>
789
+ <div class="stat-label">دقیقه</div>
790
+ </div>
791
+ <div>
792
+ <div class="stat-value" style="color: #5B8DEF;">۸</div>
793
+ <div class="stat-label">ساعت</div>
794
+ </div>
795
+ </div>
796
+ </div>
797
+
798
+ <!-- Music Widget -->
799
+ <div class="glass-card music-widget">
800
+ <div class="widget-title">
801
+ <i class="fas fa-music" style="color: var(--accent-pink);"></i>
802
+ در حال پخش
803
+ </div>
804
+ <div class="music-content">
805
+ <div class="album-art">
806
+ <i class="fas fa-music"></i>
807
+ </div>
808
+ <div class="music-info">
809
+ <div class="music-title">شبای تهران</div>
810
+ <div class="music-artist">سینا سرلک</div>
811
+ </div>
812
+ </div>
813
+ <div class="music-controls">
814
+ <button class="control-btn"><i class="fas fa-backward"></i></button>
815
+ <button class="control-btn play" id="playBtn"><i class="fas fa-play"></i></button>
816
+ <button class="control-btn"><i class="fas fa-forward"></i></button>
817
+ </div>
818
+ </div>
819
+ </div>
820
+
821
+ <!-- Apps Grid -->
822
+ <div class="apps-section parallax-layer" data-speed="0.3">
823
+ <div class="apps-grid">
824
+ <div class="app-item" onclick="launchApp(this)">
825
+ <div class="app-icon app-messenger">
826
+ <i class="fab fa-facebook-messenger"></i>
827
+ <span class="badge">۳</span>
828
+ </div>
829
+ <span class="app-label">پیامرسان</span>
830
+ </div>
831
+
832
+ <div class="app-item" onclick="launchApp(this)">
833
+ <div class="app-icon app-camera">
834
+ <i class="fas fa-camera"></i>
835
+ </div>
836
+ <span class="app-label">دوربین</span>
837
+ </div>
838
+
839
+ <div class="app-item" onclick="launchApp(this)">
840
+ <div class="app-icon app-calendar">
841
+ <span id="currentDay">۱۲</span>
842
+ </div>
843
+ <span class="app-label">تقویم</span>
844
+ </div>
845
+
846
+ <div class="app-item" onclick="launchApp(this)">
847
+ <div class="app-icon app-music">
848
+ <i class="fas fa-music"></i>
849
+ </div>
850
+ <span class="app-label">موزیک</span>
851
+ </div>
852
+
853
+ <div class="app-item" onclick="launchApp(this)">
854
+ <div class="app-icon app-maps">
855
+ <i class="fas fa-map-marked-alt"></i>
856
+ </div>
857
+ <span class="app-label">نقشه</span>
858
+ </div>
859
+
860
+ <div class="app-item" onclick="launchApp(this)">
861
+ <div class="app-icon app-photos">
862
+ <i class="fas fa-images"></i>
863
+ </div>
864
+ <span class="app-label">عکس‌ها</span>
865
+ </div>
866
+
867
+ <div class="app-item" onclick="launchApp(this)">
868
+ <div class="app-icon app-browser">
869
+ <i class="fab fa-safari"></i>
870
+ </div>
871
+ <span class="app-label">اینترنت</span>
872
+ </div>
873
+
874
+ <div class="app-item" onclick="launchApp(this)">
875
+ <div class="app-icon app-email">
876
+ <i class="fas fa-envelope"></i>
877
+ <span class="badge">۱۲</span>
878
+ </div>
879
+ <span class="app-label">ایمیل</span>
880
+ </div>
881
+
882
+ <div class="app-item" onclick="launchApp(this)">
883
+ <div class="app-icon app-store">
884
+ <i class="fab fa-app-store-ios"></i>
885
+ </div>
886
+ <span class="app-label">اپ استور</span>
887
+ </div>
888
+
889
+ <div class="app-item" onclick="launchApp(this)">
890
+ <div class="app-icon app-health">
891
+ <i class="fas fa-heart-pulse"></i>
892
+ </div>
893
+ <span class="app-label">سلامتی</span>
894
+ </div>
895
+
896
+ <div class="app-item" onclick="launchApp(this)">
897
+ <div class="app-icon app-weather">
898
+ <i class="fas fa-cloud-sun"></i>
899
+ </div>
900
+ <span class="app-label">آب و هوا</span>
901
+ </div>
902
+
903
+ <div class="app-item" onclick="launchApp(this)">
904
+ <div class="app-icon app-notes">
905
+ <i class="fas fa-sticky-note"></i>
906
+ </div>
907
+ <span class="app-label">یادداشت</span>
908
+ </div>
909
+ </div>
910
+ </div>
911
+
912
+ <!-- Page Indicators -->
913
+ <div class="page-indicators">
914
+ <div class="dot active"></div>
915
+ <div class="dot"></div>
916
+ <div class="dot"></div>
917
+ </div>
918
+ </div>
919
+
920
+ <!-- Dock -->
921
+ <div class="dock-container">
922
+ <div class="dock">
923
+ <div class="dock-item dock-phone" onclick="launchApp(this)">
924
+ <i class="fas fa-phone"></i>
925
+ </div>
926
+ <div class="dock-item dock-safari" onclick="launchApp(this)">
927
+ <i class="fab fa-safari"></i>
928
+ </div>
929
+ <div class="dock-item dock-messages" onclick="launchApp(this)">
930
+ <i class="fas fa-comment"></i>
931
+ <span class="badge">۵</span>
932
+ </div>
933
+ <div class="dock-item dock-settings" onclick="launchApp(this)">
934
+ <i class="fas fa-cog"></i>
935
+ </div>
936
+ </div>
937
+ </div>
938
+
939
+ <div class="reflection"></div>
940
+ </div>
941
+
942
+ <script>
943
+ // Persian Numbers Converter
944
+ function toPersianNum(num) {
945
+ const persianDigits = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
946
+ return num.toString().replace(/\d/g, x => persianDigits[x]);
947
+ }
948
+
949
+ // Clock Functionality
950
+ function updateClock() {
951
+ const now = new Date();
952
+ const hours = String(now.getHours()).padStart(2, '0');
953
+ const minutes = String(now.getMinutes()).padStart(2, '0');
954
+ document.getElementById('clock').textContent = toPersianNum(`${hours}:${minutes}`);
955
+
956
+ // Update calendar day
957
+ const day = now.getDate();
958
+ document.getElementById('currentDay').textContent = toPersianNum(day);
959
+ }
960
+
961
+ setInterval(updateClock, 1000);
962
+ updateClock();
963
+
964
+ // Music Player Toggle
965
+ let isPlaying = false;
966
+ const playBtn = document.getElementById('playBtn');
967
+ playBtn.addEventListener('click', (e) => {
968
+ e.stopPropagation();
969
+ isPlaying = !isPlaying;
970
+ playBtn.innerHTML = isPlaying ? '<i class="fas fa-pause"></i>' : '<i class="fas fa-play"></i>';
971
+
972
+ // Add visual feedback
973
+ playBtn.style.transform = 'scale(0.9)';
974
+ setTimeout(() => playBtn.style.transform = 'scale(1)', 150);
975
+ });
976
+
977
+ // App Launch Animation
978
+ function launchApp(element) {
979
+ element.style.transform = 'scale(0.9)';
980
+ setTimeout(() => {
981
+ element.style.transform = 'scale(1)';
982
+ // Create ripple effect
983
+ const ripple = document.createElement('div');
984
+ ripple.style.cssText = `
985
+ position: absolute;
986
+ border-radius: 50%;
987
+ background: rgba(255,255,255,0.5);
988
+ transform: scale(0);
989
+ animation: ripple 0.6s linear;
990
+ pointer-events: none;
991
+ `;
992
+ element.style.position = 'relative';
993
+ element.style.overflow = 'hidden';
994
+ element.appendChild(ripple);
995
+
996
+ const rect = element.getBoundingClientRect();
997
+ const size = Math.max(rect.width, rect.height);
998
+ ripple.style.width = ripple.style.height = size + 'px';
999
+ ripple.style.left = '50%';
1000
+ ripple.style.top = '50%';
1001
+ ripple.style.marginLeft = -size/2 + 'px';
1002
+ ripple.style.marginTop = -size/2 + 'px';
1003
+
1004
+ setTimeout(() => ripple.remove(), 600);
1005
+ }, 150);
1006
+ }
1007
+
1008
+ // Add ripple animation to styles dynamically
1009
+ const style = document.createElement('style');
1010
+ style.textContent = `
1011
+ @keyframes ripple {
1012
+ to {
1013
+ transform: scale(4);
1014
+ opacity: 0;
1015
+ }
1016
+ }
1017
+ `;
1018
+ document.head.appendChild(style);
1019
+
1020
+ // Parallax Effect on Scroll
1021
+ let ticking = false;
1022
+ function updateParallax() {
1023
+ const scrolled = window.pageYOffset;
1024
+ const parallaxElements = document.querySelectorAll('.parallax-layer');
1025
+
1026
+ parallaxElements.forEach(el => {
1027
+ const speed = el.getAttribute('data-speed') || 0.5;
1028
+ const yPos = -(scrolled * speed);
1029
+ el.style.transform = `translateY(${yPos}px)`;
1030
+ });
1031
+
1032
+ ticking = false;
1033
+ }
1034
+
1035
+ window.addEventListener('scroll', () => {
1036
+ if (!ticking) {
1037
+ window.requestAnimationFrame(updateParallax);
1038
+ ticking = true;
1039
+ }
1040
+ });
1041
+
1042
+ // Page Indicators Interaction
1043
+ const dots = document.querySelectorAll('.dot');
1044
+ dots.forEach((dot, index) => {
1045
+ dot.addEventListener('click', () => {
1046
+ dots.forEach(d => d.classList.remove('active'));
1047
+ dot.classList.add('active');
1048
+ });
1049
+ });
1050
+
1051
+ // Battery Level Animation
1052
+ setTimeout(() => {
1053
+ document.querySelector('.battery-level').style.width = '85%';
1054
+ }, 1000);
1055
+
1056
+ // Create Background Particles
1057
+ function createParticles() {
1058
+ const container = document.getElementById('particles');
1059
+ const colors = ['#E94584', '#4FD3C4', '#533483'];
1060
+
1061
+ for (let i = 0; i < 15; i++) {
1062
+ const particle = document.createElement('div');
1063
+ particle.className = 'particle';
1064
+ const size = Math.random() * 100 + 50;
1065
+ particle.style.width = size + 'px';
1066
+ particle.style.height = size + 'px';
1067
+ particle.style.left = Math.random() * 100 + '%';
1068
+ particle.style.top = Math.random() * 100 + '%';
1069
+ particle.style.animationDelay = Math.random() * 20 + 's';
1070
+ particle.style.animationDuration = (15 + Math.random() * 10) + 's';
1071
+ particle.style.background = `radial-gradient(circle, ${colors[Math.floor(Math.random() * colors.length)]} 0%, transparent 70%)`;
1072
+ container.appendChild(particle);
1073
+ }
1074
+ }
1075
+
1076
+ createParticles();
1077
+
1078
+ // Touch Feedback for Mobile
1079
+ document.querySelectorAll('.app-item, .dock-item, .glass-card').forEach(el => {
1080
+ el.addEventListener('touchstart', function() {
1081
+ this.style.transform = 'scale(0.95)';
1082
+ });
1083
+ el.addEventListener('touchend', function() {
1084
+ this.style.transform = '';
1085
+ });
1086
+ });
1087
+
1088
+ // Activity Rings Animation on Load
1089
+ window.addEventListener('load', () => {
1090
+ setTimeout(() => {
1091
+ document.querySelectorAll('.ring-progress').forEach(ring => {
1092
+ const offset = ring.getAttribute('stroke-dashoffset');
1093
+ ring.style.strokeDashoffset = offset;
1094
+ });
1095
+ }, 500);
1096
+ });
1097
+ </script>
1098
+ </body>
1099
+ </html>