Hugging Face's logo

Spaces:
Wavetype
/
anycoder-c3c7d790
Running

App Files Community
Wavetype commited on
Commit
fdeec57
·
verified ·
1 Parent(s): d2e9f76

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1374 -1092
index.html CHANGED
@@ -1,1118 +1,1400 @@
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>GODS RODS - FANTASY RALLY</title>
7
- <link rel="preconnect" href="https://fonts.googleapis.com">
8
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;500;700&display=swap" rel="stylesheet">
10
- <style>
11
- :root {
12
- --neon-cyan: #00ffff;
13
- --neon-purple: #a855f7;
14
- --neon-pink: #ff00ff;
15
- --dark-bg: #050505;
16
- --dark-overlay: rgba(5, 5, 5, 0.92);
17
- --card-bg: #0a0a0a;
18
- --border-glow-cyan: 0 0 10px rgba(0, 255, 255, 0.5);
19
- --border-glow-purple: 0 0 10px rgba(168, 85, 247, 0.5);
20
- }
21
-
22
- * {
23
- margin: 0;
24
- padding: 0;
25
- box-sizing: border-box;
26
- }
27
-
28
- body {
29
- font-family: 'Rajdhani', sans-serif;
30
- color: #e0e0e0;
31
- background: var(--dark-bg);
32
- min-height: 100vh;
33
- overflow-x: hidden;
34
- }
35
-
36
- /* Custom Scrollbar */
37
- ::-webkit-scrollbar {
38
- width: 6px;
39
- }
40
- ::-webkit-scrollbar-track {
41
- background: #111;
42
- }
43
- ::-webkit-scrollbar-thumb {
44
- background: var(--neon-cyan);
45
- border-radius: 3px;
46
- }
47
-
48
- /* Header */
49
- .main-header {
50
- background: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 100%);
51
- border-bottom: 2px solid var(--neon-cyan);
52
- padding: 15px 30px;
53
- display: flex;
54
- justify-content: space-between;
55
- align-items: center;
56
- position: sticky;
57
- top: 0;
58
- z-index: 1000;
59
- backdrop-filter: blur(10px);
60
- }
61
-
62
- .logo-section {
63
- display: flex;
64
- align-items: center;
65
- gap: 15px;
66
- }
67
-
68
- .logo-icon {
69
- width: 40px;
70
- height: 40px;
71
- border: 2px solid var(--neon-cyan);
72
- border-radius: 50%;
73
- display: flex;
74
- align-items: center;
75
- justify-content: center;
76
- font-size: 1.2rem;
77
- animation: logoSpin 10s linear infinite;
78
- }
79
-
80
- @keyframes logoSpin {
81
- from { transform: rotate(0deg); }
82
- to { transform: rotate(360deg); }
83
- }
84
-
85
- .header-title {
86
- font-family: 'Orbitron', sans-serif;
87
- font-size: 1.2rem;
88
- color: var(--neon-cyan);
89
- text-shadow: var(--border-glow-cyan);
90
- letter-spacing: 3px;
91
- }
92
-
93
- .anycoder-link {
94
- font-family: 'Orbitron', sans-serif;
95
- font-size: 0.75rem;
96
- color: var(--neon-purple);
97
- text-decoration: none;
98
- padding: 8px 15px;
99
- border: 1px solid var(--neon-purple);
100
- border-radius: 4px;
101
- transition: all 0.3s ease;
102
- text-transform: uppercase;
103
- letter-spacing: 1px;
104
- }
105
-
106
- .anycoder-link:hover {
107
- background: var(--neon-purple);
108
- color: #000;
109
- box-shadow: var(--border-glow-purple);
110
- }
111
-
112
- /* Navigation */
113
- .main-nav {
114
- background: rgba(0,0,0,0.95);
115
- padding: 12px 20px;
116
- display: flex;
117
- justify-content: center;
118
- flex-wrap: wrap;
119
- gap: 8px;
120
- border-bottom: 1px solid #222;
121
- }
122
-
123
- .nav-btn {
124
- font-family: 'Orbitron', sans-serif;
125
- background: transparent;
126
- color: #888;
127
- border: 1px solid transparent;
128
- padding: 8px 16px;
129
- font-size: 0.7rem;
130
- cursor: pointer;
131
- transition: all 0.3s ease;
132
- letter-spacing: 2px;
133
- text-transform: uppercase;
134
- position: relative;
135
- overflow: hidden;
136
- }
137
-
138
- .nav-btn::before {
139
- content: '';
140
- position: absolute;
141
- top: 0;
142
- left: -100%;
143
- width: 100%;
144
- height: 100%;
145
- background: linear-gradient(90deg, transparent, rgba(0,255,255,0.1), transparent);
146
- transition: left 0.5s ease;
147
- }
148
-
149
- .nav-btn:hover::before {
150
- left: 100%;
151
- }
152
-
153
- .nav-btn:hover, .nav-btn.active {
154
- color: var(--neon-cyan);
155
- border-color: var(--neon-cyan);
156
- text-shadow: var(--border-glow-cyan);
157
- }
158
-
159
- /* Main Container */
160
- #app {
161
- min-height: calc(100vh - 120px);
162
- position: relative;
163
- }
164
-
165
- /* Global Background */
166
- .global-bg {
167
- position: fixed;
168
- top: 0;
169
- left: 0;
170
- width: 100%;
171
- height: 100%;
172
- background:
173
- linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
174
- url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1920&q=80');
175
- background-size: cover;
176
- background-position: center;
177
- background-attachment: fixed;
178
- z-index: -1;
179
- }
180
-
181
- /* Page Container */
182
- .page {
183
- display: none;
184
- min-height: calc(100vh - 120px);
185
- padding: 40px 20px;
186
- animation: fadeIn 0.5s ease;
187
- }
188
-
189
- .page.active {
190
- display: block;
191
- }
192
-
193
- @keyframes fadeIn {
194
- from { opacity: 0; transform: translateY(20px); }
195
- to { opacity: 1; transform: translateY(0); }
196
- }
197
-
198
- /* Landing Page */
199
- .landing-page {
200
- display: flex;
201
- height: calc(100vh - 120px);
202
- position: relative;
203
- }
204
-
205
- .landing-page.active {
206
- display: flex;
207
- }
208
-
209
- .landing-half {
210
- flex: 1;
211
- display: flex;
212
- flex-direction: column;
213
- align-items: center;
214
- justify-content: center;
215
- cursor: pointer;
216
- transition: all 0.5s ease;
217
- position: relative;
218
- overflow: hidden;
219
- }
220
-
221
- .landing-half::before {
222
- content: '';
223
- position: absolute;
224
- top: 0;
225
- left: 0;
226
- width: 100%;
227
- height: 100%;
228
- background: linear-gradient(45deg, rgba(0,0,0,0.8), rgba(0,0,0,0.4));
229
- z-index: 1;
230
- }
231
-
232
- .left-side {
233
- background: url('https://images.unsplash.com/photo-1603584173870-7f23fdae1b7a?w=1920&q=80');
234
- background-size: cover;
235
- background-position: center;
236
- border-right: 3px solid var(--neon-cyan);
237
- }
238
-
239
- .right-side {
240
- background: url('https://images.unsplash.com/photo-1533106958155-d2d7069fbd94?w=1920&q=80');
241
- background-size: cover;
242
- background-position: center;
243
- }
244
-
245
- .landing-half:hover {
246
- filter: brightness(1.3);
247
- }
248
-
249
- .landing-half:hover .landing-content {
250
- transform: scale(1.1);
251
- }
252
-
253
- .landing-content {
254
- position: relative;
255
- z-index: 2;
256
- text-align: center;
257
- transition: transform 0.5s ease;
258
- }
259
-
260
- .landing-content h1 {
261
- font-family: 'Orbitron', sans-serif;
262
- font-size: clamp(2rem, 5vw, 4rem);
263
- letter-spacing: 5px;
264
- margin-bottom: 20px;
265
- }
266
-
267
- .neon-text-cyan {
268
- color: var(--neon-cyan);
269
- text-shadow: 0 0 20px var(--neon-cyan), 0 0 40px var(--neon-cyan);
270
- }
271
-
272
- .neon-text-purple {
273
- color: var(--neon-purple);
274
- text-shadow: 0 0 20px var(--neon-purple), 0 0 40px var(--neon-purple);
275
- }
276
-
277
- .landing-content p {
278
- font-family: 'Orbitron', sans-serif;
279
- font-size: 1rem;
280
- letter-spacing: 3px;
281
- opacity: 0.8;
282
- }
283
-
284
- /* Content Wrapper */
285
- .content-wrapper {
286
- max-width: 1400px;
287
- margin: 0 auto;
288
- text-align: center;
289
- }
290
-
291
- .page-title {
292
- font-family: 'Orbitron', sans-serif;
293
- font-size: clamp(1.5rem, 3vw, 2.5rem);
294
- letter-spacing: 4px;
295
- margin-bottom: 40px;
296
- padding: 20px;
297
- border: 1px solid;
298
- border-image: linear-gradient(90deg, transparent, currentColor, transparent) 1;
299
- }
300
-
301
- .center-content {
302
- display: flex;
303
- flex-direction: column;
304
- align-items: center;
305
- justify-content: center;
306
- min-height: 50vh;
307
- gap: 20px;
308
- }
309
-
310
- /* Buttons */
311
- .action-btn {
312
- font-family: 'Orbitron', sans-serif;
313
- padding: 15px 40px;
314
- border: none;
315
- cursor: pointer;
316
- font-weight: bold;
317
- transition: all 0.3s ease;
318
- margin: 10px;
319
- letter-spacing: 2px;
320
- text-transform: uppercase;
321
- position: relative;
322
- overflow: hidden;
323
- }
324
-
325
- .action-btn::before {
326
- content: '';
327
- position: absolute;
328
- top: 50%;
329
- left: 50%;
330
- width: 0;
331
- height: 0;
332
- background: rgba(255,255,255,0.2);
333
- border-radius: 50%;
334
- transform: translate(-50%, -50%);
335
- transition: width 0.6s, height 0.6s;
336
- }
337
-
338
- .action-btn:hover::before {
339
- width: 300px;
340
- height: 300px;
341
- }
342
-
343
- .cyan-btn {
344
- background: var(--neon-cyan);
345
- color: #000;
346
- }
347
-
348
- .cyan-btn:hover {
349
- box-shadow: 0 0 30px var(--neon-cyan);
350
- transform: translateY(-3px);
351
- }
352
-
353
- .purple-btn {
354
- background: linear-gradient(135deg, var(--neon-purple), #7c3aed);
355
- color: #fff;
356
- }
357
-
358
- .purple-btn:hover {
359
- box-shadow: 0 0 30px var(--neon-purple);
360
- transform: translateY(-3px);
361
- }
362
-
363
- .pulse-button {
364
- animation: pulse 2s infinite;
365
- }
366
-
367
- @keyframes pulse {
368
- 0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.7); }
369
- 70% { box-shadow: 0 0 0 20px rgba(168, 85, 247, 0); }
370
- 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
371
- }
372
-
373
- /* Garage Grid */
374
- .garage-grid {
375
- display: grid;
376
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
377
- gap: 25px;
378
- margin-top: 40px;
379
- }
380
-
381
- .gr-block {
382
- background: var(--card-bg);
383
- border: 1px solid #333;
384
- border-radius: 8px;
385
- overflow: hidden;
386
- transition: all 0.3s ease;
387
- position: relative;
388
- }
389
-
390
- .gr-block::before {
391
- content: '';
392
- position: absolute;
393
- top: 0;
394
- left: 0;
395
- width: 100%;
396
- height: 3px;
397
- background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple));
398
- transform: scaleX(0);
399
- transform-origin: left;
400
- transition: transform 0.3s ease;
401
- }
402
-
403
- .gr-block:hover::before {
404
- transform: scaleX(1);
405
- }
406
-
407
- .gr-block:hover {
408
- transform: translateY(-5px);
409
- border-color: var(--neon-cyan);
410
- box-shadow: 0 10px 40px rgba(0, 255, 255, 0.2);
411
- }
412
-
413
- .car-img {
414
- width: 100%;
415
- height: 200px;
416
- object-fit: cover;
417
- background: #111;
418
- }
419
-
420
- .car-info {
421
- padding: 15px;
422
- border-top: 1px solid #333;
423
- font-family: 'Orbitron', sans-serif;
424
- font-size: 0.85rem;
425
- color: var(--neon-cyan);
426
- letter-spacing: 1px;
427
- }
428
-
429
- /* Empty State */
430
- .empty-state {
431
- padding: 60px 20px;
432
- text-align: center;
433
- }
434
-
435
- .empty-state p {
436
- font-family: 'Orbitron', sans-serif;
437
- color: #666;
438
- margin-bottom: 30px;
439
- font-size: 0.9rem;
440
- letter-spacing: 2px;
441
- }
442
-
443
- /* Race Track */
444
- .race-track-container {
445
- max-width: 1000px;
446
- margin: 0 auto;
447
- }
448
-
449
- .race-status {
450
- font-family: 'Orbitron', sans-serif;
451
- font-size: 1.5rem;
452
- margin-bottom: 30px;
453
- padding: 15px 30px;
454
- border: 2px solid var(--neon-purple);
455
- display: inline-block;
456
- }
457
-
458
- .race-track {
459
- background: rgba(0,0,0,0.6);
460
- padding: 30px;
461
- border: 2px solid var(--neon-purple);
462
- border-radius: 10px;
463
- margin: 30px 0;
464
- position: relative;
465
- overflow: hidden;
466
- }
467
-
468
- .race-track::before {
469
- content: '';
470
- position: absolute;
471
- top: 0;
472
- left: 0;
473
- width: 100%;
474
- height: 100%;
475
- background: repeating-linear-gradient(
476
- 90deg,
477
- transparent,
478
- transparent 49px,
479
- rgba(255,255,255,0.1) 50px
480
- );
481
- }
482
-
483
- .race-lane {
484
- height: 70px;
485
- border-bottom: 1px solid #222;
486
- position: relative;
487
- display: flex;
488
- align-items: center;
489
- }
490
-
491
- .race-lane:last-child {
492
- border-bottom: none;
493
- }
494
-
495
- .lane-number {
496
- position: absolute;
497
- left: 10px;
498
- font-family: 'Orbitron', sans-serif;
499
- color: #444;
500
- font-size: 0.8rem;
501
- }
502
-
503
- .finish-line {
504
- position: absolute;
505
- right: 50px;
506
- top: 0;
507
- height: 100%;
508
- width: 20px;
509
- background: repeating-linear-gradient(
510
- 0deg,
511
- #fff 0px,
512
- #fff 10px,
513
- #000 10px,
514
- #000 20px
515
- );
516
- opacity: 0.5;
517
- }
518
-
519
- .car-sprite {
520
- position: absolute;
521
- font-size: 2.5rem;
522
- transition: left 0.1s linear;
523
- filter: drop-shadow(0 0 15px var(--neon-purple));
524
- z-index: 2;
525
- }
526
-
527
- .race-controls {
528
- margin: 30px 0;
529
- }
530
-
531
- /* Race Footer */
532
- .race-footer {
533
- position: fixed;
534
- bottom: 0;
535
- left: 0;
536
- width: 100%;
537
- background: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.98));
538
- border-top: 2px solid var(--neon-purple);
539
- padding: 20px 0;
540
- z-index: 100;
541
- }
542
-
543
- .footer-tabs {
544
- display: flex;
545
- justify-content: center;
546
- flex-wrap: wrap;
547
- gap: 30px;
548
- font-family: 'Orbitron', sans-serif;
549
- font-size: 0.7rem;
550
- letter-spacing: 2px;
551
- }
552
-
553
- .footer-tabs span {
554
- color: var(--neon-purple);
555
- cursor: pointer;
556
- padding: 10px 15px;
557
- border: 1px solid transparent;
558
- transition: all 0.3s ease;
559
- }
560
-
561
- .footer-tabs span:hover {
562
- color: #fff;
563
- border-color: var(--neon-purple);
564
- text-shadow: var(--border-glow-purple);
565
- }
566
-
567
- /* Placeholder Box */
568
- .placeholder-box {
569
- padding: 80px 50px;
570
- border: 2px dashed #333;
571
- color: #555;
572
- font-family: 'Orbitron', sans-serif;
573
- letter-spacing: 3px;
574
- font-size: 1rem;
575
- background: rgba(0,0,0,0.5);
576
- position: relative;
577
- }
578
-
579
- .placeholder-box::after {
580
- content: '';
581
- position: absolute;
582
- top: -1px;
583
- left: -1px;
584
- right: -1px;
585
- bottom: -1px;
586
- border: 2px solid var(--neon-cyan);
587
- opacity: 0;
588
- transition: opacity 0.3s ease;
589
- }
590
-
591
- .placeholder-box:hover::after {
592
- opacity: 1;
593
- }
594
-
595
- /* Input */
596
- .dark-input {
597
- background: #111;
598
- border: 2px solid var(--neon-cyan);
599
- color: white;
600
- padding: 18px 30px;
601
- width: 100%;
602
- max-width: 400px;
603
- text-align: center;
604
- font-family: 'Orbitron', sans-serif;
605
- font-size: 0.9rem;
606
- letter-spacing: 2px;
607
- transition: all 0.3s ease;
608
- }
609
-
610
- .dark-input:focus {
611
- outline: none;
612
- box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
613
- }
614
-
615
- .dark-input::placeholder {
616
- color: #555;
617
- }
618
-
619
- /* Loading Animation */
620
- .loading-dots::after {
621
- content: '';
622
- animation: dots 1.5s infinite;
623
- }
624
-
625
- @keyframes dots {
626
- 0%, 20% { content: '.'; }
627
- 40% { content: '..'; }
628
- 60%, 100% { content: '...'; }
629
- }
630
-
631
- /* Responsive */
632
- @media (max-width: 768px) {
633
- .main-header {
634
- flex-direction: column;
635
- gap: 15px;
636
- padding: 15px;
637
- }
638
-
639
- .main-nav {
640
- gap: 5px;
641
- padding: 10px;
642
- }
643
-
644
- .nav-btn {
645
- padding: 6px 10px;
646
- font-size: 0.6rem;
647
- }
648
-
649
- .landing-page {
650
- flex-direction: column;
651
- height: auto;
652
- }
653
-
654
- .landing-half {
655
- height: 50vh;
656
- border-right: none;
657
- border-bottom: 3px solid;
658
- }
659
-
660
- .left-side {
661
- border-bottom-color: var(--neon-cyan);
662
- }
663
-
664
- .right-side {
665
- border-bottom: none;
666
- }
667
-
668
- .footer-tabs {
669
- gap: 15px;
670
- font-size: 0.6rem;
671
- }
672
-
673
- .footer-tabs span {
674
- padding: 5px 8px;
675
- }
676
-
677
- .race-track {
678
- padding: 15px;
679
- }
680
-
681
- .race-lane {
682
- height: 50px;
683
- }
684
-
685
- .car-sprite {
686
- font-size: 1.8rem;
687
- }
688
-
689
- .garage-grid {
690
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
691
- gap: 15px;
692
- }
693
- }
694
-
695
- /* Scanline Effect */
696
- .scanlines {
697
- position: fixed;
698
- top: 0;
699
- left: 0;
700
- width: 100%;
701
- height: 100%;
702
- pointer-events: none;
703
- z-index: 9999;
704
- background: repeating-linear-gradient(
705
- 0deg,
706
- rgba(0,0,0,0.1),
707
- rgba(0,0,0,0.1) 1px,
708
- transparent 1px,
709
- transparent 2px
710
- );
711
- opacity: 0.3;
712
- }
713
-
714
- /* Glitch Effect on Title */
715
- .glitch {
716
- position: relative;
717
- }
718
-
719
- .glitch::before,
720
- .glitch::after {
721
- content: attr(data-text);
722
- position: absolute;
723
- top: 0;
724
- left: 0;
725
- width: 100%;
726
- height: 100%;
727
- }
728
 
