Hugging Face's logo

Spaces:
chandan06
/
anycoder-9672029a
Running

App Files Community
chandan06 commited on
Commit
85999e9
·
verified ·
1 Parent(s): de9d1d2

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +951 -19
index.html CHANGED
@@ -1,19 +1,951 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Futuristic mobile product landing page with mindblowing animations">
7
+ <title>NeonFlow - Future Mobile Experience</title>
8
+ <style>
9
+ :root {
10
+ --primary: #00ffff;
11
+ --secondary: #ff00ff;
12
+ --accent: #ffff00;
13
+ --dark: #0a0a0a;
14
+ --light: #ffffff;
15
+ --glass: rgba(255, 255, 255, 0.1);
16
+ --glass-border: rgba(255, 255, 255, 0.2);
17
+ }
18
+
19
+ * {
20
+ margin: 0;
21
+ padding: 0;
22
+ box-sizing: border-box;
23
+ }
24
+
25
+ body {
26
+ font-family: 'Arial', sans-serif;
27
+ background: var(--dark);
28
+ color: var(--light);
29
+ overflow-x: hidden;
30
+ line-height: 1.6;
31
+ }
32
+
33
+ /* Global Animations */
34
+ @keyframes float {
35
+ 0%, 100% { transform: translateY(0px); }
36
+ 50% { transform: translateY(-20px); }
37
+ }
38
+
39
+ @keyframes pulse {
40
+ 0%, 100% { opacity: 1; }
41
+ 50% { opacity: 0.5; }
42
+ }
43
+
44
+ @keyframes glow {
45
+ 0%, 100% { box-shadow: 0 0 20px var(--primary); }
46
+ 50% { box-shadow: 0 0 40px var(--primary), 0 0 60px var(--primary); }
47
+ }
48
+
49
+ @keyframes rotate {
50
+ from { transform: rotate(0deg); }
51
+ to { transform: rotate(360deg); }
52
+ }
53
+
54
+ @keyframes wave {
55
+ 0% { transform: translateY(0); }
56
+ 50% { transform: translateY(-10px); }
57
+ 100% { transform: translateY(0); }
58
+ }
59
+
60
+ /* Navigation */
61
+ .navbar {
62
+ position: fixed;
63
+ top: 0;
64
+ width: 100%;
65
+ padding: 1.5rem 2rem;
66
+ display: flex;
67
+ justify-content: space-between;
68
+ align-items: center;
69
+ z-index: 1000;
70
+ backdrop-filter: blur(10px);
71
+ background: var(--glass);
72
+ border-bottom: 1px solid var(--glass-border);
73
+ transition: all 0.3s ease;
74
+ }
75
+
76
+ .logo {
77
+ font-size: 1.5rem;
78
+ font-weight: bold;
79
+ background: linear-gradient(45deg, var(--primary), var(--secondary));
80
+ -webkit-background-clip: text;
81
+ -webkit-text-fill-color: transparent;
82
+ animation: glow 2s infinite;
83
+ }
84
+
85
+ .nav-links {
86
+ display: flex;
87
+ gap: 2rem;
88
+ }
89
+
90
+ .nav-links a {
91
+ color: var(--light);
92
+ text-decoration: none;
93
+ transition: all 0.3s ease;
94
+ position: relative;
95
+ }
96
+
97
+ .nav-links a::after {
98
+ content: '';
99
+ position: absolute;
100
+ bottom: -5px;
101
+ left: 0;
102
+ width: 0;
103
+ height: 2px;
104
+ background: var(--primary);
105
+ transition: width 0.3s ease;
106
+ }
107
+
108
+ .nav-links a:hover::after {
109
+ width: 100%;
110
+ }
111
+
112
+ /* Hero Section */
113
+ .hero {
114
+ height: 100vh;
115
+ display: flex;
116
+ flex-direction: column;
117
+ justify-content: center;
118
+ align-items: center;
119
+ text-align: center;
120
+ position: relative;
121
+ overflow: hidden;
122
+ }
123
+
124
+ .hero-bg {
125
+ position: absolute;
126
+ top: 0;
127
+ left: 0;
128
+ width: 100%;
129
+ height: 100%;
130
+ background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
131
+ z-index: -2;
132
+ }
133
+
134
+ .hero::before {
135
+ content: '';
136
+ position: absolute;
137
+ top: 0;
138
+ left: 0;
139
+ width: 100%;
140
+ height: 100%;
141
+ background: radial-gradient(circle at 20% 50%, rgba(0, 255, 255, 0.3) 0%, transparent 50%),
142
+ radial-gradient(circle at 80% 80%, rgba(255, 0, 255, 0.3) 0%, transparent 50%);
143
+ z-index: -1;
144
+ animation: rotate 30s linear infinite;
145
+ }
146
+
147
+ .hero-title {
148
+ font-size: 4rem;
149
+ margin-bottom: 1rem;
150
+ background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent));
151
+ -webkit-background-clip: text;
152
+ -webkit-text-fill-color: transparent;
153
+ animation: float 3s ease-in-out infinite;
154
+ }
155
+
156
+ .hero-subtitle {
157
+ font-size: 1.5rem;
158
+ margin-bottom: 2rem;
159
+ color: var(--glass-border);
160
+ animation: pulse 2s ease-in-out infinite;
161
+ }
162
+
163
+ .cta-button {
164
+ padding: 1rem 2.5rem;
165
+ font-size: 1.2rem;
166
+ background: transparent;
167
+ border: 2px solid var(--primary);
168
+ color: var(--primary);
169
+ border-radius: 50px;
170
+ cursor: pointer;
171
+ transition: all 0.3s ease;
172
+ position: relative;
173
+ overflow: hidden;
174
+ }
175
+
176
+ .cta-button::before {
177
+ content: '';
178
+ position: absolute;
179
+ top: 0;
180
+ left: -100%;
181
+ width: 100%;
182
+ height: 100%;
183
+ background: linear-gradient(90deg, transparent, var(--primary), transparent);
184
+ transition: left 0.5s ease;
185
+ }
186
+
187
+ .cta-button:hover::before {
188
+ left: 100%;
189
+ }
190
+
191
+ .cta-button:hover {
192
+ background: var(--primary);
193
+ color: var(--dark);
194
+ transform: translateY(-3px);
195
+ box-shadow: 0 10px 20px rgba(0, 255, 255, 0.3);
196
+ }
197
+
198
+ /* Features Section */
199
+ .features {
200
+ padding: 5rem 2rem;
201
+ background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
202
+ }
203
+
204
+ .features-grid {
205
+ display: grid;
206
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
207
+ gap: 2rem;
208
+ max-width: 1200px;
209
+ margin: 0 auto;
210
+ }
211
+
212
+ .feature-card {
213
+ background: var(--glass);
214
+ backdrop-filter: blur(10px);
215
+ border: 1px solid var(--glass-border);
216
+ border-radius: 20px;
217
+ padding: 2rem;
218
+ transition: all 0.3s ease;
219
+ position: relative;
220
+ overflow: hidden;
221
+ }
222
+
223
+ .feature-card::before {
224
+ content: '';
225
+ position: absolute;
226
+ top: 0;
227
+ left: 0;
228
+ width: 100%;
229
+ height: 3px;
230
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
231
+ transform: scaleX(0);
232
+ transition: transform 0.3s ease;
233
+ }
234
+
235
+ .feature-card:hover::before {
236
+ transform: scaleX(1);
237
+ }
238
+
239
+ .feature-card:hover {
240
+ transform: translateY(-10px);
241
+ box-shadow: 0 20px 40px rgba(0, 255, 255, 0.2);
242
+ }
243
+
244
+ .feature-icon {
245
+ font-size: 3rem;
246
+ margin-bottom: 1rem;
247
+ animation: glow 2s infinite;
248
+ }
249
+
250
+ .feature-title {
251
+ font-size: 1.5rem;
252
+ margin-bottom: 1rem;
253
+ }
254
+
255
+ .feature-desc {
256
+ color: var(--glass-border);
257
+ }
258
+
259
+ /* Interactive Section */
260
+ .interactive {
261
+ padding: 5rem 2rem;
262
+ background: linear-gradient(135deg, #1a1a2e 0%, #0a0a0a 100%);
263
+ position: relative;
264
+ overflow: hidden;
265
+ }
266
+
267
+ .interactive::before {
268
+ content: '';
269
+ position: absolute;
270
+ top: 0;
271
+ left: 0;
272
+ width: 100%;
273
+ height: 100%;
274
+ background:
275
+ radial-gradient(circle at 10% 20%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
276
+ radial-gradient(circle at 90% 80%, rgba(255, 0, 255, 0.1) 0%, transparent 50%);
277
+ z-index: -1;
278
+ }
279
+
280
+ .interactive-content {
281
+ max-width: 800px;
282
+ margin: 0 auto;
283
+ text-align: center;
284
+ }
285
+
286
+ .interactive-title {
287
+ font-size: 3rem;
288
+ margin-bottom: 2rem;
289
+ background: linear-gradient(45deg, var(--primary), var(--secondary));
290
+ -webkit-background-clip: text;
291
+ -webkit-text-fill-color: transparent;
292
+ }
293
+
294
+ .interactive-desc {
295
+ font-size: 1.2rem;
296
+ margin-bottom: 3rem;
297
+ color: var(--glass-border);
298
+ }
299
+
300
+ .interactive-grid {
301
+ display: grid;
302
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
303
+ gap: 2rem;
304
+ margin-top: 4rem;
305
+ }
306
+
307
+ .interactive-item {
308
+ background: var(--glass);
309
+ backdrop-filter: blur(10px);
310
+ border: 1px solid var(--glass-border);
311
+ border-radius: 15px;
312
+ padding: 2rem;
313
+ text-align: center;
314
+ transition: all 0.3s ease;
315
+ cursor: pointer;
316
+ }
317
+
318
+ .interactive-item:hover {
319
+ transform: scale(1.05);
320
+ box-shadow: 0 15px 30px rgba(255, 255, 0, 0.2);
321
+ }
322
+
323
+ .interactive-item-icon {
324
+ font-size: 2.5rem;
325
+ margin-bottom: 1rem;
326
+ animation: pulse 2s infinite;
327
+ }
328
+
329
+ /* Stats Section */
330
+ .stats {
331
+ padding: 5rem 2rem;
332
+ background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
333
+ }
334
+
335
+ .stats-container {
336
+ max-width: 1200px;
337
+ margin: 0 auto;
338
+ display: grid;
339
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
340
+ gap: 2rem;
341
+ }
342
+
343
+ .stat-item {
344
+ text-align: center;
345
+ padding: 2rem;
346
+ background: var(--glass);
347
+ backdrop-filter: blur(10px);
348
+ border: 1px solid var(--glass-border);
349
+ border-radius: 20px;
350
+ transition: all 0.3s ease;
351
+ }
352
+
353
+ .stat-item:hover {
354
+ transform: translateY(-5px);
355
+ box-shadow: 0 15px 30px rgba(0, 255, 255, 0.2);
356
+ }
357
+
358
+ .stat-number {
359
+ font-size: 3rem;
360
+ font-weight: bold;
361
+ background: linear-gradient(45deg, var(--primary), var(--secondary));
362
+ -webkit-background-clip: text;
363
+ -webkit-text-fill-color: transparent;
364
+ margin-bottom: 1rem;
365
+ }
366
+
367
+ .stat-label {
368
+ font-size: 1.2rem;
369
+ color: var(--glass-border);
370
+ }
371
+
372
+ /* Testimonials */
373
+ .testimonials {
374
+ padding: 5rem 2rem;
375
+ background: linear-gradient(135deg, #1a1a2e 0%, #0a0a0a 100%);
376
+ }
377
+
378
+ .testimonials-container {
379
+ max-width: 1000px;
380
+ margin: 0 auto;
381
+ text-align: center;
382
+ }
383
+
384
+ .testimonial-slider {
385
+ position: relative;
386
+ max-width: 800px;
387
+ margin: 0 auto;
388
+ overflow: hidden;
389
+ }
390
+
391
+ .testimonial-track {
392
+ display: flex;
393
+ transition: transform 0.5s ease;
394
+ }
395
+
396
+ .testimonial-card {
397
+ min-width: 100%;
398
+ background: var(--glass);
399
+ backdrop-filter: blur(10px);
400
+ border: 1px solid var(--glass-border);
401
+ border-radius: 20px;
402
+ padding: 3rem;
403
+ margin: 0 1rem;
404
+ }
405
+
406
+ .testimonial-text {
407
+ font-size: 1.2rem;
408
+ margin-bottom: 2rem;
409
+ color: var(--light);
410
+ position: relative;
411
+ }
412
+
413
+ .testimonial-text::before,
414
+ .testimonial-text::after {
415
+ content: '"';
416
+ font-size: 4rem;
417
+ position: absolute;
418
+ color: var(--primary);
419
+ opacity: 0.3;
420
+ }
421
+
422
+ .testimonial-text::before {
423
+ top: -20px;
424
+ left: -10px;
425
+ }
426
+
427
+ .testimonial-text::after {
428
+ bottom: -40px;
429
+ right: -10px;
430
+ }
431
+
432
+ .testimonial-author {
433
+ font-size: 1.2rem;
434
+ font-weight: bold;
435
+ color: var(--primary);
436
+ }
437
+
438
+ .testimonial-role {
439
+ font-size: 1rem;
440
+ color: var(--glass-border);
441
+ }
442
+
443
+ .slider-dots {
444
+ display: flex;
445
+ justify-content: center;
446
+ gap: 1rem;
447
+ margin-top: 2rem;
448
+ }
449
+
450
+ .slider-dot {
451
+ width: 12px;
452
+ height: 12px;
453
+ border-radius: 50%;
454
+ background: var(--glass-border);
455
+ cursor: pointer;
456
+ transition: all 0.3s ease;
457
+ }
458
+
459
+ .slider-dot.active {
460
+ background: var(--primary);
461
+ transform: scale(1.2);
462
+ }
463
+
464
+ /* Footer */
465
+ .footer {
466
+ padding: 3rem 2rem;
467
+ background: var(--dark);
468
+ text-align: center;
469
+ border-top: 1px solid var(--glass-border);
470
+ }
471
+
472
+ .footer-content {
473
+ max-width: 800px;
474
+ margin: 0 auto;
475
+ }
476
+
477
+ .footer-logo {
478
+ font-size: 1.5rem;
479
+ font-weight: bold;
480
+ background: linear-gradient(45deg, var(--primary), var(--secondary));
481
+ -webkit-background-clip: text;
482
+ -webkit-text-fill-color: transparent;
483
+ margin-bottom: 1rem;
484
+ }
485
+
486
+ .footer-links {
487
+ display: flex;
488
+ justify-content: center;
489
+ gap: 2rem;
490
+ margin-bottom: 2rem;
491
+ }
492
+
493
+ .footer-links a {
494
+ color: var(--glass-border);
495
+ text-decoration: none;
496
+ transition: all 0.3s ease;
497
+ }
498
+
499
+ .footer-links a:hover {
500
+ color: var(--primary);
501
+ }
502
+
503
+ .social-icons {
504
+ display: flex;
505
+ justify-content: center;
506
+ gap: 1.5rem;
507
+ margin-bottom: 2rem;
508
+ }
509
+
510
+ .social-icon {
511
+ width: 40px;
512
+ height: 40px;
513
+ border: 1px solid var(--glass-border);
514
+ border-radius: 50%;
515
+ display: flex;
516
+ align-items: center;
517
+ justify-content: center;
518
+ transition: all 0.3s ease;
519
+ }
520
+
521
+ .social-icon:hover {
522
+ background: var(--primary);
523
+ transform: translateY(-5px);
524
+ }
525
+
526
+ /* Particles */
527
+ .particles {
528
+ position: fixed;
529
+ top: 0;
530
+ left: 0;
531
+ width: 100%;
532
+ height: 100%;
533
+ pointer-events: none;
534
+ z-index: -1;
535
+ }
536
+
537
+ .particle {
538
+ position: absolute;
539
+ background: var(--primary);
540
+ border-radius: 50%;
541
+ opacity: 0.5;
542
+ animation: float 10s infinite linear;
543
+ }
544
+
545
+ /* Responsive */
546
+ @media (max-width: 768px) {
547
+ .hero-title {
548
+ font-size: 2.5rem;
549
+ }
550
+
551
+ .hero-subtitle {
552
+ font-size: 1.2rem;
553
+ }
554
+
555
+ .nav-links {
556
+ display: none;
557
+ }
558
+
559
+ .features-grid,
560
+ .interactive-grid,
561
+ .stats-container {
562
+ grid-template-columns: 1fr;
563
+ }
564
+
565
+ .testimonial-card {
566
+ margin: 0 0.5rem;
567
+ }
568
+ }
569
+
570
+ /* Scroll Progress */
571
+ .scroll-progress {
572
+ position: fixed;
573
+ top: 0;
574
+ left: 0;
575
+ height: 4px;
576
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
577
+ z-index: 1001;
578
+ transform: scaleX(0);
579
+ transform-origin: left;
580
+ transition: transform 0.1s ease;
581
+ }
582
+
583
+ /* Loading Animation */
584
+ .loader {
585
+ position: fixed;
586
+ top: 0;
587
+ left: 0;
588
+ width: 100%;
589
+ height: 100%;
590
+ background: var(--dark);
591
+ display: flex;
592
+ justify-content: center;
593
+ align-items: center;
594
+ z-index: 9999;
595
+ transition: opacity 0.5s ease;
596
+ }
597
+
598
+ .loader.hidden {
599
+ opacity: 0;
600
+ pointer-events: none;
601
+ }
602
+
603
+ .loader-circle {
604
+ width: 60px;
605
+ height: 60px;
606
+ border: 3px solid var(--glass-border);
607
+ border-top: 3px solid var(--primary);
608
+ border-radius: 50%;
609
+ animation: rotate 1s linear infinite;
610
+ }
611
+ </style>
612
+ </head>
613
+ <body>
614
+ <!-- Loader -->
615
+ <div class="loader" id="loader">
616
+ <div class="loader-circle"></div>
617
+ </div>
618
+
619
+ <!-- Scroll Progress -->
620
+ <div class="scroll-progress" id="scrollProgress"></div>
621
+
622
+ <!-- Particles -->
623
+ <div class="particles" id="particles"></div>
624
+
625
+ <!-- Navigation -->
626
+ <nav class="navbar">
627
+ <div class="logo">NeonFlow</div>
628
+ <div class="nav-links">
629
+ <a href="#hero">Home</a>
630
+ <a href="#features">Features</a>
631
+ <a href="#interactive">Interactive</a>
632
+ <a href="#stats">Stats</a>
633
+ <a href="#testimonials">Testimonials</a>
634
+ </div>
635
+ </nav>
636
+
637
+ <!-- Hero Section -->
638
+ <section class="hero" id="hero">
639
+ <div class="hero-bg"></div>
640
+ <h1 class="hero-title">Experience the Future</h1>
641
+ <p class="hero-subtitle">Revolutionary mobile experience with cutting-edge technology</p>
642
+ <button class="cta-button">Get Started</button>
643
+ </section>
644
+
645
+ <!-- Features Section -->
646
+ <section class="features" id="features">
647
+ <div class="features-grid">
648
+ <div class="feature-card">
649
+ <div class="feature-icon">🚀</div>
650
+ <h3 class="feature-title">Lightning Fast</h3>
651
+ <p class="feature-desc">Experience blazing fast performance with our optimized technology stack</p>
652
+ </div>
653
+ <div class="feature-card">
654
+ <div class="feature-icon">🛡️</div>
655
+ <h3 class="feature-title">Secure by Design</h3>
656
+ <p class="feature-desc">Your data is protected with military-grade encryption</p>
657
+ </div>
658
+ <div class="feature-card">
659
+ <div class="feature-icon">🎨</div>
660
+ <h3 class="feature-title">Beautiful Design</h3>
661
+ <p class="feature-desc">Stunning UI with modern aesthetics and smooth animations</p>
662
+ </div>
663
+ <div class="feature-card">
664
+ <div class="feature-icon">📱</div>
665
+ <h3 class="feature-title">Mobile First</h3>
666
+ <p class="feature-desc">Perfectly optimized for all mobile devices and screen sizes</p>
667
+ </div>
668
+ <div class="feature-card">
669
+ <div class="feature-icon">🤖</div>
670
+ <h3 class="feature-title">AI Powered</h3>
671
+ <p class="feature-desc">Smart features powered by artificial intelligence</p>
672
+ </div>
673
+ <div class="feature-card">
674
+ <div class="feature-icon">🌐</div>
675
+ <h3 class="feature-title">Global Reach</h3>
676
+ <p class="feature-desc">Connect with users worldwide with seamless integration</p>
677
+ </div>
678
+ </div>
679
+ </section>
680
+
681
+ <!-- Interactive Section -->
682
+ <section class="interactive" id="interactive">
683
+ <div class="interactive-content">
684
+ <h2 class="interactive-title">Interactive Experience</h2>
685
+ <p class="interactive-desc">Explore our innovative features with interactive demonstrations</p>
686
+ <div class="interactive-grid">
687
+ <div class="interactive-item">
688
+ <div class="interactive-item-icon">🎮</div>
689
+ <h3>Live Demo</h3>
690
+ <p>Try our interactive demo</p>
691
+ </div>
692
+ <div class="interactive-item">
693
+ <div class="interactive-item-icon">📊</div>
694
+ <h3>Real-time Stats</h3>
695
+ <p>See live performance metrics</p>
696
+ </div>
697
+ <div class="interactive-item">
698
+ <div class="interactive-item-icon">🔮</div>
699
+ <h3>Future Tech</h3>
700
+ <p>Preview upcoming features</p>
701
+ </div>
702
+ <div class="interactive-item">
703
+ <div class="interactive-item-icon">🚀</div>
704
+ <h3>Quick Start</h3>
705
+ <p>Get started in seconds</p>
706
+ </div>
707
+ </div>
708
+ </div>
709
+ </section>
710
+
711
+ <!-- Stats Section -->
712
+ <section class="stats" id="stats">
713
+ <div class="stats-container">
714
+ <div class="stat-item">
715
+ <div class="stat-number" data-target="99.9">0</div>
716
+ <div class="stat-label">Uptime</div>
717
+ </div>
718
+ <div class="stat-item">
719
+ <div class="stat-number" data-target="1M+">0</div>
720
+ <div class="stat-label">Active Users</div>
721
+ </div>
722
+ <div class="stat-item">
723
+ <div class="stat-number" data-target="4.9">0</div>
724
+ <div class="stat-label">User Rating</div>
725
+ </div>
726
+ <div class="stat-item">
727
+ <div class="stat-number" data-target="24/7">0</div>
728
+ <div class="stat-label">Support</div>
729
+ </div>
730
+ </div>
731
+ </section>
732
+
733
+ <!-- Testimonials -->
734
+ <section class="testimonials" id="testimonials">
735
+ <div class="testimonials-container">
736
+ <h2 class="interactive-title">What Our Users Say</h2>
737
+ <div class="testimonial-slider">
738
+ <div class="testimonial-track" id="testimonialTrack">
739
+ <div class="testimonial-card">
740
+ <p class="testimonial-text">"NeonFlow has completely transformed how I work. The interface is stunning and the performance is unmatched."</p>
741
+ <p class="testimonial-author">Sarah Johnson</p>
742
+ <p class="testimonial-role">Product Manager</p>
743
+ </div>
744
+ <div class="testimonial-card">
745
+ <p class="testimonial-text">"I've never seen such a beautiful and functional mobile app. The animations are smooth and the features are innovative."</p>
746
+ <p class="testimonial-author">Mike Chen</p>
747
+ <p class="testimonial-role">Developer</p>
748
+ </div>
749
+ <div class="testimonial-card">
750
+ <p class="testimonial-text">"The future of mobile apps is here. NeonFlow sets a new standard for what's possible."</p>
751
+ <p class="testimonial-author">Emily Rodriguez</p>
752
+ <p class="testimonial-role">Designer</p>
753
+ </div>
754
+ </div>
755
+ </div>
756
+ <div class="slider-dots" id="sliderDots">
757
+ <div class="slider-dot active"></div>
758
+ <div class="slider-dot"></div>
759
+ <div class="slider-dot"></div>
760
+ </div>
761
+ </div>
762
+ </section>
763
+
764
+ <!-- Footer -->
765
+ <footer class="footer">
766
+ <div class="footer-content">
767
+ <div class="footer-logo">NeonFlow</div>
768
+ <div class="footer-links">
769
+ <a href="#">Privacy</a>
770
+ <a href="#">Terms</a>
771
+ <a href="#">Contact</a>
772
+ <a href="#">About</a>
773
+ </div>
774
+ <div class="social-icons">
775
+ <div class="social-icon">f</div>
776
+ <div class="social-icon">t</div>
777
+ <div class="social-icon">in</div>
778
+ <div class="social-icon">ig</div>
779
+ </div>
780
+ <p>&copy; 2023 NeonFlow. Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" style="color: var(--primary); text-decoration: none;">anycoder</a>. All rights reserved.</p>
781
+ </div>
782
+ </footer>
783
+
784
+ <script>
785
+ // Loader
786
+ window.addEventListener('load', () => {
787
+ setTimeout(() => {
788
+ document.getElementById('loader').classList.add('hidden');
789
+ }, 1500);
790
+ });
791
+
792
+ // Particles
793
+ function createParticles() {
794
+ const particlesContainer = document.getElementById('particles');
795
+ const particleCount = 50;
796
+
797
+ for (let i = 0; i < particleCount; i++) {
798
+ const particle = document.createElement('div');
799
+ particle.classList.add('particle');
800
+
801
+ const size = Math.random() * 4 + 2;
802
+ const posX = Math.random() * 100;
803
+ const posY = Math.random() * 100;
804
+ const delay = Math.random() * 10;
805
+ const duration = Math.random() * 20 + 10;
806
+
807
+ particle.style.width = `${size}px`;
808
+ particle.style.height = `${size}px`;
809
+ particle.style.left = `${posX}%`;
810
+ particle.style.top = `${posY}%`;
811
+ particle.style.animationDelay = `${delay}s`;
812
+ particle.style.animationDuration = `${duration}s`;
813
+
814
+ particlesContainer.appendChild(particle);
815
+ }
816
+ }
817
+
818
+ // Scroll Progress
819
+ function updateScrollProgress() {
820
+ const scrollProgress = document.getElementById('scrollProgress');
821
+ const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
822
+ const scrolled = (window.scrollY / scrollHeight) * 100;
823
+ scrollProgress.style.transform = `scaleX(${scrolled / 100})`;
824
+ }
825
+
826
+ // Animate Stats
827
+ function animateStats() {
828
+ const stats = document.querySelectorAll('.stat-number');
829
+ const observer = new IntersectionObserver((entries) => {
830
+ entries.forEach(entry => {
831
+ if (entry.isIntersecting) {
832
+ const target = entry.target;
833
+ const targetValue = parseInt(target.getAttribute('data-target'));
834
+ let currentValue = 0;
835
+ const increment = targetValue / 100;
836
+
837
+ const timer = setInterval(() => {
838
+ currentValue += increment;
839
+ if (currentValue >= targetValue) {
840
+ target.textContent = targetValue;
841
+ clearInterval(timer);
842
+ } else {
843
+ target.textContent = Math.floor(currentValue);
844
+ }
845
+ }, 20);
846
+
847
+ observer.unobserve(target);
848
+ }
849
+ });
850
+ }, { threshold: 0.5 });
851
+
852
+ stats.forEach(stat => observer.observe(stat));
853
+ }
854
+
855
+ // Testimonial Slider
856
+ let currentSlide = 0;
857
+ const slides = document.querySelectorAll('.testimonial-card');
858
+ const dots = document.querySelectorAll('.slider-dot');
859
+ const track = document.getElementById('testimonialTrack');
860
+
861
+ function updateSlider() {
862
+ track.style.transform = `translateX(-${currentSlide * 100}%)`;
863
+
864
+ dots.forEach((dot, index) => {
865
+ dot.classList.toggle('active', index === currentSlide);
866
+ });
867
+ }
868
+
869
+ function nextSlide() {
870
+ currentSlide = (currentSlide + 1) % slides.length;
871
+ updateSlider();
872
+ }
873
+
874
+ function prevSlide() {
875
+ currentSlide = (currentSlide - 1 + slides.length) % slides.length;
876
+ updateSlider();
877
+ }
878
+
879
+ // Auto-slide
880
+ setInterval(nextSlide, 5000);
881
+
882
+ // Click dots to navigate
883
+ dots.forEach((dot, index) => {
884
+ dot.addEventListener('click', () => {
885
+ currentSlide = index;
886
+ updateSlider();
887
+ });
888
+ });
889
+
890
+ // Smooth scroll for navigation
891
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
892
+ anchor.addEventListener('click', function (e) {
893
+ e.preventDefault();
894
+ const target = document.querySelector(this.getAttribute('href'));
895
+ if (target) {
896
+ target.scrollIntoView({ behavior: 'smooth' });
897
+ }
898
+ });
899
+ });
900
+
901
+ // Parallax effect
902
+ window.addEventListener('scroll', () => {
903
+ const scrolled = window.scrollY;
904
+ const parallax = document.querySelector('.hero');
905
+ parallax.style.transform = `translateY(${scrolled * 0.5}px)`;
906
+ });
907
+
908
+ // Initialize everything
909
+ document.addEventListener('DOMContentLoaded', () => {
910
+ createParticles();
911
+ updateScrollProgress();
912
+ animateStats();
913
+
914
+ window.addEventListener('scroll', updateScrollProgress);
915
+
916
+ // Add hover effects to interactive items
917
+ const interactiveItems = document.querySelectorAll('.interactive-item');
918
+ interactiveItems.forEach(item => {
919
+ item.addEventListener('mouseenter', () => {
920
+ item.style.transform = 'scale(1.05)';
921
+ });
922
+ item.addEventListener('mouseleave', () => {
923
+ item.style.transform = 'scale(1)';
924
+ });
925
+ });
926
+ });
927
+
928
+ // Add touch support for mobile
929
+ let touchStartX = 0;
930
+ let touchEndX = 0;
931
+
932
+ document.addEventListener('touchstart', (e) => {
933
+ touchStartX = e.changedTouches[0].screenX;
934
+ });
935
+
936
+ document.addEventListener('touchend', (e) => {
937
+ touchEndX = e.changedTouches[0].screenX;
938
+ handleSwipe();
939
+ });
940
+
941
+ function handleSwipe() {
942
+ if (touchEndX < touchStartX - 50) {
943
+ nextSlide();
944
+ }
945
+ if (touchEndX > touchStartX + 50) {
946
+ prevSlide();
947
+ }
948
+ }
949
+ </script>
950
+ </body>
951
+ </html>