Hugging Face's logo

Spaces:
Wavetype
/
anycoder-c3c7d790
Running

App Files Community
Wavetype commited on
Commit
260b10b
·
verified ·
1 Parent(s): 4619290

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +702 -19
index.html CHANGED
@@ -1,19 +1,702 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>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
+ }
93
+
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>