729
- .glitch::before {
730
- animation: glitch-1 2s infinite linear alternate-reverse;
731
- clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
732
- color: var(--neon-cyan);
733
- opacity: 0.8;
734
- }
735
-
736
- .glitch::after {
737
- animation: glitch-2 3s infinite linear alternate-reverse;
738
- clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
739
- color: var(--neon-purple);
740
- opacity: 0.8;
741
- }
742
-
743
- @keyframes glitch-1 {
744
- 0% { transform: translate(0); }
745
- 20% { transform: translate(-3px, 3px); }
746
- 40% { transform: translate(-3px, -3px); }
747
- 60% { transform: translate(3px, 3px); }
748
- 80% { transform: translate(3px, -3px); }
749
- 100% { transform: translate(0); }
750
- }
751
-
752
- @keyframes glitch-2 {
753
- 0% { transform: translate(0); }
754
- 20% { transform: translate(3px, -3px); }
755
- 40% { transform: translate(3px, 3px); }
756
- 60% { transform: translate(-3px, -3px); }
757
- 80% { transform: translate(-3px, 3px); }
758
- 100% { transform: translate(0); }
759
- }
760
-
761
- /* Pre-builds Grid */
762
- .prebuilds-grid {
763
- display: grid;
764
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
765
- gap: 20px;
766
- margin-top: 30px;
767
- width: 100%;
768
- max-width: 1000px;
769
- }
770
-
771
- .prebuild-card {
772
- background: var(--card-bg);
773
- border: 1px solid #333;
774
- padding: 20px;
775
- transition: all 0.3s ease;
776
- cursor: pointer;
777
- }
778
-
779
- .prebuild-card:hover {
780
- border-color: var(--neon-cyan);
781
- box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
782
- }
783
-
784
- .prebuild-card h3 {
785
- font-family: 'Orbitron', sans-serif;
786
- color: var(--neon-cyan);
787
- margin-bottom: 10px;
788
- }
789
-
790
- .prebuild-card p {
791
- color: #666;
792
- font-size: 0.85rem;
793
- }
794
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
795
  </head>
