Hugging Face's logo

Spaces:
docto41
/
camion
Running

App Files Community
docto41 commited on
Commit
ebee0f4
·
verified ·
1 Parent(s): 55332e2

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +709 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Camion
3
- emoji: 🚀
4
- colorFrom: yellow
5
- colorTo: blue
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: camion
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: green
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,709 @@
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 en Direct - La Réunion</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=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #0f172a;
15
+ color: #e2e8f0;
16
+ overflow-x: hidden;
17
+ }
18
+
19
+ .hero-gradient {
20
+ background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
21
+ }
22
+
23
+ .live-indicator {
24
+ animation: livePulse 1.5s infinite;
25
+ }
26
+
27
+ @keyframes livePulse {
28
+ 0%, 100% { opacity: 1; }
29
+ 50% { opacity: 0.5; }
30
+ }
31
+
32
+ .dashboard-gauge {
33
+ background: conic-gradient(#10b981 0% 25%, #3b82f6 25% 50%, #f59e0b 50% 75%, #ef4444 75% 100%);
34
+ }
35
+
36
+ @keyframes engineRumble {
37
+ 0%, 100% { transform: translateX(0); }
38
+ 25% { transform: translateX(-1px); }
39
+ 75% { transform: translateX(1px); }
40
+ }
41
+
42
+ .engine-animation {
43
+ animation: engineRumble 0.1s infinite;
44
+ }
45
+
46
+ /* Animation de conduite */
47
+ @keyframes drive {
48
+ 0% { transform: translateX(0) translateY(0); }
49
+ 25% { transform: translateX(2px) translateY(1px); }
50
+ 50% { transform: translateX(0) translateY(0); }
51
+ 75% { transform: translateX(-2px) translateY(-1px); }
52
+ }
53
+
54
+ .driving-animation {
55
+ animation: drive 0.3s infinite;
56
+ }
57
+
58
+ .road-animation {
59
+ animation: roadMove linear infinite;
60
+ }
61
+
62
+ @keyframes roadMove {
63
+ 0% { background-position: 0 0; }
64
+ 100% { background-position: 0 1000px; }
65
+ }
66
+
67
+ .speed-effect-1 {
68
+ animation-duration: 10s;
69
+ }
70
+ .speed-effect-2 {
71
+ animation-duration: 7s;
72
+ }
73
+ .speed-effect-3 {
74
+ animation-duration: 5s;
75
+ }
76
+ .speed-effect-4 {
77
+ animation-duration: 3s;
78
+ }
79
+ </style>
80
+ </head>
81
+ <body>
82
+ <!-- Navigation -->
83
+ <nav class="bg-gray-900 border-b border-gray-800 sticky top-0 z-50">
84
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
85
+ <div class="flex items-center justify-between h-16">
86
+ <div class="flex items-center">
87
+ <div class="flex-shrink-0">
88
+ <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/3069/3069172.png" alt="Logo">
89
+ </div>
90
+ <div class="hidden md:block">
91
+ <div class="ml-10 flex items-baseline space-x-4">
92
+ <a href="#" class="bg-blue-900 text-white px-3 py-2 rounded-md text-sm font-medium">Accueil</a>
93
+ <a href="#simulateur" class="text-gray-300 hover:bg-gray-800 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Simulateur</a>
94
+ <a href="#" class="text-gray-300 hover:bg-gray-800 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Camions</a>
95
+ <a href="#" class="text-gray-300 hover:bg-gray-800 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Routes</a>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ <div class="hidden md:block">
100
+ <div class="ml-4 flex items-center md:ml-6">
101
+ <button class="bg-blue-800 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
102
+ <i class="fas fa-user mr-2"></i> Connexion
103
+ </button>
104
+ </div>
105
+ </div>
106
+ <div class="-mr-2 flex md:hidden">
107
+ <button type="button" class="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
108
+ <span class="sr-only">Menu</span>
109
+ <i class="fas fa-bars"></i>
110
+ </button>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </nav>
115
+
116
+ <!-- Simulateur en Direct -->
117
+ <div id="simulateur" class="py-8 bg-gray-900 px-4 sm:px-6 lg:px-8">
118
+ <div class="max-w-7xl mx-auto">
119
+ <div class="text-center mb-8">
120
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
121
+ <span class="block">Simulateur de Conduite</span>
122
+ <span class="block text-blue-400">La Réunion - En Direct</span>
123
+ </h2>
124
+ <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-300">
125
+ Prenez le volant et parcourez les routes de l'île en temps réel
126
+ </p>
127
+ </div>
128
+
129
+ <div class="bg-gray-800 rounded-xl overflow-hidden shadow-xl border-2 border-blue-700">
130
+ <!-- Vue de conduite -->
131
+ <div id="game-view" class="w-full h-96 bg-gray-900 relative overflow-hidden">
132
+ <!-- Route animée -->
133
+ <div id="road" class="absolute inset-0 bg-gray-800 road-animation speed-effect-1"
134
+ style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2IiBoZWlnaHQ9IjYiPgo8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiBmaWxsPSIjMTgyNDQ0Ij48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDBMNiA2IiBzdHJva2U9IiMyYTM3NTUiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8cGF0aCBkPSJNNiAwTDAgNiIgc3Ryb2tlPSIjMmEzNzU1IiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KPC9zdmc+');">
135
+ </div>
136
+
137
+ <!-- Paysage -->
138
+ <div id="landscape" class="absolute inset-0 bg-gradient-to-t from-green-900/20 to-transparent"></div>
139
+
140
+ <!-- Véhicule -->
141
+ <div id="vehicle" class="absolute bottom-10 left-1/2 transform -translate-x-1/2 w-32 h-16 bg-blue-600 rounded-lg flex items-center justify-center">
142
+ <div class="w-6 h-3 bg-yellow-300 rounded-full absolute -left-2"></div>
143
+ <div class="w-6 h-3 bg-yellow-300 rounded-full absolute -right-2"></div>
144
+ <div class="w-8 h-8 bg-gray-700 rounded-full absolute -bottom-4 left-4"></div>
145
+ <div class="w-8 h-8 bg-gray-700 rounded-full absolute -bottom-4 right-4"></div>
146
+ </div>
147
+
148
+ <!-- HUD de conduite -->
149
+ <div class="absolute bottom-4 left-4 right-4 bg-black/50 rounded-lg p-3 text-white backdrop-blur-sm">
150
+ <div class="flex justify-between items-center">
151
+ <div>
152
+ <div class="text-sm text-gray-300">Vitesse</div>
153
+ <div class="text-2xl font-bold"><span id="speed">0</span> km/h</div>
154
+ </div>
155
+ <div class="text-center">
156
+ <div class="text-sm text-gray-300">RPM</div>
157
+ <div class="text-2xl font-bold"><span id="rpm">0</span></div>
158
+ </div>
159
+ <div class="text-right">
160
+ <div class="text-sm text-gray-300">Distance</div>
161
+ <div class="text-2xl font-bold"><span id="distance">0</span> km</div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Indicateur LIVE -->
167
+ <div class="absolute top-4 right-4 bg-red-600 text-white px-3 py-1 rounded-full text-sm font-bold flex items-center live-indicator">
168
+ <div class="w-2 h-2 bg-white rounded-full mr-2"></div>
169
+ EN DIRECT
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Contrôles de conduite -->
174
+ <div class="bg-gray-800 p-4 flex flex-wrap justify-between items-center border-t border-gray-700">
175
+ <div class="flex space-x-2 mb-2 sm:mb-0">
176
+ <button id="engine-btn" class="bg-gray-700 hover:bg-gray-600 text-white p-3 rounded-full">
177
+ <i class="fas fa-power-off"></i>
178
+ </button>
179
+ <button id="lights-btn" class="bg-gray-700 hover:bg-gray-600 text-white p-3 rounded-full">
180
+ <i class="fas fa-lightbulb"></i>
181
+ </button>
182
+ <button id="horn-btn" class="bg-gray-700 hover:bg-gray-600 text-white p-3 rounded-full">
183
+ <i class="fas fa-bullhorn"></i>
184
+ </button>
185
+ </div>
186
+
187
+ <div class="flex space-x-2">
188
+ <button id="left-signal" class="bg-gray-700 hover:bg-gray-600 text-yellow-400 p-3 rounded-full">
189
+ <i class="fas fa-arrow-left"></i>
190
+ </button>
191
+ <button id="right-signal" class="bg-gray-700 hover:bg-gray-600 text-yellow-400 p-3 rounded-full">
192
+ <i class="fas fa-arrow-right"></i>
193
+ </button>
194
+ </div>
195
+
196
+ <div class="w-full sm:w-auto mt-3 sm:mt-0">
197
+ <div class="flex justify-center space-x-4">
198
+ <button id="brake-btn" class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-full font-bold">
199
+ <i class="fas fa-stop"></i> Frein
200
+ </button>
201
+ <button id="accelerate-btn" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-full font-bold">
202
+ <i class="fas fa-arrow-up"></i> Accélérer
203
+ </button>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Sélecteur de camion -->
209
+ <div class="bg-gray-800 p-4 border-t border-gray-700">
210
+ <h3 class="text-white font-medium mb-2">Choisissez votre camion</h3>
211
+ <div class="grid grid-cols-3 gap-2">
212
+ <button class="truck-select bg-gray-700 hover:bg-gray-600 text-white p-2 rounded" data-truck="kerax">
213
+ <img src="https://cdn-icons-png.flaticon.com/512/3069/3069172.png" alt="Kerax" class="w-8 h-8 mx-auto mb-1">
214
+ <span class="text-xs">Renault Kerax</span>
215
+ </button>
216
+ <button class="truck-select bg-gray-700 hover:bg-gray-600 text-white p-2 rounded" data-truck="actros">
217
+ <img src="https://cdn-icons-png.flaticon.com/512/3069/3069172.png" alt="Actros" class="w-8 h-8 mx-auto mb-1">
218
+ <span class="text-xs">Mercedes Actros</span>
219
+ </button>
220
+ <button class="truck-select bg-gray-700 hover:bg-gray-600 text-white p-2 rounded" data-truck="volvo">
221
+ <img src="https://cdn-icons-png.flaticon.com/512/3069/3069172.png" alt="Volvo" class="w-8 h-8 mx-auto mb-1">
222
+ <span class="text-xs">Volvo FH16</span>
223
+ </button>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- Sélecteur de destination -->
228
+ <div class="bg-gray-800 p-4 border-t border-gray-700">
229
+ <h3 class="text-white font-medium mb-2">Destination</h3>
230
+ <select id="destination-select" class="w-full bg-gray-700 text-white p-2 rounded">
231
+ <option value="saint-denis">Saint-Denis</option>
232
+ <option value="saint-pierre">Saint-Pierre</option>
233
+ <option value="le-port">Le Port</option>
234
+ <option value="saint-paul">Saint-Paul</option>
235
+ </select>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- Instructions -->
240
+ <div class="mt-8 bg-gray-800 rounded-lg p-6">
241
+ <h3 class="text-xl font-bold text-white mb-4">Comment jouer</h3>
242
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
243
+ <div class="bg-gray-700 p-4 rounded-lg">
244
+ <div class="flex items-center mb-2">
245
+ <div class="bg-blue-600 p-2 rounded-full mr-3">
246
+ <i class="fas fa-keyboard text-white"></i>
247
+ </div>
248
+ <h4 class="text-lg font-medium text-white">Contrôles</h4>
249
+ </div>
250
+ <ul class="text-gray-300 text-sm space-y-2">
251
+ <li><span class="font-bold">Flèches:</span> Direction</li>
252
+ <li><span class="font-bold">Espace:</span> Frein</li>
253
+ <li><span class="font-bold">E:</span> Moteur</li>
254
+ <li><span class="font-bold">L:</span> Phares</li>
255
+ </ul>
256
+ </div>
257
+ <div class="bg-gray-700 p-4 rounded-lg">
258
+ <div class="flex items-center mb-2">
259
+ <div class="bg-green-600 p-2 rounded-full mr-3">
260
+ <i class="fas fa-info-circle text-white"></i>
261
+ </div>
262
+ <h4 class="text-lg font-medium text-white">Conseils</h4>
263
+ </div>
264
+ <ul class="text-gray-300 text-sm space-y-2">
265
+ <li>Respectez les limitations de vitesse</li>
266
+ <li>Utilisez vos clignotants</li>
267
+ <li>Faites des pauses régulières</li>
268
+ <li>Surveillez votre carburant</li>
269
+ </ul>
270
+ </div>
271
+ <div class="bg-gray-700 p-4 rounded-lg">
272
+ <div class="flex items-center mb-2">
273
+ <div class="bg-yellow-500 p-2 rounded-full mr-3">
274
+ <i class="fas fa-trophy text-white"></i>
275
+ </div>
276
+ <h4 class="text-lg font-medium text-white">Objectifs</h4>
277
+ </div>
278
+ <ul class="text-gray-300 text-sm space-y-2">
279
+ <li>Livrez votre cargaison à temps</li>
280
+ <li>Évitez les accidents</li>
281
+ <li>Gagnez de l'expérience</li>
282
+ <li>Débloquez de nouveaux camions</li>
283
+ </ul>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- Footer -->
291
+ <footer class="bg-gray-900 border-t border-gray-800">
292
+ <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
293
+ <div class="flex flex-col md:flex-row justify-between items-center">
294
+ <div class="flex items-center">
295
+ <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/3069/3069172.png" alt="Logo">
296
+ <span class="ml-2 text-white font-medium">Simulateur La Réunion</span>
297
+ </div>
298
+ <div class="mt-4 md:mt-0">
299
+ <p class="text-gray-400 text-sm">
300
+ &copy; 2023 Simulateur de Conduite. Tous droits réservés.
301
+ </p>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </footer>
306
+
307
+ <script>
308
+ // État du simulateur
309
+ const gameState = {
310
+ engineOn: false,
311
+ lightsOn: false,
312
+ speed: 0,
313
+ rpm: 0,
314
+ distance: 0,
315
+ currentTruck: 'kerax',
316
+ destination: 'saint-denis',
317
+ driving: false,
318
+ leftSignal: false,
319
+ rightSignal: false
320
+ };
321
+
322
+ // Éléments DOM
323
+ const speedElement = document.getElementById('speed');
324
+ const rpmElement = document.getElementById('rpm');
325
+ const distanceElement = document.getElementById('distance');
326
+ const engineBtn = document.getElementById('engine-btn');
327
+ const lightsBtn = document.getElementById('lights-btn');
328
+ const hornBtn = document.getElementById('horn-btn');
329
+ const leftSignalBtn = document.getElementById('left-signal');
330
+ const rightSignalBtn = document.getElementById('right-signal');
331
+ const brakeBtn = document.getElementById('brake-btn');
332
+ const accelerateBtn = document.getElementById('accelerate-btn');
333
+ const roadElement = document.getElementById('road');
334
+ const vehicleElement = document.getElementById('vehicle');
335
+ const landscapeElement = document.getElementById('landscape');
336
+ const truckSelects = document.querySelectorAll('.truck-select');
337
+ const destinationSelect = document.getElementById('destination-select');
338
+
339
+ // Sons
340
+ const engineSound = new Audio('https://www.soundjay.com/mechanical/sounds/truck-01.mp3');
341
+ engineSound.loop = true;
342
+ const hornSound = new Audio('https://www.soundjay.com/mechanical/sounds/truck-horn-01.mp3');
343
+ const brakeSound = new Audio('https://www.soundjay.com/mechanical/sounds/car-brake-1.mp3');
344
+ const signalSound = new Audio('https://www.soundjay.com/mechanical/sounds/car-turn-signal-1.mp3');
345
+ signalSound.loop = true;
346
+
347
+ // Gestionnaire d'événements pour le moteur
348
+ engineBtn.addEventListener('click', () => {
349
+ gameState.engineOn = !gameState.engineOn;
350
+
351
+ if (gameState.engineOn) {
352
+ engineBtn.innerHTML = '<i class="fas fa-power-off"></i>';
353
+ engineBtn.classList.remove('bg-gray-700', 'hover:bg-gray-600');
354
+ engineBtn.classList.add('bg-green-600', 'hover:bg-green-700');
355
+ engineSound.play();
356
+
357
+ // Animation du véhicule
358
+ vehicleElement.classList.add('engine-animation');
359
+ roadElement.classList.add('road-animation');
360
+ } else {
361
+ engineBtn.innerHTML = '<i class="fas fa-power-off"></i>';
362
+ engineBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
363
+ engineBtn.classList.add('bg-gray-700', 'hover:bg-gray-600');
364
+ engineSound.pause();
365
+ engineSound.currentTime = 0;
366
+
367
+ // Arrêt des animations
368
+ vehicleElement.classList.remove('engine-animation');
369
+ roadElement.classList.remove('road-animation');
370
+
371
+ // Arrêt de la conduite
372
+ gameState.driving = false;
373
+ gameState.speed = 0;
374
+ updateDashboard();
375
+ updateRoadSpeed();
376
+ }
377
+ });
378
+
379
+ // Gestionnaire d'événements pour les phares
380
+ lightsBtn.addEventListener('click', () => {
381
+ gameState.lightsOn = !gameState.lightsOn;
382
+
383
+ if (gameState.lightsOn) {
384
+ lightsBtn.classList.remove('bg-gray-700', 'hover:bg-gray-600');
385
+ lightsBtn.classList.add('bg-yellow-500', 'hover:bg-yellow-600');
386
+
387
+ // Activer les feux du véhicule
388
+ const lights = vehicleElement.querySelectorAll('div');
389
+ lights.forEach(light => {
390
+ if (light.classList.contains('bg-yellow-300')) {
391
+ light.classList.add('opacity-100');
392
+ light.classList.remove('opacity-0');
393
+ }
394
+ });
395
+ } else {
396
+ lightsBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
397
+ lightsBtn.classList.add('bg-gray-700', 'hover:bg-gray-600');
398
+
399
+ // Désactiver les feux du véhicule
400
+ const lights = vehicleElement.querySelectorAll('div');
401
+ lights.forEach(light => {
402
+ if (light.classList.contains('bg-yellow-300')) {
403
+ light.classList.add('opacity-0');
404
+ light.classList.remove('opacity-100');
405
+ }
406
+ });
407
+ }
408
+ });
409
+
410
+ // Gestionnaire d'événements pour le klaxon
411
+ hornBtn.addEventListener('click', () => {
412
+ hornSound.currentTime = 0;
413
+ hornSound.play();
414
+
415
+ // Animation du bouton
416
+ hornBtn.classList.add('bg-red-500', 'hover:bg-red-600');
417
+ setTimeout(() => {
418
+ hornBtn.classList.remove('bg-red-500', 'hover:bg-red-600');
419
+ hornBtn.classList.add('bg-gray-700', 'hover:bg-gray-600');
420
+ }, 300);
421
+ });
422
+
423
+ // Gestionnaire d'événements pour le clignotant gauche
424
+ leftSignalBtn.addEventListener('click', () => {
425
+ gameState.leftSignal = !gameState.leftSignal;
426
+ gameState.rightSignal = false;
427
+
428
+ if (gameState.leftSignal) {
429
+ leftSignalBtn.classList.remove('bg-gray-700', 'hover:bg-gray-600');
430
+ leftSignalBtn.classList.add('bg-yellow-500', 'hover:bg-yellow-600');
431
+ rightSignalBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
432
+ rightSignalBtn.classList.add('bg-gray-700', 'hover:bg-gray-600');
433
+ signalSound.play();
434
+
435
+ // Animation du clignotant
436
+ const leftLight = vehicleElement.querySelector('div:nth-child(1)');
437
+ leftLight.classList.add('opacity-100', 'animate-pulse');
438
+ leftLight.classList.remove('opacity-0');
439
+
440
+ const rightLight = vehicleElement.querySelector('div:nth-child(2)');
441
+ rightLight.classList.add('opacity-0');
442
+ rightLight.classList.remove('opacity-100', 'animate-pulse');
443
+ } else {
444
+ leftSignalBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
445
+ leftSignalBtn.classList.add('bg-gray-700', 'hover:bg-gray-600');
446
+ signalSound.pause();
447
+ signalSound.currentTime = 0;
448
+
449
+ // Désactiver l'animation
450
+ const leftLight = vehicleElement.querySelector('div:nth-child(1)');
451
+ leftLight.classList.remove('animate-pulse');
452
+ if (!gameState.lightsOn) {
453
+ leftLight.classList.add('opacity-0');
454
+ }
455
+ }
456
+ });
457
+
458
+ // Gestionnaire d'événements pour le clignotant droit
459
+ rightSignalBtn.addEventListener('click', () => {
460
+ gameState.rightSignal = !gameState.rightSignal;
461
+ gameState.leftSignal = false;
462
+
463
+ if (gameState.rightSignal) {
464
+ rightSignalBtn.classList.remove('bg-gray-700', 'hover:bg-gray-600');
465
+ rightSignalBtn.classList.add('bg-yellow-500', 'hover:bg-yellow-600');
466
+ leftSignalBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
467
+ leftSignalBtn.classList.add('bg-gray-700', 'hover:bg-gray-600');
468
+ signalSound.play();
469
+
470
+ // Animation du clignotant
471
+ const rightLight = vehicleElement.querySelector('div:nth-child(2)');
472
+ rightLight.classList.add('opacity-100', 'animate-pulse');
473
+ rightLight.classList.remove('opacity-0');
474
+
475
+ const leftLight = vehicleElement.querySelector('div:nth-child(1)');
476
+ leftLight.classList.add('opacity-0');
477
+ leftLight.classList.remove('opacity-100', 'animate-pulse');
478
+ } else {
479
+ rightSignalBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
480
+ rightSignalBtn.classList.add('bg-gray-700', 'hover:bg-gray-600');
481
+ signalSound.pause();
482
+ signalSound.currentTime = 0;
483
+
484
+ // Désactiver l'animation
485
+ const rightLight = vehicleElement.querySelector('div:nth-child(2)');
486
+ rightLight.classList.remove('animate-pulse');
487
+ if (!gameState.lightsOn) {
488
+ rightLight.classList.add('opacity-0');
489
+ }
490
+ }
491
+ });
492
+
493
+ // Gestionnaire d'événements pour le frein
494
+ brakeBtn.addEventListener('mousedown', () => {
495
+ if (gameState.engineOn && gameState.driving) {
496
+ brakeSound.currentTime = 0;
497
+ brakeSound.play();
498
+ gameState.driving = false;
499
+
500
+ // Activer les feux stop
501
+ const brakeLights = vehicleElement.querySelectorAll('div');
502
+ brakeLights.forEach(light => {
503
+ if (light.classList.contains('bg-yellow-300')) {
504
+ light.classList.add('bg-red-500');
505
+ light.classList.remove('bg-yellow-300');
506
+ }
507
+ });
508
+
509
+ // Réduire la vitesse progressivement
510
+ const brakeInterval = setInterval(() => {
511
+ if (gameState.speed > 0) {
512
+ gameState.speed = Math.max(0, gameState.speed - 5);
513
+ gameState.rpm = Math.max(0, gameState.rpm - 100);
514
+ updateDashboard();
515
+ updateRoadSpeed();
516
+ } else {
517
+ clearInterval(brakeInterval);
518
+
519
+ // Désactiver les feux stop
520
+ const brakeLights = vehicleElement.querySelectorAll('div');
521
+ brakeLights.forEach(light => {
522
+ if (light.classList.contains('bg-red-500')) {
523
+ light.classList.add('bg-yellow-300');
524
+ light.classList.remove('bg-red-500');
525
+ if (!gameState.lightsOn) {
526
+ light.classList.add('opacity-0');
527
+ }
528
+ }
529
+ });
530
+ }
531
+ }, 100);
532
+ }
533
+ });
534
+
535
+ // Gestionnaire d'événements pour l'accélérateur
536
+ accelerateBtn.addEventListener('mousedown', () => {
537
+ if (gameState.engineOn) {
538
+ gameState.driving = true;
539
+
540
+ // Augmenter la vitesse progressivement
541
+ const accelerateInterval = setInterval(() => {
542
+ if (gameState.driving && gameState.speed < 120) {
543
+ gameState.speed = Math.min(120, gameState.speed + 2);
544
+ gameState.rpm = Math.min(3000, gameState.rpm + 50);
545
+ gameState.distance += 0.01;
546
+ updateDashboard();
547
+ updateRoadSpeed();
548
+ }
549
+ }, 100);
550
+
551
+ // Arrêter l'accélération quand le bouton est relâché
552
+ accelerateBtn.addEventListener('mouseup', () => {
553
+ clearInterval(accelerateInterval);
554
+ gameState.driving = false;
555
+
556
+ // Réduire progressivement la vitesse si on n'accélère plus
557
+ const slowDownInterval = setInterval(() => {
558
+ if (!gameState.driving && gameState.speed > 0) {
559
+ gameState.speed = Math.max(0, gameState.speed - 1);
560
+ gameState.rpm = Math.max(0, gameState.rpm - 20);
561
+ updateDashboard();
562
+ updateRoadSpeed();
563
+
564
+ if (gameState.speed === 0) {
565
+ clearInterval(slowDownInterval);
566
+ }
567
+ }
568
+ }, 100);
569
+ });
570
+
571
+ accelerateBtn.addEventListener('mouseleave', () => {
572
+ clearInterval(accelerateInterval);
573
+ gameState.driving = false;
574
+ });
575
+ }
576
+ });
577
+
578
+ // Sélection du camion
579
+ truckSelects.forEach(select => {
580
+ select.addEventListener('click', () => {
581
+ gameState.currentTruck = select.dataset.truck;
582
+
583
+ // Mettre à jour l'interface
584
+ truckSelects.forEach(s => {
585
+ s.classList.remove('bg-blue-600');
586
+ s.classList.add('bg-gray-700', 'hover:bg-gray-600');
587
+ });
588
+
589
+ select.classList.remove('bg-gray-700', 'hover:bg-gray-600');
590
+ select.classList.add('bg-blue-600');
591
+
592
+ // Changer l'apparence du véhicule
593
+ switch(gameState.currentTruck) {
594
+ case 'kerax':
595
+ vehicleElement.className = 'absolute bottom-10 left-1/2 transform -translate-x-1/2 w-32 h-16 bg-blue-600 rounded-lg flex items-center justify-center';
596
+ break;
597
+ case 'actros':
598
+ vehicleElement.className = 'absolute bottom-10 left-1/2 transform -translate-x-1/2 w-36 h-16 bg-gray-600 rounded-lg flex items-center justify-center';
599
+ break;
600
+ case 'volvo':
601
+ vehicleElement.className = 'absolute bottom-10 left-1/2 transform -translate-x-1/2 w-40 h-16 bg-red-600 rounded-lg flex items-center justify-center';
602
+ break;
603
+ }
604
+
605
+ // Réappliquer les feux
606
+ vehicleElement.innerHTML = '';
607
+ const leftLight = document.createElement('div');
608
+ leftLight.className = 'w-6 h-3 bg-yellow-300 rounded-full absolute -left-2';
609
+ if (!gameState.lightsOn) leftLight.classList.add('opacity-0');
610
+ vehicleElement.appendChild(leftLight);
611
+
612
+ const rightLight = document.createElement('div');
613
+ rightLight.className = 'w-6 h-3 bg-yellow-300 rounded-full absolute -right-2';
614
+ if (!gameState.lightsOn) rightLight.classList.add('opacity-0');
615
+ vehicleElement.appendChild(rightLight);
616
+
617
+ // Roues
618
+ const wheel1 = document.createElement('div');
619
+ wheel1.className = 'w-8 h-8 bg-gray-700 rounded-full absolute -bottom-4 left-4';
620
+ vehicleElement.appendChild(wheel1);
621
+
622
+ const wheel2 = document.createElement('div');
623
+ wheel2.className = 'w-8 h-8 bg-gray-700 rounded-full absolute -bottom-4 right-4';
624
+ vehicleElement.appendChild(wheel2);
625
+
626
+ // Réappliquer l'animation si le moteur est allumé
627
+ if (gameState.engineOn) {
628
+ vehicleElement.classList.add('engine-animation');
629
+ }
630
+ });
631
+ });
632
+
633
+ // Sélection de la destination
634
+ destinationSelect.addEventListener('change', () => {
635
+ gameState.destination = destinationSelect.value;
636
+ gameState.distance = 0;
637
+ updateDashboard();
638
+
639
+ // Changer le paysage en fonction de la destination
640
+ switch(gameState.destination) {
641
+ case 'saint-denis':
642
+ landscapeElement.className = 'absolute inset-0 bg-gradient-to-t from-green-900/20 to-transparent';
643
+ break;
644
+ case 'saint-pierre':
645
+ landscapeElement.className = 'absolute inset-0 bg-gradient-to-t from-blue-900/20 to-transparent';
646
+ break;
647
+ case 'le-port':
648
+ landscapeElement.className = 'absolute inset-0 bg-gradient-to-t from-gray-900/20 to-transparent';
649
+ break;
650
+ case 'saint-paul':
651
+ landscapeElement.className = 'absolute inset-0 bg-gradient-to-t from-yellow-900/20 to-transparent';
652
+ break;
653
+ }
654
+ });
655
+
656
+ // Mise à jour de la vitesse de la route
657
+ function updateRoadSpeed() {
658
+ roadElement.classList.remove('speed-effect-1', 'speed-effect-2', 'speed-effect-3', 'speed-effect-4');
659
+
660
+ if (gameState.speed > 80) {
661
+ roadElement.classList.add('speed-effect-4');
662
+ } else if (gameState.speed > 60) {
663
+ roadElement.classList.add('speed-effect-3');
664
+ } else if (gameState.speed > 30) {
665
+ roadElement.classList.add('speed-effect-2');
666
+ } else if (gameState.speed > 0) {
667
+ roadElement.classList.add('speed-effect-1');
668
+ }
669
+ }
670
+
671
+ // Mise à jour du tableau de bord
672
+ function updateDashboard() {
673
+ speedElement.textContent = Math.round(gameState.speed);
674
+ rpmElement.textContent = Math.round(gameState.rpm);
675
+ distanceElement.textContent = gameState.distance.toFixed(2);
676
+ }
677
+
678
+ // Contrôles clavier
679
+ document.addEventListener('keydown', (e) => {
680
+ if (e.key === 'e' || e.key === 'E') {
681
+ engineBtn.click();
682
+ }
683
+
684
+ if (e.key === 'l' || e.key === 'L') {
685
+ lightsBtn.click();
686
+ }
687
+
688
+ if (e.key === ' ') {
689
+ brakeBtn.click();
690
+ }
691
+
692
+ if (e.key === 'ArrowUp') {
693
+ accelerateBtn.click();
694
+ }
695
+
696
+ if (e.key === 'ArrowLeft') {
697
+ leftSignalBtn.click();
698
+ }
699
+
700
+ if (e.key === 'ArrowRight') {
701
+ rightSignalBtn.click();
702
+ }
703
+ });
704
+
705
+ // Initialisation
706
+ updateDashboard();
707
+ </script>
708
+ <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/camion" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
709
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ je veux une armées de 3250000 IA tous superpuissant qui génére des sites de jeux Euro Truck simulator creer les meme systéme de jeux special pour les routes de l' iles de la REUNION conduire en reel dans des vrais camion de lile de la reunion
2
+ je veux joue en direct live
3
+ activer les jeu reel en vrai