Hugging Face's logo

Spaces:
samirerty
/
anycoder-9d4d752b
Running

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

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +517 -19
index.html CHANGED
@@ -1,19 +1,517 @@
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
+ <style>
8
+ /* iOS Design System & CSS Reset */
9
+ :root {
10
+ /* iOS Color Palette - Blue Purple Scheme */
11
+ --ios-bg-deep: #0f0f1e;
12
+ --ios-bg-mid: #1c1c2e;
13
+ --ios-bg-light: #2d2d44;
14
+ --ios-blue: #007AFF;
15
+ --ios-purple: #AF52DE;
16
+ --ios-indigo: #5856D6;
17
+ --ios-pink: #FF2D55;
18
+ --ios-text-primary: rgba(255, 255, 255, 0.95);
19
+ --ios-text-secondary: rgba(255, 255, 255, 0.6);
20
+ --ios-glass-bg: rgba(255, 255, 255, 0.08);
21
+ --ios-glass-border: rgba(255, 255, 255, 0.15);
22
+ --ios-glass-highlight: rgba(255, 255, 255, 0.25);
23
+ --ios-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
24
+ --ios-blur: blur(20px) saturate(180%);
25
+ --ios-radius-sm: 12px;
26
+ --ios-radius-md: 20px;
27
+ --ios-radius-lg: 28px;
28
+ --ios-radius-xl: 34px;
29
+ --ios-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
30
+ }
31
+
32
+ * {
33
+ margin: 0;
34
+ padding: 0;
35
+ box-sizing: border-box;
36
+ }
37
+
38
+ /* Smooth scrolling and iOS momentum */
39
+ html {
40
+ scroll-behavior: smooth;
41
+ -webkit-overflow-scrolling: touch;
42
+ }
43
+
44
+ body {
45
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
46
+ background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
47
+ background-attachment: fixed;
48
+ min-height: 100vh;
49
+ color: var(--ios-text-primary);
50
+ line-height: 1.47059;
51
+ font-weight: 400;
52
+ letter-spacing: -0.022em;
53
+ overflow-x: hidden;
54
+ position: relative;
55
+ }
56
+
57
+ /* Animated Mesh Gradient Background */
58
+ body::before {
59
+ content: '';
60
+ position: fixed;
61
+ top: -50%;
62
+ left: -50%;
63
+ width: 200%;
64
+ height: 200%;
65
+ background:
66
+ radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
67
+ radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.15) 0%, transparent 50%),
68
+ radial-gradient(circle at 40% 40%, rgba(88, 86, 214, 0.2) 0%, transparent 40%);
69
+ animation: meshMove 20s ease-in-out infinite;
70
+ pointer-events: none;
71
+ z-index: -1;
72
+ }
73
+
74
+ @keyframes meshMove {
75
+ 0%, 100% { transform: translate(0, 0) scale(1); }
76
+ 33% { transform: translate(30px, -30px) scale(1.1); }
77
+ 66% { transform: translate(-20px, 20px) scale(0.9); }
78
+ }
79
+
80
+ /* Built with Anycoder Link - Fixed at top */
81
+ .built-with {
82
+ position: fixed;
83
+ top: 20px;
84
+ left: 50%;
85
+ transform: translateX(-50%);
86
+ z-index: 1000;
87
+ background: var(--ios-glass-bg);
88
+ backdrop-filter: var(--ios-blur);
89
+ -webkit-backdrop-filter: var(--ios-blur);
90
+ border: 1px solid var(--ios-glass-border);
91
+ padding: 8px 20px;
92
+ border-radius: 100px;
93
+ font-size: 13px;
94
+ font-weight: 500;
95
+ color: var(--ios-text-secondary);
96
+ text-decoration: none;
97
+ transition: var(--ios-transition);
98
+ box-shadow: var(--ios-shadow);
99
+ }
100
+
101
+ .built-with:hover {
102
+ background: rgba(255, 255, 255, 0.15);
103
+ color: var(--ios-text-primary);
104
+ transform: translateX(-50%) translateY(-2px);
105
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
106
+ }
107
+
108
+ /* Main Container */
109
+ .container {
110
+ max-width: 900px;
111
+ margin: 0 auto;
112
+ padding: 100px 24px 40px;
113
+ display: flex;
114
+ flex-direction: column;
115
+ gap: 32px;
116
+ animation: fadeInUp 0.8s ease-out;
117
+ }
118
+
119
+ @keyframes fadeInUp {
120
+ from {
121
+ opacity: 0;
122
+ transform: translateY(30px);
123
+ }
124
+ to {
125
+ opacity: 1;
126
+ transform: translateY(0);
127
+ }
128
+ }
129
+
130
+ /* Glassmorphism Hero Section */
131
+ .hero {
132
+ background: var(--ios-glass-bg);
133
+ backdrop-filter: var(--ios-blur);
134
+ -webkit-backdrop-filter: var(--ios-blur);
135
+ border: 1px solid var(--ios-glass-border);
136
+ border-radius: var(--ios-radius-xl);
137
+ padding: 48px 32px;
138
+ text-align: center;
139
+ box-shadow:
140
+ var(--ios-shadow),
141
+ inset 0 1px 0 var(--ios-glass-highlight);
142
+ position: relative;
143
+ overflow: hidden;
144
+ }
145
+
146
+ .hero::before {
147
+ content: '';
148
+ position: absolute;
149
+ top: 0;
150
+ left: 0;
151
+ right: 0;
152
+ height: 1px;
153
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
154
+ }
155
+
156
+ .hero h1 {
157
+ font-size: clamp(32px, 6vw, 48px);
158
+ font-weight: 700;
159
+ background: linear-gradient(135deg, #fff 0%, #a5a5ff 100%);
160
+ -webkit-background-clip: text;
161
+ -webkit-text-fill-color: transparent;
162
+ background-clip: text;
163
+ margin-bottom: 16px;
164
+ letter-spacing: -0.003em;
165
+ }
166
+
167
+ .subtitle {
168
+ font-size: 19px;
169
+ color: var(--ios-text-secondary);
170
+ font-weight: 400;
171
+ max-width: 400px;
172
+ margin: 0 auto;
173
+ line-height: 1.4;
174
+ }
175
+
176
+ /* Features Grid - iOS Style Cards */
177
+ .features {
178
+ display: grid;
179
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
180
+ gap: 20px;
181
+ width: 100%;
182
+ }
183
+
184
+ .feature {
185
+ background: var(--ios-glass-bg);
186
+ backdrop-filter: var(--ios-blur);
187
+ -webkit-backdrop-filter: var(--ios-blur);
188
+ border: 1px solid var(--ios-glass-border);
189
+ border-radius: var(--ios-radius-lg);
190
+ padding: 28px;
191
+ transition: var(--ios-transition);
192
+ box-shadow: var(--ios-shadow);
193
+ position: relative;
194
+ overflow: hidden;
195
+ display: flex;
196
+ flex-direction: column;
197
+ align-items: center;
198
+ text-align: center;
199
+ gap: 16px;
200
+ }
201
+
202
+ .feature::after {
203
+ content: '';
204
+ position: absolute;
205
+ top: 0;
206
+ left: 0;
207
+ right: 0;
208
+ bottom: 0;
209
+ background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
210
+ opacity: 0;
211
+ transition: opacity 0.3s;
212
+ pointer-events: none;
213
+ }
214
+
215
+ .feature:hover {
216
+ transform: translateY(-4px) scale(1.02);
217
+ border-color: rgba(255, 255, 255, 0.25);
218
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
219
+ }
220
+
221
+ .feature:hover::after {
222
+ opacity: 1;
223
+ }
224
+
225
+ /* iOS Style App Icons - Squircle with Gradient */
226
+ .icon {
227
+ width: 72px;
228
+ height: 72px;
229
+ border-radius: 22px;
230
+ display: flex;
231
+ align-items: center;
232
+ justify-content: center;
233
+ font-size: 32px;
234
+ background: linear-gradient(135deg, var(--ios-blue) 0%, var(--ios-purple) 100%);
235
+ box-shadow:
236
+ 0 4px 15px rgba(88, 86, 214, 0.4),
237
+ inset 0 1px 0 rgba(255,255,255,0.3);
238
+ position: relative;
239
+ transition: var(--ios-transition);
240
+ }
241
+
242
+ .feature:nth-child(2) .icon {
243
+ background: linear-gradient(135deg, var(--ios-purple) 0%, var(--ios-pink) 100%);
244
+ box-shadow:
245
+ 0 4px 15px rgba(175, 82, 222, 0.4),
246
+ inset 0 1px 0 rgba(255,255,255,0.3);
247
+ }
248
+
249
+ .feature:nth-child(3) .icon {
250
+ background: linear-gradient(135deg, var(--ios-indigo) 0%, var(--ios-blue) 100%);
251
+ box-shadow:
252
+ 0 4px 15px rgba(0, 122, 255, 0.4),
253
+ inset 0 1px 0 rgba(255,255,255,0.3);
254
+ }
255
+
256
+ .feature:hover .icon {
257
+ transform: scale(1.1) rotate(5deg);
258
+ }
259
+
260
+ .icon::before {
261
+ content: '';
262
+ position: absolute;
263
+ inset: 0;
264
+ border-radius: 22px;
265
+ background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 50%);
266
+ pointer-events: none;
267
+ }
268
+
269
+ .feature h3 {
270
+ font-size: 20px;
271
+ font-weight: 600;
272
+ color: var(--ios-text-primary);
273
+ margin: 0;
274
+ }
275
+
276
+ .feature p {
277
+ font-size: 15px;
278
+ color: var(--ios-text-secondary);
279
+ margin: 0;
280
+ line-height: 1.4;
281
+ }
282
+
283
+ /* CTA Section */
284
+ .cta {
285
+ display: flex;
286
+ gap: 16px;
287
+ justify-content: center;
288
+ flex-wrap: wrap;
289
+ margin-top: 8px;
290
+ }
291
+
292
+ /* iOS Style Buttons */
293
+ .btn {
294
+ display: inline-flex;
295
+ align-items: center;
296
+ justify-content: center;
297
+ padding: 16px 32px;
298
+ border-radius: 100px;
299
+ font-size: 17px;
300
+ font-weight: 600;
301
+ text-decoration: none;
302
+ transition: var(--ios-transition);
303
+ border: none;
304
+ cursor: pointer;
305
+ position: relative;
306
+ overflow: hidden;
307
+ min-width: 140px;
308
+ letter-spacing: -0.01em;
309
+ }
310
+
311
+ .btn-primary {
312
+ background: linear-gradient(135deg, var(--ios-blue) 0%, var(--ios-purple) 100%);
313
+ color: white;
314
+ box-shadow:
315
+ 0 4px 20px rgba(0, 122, 255, 0.4),
316
+ inset 0 1px 0 rgba(255,255,255,0.2);
317
+ }
318
+
319
+ .btn-primary:hover {
320
+ transform: translateY(-2px) scale(1.05);
321
+ box-shadow:
322
+ 0 8px 30px rgba(0, 122, 255, 0.6),
323
+ inset 0 1px 0 rgba(255,255,255,0.3);
324
+ }
325
+
326
+ .btn-primary:active {
327
+ transform: translateY(0) scale(0.98);
328
+ }
329
+
330
+ .btn-secondary {
331
+ background: rgba(255, 255, 255, 0.1);
332
+ color: var(--ios-text-primary);
333
+ border: 1px solid var(--ios-glass-border);
334
+ backdrop-filter: blur(10px);
335
+ }
336
+
337
+ .btn-secondary:hover {
338
+ background: rgba(255, 255, 255, 0.2);
339
+ border-color: rgba(255, 255, 255, 0.3);
340
+ transform: translateY(-2px);
341
+ }
342
+
343
+ /* Shine effect on buttons */
344
+ .btn::after {
345
+ content: '';
346
+ position: absolute;
347
+ top: -50%;
348
+ left: -50%;
349
+ width: 200%;
350
+ height: 200%;
351
+ background: linear-gradient(
352
+ 45deg,
353
+ transparent 30%,
354
+ rgba(255, 255, 255, 0.3) 50%,
355
+ transparent 70%
356
+ );
357
+ transform: translateX(-100%) rotate(45deg);
358
+ transition: transform 0.6s;
359
+ }
360
+
361
+ .btn:hover::after {
362
+ transform: translateX(100%) rotate(45deg);
363
+ }
364
+
365
+ /* Responsive Design */
366
+ @media (max-width: 640px) {
367
+ .container {
368
+ padding: 90px 20px 32px;
369
+ gap: 24px;
370
+ }
371
+
372
+ .hero {
373
+ padding: 36px 24px;
374
+ border-radius: var(--ios-radius-lg);
375
+ }
376
+
377
+ .features {
378
+ grid-template-columns: 1fr;
379
+ gap: 16px;
380
+ }
381
+
382
+ .feature {
383
+ padding: 24px;
384
+ flex-direction: row;
385
+ text-align: right;
386
+ align-items: flex-start;
387
+ gap: 20px;
388
+ }
389
+
390
+ .icon {
391
+ width: 60px;
392
+ height: 60px;
393
+ font-size: 28px;
394
+ border-radius: 18px;
395
+ flex-shrink: 0;
396
+ }
397
+
398
+ .feature h3 {
399
+ font-size: 18px;
400
+ }
401
+
402
+ .feature p {
403
+ font-size: 14px;
404
+ }
405
+
406
+ .btn {
407
+ flex: 1;
408
+ min-width: 120px;
409
+ padding: 14px 24px;
410
+ font-size: 16px;
411
+ }
412
+
413
+ .cta {
414
+ width: 100%;
415
+ }
416
+ }
417
+
418
+ /* Support for reduced motion */
419
+ @media (prefers-reduced-motion: reduce) {
420
+ * {
421
+ animation-duration: 0.01ms !important;
422
+ animation-iteration-count: 1 !important;
423
+ transition-duration: 0.01ms !important;
424
+ }
425
+ }
426
+
427
+ /* Dark mode optimization (already dark, but for system consistency) */
428
+ @media (prefers-color-scheme: light) {
429
+ :root {
430
+ --ios-glass-bg: rgba(255, 255, 255, 0.7);
431
+ --ios-text-primary: rgba(0, 0, 0, 0.9);
432
+ --ios-text-secondary: rgba(0, 0, 0, 0.5);
433
+ --ios-glass-border: rgba(255, 255, 255, 0.5);
434
+ }
435
+ }
436
+ </style>
437
+ </head>
438
+ <body>
439
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank" rel="noopener">
440
+ Built with anycoder
441
+ </a>
442
+
443
+ <div class="container">
444
+ <div class="hero">
445
+ <h1>💬 چت روم ساده</h1>
446
+ <p class="subtitle">محلی برای گفتگو با دوستان</p>
447
+ </div>
448
+
449
+ <div class="features">
450
+ <div class="feature">
451
+ <div class="icon">🔐</div>
452
+ <div>
453
+ <h3>ثبت‌نام آسان</h3>
454
+ <p>با شماره موبایل ثبت‌نام کنید</p>
455
+ </div>
456
+ </div>
457
+
458
+ <div class="feature">
459
+ <div class="icon">👥</div>
460
+ <div>
461
+ <h3>ساخت اتاق</h3>
462
+ <p>تا ۳ اتاق مختلف بسازید</p>
463
+ </div>
464
+ </div>
465
+
466
+ <div class="feature">
467
+ <div class="icon">💭</div>
468
+ <div>
469
+ <h3>چت زنده</h3>
470
+ <p>گفتگوی آنلاین و سریع</p>
471
+ </div>
472
+ </div>
473
+ </div>
474
+
475
+ <div class="cta">
476
+ <a href="register.php" class="btn btn-primary">شروع کنید</a>
477
+ <a href="login.php" class="btn btn-secondary">ورود</a>
478
+ </div>
479
+ </div>
480
+
481
+ <script>
482
+ // Add subtle parallax effect on mouse move for desktop
483
+ document.addEventListener('mousemove', (e) => {
484
+ if (window.innerWidth > 768) {
485
+ const features = document.querySelectorAll('.feature');
486
+ const mouseX = e.clientX / window.innerWidth - 0.5;
487
+ const mouseY = e.clientY / window.innerHeight - 0.5;
488
+
489
+ features.forEach((feature, index) => {
490
+ const speed = (index + 1) * 5;
491
+ const x = mouseX * speed;
492
+ const y = mouseY * speed;
493
+ feature.style.transform = `translate(${x}px, ${y}px)`;
494
+ });
495
+ }
496
+ });
497
+
498
+ // Reset transform on mouse leave
499
+ document.addEventListener('mouseleave', () => {
500
+ const features = document.querySelectorAll('.feature');
501
+ features.forEach(feature => {
502
+ feature.style.transform = '';
503
+ });
504
+ });
505
+
506
+ // Add touch feedback for mobile
507
+ document.querySelectorAll('.btn, .feature').forEach(el => {
508
+ el.addEventListener('touchstart', () => {
509
+ el.style.transform = 'scale(0.98)';
510
+ });
511
+ el.addEventListener('touchend', () => {
512
+ el.style.transform = '';
513
+ });
514
+ });
515
+ </script>
516
+ </body>
517
+ </html>