Hugging Face's logo

Spaces:
Wavetype
/
anycoder-c3c7d790
Running

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

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +858 -442
index.html CHANGED
@@ -3,90 +3,134 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>CYBERPUNK GARAGE PROTOCOL</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@500;700&display=swap" rel="stylesheet">
10
-
11
  <style>
12
- /* --- CSS VARIABLES & RESET --- */
13
  :root {
14
  --neon-cyan: #00ffff;
15
  --neon-purple: #a855f7;
 
16
  --dark-bg: #050505;
17
- --panel-bg: rgba(10, 10, 10, 0.95);
18
- --border-color: #333;
19
- --font-display: 'Orbitron', sans-serif;
20
- --font-body: 'Rajdhani', sans-serif;
21
  }
22
 
23
  * {
24
- box-sizing: border-box;
25
  margin: 0;
26
  padding: 0;
27
- scrollbar-width: thin;
28
- scrollbar-color: var(--neon-cyan) var(--dark-bg);
29
  }
30
 
31
  body {
32
- font-family: var(--font-body);
33
- background-color: var(--dark-bg);
34
  color: #e0e0e0;
35
- overflow-x: hidden;
36
  min-height: 100vh;
37
- /* Dynamic Background handled in JS or CSS */
38
- background-image:
39
- linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
40
- url('https://images.unsplash.com/photo-1535295972055-1c762f4483e5?q=80&w=2574&auto=format&fit=crop');
41
- background-size: cover;
42
- background-attachment: fixed;
43
- background-position: center;
44
  }
45
 
46
- /* --- UTILITIES --- */
47
- .font-orb { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 2px; }
48
- .neon-text-cyan { color: var(--neon-cyan); text-shadow: 0 0 10px rgba(0, 255, 255, 0.7); }
49
- .neon-text-purple { color: var(--neon-purple); text-shadow: 0 0 10px rgba(168, 85, 247, 0.7); }
50
- .hidden { display: none !important; }
51
- .fade-in { animation: fadeIn 0.5s ease-in-out; }
52
-
53
- @keyframes fadeIn {
54
- from { opacity: 0; transform: translateY(10px); }
55
- to { opacity: 1; transform: translateY(0); }
56
  }
57
 
58
- /* --- HEADER & NAV --- */
59
- header {
60
- position: fixed;
 
 
 
 
 
 
61
  top: 0;
62
- width: 100%;
63
  z-index: 1000;
64
- background: rgba(0, 0, 0, 0.9);
65
- border-bottom: 1px solid var(--neon-cyan);
66
- padding: 10px 0;
67
- box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
68
  }
69
 
70
- .nav-container {
 
 
 
 
 
 
 
 
 
 
71
  display: flex;
72
- justify-content: center;
73
  align-items: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74
  flex-wrap: wrap;
75
- gap: 10px;
76
- padding: 0 20px;
77
  }
78
 
79
  .nav-btn {
 
80
  background: transparent;
 
81
  border: 1px solid transparent;
82
- color: #fff;
83
- font-family: var(--font-display);
84
- font-size: 0.75rem;
85
  padding: 8px 16px;
 
86
  cursor: pointer;
87
  transition: all 0.3s ease;
 
88
  text-transform: uppercase;
89
- letter-spacing: 1px;
90
  position: relative;
91
  overflow: hidden;
92
  }
@@ -94,609 +138,981 @@
94
  .nav-btn::before {
95
  content: '';
96
  position: absolute;
97
- top: 0; left: -100%;
98
- width: 100%; height: 100%;
99
- background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.2), transparent);
100
- transition: 0.5s;
101
- }
102
-
103
- .nav-btn:hover {
104
- color: var(--neon-cyan);
105
- border-color: var(--neon-cyan);
106
- text-shadow: 0 0 8px var(--neon-cyan);
107
  }
108
 
109
  .nav-btn:hover::before {
110
  left: 100%;
111
  }
112
 
113
- .nav-btn.active {
114
- border-color: var(--neon-purple);
115
- color: var(--neon-purple);
116
- box-shadow: inset 0 0 10px rgba(168, 85, 247, 0.3);
117
  }
118
 