796
- <body>
797
- <div class="global-bg"></div>
798
- <div class="scanlines"></div>
799
 
800
- <header class="main-header">
801
- <div class="logo-section">
802
- <div class="logo-icon">⚡</div>
803
- <span class="header-title">GODS RODS</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
804
  </div>
805
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a>
806
- </header>
807
-
808
- <nav class="main-nav">
809
- <button class="nav-btn active" data-page="landing">HOME</button>
810
- <button class="nav-btn" data-page="garage">GARAGE</button>
811
- <button class="nav-btn" data-page="race">NO-LIMIT-RACE</button>
812
- <button class="nav-btn" data-page="rim-designer">RIM DESIGNER</button>
813
- <button class="nav-btn" data-page="rim-forge">RIM FORGE</button>
814
- <button class="nav-btn" data-page="batch-seed">BATCH SEED</button>
815
- <button class="nav-btn" data-page="garage-3d">3D GARAGE</button>
816
- <button class="nav-btn" data-page="objects-3d">3D OBJECTS</button>
817
- </nav>
818
-
819
- <div id="app">
820
- <!-- Landing Page -->
821
- <div id="landing" class="page landing-page active">
822
- <div class="landing-half left-side" onclick="navigateTo('garage')">
823
- <div class="landing-content">
824
- <h1 class="neon-text-cyan">GODS RODS</h1>
825
- <p>VIEW GARAGE</p>
826
- </div>
827
- </div>
828
- <div class="landing-half right-side" onclick="navigateTo('race')">
829
- <div class="landing-content">
830
- <h1 class="neon-text-purple">FANTASY RALLY</h1>
831
- <p>ENTER THE RACE</p>
832
- </div>
833
- </div>
834
  </div>
 
 
835
 
836
- <!-- Garage Page -->
837
- <div id="garage" class="page">
838
- <div class="content-wrapper">
839
- <h2 class="page-title neon-text-cyan">GARAGE PROTOCOL</h2>
840
- <div class="empty-state" id="garage-empty">
841
- <p class="font-orb">3D MODULE OFFLINE - INITIALIZING NEW STORAGE</p>
842
- <button onclick="generateCar()" class="action-btn cyan-btn">GENERATE UNIT</button>
843
- </div>
844
- <div class="garage-grid" id="garage-grid"></div>
845
- </div>
 
 
 
 
846
  </div>
847
 
848
- <!-- Race Page -->
849
- <div id="race" class="page">
850
- <div class="content-wrapper">
851
- <div class="race-track-container">
852
- <h2 class="page-title neon-text-purple" id="race-status">NO LIMIT RACE</h2>
853
- <div class="race-track">
854
- <div class="finish-line"></div>
855
- <div class="race-lane"><span class="lane-number">01</span><div class="car-sprite" id="car-0" style="left: 0%">🏎️</div></div>
856
- <div class="race-lane"><span class="lane-number">02</span><div class="car-sprite" id="car-1" style="left: 0%">🏎️</div></div>
857
- <div class="race-lane"><span class="lane-number">03</span><div class="car-sprite" id="car-2" style="left: 0%">🏎️</div></div>
858
- <div class="race-lane"><span class="lane-number">04</span><div class="car-sprite" id="car-3" style="left: 0%">🏎️</div></div>
859
- </div>
860
- <div class="race-controls">
861
- <button onclick="startRace()" id="race-btn" class="action-btn purple-btn pulse-button">INITIALIZE RACE</button>
862
- </div>
863
- </div>
864
- </div>
865
- <footer class="race-footer">
866
- <div class="footer-tabs">
867
- <span>LEADERBOARD</span>
868
- <span>BETTING</span>
869
- <span>UPGRADES</span>
870
- <span>SPONSORS</span>
871
- <span>REPLAYS</span>
872
- </div>
873
- </footer>
874
  </div>
 
 
 
875
 
876
- <!-- Rim Designer -->
877
- <div id="rim-designer" class="page">
878
- <div class="content-wrapper center-content">
879
- <h2 class="page-title neon-text-cyan">RIM DESIGNER</h2>
880
- <div class="placeholder-box">SYSTEM INITIALIZING...</div>
 
 
 
 
881
  </div>
882
- </div>
883
-
884
- <!-- Rim Forge -->
885
- <div id="rim-forge" class="page">
886
- <div class="content-wrapper center-content">
887
- <h2 class="page-title neon-text-purple">RIM FORGE</h2>
888
- <div class="placeholder-box">FORGE OFFLINE</div>
889
  </div>
890
- </div>
891
-
892
- <!-- Batch Seed -->
893
- <div id="batch-seed" class="page">
894
- <div class="content-wrapper center-content">
895
- <h2 class="page-title">BATCH SEEDER</h2>
896
- <input type="text" placeholder="ENTER SEED MASK..." class="dark-input">
897
  </div>
898
- </div>
899
-
900
- <!-- 3D Garage -->
901
- <div id="garage-3d" class="page">
902
- <div class="content-wrapper center-content">
903
- <h2 class="page-title neon-text-cyan">3D GARAGE</h2>
904
- <div class="placeholder-box">3D RENDER ENGINE DISCONNECTED</div>
905
  </div>
 
 
 
 
906
  </div>
907
-
908
- <!-- 3D Objects -->
909
- <div id="objects-3d" class="page">
910
- <div class="content-wrapper">
911
- <h2 class="page-title">ASSET LIBRARY</h2>
912
- <div class="center-content" style="margin-top: 50px;">
913
- <button class="action-btn cyan-btn" style="font-size: 1.5rem; padding: 25px 50px;" onclick="showPrebuilds()">PRE-BUILDS</button>
914
- <p style="margin-top: 30px; font-family: 'Orbitron', sans-serif; color: #666;">ACCESSING 3D MODELS<span class="loading-dots"></span></p>
915
- </div>
916
- <div class="prebuilds-grid" id="prebuilds-grid" style="display: none;"></div>
917
- </div>
918
  </div>
 
919
  </div>
920
 
921
- <script>
922
- // Session ID
923
- const USER_SESSION_ID = "SESSION_" + Math.random().toString(36).substr(2, 9);
924
-
925
- // State
926
- let garage = [];
927
- let racing = false;
928
- let carPositions = [0, 0, 0, 0];
929
- let raceInterval = null;
930
-
931
- // Navigation
932
- function navigateTo(pageId) {
933
- // Hide all pages
934
- document.querySelectorAll('.page').forEach(page => {
935
- page.classList.remove('active');
936
- });
937
-
938
- // Show selected page
939
- document.getElementById(pageId).classList.add('active');
940
-
941
- // Update nav buttons
942
- document.querySelectorAll('.nav-btn').forEach(btn => {
943
- btn.classList.remove('active');
944
- if (btn.dataset.page === pageId) {
945
- btn.classList.add('active');
946
- }
947
- });
948
-
949
- // Fetch garage if navigating to garage
950
- if (pageId === 'garage') {
951
- fetchGarage();
952
- }
953
- }
954
-
955
- // Nav button listeners
956
- document.querySelectorAll('.nav-btn').forEach(btn => {
957
- btn.addEventListener('click', () => {
958
- navigateTo(btn.dataset.page);
959
- });
960
- });
961
-
962
- // Garage Functions
963
- async function fetchGarage() {
964
- try {
965
- const res = await fetch(`/api/get_garage/${USER_SESSION_ID}`);
966
- if (res.ok) {
967
- const data = await res.json();
968
- garage = Array.isArray(data) ? data.reverse() : [];
969
- renderGarage();
970
- }
971
- } catch (e) {
972
- console.error("Garage Error:", e);
973
- // Demo mode - show some cars
974
- garage = [
975
- { id: 1, car_data: 'CYBER-X7' },
976
- { id: 2, car_data: 'NEON-STORM' },
977
- { id: 3, car_data: 'PHANTOM-GT' }
978
- ];
979
- renderGarage();
980
- }
981
- }
982
-
983
- function renderGarage() {
984
- const grid = document.getElementById('garage-grid');
985
- const empty = document.getElementById('garage-empty');
986
-
987
- if (garage.length === 0) {
988
- empty.style.display = 'block';
989
- grid.innerHTML = '';
990
- return;
991
- }
992
-
993
- empty.style.display = 'none';
994
- grid.innerHTML = garage.map(car => `
995
- <div class="gr-block">
996
- <img src="https://image.pollinations.ai/prompt/cyberpunk%20car%20${car.car_data}?seed=${car.id}&width=400&height=300&nologo=true"
997
- class="car-img"
998
- onerror="this.src='https://images.unsplash.com/photo-1617788138017-80ad40651399?w=400&h=300&fit=crop'"
999
- alt="${car.car_data}">
1000
- <div class="car-info">${car.car_data}</div>
1001
- </div>
1002
- `).join('');
1003
- }
1004
 
