Hugging Face's logo

Spaces:
gg9909
/
cjdjdj
Running

App Files Community
gg9909 commited on
Commit
8ac7c96
·
verified ·
1 Parent(s): fc1be8d

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +753 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cjdjdj
3
- emoji: 🏢
4
- colorFrom: yellow
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: cjdjdj
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,753 @@
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>Precision Park - 3D Vehicle Parking Simulator</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary: #2c3e50;
11
+ --secondary: #3498db;
12
+ --accent: #e74c3c;
13
+ --light: #ecf0f1;
14
+ --dark: #1a252f;
15
+ --success: #2ecc71;
16
+ }
17
+
18
+ * {
19
+ margin: 0;
20
+ padding: 0;
21
+ box-sizing: border-box;
22
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
23
+ }
24
+
25
+ body {
26
+ background-color: var(--primary);
27
+ color: var(--light);
28
+ overflow-x: hidden;
29
+ }
30
+
31
+ header {
32
+ background: linear-gradient(135deg, var(--primary), var(--dark));
33
+ padding: 1.5rem;
34
+ text-align: center;
35
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
36
+ position: relative;
37
+ z-index: 10;
38
+ }
39
+
40
+ .logo {
41
+ display: flex;
42
+ align-items: center;
43
+ justify-content: center;
44
+ gap: 1rem;
45
+ }
46
+
47
+ .logo i {
48
+ font-size: 2.5rem;
49
+ color: var(--secondary);
50
+ }
51
+
52
+ .logo h1 {
53
+ font-size: 2.2rem;
54
+ font-weight: 700;
55
+ background: linear-gradient(to right, var(--secondary), var(--light));
56
+ -webkit-background-clip: text;
57
+ -webkit-text-fill-color: transparent;
58
+ }
59
+
60
+ .tagline {
61
+ font-size: 1.1rem;
62
+ margin-top: 0.5rem;
63
+ opacity: 0.9;
64
+ }
65
+
66
+ .container {
67
+ max-width: 1200px;
68
+ margin: 2rem auto;
69
+ padding: 0 1.5rem;
70
+ }
71
+
72
+ .game-preview {
73
+ position: relative;
74
+ height: 500px;
75
+ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1541899481282-d53bffe3c35d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');
76
+ background-size: cover;
77
+ background-position: center;
78
+ border-radius: 12px;
79
+ overflow: hidden;
80
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
81
+ margin-bottom: 3rem;
82
+ display: flex;
83
+ flex-direction: column;
84
+ justify-content: flex-end;
85
+ }
86
+
87
+ .preview-content {
88
+ padding: 2rem;
89
+ background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
90
+ }
91
+
92
+ .preview-buttons {
93
+ display: flex;
94
+ gap: 1rem;
95
+ margin-top: 1.5rem;
96
+ }
97
+
98
+ .btn {
99
+ padding: 0.8rem 1.5rem;
100
+ border-radius: 50px;
101
+ font-weight: 600;
102
+ cursor: pointer;
103
+ transition: all 0.3s ease;
104
+ border: none;
105
+ display: inline-flex;
106
+ align-items: center;
107
+ gap: 0.5rem;
108
+ }
109
+
110
+ .btn-primary {
111
+ background-color: var(--secondary);
112
+ color: white;
113
+ }
114
+
115
+ .btn-secondary {
116
+ background-color: transparent;
117
+ color: var(--light);
118
+ border: 2px solid var(--light);
119
+ }
120
+
121
+ .btn:hover {
122
+ transform: translateY(-3px);
123
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
124
+ }
125
+
126
+ .btn-primary:hover {
127
+ background-color: #2980b9;
128
+ }
129
+
130
+ .btn-secondary:hover {
131
+ background-color: rgba(255, 255, 255, 0.1);
132
+ }
133
+
134
+ section {
135
+ margin-bottom: 3rem;
136
+ }
137
+
138
+ h2 {
139
+ font-size: 2rem;
140
+ margin-bottom: 1.5rem;
141
+ position: relative;
142
+ display: inline-block;
143
+ }
144
+
145
+ h2::after {
146
+ content: '';
147
+ position: absolute;
148
+ bottom: -8px;
149
+ left: 0;
150
+ width: 60px;
151
+ height: 4px;
152
+ background-color: var(--secondary);
153
+ border-radius: 2px;
154
+ }
155
+
156
+ .features-grid {
157
+ display: grid;
158
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
159
+ gap: 1.5rem;
160
+ }
161
+
162
+ .feature-card {
163
+ background-color: rgba(255, 255, 255, 0.05);
164
+ border-radius: 10px;
165
+ padding: 1.5rem;
166
+ transition: all 0.3s ease;
167
+ border: 1px solid rgba(255, 255, 255, 0.1);
168
+ }
169
+
170
+ .feature-card:hover {
171
+ transform: translateY(-5px);
172
+ background-color: rgba(255, 255, 255, 0.1);
173
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
174
+ }
175
+
176
+ .feature-icon {
177
+ font-size: 2rem;
178
+ margin-bottom: 1rem;
179
+ color: var(--secondary);
180
+ }
181
+
182
+ .feature-card h3 {
183
+ margin-bottom: 0.8rem;
184
+ font-size: 1.3rem;
185
+ }
186
+
187
+ .feature-card p {
188
+ opacity: 0.8;
189
+ line-height: 1.6;
190
+ }
191
+
192
+ .vehicle-showcase {
193
+ display: flex;
194
+ overflow-x: auto;
195
+ gap: 1.5rem;
196
+ padding-bottom: 1rem;
197
+ scroll-snap-type: x mandatory;
198
+ }
199
+
200
+ .vehicle-showcase::-webkit-scrollbar {
201
+ height: 8px;
202
+ }
203
+
204
+ .vehicle-showcase::-webkit-scrollbar-track {
205
+ background: rgba(255, 255, 255, 0.1);
206
+ border-radius: 10px;
207
+ }
208
+
209
+ .vehicle-showcase::-webkit-scrollbar-thumb {
210
+ background: var(--secondary);
211
+ border-radius: 10px;
212
+ }
213
+
214
+ .vehicle-card {
215
+ min-width: 250px;
216
+ scroll-snap-align: start;
217
+ background-color: rgba(255, 255, 255, 0.05);
218
+ border-radius: 10px;
219
+ overflow: hidden;
220
+ transition: all 0.3s ease;
221
+ border: 1px solid rgba(255, 255, 255, 0.1);
222
+ }
223
+
224
+ .vehicle-card:hover {
225
+ transform: scale(1.03);
226
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
227
+ }
228
+
229
+ .vehicle-image {
230
+ height: 150px;
231
+ background-color: var(--dark);
232
+ display: flex;
233
+ align-items: center;
234
+ justify-content: center;
235
+ font-size: 3rem;
236
+ color: rgba(255, 255, 255, 0.2);
237
+ }
238
+
239
+ .vehicle-info {
240
+ padding: 1.2rem;
241
+ }
242
+
243
+ .vehicle-info h3 {
244
+ margin-bottom: 0.5rem;
245
+ }
246
+
247
+ .vehicle-type {
248
+ display: inline-block;
249
+ padding: 0.3rem 0.8rem;
250
+ background-color: var(--secondary);
251
+ border-radius: 50px;
252
+ font-size: 0.8rem;
253
+ margin-bottom: 0.8rem;
254
+ }
255
+
256
+ .difficulty-meter {
257
+ display: flex;
258
+ gap: 0.3rem;
259
+ margin-top: 0.8rem;
260
+ }
261
+
262
+ .meter-dot {
263
+ width: 10px;
264
+ height: 10px;
265
+ border-radius: 50%;
266
+ background-color: rgba(255, 255, 255, 0.2);
267
+ }
268
+
269
+ .meter-dot.active {
270
+ background-color: var(--accent);
271
+ }
272
+
273
+ .environment-gallery {
274
+ display: grid;
275
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
276
+ gap: 1.5rem;
277
+ }
278
+
279
+ .environment-card {
280
+ position: relative;
281
+ height: 200px;
282
+ border-radius: 10px;
283
+ overflow: hidden;
284
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
285
+ }
286
+
287
+ .environment-image {
288
+ width: 100%;
289
+ height: 100%;
290
+ object-fit: cover;
291
+ transition: transform 0.5s ease;
292
+ }
293
+
294
+ .environment-overlay {
295
+ position: absolute;
296
+ bottom: 0;
297
+ left: 0;
298
+ right: 0;
299
+ background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
300
+ padding: 1rem;
301
+ transform: translateY(100%);
302
+ transition: transform 0.3s ease;
303
+ }
304
+
305
+ .environment-card:hover .environment-overlay {
306
+ transform: translateY(0);
307
+ }
308
+
309
+ .environment-card:hover .environment-image {
310
+ transform: scale(1.1);
311
+ }
312
+
313
+ .tech-specs {
314
+ background-color: rgba(0, 0, 0, 0.3);
315
+ border-radius: 10px;
316
+ padding: 2rem;
317
+ border: 1px solid rgba(255, 255, 255, 0.1);
318
+ }
319
+
320
+ .spec-grid {
321
+ display: grid;
322
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
323
+ gap: 1.5rem;
324
+ margin-top: 1.5rem;
325
+ }
326
+
327
+ .spec-item {
328
+ display: flex;
329
+ align-items: center;
330
+ gap: 1rem;
331
+ }
332
+
333
+ .spec-icon {
334
+ font-size: 1.5rem;
335
+ color: var(--secondary);
336
+ }
337
+
338
+ .spec-info h4 {
339
+ margin-bottom: 0.3rem;
340
+ }
341
+
342
+ .spec-info p {
343
+ opacity: 0.8;
344
+ font-size: 0.9rem;
345
+ }
346
+
347
+ footer {
348
+ background-color: var(--dark);
349
+ padding: 3rem 1.5rem;
350
+ text-align: center;
351
+ margin-top: 3rem;
352
+ }
353
+
354
+ .footer-content {
355
+ max-width: 800px;
356
+ margin: 0 auto;
357
+ }
358
+
359
+ .social-links {
360
+ display: flex;
361
+ justify-content: center;
362
+ gap: 1.5rem;
363
+ margin: 1.5rem 0;
364
+ }
365
+
366
+ .social-link {
367
+ width: 40px;
368
+ height: 40px;
369
+ border-radius: 50%;
370
+ background-color: rgba(255, 255, 255, 0.1);
371
+ display: flex;
372
+ align-items: center;
373
+ justify-content: center;
374
+ transition: all 0.3s ease;
375
+ }
376
+
377
+ .social-link:hover {
378
+ background-color: var(--secondary);
379
+ transform: translateY(-3px);
380
+ }
381
+
382
+ .copyright {
383
+ opacity: 0.7;
384
+ font-size: 0.9rem;
385
+ margin-top: 1.5rem;
386
+ }
387
+
388
+ @media (max-width: 768px) {
389
+ .game-preview {
390
+ height: 400px;
391
+ }
392
+
393
+ .preview-buttons {
394
+ flex-direction: column;
395
+ }
396
+
397
+ .btn {
398
+ width: 100%;
399
+ justify-content: center;
400
+ }
401
+ }
402
+ </style>
403
+ </head>
404
+ <body>
405
+ <header>
406
+ <div class="logo">
407
+ <i class="fas fa-car"></i>
408
+ <h1>Precision Park</h1>
409
+ </div>
410
+ <p class="tagline">The ultimate 3D vehicle parking simulation experience</p>
411
+ </header>
412
+
413
+ <div class="container">
414
+ <div class="game-preview">
415
+ <div class="preview-content">
416
+ <h2>Master the Art of Parking</h2>
417
+ <p>Experience the most realistic parking simulator with advanced physics, multiple camera angles, and challenging scenarios that will test your precision driving skills.</p>
418
+ <div class="preview-buttons">
419
+ <button class="btn btn-primary"><i class="fas fa-play"></i> Watch Trailer</button>
420
+ <button class="btn btn-secondary"><i class="fas fa-download"></i> Download Demo</button>
421
+ </div>
422
+ </div>
423
+ </div>
424
+
425
+ <section>
426
+ <h2>Gameplay Features</h2>
427
+ <div class="features-grid">
428
+ <div class="feature-card">
429
+ <div class="feature-icon">
430
+ <i class="fas fa-car-side"></i>
431
+ </div>
432
+ <h3>Realistic Physics</h3>
433
+ <p>Advanced physics engine that accurately simulates vehicle weight, suspension, and traction for an authentic driving experience.</p>
434
+ </div>
435
+
436
+ <div class="feature-card">
437
+ <div class="feature-icon">
438
+ <i class="fas fa-camera"></i>
439
+ </div>
440
+ <h3>Multiple Camera Angles</h3>
441
+ <p>Switch between top-down, third-person, and first-person views to find the perfect perspective for each parking challenge.</p>
442
+ </div>
443
+
444
+ <div class="feature-card">
445
+ <div class="feature-icon">
446
+ <i class="fas fa-sliders-h"></i>
447
+ </div>
448
+ <h3>Precision Controls</h3>
449
+ <p>Fine-tuned steering, acceleration, and braking controls that respond to subtle inputs for perfect parking maneuvers.</p>
450
+ </div>
451
+
452
+ <div class="feature-card">
453
+ <div class="feature-icon">
454
+ <i class="fas fa-car-crash"></i>
455
+ </div>
456
+ <h3>Damage System</h3>
457
+ <p>Realistic vehicle damage that affects performance and appearance, encouraging careful driving.</p>
458
+ </div>
459
+
460
+ <div class="feature-card">
461
+ <div class="feature-icon">
462
+ <i class="fas fa-cloud-sun-rain"></i>
463
+ </div>
464
+ <h3>Dynamic Weather</h3>
465
+ <p>Changing weather conditions that affect driving physics, from sunny days to rainy nights with slippery roads.</p>
466
+ </div>
467
+
468
+ <div class="feature-card">
469
+ <div class="feature-icon">
470
+ <i class="fas fa-trophy"></i>
471
+ </div>
472
+ <h3>Progression System</h3>
473
+ <p>Unlock new vehicles, locations, and challenges as you improve your parking skills and complete objectives.</p>
474
+ </div>
475
+ </div>
476
+ </section>
477
+
478
+ <section>
479
+ <h2>Vehicle Fleet</h2>
480
+ <div class="vehicle-showcase">
481
+ <div class="vehicle-card">
482
+ <div class="vehicle-image">
483
+ <i class="fas fa-car"></i>
484
+ </div>
485
+ <div class="vehicle-info">
486
+ <span class="vehicle-type">Compact</span>
487
+ <h3>Urban Zipp</h3>
488
+ <p>Perfect for tight city parking spots with excellent maneuverability.</p>
489
+ <div class="difficulty-meter">
490
+ <div class="meter-dot active"></div>
491
+ <div class="meter-dot"></div>
492
+ <div class="meter-dot"></div>
493
+ </div>
494
+ </div>
495
+ </div>
496
+
497
+ <div class="vehicle-card">
498
+ <div class="vehicle-image">
499
+ <i class="fas fa-truck-pickup"></i>
500
+ </div>
501
+ <div class="vehicle-info">
502
+ <span class="vehicle-type">Truck</span>
503
+ <h3>Mountain Hauler</h3>
504
+ <p>Challenge yourself with this large vehicle's turning radius.</p>
505
+ <div class="difficulty-meter">
506
+ <div class="meter-dot active"></div>
507
+ <div class="meter-dot active"></div>
508
+ <div class="meter-dot active"></div>
509
+ </div>
510
+ </div>
511
+ </div>
512
+
513
+ <div class="vehicle-card">
514
+ <div class="vehicle-image">
515
+ <i class="fas fa-truck"></i>
516
+ </div>
517
+ <div class="vehicle-info">
518
+ <span class="vehicle-type">SUV</span>
519
+ <h3>Trail Explorer</h3>
520
+ <p>Higher vantage point but requires more space to maneuver.</p>
521
+ <div class="difficulty-meter">
522
+ <div class="meter-dot active"></div>
523
+ <div class="meter-dot active"></div>
524
+ <div class="meter-dot"></div>
525
+ </div>
526
+ </div>
527
+ </div>
528
+
529
+ <div class="vehicle-card">
530
+ <div class="vehicle-image">
531
+ <i class="fas fa-car-side"></i>
532
+ </div>
533
+ <div class="vehicle-info">
534
+ <span class="vehicle-type">Luxury</span>
535
+ <h3>Elite Cruiser</h3>
536
+ <p>Premium handling with extra length that demands precision.</p>
537
+ <div class="difficulty-meter">
538
+ <div class="meter-dot active"></div>
539
+ <div class="meter-dot active"></div>
540
+ <div class="meter-dot"></div>
541
+ </div>
542
+ </div>
543
+ </div>
544
+
545
+ <div class="vehicle-card">
546
+ <div class="vehicle-image">
547
+ <i class="fas fa-bus"></i>
548
+ </div>
549
+ <div class="vehicle-info">
550
+ <span class="vehicle-type">Special</span>
551
+ <h3>City Bus</h3>
552
+ <p>The ultimate parking challenge for true masters.</p>
553
+ <div class="difficulty-meter">
554
+ <div class="meter-dot active"></div>
555
+ <div class="meter-dot active"></div>
556
+ <div class="meter-dot active"></div>
557
+ </div>
558
+ </div>
559
+ </div>
560
+ </div>
561
+ </section>
562
+
563
+ <section>
564
+ <h2>Parking Environments</h2>
565
+ <div class="environment-gallery">
566
+ <div class="environment-card">
567
+ <img src="https://images.unsplash.com/photo-1605559421013-0be1c4df6bc4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Multi-story Parking" class="environment-image">
568
+ <div class="environment-overlay">
569
+ <h3>Multi-story Parking</h3>
570
+ <p>Tight spiral ramps and compact spaces challenge your spatial awareness.</p>
571
+ </div>
572
+ </div>
573
+
574
+ <div class="environment-card">
575
+ <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Shopping Mall" class="environment-image">
576
+ <div class="environment-overlay">
577
+ <h3>Shopping Mall</h3>
578
+ <p>Busy parking lots with distracted pedestrians and limited visibility.</p>
579
+ </div>
580
+ </div>
581
+
582
+ <div class="environment-card">
583
+ <img src="https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1169&q=80" alt="Airport Terminal" class="environment-image">
584
+ <div class="environment-overlay">
585
+ <h3>Airport Terminal</h3>
586
+ <p>Long vehicle lanes and strict time limits for passenger drop-offs.</p>
587
+ </div>
588
+ </div>
589
+
590
+ <div class="environment-card">
591
+ <img src="https://images.unsplash.com/photo-1631719979850-d8c8d338c0b9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Street Parking" class="environment-image">
592
+ <div class="environment-overlay">
593
+ <h3>Street Parking</h3>
594
+ <p>Parallel parking challenges with busy traffic flowing behind you.</p>
595
+ </div>
596
+ </div>
597
+
598
+ <div class="environment-card">
599
+ <img src="https://images.unsplash.com/photo-1605559421013-0be1c4df6bc4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Underground Garage" class="environment-image">
600
+ <div class="environment-overlay">
601
+ <h3>Underground Garage</h3>
602
+ <p>Low ceilings and support columns create challenging blind spots.</p>
603
+ </div>
604
+ </div>
605
+
606
+ <div class="environment-card">
607
+ <img src="https://images.unsplash.com/photo-1516455590571-18256e5bb9ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Residential Area" class="environment-image">
608
+ <div class="environment-overlay">
609
+ <h3>Residential Area</h3>
610
+ <p>Park between expensive cars with no margin for error.</p>
611
+ </div>
612
+ </div>
613
+ </div>
614
+ </section>
615
+
616
+ <section>
617
+ <h2>Technical Specifications</h2>
618
+ <div class="tech-specs">
619
+ <p>Precision Park is designed to deliver smooth performance across all platforms while maintaining high-quality visuals and realistic physics.</p>
620
+
621
+ <div class="spec-grid">
622
+ <div class="spec-item">
623
+ <div class="spec-icon">
624
+ <i class="fas fa-desktop"></i>
625
+ </div>
626
+ <div class="spec-info">
627
+ <h4>Platforms</h4>
628
+ <p>PC (Windows/Mac), PlayStation, Xbox, Mobile (iOS/Android)</p>
629
+ </div>
630
+ </div>
631
+
632
+ <div class="spec-item">
633
+ <div class="spec-icon">
634
+ <i class="fas fa-microchip"></i>
635
+ </div>
636
+ <div class="spec-info">
637
+ <h4>Engine</h4>
638
+ <p>Custom-built 3D engine with PhysX physics integration</p>
639
+ </div>
640
+ </div>
641
+
642
+ <div class="spec-item">
643
+ <div class="spec-icon">
644
+ <i class="fas fa-tachometer-alt"></i>
645
+ </div>
646
+ <div class="spec-info">
647
+ <h4>Performance</h4>
648
+ <p>60 FPS target on all platforms with dynamic resolution scaling</p>
649
+ </div>
650
+ </div>
651
+
652
+ <div class="spec-item">
653
+ <div class="spec-icon">
654
+ <i class="fas fa-users"></i>
655
+ </div>
656
+ <div class="spec-info">
657
+ <h4>Multiplayer</h4>
658
+ <p>Up to 8 players in cooperative and competitive modes</p>
659
+ </div>
660
+ </div>
661
+
662
+ <div class="spec-item">
663
+ <div class="spec-icon">
664
+ <i class="fas fa-cloud"></i>
665
+ </div>
666
+ <div class="spec-info">
667
+ <h4>Cloud Saves</h4>
668
+ <p>Cross-platform progression with cloud save synchronization</p>
669
+ </div>
670
+ </div>
671
+
672
+ <div class="spec-item">
673
+ <div class="spec-icon">
674
+ <i class="fas fa-gamepad"></i>
675
+ </div>
676
+ <div class="spec-info">
677
+ <h4>Controller Support</h4>
678
+ <p>Full support for gamepads, wheels, and custom input devices</p>
679
+ </div>
680
+ </div>
681
+ </div>
682
+ </div>
683
+ </section>
684
+ </div>
685
+
686
+ <footer>
687
+ <div class="footer-content">
688
+ <div class="logo">
689
+ <i class="fas fa-car"></i>
690
+ <h1>Precision Park</h1>
691
+ </div>
692
+ <p>The most realistic parking simulation experience across all platforms.</p>
693
+
694
+ <div class="social-links">
695
+ <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
696
+ <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
697
+ <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
698
+ <a href="#" class="social-link"><i class="fab fa-youtube"></i></a>
699
+ <a href="#" class="social-link"><i class="fab fa-discord"></i></a>
700
+ </div>
701
+
702
+ <div class="preview-buttons">
703
+ <button class="btn btn-primary"><i class="fas fa-shopping-cart"></i> Pre-order Now</button>
704
+ </div>
705
+
706
+ <p class="copyright">© 2023 Precision Park Simulation Studios. All rights reserved.</p>
707
+ </div>
708
+ </footer>
709
+
710
+ <script>
711
+ // Simple interactive elements
712
+ document.addEventListener('DOMContentLoaded', function() {
713
+ // Add hover effect to feature cards
714
+ const featureCards = document.querySelectorAll('.feature-card');
715
+ featureCards.forEach(card => {
716
+ card.addEventListener('mouseenter', function() {
717
+ const icon = this.querySelector('.feature-icon i');
718
+ icon.style.transform = 'scale(1.2)';
719
+ icon.style.transition = 'transform 0.3s ease';
720
+ });
721
+
722
+ card.addEventListener('mouseleave', function() {
723
+ const icon = this.querySelector('.feature-icon i');
724
+ icon.style.transform = 'scale(1)';
725
+ });
726
+ });
727
+
728
+ // Add click effect to buttons
729
+ const buttons = document.querySelectorAll('.btn');
730
+ buttons.forEach(button => {
731
+ button.addEventListener('click', function() {
732
+ this.style.transform = 'scale(0.95)';
733
+ setTimeout(() => {
734
+ this.style.transform = 'scale(1)';
735
+ }, 200);
736
+
737
+ // In a real implementation, this would trigger the appropriate action
738
+ alert('This would navigate to the selected feature in a full implementation.');
739
+ });
740
+ });
741
+
742
+ // Simple vehicle selection animation
743
+ const vehicleCards = document.querySelectorAll('.vehicle-card');
744
+ vehicleCards.forEach(card => {
745
+ card.addEventListener('click', function() {
746
+ vehicleCards.forEach(c => c.style.border = '1px solid rgba(255, 255, 255, 0.1)');
747
+ this.style.border = `2px solid ${getComputedStyle(document.documentElement).getPropertyValue('--secondary')}`;
748
+ });
749
+ });
750
+ });
751
+ </script>
752
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
753
+ </html>