119
- /* --- ANYCODER BADGE --- */
120
- .anycoder-badge {
121
- position: absolute;
122
- top: 10px;
123
- left: 20px;
124
- font-size: 0.7rem;
125
- color: #666;
126
- text-decoration: none;
127
- font-family: var(--font-body);
128
- transition: color 0.3s;
129
- z-index: 1001;
130
  }
131
- .anycoder-badge:hover { color: var(--neon-cyan); }
132
 
133
- /* --- MAIN CONTENT AREA --- */
134
- main {
135
- margin-top: 60px; /* Offset for fixed header */
136
- min-height: calc(100vh - 60px);
 
137
  width: 100%;
 
 
 
 
 
 
 
 
138
  }
139
 
140
- .view-section {
 
 
 
141
  padding: 40px 20px;
142
- max-width: 1400px;
143
- margin: 0 auto;
144
- width: 100%;
145
  }
146
 
147
- /* --- LANDING PAGE --- */
148
- #landing-page {
149
- height: calc(100vh - 60px);
 
 
 
 
 
 
 
 
150
  display: flex;
151
- width: 100%;
152
- overflow: hidden;
153
- padding: 0;
154
  }
155
 
156
- .landing-split {
 
 
 
 
157
  flex: 1;
158
  display: flex;
159
  flex-direction: column;
160
- justify-content: center;
161
  align-items: center;
 
 
162
  transition: all 0.5s ease;
163
  position: relative;
164
- cursor: pointer;
165
- border-right: 1px solid rgba(255,255,255,0.1);
 
 
 
 
 
 
 
 
 
 
166
  }
167
 
168
- .landing-split:hover { flex: 1.5; }
169
-
170
- .split-left {
171
- background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1617788138017-80ad40651399?q=80&w=2670&auto=format&fit=crop');
172
  background-size: cover;
173
  background-position: center;
 
174
  }
175
 
176
- .split-right {
177
- background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?q=80&w=2670&auto=format&fit=crop');
178
  background-size: cover;
179
  background-position: center;
180
  }
181
 
182
- .landing-title {
183
- font-size: 3rem;
184
- margin-bottom: 20px;
 
 
 
 
 
 
 
 
185
  text-align: center;
 
186
  }
187
-
188
- .landing-sub {
189
- font-size: 1.2rem;
190
- border: 1px solid white;
191
- padding: 10px 30px;
192
- background: rgba(0,0,0,0.5);
193
- transition: 0.3s;
194
  }
195
 
196
- .split-left:hover .landing-sub { background: var(--neon-cyan); color: black; border-color: var(--neon-cyan); }
197
- .split-right:hover .landing-sub { background: var(--neon-purple); color: white; border-color: var(--neon-purple); }
 
 
198
 
199
- @media (max-width: 768px) {
200
- #landing-page { flex-direction: column; }
201
- .landing-title { font-size: 2rem; }
 
 
 
 
 
 
 
202
  }
203
 
204
- /* --- GARAGE PAGE --- */
205
- .garage-header {
 
 
206
  text-align: center;
 
 
 
 
 
 
207
  margin-bottom: 40px;
 
 
 
 
 
 
 
 
 
 
 
 
208
  }
209
 
 
210
  .action-btn {
 
211
  padding: 15px 40px;
212
- font-family: var(--font-display);
213
- font-weight: bold;
214
- font-size: 1rem;
215
- cursor: pointer;
216
  border: none;
217
- transition: transform 0.2s, box-shadow 0.2s;
 
 
 
 
218
  text-transform: uppercase;
219
- clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
220
  }
221
 
222
  .cyan-btn {
223
  background: var(--neon-cyan);
224
- color: black;
225
- box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
226
  }
 
227
  .cyan-btn:hover {
228
- transform: scale(1.05);
229
- box-shadow: 0 0 25px rgba(0, 255, 255, 0.8);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
230
  }
231
 
 
 
 
 
 
 
 
232
  .garage-grid {
233
  display: grid;
234
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
235
  gap: 25px;
236
  margin-top: 40px;
237
  }
238
 
239
- .car-card {
240
- background: #111;
241
  border: 1px solid #333;
 
242
  overflow: hidden;
243
- transition: 0.3s;
244
  position: relative;
245
  }
246
 
247
- .car-card:hover {
248
- border-color: var(--neon-cyan);
249
- transform: translateY(-5px);
 
 
 
 
 
 
 
 
250
  }