1005
- async function generateCar() {
1006
- const btn = document.querySelector('#garage-empty .action-btn');
1007
- const originalText = btn.textContent;
1008
- btn.textContent = 'GENERATING...';
1009
- btn.disabled = true;
1010
-
1011
- const seed = Math.floor(Math.random() * 1000000);
1012
- const newCarID = `UNIT-${seed.toString(16).toUpperCase()}`;
1013
-
1014
- try {
1015
- const res = await fetch('/api/add_car', {
1016
- method: 'POST',
1017
- headers: { 'Content-Type': 'application/json' },
1018
- body: JSON.stringify({ user_id: USER_SESSION_ID, car_data: newCarID })
1019
- });
1020
- if (res.ok) await fetchGarage();
1021
- } catch (e) {
1022
- console.error("Gen Error:", e);
1023
- // Demo mode
1024
- garage.unshift({ id: Date.now(), car_data: newCarID });
1025
- renderGarage();
1026
- }
1027
-
1028
- btn.textContent = originalText;
1029
- btn.disabled = false;
1030
- }
1031
 
1032
- // Race Functions
1033
- function startRace() {
1034
- if (racing) return;
1035
-
1036
- racing = true;
1037
- document.getElementById('race-status').textContent = 'RACING...';
1038
- document.getElementById('race-status').classList.add('neon-text-purple');
1039
- document.getElementById('race-btn').classList.remove('pulse-button');
1040
- document.getElementById('race-btn').textContent = 'RACING IN PROGRESS';
1041
- document.getElementById('race-btn').disabled = true;
1042
-
1043
- carPositions = [0, 0, 0, 0];
1044
-
1045
- raceInterval = setInterval(() => {
1046
- let winner = -1;
1047
-
1048
- carPositions = carPositions.map((pos, i) => {
1049
- if (winner !== -1) return pos;
1050
- const move = Math.random() * 4;
1051
- const nextPos = pos + move;
1052
- if (nextPos >= 92) winner = i;
1053
- return Math.min(nextPos, 92);
1054
- });
1055
-
1056
- // Update car positions
1057
- carPositions.forEach((pos, i) => {
1058
- document.getElementById(`car-${i}`).style.left = pos + '%';
1059
- });
1060
-
1061
- if (winner !== -1) {
1062
- clearInterval(raceInterval);
1063
- racing = false;
1064
- document.getElementById('race-status').textContent = `VICTORY: UNIT ${winner + 1}`;
1065
- document.getElementById('race-status').classList.add('glitch');
1066
- document.getElementById('race-status').setAttribute('data-text', `VICTORY: UNIT ${winner + 1}`);
1067
-
1068
- setTimeout(() => {
1069
- document.getElementById('race-btn').classList.add('pulse-button');
1070
- document.getElementById('race-btn').textContent = 'INITIALIZE RACE';
1071
- document.getElementById('race-btn').disabled = false;
1072
- }, 3000);
1073
- }
1074
- }, 50);
1075
- }
1076
 
1077
- // Prebuilds
1078
- function showPrebuilds() {
1079
- const grid = document.getElementById('prebuilds-grid');
1080
- const prebuilds = [
1081
- { name: 'CYBER DRIFTER', desc: 'Balanced speed and handling' },
1082
- { name: 'NEON STRIKER', desc: 'Maximum acceleration' },
1083
- { name: 'PHANTOM RACER', desc: 'Stealth technology' },
1084
- { name: 'THUNDER BOLT', desc: 'Electric powertrain' },
1085
- { name: 'VIPER GT', desc: 'Aggressive design' },
1086
- { name: 'SHADOW X', desc: 'Underground racing champion' }
1087
- ];
1088
-
1089
- grid.style.display = 'grid';
1090
- grid.innerHTML = prebuilds.map(p => `
1091
- <div class="prebuild-card">
1092
- <h3>${p.name}</h3>
1093
- <p>${p.desc}</p>
1094
- </div>
1095
- `).join('');
1096
- }
1097
 
1098
- // Keyboard navigation
1099
- document.addEventListener('keydown', (e) => {
1100
- const pages = ['landing', 'garage', 'race', 'rim-designer', 'rim-forge', 'batch-seed', 'garage-3d', 'objects-3d'];
1101
- const currentIndex = pages.indexOf(document.querySelector('.page.active').id);
1102
-
1103
- if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
1104
- let nextIndex;
1105
- if (e.key === 'ArrowRight') {
1106
- nextIndex = (currentIndex + 1) % pages.length;
1107
- } else {
1108
- nextIndex = (currentIndex - 1 + pages.length) % pages.length;
1109
- }
1110
- navigateTo(pages[nextIndex]);
1111
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1112
  });
1113
-
1114
- // Initial render
1115
  renderGarage();
