Hugging Face's logo

Spaces:
olydna
/
anycoder-65c0a703
Running

App Files Community
olydna commited on
Commit
0a3d4ca
·
verified ·
1 Parent(s): 206b31d

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +995 -19
index.html CHANGED
@@ -1,19 +1,995 @@
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
+ <title>Ferrari vs F1 - The Legendary Journey</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
+ --ferrari-red: #DC143C;
17
+ --ferrari-dark: #8B0000;
18
+ --ferrari-gold: #FFD700;
19
+ --dark-bg: #0a0a0a;
20
+ --card-bg: rgba(255, 255, 255, 0.05);
21
+ --text-primary: #ffffff;
22
+ --text-secondary: #b0b0b0;
23
+ }
24
+
25
+ body {
26
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
27
+ background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
28
+ color: var(--text-primary);
29
+ overflow-x: hidden;
30
+ min-height: 100vh;
31
+ }
32
+
33
+ /* Header */
34
+ header {
35
+ background: linear-gradient(90deg, var(--ferrari-dark) 0%, var(--ferrari-red) 100%);
36
+ padding: 1rem 2rem;
37
+ position: fixed;
38
+ width: 100%;
39
+ top: 0;
40
+ z-index: 1000;
41
+ box-shadow: 0 4px 20px rgba(220, 20, 60, 0.3);
42
+ }
43
+
44
+ .header-content {
45
+ max-width: 1400px;
46
+ margin: 0 auto;
47
+ display: flex;
48
+ justify-content: space-between;
49
+ align-items: center;
50
+ }
51
+
52
+ .logo {
53
+ display: flex;
54
+ align-items: center;
55
+ gap: 1rem;
56
+ font-size: 1.5rem;
57
+ font-weight: bold;
58
+ }
59
+
60
+ .logo i {
61
+ font-size: 2rem;
62
+ color: var(--ferrari-gold);
63
+ animation: pulse 2s infinite;
64
+ }
65
+
66
+ @keyframes pulse {
67
+ 0%, 100% { transform: scale(1); }
68
+ 50% { transform: scale(1.1); }
69
+ }
70
+
71
+ nav ul {
72
+ display: flex;
73
+ list-style: none;
74
+ gap: 2rem;
75
+ }
76
+
77
+ nav a {
78
+ color: var(--text-primary);
79
+ text-decoration: none;
80
+ transition: all 0.3s;
81
+ padding: 0.5rem 1rem;
82
+ border-radius: 25px;
83
+ }
84
+
85
+ nav a:hover {
86
+ background: rgba(255, 255, 255, 0.1);
87
+ transform: translateY(-2px);
88
+ }
89
+
90
+ /* Hero Section */
91
+ .hero {
92
+ margin-top: 80px;
93
+ height: 70vh;
94
+ background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)),
95
+ url('https://picsum.photos/seed/ferrarif1/1920/1080.jpg');
96
+ background-size: cover;
97
+ background-position: center;
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: center;
101
+ position: relative;
102
+ overflow: hidden;
103
+ }
104
+
105
+ .hero::before {
106
+ content: '';
107
+ position: absolute;
108
+ top: 0;
109
+ left: -100%;
110
+ width: 100%;
111
+ height: 100%;
112
+ background: linear-gradient(90deg, transparent, var(--ferrari-red), transparent);
113
+ animation: sweep 3s infinite;
114
+ }
115
+
116
+ @keyframes sweep {
117
+ 0% { left: -100%; }
118
+ 100% { left: 100%; }
119
+ }
120
+
121
+ .hero-content {
122
+ text-align: center;
123
+ z-index: 1;
124
+ animation: fadeInUp 1s;
125
+ }
126
+
127
+ @keyframes fadeInUp {
128
+ from {
129
+ opacity: 0;
130
+ transform: translateY(30px);
131
+ }
132
+ to {
133
+ opacity: 1;
134
+ transform: translateY(0);
135
+ }
136
+ }
137
+
138
+ .hero h1 {
139
+ font-size: 4rem;
140
+ margin-bottom: 1rem;
141
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
142
+ background: linear-gradient(45deg, var(--ferrari-red), var(--ferrari-gold));
143
+ -webkit-background-clip: text;
144
+ -webkit-text-fill-color: transparent;
145
+ background-clip: text;
146
+ }
147
+
148
+ .hero p {
149
+ font-size: 1.5rem;
150
+ color: var(--text-secondary);
151
+ margin-bottom: 2rem;
152
+ }
153
+
154
+ .cta-button {
155
+ background: linear-gradient(45deg, var(--ferrari-red), var(--ferrari-dark));
156
+ color: white;
157
+ padding: 1rem 2rem;
158
+ border: none;
159
+ border-radius: 50px;
160
+ font-size: 1.1rem;
161
+ cursor: pointer;
162
+ transition: all 0.3s;
163
+ box-shadow: 0 4px 15px rgba(220, 20, 60, 0.4);
164
+ }
165
+
166
+ .cta-button:hover {
167
+ transform: translateY(-3px);
168
+ box-shadow: 0 6px 20px rgba(220, 20, 60, 0.6);
169
+ }
170
+
171
+ /* Stats Section */
172
+ .stats-section {
173
+ padding: 4rem 2rem;
174
+ background: linear-gradient(180deg, var(--dark-bg), #1a1a1a);
175
+ }
176
+
177
+ .container {
178
+ max-width: 1400px;
179
+ margin: 0 auto;
180
+ }
181
+
182
+ .section-title {
183
+ text-align: center;
184
+ font-size: 2.5rem;
185
+ margin-bottom: 3rem;
186
+ position: relative;
187
+ }
188
+
189
+ .section-title::after {
190
+ content: '';
191
+ position: absolute;
192
+ bottom: -10px;
193
+ left: 50%;
194
+ transform: translateX(-50%);
195
+ width: 100px;
196
+ height: 3px;
197
+ background: linear-gradient(90deg, var(--ferrari-red), var(--ferrari-gold));
198
+ }
199
+
200
+ .stats-grid {
201
+ display: grid;
202
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
203
+ gap: 2rem;
204
+ margin-bottom: 4rem;
205
+ }
206
+
207
+ .stat-card {
208
+ background: var(--card-bg);
209
+ border: 1px solid rgba(220, 20, 60, 0.3);
210
+ border-radius: 15px;
211
+ padding: 2rem;
212
+ text-align: center;
213
+ transition: all 0.3s;
214
+ backdrop-filter: blur(10px);
215
+ }
216
+
217
+ .stat-card:hover {
218
+ transform: translateY(-5px);
219
+ border-color: var(--ferrari-red);
220
+ box-shadow: 0 10px 30px rgba(220, 20, 60, 0.3);
221
+ }
222
+
223
+ .stat-number {
224
+ font-size: 3rem;
225
+ font-weight: bold;
226
+ background: linear-gradient(45deg, var(--ferrari-red), var(--ferrari-gold));
227
+ -webkit-background-clip: text;
228
+ -webkit-text-fill-color: transparent;
229
+ background-clip: text;
230
+ }
231
+
232
+ .stat-label {
233
+ color: var(--text-secondary);
234
+ margin-top: 0.5rem;
235
+ }
236
+
237
+ /* Timeline */
238
+ .timeline-section {
239
+ padding: 4rem 2rem;
240
+ background: linear-gradient(180deg, #1a1a1a, var(--dark-bg));
241
+ }
242
+
243
+ .timeline {
244
+ position: relative;
245
+ max-width: 1000px;
246
+ margin: 0 auto;
247
+ }
248
+
249
+ .timeline::before {
250
+ content: '';
251
+ position: absolute;
252
+ left: 50%;
253
+ top: 0;
254
+ bottom: 0;
255
+ width: 2px;
256
+ background: linear-gradient(180deg, var(--ferrari-red), var(--ferrari-gold));
257
+ transform: translateX(-50%);
258
+ }
259
+
260
+ .timeline-item {
261
+ position: relative;
262
+ width: 50%;
263
+ padding: 2rem;
264
+ opacity: 0;
265
+ animation: fadeIn 1s forwards;
266
+ }
267
+
268
+ .timeline-item:nth-child(odd) {
269
+ left: 0;
270
+ text-align: right;
271
+ }
272
+
273
+ .timeline-item:nth-child(even) {
274
+ left: 50%;
275
+ }
276
+
277
+ .timeline-content {
278
+ background: var(--card-bg);
279
+ border: 1px solid rgba(220, 20, 60, 0.3);
280
+ border-radius: 10px;
281
+ padding: 1.5rem;
282
+ backdrop-filter: blur(10px);
283
+ transition: all 0.3s;
284
+ }
285
+
286
+ .timeline-content:hover {
287
+ transform: scale(1.05);
288
+ box-shadow: 0 5px 20px rgba(220, 20, 60, 0.4);
289
+ }
290
+
291
+ .timeline-dot {
292
+ position: absolute;
293
+ top: 2rem;
294
+ width: 20px;
295
+ height: 20px;
296
+ background: var(--ferrari-red);
297
+ border: 3px solid var(--ferrari-gold);
298
+ border-radius: 50%;
299
+ box-shadow: 0 0 20px rgba(220, 20, 60, 0.5);
300
+ }
301
+
302
+ .timeline-item:nth-child(odd) .timeline-dot {
303
+ right: -10px;
304
+ }
305
+
306
+ .timeline-item:nth-child(even) .timeline-dot {
307
+ left: -10px;
308
+ }
309
+
310
+ @keyframes fadeIn {
311
+ to {
312
+ opacity: 1;
313
+ }
314
+ }
315
+
316
+ /* Drivers Section */
317
+ .drivers-section {
318
+ padding: 4rem 2rem;
319
+ background: linear-gradient(180deg, var(--dark-bg), #1a1a1a);
320
+ }
321
+
322
+ .drivers-grid {
323
+ display: grid;
324
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
325
+ gap: 2rem;
326
+ }
327
+
328
+ .driver-card {
329
+ background: var(--card-bg);
330
+ border: 1px solid rgba(220, 20, 60, 0.3);
331
+ border-radius: 15px;
332
+ overflow: hidden;
333
+ transition: all 0.3s;
334
+ backdrop-filter: blur(10px);
335
+ }
336
+
337
+ .driver-card:hover {
338
+ transform: translateY(-10px);
339
+ box-shadow: 0 15px 40px rgba(220, 20, 60, 0.4);
340
+ }
341
+
342
+ .driver-image {
343
+ height: 200px;
344
+ background: linear-gradient(135deg, var(--ferrari-red), var(--ferrari-dark));
345
+ display: flex;
346
+ align-items: center;
347
+ justify-content: center;
348
+ font-size: 4rem;
349
+ color: var(--ferrari-gold);
350
+ }
351
+
352
+ .driver-info {
353
+ padding: 1.5rem;
354
+ }
355
+
356
+ .driver-name {
357
+ font-size: 1.5rem;
358
+ margin-bottom: 0.5rem;
359
+ }
360
+
361
+ .driver-stats {
362
+ display: flex;
363
+ justify-content: space-between;
364
+ margin-top: 1rem;
365
+ padding-top: 1rem;
366
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
367
+ }
368
+
369
+ .driver-stat {
370
+ text-align: center;
371
+ }
372
+
373
+ .driver-stat-value {
374
+ font-size: 1.2rem;
375
+ font-weight: bold;
376
+ color: var(--ferrari-red);
377
+ }
378
+
379
+ .driver-stat-label {
380
+ font-size: 0.8rem;
381
+ color: var(--text-secondary);
382
+ }
383
+
384
+ /* Comparison Section */
385
+ .comparison-section {
386
+ padding: 4rem 2rem;
387
+ background: linear-gradient(180deg, #1a1a1a, var(--dark-bg));
388
+ }
389
+
390
+ .comparison-container {
391
+ max-width: 1200px;
392
+ margin: 0 auto;
393
+ }
394
+
395
+ .comparison-tabs {
396
+ display: flex;
397
+ justify-content: center;
398
+ gap: 1rem;
399
+ margin-bottom: 3rem;
400
+ }
401
+
402
+ .tab-button {
403
+ background: var(--card-bg);
404
+ border: 1px solid rgba(220, 20, 60, 0.3);
405
+ color: var(--text-primary);
406
+ padding: 1rem 2rem;
407
+ border-radius: 50px;
408
+ cursor: pointer;
409
+ transition: all 0.3s;
410
+ }
411
+
412
+ .tab-button.active {
413
+ background: linear-gradient(45deg, var(--ferrari-red), var(--ferrari-dark));
414
+ border-color: var(--ferrari-red);
415
+ }
416
+
417
+ .tab-button:hover {
418
+ transform: translateY(-2px);
419
+ }
420
+
421
+ .tab-content {
422
+ display: none;
423
+ animation: fadeInUp 0.5s;
424
+ }
425
+
426
+ .tab-content.active {
427
+ display: block;
428
+ }
429
+
430
+ .comparison-grid {
431
+ display: grid;
432
+ grid-template-columns: 1fr 1fr;
433
+ gap: 2rem;
434
+ }
435
+
436
+ .compare-card {
437
+ background: var(--card-bg);
438
+ border: 1px solid rgba(220, 20, 60, 0.3);
439
+ border-radius: 15px;
440
+ padding: 2rem;
441
+ backdrop-filter: blur(10px);
442
+ }
443
+
444
+ .compare-title {
445
+ font-size: 1.5rem;
446
+ margin-bottom: 1rem;
447
+ color: var(--ferrari-gold);
448
+ }
449
+
450
+ .progress-bar {
451
+ background: rgba(255, 255, 255, 0.1);
452
+ height: 30px;
453
+ border-radius: 15px;
454
+ overflow: hidden;
455
+ margin-bottom: 1rem;
456
+ }
457
+
458
+ .progress-fill {
459
+ height: 100%;
460
+ background: linear-gradient(90deg, var(--ferrari-red), var(--ferrari-gold));
461
+ border-radius: 15px;
462
+ display: flex;
463
+ align-items: center;
464
+ justify-content: flex-end;
465
+ padding-right: 10px;
466
+ color: white;
467
+ font-weight: bold;
468
+ transition: width 1s ease;
469
+ }
470
+
471
+ /* Footer */
472
+ footer {
473
+ background: linear-gradient(90deg, var(--ferrari-dark), var(--ferrari-red));
474
+ padding: 2rem;
475
+ text-align: center;
476
+ }
477
+
478
+ .footer-content {
479
+ max-width: 1200px;
480
+ margin: 0 auto;
481
+ }
482
+
483
+ .social-links {
484
+ display: flex;
485
+ justify-content: center;
486
+ gap: 2rem;
487
+ margin-top: 1rem;
488
+ }
489
+
490
+ .social-links a {
491
+ color: var(--text-primary);
492
+ font-size: 1.5rem;
493
+ transition: all 0.3s;
494
+ }
495
+
496
+ .social-links a:hover {
497
+ color: var(--ferrari-gold);
498
+ transform: translateY(-3px);
499
+ }
500
+
501
+ /* Responsive Design */
502
+ @media (max-width: 768px) {
503
+ .hero h1 {
504
+ font-size: 2.5rem;
505
+ }
506
+
507
+ nav ul {
508
+ flex-direction: column;
509
+ gap: 0.5rem;
510
+ }
511
+
512
+ .timeline::before {
513
+ left: 30px;
514
+ }
515
+
516
+ .timeline-item {
517
+ width: 100%;
518
+ left: 0 !important;
519
+ padding-left: 60px;
520
+ text-align: left !important;
521
+ }
522
+
523
+ .timeline-dot {
524
+ left: 20px !important;
525
+ }
526
+
527
+ .comparison-grid {
528
+ grid-template-columns: 1fr;
529
+ }
530
+
531
+ .drivers-grid {
532
+ grid-template-columns: 1fr;
533
+ }
534
+ }
535
+
536
+ /* Loading Animation */
537
+ .loader {
538
+ position: fixed;
539
+ top: 0;
540
+ left: 0;
541
+ width: 100%;
542
+ height: 100%;
543
+ background: var(--dark-bg);
544
+ display: flex;
545
+ justify-content: center;
546
+ align-items: center;
547
+ z-index: 9999;
548
+ transition: opacity 0.5s;
549
+ }
550
+
551
+ .loader.hidden {
552
+ opacity: 0;
553
+ pointer-events: none;
554
+ }
555
+
556
+ .loader-circle {
557
+ width: 60px;
558
+ height: 60px;
559
+ border: 3px solid transparent;
560
+ border-top-color: var(--ferrari-red);
561
+ border-radius: 50%;
562
+ animation: spin 1s linear infinite;
563
+ }
564
+
565
+ @keyframes spin {
566
+ to { transform: rotate(360deg); }
567
+ }
568
+
569
+ /* Scroll to top button */
570
+ .scroll-top {
571
+ position: fixed;
572
+ bottom: 30px;
573
+ right: 30px;
574
+ background: linear-gradient(45deg, var(--ferrari-red), var(--ferrari-dark));
575
+ color: white;
576
+ width: 50px;
577
+ height: 50px;
578
+ border-radius: 50%;
579
+ display: flex;
580
+ align-items: center;
581
+ justify-content: center;
582
+ cursor: pointer;
583
+ opacity: 0;
584
+ transition: all 0.3s;
585
+ z-index: 999;
586
+ }
587
+
588
+ .scroll-top.visible {
589
+ opacity: 1;
590
+ }
591
+
592
+ .scroll-top:hover {
593
+ transform: translateY(-5px);
594
+ box-shadow: 0 5px 20px rgba(220, 20, 60, 0.5);
595
+ }
596
+ </style>
597
+ </head>
598
+ <body>
599
+ <!-- Loader -->
600
+ <div class="loader" id="loader">
601
+ <div class="loader-circle"></div>
602
+ </div>
603
+
604
+ <!-- Header -->
605
+ <header>
606
+ <div class="header-content">
607
+ <div class="logo">
608
+ <i class="fas fa-flag-checkered"></i>
609
+ <span>Ferrari vs F1</span>
610
+ </div>
611
+ <nav>
612
+ <ul>
613
+ <li><a href="#home">Home</a></li>
614
+ <li><a href="#stats">Statistics</a></li>
615
+ <li><a href="#timeline">Timeline</a></li>
616
+ <li><a href="#drivers">Drivers</a></li>
617
+ <li><a href="#comparison">Comparison</a></li>
618
+ </ul>
619
+ </nav>
620
+ </div>
621
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: white; text-decoration: none; font-size: 0.9rem;">Built with anycoder</a>
622
+ </header>
623
+
624
+ <!-- Hero Section -->
625
+ <section class="hero" id="home">
626
+ <div class="hero-content">
627
+ <h1>The Legend Continues</h1>
628
+ <p>Ferrari: The Heart and Soul of Formula 1</p>
629
+ <button class="cta-button" onclick="scrollToSection('stats')">Explore Legacy</button>
630
+ </div>
631
+ </section>
632
+
633
+ <!-- Stats Section -->
634
+ <section class="stats-section" id="stats">
635
+ <div class="container">
636
+ <h2 class="section-title">Historic Achievements</h2>
637
+ <div class="stats-grid">
638
+ <div class="stat-card">
639
+ <div class="stat-number" data-target="16">0</div>
640
+ <div class="stat-label">Constructors' Championships</div>
641
+ </div>
642
+ <div class="stat-card">
643
+ <div class="stat-number" data-target="15">0</div>
644
+ <div class="stat-label">Drivers' Championships</div>
645
+ </div>
646
+ <div class="stat-card">
647
+ <div class="stat-number" data-target="241">0</div>
648
+ <div class="stat-label">Race Wins</div>
649
+ </div>
650
+ <div class="stat-card">
651
+ <div class="stat-number" data-target="1950">0</div>
652
+ <div class="stat-label">Year Founded</div>
653
+ </div>
654
+ <div class="stat-card">
655
+ <div class="stat-number" data-target="1000">0</div>
656
+ <div class="stat-label">+ Grands Prix</div>
657
+ </div>
658
+ <div class="stat-card">
659
+ <div class="stat-number" data-target="77">0</div>
660
+ <div class="stat-label">Years in F1</div>
661
+ </div>
662
+ </div>
663
+ </div>
664
+ </section>
665
+
666
+ <!-- Timeline Section -->
667
+ <section class="timeline-section" id="timeline">
668
+ <div class="container">
669
+ <h2 class="section-title">Ferrari F1 Journey</h2>
670
+ <div class="timeline">
671
+ <div class="timeline-item">
672
+ <div class="timeline-dot"></div>
673
+ <div class="timeline-content">
674
+ <h3>1950</h3>
675
+ <p>Ferrari enters Formula 1 in its inaugural season</p>
676
+ </div>
677
+ </div>
678
+ <div class="timeline-item">
679
+ <div class="timeline-dot"></div>
680
+ <div class="timeline-content">
681
+ <h3>1952</h3>
682
+ <p>First Drivers' Championship with Alberto Ascari</p>
683
+ </div>
684
+ </div>
685
+ <div class="timeline-item">
686
+ <div class="timeline-dot"></div>
687
+ <div class="timeline-content">
688
+ <h3>1961</h3>
689
+ <p>Phil Hill secures Drivers' Championship</p>
690
+ </div>
691
+ </div>
692
+ <div class="timeline-item">
693
+ <div class="timeline-dot"></div>
694
+ <div class="timeline-content">
695
+ <h3>1975-1977</h3>
696
+ <p>Niki Lauda era - 2 World Championships</p>
697
+ </div>
698
+ </div>
699
+ <div class="timeline-item">
700
+ <div class="timeline-dot"></div>
701
+ <div class="timeline-content">
702
+ <h3>2000-2004</h3>
703
+ <p>Dominant era with Michael Schumacher - 5 consecutive titles</p>
704
+ </div>
705
+ </div>
706
+ <div class="timeline-item">
707
+ <div class="timeline-dot"></div>
708
+ <div class="timeline-content">
709
+ <h3>2023</h3>
710
+ <p>Continuing the legacy with Charles Leclerc & Carlos Sainz</p>
711
+ </div>
712
+ </div>
713
+ </div>
714
+ </div>
715
+ </section>
716
+
717
+ <!-- Drivers Section -->
718
+ <section class="drivers-section" id="drivers">
719
+ <div class="container">
720
+ <h2 class="section-title">Legendary Drivers</h2>
721
+ <div class="drivers-grid">
722
+ <div class="driver-card">
723
+ <div class="driver-image">
724
+ <i class="fas fa-user"></i>
725
+ </div>
726
+ <div class="driver-info">
727
+ <h3 class="driver-name">Michael Schumacher</h3>
728
+ <p>1996-2006, 2010-2012</p>
729
+ <div class="driver-stats">
730
+ <div class="driver-stat">
731
+ <div class="driver-stat-value">72</div>
732
+ <div class="driver-stat-label">Wins</div>
733
+ </div>
734
+ <div class="driver-stat">
735
+ <div class="driver-stat-value">5</div>
736
+ <div class="driver-stat-label">Titles</div>
737
+ </div>
738
+ <div class="driver-stat">
739
+ <div class="driver-stat-value">116</div>
740
+ <div class="driver-stat-label">Podiums</div>
741
+ </div>
742
+ </div>
743
+ </div>
744
+ </div>
745
+ <div class="driver-card">
746
+ <div class="driver-image">
747
+ <i class="fas fa-user"></i>
748
+ </div>
749
+ <div class="driver-info">
750
+ <h3 class="driver-name">Niki Lauda</h3>
751
+ <p>1974-1977</p>
752
+ <div class="driver-stats">
753
+ <div class="driver-stat">
754
+ <div class="driver-stat-value">15</div>
755
+ <div class="driver-stat-label">Wins</div>
756
+ </div>
757
+ <div class="driver-stat">
758
+ <div class="driver-stat-value">2</div>
759
+ <div class="driver-stat-label">Titles</div>
760
+ </div>
761
+ <div class="driver-stat">
762
+ <div class="driver-stat-value">35</div>
763
+ <div class="driver-stat-label">Podiums</div>
764
+ </div>
765
+ </div>
766
+ </div>
767
+ </div>
768
+ <div class="driver-card">
769
+ <div class="driver-image">
770
+ <i class="fas fa-user"></i>
771
+ </div>
772
+ <div class="driver-info">
773
+ <h3 class="driver-name">Alberto Ascari</h3>
774
+ <p>1950-1955</p>
775
+ <div class="driver-stats">
776
+ <div class="driver-stat">
777
+ <div class="driver-stat-value">13</div>
778
+ <div class="driver-stat-label">Wins</div>
779
+ </div>
780
+ <div class="driver-stat">
781
+ <div class="driver-stat-value">2</div>
782
+ <div class="driver-stat-label">Titles</div>
783
+ </div>
784
+ <div class="driver-stat">
785
+ <div class="driver-stat-value">17</div>
786
+ <div class="driver-stat-label">Podiums</div>
787
+ </div>
788
+ </div>
789
+ </div>
790
+ </div>
791
+ </div>
792
+ </div>
793
+ </section>
794
+
795
+ <!-- Comparison Section -->
796
+ <section class="comparison-section" id="comparison">
797
+ <div class="comparison-container">
798
+ <h2 class="section-title">Ferrari vs Other Teams</h2>
799
+ <div class="comparison-tabs">
800
+ <button class="tab-button active" onclick="switchTab('championships')">Championships</button>
801
+ <button class="tab-button" onclick="switchTab('wins')">Race Wins</button>
802
+ <button class="tab-button" onclick="switchTab('history')">Legacy</button>
803
+ </div>
804
+ <div class="tab-content active" id="championships">
805
+ <div class="comparison-grid">
806
+ <div class="compare-card">
807
+ <h3 class="compare-title"><i class="fas fa-trophy"></i> Ferrari</h3>
808
+ <div class="progress-bar">
809
+ <div class="progress-fill" style="width: 100%">16</div>
810
+ </div>
811
+ <p>Most Constructors' Championships</p>
812
+ </div>
813
+ <div class="compare-card">
814
+ <h3 class="compare-title"><i class="fas fa-trophy"></i> McLaren</h3>
815
+ <div class="progress-bar">
816
+ <div class="progress-fill" style="width: 50%">8</div>
817
+ </div>
818
+ <p>8 Constructors' Championships</p>
819
+ </div>
820
+ </div>
821
+ </div>
822
+ <div class="tab-content" id="wins">
823
+ <div class="comparison-grid">
824
+ <div class="compare-card">
825
+ <h3 class="compare-title"><i class="fas fa-flag-checkered"></i> Ferrari</h3>
826
+ <div class="progress-bar">
827
+ <div class="progress-fill" style="width: 100%">241</div>
828
+ </div>
829
+ <p>Most Race Wins in F1 History</p>
830
+ </div>
831
+ <div class="compare-card">
832
+ <h3 class="compare-title"><i class="fas fa-flag-checkered"></i> Mercedes</h3>
833
+ <div class="progress-bar">
834
+ <div class="progress-fill" style="width: 45%">125</div>
835
+ </div>
836
+ <p>125 Race Wins</p>
837
+ </div>
838
+ </div>
839
+ </div>
840
+ <div class="tab-content" id="history">
841
+ <div class="comparison-grid">
842
+ <div class="compare-card">
843
+ <h3 class="compare-title"><i class="fas fa-history"></i> Ferrari</h3>
844
+ <div class="progress-bar">
845
+ <div class="progress-fill" style="width: 100%">77 Years</div>
846
+ </div>
847
+ <p>Oldest and most historic team in F1</p>
848
+ </div>
849
+ <div class="compare-card">
850
+ <h3 class="compare-title"><i class="fas fa-history"></i> Red Bull</h3>
851
+ <div class="progress-bar">
852
+ <div class="progress-fill" style="width: 24%">18 Years</div>
853
+ </div>
854
+ <p>Joined F1 in 2005</p>
855
+ </div>
856
+ </div>
857
+ </div>
858
+ </div>
859
+ </section>
860
+
861
+ <!-- Footer -->
862
+ <footer>
863
+ <div class="footer-content">
864
+ <p>&copy; 2024 Ferrari vs F1. The Prancing Horse Legacy.</p>
865
+ <div class="social-links">
866
+ <a href="#"><i class="fab fa-facebook"></i></a>
867
+ <a href="#"><i class="fab fa-twitter"></i></a>
868
+ <a href="#"><i class="fab fa-instagram"></i></a>
869
+ <a href="#"><i class="fab fa-youtube"></i></a>
870
+ </div>
871
+ </div>
872
+ </footer>
873
+
874
+ <!-- Scroll to top button -->
875
+ <div class="scroll-top" id="scrollTop" onclick="scrollToTop()">
876
+ <i class="fas fa-arrow-up"></i>
877
+ </div>
878
+
879
+ <script>
880
+ // Loader
881
+ window.addEventListener('load', () => {
882
+ setTimeout(() => {
883
+ document.getElementById('loader').classList.add('hidden');
884
+ }, 1000);
885
+ });
886
+
887
+ // Animated counter
888
+ const counters = document.querySelectorAll('.stat-number');
889
+ const speed = 200;
890
+
891
+ const countUp = () => {
892
+ counters.forEach(counter => {
893
+ const target = +counter.getAttribute('data-target');
894
+ const count = +counter.innerText;
895
+ const increment = target / speed;
896
+
897
+ if (count < target) {
898
+ counter.innerText = Math.ceil(count + increment);
899
+ setTimeout(countUp, 10);
900
+ } else {
901
+ counter.innerText = target;
902
+ }
903
+ });
904
+ };
905
+
906
+ // Intersection Observer for stats animation
907
+ const statsSection = document.querySelector('.stats-section');
908
+ const observerOptions = {
909
+ threshold: 0.5
910
+ };
911
+
912
+ const statsObserver = new IntersectionObserver((entries) => {
913
+ entries.forEach(entry => {
914
+ if (entry.isIntersecting) {
915
+ countUp();
916
+ statsObserver.unobserve(entry.target);
917
+ }
918
+ });
919
+ }, observerOptions);
920
+
921
+ statsObserver.observe(statsSection);
922
+
923
+ // Smooth scrolling
924
+ function scrollToSection(sectionId) {
925
+ const section = document.getElementById(sectionId);
926
+ section.scrollIntoView({ behavior: 'smooth' });
927
+ }
928
+
929
+ // Tab switching
930
+ function switchTab(tabName) {
931
+ const tabs = document.querySelectorAll('.tab-button');
932
+ const contents = document.querySelectorAll('.tab-content');
933
+
934
+ tabs.forEach(tab => tab.classList.remove('active'));
935
+ contents.forEach(content => content.classList.remove('active'));
936
+
937
+ event.target.classList.add('active');
938
+ document.getElementById(tabName).classList.add('active');
939
+
940
+ // Animate progress bars
941
+ const progressBars = document.querySelectorAll('#' + tabName + ' .progress-fill');
942
+ progressBars.forEach(bar => {
943
+ const width = bar.style.width;
944
+ bar.style.width = '0';
945
+ setTimeout(() => {
946
+ bar.style.width = width;
947
+ }, 100);
948
+ });
949
+ }
950
+
951
+ // Scroll to top
952
+ const scrollTopBtn = document.getElementById('scrollTop');
953
+
954
+ window.addEventListener('scroll', () => {
955
+ if (window.pageYOffset > 300) {
956
+ scrollTopBtn.classList.add('visible');
957
+ } else {
958
+ scrollTopBtn.classList.remove('visible');
959
+ }
960
+ });
961
+
962
+ function scrollToTop() {
963
+ window.scrollTo({ top: 0, behavior: 'smooth' });
964
+ }
965
+
966
+ // Timeline animation on scroll
967
+ const timelineItems = document.querySelectorAll('.timeline-item');
968
+ const timelineObserver = new IntersectionObserver((entries) => {
969
+ entries.forEach(entry => {
970
+ if (entry.isIntersecting) {
971
+ entry.target.style.animationDelay = '0.2s';
972
+ entry.target.style.animationPlayState = 'running';
973
+ }
974
+ });
975
+ }, { threshold: 0.1 });
976
+
977
+ timelineItems.forEach(item => {
978
+ item.style.animationPlayState = 'paused';
979
+ timelineObserver.observe(item);
980
+ });
981
+
982
+ // Add parallax effect to hero section
983
+ window.addEventListener('scroll', () => {
984
+ const scrolled = window.pageYOffset;
985
+ const hero = document.querySelector('.hero');
986
+ hero.style.transform = `translateY(${scrolled * 0.5}px)`;
987
+ });
988
+
989
+ // Dynamic year update
990
+ const currentYear = new Date().getFullYear();
991
+ const yearsInF1 = currentYear - 1950;
992
+ document.querySelector('[data-target="77"]').setAttribute('data-target', yearsInF1);
993
+ </script>
994
+ </body>
995
+ </html>