251
 
252
- .car-img-container {
253
- width: 100%;
254
- height: 200px;
255
- overflow: hidden;
256
- background: #000;
257
- display: flex;
258
- align-items: center;
259
- justify-content: center;
260
  }
261
 
262
  .car-img {
263
  width: 100%;
264
- height: 100%;
265
  object-fit: cover;
266
- transition: transform 0.5s;
267
  }
268
 
269
- .car-card:hover .car-img { transform: scale(1.1); }
270
-
271
  .car-info {
272
  padding: 15px;
273
  border-top: 1px solid #333;
274
- display: flex;
275
- justify-content: space-between;
276
- align-items: center;
 
277
  }
278
 
279
- .loader {
280
- border: 4px solid #333;
281
- border-top: 4px solid var(--neon-cyan);
282
- border-radius: 50%;
283
- width: 30px;
284
- height: 30px;
285
- animation: spin 1s linear infinite;
286
  }
287
 
288
- @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
 
 
 
 
 
 
289
 
290
- /* --- RACE PAGE --- */
291
- .race-container {
292
  max-width: 1000px;
293
  margin: 0 auto;
294
- text-align: center;
 
 
 
 
 
 
 
 
295
  }
296
 
297
  .race-track {
298
- background: rgba(0,0,0,0.8);
 
299
  border: 2px solid var(--neon-purple);
300
- padding: 20px;
301
- margin: 40px 0;
302
- box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
303
  position: relative;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
304
  }
305
 
306
  .race-lane {
307
- height: 60px;
308
- border-bottom: 1px dashed #444;
309
  position: relative;
310
  display: flex;
311
  align-items: center;
312
  }
313
 
314
- .race-lane:last-child { border-bottom: none; }
 
 
315
 
316
- .lane-marker {
317
  position: absolute;
318
- right: 5%;
 
 
 
 
 
 
 
 
319
  top: 0;
320
- bottom: 0;
321
- width: 2px;
322
- background: var(--neon-purple);
323
- z-index: 0;
 
 
 
 
 
 
324
  }
325
 
326
- .racer {
327
  position: absolute;
328
- left: 0;
329
  font-size: 2.5rem;
330
  transition: left 0.1s linear;
331
- z-index: 10;
332
- filter: drop-shadow(0 0 5px white);
333
- }
334
-
335
- .race-status {
336
- font-size: 2rem;
337
- margin-bottom: 20px;
338
- min-height: 3rem;
339
  }
340
 
341
- .purple-btn {
342
- background: var(--neon-purple);
343
- color: white;
344
- box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
345
- }
346
-
347
- .purple-btn:hover {
348
- transform: scale(1.05);
349
- box-shadow: 0 0 25px rgba(168, 85, 247, 0.8);
350
  }
351
 
 
352
  .race-footer {
353
- margin-top: 50px;
354
- border-top: 1px solid var(--neon-purple);
355
- padding-top: 20px;
 
 
 
 
 
356
  }
357
 
358
  .footer-tabs {
359
  display: flex;
360
  justify-content: center;
361
- gap: 30px;
362
  flex-wrap: wrap;
 
 
 
 
363
  }
364
 
365
- .tab-item {
366
- color: #666;
367
  cursor: pointer;
368
- transition: 0.3s;
369
- font-family: var(--font-display);
370
- font-size: 0.8rem;
371
  }
372
 
373
- .tab-item:hover { color: var(--neon-purple); text-shadow: 0 0 5px var(--neon-purple); }
 
 
 
 
374
 
375
- /* --- PLACEHOLDER MODULES --- */
376
- .placeholder-content {
377
- display: flex;
378
- flex-direction: column;
379
- align-items: center;
380
- justify-content: center;
381
- height: 50vh;
382
- border: 1px dashed #444;
383
  background: rgba(0,0,0,0.5);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
384
  }
385
 
386
- .input-field {
 
387
  background: #111;
388
- border: 1px solid var(--neon-cyan);
389
  color: white;
390
- padding: 15px;
391
  width: 100%;
392
  max-width: 400px;
393
- font-family: var(--font-display);
394
- margin-top: 20px;
395
  text-align: center;
 
 
 
 
 
 
 
396
  outline: none;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
397
  }