1116
- </script>
1117
- </body>
1118
- </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
 
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>GODS RODS - FANTASY RALLY</title>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link
11
+ href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;500;700&display=swap"
12
+ rel="stylesheet">
13
+ <style>
14
+ :root {
15
+ --neon-cyan: #00ffff;
16
+ --neon-purple: #a855f7;
17
+ --neon-pink: #ff00ff;
18
+ --dark-bg: #050505;
19
+ --dark-overlay: rgba(5, 5, 5, 0.92);
20
+ --card-bg: #0a0a0a;
21
+ --border-glow-cyan: 0 0 10px rgba(0, 255, 255, 0.5);
22
+ --border-glow-purple: 0 0 10px rgba(168, 85, 247, 0.5);
23
+ }
24
+
25
+ * {
26
+ margin: 0;
27
+ padding: 0;
28
+ box-sizing: border-box;
29
+ }
30
+
31
+ body {
32
+ font-family: 'Rajdhani', sans-serif;
33
+ color: #e0e0e0;
34
+ background: var(--dark-bg);
35
+ min-height: 100vh;
36
+ overflow-x: hidden;
37
+ }
38
+
39
+ /* Custom Scrollbar */
40
+ ::-webkit-scrollbar {
41
+ width: 6px;
42
+ }
43
+
44
+ ::-webkit-scrollbar-track {
45
+ background: #111;
46
+ }
47
+
48
+ ::-webkit-scrollbar-thumb {
49
+ background: var(--neon-cyan);
50
+ border-radius: 3px;
51
+ }
52
+
53
+ /* Header */
54
+ .main-header {
55
+ background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.8) 100%);
56
+ border-bottom: 2px solid var(--neon-cyan);
57
+ padding: 15px 30px;
58
+ display: flex;
59
+ justify-content: space-between;
60
+ align-items: center;
61
+ position: sticky;
62
+ top: 0;
63
+ z-index: 1000;
64
+ backdrop-filter: blur(10px);
65
+ }
66
+
67
+ .logo-section {
68
+ display: flex;
69
+ align-items: center;
70
+ gap: 15px;
71
+ }
72
+
73
+ .logo-icon {
74
+ width: 40px;
75
+ height: 40px;
76
+ border: 2px solid var(--neon-cyan);
77
+ border-radius: 50%;
78
+ display: flex;
79
+ align-items: center;
80
+ justify-content: center;
81
+ font-size: 1.2rem;
82
+ animation: logoSpin 10s linear infinite;
83
+ }
84
+
85
+ @keyframes logoSpin {
86
+ from {
87
+ transform: rotate(0deg);
88
+ }
89
+
90
+ to {
91
+ transform: rotate(360deg);
92
+ }
93
+ }
94
+
95
+ .header-title {
96
+ font-family: 'Orbitron', sans-serif;
97
+ font-size: 1.2rem;
98
+ color: var(--neon-cyan);
99
+ text-shadow: var(--border-glow-cyan);
100
+ letter-spacing: 3px;
101
+ }
102
+
103
+ .anycoder-link {
104
+ font-family: 'Orbitron', sans-serif;
105
+ font-size: 0.75rem;
106
+ color: var(--neon-purple);
107
+ text-decoration: none;
108
+ padding: 8px 15px;
109
+ border: 1px solid var(--neon-purple);
110
+ border-radius: 4px;
111
+ transition: all 0.3s ease;
112
+ text-transform: uppercase;
113
+ letter-spacing: 1px;
114
+ }
115
+
116
+ .anycoder-link:hover {
117
+ background: var(--neon-purple);
118
+ color: #000;
119
+ box-shadow: var(--border-glow-purple);
120
+ }
121
+
122
+ /* Navigation */
123
+ .main-nav {
124
+ background: rgba(0, 0, 0, 0.95);
125
+ padding: 12px 20px;
126
+ display: flex;
127
+ justify-content: center;
128
+ flex-wrap: wrap;
129
+ gap: 8px;
130
+ border-bottom: 1px solid #222;
131
+ }
132
+
133
+ .nav-btn {
134
+ font-family: 'Orbitron', sans-serif;
135
+ background: transparent;
136
+ color: #888;
137
+ border: 1px solid transparent;
138
+ padding: 8px 16px;
139
+ font-size: 0.7rem;
140
+ cursor: pointer;
141
+ transition: all 0.3s ease;
142
+ letter-spacing: 2px;
143
+ text-transform: uppercase;
144
+ position: relative;
145
+ overflow: hidden;
146
+ }
147
+
148
+ .nav-btn::before {
149
+ content: '';
150
+ position: absolute;
151
+ top: 0;
152
+ left: -100%;
153
+ width: 100%;
154
+ height: 100%;
155
+ background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);
156
+ transition: left 0.5s ease;
157
+ }
158
+
159
+ .nav-btn:hover::before {
160
+ left: 100%;
161
+ }
162
+
163
+ .nav-btn:hover,
164
+ .nav-btn.active {
165
+ color: var(--neon-cyan);
166
+ border-color: var(--neon-cyan);
167
+ text-shadow: var(--border-glow-cyan);
168
+ }
169
+
170
+ /* Main Container */
171
+ #app {
172
+ min-height: calc(100vh - 120px);
173
+ position: relative;
174
+ }
175
+
176
+ /* Global Background */
177
+ .global-bg {
178
+ position: fixed;
179
+ top: 0;
180
+ left: 0;
181
+ width: 100%;
182
+ height: 100%;
183
+ background:
184
+ linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
185
+ url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1920&q=80');
186
+ background-size: cover;
187
+ background-position: center;
188
+ background-attachment: fixed;
189
+ z-index: -1;
190
+ }
191
+
192
+ /* Page Container */
193
+ .page {
194
+ display: none;
195
+ min-height: calc(100vh - 120px);
196
+ padding: 40px 20px;
197
+ animation: fadeIn 0.5s ease;
198
+ }
199
+
200
+ .page.active {
201
+ display: block;
202
+ }
203
+
204
+ @keyframes fadeIn {
205
+ from {
206
+ opacity: 0;
207
+ transform: translateY(20px);
208
+ }
209
+
210
+ to {
211
+ opacity: 1;
212
+ transform: translateY(0);
213
+ }
214
+ }
215
+
216
+ /* Landing Page */
217
+ .landing-page {
218
+ display: flex;
219
+ height: calc(100vh - 120px);
220
+ position: relative;
221
+ }
222
+
223
+ .landing-page.active {
224
+ display: flex;
225
+ }
226
+
227
+ .landing-half {
228
+ flex: 1;
229
+ display: flex;
230
+ flex-direction: column;
231
+ align-items: center;
232
+ justify-content: center;
233
+ cursor: pointer;
234
+ transition: all 0.5s ease;
235
+ position: relative;
236
+ overflow: hidden;
237
+ }
238
+
239
+ .landing-half::before {
240
+ content: '';
241
+ position: absolute;
242
+ top: 0;
243
+ left: 0;
244
+ width: 100%;
245
+ height: 100%;
246
+ background: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4));
247
+ z-index: 1;
248
+ }
249
+
250
+ .left-side {
251
+ background: url('https://images.unsplash.com/photo-1603584173870-7f23fdae1b7a?w=1920&q=80');
252
+ background-size: cover;
253
+ background-position: center;
254
+ border-right: 3px solid var(--neon-cyan);
255
+ }
256
+
257
+ .right-side {
258
+ background: url('https://images.unsplash.com/photo-1533106958155-d2d7069fbd94?w=1920&q=80');
259
+ background-size: cover;
260
+ background-position: center;
261
+ }
262
+
263
+ .landing-half:hover {
264
+ filter: brightness(1.3);
265
+ }
266
+
267
+ .landing-half:hover .landing-content {
268
+ transform: scale(1.1);
269
+ }
270
+
271
+ .landing-content {
272
+ position: relative;
273
+ z-index: 2;
274
+ text-align: center;
275
+ transition: transform 0.5s ease;
276
+ }
277
+
278
+ .landing-content h1 {
279
+ font-family: 'Orbitron', sans-serif;
280
+ font-size: clamp(2rem, 5vw, 4rem);
281
+ letter-spacing: 5px;
282
+ margin-bottom: 20px;
283
+ }
284
+
285
+ .neon-text-cyan {
286
+ color: var(--neon-cyan);
287
+ text-shadow: 0 0 20px var(--neon-cyan), 0 0 40px var(--neon-cyan);
288
+ }
289
+
290
+ .neon-text-purple {
291
+ color: var(--neon-purple);
292
+ text-shadow: 0 0 20px var(--neon-purple), 0 0 40px var(--neon-purple);
293
+ }
294
+
295
+ .landing-content p {
296
+ font-family: 'Orbitron', sans-serif;
297
+ font-size: 1rem;
298
+ letter-spacing: 3px;
299
+ opacity: 0.8;
300
+ }
301
+
302
+ /* Content Wrapper */
303
+ .content-wrapper {
304
+ max-width: 1400px;
305
+ margin: 0 auto;
306
+ text-align: center;
307
+ }
308
+
309
+ .page-title {
310
+ font-family: 'Orbitron', sans-serif;
311
+ font-size: clamp(1.5rem, 3vw, 2.5rem);
312
+ letter-spacing: 4px;
313
+ margin-bottom: 40px;
314
+ padding: 20px;
315
+ border: 1px solid;
316
+ border-image: linear-gradient(90deg, transparent, currentColor, transparent) 1;
317
+ }
318
+
319
+ .center-content {
320
+ display: flex;
321
+ flex-direction: column;
322
+ align-items: center;
323
+ justify-content: center;
324
+ min-height: 50vh;
325
+ gap: 20px;
326
+ }
327
+
328
+ /* Buttons */
329
+ .action-btn {
330
+ font-family: 'Orbitron', sans-serif;
331
+ padding: 15px 40px;
332
+ border: none;
333
+ cursor: pointer;
334
+ font-weight: bold;
335
+ transition: all 0.3s ease;
336
+ margin: 10px;
337
+ letter-spacing: 2px;
338
+ text-transform: uppercase;
339
+ position: relative;
340
+ overflow: hidden;
341
+ }
342
+
343
+ .action-btn::before {
344
+ content: '';
345
+ position: absolute;
346
+ top: 50%;
347
+ left: 50%;
348
+ width: 0;
349
+ height: 0;
350
+ background: rgba(255, 255, 255, 0.2);
351
+ border-radius: 50%;
352
+ transform: translate(-50%, -50%);
353
+ transition: width 0.6s, height 0.6s;
354
+ }
355
+
356
+ .action-btn:hover::before {
357
+ width: 300px;
358
+ height: 300px;
359
+ }
360
+
361
+ .cyan-btn {
362
+ background: var(--neon-cyan);
363
+ color: #000;
364
+ }
365
+
366
+ .cyan-btn:hover {
367
+ box-shadow: 0 0 30px var(--neon-cyan);
368
+ transform: translateY(-3px);
369
+ }
370
+
371
+ .purple-btn {
372
+ background: linear-gradient(135deg, var(--neon-purple), #7c3aed);
373
+ color: #fff;
374
+ }
375
+
376
+ .purple-btn:hover {
377
+ box-shadow: 0 0 30px var(--neon-purple);
378
+ transform: translateY(-3px);
379
+ }
380
+
381
+ .pulse-button {
382
+ animation: pulse 2s infinite;
383
+ }
384
+
385
+ @keyframes pulse {
386
+ 0% {
387
+ box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.7);
388
+ }
389
+
390
+ 70% {
391
+ box-shadow: 0 0 0 20px rgba(168, 85, 247, 0);
392
+ }
393
+
394
+ 100% {
395
+ box-shadow: 0 0 0 0 rgba(168, 85, 247, 0);
396
+ }
397
+ }
398
+
399
+ /* Garage Grid */
400
+ .garage-grid {
401
+ display: grid;
402
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
403
+ gap: 25px;
404
+ margin-top: 40px;
405
+ }
406
+
407
+ .gr-block {
408
+ background: var(--card-bg);
409
+ border: 1px solid #333;
410
+ border-radius: 8px;
411
+ overflow: hidden;
412
+ transition: all 0.3s ease;
413
+ position: relative;
414
+ }
415
+
416
+ .gr-block::before {
417
+ content: '';
418
+ position: absolute;
419
+ top: 0;
420
+ left: 0;
421
+ width: 100%;
422
+ height: 3px;
423
+ background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple));
424
+ transform: scaleX(0);
425
+ transform-origin: left;
426
+ transition: transform 0.3s ease;
427
+ }
428
+
429
+ .gr-block:hover::before {
430
+ transform: scaleX(1);
431
+ }
432
+
433
+ .gr-block:hover {
434
+ transform: translateY(-5px);
435
+ border-color: var(--neon-cyan);
436
+ box-shadow: 0 10px 40px rgba(0, 255, 255, 0.2);
437
+ }
438
+
439
+ .car-img {
440
+ width: 100%;
441
+ height: 200px;
442
+ object-fit: cover;
443
+ background: #111;
444
+ }
445
+
446
+ .car-info {
447
+ padding: 15px;
448
+ border-top: 1px solid #333;
449
+ font-family: 'Orbitron', sans-serif;
450
+ font-size: 0.85rem;
451
+ color: var(--neon-cyan);
452
+ letter-spacing: 1px;
453
+ }
454
+
455
+ /* Empty State */
456
+ .empty-state {
457
+ padding: 60px 20px;
458
+ text-align: center;
459
+ }
460
+
461
+ .empty-state p {
462
+ font-family: 'Orbitron', sans-serif;
463
+ color: #666;
464
+ margin-bottom: 30px;
465
+ font-size: 0.9rem;
466
+ letter-spacing: 2px;
467
+ }
468
+
469
+ /* Race Track */
470
+ .race-track-container {
471
+ max-width: 1000px;
472
+ margin: 0 auto;
473
+ }
474
+
475
+ .race-status {
476
+ font-family: 'Orbitron', sans-serif;
477
+ font-size: 1.5rem;
478
+ margin-bottom: 30px;
479
+ padding: 15px 30px;
480
+ border: 2px solid var(--neon-purple);
481
+ display: inline-block;
482
+ }
483
+
484
+ .race-track {
485
+ background: rgba(0, 0, 0, 0.6);
486
+ padding: 30px;
487
+ border: 2px solid var(--neon-purple);
488
+ border-radius: 10px;
489
+ margin: 30px 0;
490
+ position: relative;
491
+ overflow: hidden;
492
+ }
493
+
494
+ .race-track::before {
495
+ content: '';
496
+ position: absolute;
497
+ top: 0;
498
+ left: 0;
499
+ width: 100%;
500
+ height: 100%;
501
+ background: repeating-linear-gradient(90deg,
502
+ transparent,
503
+ transparent 49px,
504
+ rgba(255, 255, 255, 0.1) 50px);
505
+ }
506
+
507
+ .race-lane {
508
+ height: 70px;
509
+ border-bottom: 1px solid #222;
510
+ position: relative;
511
+ display: flex;
512
+ align-items: center;
513
+ }
514
+
515
+ .race-lane:last-child {
516
+ border-bottom: none;
517
+ }
518
+
519
+ .lane-number {
520
+ position: absolute;
521
+ left: 10px;
522
+ font-family: 'Orbitron', sans-serif;
523
+ color: #444;
524
+ font-size: 0.8rem;
525
+ }
526
+
527
+ .finish-line {
528
+ position: absolute;
529
+ right: 50px;
530
+ top: 0;
531
+ height: 100%;
532
+ width: 20px;
533
+ background: repeating-linear-gradient(0deg,
534
+ #fff 0px,
535
+ #fff 10px,
536
+ #000 10px,
537
+ #000 20px);
538
+ opacity: 0.5;
539
+ }
540
+
541
+ .car-sprite {
542
+ position: absolute;
543
+ font-size: 2.5rem;
544
+ transition: left 0.1s linear;
545
+ filter: drop-shadow(0 0 15px var(--neon-purple));
546
+ z-index: 2;
547
+ }
548
+
549
+ .race-controls {
550
+ margin: 30px 0;
551
+ }
552
+
553
+ /* Race Footer */
554
+ .race-footer {
555
+ position: fixed;
556
+ bottom: 0;
557
+ left: 0;
558
+ width: 100%;
559
+ background: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.98));
560
+ border-top: 2px solid var(--neon-purple);
561
+ padding: 20px 0;
562
+ z-index: 100;
563
+ }
564
+
565
+ .footer-tabs {
566
+ display: flex;
567
+ justify-content: center;
568
+ flex-wrap: wrap;
569
+ gap: 30px;
570
+ font-family: 'Orbitron', sans-serif;
571
+ font-size: 0.7rem;
572
+ letter-spacing: 2px;
573
+ }
574
+
575
+ .footer-tabs span {
576
+ color: var(--neon-purple);
577
+ cursor: pointer;
578
+ padding: 10px 15px;
579
+ border: 1px solid transparent;
580
+ transition: all 0.3s ease;
581
+ }
582
+
583
+ .footer-tabs span:hover {
584
+ color: #fff;
585
+ border-color: var(--neon-purple);
586
+ text-shadow: var(--border-glow-purple);
587
+ }
588
+
589
+ /* Placeholder Box */
590
+ .placeholder-box {
591
+ padding: 80px 50px;
592
+ border: 2px dashed #333;
593
+ color: #555;
594
+ font-family: 'Orbitron', sans-serif;
595
+ letter-spacing: 3px;
596
+ font-size: 1rem;
597
+ background: rgba(0, 0, 0, 0.5);
598
+ position: relative;
599
+ }
600
+
601
+ .placeholder-box::after {
602
+ content: '';
603
+ position: absolute;
604
+ top: -1px;
605
+ left: -1px;
606
+ right: -1px;
607
+ bottom: -1px;
608
+ border: 2px solid var(--neon-cyan);
609
+ opacity: 0;
610
+ transition: opacity 0.3s ease;
611
+ }
612
+
613
+ .placeholder-box:hover::after {
614
+ opacity: 1;
615
+ }
616
+
617
+ /* Input */
618
+ .dark-input {
619
+ background: #111;
620
+ border: 2px solid var(--neon-cyan);
621
+ color: white;
622
+ padding: 18px 30px;
623
+ width: 100%;
624
+ max-width: 400px;
625
+ text-align: center;
626
+ font-family: 'Orbitron', sans-serif;
627
+ font-size: 0.9rem;
628
+ letter-spacing: 2px;
629
+ transition: all 0.3s ease;
630
+ }
631
+
632
+ .dark-input:focus {
633
+ outline: none;
634
+ box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
635
+ }
636
+
637
+ .dark-input::placeholder {
638
+ color: #555;
639
+ }
640
+
641
+ /* Loading Animation */
642
+ .loading-dots::after {
643
+ content: '';
644
+ animation: dots 1.5s infinite;
645
+ }
646
+
647
+ @keyframes dots {
648
+
649
+ 0%,
650
+ 20% {
651
+ content: '.';
652
+ }
653
+
654
+ 40% {
655
+ content: '..';
656
+ }
657
+
658
+ 60%,
659
+ 100% {
660
+ content: '...';
661
+ }
662
+ }
663
+
664
+ /* Responsive */
665
+ @media (max-width: 768px) {
666
+ .main-header {
667
+ flex-direction: column;
668
+ gap: 15px;
669
+ padding: 15px;
670
+ }
671
+
672
+ .main-nav {
673
+ gap: 5px;
674
+ padding: 10px;
675
+ }
676
+
677
+ .nav-btn {
678
+ padding: 6px 10px;
679
+ font-size: 0.6rem;
680
+ }
681
+
682
+ .landing-page {
683
+ flex-direction: column;
684
+ height: auto;
685
+ }
686
+
687
+ .landing-half {
688
+ height: 50vh;
689
+ border-right: none;
690
+ border-bottom: 3px solid;
691
+ }
692
+
693
+ .left-side {
694
+ border-bottom-color: var(--neon-cyan);
695
+ }
696
+
697
+ .right-side {
698
+ border-bottom: none;
699
+ }
700
+
701
+ .footer-tabs {
702
+ gap: 15px;
703
+ font-size: 0.6rem;
704
+ }
705
+
706
+ .footer-tabs span {
707
+ padding: 5px 8px;
708
+ }
709
+
710
+ .race-track {
711
+ padding: 15px;
712
+ }
713
+
714
+ .race-lane {
715
+ height: 50px;
716
+ }
717
+
718
+ .car-sprite {
719
+ font-size: 1.8rem;
720
+ }
721
+
722
+ .garage-grid {
723
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
724
+ gap: 15px;
725
+ }
726
+ }
727
+
728
+ /* Scanline Effect */
729
+ .scanlines {
730
+ position: fixed;
731
+ top: 0;
732
+ left: 0;
733
+ width: 100%;
734
+ height: 100%;
735
+ pointer-events: none;
736
+ z-index: 9999;
737
+ background: repeating-linear-gradient(0deg,
738
+ rgba(0, 0, 0, 0.1),
739
+ rgba(0, 0, 0, 0.1) 1px,
740
+ transparent 1px,
741
+ transparent 2px);
742
+ opacity: 0.3;
743
+ }
744
+
745
+ /* Glitch Effect on Title */
746
+ .glitch {
747
+ position: relative;
748
+ }
749
+
750
+ .glitch::before,
751
+ .glitch::after {
752
+ content: attr(data-text);
753
+ position: absolute;
754
+ top: 0;
755
+ left: 0;
756
+ width: 100%;
757
+ height: 100%;
758
+ }
759
+
760
+ .glitch::before {
761
+ animation: glitch-1 2s infinite linear alternate-reverse;
762
+ clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
763
+ color: var(--neon-cyan);
764
+ opacity: 0.8;
765
+ }
766
+
767
+ .glitch::after {
768
+ animation: glitch-2 3s infinite linear alternate-reverse;
769
+ clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
770
+ color: var(--neon-purple);
771
+ opacity: 0.8;
772
+ }
773
+
774
+ @keyframes glitch-1 {
775
+ 0% {
776
+ transform: translate(0);
777
+ }
778
+
779
+ 20% {
780
+ transform: translate(-3px, 3px);
781
+ }
782
+
783
+ 40% {
784
+ transform: translate(-3px, -3px);
785
+ }
786
+
787
+ 60% {
788
+ transform: translate(3px, 3px);
789
+ }
790
+
791
+ 80% {
792
+ transform: translate(3px, -3px);
793
+ }
794
+
795
+ 100% {
796
+ transform: translate(0);
797
+ }
798
+ }
799
+
800
+ @keyframes glitch-2 {
801
+ 0% {
802
+ transform: translate(0);
803
+ }
804
+
805
+ 20% {
806
+ transform: translate(3px, -3px);
807
+ }
808
+
809
+ 40% {
810
+ transform: translate(3px, 3px);
811
+ }
812
+
813
+ 60% {
814
+ transform: translate(-3px, -3px);
815
+ }
816
+
817
+ 80% {
818
+ transform: translate(-3px, 3px);
819
+ }
820
+
821
+ 100% {
822
+ transform: translate(0);
823
+ }
824
+ }
825
+
826
+ /* Pre-builds Grid */
827
+ .prebuilds-grid {
828
+ display: grid;
829
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
830
+ gap: 20px;
831
+ margin-top: 30px;
832
+ width: 100%;
833
+ max-width: 1000px;
834
+ }
835
+
836
+ .prebuild-card {
837
+ background: var(--card-bg);
838
+ border: 1px solid #333;
839
+ padding: 20px;
840
+ transition: all 0.3s ease;
841
+ cursor: pointer;
842
+ }
843
+
844
+ .prebuild-card:hover {
845
+ border-color: var(--neon-cyan);
846
+ box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
847
+ }
848
+
849
+ .prebuild-card h3 {
850
+ font-family: 'Orbitron', sans-serif;
851
+ color: var(--neon-cyan);
852
+ margin-bottom: 10px;
853
+ }
854
+
855
+ .prebuild-card p {
856
+ color: #666;
857
+ font-size: 0.85rem;
858
+ }
859
+
860
+ /* Backend Status */
861
+ .backend-status {
862
+ font-family: 'Orbitron', sans-serif;
863
+ font-size: 0.7rem;
864
+ padding: 8px 15px;
865
+ border: 1px solid #333;
866
+ border-radius: 4px;
867
+ display: flex;
868
+ align-items: center;
869
+ gap: 8px;
870
+ }
871
+
872
+ .status-dot {
873
+ width: 8px;
874
+ height: 8px;
875
+ border-radius: 50%;
876
+ background: #22c55e;
877
+ animation: statusPulse 2s infinite;
878
+ }
879
+
880
+ .status-dot.offline {
881
+ background: #ef4444;
882
+ animation: none;
883
+ }
884
+
885
+ @keyframes statusPulse {
886
+ 0%, 100% { opacity: 1; }
887
+ 50% { opacity: 0.5; }
888
+ }
889
+
890
+ /* Toast Notifications */
891
+ .toast-container {
892
+ position: fixed;
893
+ top: 150px;
894
+ right: 20px;
895
+ z-index: 10000;
896
+ display: flex;
897
+ flex-direction: column;
898
+ gap: 10px;
899
+ }
900
+
901
+ .toast {
902
+ background: var(--card-bg);
903
+ border: 1px solid var(--neon-cyan);
904
+ padding: 15px 25px;
905
+ font-family: 'Orbitron', sans-serif;
906
+ font-size: 0.8rem;
907
+ color: var(--neon-cyan);
908
+ animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s;
909
+ max-width: 300px;
910
+ }
911
+
912
+ .toast.error {
913
+ border-color: #ef4444;
914
+ color: #ef4444;
915
+ }
916
+
917
+ .toast.success {
918
+ border-color: #22c55e;
919
+ color: #22c55e;
920
+ }
921
+
922
+ @keyframes slideIn {
923
+ from { transform: translateX(100%); opacity: 0; }
924
+ to { transform: translateX(0); opacity: 1; }
925
+ }
926
+
927
+ @keyframes fadeOut {
928
+ from { opacity: 1; }
929
+ to { opacity: 0; }
930
+ }
931
+
932
+ /* Stats Panel */
933
+ .stats-panel {
934
+ display: flex;
935
+ justify-content: center;
936
+ gap: 30px;
937
+ margin-bottom: 30px;
938
+ flex-wrap: wrap;
939
+ }
940
+
941
+ .stat-item {
942
+ background: var(--card-bg);
943
+ border: 1px solid #333;
944
+ padding: 15px 25px;
945
+ text-align: center;
946
+ }
947
+
948
+ .stat-item .value {
949
+ font-family: 'Orbitron', sans-serif;
950
+ font-size: 1.5rem;
951
+ color: var(--neon-cyan);
952
+ }
953
+
954
+ .stat-item .label {
955
+ font-size: 0.7rem;
956
+ color: #666;
957
+ letter-spacing: 2px;
958
+ }
959
+ </style>
960
  </head>
 
 
 
