Hugging Face's logo

Spaces:
docto41
/
ultimate-driving-simulator
Running

App Files Community
docto41 commited on
Commit
3d77109
·
verified ·
1 Parent(s): e0d2138

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1126 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ultimate Driving Simulator
3
- emoji: 📚
4
- colorFrom: red
5
- colorTo: purple
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: ultimate-driving-simulator
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: yellow
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,1126 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Ultimate Driving Simulator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Roboto', sans-serif;
14
+ background-color: #1a1a2e;
15
+ color: white;
16
+ overflow: hidden;
17
+ }
18
+
19
+ .dashboard-item {
20
+ background: rgba(0, 0, 0, 0.5);
21
+ border-radius: 10px;
22
+ backdrop-filter: blur(5px);
23
+ border: 1px solid rgba(255, 255, 255, 0.1);
24
+ }
25
+
26
+ .steering-wheel {
27
+ transition: transform 0.3s ease;
28
+ }
29
+
30
+ .pedal {
31
+ transition: all 0.2s ease;
32
+ }
33
+
34
+ .pedal:active {
35
+ transform: translateY(5px);
36
+ }
37
+
38
+ .vehicle-view {
39
+ perspective: 1000px;
40
+ }
41
+
42
+ .vehicle-3d {
43
+ transform-style: preserve-3d;
44
+ transition: transform 0.5s ease;
45
+ }
46
+
47
+ .road {
48
+ background: linear-gradient(90deg, #333 0%, #555 50%, #333 100%);
49
+ background-size: 200% 100%;
50
+ animation: roadMove 2s linear infinite;
51
+ }
52
+
53
+ @keyframes roadMove {
54
+ 0% { background-position: 0% 0; }
55
+ 100% { background-position: -200% 0; }
56
+ }
57
+
58
+ .environment {
59
+ background: linear-gradient(to bottom, #87CEEB 0%, #1E90FF 100%);
60
+ }
61
+
62
+ .gear-indicator {
63
+ transition: all 0.2s ease;
64
+ }
65
+
66
+ .active-gear {
67
+ background-color: #3b82f6;
68
+ transform: scale(1.1);
69
+ }
70
+
71
+ .damage-effect {
72
+ position: absolute;
73
+ top: 0;
74
+ left: 0;
75
+ width: 100%;
76
+ height: 100%;
77
+ background: rgba(255, 0, 0, 0.1);
78
+ pointer-events: none;
79
+ opacity: 0;
80
+ transition: opacity 0.3s;
81
+ }
82
+
83
+ .damage-active {
84
+ opacity: 1;
85
+ }
86
+
87
+ .speed-needle {
88
+ transform-origin: center bottom;
89
+ transition: transform 0.1s linear;
90
+ }
91
+
92
+ .rpm-needle {
93
+ transform-origin: center bottom;
94
+ transition: transform 0.1s linear;
95
+ }
96
+ </style>
97
+ </head>
98
+ <body class="h-screen flex flex-col">
99
+ <!-- Top Navigation -->
100
+ <header class="bg-gray-900 py-2 px-4 flex justify-between items-center border-b border-gray-700">
101
+ <div class="flex items-center space-x-4">
102
+ <h1 class="text-2xl font-bold text-blue-400">ULTIMATE DRIVING SIMULATOR</h1>
103
+ <div class="flex space-x-2">
104
+ <button id="help-btn" class="px-3 py-1 bg-gray-700 rounded hover:bg-gray-600">
105
+ <i class="fas fa-question-circle"></i> Aide
106
+ </button>
107
+ <button id="settings-btn" class="px-3 py-1 bg-gray-700 rounded hover:bg-gray-600">
108
+ <i class="fas fa-cog"></i> Paramètres
109
+ </button>
110
+ </div>
111
+ </div>
112
+ <div class="flex items-center space-x-4">
113
+ <div class="flex items-center">
114
+ <i class="fas fa-user mr-2 text-blue-400"></i>
115
+ <span id="username">Invité</span>
116
+ </div>
117
+ <div class="flex items-center">
118
+ <i class="fas fa-star mr-2 text-yellow-400"></i>
119
+ <span id="score">0</span>
120
+ </div>
121
+ </div>
122
+ </header>
123
+
124
+ <!-- Main Content -->
125
+ <main class="flex-1 flex overflow-hidden">
126
+ <!-- Left Panel - Vehicle Selection -->
127
+ <div class="w-64 bg-gray-800 p-4 flex flex-col border-r border-gray-700 overflow-y-auto">
128
+ <h2 class="text-xl font-bold mb-4 text-blue-300">Sélection du véhicule</h2>
129
+
130
+ <div class="mb-6">
131
+ <h3 class="font-semibold mb-2 text-gray-300">Auto-école</h3>
132
+ <div class="grid grid-cols-2 gap-2">
133
+ <button class="vehicle-btn p-2 bg-gray-700 rounded hover:bg-gray-600" data-type="car" data-model="peugeot-208">
134
+ <img src="https://via.placeholder.com/60x30?text=Peugeot+208" class="w-full mb-1">
135
+ <span class="text-sm">Peugeot 208</span>
136
+ </button>
137
+ <button class="vehicle-btn p-2 bg-gray-700 rounded hover:bg-gray-600" data-type="car" data-model="renault-clio">
138
+ <img src="https://via.placeholder.com/60x30?text=Renault+Clio" class="w-full mb-1">
139
+ <span class="text-sm">Renault Clio</span>
140
+ </button>
141
+ </div>
142
+ </div>
143
+
144
+ <div class="mb-6">
145
+ <h3 class="font-semibold mb-2 text-gray-300">Camion-école</h3>
146
+ <div class="grid grid-cols-2 gap-2">
147
+ <button class="vehicle-btn p-2 bg-gray-700 rounded hover:bg-gray-600" data-type="truck" data-model="scania-r500">
148
+ <img src="https://via.placeholder.com/60x30?text=Scania+R500" class="w-full mb-1">
149
+ <span class="text-sm">Scania R500</span>
150
+ </button>
151
+ <button class="vehicle-btn p-2 bg-gray-700 rounded hover:bg-gray-600" data-type="truck" data-model="volvo-fh16">
152
+ <img src="https://via.placeholder.com/60x30?text=Volvo+FH16" class="w-full mb-1">
153
+ <span class="text-sm">Volvo FH16</span>
154
+ </button>
155
+ </div>
156
+ </div>
157
+
158
+ <div class="mb-6">
159
+ <h3 class="font-semibold mb-2 text-gray-300">Bus-école</h3>
160
+ <div class="grid grid-cols-2 gap-2">
161
+ <button class="vehicle-btn p-2 bg-gray-700 rounded hover:bg-gray-600" data-type="bus" data-model="mercedes-citaro">
162
+ <img src="https://via.placeholder.com/60x30?text=Mercedes+Citaro" class="w-full mb-1">
163
+ <span class="text-sm">Mercedes Citaro</span>
164
+ </button>
165
+ <button class="vehicle-btn p-2 bg-gray-700 rounded hover:bg-gray-600" data-type="bus" data-model="man-lion">
166
+ <img src="https://via.placeholder.com/60x30?text=MAN+Lion" class="w-full mb-1">
167
+ <span class="text-sm">MAN Lion</span>
168
+ </button>
169
+ </div>
170
+ </div>
171
+
172
+ <div class="mb-6">
173
+ <h3 class="font-semibold mb-2 text-gray-300">Moto-école</h3>
174
+ <div class="grid grid-cols-2 gap-2">
175
+ <button class="vehicle-btn p-2 bg-gray-700 rounded hover:bg-gray-600" data-type="bike" data-model="honda-cb500">
176
+ <img src="https://via.placeholder.com/60x30?text=Honda+CB500" class="w-full mb-1">
177
+ <span class="text-sm">Honda CB500</span>
178
+ </button>
179
+ <button class="vehicle-btn p-2 bg-gray-700 rounded hover:bg-gray-600" data-type="bike" data-model="yamaha-mt07">
180
+ <img src="https://via.placeholder.com/60x30?text=Yamaha+MT07" class="w-full mb-1">
181
+ <span class="text-sm">Yamaha MT07</span>
182
+ </button>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="mb-6">
187
+ <h3 class="font-semibold mb-2 text-gray-300">Sport</h3>
188
+ <div class="grid grid-cols-2 gap-2">
189
+ <button class="vehicle-btn p-2 bg-gray-700 rounded hover:bg-gray-600" data-type="sport" data-model="porsche-911">
190
+ <img src="https://via.placeholder.com/60x30?text=Porsche+911" class="w-full mb-1">
191
+ <span class="text-sm">Porsche 911</span>
192
+ </button>
193
+ <button class="vehicle-btn p-2 bg-gray-700 rounded hover:bg-gray-600" data-type="sport" data-model="ferrari-488">
194
+ <img src="https://via.placeholder.com/60x30?text=Ferrari+488" class="w-full mb-1">
195
+ <span class="text-sm">Ferrari 488</span>
196
+ </button>
197
+ </div>
198
+ </div>
199
+
200
+ <div class="mt-auto">
201
+ <h3 class="font-semibold mb-2 text-gray-300">Scénario</h3>
202
+ <select id="scenario-select" class="w-full bg-gray-700 rounded p-2 mb-2">
203
+ <option value="city">Ville</option>
204
+ <option value="highway">Autoroute</option>
205
+ <option value="countryside">Campagne</option>
206
+ <option value="mountain">Montagne</option>
207
+ <option value="night">Nuit</option>
208
+ <option value="rain">Pluie</option>
209
+ <option value="snow">Neige</option>
210
+ </select>
211
+
212
+ <button id="start-btn" class="w-full bg-green-600 hover:bg-green-700 py-2 rounded font-bold">
213
+ <i class="fas fa-play mr-2"></i> Démarrer
214
+ </button>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Center Panel - Simulation View -->
219
+ <div class="flex-1 relative">
220
+ <div class="absolute inset-0 environment">
221
+ <!-- Road and environment will be rendered here -->
222
+ <div class="absolute bottom-0 w-full h-1/3 road"></div>
223
+
224
+ <!-- Vehicle View -->
225
+ <div class="absolute bottom-0 left-0 right-0 flex justify-center vehicle-view">
226
+ <div class="vehicle-3d" id="vehicle-display">
227
+ <!-- Vehicle will be rendered here -->
228
+ <img id="vehicle-image" src="https://via.placeholder.com/400x200?text=Sélectionnez+un+véhicule" class="max-w-full max-h-64">
229
+ </div>
230
+ </div>
231
+
232
+ <!-- Damage Effect -->
233
+ <div class="damage-effect" id="damage-effect"></div>
234
+
235
+ <!-- Driving Instructions -->
236
+ <div id="instructions" class="absolute top-4 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-70 p-3 rounded-lg hidden">
237
+ <p class="text-white text-center">Appuyez sur <span class="font-bold">W</span> pour accélérer, <span class="font-bold">S</span> pour freiner, <span class="font-bold">A/D</span> pour diriger</p>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <!-- Right Panel - Dashboard and Controls -->
243
+ <div class="w-80 bg-gray-800 p-4 flex flex-col border-l border-gray-700">
244
+ <h2 class="text-xl font-bold mb-4 text-blue-300">Tableau de bord</h2>
245
+
246
+ <!-- Speed and RPM Gauges -->
247
+ <div class="grid grid-cols-2 gap-4 mb-6">
248
+ <div class="dashboard-item p-4">
249
+ <div class="flex justify-between items-center mb-2">
250
+ <span class="text-gray-400">Vitesse</span>
251
+ <span class="text-xl font-bold" id="speed-display">0</span>
252
+ </div>
253
+ <div class="relative w-full h-32">
254
+ <div class="absolute inset-0 rounded-full border-4 border-gray-600"></div>
255
+ <div class="absolute inset-0 flex items-center justify-center">
256
+ <div class="w-1 h-16 bg-red-500 speed-needle" id="speed-needle" style="transform: rotate(-90deg);"></div>
257
+ </div>
258
+ <div class="absolute bottom-0 left-0 right-0 text-center text-xs text-gray-400">km/h</div>
259
+ </div>
260
+ </div>
261
+
262
+ <div class="dashboard-item p-4">
263
+ <div class="flex justify-between items-center mb-2">
264
+ <span class="text-gray-400">RPM</span>
265
+ <span class="text-xl font-bold" id="rpm-display">0</span>
266
+ </div>
267
+ <div class="relative w-full h-32">
268
+ <div class="absolute inset-0 rounded-full border-4 border-gray-600"></div>
269
+ <div class="absolute inset-0 flex items-center justify-center">
270
+ <div class="w-1 h-16 bg-blue-500 rpm-needle" id="rpm-needle" style="transform: rotate(-90deg);"></div>
271
+ </div>
272
+ <div class="absolute bottom-0 left-0 right-0 text-center text-xs text-gray-400">x1000</div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Gear Indicator -->
278
+ <div class="dashboard-item p-4 mb-6">
279
+ <div class="text-center mb-2 text-gray-400">Vitesse</div>
280
+ <div class="flex justify-center space-x-2">
281
+ <div class="gear-indicator w-10 h-10 flex items-center justify-center rounded-full bg-gray-700" data-gear="R">R</div>
282
+ <div class="gear-indicator w-10 h-10 flex items-center justify-center rounded-full bg-gray-700" data-gear="N">N</div>
283
+ <div class="gear-indicator w-10 h-10 flex items-center justify-center rounded-full bg-gray-700 active-gear" data-gear="1">1</div>
284
+ <div class="gear-indicator w-10 h-10 flex items-center justify-center rounded-full bg-gray-700" data-gear="2">2</div>
285
+ <div class="gear-indicator w-10 h-10 flex items-center justify-center rounded-full bg-gray-700" data-gear="3">3</div>
286
+ <div class="gear-indicator w-10 h-10 flex items-center justify-center rounded-full bg-gray-700" data-gear="4">4</div>
287
+ <div class="gear-indicator w-10 h-10 flex items-center justify-center rounded-full bg-gray-700" data-gear="5">5</div>
288
+ <div class="gear-indicator w-10 h-10 flex items-center justify-center rounded-full bg-gray-700" data-gear="6">6</div>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- Vehicle Status -->
293
+ <div class="dashboard-item p-4 mb-6">
294
+ <div class="flex justify-between items-center mb-2">
295
+ <span class="text-gray-400">État du véhicule</span>
296
+ <span class="text-green-400 font-bold" id="vehicle-status">Parfait</span>
297
+ </div>
298
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
299
+ <div class="bg-green-500 h-2.5 rounded-full" id="health-bar" style="width: 100%"></div>
300
+ </div>
301
+ </div>
302
+
303
+ <!-- Fuel Level -->
304
+ <div class="dashboard-item p-4 mb-6">
305
+ <div class="flex justify-between items-center mb-2">
306
+ <span class="text-gray-400">Carburant</span>
307
+ <span class="font-bold" id="fuel-level">100%</span>
308
+ </div>
309
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
310
+ <div class="bg-yellow-500 h-2.5 rounded-full" id="fuel-bar" style="width: 100%"></div>
311
+ </div>
312
+ </div>
313
+
314
+ <!-- Controls -->
315
+ <div class="mt-auto">
316
+ <h3 class="font-semibold mb-2 text-gray-300">Contrôles</h3>
317
+
318
+ <!-- Steering Wheel -->
319
+ <div class="flex justify-center mb-4">
320
+ <div class="relative w-24 h-24 flex items-center justify-center">
321
+ <div class="absolute w-full h-full rounded-full border-4 border-gray-600"></div>
322
+ <div class="steering-wheel w-20 h-20 bg-gray-700 rounded-full flex items-center justify-center cursor-grab active:cursor-grabbing" id="steering-wheel">
323
+ <div class="w-16 h-16 rounded-full bg-gray-800 flex items-center justify-center">
324
+ <div class="w-4 h-4 rounded-full bg-blue-500"></div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+
330
+ <!-- Pedals -->
331
+ <div class="flex justify-between mb-4">
332
+ <div class="pedal w-16 h-16 bg-red-600 rounded-lg flex items-center justify-center cursor-pointer" id="brake-pedal">
333
+ <span class="text-white font-bold">FREIN</span>
334
+ </div>
335
+ <div class="pedal w-16 h-16 bg-green-600 rounded-lg flex items-center justify-center cursor-pointer" id="gas-pedal">
336
+ <span class="text-white font-bold">ACC</span>
337
+ </div>
338
+ </div>
339
+
340
+ <!-- Additional Controls -->
341
+ <div class="grid grid-cols-3 gap-2">
342
+ <button class="p-2 bg-gray-700 rounded hover:bg-gray-600" id="handbrake-btn">
343
+ <i class="fas fa-car-crash"></i> Frein à main
344
+ </button>
345
+ <button class="p-2 bg-gray-700 rounded hover:bg-gray-600" id="lights-btn">
346
+ <i class="fas fa-lightbulb"></i> Phares
347
+ </button>
348
+ <button class="p-2 bg-gray-700 rounded hover:bg-gray-600" id="horn-btn">
349
+ <i class="fas fa-bullhorn"></i> Klaxon
350
+ </button>
351
+ <button class="p-2 bg-gray-700 rounded hover:bg-gray-600" id="indicator-left">
352
+ <i class="fas fa-arrow-left"></i> Gauche
353
+ </button>
354
+ <button class="p-2 bg-gray-700 rounded hover:bg-gray-600" id="indicator-right">
355
+ <i class="fas fa-arrow-right"></i> Droite
356
+ </button>
357
+ <button class="p-2 bg-gray-700 rounded hover:bg-gray-600" id="hazard-btn">
358
+ <i class="fas fa-exclamation-triangle"></i> Warning
359
+ </button>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </main>
364
+
365
+ <!-- Bottom Status Bar -->
366
+ <footer class="bg-gray-900 py-2 px-4 flex justify-between items-center border-t border-gray-700">
367
+ <div class="flex items-center space-x-4">
368
+ <div class="flex items-center">
369
+ <i class="fas fa-clock mr-2 text-blue-400"></i>
370
+ <span id="time-display">00:00:00</span>
371
+ </div>
372
+ <div class="flex items-center">
373
+ <i class="fas fa-road mr-2 text-blue-400"></i>
374
+ <span id="distance-display">0 km</span>
375
+ </div>
376
+ <div class="flex items-center">
377
+ <i class="fas fa-tachometer-alt mr-2 text-blue-400"></i>
378
+ <span id="avg-speed-display">0 km/h</span>
379
+ </div>
380
+ </div>
381
+ <div>
382
+ <button id="reset-btn" class="px-3 py-1 bg-red-600 rounded hover:bg-red-700">
383
+ <i class="fas fa-undo mr-1"></i> Réinitialiser
384
+ </button>
385
+ </div>
386
+ </footer>
387
+
388
+ <!-- Settings Modal -->
389
+ <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center hidden z-50">
390
+ <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md">
391
+ <div class="flex justify-between items-center mb-4">
392
+ <h3 class="text-xl font-bold">Paramètres</h3>
393
+ <button id="close-settings" class="text-gray-400 hover:text-white">
394
+ <i class="fas fa-times"></i>
395
+ </button>
396
+ </div>
397
+
398
+ <div class="space-y-4">
399
+ <div>
400
+ <label class="block text-gray-300 mb-2">Contrôles</label>
401
+ <select class="w-full bg-gray-700 rounded p-2">
402
+ <option>Clavier</option>
403
+ <option>Manette</option>
404
+ <option>Volant</option>
405
+ </select>
406
+ </div>
407
+
408
+ <div>
409
+ <label class="block text-gray-300 mb-2">Difficulté</label>
410
+ <select class="w-full bg-gray-700 rounded p-2">
411
+ <option>Débutant</option>
412
+ <option>Intermédiaire</option>
413
+ <option>Expert</option>
414
+ <option>Réaliste</option>
415
+ </select>
416
+ </div>
417
+
418
+ <div>
419
+ <label class="flex items-center space-x-2">
420
+ <input type="checkbox" class="form-checkbox rounded text-blue-500">
421
+ <span class="text-gray-300">Transmission manuelle</span>
422
+ </label>
423
+ </div>
424
+
425
+ <div>
426
+ <label class="flex items-center space-x-2">
427
+ <input type="checkbox" class="form-checkbox rounded text-blue-500" checked>
428
+ <span class="text-gray-300">Aide à la conduite</span>
429
+ </label>
430
+ </div>
431
+
432
+ <div>
433
+ <label class="flex items-center space-x-2">
434
+ <input type="checkbox" class="form-checkbox rounded text-blue-500" checked>
435
+ <span class="text-gray-300">Dommages réalistes</span>
436
+ </label>
437
+ </div>
438
+
439
+ <div class="pt-4 border-t border-gray-700 flex justify-end">
440
+ <button id="save-settings" class="px-4 py-2 bg-blue-600 rounded hover:bg-blue-700">
441
+ Enregistrer
442
+ </button>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </div>
447
+
448
+ <!-- Help Modal -->
449
+ <div id="help-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center hidden z-50">
450
+ <div class="bg-gray-800 rounded-lg p-6 w-full max-w-2xl">
451
+ <div class="flex justify-between items-center mb-4">
452
+ <h3 class="text-xl font-bold">Aide & Contrôles</h3>
453
+ <button id="close-help" class="text-gray-400 hover:text-white">
454
+ <i class="fas fa-times"></i>
455
+ </button>
456
+ </div>
457
+
458
+ <div class="grid grid-cols-2 gap-6">
459
+ <div>
460
+ <h4 class="font-bold text-blue-400 mb-2">Contrôles clavier</h4>
461
+ <ul class="space-y-2">
462
+ <li class="flex justify-between">
463
+ <span class="text-gray-300">Accélérer</span>
464
+ <span class="font-mono bg-gray-700 px-2 py-1 rounded">W / ↑</span>
465
+ </li>
466
+ <li class="flex justify-between">
467
+ <span class="text-gray-300">Freiner</span>
468
+ <span class="font-mono bg-gray-700 px-2 py-1 rounded">S / ↓</span>
469
+ </li>
470
+ <li class="flex justify-between">
471
+ <span class="text-gray-300">Tourner à gauche</span>
472
+ <span class="font-mono bg-gray-700 px-2 py-1 rounded">A / ←</span>
473
+ </li>
474
+ <li class="flex justify-between">
475
+ <span class="text-gray-300">Tourner à droite</span>
476
+ <span class="font-mono bg-gray-700 px-2 py-1 rounded">D / →</span>
477
+ </li>
478
+ <li class="flex justify-between">
479
+ <span class="text-gray-300">Frein à main</span>
480
+ <span class="font-mono bg-gray-700 px-2 py-1 rounded">Espace</span>
481
+ </li>
482
+ <li class="flex justify-between">
483
+ <span class="text-gray-300">Klaxon</span>
484
+ <span class="font-mono bg-gray-700 px-2 py-1 rounded">H</span>
485
+ </li>
486
+ <li class="flex justify-between">
487
+ <span class="text-gray-300">Phares</span>
488
+ <span class="font-mono bg-gray-700 px-2 py-1 rounded">L</span>
489
+ </li>
490
+ <li class="flex justify-between">
491
+ <span class="text-gray-300">Warning</span>
492
+ <span class="font-mono bg-gray-700 px-2 py-1 rounded">K</span>
493
+ </li>
494
+ </ul>
495
+ </div>
496
+
497
+ <div>
498
+ <h4 class="font-bold text-blue-400 mb-2">Changer de vitesse</h4>
499
+ <ul class="space-y-2">
500
+ <li class="flex justify-between">
501
+ <span class="text-gray-300">Vitesse supérieure</span>
502
+ <span class="font-mono bg-gray-700 px-2 py-1 rounded">Shift +</span>
503
+ </li>
504
+ <li class="flex justify-between">
505
+ <span class="text-gray-300">Vitesse inférieure</span>
506
+ <span class="font-mono bg-gray-700 px-2 py-1 rounded">Ctrl</span>
507
+ </li>
508
+ <li class="flex justify-between">
509
+ <span class="text-gray-300">Point mort</span>
510
+ <span class="font-mono bg-gray-700 px-2 py-1 rounded">N</span>
511
+ </li>
512
+ <li class="flex justify-between">
513
+ <span class="text-gray-300">Marche arrière</span>
514
+ <span class="font-mono bg-gray-700 px-2 py-1 rounded">R</span>
515
+ </li>
516
+ </ul>
517
+
518
+ <h4 class="font-bold text-blue-400 mt-4 mb-2">Clignotants</h4>
519
+ <ul class="space-y-2">
520
+ <li class="flex justify-between">
521
+ <span class="text-gray-300">Clignotant gauche</span>
522
+ <span class="font-mono bg-gray-700 px-2 py-1 rounded">Q</span>
523
+ </li>
524
+ <li class="flex justify-between">
525
+ <span class="text-gray-300">Clignotant droit</span>
526
+ <span class="font-mono bg-gray-700 px-2 py-1 rounded">E</span>
527
+ </li>
528
+ </ul>
529
+ </div>
530
+ </div>
531
+
532
+ <div class="pt-4 mt-4 border-t border-gray-700">
533
+ <h4 class="font-bold text-blue-400 mb-2">Conseils de conduite</h4>
534
+ <ul class="list-disc pl-5 space-y-1 text-gray-300">
535
+ <li>Respectez les limitations de vitesse</li>
536
+ <li>Utilisez les clignotants avant de tourner</li>
537
+ <li>Adaptez votre vitesse aux conditions météo</li>
538
+ <li>Surveillez votre niveau de carburant</li>
539
+ <li>Évitez les collisions pour garder votre véhicule en bon état</li>
540
+ </ul>
541
+ </div>
542
+ </div>
543
+ </div>
544
+
545
+ <script>
546
+ // Game State
547
+ const gameState = {
548
+ active: false,
549
+ vehicle: null,
550
+ scenario: 'city',
551
+ speed: 0,
552
+ maxSpeed: 180,
553
+ rpm: 0,
554
+ maxRpm: 8,
555
+ gear: 1,
556
+ steering: 0,
557
+ acceleration: 0,
558
+ braking: 0,
559
+ handbrake: false,
560
+ lights: false,
561
+ hazards: false,
562
+ leftIndicator: false,
563
+ rightIndicator: false,
564
+ horn: false,
565
+ fuel: 100,
566
+ health: 100,
567
+ distance: 0,
568
+ startTime: null,
569
+ lastUpdate: null,
570
+ keys: {}
571
+ };
572
+
573
+ // Vehicle Data
574
+ const vehicles = {
575
+ 'peugeot-208': { type: 'car', name: 'Peugeot 208', maxSpeed: 180, image: 'https://via.placeholder.com/400x200?text=Peugeot+208' },
576
+ 'renault-clio': { type: 'car', name: 'Renault Clio', maxSpeed: 170, image: 'https://via.placeholder.com/400x200?text=Renault+Clio' },
577
+ 'scania-r500': { type: 'truck', name: 'Scania R500', maxSpeed: 120, image: 'https://via.placeholder.com/400x200?text=Scania+R500' },
578
+ 'volvo-fh16': { type: 'truck', name: 'Volvo FH16', maxSpeed: 130, image: 'https://via.placeholder.com/400x200?text=Volvo+FH16' },
579
+ 'mercedes-citaro': { type: 'bus', name: 'Mercedes Citaro', maxSpeed: 100, image: 'https://via.placeholder.com/400x200?text=Mercedes+Citaro' },
580
+ 'man-lion': { type: 'bus', name: 'MAN Lion', maxSpeed: 110, image: 'https://via.placeholder.com/400x200?text=MAN+Lion' },
581
+ 'honda-cb500': { type: 'bike', name: 'Honda CB500', maxSpeed: 180, image: 'https://via.placeholder.com/400x200?text=Honda+CB500' },
582
+ 'yamaha-mt07': { type: 'bike', name: 'Yamaha MT07', maxSpeed: 200, image: 'https://via.placeholder.com/400x200?text=Yamaha+MT07' },
583
+ 'porsche-911': { type: 'sport', name: 'Porsche 911', maxSpeed: 320, image: 'https://via.placeholder.com/400x200?text=Porsche+911' },
584
+ 'ferrari-488': { type: 'sport', name: 'Ferrari 488', maxSpeed: 340, image: 'https://via.placeholder.com/400x200?text=Ferrari+488' }
585
+ };
586
+
587
+ // DOM Elements
588
+ const elements = {
589
+ vehicleDisplay: document.getElementById('vehicle-display'),
590
+ vehicleImage: document.getElementById('vehicle-image'),
591
+ speedDisplay: document.getElementById('speed-display'),
592
+ rpmDisplay: document.getElementById('rpm-display'),
593
+ timeDisplay: document.getElementById('time-display'),
594
+ distanceDisplay: document.getElementById('distance-display'),
595
+ avgSpeedDisplay: document.getElementById('avg-speed-display'),
596
+ healthBar: document.getElementById('health-bar'),
597
+ vehicleStatus: document.getElementById('vehicle-status'),
598
+ fuelBar: document.getElementById('fuel-bar'),
599
+ fuelLevel: document.getElementById('fuel-level'),
600
+ speedNeedle: document.getElementById('speed-needle'),
601
+ rpmNeedle: document.getElementById('rpm-needle'),
602
+ damageEffect: document.getElementById('damage-effect'),
603
+ instructions: document.getElementById('instructions'),
604
+ scenarioSelect: document.getElementById('scenario-select'),
605
+ startBtn: document.getElementById('start-btn'),
606
+ resetBtn: document.getElementById('reset-btn'),
607
+ helpBtn: document.getElementById('help-btn'),
608
+ closeHelp: document.getElementById('close-help'),
609
+ helpModal: document.getElementById('help-modal'),
610
+ settingsBtn: document.getElementById('settings-btn'),
611
+ closeSettings: document.getElementById('close-settings'),
612
+ settingsModal: document.getElementById('settings-modal'),
613
+ saveSettings: document.getElementById('save-settings'),
614
+ steeringWheel: document.getElementById('steering-wheel'),
615
+ gasPedal: document.getElementById('gas-pedal'),
616
+ brakePedal: document.getElementById('brake-pedal'),
617
+ handbrakeBtn: document.getElementById('handbrake-btn'),
618
+ lightsBtn: document.getElementById('lights-btn'),
619
+ hornBtn: document.getElementById('horn-btn'),
620
+ indicatorLeft: document.getElementById('indicator-left'),
621
+ indicatorRight: document.getElementById('indicator-right'),
622
+ hazardBtn: document.getElementById('hazard-btn')
623
+ };
624
+
625
+ // Event Listeners
626
+ document.querySelectorAll('.vehicle-btn').forEach(btn => {
627
+ btn.addEventListener('click', () => selectVehicle(btn.dataset.model));
628
+ });
629
+
630
+ elements.scenarioSelect.addEventListener('change', (e) => {
631
+ gameState.scenario = e.target.value;
632
+ });
633
+
634
+ elements.startBtn.addEventListener('click', startSimulation);
635
+ elements.resetBtn.addEventListener('click', resetSimulation);
636
+ elements.helpBtn.addEventListener('click', () => elements.helpModal.classList.remove('hidden'));
637
+ elements.closeHelp.addEventListener('click', () => elements.helpModal.classList.add('hidden'));
638
+ elements.settingsBtn.addEventListener('click', () => elements.settingsModal.classList.remove('hidden'));
639
+ elements.closeSettings.addEventListener('click', () => elements.settingsModal.classList.add('hidden'));
640
+ elements.saveSettings.addEventListener('click', () => elements.settingsModal.classList.add('hidden'));
641
+
642
+ // Steering Wheel Drag
643
+ let isDragging = false;
644
+ let startX = 0;
645
+ let currentX = 0;
646
+
647
+ elements.steeringWheel.addEventListener('mousedown', (e) => {
648
+ isDragging = true;
649
+ startX = e.clientX;
650
+ elements.steeringWheel.style.cursor = 'grabbing';
651
+ e.preventDefault();
652
+ });
653
+
654
+ document.addEventListener('mousemove', (e) => {
655
+ if (!isDragging) return;
656
+ currentX = e.clientX;
657
+ const deltaX = currentX - startX;
658
+ const rotation = Math.min(Math.max(deltaX / 2, -90), 90);
659
+
660
+ elements.steeringWheel.style.transform = `rotate(${rotation}deg)`;
661
+ gameState.steering = rotation / 90;
662
+ });
663
+
664
+ document.addEventListener('mouseup', () => {
665
+ if (isDragging) {
666
+ isDragging = false;
667
+ elements.steeringWheel.style.transform = 'rotate(0deg)';
668
+ elements.steeringWheel.style.cursor = 'grab';
669
+ gameState.steering = 0;
670
+ }
671
+ });
672
+
673
+ // Touch support for steering wheel
674
+ elements.steeringWheel.addEventListener('touchstart', (e) => {
675
+ isDragging = true;
676
+ startX = e.touches[0].clientX;
677
+ e.preventDefault();
678
+ });
679
+
680
+ document.addEventListener('touchmove', (e) => {
681
+ if (!isDragging) return;
682
+ currentX = e.touches[0].clientX;
683
+ const deltaX = currentX - startX;
684
+ const rotation = Math.min(Math.max(deltaX / 2, -90), 90);
685
+
686
+ elements.steeringWheel.style.transform = `rotate(${rotation}deg)`;
687
+ gameState.steering = rotation / 90;
688
+ });
689
+
690
+ document.addEventListener('touchend', () => {
691
+ if (isDragging) {
692
+ isDragging = false;
693
+ elements.steeringWheel.style.transform = 'rotate(0deg)';
694
+ gameState.steering = 0;
695
+ }
696
+ });
697
+
698
+ // Pedal Controls
699
+ elements.gasPedal.addEventListener('mousedown', () => gameState.acceleration = 1);
700
+ elements.gasPedal.addEventListener('mouseup', () => gameState.acceleration = 0);
701
+ elements.gasPedal.addEventListener('mouseleave', () => gameState.acceleration = 0);
702
+ elements.gasPedal.addEventListener('touchstart', () => gameState.acceleration = 1);
703
+ elements.gasPedal.addEventListener('touchend', () => gameState.acceleration = 0);
704
+
705
+ elements.brakePedal.addEventListener('mousedown', () => gameState.braking = 1);
706
+ elements.brakePedal.addEventListener('mouseup', () => gameState.braking = 0);
707
+ elements.brakePedal.addEventListener('mouseleave', () => gameState.braking = 0);
708
+ elements.brakePedal.addEventListener('touchstart', () => gameState.braking = 1);
709
+ elements.brakePedal.addEventListener('touchend', () => gameState.braking = 0);
710
+
711
+ // Keyboard Controls
712
+ document.addEventListener('keydown', (e) => {
713
+ elements.instructions.classList.remove('hidden');
714
+
715
+ if (e.key.toLowerCase() === 'w' || e.key === 'ArrowUp') {
716
+ gameState.acceleration = 1;
717
+ } else if (e.key.toLowerCase() === 's' || e.key === 'ArrowDown') {
718
+ gameState.braking = 1;
719
+ } else if (e.key.toLowerCase() === 'a' || e.key === 'ArrowLeft') {
720
+ gameState.steering = -1;
721
+ elements.steeringWheel.style.transform = 'rotate(-90deg)';
722
+ } else if (e.key.toLowerCase() === 'd' || e.key === 'ArrowRight') {
723
+ gameState.steering = 1;
724
+ elements.steeringWheel.style.transform = 'rotate(90deg)';
725
+ } else if (e.key === ' ') {
726
+ gameState.handbrake = true;
727
+ elements.handbrakeBtn.classList.add('bg-red-500');
728
+ } else if (e.key.toLowerCase() === 'h') {
729
+ gameState.horn = true;
730
+ elements.hornBtn.classList.add('bg-yellow-500');
731
+ } else if (e.key.toLowerCase() === 'l') {
732
+ gameState.lights = !gameState.lights;
733
+ elements.lightsBtn.classList.toggle('bg-yellow-500');
734
+ } else if (e.key.toLowerCase() === 'k') {
735
+ gameState.hazards = !gameState.hazards;
736
+ elements.hazardBtn.classList.toggle('bg-yellow-500');
737
+ if (gameState.hazards) {
738
+ gameState.leftIndicator = false;
739
+ gameState.rightIndicator = false;
740
+ elements.indicatorLeft.classList.remove('bg-yellow-500');
741
+ elements.indicatorRight.classList.remove('bg-yellow-500');
742
+ }
743
+ } else if (e.key.toLowerCase() === 'q') {
744
+ if (!gameState.hazards) {
745
+ gameState.leftIndicator = !gameState.leftIndicator;
746
+ elements.indicatorLeft.classList.toggle('bg-yellow-500');
747
+ if (gameState.leftIndicator) {
748
+ gameState.rightIndicator = false;
749
+ elements.indicatorRight.classList.remove('bg-yellow-500');
750
+ }
751
+ }
752
+ } else if (e.key.toLowerCase() === 'e') {
753
+ if (!gameState.hazards) {
754
+ gameState.rightIndicator = !gameState.rightIndicator;
755
+ elements.indicatorRight.classList.toggle('bg-yellow-500');
756
+ if (gameState.rightIndicator) {
757
+ gameState.leftIndicator = false;
758
+ elements.indicatorLeft.classList.remove('bg-yellow-500');
759
+ }
760
+ }
761
+ } else if (e.key.toLowerCase() === 'n') {
762
+ changeGear('N');
763
+ } else if (e.key.toLowerCase() === 'r') {
764
+ changeGear('R');
765
+ } else if (e.key === 'Shift') {
766
+ if (gameState.gear < 6 && gameState.gear > 0) {
767
+ changeGear(gameState.gear + 1);
768
+ }
769
+ } else if (e.key === 'Control') {
770
+ if (gameState.gear > 1) {
771
+ changeGear(gameState.gear - 1);
772
+ }
773
+ }
774
+
775
+ gameState.keys[e.key] = true;
776
+ });
777
+
778
+ document.addEventListener('keyup', (e) => {
779
+ if (e.key.toLowerCase() === 'w' || e.key === 'ArrowUp') {
780
+ gameState.acceleration = 0;
781
+ } else if (e.key.toLowerCase() === 's' || e.key === 'ArrowDown') {
782
+ gameState.braking = 0;
783
+ } else if (e.key.toLowerCase() === 'a' || e.key === 'ArrowLeft') {
784
+ if (gameState.steering === -1) {
785
+ gameState.steering = 0;
786
+ elements.steeringWheel.style.transform = 'rotate(0deg)';
787
+ }
788
+ } else if (e.key.toLowerCase() === 'd' || e.key === 'ArrowRight') {
789
+ if (gameState.steering === 1) {
790
+ gameState.steering = 0;
791
+ elements.steeringWheel.style.transform = 'rotate(0deg)';
792
+ }
793
+ } else if (e.key === ' ') {
794
+ gameState.handbrake = false;
795
+ elements.handbrakeBtn.classList.remove('bg-red-500');
796
+ } else if (e.key.toLowerCase() === 'h') {
797
+ gameState.horn = false;
798
+ elements.hornBtn.classList.remove('bg-yellow-500');
799
+ }
800
+
801
+ gameState.keys[e.key] = false;
802
+ });
803
+
804
+ // Button Controls
805
+ elements.handbrakeBtn.addEventListener('click', () => {
806
+ gameState.handbrake = !gameState.handbrake;
807
+ elements.handbrakeBtn.classList.toggle('bg-red-500');
808
+ });
809
+
810
+ elements.lightsBtn.addEventListener('click', () => {
811
+ gameState.lights = !gameState.lights;
812
+ elements.lightsBtn.classList.toggle('bg-yellow-500');
813
+ });
814
+
815
+ elements.hornBtn.addEventListener('mousedown', () => {
816
+ gameState.horn = true;
817
+ elements.hornBtn.classList.add('bg-yellow-500');
818
+ });
819
+
820
+ elements.hornBtn.addEventListener('mouseup', () => {
821
+ gameState.horn = false;
822
+ elements.hornBtn.classList.remove('bg-yellow-500');
823
+ });
824
+
825
+ elements.hornBtn.addEventListener('mouseleave', () => {
826
+ gameState.horn = false;
827
+ elements.hornBtn.classList.remove('bg-yellow-500');
828
+ });
829
+
830
+ elements.indicatorLeft.addEventListener('click', () => {
831
+ if (!gameState.hazards) {
832
+ gameState.leftIndicator = !gameState.leftIndicator;
833
+ elements.indicatorLeft.classList.toggle('bg-yellow-500');
834
+ if (gameState.leftIndicator) {
835
+ gameState.rightIndicator = false;
836
+ elements.indicatorRight.classList.remove('bg-yellow-500');
837
+ }
838
+ }
839
+ });
840
+
841
+ elements.indicatorRight.addEventListener('click', () => {
842
+ if (!gameState.hazards) {
843
+ gameState.rightIndicator = !gameState.rightIndicator;
844
+ elements.indicatorRight.classList.toggle('bg-yellow-500');
845
+ if (gameState.rightIndicator) {
846
+ gameState.leftIndicator = false;
847
+ elements.indicatorLeft.classList.remove('bg-yellow-500');
848
+ }
849
+ }
850
+ });
851
+
852
+ elements.hazardBtn.addEventListener('click', () => {
853
+ gameState.hazards = !gameState.hazards;
854
+ elements.hazardBtn.classList.toggle('bg-yellow-500');
855
+ if (gameState.hazards) {
856
+ gameState.leftIndicator = false;
857
+ gameState.rightIndicator = false;
858
+ elements.indicatorLeft.classList.remove('bg-yellow-500');
859
+ elements.indicatorRight.classList.remove('bg-yellow-500');
860
+ }
861
+ });
862
+
863
+ // Functions
864
+ function selectVehicle(model) {
865
+ if (!gameState.active) {
866
+ gameState.vehicle = model;
867
+ elements.vehicleImage.src = vehicles[model].image;
868
+ gameState.maxSpeed = vehicles[model].maxSpeed;
869
+
870
+ // Update UI
871
+ document.querySelectorAll('.vehicle-btn').forEach(btn => {
872
+ btn.classList.remove('bg-blue-600');
873
+ btn.classList.add('bg-gray-700');
874
+ });
875
+
876
+ document.querySelector(`.vehicle-btn[data-model="${model}"]`).classList.add('bg-blue-600');
877
+ document.querySelector(`.vehicle-btn[data-model="${model}"]`).classList.remove('bg-gray-700');
878
+ }
879
+ }
880
+
881
+ function startSimulation() {
882
+ if (!gameState.vehicle) {
883
+ alert('Veuillez sélectionner un véhicule');
884
+ return;
885
+ }
886
+
887
+ gameState.active = true;
888
+ gameState.startTime = new Date();
889
+ gameState.lastUpdate = new Date();
890
+ gameState.distance = 0;
891
+ gameState.speed = 0;
892
+ gameState.rpm = 0;
893
+ gameState.gear = 1;
894
+ gameState.fuel = 100;
895
+ gameState.health = 100;
896
+
897
+ // Reset UI
898
+ document.querySelectorAll('.gear-indicator').forEach(el => el.classList.remove('active-gear'));
899
+ document.querySelector(`.gear-indicator[data-gear="1"]`).classList.add('active-gear');
900
+
901
+ updateVehicleStatus();
902
+ updateFuelLevel();
903
+
904
+ // Start game loop
905
+ requestAnimationFrame(gameLoop);
906
+
907
+ // Disable start button
908
+ elements.startBtn.disabled = true;
909
+ elements.startBtn.classList.remove('bg-green-600');
910
+ elements.startBtn.classList.add('bg-gray-500');
911
+ }
912
+
913
+ function resetSimulation() {
914
+ gameState.active = false;
915
+ gameState.speed = 0;
916
+ gameState.rpm = 0;
917
+ gameState.gear = 1;
918
+ gameState.steering = 0;
919
+ gameState.acceleration = 0;
920
+ gameState.braking = 0;
921
+ gameState.handbrake = false;
922
+ gameState.lights = false;
923
+ gameState.hazards = false;
924
+ gameState.leftIndicator = false;
925
+ gameState.rightIndicator = false;
926
+ gameState.horn = false;
927
+
928
+ // Reset UI
929
+ elements.speedDisplay.textContent = '0';
930
+ elements.rpmDisplay.textContent = '0';
931
+ elements.timeDisplay.textContent = '00:00:00';
932
+ elements.distanceDisplay.textContent = '0 km';
933
+ elements.avgSpeedDisplay.textContent = '0 km/h';
934
+ elements.healthBar.style.width = '100%';
935
+ elements.vehicleStatus.textContent = 'Parfait';
936
+ elements.vehicleStatus.className = 'text-green-400 font-bold';
937
+ elements.fuelBar.style.width = '100%';
938
+ elements.fuelLevel.textContent = '100%';
939
+ elements.speedNeedle.style.transform = 'rotate(-90deg)';
940
+ elements.rpmNeedle.style.transform = 'rotate(-90deg)';
941
+ elements.steeringWheel.style.transform = 'rotate(0deg)';
942
+ elements.damageEffect.classList.remove('damage-active');
943
+
944
+ document.querySelectorAll('.gear-indicator').forEach(el => el.classList.remove('active-gear'));
945
+ document.querySelector(`.gear-indicator[data-gear="1"]`).classList.add('active-gear');
946
+
947
+ elements.handbrakeBtn.classList.remove('bg-red-500');
948
+ elements.lightsBtn.classList.remove('bg-yellow-500');
949
+ elements.hornBtn.classList.remove('bg-yellow-500');
950
+ elements.indicatorLeft.classList.remove('bg-yellow-500');
951
+ elements.indicatorRight.classList.remove('bg-yellow-500');
952
+ elements.hazardBtn.classList.remove('bg-yellow-500');
953
+
954
+ // Enable start button
955
+ elements.startBtn.disabled = false;
956
+ elements.startBtn.classList.add('bg-green-600');
957
+ elements.startBtn.classList.remove('bg-gray-500');
958
+ }
959
+
960
+ function changeGear(newGear) {
961
+ if (!gameState.active) return;
962
+
963
+ document.querySelectorAll('.gear-indicator').forEach(el => el.classList.remove('active-gear'));
964
+
965
+ if (newGear === 'N') {
966
+ gameState.gear = 0;
967
+ document.querySelector(`.gear-indicator[data-gear="N"]`).classList.add('active-gear');
968
+ } else if (newGear === 'R') {
969
+ gameState.gear = -1;
970
+ document.querySelector(`.gear-indicator[data-gear="R"]`).classList.add('active-gear');
971
+ } else {
972
+ gameState.gear = newGear;
973
+ document.querySelector(`.gear-indicator[data-gear="${newGear}"]`).classList.add('active-gear');
974
+ }
975
+ }
976
+
977
+ function updateVehicleStatus() {
978
+ if (gameState.health > 75) {
979
+ elements.vehicleStatus.textContent = 'Parfait';
980
+ elements.vehicleStatus.className = 'text-green-400 font-bold';
981
+ } else if (gameState.health > 50) {
982
+ elements.vehicleStatus.textContent = 'Bon';
983
+ elements.vehicleStatus.className = 'text-yellow-400 font-bold';
984
+ } else if (gameState.health > 25) {
985
+ elements.vehicleStatus.textContent = 'Endommagé';
986
+ elements.vehicleStatus.className = 'text-orange-500 font-bold';
987
+ } else {
988
+ elements.vehicleStatus.textContent = 'Gravement endommagé';
989
+ elements.vehicleStatus.className = 'text-red-500 font-bold';
990
+ }
991
+
992
+ elements.healthBar.style.width = `${gameState.health}%`;
993
+
994
+ // Damage effect
995
+ if (gameState.health < 30) {
996
+ elements.damageEffect.classList.add('damage-active');
997
+ } else {
998
+ elements.damageEffect.classList.remove('damage-active');
999
+ }
1000
+ }
1001
+
1002
+ function updateFuelLevel() {
1003
+ elements.fuelBar.style.width = `${gameState.fuel}%`;
1004
+ elements.fuelLevel.textContent = `${Math.round(gameState.fuel)}%`;
1005
+
1006
+ if (gameState.fuel < 20) {
1007
+ elements.fuelLevel.className = 'text-red-500 font-bold';
1008
+ } else if (gameState.fuel < 50) {
1009
+ elements.fuelLevel.className = 'text-yellow-400 font-bold';
1010
+ } else {
1011
+ elements.fuelLevel.className = 'font-bold';
1012
+ }
1013
+ }
1014
+
1015
+ function updateTimeDisplay() {
1016
+ if (!gameState.startTime) return;
1017
+
1018
+ const now = new Date();
1019
+ const elapsed = new Date(now - gameState.startTime);
1020
+ const hours = elapsed.getUTCHours().toString().padStart(2, '0');
1021
+ const minutes = elapsed.getUTCMinutes().toString().padStart(2, '0');
1022
+ const seconds = elapsed.getUTCSeconds().toString().padStart(2, '0');
1023
+
1024
+ elements.timeDisplay.textContent = `${hours}:${minutes}:${seconds}`;
1025
+ }
1026
+
1027
+ function calculateAverageSpeed() {
1028
+ if (!gameState.startTime || gameState.distance === 0) return 0;
1029
+
1030
+ const now = new Date();
1031
+ const elapsedHours = (now - gameState.startTime) / (1000 * 60 * 60);
1032
+ return gameState.distance / elapsedHours;
1033
+ }
1034
+
1035
+ function gameLoop(timestamp) {
1036
+ if (!gameState.active) return;
1037
+
1038
+ const now = new Date();
1039
+ const deltaTime = (now - gameState.lastUpdate) / 1000; // in seconds
1040
+ gameState.lastUpdate = now;
1041
+
1042
+ // Physics simulation
1043
+ if (gameState.gear !== 0) { // Not in neutral
1044
+ // Acceleration
1045
+ if (gameState.acceleration > 0 && gameState.gear > 0) {
1046
+ gameState.speed += 5 * deltaTime;
1047
+ } else if (gameState.acceleration > 0 && gameState.gear < 0) {
1048
+ gameState.speed -= 3 * deltaTime;
1049
+ }
1050
+
1051
+ // Braking
1052
+ if (gameState.braking > 0) {
1053
+ gameState.speed -= 10 * deltaTime;
1054
+ }
1055
+
1056
+ // Handbrake
1057
+ if (gameState.handbrake) {
1058
+ gameState.speed -= 15 * deltaTime;
1059
+ }
1060
+
1061
+ // Natural deceleration
1062
+ if (gameState.acceleration === 0 && gameState.braking === 0 && !gameState.handbrake) {
1063
+ gameState.speed -= 2 * deltaTime;
1064
+ }
1065
+
1066
+ // Gear effects
1067
+ const gearRatio = gameState.gear > 0 ? gameState.gear : 0.5;
1068
+ gameState.speed = Math.max(Math.min(gameState.speed, gameState.maxSpeed * (gearRatio / 6)), -20);
1069
+
1070
+ // RPM calculation
1071
+ gameState.rpm = (Math.abs(gameState.speed) / gameState.maxSpeed) * gameState.maxRpm * gearRatio;
1072
+ gameState.rpm = Math.min(Math.max(gameState.rpm, 0.5), gameState.maxRpm);
1073
+
1074
+ // Fuel consumption
1075
+ gameState.fuel -= (gameState.rpm / 20) * deltaTime;
1076
+ gameState.fuel = Math.max(gameState.fuel, 0);
1077
+
1078
+ if (gameState.fuel <= 0) {
1079
+ gameState.speed *= 0.95; // Slow down when out of fuel
1080
+ }
1081
+ } else { // Neutral gear
1082
+ gameState.rpm = 0.5;
1083
+ gameState.speed *= 0.98; // Slow down faster in neutral
1084
+ }
1085
+
1086
+ // Update distance
1087
+ gameState.distance += (gameState.speed * deltaTime) / 3600; // km
1088
+
1089
+ // Update UI
1090
+ elements.speedDisplay.textContent = Math.abs(Math.round(gameState.speed));
1091
+ elements.rpmDisplay.textContent = gameState.rpm.toFixed(1);
1092
+
1093
+ // Needle positions
1094
+ const speedAngle = -90 + (180 * Math.abs(gameState.speed) / gameState.maxSpeed);
1095
+ elements.speedNeedle.style.transform = `rotate(${speedAngle}deg)`;
1096
+
1097
+ const rpmAngle = -90 + (180 * gameState.rpm / gameState.maxRpm);
1098
+ elements.rpmNeedle.style.transform = `rotate(${rpmAngle}deg)`;
1099
+
1100
+ // Vehicle rotation based on steering
1101
+ elements.vehicleDisplay.style.transform = `rotateY(${gameState.steering * 15}deg)`;
1102
+
1103
+ // Update time and distance displays
1104
+ updateTimeDisplay();
1105
+ elements.distanceDisplay.textContent = gameState.distance.toFixed(2) + ' km';
1106
+ elements.avgSpeedDisplay.textContent = Math.round(calculateAverageSpeed()) + ' km/h';
1107
+
1108
+ // Update fuel and vehicle status
1109
+ updateFuelLevel();
1110
+ updateVehicleStatus();
1111
+
1112
+ // Random damage if driving badly
1113
+ if (gameState.speed > 0 && Math.random() < 0.001 && gameState.health > 0) {
1114
+ gameState.health -= 1;
1115
+ updateVehicleStatus();
1116
+ }
1117
+
1118
+ // Continue game loop
1119
+ requestAnimationFrame(gameLoop);
1120
+ }
1121
+
1122
+ // Initialize
1123
+ document.querySelector(`.vehicle-btn[data-model="peugeot-208"]`).click();
1124
+ </script>
1125
+ <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 <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/ultimate-driving-simulator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1126
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ je veux creer le plus puissant de simulateur reel de simulator de camion de tout type , de auto ecole, camion ecole , bus ecole , moto ecole voiture de sport