398
-
399
- .input-field:focus {
400
- box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
401
  }
402
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
403
  </style>
404
  </head>
405
  <body>
 
 
406
 
407
- <!-- Badge -->
408
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-badge font-orb">Built with anycoder</a>
409
-
410
- <!-- Header Navigation -->
411
- <header>
412
- <nav class="nav-container">
413
- <button onclick="navTo('landing')" class="nav-btn font-orb" id="nav-landing">HOME</button>
414
- <button onclick="navTo('garage')" class="nav-btn font-orb" id="nav-garage">GARAGE</button>
415
- <button onclick="navTo('race')" class="nav-btn font-orb" id="nav-race">NO-LIMIT RACE</button>
416
- <button onclick="navTo('rim-designer')" class="nav-btn font-orb" id="nav-rim-designer">RIM DESIGNER</button>
417
- <button onclick="navTo('rim-forge')" class="nav-btn font-orb" id="nav-rim-forge">RIM FORGE</button>
418
- <button onclick="navTo('batch-seed')" class="nav-btn font-orb" id="nav-batch-seed">BATCH SEED</button>
419
- <button onclick="navTo('garage-3d')" class="nav-btn font-orb" id="nav-garage-3d">3D GARAGE</button>
420
- <button onclick="navTo('objects-3d')" class="nav-btn font-orb" id="nav-objects-3d">3D OBJECTS</button>
421
- </nav>
422
  </header>
423
 
424
- <!-- Main Content -->
425
- <main id="app">
426
-
427
- <!-- LANDING PAGE -->
428
- <div id="landing-page" class="view-section hidden">
429
- <div class="landing-split split-left" onclick="navTo('garage')">
430
- <h1 class="landing-title font-orb neon-text-cyan">GODS RODS</h1>
431
- <div class="landing-sub font-orb">VIEW GARAGE</div>
 
 
 
 
 
 
 
 
 
 
 
432
  </div>
433
- <div class="landing-split split-right" onclick="navTo('race')">
434
- <h1 class="landing-title font-orb neon-text-purple">FANTASY RALLY</h1>
435
- <div class="landing-sub font-orb">ENTER THE RACE</div>
 
 
436
  </div>
437
  </div>
438
 
439
- <!-- GARAGE PAGE -->
440
- <div id="garage-page" class="view-section hidden">
441
- <div class="garage-header">
442
- <h2 class="font-orb neon-text-cyan" style="font-size: 2.5rem; margin-bottom: 10px;">GARAGE PROTOCOL</h2>
443
- <p class="font-orb" style="color: #888;">3D MODULE ACTIVE - INITIALIZING STORAGE</p>
444
- <br>
445
- <button onclick="generateCar()" class="action-btn cyan-btn font-orb">
446
- <span id="gen-btn-text">GENERATE UNIT</span>
447
- </button>
448
- </div>
449
-
450
- <div class="garage-grid" id="garage-grid">
451
- <!-- Cars injected here -->
452
  </div>
453
  </div>
454
 
455
- <!-- RACE PAGE -->
456
- <div id="race-page" class="view-section hidden">
457
- <div class="race-container">
458
- <h2 class="font-orb neon-text-purple" style="font-size: 2.5rem;">NO LIMIT RACE</h2>
459
- <div id="race-status" class="race-status font-orb neon-text-purple">READY TO INITIALIZE</div>
460
-
461
- <div class="race-track">
462
- <div class="lane-marker"></div>
463
-
464
- <div class="race-lane">
465
- <div class="racer" id="car-0" style="left: 0%">🏎️</div>
466
  </div>
467
- <div class="race-lane">
468
- <div class="racer" id="car-1" style="left: 0%">🏎️</div>
469
- </div>
470
- <div class="race-lane">
471
- <div class="racer" id="car-2" style="left: 0%">🏎️</div>
472
- </div>
473
- <div class="race-lane">
474
- <div class="racer" id="car-3" style="left: 0%">🏎️</div>
475
- </div>
476
- </div>
477
-
478
- <button id="start-race-btn" onclick="startRace()" class="action-btn purple-btn font-orb pulse-anim">INITIALIZE RACE</button>
479
-
480
- <div class="race-footer">
481
- <div class="footer-tabs">
482
- <span class="tab-item">LEADERBOARD</span>
483
- <span class="tab-item">BETTING</span>
484
- <span class="tab-item">UPGRADES</span>
485
- <span class="tab-item">SPONSORS</span>
486
- <span class="tab-item">REPLAYS</span>
487
  </div>