961
 
962
+ <body>
963
+ <div class="global-bg"></div>
964
+ <div class="scanlines"></div>
965
+ <div class="toast-container" id="toast-container"></div>
966
+
967
+ <header class="main-header">
968
+ <div class="logo-section">
969
+ <div class="logo-icon">⚡</div>
970
+ <span class="header-title">GODS RODS</span>
971
+ </div>
972
+ <div style="display: flex; align-items: center; gap: 15px;">
973
+ <div class="backend-status">
974
+ <div class="status-dot" id="backend-dot"></div>
975
+ <span id="backend-text">LOCAL STORAGE</span>
976
+ </div>
977
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with
978
+ anycoder</a>
979
+ </div>
980
+ </header>
981
+
982
+ <nav class="main-nav">
983
+ <button class="nav-btn active" data-page="landing">HOME</button>
984
+ <button class="nav-btn" data-page="garage">GARAGE</button>
985
+ <button class="nav-btn" data-page="race">NO-LIMIT-RACE</button>
986
+ <button class="nav-btn" data-page="rim-designer">RIM DESIGNER</button>
987
+ <button class="nav-btn" data-page="rim-forge">RIM FORGE</button>
988
+ <button class="nav-btn" data-page="batch-seed">BATCH SEED</button>
989
+ <button class="nav-btn" data-page="garage-3d">3D GARAGE</button>
990
+ <button class="nav-btn" data-page="objects-3d">3D OBJECTS</button>
991
+ </nav>
992
+
993
+ <div id="app">
994
+ <!-- Landing Page -->
995
+ <div id="landing" class="page landing-page active">
996
+ <div class="landing-half left-side" onclick="navigateTo('garage')">
997
+ <div class="landing-content">
998
+ <h1 class="neon-text-cyan">GODS RODS</h1>
999
+ <p>VIEW GARAGE</p>
1000
  </div>
