Hugging Face's logo

Spaces:
docto41
/
simulator
Running

App Files Community
docto41 commited on
Commit
36ad2f9
·
verified ·
1 Parent(s): 2dcca02

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +498 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Simulator
3
- emoji: ⚡
4
- colorFrom: gray
5
- colorTo: red
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: simulator
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: gray
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,498 @@
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>Simulateur de Conduite de Camion - Vue Panoramique</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
+ .dashboard {
11
+ background: linear-gradient(135deg, #2c3e50 0%, #1a1a2e 100%);
12
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
13
+ border-radius: 20px;
14
+ }
15
+ .steering-wheel {
16
+ transition: transform 0.3s ease;
17
+ }
18
+ .pedal {
19
+ transition: all 0.2s ease;
20
+ }
21
+ .pedal:active {
22
+ transform: translateY(5px);
23
+ }
24
+ .mirror {
25
+ background: linear-gradient(135deg, rgba(200, 200, 255, 0.1), rgba(100, 100, 150, 0.3));
26
+ border-radius: 5px;
27
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
28
+ }
29
+ .panoramic-view {
30
+ perspective: 1000px;
31
+ transform-style: preserve-3d;
32
+ transition: transform 0.5s ease;
33
+ }
34
+ .speed-needle {
35
+ transform-origin: center 70%;
36
+ transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
37
+ }
38
+ .environment-selector {
39
+ scrollbar-width: thin;
40
+ scrollbar-color: #4a5568 #2d3748;
41
+ }
42
+ .environment-selector::-webkit-scrollbar {
43
+ height: 8px;
44
+ }
45
+ .environment-selector::-webkit-scrollbar-track {
46
+ background: #2d3748;
47
+ }
48
+ .environment-selector::-webkit-scrollbar-thumb {
49
+ background-color: #4a5568;
50
+ border-radius: 4px;
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
55
+ <div class="w-full max-w-6xl">
56
+ <h1 class="text-3xl md:text-4xl font-bold text-center mb-6 text-blue-300">
57
+ <i class="fas fa-truck mr-3"></i> Simulateur de Conduite de Camion
58
+ </h1>
59
+
60
+ <div class="relative mb-8">
61
+ <!-- Vue panoramique principale -->
62
+ <div class="panoramic-view w-full h-96 md:h-[500px] bg-gray-800 rounded-xl overflow-hidden relative">
63
+ <div id="main-view" class="w-full h-full bg-cover bg-center transition-all duration-1000" style="background-image: url('https://images.unsplash.com/photo-1509316785289-025f5b8b4dd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2076&q=80');">
64
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
65
+ <p class="text-xl md:text-2xl font-semibold text-white bg-black bg-opacity-50 px-4 py-2 rounded-lg">
66
+ Sélectionnez un environnement pour commencer
67
+ </p>
68
+ </div>
69
+ </div>
70
+
71
+ <!-- Rétroviseurs -->
72
+ <div class="mirror absolute top-4 left-4 w-24 h-16 md:w-32 md:h-20 bg-gray-900 border border-gray-600 transform rotate-3">
73
+ <div class="w-full h-full bg-cover bg-center opacity-90" id="left-mirror"></div>
74
+ </div>
75
+ <div class="mirror absolute top-4 right-4 w-24 h-16 md:w-32 md:h-20 bg-gray-900 border border-gray-600 transform -rotate-3">
76
+ <div class="w-full h-full bg-cover bg-center opacity-90" id="right-mirror"></div>
77
+ </div>
78
+
79
+ <!-- Vue du dessous (optionnelle) -->
80
+ <div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-32 h-16 bg-gray-700 rounded-b-lg overflow-hidden opacity-80">
81
+ <div class="w-full h-full bg-gray-800" id="under-view"></div>
82
+ </div>
83
+ </div>
84
+
85
+ <!-- Sélecteur d'environnement -->
86
+ <div class="environment-selector mt-4 flex overflow-x-auto pb-2 gap-2">
87
+ <button onclick="changeEnvironment('montagne', 'https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')" class="flex-shrink-0 bg-gray-800 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center">
88
+ <i class="fas fa-mountain mr-2"></i> Montagne
89
+ </button>
90
+ <button onclick="changeEnvironment('autoroute', 'https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80')" class="flex-shrink-0 bg-gray-800 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center">
91
+ <i class="fas fa-road mr-2"></i> Autoroute
92
+ </button>
93
+ <button onclick="changeEnvironment('ville', 'https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2144&q=80')" class="flex-shrink-0 bg-gray-800 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center">
94
+ <i class="fas fa-city mr-2"></i> Ville
95
+ </button>
96
+ <button onclick="changeEnvironment('campagne', 'https://images.unsplash.com/photo-1500382014318-4737b1f0f59a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')" class="flex-shrink-0 bg-gray-800 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center">
97
+ <i class="fas fa-tractor mr-2"></i> Campagne
98
+ </button>
99
+ <button onclick="changeEnvironment('désert', 'https://images.unsplash.com/photo-1509316785289-025f5b8b4dd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2076&q=80')" class="flex-shrink-0 bg-gray-800 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center">
100
+ <i class="fas fa-sun mr-2"></i> Désert
101
+ </button>
102
+ <button onclick="changeEnvironment('neige', 'https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2076&q=80')" class="flex-shrink-0 bg-gray-800 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center">
103
+ <i class="fas fa-snowflake mr-2"></i> Neige
104
+ </button>
105
+ </div>
106
+ </div>
107
+
108
+ <!-- Tableau de bord -->
109
+ <div class="dashboard p-6 rounded-2xl mb-6">
110
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
111
+ <!-- Compteur de vitesse -->
112
+ <div class="bg-gray-800 bg-opacity-50 p-4 rounded-xl flex flex-col items-center">
113
+ <h3 class="text-lg font-semibold mb-3 text-blue-200"><i class="fas fa-tachometer-alt mr-2"></i> Vitesse</h3>
114
+ <div class="relative w-32 h-32 bg-gray-900 rounded-full border-4 border-blue-500 flex items-center justify-center">
115
+ <div class="absolute w-full h-full">
116
+ <svg class="w-full h-full" viewBox="0 0 100 100">
117
+ <path d="M 50,50 L 50,15 A 35,35 0 0 1 85,50 Z" fill="#3B82F6" opacity="0.2" id="speed-arc"/>
118
+ </svg>
119
+ </div>
120
+ <div class="speed-needle absolute w-1 h-12 bg-red-500 origin-bottom transform -rotate-90" style="top: 10%; left: 50%;"></div>
121
+ <div class="relative z-10 text-3xl font-bold" id="speed-display">0</div>
122
+ </div>
123
+ <div class="mt-2 text-sm text-gray-400">km/h</div>
124
+ </div>
125
+
126
+ <!-- Volant et commandes -->
127
+ <div class="flex flex-col items-center justify-center">
128
+ <div class="steering-wheel relative w-24 h-24 md:w-32 md:h-32 bg-gray-700 rounded-full border-4 border-gray-600 mb-4 flex items-center justify-center cursor-grab active:cursor-grabbing" id="steering-wheel">
129
+ <div class="w-6 h-6 md:w-8 md:h-8 bg-gray-600 rounded-full"></div>
130
+ <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-6 bg-gray-500 rounded-full"></div>
131
+ </div>
132
+
133
+ <div class="flex gap-4">
134
+ <button class="pedal bg-red-600 hover:bg-red-700 w-16 h-10 rounded-lg flex items-center justify-center text-white font-bold" id="brake-pedal">
135
+ <i class="fas fa-hand-paper mr-1"></i> Frein
136
+ </button>
137
+ <button class="pedal bg-green-600 hover:bg-green-700 w-16 h-10 rounded-lg flex items-center justify-center text-white font-bold" id="gas-pedal">
138
+ <i class="fas fa-bolt mr-1"></i> Accél.
139
+ </button>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Autres indicateurs -->
144
+ <div class="bg-gray-800 bg-opacity-50 p-4 rounded-xl">
145
+ <h3 class="text-lg font-semibold mb-3 text-blue-200"><i class="fas fa-info-circle mr-2"></i> Informations</h3>
146
+ <div class="space-y-3">
147
+ <div class="flex justify-between">
148
+ <span class="text-gray-400"><i class="fas fa-gas-pump mr-2"></i> Carburant:</span>
149
+ <div class="w-24 bg-gray-700 h-4 rounded-full overflow-hidden">
150
+ <div class="bg-yellow-500 h-full rounded-full w-full" id="fuel-level"></div>
151
+ </div>
152
+ </div>
153
+ <div class="flex justify-between">
154
+ <span class="text-gray-400"><i class="fas fa-temperature-high mr-2"></i> Température:</span>
155
+ <span class="font-mono" id="engine-temp">85°C</span>
156
+ </div>
157
+ <div class="flex justify-between">
158
+ <span class="text-gray-400"><i class="fas fa-tachometer-alt mr-2"></i> RPM:</span>
159
+ <span class="font-mono" id="rpm-display">800</span>
160
+ </div>
161
+ <div class="flex justify-between">
162
+ <span class="text-gray-400"><i class="fas fa-road mr-2"></i> Distance:</span>
163
+ <span class="font-mono" id="distance-display">0 km</span>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Contrôles supplémentaires -->
171
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
172
+ <button class="bg-gray-800 hover:bg-gray-700 px-4 py-3 rounded-lg flex items-center justify-center" id="lights-btn">
173
+ <i class="fas fa-lightbulb mr-2"></i> Phares
174
+ </button>
175
+ <button class="bg-gray-800 hover:bg-gray-700 px-4 py-3 rounded-lg flex items-center justify-center" id="horn-btn">
176
+ <i class="fas fa-bullhorn mr-2"></i> Klaxon
177
+ </button>
178
+ <button class="bg-gray-800 hover:bg-gray-700 px-4 py-3 rounded-lg flex items-center justify-center" id="gear-up">
179
+ <i class="fas fa-arrow-up mr-2"></i> Monter vitesse
180
+ </button>
181
+ <button class="bg-gray-800 hover:bg-gray-700 px-4 py-3 rounded-lg flex items-center justify-center" id="gear-down">
182
+ <i class="fas fa-arrow-down mr-2"></i> Descendre vitesse
183
+ </button>
184
+ </div>
185
+
186
+ <!-- Affichage de la vitesse actuelle -->
187
+ <div class="text-center mb-4">
188
+ <div class="text-5xl font-bold text-blue-300" id="big-speed-display">0</div>
189
+ <div class="text-gray-400">km/h</div>
190
+ </div>
191
+ </div>
192
+
193
+ <script>
194
+ // Variables d'état
195
+ let speed = 0;
196
+ let isAccelerating = false;
197
+ let isBraking = false;
198
+ let steeringAngle = 0;
199
+ let currentEnvironment = '';
200
+ let fuel = 100;
201
+ let distance = 0;
202
+ let gear = 1;
203
+ let lightsOn = false;
204
+
205
+ // Éléments DOM
206
+ const speedDisplay = document.getElementById('speed-display');
207
+ const bigSpeedDisplay = document.getElementById('big-speed-display');
208
+ const steeringWheel = document.getElementById('steering-wheel');
209
+ const gasPedal = document.getElementById('gas-pedal');
210
+ const brakePedal = document.getElementById('brake-pedal');
211
+ const speedNeedle = document.querySelector('.speed-needle');
212
+ const mainView = document.getElementById('main-view');
213
+ const leftMirror = document.getElementById('left-mirror');
214
+ const rightMirror = document.getElementById('right-mirror');
215
+ const underView = document.getElementById('under-view');
216
+ const fuelLevel = document.getElementById('fuel-level');
217
+ const rpmDisplay = document.getElementById('rpm-display');
218
+ const distanceDisplay = document.getElementById('distance-display');
219
+ const lightsBtn = document.getElementById('lights-btn');
220
+ const hornBtn = document.getElementById('horn-btn');
221
+ const gearUpBtn = document.getElementById('gear-up');
222
+ const gearDownBtn = document.getElementById('gear-down');
223
+
224
+ // Sons
225
+ const hornSound = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-car-horn-718.mp3');
226
+ const engineSound = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-truck-engine-starting-1109.mp3');
227
+ engineSound.loop = true;
228
+
229
+ // Gestionnaire d'événements pour le volant
230
+ let isSteering = false;
231
+ let startX = 0;
232
+
233
+ steeringWheel.addEventListener('mousedown', (e) => {
234
+ isSteering = true;
235
+ startX = e.clientX;
236
+ });
237
+
238
+ document.addEventListener('mousemove', (e) => {
239
+ if (isSteering) {
240
+ const deltaX = e.clientX - startX;
241
+ steeringAngle = Math.min(Math.max(deltaX / 2, -90), 90);
242
+ steeringWheel.style.transform = `rotate(${steeringAngle}deg)`;
243
+
244
+ // Ajuster la vue panoramique en fonction de l'angle du volant
245
+ const panoramicView = document.querySelector('.panoramic-view');
246
+ panoramicView.style.transform = `rotateY(${steeringAngle / 10}deg)`;
247
+
248
+ // Mettre à jour les rétroviseurs
249
+ updateMirrors();
250
+ }
251
+ });
252
+
253
+ document.addEventListener('mouseup', () => {
254
+ isSteering = false;
255
+ // Retour progressif à la position neutre
256
+ const returnToCenter = () => {
257
+ if (Math.abs(steeringAngle) > 1) {
258
+ steeringAngle *= 0.9;
259
+ steeringWheel.style.transform = `rotate(${steeringAngle}deg)`;
260
+ document.querySelector('.panoramic-view').style.transform = `rotateY(${steeringAngle / 10}deg)`;
261
+ updateMirrors();
262
+ requestAnimationFrame(returnToCenter);
263
+ } else {
264
+ steeringAngle = 0;
265
+ steeringWheel.style.transform = 'rotate(0deg)';
266
+ document.querySelector('.panoramic-view').style.transform = 'rotateY(0deg)';
267
+ updateMirrors();
268
+ }
269
+ };
270
+ returnToCenter();
271
+ });
272
+
273
+ // Gestion des pédales
274
+ gasPedal.addEventListener('mousedown', () => {
275
+ isAccelerating = true;
276
+ if (speed < 5) engineSound.play();
277
+ });
278
+
279
+ gasPedal.addEventListener('mouseup', () => {
280
+ isAccelerating = false;
281
+ });
282
+
283
+ brakePedal.addEventListener('mousedown', () => {
284
+ isBraking = true;
285
+ });
286
+
287
+ brakePedal.addEventListener('mouseup', () => {
288
+ isBraking = false;
289
+ });
290
+
291
+ // Gestion des autres contrôles
292
+ lightsBtn.addEventListener('click', () => {
293
+ lightsOn = !lightsOn;
294
+ lightsBtn.innerHTML = lightsOn ?
295
+ '<i class="fas fa-lightbulb mr-2 text-yellow-300"></i> Phares (ON)' :
296
+ '<i class="fas fa-lightbulb mr-2"></i> Phares';
297
+ });
298
+
299
+ hornBtn.addEventListener('click', () => {
300
+ hornSound.currentTime = 0;
301
+ hornSound.play();
302
+ });
303
+
304
+ gearUpBtn.addEventListener('click', () => {
305
+ if (gear < 10) gear++;
306
+ updateGearDisplay();
307
+ });
308
+
309
+ gearDownBtn.addEventListener('click', () => {
310
+ if (gear > 1) gear--;
311
+ updateGearDisplay();
312
+ });
313
+
314
+ function updateGearDisplay() {
315
+ rpmDisplay.textContent = Math.floor(800 + (speed * 20 / gear));
316
+ }
317
+
318
+ // Mise à jour des rétroviseurs
319
+ function updateMirrors() {
320
+ if (!currentEnvironment) return;
321
+
322
+ // Simuler une vue différente dans les rétroviseurs
323
+ const mirrorOffset = steeringAngle * 2;
324
+
325
+ // Rétroviseur gauche
326
+ leftMirror.style.backgroundImage = mainView.style.backgroundImage;
327
+ leftMirror.style.backgroundPositionX = `${50 - mirrorOffset}%`;
328
+ leftMirror.style.transform = `scaleX(-1)`;
329
+
330
+ // Rétroviseur droit
331
+ rightMirror.style.backgroundImage = mainView.style.backgroundImage;
332
+ rightMirror.style.backgroundPositionX = `${50 + mirrorOffset}%`;
333
+
334
+ // Vue du dessous (simplifiée)
335
+ underView.style.background = `linear-gradient(90deg, #333, #555, #333)`;
336
+ }
337
+
338
+ // Changer d'environnement
339
+ function changeEnvironment(env, imgUrl) {
340
+ currentEnvironment = env;
341
+ mainView.style.backgroundImage = `url('${imgUrl}')`;
342
+
343
+ // Mettre à jour les rétroviseurs
344
+ updateMirrors();
345
+
346
+ // Réinitialiser certaines valeurs
347
+ speed = 0;
348
+ updateSpeedDisplay();
349
+
350
+ // Jouer un son d'ambiance différent selon l'environnement
351
+ const ambientSound = new Audio();
352
+ switch(env) {
353
+ case 'montagne':
354
+ ambientSound.src = 'https://assets.mixkit.co/sfx/preview/mixkit-forest-stream-2013.mp3';
355
+ break;
356
+ case 'autoroute':
357
+ ambientSound.src = 'https://assets.mixkit.co/sfx/preview/mixkit-traffic-on-a-busy-highway-2706.mp3';
358
+ break;
359
+ case 'ville':
360
+ ambientSound.src = 'https://assets.mixkit.co/sfx/preview/mixkit-busy-city-traffic-loop-2733.mp3';
361
+ break;
362
+ case 'campagne':
363
+ ambientSound.src = 'https://assets.mixkit.co/sfx/preview/mixkit-country-meadow-ambience-1191.mp3';
364
+ break;
365
+ case 'désert':
366
+ ambientSound.src = 'https://assets.mixkit.co/sfx/preview/mixkit-warm-summer-ambience-349.mp3';
367
+ break;
368
+ case 'neige':
369
+ ambientSound.src = 'https://assets.mixkit.co/sfx/preview/mixkit-cold-wind-in-winter-1256.mp3';
370
+ break;
371
+ }
372
+ ambientSound.loop = true;
373
+ ambientSound.volume = 0.3;
374
+ ambientSound.play();
375
+ }
376
+
377
+ // Mise à jour de l'affichage de la vitesse
378
+ function updateSpeedDisplay() {
379
+ speedDisplay.textContent = Math.floor(speed);
380
+ bigSpeedDisplay.textContent = Math.floor(speed);
381
+
382
+ // Mettre à jour l'aiguille du compteur (0km/h = -90deg, 140km/h = 90deg)
383
+ const angle = -90 + (speed / 140) * 180;
384
+ speedNeedle.style.transform = `rotate(${angle}deg)`;
385
+
386
+ // Mettre à jour l'arc de couleur
387
+ const arc = document.getElementById('speed-arc');
388
+ const arcAngle = Math.min(speed / 140 * 270, 270);
389
+ arc.setAttribute('d', describeArc(50, 50, 35, 0, arcAngle));
390
+
391
+ // Mettre à jour le RPM
392
+ rpmDisplay.textContent = Math.floor(800 + (speed * 20 / gear));
393
+
394
+ // Mettre à jour la distance parcourue
395
+ distance += speed / 3600; // Ajouter la distance en km (vitesse en km/h, 1 heure = 3600 secondes)
396
+ distanceDisplay.textContent = distance.toFixed(2);
397
+
398
+ // Mettre à jour le niveau de carburant
399
+ fuel = Math.max(0, fuel - (speed / 5000));
400
+ fuelLevel.style.width = `${fuel}%`;
401
+ if (fuel < 20) fuelLevel.classList.add('bg-red-500');
402
+ else fuelLevel.classList.remove('bg-red-500');
403
+
404
+ // Ajuster le son du moteur
405
+ engineSound.volume = 0.3 + (speed / 140) * 0.7;
406
+ engineSound.playbackRate = 0.8 + (speed / 140) * 0.8;
407
+ }
408
+
409
+ // Fonction pour décrire un arc en SVG
410
+ function describeArc(x, y, radius, startAngle, endAngle) {
411
+ const start = polarToCartesian(x, y, radius, endAngle);
412
+ const end = polarToCartesian(x, y, radius, startAngle);
413
+ const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
414
+ return `M ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArcFlag} 0 ${end.x} ${end.y} L ${x} ${y} Z`;
415
+ }
416
+
417
+ function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
418
+ const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
419
+ return {
420
+ x: centerX + (radius * Math.cos(angleInRadians)),
421
+ y: centerY + (radius * Math.sin(angleInRadians))
422
+ };
423
+ }
424
+
425
+ // Boucle de simulation
426
+ function simulate() {
427
+ if (isAccelerating && fuel > 0) {
428
+ speed = Math.min(140, speed + 0.2 * gear);
429
+ } else if (isBraking) {
430
+ speed = Math.max(0, speed - 0.5);
431
+ } else {
432
+ // Ralentissement naturel
433
+ speed = Math.max(0, speed - 0.05);
434
+ }
435
+
436
+ updateSpeedDisplay();
437
+ requestAnimationFrame(simulate);
438
+ }
439
+
440
+ // Démarrer la simulation
441
+ simulate();
442
+
443
+ // Gestion du clavier
444
+ document.addEventListener('keydown', (e) => {
445
+ switch(e.key) {
446
+ case 'ArrowUp':
447
+ isAccelerating = true;
448
+ if (speed < 5) engineSound.play();
449
+ break;
450
+ case 'ArrowDown':
451
+ isBraking = true;
452
+ break;
453
+ case 'ArrowLeft':
454
+ steeringAngle = Math.max(-90, steeringAngle - 5);
455
+ steeringWheel.style.transform = `rotate(${steeringAngle}deg)`;
456
+ document.querySelector('.panoramic-view').style.transform = `rotateY(${steeringAngle / 10}deg)`;
457
+ updateMirrors();
458
+ break;
459
+ case 'ArrowRight':
460
+ steeringAngle = Math.min(90, steeringAngle + 5);
461
+ steeringWheel.style.transform = `rotate(${steeringAngle}deg)`;
462
+ document.querySelector('.panoramic-view').style.transform = `rotateY(${steeringAngle / 10}deg)`;
463
+ updateMirrors();
464
+ break;
465
+ case ' ':
466
+ hornSound.currentTime = 0;
467
+ hornSound.play();
468
+ break;
469
+ case 'l':
470
+ lightsOn = !lightsOn;
471
+ lightsBtn.innerHTML = lightsOn ?
472
+ '<i class="fas fa-lightbulb mr-2 text-yellow-300"></i> Phares (ON)' :
473
+ '<i class="fas fa-lightbulb mr-2"></i> Phares';
474
+ break;
475
+ case '+':
476
+ if (gear < 10) gear++;
477
+ updateGearDisplay();
478
+ break;
479
+ case '-':
480
+ if (gear > 1) gear--;
481
+ updateGearDisplay();
482
+ break;
483
+ }
484
+ });
485
+
486
+ document.addEventListener('keyup', (e) => {
487
+ switch(e.key) {
488
+ case 'ArrowUp':
489
+ isAccelerating = false;
490
+ break;
491
+ case 'ArrowDown':
492
+ isBraking = false;
493
+ break;
494
+ }
495
+ });
496
+ </script>
497
+ <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/simulator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
498
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ je veux conduire un camion norml et ree avec vue de partout et paysage