488
  </div>
489
  </div>
 
 
 
 
 
 
 
 
 
490
  </div>
491
 
492
- <!-- RIM DESIGNER -->
493
- <div id="rim-designer-page" class="view-section hidden">
494
- <div class="placeholder-content">
495
- <h2 class="font-orb neon-text-cyan">RIM DESIGNER</h2>
496
- <div class="loader" style="margin-top: 20px; border-color: var(--neon-cyan);"></div>
497
- <p style="margin-top: 20px; color: #666;">SYSTEM INITIALIZING...</p>
498
  </div>
499
  </div>
500
 
501
- <!-- RIM FORGE -->
502
- <div id="rim-forge-page" class="view-section hidden">
503
- <div class="placeholder-content">
504
- <h2 class="font-orb neon-text-purple">RIM FORGE</h2>
505
- <p style="margin-top: 20px; color: #666;">FORGE OFFLINE</p>
506
  </div>
507
  </div>
508
 
509
- <!-- BATCH SEED -->
510
- <div id="batch-seed-page" class="view-section hidden">
511
- <div class="placeholder-content">
512
- <h2 class="font-orb">BATCH SEEDER</h2>
513
- <input type="text" class="input-field font-orb" placeholder="ENTER SEED MASK...">
514
  </div>
515
  </div>
516
 
517
- <!-- 3D GARAGE -->
518
- <div id="garage-3d-page" class="view-section hidden">
519
- <div class="placeholder-content">
520
- <h2 class="font-orb neon-text-cyan">3D GARAGE</h2>
521
- <p style="margin-top: 20px; color: #666;">RENDER ENGINE DISCONNECTED</p>
522
  </div>
523
  </div>
524
 
525
- <!-- 3D OBJECTS -->
526
- <div id="objects-3d-page" class="view-section hidden">
527
- <div class="garage-header">
528
- <h2 class="font-orb">ASSET LIBRARY</h2>
529
- <div style="margin-top: 50px;">
530
- <button class="action-btn cyan-btn font-orb" style="font-size: 1.5rem; padding: 20px 40px;">PRE-BUILDS</button>
531
- <p class="font-orb" style="margin-top: 20px; color: #888;">ACCESSING 3D MODELS...</p>
532
  </div>
 
533
  </div>
534
  </div>
535
-
536
- </main>
537
 
538
  <script>
539
- // --- STATE MANAGEMENT ---
540
- const state = {
541
- currentPage: 'landing',
542
- garage: [],
543
- racing: false,
544
- carPositions: [0, 0, 0, 0],
545
- sessionID: "SESSION_" + Math.random().toString(36).substr(2, 9)
546
- };
547
-
548
- // --- NAVIGATION LOGIC ---
549
- function navTo(pageId) {
550
- // Update State
551
- state.currentPage = pageId;
552
-
553
- // Update UI Classes
554
- document.querySelectorAll('.view-section').forEach(el => {
555
- el.classList.add('hidden');
556
- el.classList.remove('fade-in');
557
  });
558
 
559
- const targetPage = document.getElementById(pageId + '-page');
560
- if(targetPage) {
561
- targetPage.classList.remove('hidden');
562
- targetPage.classList.add('fade-in');
 
 
 
 
 
 
 
 
 
 
563
  }
 
564
 
565
- // Update Nav Buttons
566
- document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));
567
- const activeNav = document.getElementById('nav-' + pageId);
568
- if(activeNav) activeNav.classList.add('active');
 
 
569
 
570
- // Trigger specific logic if needed
571
- if(pageId === 'garage' && state.garage.length === 0) {
572
- // Optional: Auto load initial cars
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
573
  }
574
  }
575
 