1001
+ </div>
1002
+ <div class="landing-half right-side" onclick="navigateTo('race')">
1003
+ <div class="landing-content">
1004
+ <h1 class="neon-text-purple">FANTASY RALLY</h1>
1005
+ <p>ENTER THE RACE</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1006
  </div>
1007
+ </div>
1008
+ </div>
1009
 
1010
+ <!-- Garage Page -->
1011
+ <div id="garage" class="page">
1012
+ <div class="content-wrapper">
1013
+ <h2 class="page-title neon-text-cyan">GARAGE PROTOCOL</h2>
1014
+
1015
+ <div class="stats-panel">
1016
+ <div class="stat-item">
1017
+ <div class="value" id="total-cars">0</div>
1018
+ <div class="label">TOTAL UNITS</div>
1019
+ </div>
1020
+ <div class="stat-item">
1021
+ <div class="value" id="total-races">0</div>
1022
+ <div class="label">RACES COMPLETED</div>
1023
+ </div>
1024
  </div>
1025
 
1026
+ <div class="empty-state" id="garage-empty">
1027
+ <p class="font-orb">3D MODULE OFFLINE - INITIALIZING NEW STORAGE</p>
1028
+ <button onclick="generateCar()" class="action-btn cyan-btn">GENERATE UNIT</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1029
  </div>
1030
+ <div class="garage-grid" id="garage-grid"></div>
1031
+ </div>
1032
+ </div>
1033
 
1034
+ <!-- Race Page -->
1035
+ <div id="race" class="page">
1036
+ <div class="content-wrapper">
1037
+ <div class="race-track-container">
1038
+ <h2 class="page-title neon-text-purple" id="race-status">NO LIMIT RACE</h2>
1039
+ <div class="race-track">
1040
+ <div class="finish-line"></div>
1041
+ <div class="race-lane"><span class="lane-number">01</span>
1042
+ <div class="car-sprite" id="car-0" style="left: 0%">🏎️</div>
1043
  </div>
1044
+ <div class="race-lane"><span class="lane-number">02</span>
1045
+ <div class="car-sprite" id="car-1" style="left: 0%">🏎️</div>
 
 
 
 
 
1046
  </div>
1047
+ <div class="race-lane"><span class="lane-number">03</span>
1048
+ <div class="car-sprite" id="car-2" style="left: 0%">🏎️</div>
 
 
 
 
 
1049
  </div>
1050
+ <div class="race-lane"><span class="lane-number">04</span>
1051
+ <div class="car-sprite" id="car-3" style="left: 0%">🏎️</div>
 
 
 
 
 
1052
  </div>
1053
+ </div>
1054
+ <div class="race-controls">
1055
+ <button onclick="startRace()" id="race-btn" class="action-btn purple-btn pulse-button">INITIALIZE RACE</button>
1056
+ </div>
1057
  </div>
1058
+ </div>
1059
+ <footer class="race-footer">
1060
+ <div class="footer-tabs">
1061
+ <span>LEADERBOARD</span>
1062
+ <span>BETTING</span>
1063
+ <span>UPGRADES</span>
1064
+ <span>SPONSORS</span>
1065
+ <span>REPLAYS</span>
 
 
 
1066
  </div>
1067
+ </footer>
1068
  </div>
1069
 
1070
+ <!-- Rim Designer -->
1071
+ <div id="rim-designer" class="page">
1072
+ <div class="content-wrapper center-content">
1073
+ <h2 class="page-title neon-text-cyan">RIM DESIGNER</h2>
1074
+ <div class="placeholder-box">SYSTEM INITIALIZING...</div>
1075
+ </div>
1076
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1077
 
1078
+ <!-- Rim Forge -->
1079
+ <div id="rim-forge" class="page">
1080
+ <div class="content-wrapper center-content">
1081
+ <h2 class="page-title neon-text-purple">RIM FORGE</h2>
1082
+ <div class="placeholder-box">FORGE OFFLINE</div>
1083
+ </div>
1084
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1085
 
1086
+ <!-- Batch Seed -->
1087
+ <div id="batch-seed" class="page">
1088
+ <div class="content-wrapper center-content">
1089
+ <h2 class="page-title">BATCH SEEDER</h2>
1090
+ <input type="text" placeholder="ENTER SEED MASK..." class="dark-input" id="seed-input">
1091
+ <button onclick="batchGenerate()" class="action-btn cyan-btn">GENERATE BATCH</button>
1092
+ </div>
1093
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1094
 
1095
+ <!-- 3D Garage -->
1096
+ <div id="garage-3d" class="page">
1097
+ <div class="content-wrapper center-content">
1098
+ <h2 class="page-title neon-text-cyan">3D GARAGE</h2>
1099
+ <div class="placeholder-box">3D RENDER ENGINE DISCONNECTED</div>
1100
+ </div>
1101
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
1102
 
1103
+ <!-- 3D Objects -->
1104
+ <div id="objects-3d" class="page">
1105
+ <div class="content-wrapper">
1106
+ <h2 class="page-title">ASSET LIBRARY</h2>
1107
+ <div class="center-content" style="margin-top: 50px;">
1108
+ <button class="action-btn cyan-btn" style="font-size: 1.5rem; padding: 25px 50px;" onclick="showPrebuilds()">PRE-BUILDS</button>
1109
+ <p style="margin-top: 30px; font-family: 'Orbitron', sans-serif; color: #666;">ACCESSING 3D
1110
+ MODELS<span class="loading-dots"></span></p>
1111
+ </div>
1112
+ <div class="prebuilds-grid" id="prebuilds-grid" style="display: none;"></div>
1113
+ </div>
1114
+ </div>
1115
+ </div>
1116
+
1117
+ <script>
1118
+ // ============================================
1119
+ // BACKEND SIMULATION - LOCAL STORAGE DATABASE
1120
+ // ============================================
1121
+
1122
+ const DB_KEY = 'godsrods_database';
1123
+ const STATS_KEY = 'godsrods_stats';
1124
+
1125
+ // Initialize database structure
1126
+ function initDatabase() {
1127
+ const existing = localStorage.getItem(DB_KEY);
1128
+ if (!existing) {
1129
+ const initialData = {
1130
+ users: {},
1131
+ garage: [],
1132
+ rims: [],
1133
+ raceHistory: []
1134
+ };
1135
+ localStorage.setItem(DB_KEY, JSON.stringify(initialData));
1136
+ return initialData;
1137
+ }
1138
+ return JSON.parse(existing);
1139
+ }
1140
+
1141
+ // Get database
1142
+ function getDB() {
1143
+ return initDatabase();
1144
+ }
1145
+
1146
+ // Save database
1147
+ function saveDB(data) {
1148
+ localStorage.setItem(DB_KEY, JSON.stringify(data));
1149
+ }
1150
+
1151
+ // Get stats
1152
+ function getStats() {
1153
+ const stats = localStorage.getItem(STATS_KEY);
1154
+ if (!stats) {
1155
+ return { totalCars: 0, totalRaces: 0 };
1156
+ }
1157
+ return JSON.parse(stats);
1158
+ }
1159
+
1160
+ // Save stats
1161
+ function saveStats(stats) {
1162
+ localStorage.setItem(STATS_KEY, JSON.stringify(stats));
1163
+ }
1164
+
1165
+ // ============================================
1166
+ // API LAYER - Simulated Backend Endpoints
1167
+ // ============================================
1168
+
1169
+ const API = {
1170
+ // GET /api/get_garage/:user_id
1171
+ async getGarage(userId) {
1172
+ try {
1173
+ const db = getDB();
1174
+ const userGarage = db.garage.filter(car => car.user_id === userId);
1175
+ return { success: true, data: userGarage };
1176
+ } catch (error) {
1177
+ return { success: false, error: error.message };
1178
+ }
1179
+ },
1180
+
1181
+ // POST /api/add_car
1182
+ async addCar(userId, carData) {
1183
+ try {
1184
+ const db = getDB();
1185
+ const newCar = {
1186
+ id: Date.now(),
1187
+ user_id: userId,
1188
+ car_data: carData,
1189
+ created_at: new Date().toISOString()
1190
+ };
1191
+ db.garage.push(newCar);
1192
+ saveDB(db);
1193
+
1194
+ // Update stats
1195
+ const stats = getStats();
1196
+ stats.totalCars = (stats.totalCars || 0) + 1;
1197
+ saveStats(stats);
1198
+
1199
+ return { success: true, data: newCar };
1200
+ } catch (error) {
1201
+ return { success: false, error: error.message };
1202
+ }
1203
+ },
1204
+
1205
+ // POST /api/add_rim
1206
+ async addRim(userId, rimData) {
1207
+ try {
1208
+ const db = getDB();
1209
+ const newRim = {
1210
+ id: Date.now(),
1211
+ user_id: userId,
1212
+ rim_data: rimData,
1213
+ created_at: new Date().toISOString()
1214
+ };
1215
+ db.rims.push(newRim);
1216
+ saveDB(db);
1217
+
1218
+ return { success: true, data: newRim };
1219
+ } catch (error) {
1220
+ return { success: false, error: error.message };
1221
+ }
1222
+ },
1223
+
1224
+ // POST /api/race_result
1225
+ async saveRaceResult(userId, result) {
1226
+ try {
1227
+ const db = getDB();
1228
+ const raceRecord = {
1229
+ id: Date.now(),
1230
+ user_id: userId,
1231
+ winner: result.winner,
1232
+ positions: result.positions,
1233
+ timestamp: new Date().toISOString()
1234
+ };
1235
+ db.raceHistory.push(raceRecord);
1236
+ saveDB(db);
1237
+
1238
+ // Update stats
1239
+ const stats = getStats();
1240
+ stats.totalRaces = (stats.totalRaces || 0) + 1;
1241
+ saveStats(stats);
1242
+
1243
+ return { success: true, data: raceRecord };
1244
+ } catch (error) {
1245
+ return { success: false, error: error.message };
1246
+ }
1247
+ },
1248
+
1249
+ // DELETE /api/delete_car/:carId
1250
+ async deleteCar(userId, carId) {
1251
+ try {
1252
+ const db = getDB();
1253
+ db.garage = db.garage.filter(car => car.id !== carId || car.user_id !== userId);
1254
+ saveDB(db);
1255
+ return { success: true };
1256
+ } catch (error) {
1257
+ return { success: false, error: error.message };
1258
+ }
1259
+ },
1260
+
1261
+ // GET /api/stats/:userId
1262
+ async getUserStats(userId) {
1263
+ try {
1264
+ const db = getDB();
1265
+ const userCars = db.garage.filter(car => car.user_id === userId).length;
1266
+ const userRaces = db.raceHistory.filter(race => race.user_id === userId).length;
1267
+ return {
1268
+ success: true,
1269
+ data: {
1270
+ totalCars: userCars,
1271
+ totalRaces: userRaces
1272
+ }
1273
+ };
1274
+ } catch (error) {
1275
+ return { success: false, error: error.message };
1276
+ }
1277
+ }
1278
+ };
1279
+
1280
+ // ============================================
1281
+ // UI STATE
1282
+ // ============================================
1283
+
1284
+ const USER_SESSION_ID = "SESSION_" + Math.random().toString(36).substr(2, 9);
1285
+ let garage = [];
1286
+ let racing = false;
1287
+ let carPositions = [0, 0, 0, 0];
1288
+ let raceInterval = null;
1289
+
1290
+ // Toast notification system
1291
+ function showToast(message, type = 'info') {
1292
+ const container = document.getElementById('toast-container');
1293
+ const toast = document.createElement('div');
1294
+ toast.className = `toast ${type}`;
1295
+ toast.textContent = message;
1296
+ container.appendChild(toast);
1297
+
1298
+ setTimeout(() => {
1299
+ toast.remove();
1300
+ }, 3000);
1301
+ }
1302
+
1303
+ // ============================================
1304
+ // NAVIGATION
1305
+ // ============================================
1306
+
1307
+ function navigateTo(pageId) {
1308
+ document.querySelectorAll('.page').forEach(page => {
1309
+ page.classList.remove('active');
1310
+ });
1311
+
1312
+ document.getElementById(pageId).classList.add('active');
1313
+
1314
+ document.querySelectorAll('.nav-btn').forEach(btn => {
1315
+ btn.classList.remove('active');
1316
+ if (btn.dataset.page === pageId) {
1317
+ btn.classList.add('active');
1318
+ }
1319
+ });
1320
+
1321
+ if (pageId === 'garage') {
1322
+ fetchGarage();
1323
+ updateStats();
1324
+ }
1325
+ }
1326
+
1327
+ document.querySelectorAll('.nav-btn').forEach(btn => {
1328
+ btn.addEventListener('click', () => {
1329
+ navigateTo(btn.dataset.page);
1330
+ });
1331
+ });
1332
+
1333
+ // ============================================
1334
+ // GARAGE FUNCTIONS
1335
+ // ============================================
1336
+
1337
+ async function fetchGarage() {
1338
+ const result = await API.getGarage(USER_SESSION_ID);
1339
+
1340
+ if (result.success) {
1341
+ garage = result.data.reverse();
1342
+ } else {
1343
+ // Fallback demo data
1344
+ garage = [
1345
+ { id: 1, car_data: 'CYBER-X7', created_at: new Date().toISOString() },
1346
+ { id: 2, car_data: 'NEON-STORM', created_at: new Date().toISOString() },
1347
+ { id: 3, car_data: 'PHANTOM-GT', created_at: new Date().toISOString() }
1348
+ ];
1349
+ }
1350
+
1351
+ renderGarage();
1352
+ }
1353
+
1354
+ function renderGarage() {
1355
+ const grid = document.getElementById('garage-grid');
1356
+ const empty = document.getElementById('garage-empty');
1357
+
1358
+ if (garage.length === 0) {
1359
+ empty.style.display = 'block';
1360
+ grid.innerHTML = '';
1361
+ return;
1362
+ }
1363
+
1364
+ empty.style.display = 'none';
1365
+ grid.innerHTML = garage.map(car => `
1366
+ <div class="gr-block">
1367
+ <img src="https://image.pollinations.ai/prompt/cyberpunk%20car%20${car.car_data}?seed=${car.id}&width=400&height=300&nologo=true"
1368
+ class="car-img"
1369
+ onerror="this.src='https://images.unsplash.com/photo-1617788138017-80ad40651399?w=400&h=300&fit=crop'"
1370
+ alt="${car.car_data}">
1371
+ <div class="car-info">${car.car_data}</div>
1372
+ </div>
1373
+ `).join('');
1374
+ }
1375
+
1376
+ async function generateCar() {
1377
+ const btn = document.querySelector('#garage-empty .action-btn');
1378
+ const originalText = btn.textContent;
1379
+ btn.textContent = 'GENERATING...';
1380
+ btn.disabled = true;
1381
+
1382
+ const seed = Math.floor(Math.random() * 1000000);
1383
+ const newCarID = `UNIT-${seed.toString(16).toUpperCase()}`;
1384
+
1385
+ const result = await API.addCar(USER_SESSION_ID, newCarID);
1386
+
1387
+ if (result.success) {
1388
+ showToast(`UNIT ${newCarID} SAVED TO DATABASE`, 'success');
1389
+ await fetchGarage();
1390
+ updateStats();
1391
+ } else {
1392
+ // Demo fallback
1393
+ garage.unshift({
1394
+ id: Date.now(),
1395
+ car_data: newCarID,
1396
+ created_at: new Date().toISOString()
1397
  });
 
 
1398
  renderGarage();
1399
+ updateStats();
1400
+ showToast(`UNIT ${newCarID