576
- // --- GARAGE LOGIC ---
577
- async function generateCar() {
578
- const btnText = document.getElementById('gen-btn-text');
579
- const originalText = btnText.innerText;
580
- btnText.innerText = "GENERATING...";
581
 
582
- // Simulate API delay
583
- await new Promise(r => setTimeout(r, 800));
 
 
 
584
 
585
- const seed = Math.floor(Math.random() * 1000000);
586
- const carData = `UNIT-${seed.toString(16).toUpperCase()}`;
587
-
588
- // Add to state
589
- const newCar = {
590
- id: Date.now(),
591
- car_data: carData,
592
- imageSeed: seed
593
- };
594
- state.garage.unshift(newCar); // Add to top
595
-
596
- renderGarage();
597
- btnText.innerText = originalText;
598
  }
599
 
600
- function renderGarage() {
601
- const grid = document.getElementById('garage-grid');
602
- grid.innerHTML = '';
 
 
603
 
604
- state.garage.forEach(car => {
605
- const card = document.createElement('div');
606
- card.className = 'car-card';
607
-
608
- // Using Pollinations AI for dynamic images based on seed
609
- const imgUrl = `https://image.pollinations.ai/prompt/cyberpunk%20car%20${car.carData || car.car_data}?seed=${car.imageSeed}&width=400&height=250&nologo=true`;
610
 
611
- card.innerHTML = `
612
- <div class="car-img-container">
613
- <img src="${imgUrl}" class="car-img" alt="${car.car_data}" loading="lazy">
614
- </div>
615
- <div class="car-info font-orb">
616
- <span>${car.car_data}</span>
617
- <span style="font-size: 0.7rem; color: var(--neon-cyan);">READY</span>
618
- </div>
619
- `;
620
- grid.appendChild(card);
621
- });
 
 
 
 
 
622
  }
623
 
624
- // --- RACE LOGIC ---
625
  function startRace() {
626
- if (state.racing) return;
627
- state.racing = true;
628
 
629
- document.getElementById('start-race-btn').classList.add('hidden');
630
- document.getElementById('race-status').innerText = "RACING IN PROGRESS...";
 
 
 
 
631
 
632
- // Reset positions
633
- state.carPositions = [0, 0, 0, 0];
634
- document.querySelectorAll('.racer').forEach(el => el.style.left = '0%');
635
-
636
- let winner = -1;
637
- let animationFrame;
638
-
639
- function raceLoop() {
640
- if (winner !== -1) return;
641
-
642
- let finished = false;
643
-
644
- state.carPositions = state.carPositions.map((pos, i) => {
645
- // Random speed factor
646
- const move = Math.random() * 1.5;
647
  const nextPos = pos + move;
648
-
649
- if (nextPos >= 92 && winner === -1) {
650
- winner = i;
651
- finished = true;
652
- }
653
-
654
  return Math.min(nextPos, 92);
655
  });
656
 
657
- // Update DOM
658
- state.carPositions.forEach((pos, i) => {
659
  document.getElementById(`car-${i}`).style.left = pos + '%';
660
  });
661
 
662
- if (finished) {
663
- endRace(winner);
664
- } else {
665
- animationFrame = requestAnimationFrame(raceLoop);
 
 
 
 
 
 
 
 
666
  }
667
- }
668
-
669
- animationFrame = requestAnimationFrame(raceLoop);
670
  }
671
 
672
- function endRace(winnerIndex) {
673
- state.racing = false;
674
- document.getElementById('race-status').innerHTML = `VICTORY: UNIT <span class="neon-text-purple">${winnerIndex + 1}</span>`;
675
- document.getElementById('start-race-btn').classList.remove('hidden');
676
- document.getElementById('start-race-btn').innerText = "RACE AGAIN";
 
 
 
 
 
 
 
 
 
 
 
 
 
 
677
  }
678
 
679
- // --- INITIALIZATION ---
680
- window.addEventListener('DOMContentLoaded', () => {
681
- // Start on landing page
682
- navTo('landing');
683
 
684
- // Pre-generate a couple of cars for demo
685
- setTimeout(() => {
686
- state.garage.push({
687
- id: 1,
688
- car_data: 'UNIT-A1',
689
- imageSeed: 101
690
- });
691
- state.garage.push({
692
- id: 2,
693
- car_data: 'UNIT-B2',
694
- imageSeed: 202
695
- });
696
- renderGarage();
697
- }, 500);
698
  });
699
 
 
 
700
  </script>
701
  </body>
702
  </html>
 
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
  }
 
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>