Hugging Face's logo

Spaces:
docto41
/
conduite-temps-reel
Running

App Files Community
docto41 commited on
Commit
a2a2de4
·
verified ·
1 Parent(s): 2f882f3

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +301 -629
  2. prompts.txt +4 -1
index.html CHANGED
@@ -3,18 +3,26 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Commande Robotisée Flotte Camions - Île de 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
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css" rel="stylesheet">
10
  <style>
11
  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap');
12
 
 
 
 
 
 
 
 
13
  body {
14
  font-family: 'Roboto', sans-serif;
15
  background-color: #0a0a0a;
16
  color: #fff;
17
  overflow: hidden;
 
18
  }
19
 
20
  .dashboard-font {
@@ -22,705 +30,369 @@
22
  }
23
 
24
  .glass-effect {
25
- background: rgba(15, 23, 42, 0.7);
26
- backdrop-filter: blur(10px);
27
- border: 1px solid rgba(255, 255, 255, 0.1);
 
28
  }
29
 
30
- .map-container {
31
- width: 100%;
32
- height: 100%;
33
- border-radius: 12px;
34
  overflow: hidden;
 
35
  }
36
 
37
- .gauge {
38
- position: relative;
39
- width: 100%;
40
- height: 100%;
 
 
41
  }
42
 
43
- .gauge-body {
44
- width: 100%;
45
- height: 0;
46
- padding-bottom: 50%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
  position: relative;
48
- border-top-left-radius: 100% 200%;
49
- border-top-right-radius: 100% 200%;
50
  overflow: hidden;
51
  }
52
 
53
- .gauge-fill {
 
54
  position: absolute;
55
- top: 100%;
56
  left: 0;
57
- width: 100%;
58
  height: 100%;
59
- background: linear-gradient(90deg, #10b981, #3b82f6);
60
- transform-origin: center top;
61
- transform: rotate(0.5turn);
62
- transition: transform 0.5s ease-out;
63
  }
64
 
65
- .gauge-cover {
66
- width: 75%;
67
- height: 150%;
68
- background: #0f172a;
69
- border-radius: 50%;
 
 
 
 
 
 
 
 
 
 
 
 
70
  position: absolute;
71
- top: 25%;
72
- left: 50%;
73
- transform: translateX(-50%);
74
- display: flex;
75
- align-items: center;
76
- justify-content: center;
77
- font-size: 1.5rem;
78
- font-weight: bold;
79
- padding-bottom: 25%;
80
- box-sizing: border-box;
81
  }
82
 
83
- .pulse {
84
- animation: pulse 2s infinite;
 
 
 
 
 
 
 
 
 
 
85
  }
86
 
87
- @keyframes pulse {
88
- 0% { opacity: 0.7; }
89
- 50% { opacity: 0.3; }
90
- 100% { opacity: 0.7; }
91
  }
92
 
93
- .alert-notification {
94
- animation: fadeInOut 3s forwards;
95
- display: none;
 
 
 
 
 
 
 
 
96
  }
97
 
98
- @keyframes fadeInOut {
99
- 0% { opacity: 0; transform: translate(-50%, -40%); }
100
- 20% { opacity: 1; transform: translate(-50%, -50%); }
101
- 80% { opacity: 1; transform: translate(-50%, -50%); }
102
- 100% { opacity: 0; transform: translate(-50%, -60%); }
 
 
 
 
103
  }
104
 
105
- .truck-icon {
106
- background-image: url('https://cdn-icons-png.flaticon.com/512/2972/2972495.png');
107
- background-size: cover;
108
- width: 40px;
109
- height: 40px;
110
- border-radius: 50%;
111
- cursor: pointer;
112
  }
113
 
114
- .route-line {
115
- background-color: #3b82f6;
116
- width: 4px;
117
  }
118
 
119
- .ai-command-panel {
120
- scrollbar-width: thin;
121
- scrollbar-color: #3b82f6 #0f172a;
 
 
 
 
 
 
122
  }
123
 
124
- .ai-command-panel::-webkit-scrollbar {
125
- width: 6px;
 
126
  }
127
 
128
- .ai-command-panel::-webkit-scrollbar-track {
129
- background: #0f172a;
 
130
  }
131
 
132
- .ai-command-panel::-webkit-scrollbar-thumb {
133
- background-color: #3b82f6;
134
- border-radius: 6px;
135
  }
136
  </style>
137
  </head>
138
  <body class="h-screen overflow-hidden">
139
- <div class="container mx-auto h-full p-4">
140
- <div class="grid grid-cols-4 grid-rows-3 gap-4 h-full">
141
- <!-- Zone 1: Vue satellite et topographique -->
142
- <div class="glass-effect rounded-2xl p-4 row-span-2 col-span-2 flex flex-col">
143
- <div class="flex justify-between items-center mb-4">
144
- <div class="text-lg font-bold">CARTE TOPOGRAPHIQUE - ÎLE DE LA RÉUNION</div>
145
- <div class="flex items-center space-x-2">
146
- <div class="w-3 h-3 rounded-full bg-green-500"></div>
147
- <div class="text-xs">GPS/SAT Actif</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
148
  </div>
149
- </div>
150
-
151
- <div class="flex-1 relative" id="map"></div>
152
-
153
- <div class="flex justify-between mt-2">
154
- <div class="flex space-x-2">
155
- <button class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded-full text-xs" id="satellite-view">
156
- <i class="fas fa-satellite mr-1"></i> Satellite
157
- </button>
158
- <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-full text-xs" id="topo-view">
159
- <i class="fas fa-mountain mr-1"></i> Topographie
160
- </button>
 
 
 
161
  </div>
162
- <div class="text-xs">
163
- <i class="fas fa-sync-alt mr-1"></i> Mise à jour: <span id="map-update">10s</span>
164
  </div>
165
  </div>
166
- </div>
167
-
168
- <!-- Zone 2: Contrôle IA flotte -->
169
- <div class="glass-effect rounded-2xl p-4 row-span-2 col-span-1 flex flex-col overflow-hidden">
170
- <div class="text-center text-gray-400 mb-4">COMMANDE IA FLOTTE</div>
171
 
172
- <div class="flex-1 ai-command-panel overflow-y-auto">
173
- <div class="space-y-3">
174
- <!-- Camion 1 -->
175
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-3">
176
- <div class="flex justify-between items-center mb-2">
177
- <div class="font-bold">TR-4512</div>
178
- <div class="text-xs px-2 py-1 rounded-full bg-green-900 text-green-300">En mission</div>
179
- </div>
180
- <div class="grid grid-cols-2 gap-2 text-xs">
181
- <div><i class="fas fa-road mr-1"></i> RN1</div>
182
- <div><i class="fas fa-tachometer-alt mr-1"></i> 68 km/h</div>
183
- <div><i class="fas fa-gas-pump mr-1"></i> 82%</div>
184
- <div><i class="fas fa-route mr-1"></i> 42 km</div>
185
- </div>
186
- <div class="mt-2 flex space-x-1">
187
- <button class="bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded text-xs flex-1">
188
- <i class="fas fa-eye mr-1"></i> Suivre
189
- </button>
190
- <button class="bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-xs">
191
- <i class="fas fa-cog"></i>
192
- </button>
193
- </div>
194
- </div>
195
-
196
- <!-- Camion 2 -->
197
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-3">
198
- <div class="flex justify-between items-center mb-2">
199
- <div class="font-bold">TR-6789</div>
200
- <div class="text-xs px-2 py-1 rounded-full bg-yellow-900 text-yellow-300">En attente</div>
201
- </div>
202
- <div class="grid grid-cols-2 gap-2 text-xs">
203
- <div><i class="fas fa-warehouse mr-1"></i> Dépôt St-Paul</div>
204
- <div><i class="fas fa-tachometer-alt mr-1"></i> 0 km/h</div>
205
- <div><i class="fas fa-gas-pump mr-1"></i> 100%</div>
206
- <div><i class="fas fa-route mr-1"></i> -</div>
207
- </div>
208
- <div class="mt-2 flex space-x-1">
209
- <button class="bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded text-xs flex-1">
210
- <i class="fas fa-play mr-1"></i> Activer
211
- </button>
212
- <button class="bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-xs">
213
- <i class="fas fa-cog"></i>
214
- </button>
215
- </div>
216
- </div>
217
-
218
- <!-- Camion 3 -->
219
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-3">
220
- <div class="flex justify-between items-center mb-2">
221
- <div class="font-bold">TR-3210</div>
222
- <div class="text-xs px-2 py-1 rounded-full bg-blue-900 text-blue-300">En maintenance</div>
223
- </div>
224
- <div class="grid grid-cols-2 gap-2 text-xs">
225
- <div><i class="fas fa-tools mr-1"></i> Atelier St-Denis</div>
226
- <div><i class="fas fa-tachometer-alt mr-1"></i> 0 km/h</div>
227
- <div><i class="fas fa-gas-pump mr-1"></i> 45%</div>
228
- <div><i class="fas fa-route mr-1"></i> -</div>
229
- </div>
230
- <div class="mt-2 flex space-x-1">
231
- <button class="bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-xs flex-1" disabled>
232
- <i class="fas fa-ban mr-1"></i> Indisponible
233
- </button>
234
- <button class="bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-xs">
235
- <i class="fas fa-cog"></i>
236
- </button>
237
- </div>
238
  </div>
239
-
240
- <!-- Camion 4 -->
241
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-3">
242
- <div class="flex justify-between items-center mb-2">
243
- <div class="font-bold">TR-9876</div>
244
- <div class="text-xs px-2 py-1 rounded-full bg-green-900 text-green-300">En mission</div>
245
- </div>
246
- <div class="grid grid-cols-2 gap-2 text-xs">
247
- <div><i class="fas fa-road mr-1"></i> Route du Littoral</div>
248
- <div><i class="fas fa-tachometer-alt mr-1"></i> 72 km/h</div>
249
- <div><i class="fas fa-gas-pump mr-1"></i> 65%</div>
250
- <div><i class="fas fa-route mr-1"></i> 18 km</div>
251
- </div>
252
- <div class="mt-2 flex space-x-1">
253
- <button class="bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded text-xs flex-1">
254
- <i class="fas fa-eye mr-1"></i> Suivre
255
- </button>
256
- <button class="bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-xs">
257
- <i class="fas fa-cog"></i>
258
- </button>
259
- </div>
260
  </div>
261
-
262
- <!-- Camion 5 -->
263
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-3">
264
- <div class="flex justify-between items-center mb-2">
265
- <div class="font-bold">TR-5555</div>
266
- <div class="text-xs px-2 py-1 rounded-full bg-red-900 text-red-300">Alerte</div>
267
- </div>
268
- <div class="grid grid-cols-2 gap-2 text-xs">
269
- <div><i class="fas fa-road mr-1"></i> RN3</div>
270
- <div><i class="fas fa-tachometer-alt mr-1"></i> 32 km/h</div>
271
- <div><i class="fas fa-gas-pump mr-1"></i> 12%</div>
272
- <div><i class="fas fa-route mr-1"></i> 5 km</div>
273
- </div>
274
- <div class="mt-2 flex space-x-1">
275
- <button class="bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-xs flex-1">
276
- <i class="fas fa-exclamation-triangle mr-1"></i> Intervention
277
- </button>
278
- <button class="bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-xs">
279
- <i class="fas fa-cog"></i>
280
- </button>
281
- </div>
282
  </div>
283
  </div>
 
 
 
284
  </div>
285
 
286
- <div class="mt-4">
287
- <button class="w-full bg-blue-600 hover:bg-blue-700 py-2 rounded-lg text-center">
288
- <i class="fas fa-robot mr-2"></i> Optimisation IA Flotte
289
- </button>
290
- </div>
291
- </div>
292
-
293
- <!-- Zone 3: Détails camion sélectionné -->
294
- <div class="glass-effect rounded-2xl p-4 row-span-2 col-span-1 flex flex-col">
295
- <div class="text-center text-gray-400 mb-4">DÉTAILS CAMION</div>
296
-
297
- <div class="flex-1 flex flex-col">
298
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-4 mb-4">
299
- <div class="text-center font-bold text-xl mb-2">TR-4512</div>
300
- <div class="flex justify-center mb-4">
301
- <img src="https://cdn-icons-png.flaticon.com/512/2972/2972495.png" class="h-16" alt="Camion">
302
- </div>
303
- <div class="grid grid-cols-2 gap-3 text-sm">
304
- <div><i class="fas fa-calendar-alt mr-2"></i> Mise en service: 12/2023</div>
305
- <div><i class="fas fa-road mr-2"></i> Kilométrage: 8,452 km</div>
306
- <div><i class="fas fa-cogs mr-2"></i> Type: Porteur 19T</div>
307
- <div><i class="fas fa-battery-three-quarters mr-2"></i> Autonomie: 620 km</div>
308
- </div>
309
  </div>
310
-
311
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-4 mb-4">
312
- <div class="font-bold mb-2">CHARGEMENT</div>
313
- <div class="h-2 bg-gray-700 rounded-full mb-2">
314
- <div class="bg-green-500 h-2 rounded-full" style="width: 78%"></div>
 
315
  </div>
316
- <div class="flex justify-between text-xs">
317
- <div>12.4/16 tonnes</div>
318
- <div>78% capacité</div>
319
  </div>
320
- </div>
321
-
322
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-4 mb-4">
323
- <div class="font-bold mb-2">TÉLÉMETRIE</div>
324
- <div class="grid grid-cols-3 gap-2 text-center">
325
- <div class="bg-gray-700 p-2 rounded">
326
- <div class="text-xs">MOTEUR</div>
327
- <div class="dashboard-font">98%</div>
328
- </div>
329
- <div class="bg-gray-700 p-2 rounded">
330
- <div class="text-xs">FREINS</div>
331
- <div class="dashboard-font">100%</div>
332
- </div>
333
- <div class="bg-gray-700 p-2 rounded">
334
- <div class="text-xs">PNEUS</div>
335
- <div class="dashboard-font">92%</div>
336
- </div>
337
  </div>
338
  </div>
339
-
340
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-4 flex-1">
341
- <div class="font-bold mb-2">SYSTÈMES IA</div>
342
- <div class="space-y-3">
343
- <div class="flex items-center">
344
- <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
345
- <div class="text-sm flex-1">Pilotage autonome</div>
346
- <div class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Actif</div>
347
- </div>
348
- <div class="flex items-center">
349
- <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
350
- <div class="text-sm flex-1">Détection obstacles</div>
351
- <div class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Actif</div>
352
- </div>
353
- <div class="flex items-center">
354
- <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
355
- <div class="text-sm flex-1">Optimisation route</div>
356
- <div class="text-xs bg-yellow-900 text-yellow-300 px-2 py-1 rounded-full">Calcul...</div>
357
- </div>
358
- <div class="flex items-center">
359
- <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
360
- <div class="text-sm flex-1">Mode manuel</div>
361
- <div class="text-xs bg-red-900 text-red-300 px-2 py-1 rounded-full">Désactivé</div>
362
- </div>
363
- </div>
364
  </div>
365
  </div>
366
  </div>
367
 
368
- <!-- Zone 4: Console IA et alertes -->
369
- <div class="glass-effect rounded-2xl p-4 col-span-4">
370
- <div class="flex items-center justify-between mb-4">
371
- <div class="text-lg font-bold">CONSOLE IA & ALERTES</div>
372
- <div class="flex items-center space-x-2">
373
- <div class="w-3 h-3 rounded-full bg-green-500"></div>
374
- <div class="text-xs">Systèmes IA opérationnels</div>
375
  </div>
376
- </div>
377
-
378
- <div class="grid grid-cols-5 gap-4">
379
- <!-- Analyse trafic -->
380
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-3 col-span-2">
381
- <div class="flex justify-between items-center mb-2">
382
- <div class="font-bold">ANALYSE TRAFIC EN TEMPS RÉEL</div>
383
- <div class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded-full">Mise à jour: 5s</div>
384
  </div>
385
- <div class="h-40 overflow-y-auto text-sm space-y-2" id="traffic-analysis">
386
- <div class="flex">
387
- <div class="w-2 h-2 rounded-full bg-green-500 mt-1.5 mr-2"></div>
388
- <div>Route fluide sur RN1 entre St-Denis et La Possession</div>
389
- </div>
390
- <div class="flex">
391
- <div class="w-2 h-2 rounded-full bg-yellow-500 mt-1.5 mr-2"></div>
392
- <div>Ralentissement débutant sur RN2 près de St-Benoît</div>
393
- </div>
394
- <div class="flex">
395
- <div class="w-2 h-2 rounded-full bg-red-500 mt-1.5 mr-2"></div>
396
- <div>Bouchon sur Route du Littoral - Réacheminement conseillé</div>
397
- </div>
398
- <div class="flex">
399
- <div class="w-2 h-2 rounded-full bg-green-500 mt-1.5 mr-2"></div>
400
- <div>Conditions optimales sur RN3 vers St-Pierre</div>
401
- </div>
402
- <div class="flex">
403
- <div class="w-2 h-2 rounded-full bg-blue-500 mt-1.5 mr-2"></div>
404
- <div>Météo: Pluies légères prévues dans l'Est dans 25min</div>
405
- </div>
406
  </div>
407
- </div>
408
-
409
- <!-- Commandes IA -->
410
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-3">
411
- <div class="font-bold mb-3">COMMANDES GLOBALES</div>
412
- <div class="space-y-2">
413
- <button class="w-full bg-blue-600 hover:bg-blue-700 py-2 rounded text-sm">
414
- <i class="fas fa-route mr-2"></i> Optimiser itinéraires
415
- </button>
416
- <button class="w-full bg-purple-600 hover:bg-purple-700 py-2 rounded text-sm">
417
- <i class="fas fa-brain mr-2"></i> Apprentissage flotte
418
- </button>
419
- <button class="w-full bg-green-600 hover:bg-green-700 py-2 rounded text-sm">
420
- <i class="fas fa-sync-alt mr-2"></i> Mise à jour OTA
421
- </button>
422
- <button class="w-full bg-red-600 hover:bg-red-700 py-2 rounded text-sm">
423
- <i class="fas fa-shield-alt mr-2"></i> Mode sécurité
424
- </button>
425
  </div>
426
  </div>
427
-
428
- <!-- Alertes -->
429
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-3 col-span-2">
430
- <div class="flex justify-between items-center mb-2">
431
- <div class="font-bold">ALERTES & INTERVENTIONS</div>
432
- <div class="flex items-center">
433
- <div class="w-3 h-3 rounded-full bg-red-500 mr-1"></div>
434
- <div class="text-xs">2 alertes actives</div>
435
- </div>
436
- </div>
437
-
438
- <div class="space-y-3">
439
- <!-- Alerte 1 -->
440
- <div class="bg-red-900 bg-opacity-50 p-3 rounded-lg">
441
- <div class="flex justify-between items-start">
442
- <div>
443
- <div class="font-bold flex items-center">
444
- <i class="fas fa-exclamation-triangle mr-2"></i> Carburant critique
445
- </div>
446
- <div class="text-xs mt-1">Camion TR-5555 - Niveau à 12%</div>
447
- </div>
448
- <button class="bg-red-600 hover:bg-red-700 px-3 py-1 rounded-full text-xs">
449
- <i class="fas fa-gas-pump mr-1"></i> Ravitaillement
450
- </button>
451
- </div>
452
- </div>
453
-
454
- <!-- Alerte 2 -->
455
- <div class="bg-yellow-900 bg-opacity-50 p-3 rounded-lg">
456
- <div class="flex justify-between items-start">
457
- <div>
458
- <div class="font-bold flex items-center">
459
- <i class="fas fa-tools mr-2"></i> Maintenance préventive
460
- </div>
461
- <div class="text-xs mt-1">Camion TR-3210 - Freins à 85%</div>
462
- </div>
463
- <button class="bg-yellow-600 hover:bg-yellow-700 px-3 py-1 rounded-full text-xs">
464
- <i class="fas fa-calendar-alt mr-1"></i> Planifier
465
- </button>
466
- </div>
467
- </div>
468
-
469
- <!-- Historique -->
470
- <div class="text-xs mt-4">
471
- <div class="flex justify-between py-1 border-b border-gray-700">
472
- <div>TR-9876: Optimisation route terminée</div>
473
- <div class="text-gray-400">2 min</div>
474
- </div>
475
- <div class="flex justify-between py-1 border-b border-gray-700">
476
- <div>TR-4512: Passage en mode montagne</div>
477
- <div class="text-gray-400">12 min</div>
478
- </div>
479
- <div class="flex justify-between py-1 border-b border-gray-700">
480
- <div>Flotte: Mise à jour météo appliquée</div>
481
- <div class="text-gray-400">25 min</div>
482
- </div>
483
- </div>
484
- </div>
485
  </div>
486
  </div>
487
- </div>
488
- </div>
489
- </div>
490
-
491
- <!-- Notification d'alerte -->
492
- <div class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-red-600 px-6 py-3 rounded-lg shadow-lg alert-notification" id="alert-notification">
493
- <i class="fas fa-exclamation-triangle mr-2"></i>
494
- <span id="notification-text">ALERTE: Carburant critique sur TR-5555 (12%)</span>
495
- </div>
496
-
497
- <script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"></script>
498
- <script>
499
- // Configuration Mapbox
500
- mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
501
-
502
- // Coordonnées de l'île de la Réunion
503
- const reunionCoordinates = [55.5364, -21.1307];
504
-
505
- // Initialisation de la carte
506
- const map = new mapboxgl.Map({
507
- container: 'map',
508
- style: 'mapbox://styles/mapbox/satellite-streets-v11',
509
- center: reunionCoordinates,
510
- zoom: 9,
511
- pitch: 45
512
- });
513
-
514
- // Ajout des contrôles de navigation
515
- map.addControl(new mapboxgl.NavigationControl());
516
-
517
- // Points d'intérêt pour les camions
518
- const truckDepots = [
519
- { name: "Dépôt St-Denis", coordinates: [55.4500, -20.8900] },
520
- { name: "Dépôt St-Paul", coordinates: [55.2700, -21.0000] },
521
- { name: "Dépôt St-Pierre", coordinates: [55.5300, -21.3300] },
522
- { name: "Dépôt St-Benoît", coordinates: [55.7100, -21.0500] }
523
- ];
524
-
525
- // Routes principales
526
- const mainRoutes = [
527
- { name: "RN1 - Route du Littoral", coordinates: [
528
- [55.3000, -20.9500], [55.3200, -20.9700], [55.3500, -20.9900], [55.4000, -21.0000], [55.4500, -20.8900]
529
- ]},
530
- { name: "RN2 - Route des Plaines", coordinates: [
531
- [55.4500, -20.8900], [55.5000, -20.9200], [55.5500, -20.9500], [55.6000, -20.9800], [55.6500, -21.0200], [55.7100, -21.0500]
532
- ]},
533
- { name: "RN3 - Route du Sud", coordinates: [
534
- [55.4500, -20.8900], [55.4700, -21.0500], [55.4800, -21.1500], [55.5000, -21.2500], [55.5300, -21.3300]
535
- ]}
536
- ];
537
-
538
- // Positions des camions (simulées)
539
- const truckPositions = [
540
- { id: "TR-4512", coordinates: [55.3800, -20.9800], status: "active", speed: 68, fuel: 82 },
541
- { id: "TR-6789", coordinates: [55.2700, -21.0000], status: "waiting", speed: 0, fuel: 100 },
542
- { id: "TR-3210", coordinates: [55.4400, -20.9000], status: "maintenance", speed: 0, fuel: 45 },
543
- { id: "TR-9876", coordinates: [55.4200, -21.0100], status: "active", speed: 72, fuel: 65 },
544
- { id: "TR-5555", coordinates: [55.5200, -21.2000], status: "alert", speed: 32, fuel: 12 }
545
- ];
546
-
547
- // Une fois la carte chargée
548
- map.on('load', () => {
549
- // Ajout des dépôts
550
- truckDepots.forEach(depot => {
551
- new mapboxgl.Marker({ color: '#3b82f6' })
552
- .setLngLat(depot.coordinates)
553
- .setPopup(new mapboxgl.Popup().setHTML(`<b>${depot.name}</b>`))
554
- .addTo(map);
555
- });
556
-
557
- // Ajout des routes
558
- mainRoutes.forEach(route => {
559
- map.addLayer({
560
- id: route.name,
561
- type: 'line',
562
- source: {
563
- type: 'geojson',
564
- data: {
565
- type: 'Feature',
566
- properties: {},
567
- geometry: {
568
- type: 'LineString',
569
- coordinates: route.coordinates
570
- }
571
- }
572
- },
573
- layout: {
574
- 'line-join': 'round',
575
- 'line-cap': 'round'
576
- },
577
- paint: {
578
- 'line-color': '#3b82f6',
579
- 'line-width': 3
580
- }
581
- });
582
- });
583
-
584
- // Ajout des camions
585
- truckPositions.forEach(truck => {
586
- const el = document.createElement('div');
587
- el.className = 'truck-icon';
588
- el.style.backgroundImage = `url(https://cdn-icons-png.flaticon.com/512/2972/2972495.png)`;
589
 
590
- // Couleur selon le statut
591
- if (truck.status === "active") el.style.filter = "hue-rotate(120deg)";
592
- else if (truck.status === "alert") el.style.filter = "hue-rotate(0deg)";
593
- else if (truck.status === "maintenance") el.style.filter = "hue-rotate(240deg)";
594
- else el.style.filter = "hue-rotate(60deg)";
 
 
 
 
 
595
 
596
- new mapboxgl.Marker(el)
597
- .setLngLat(truck.coordinates)
598
- .setPopup(new mapboxgl.Popup().setHTML(`
599
- <b>${truck.id}</b><br>
600
- Statut: ${truck.status === "active" ? "En mission" : truck.status === "alert" ? "Alerte" : truck.status === "maintenance" ? "Maintenance" : "En attente"}<br>
601
- Vitesse: ${truck.speed} km/h<br>
602
- Carburant: ${truck.fuel}%
603
- `))
604
- .addTo(map);
605
- });
 
606
 
607
- // Ajout du relief 3D
608
- map.addLayer({
609
- 'id': '3d-buildings',
610
- 'source': 'composite',
611
- 'source-layer': 'building',
612
- 'filter': ['==', 'extrude', 'true'],
613
- 'type': 'fill-extrusion',
614
- 'minzoom': 15,
615
- 'paint': {
616
- 'fill-extrusion-color': '#aaa',
617
- 'fill-extrusion-height': [
618
- 'interpolate',
619
- ['linear'],
620
- ['zoom'],
621
- 15,
622
- 0,
623
- 15.05,
624
- ['get', 'height']
625
- ],
626
- 'fill-extrusion-base': [
627
- 'interpolate',
628
- ['linear'],
629
- ['zoom'],
630
- 15,
631
- 0,
632
- 15.05,
633
- ['get', 'min_height']
634
- ],
635
- 'fill-extrusion-opacity': 0.6
636
- }
637
- });
638
- });
639
-
640
- // Gestion des vues
641
- document.getElementById('satellite-view').addEventListener('click', () => {
642
- map.setStyle('mapbox://styles/mapbox/satellite-streets-v11');
643
- });
644
-
645
- document.getElementById('topo-view').addEventListener('click', () => {
646
- map.setStyle('mapbox://styles/mapbox/outdoors-v11');
647
- });
648
-
649
- // Simulation de mise à jour des positions
650
- setInterval(() => {
651
- document.getElementById('map-update').textContent = new Date().getSeconds();
652
 
653
- // Déplacement aléatoire des camions en mission
654
- truckPositions.forEach(truck => {
655
- if (truck.status === "active" || truck.status === "alert") {
656
- truck.coordinates[0] += (Math.random() - 0.5) * 0.005;
657
- truck.coordinates[1] += (Math.random() - 0.3) * 0.005;
658
 
659
- // Garder les coordonnées dans les limites de l'île
660
- truck.coordinates[0] = Math.max(55.2, Math.min(55.8, truck.coordinates[0]));
661
- truck.coordinates[1] = Math.max(-21.4, Math.min(-20.8, truck.coordinates[1]));
662
-
663
- // Mise à jour du carburant
664
- if (truck.status === "alert") {
665
- truck.fuel = Math.max(0, truck.fuel - 0.1);
666
- } else {
667
- truck.fuel = Math.max(0, truck.fuel - 0.02);
668
- }
669
-
670
- // Alerte si carburant trop bas
671
- if (truck.fuel < 15 && truck.status !== "alert") {
672
- truck.status = "alert";
673
- showAlert(`ALERTE: Carburant critique sur ${truck.id} (${Math.round(truck.fuel)}%)`);
674
- }
675
- }
676
- });
677
-
678
- // Recharger la carte périodiquement
679
- map.setCenter(reunionCoordinates);
680
- }, 10000);
681
-
682
- // Fonction d'alerte
683
- function showAlert(message) {
684
- const notification = document.getElementById('alert-notification');
685
- const notificationText = document.getElementById('notification-text');
686
-
687
- notificationText.textContent = message;
688
- notification.style.display = 'flex';
689
-
690
- setTimeout(() => {
691
- notification.style.display = 'none';
692
- }, 5000);
693
-
694
- // Ajouter à l'historique des alertes
695
- const trafficAnalysis = document.getElementById('traffic-analysis');
696
- const alertElement = document.createElement('div');
697
- alertElement.className = 'flex';
698
- alertElement.innerHTML = `
699
- <div class="w-2 h-2 rounded-full bg-red-500 mt-1.5 mr-2"></div>
700
- <div>${message}</div>
701
- `;
702
- trafficAnalysis.insertBefore(alertElement, trafficAnalysis.firstChild);
703
-
704
- // Limiter le nombre d'alertes affichées
705
- if (trafficAnalysis.children.length > 10) {
706
- trafficAnalysis.removeChild(trafficAnalysis.lastChild);
707
- }
708
- }
709
-
710
- // Simulation d'alertes aléatoires
711
- setInterval(() => {
712
- if (Math.random() < 0.1) {
713
- const alerts = [
714
- "Détection travaux sur RN2 - Déviation automatique activée",
715
- "Alerte météo: Fortes pluies prévues dans le Sud dans 15min",
716
- "Optimisation des itinéraires terminée - Gain moyen de 7% en carburant",
717
- "Camion TR-9876: Passage en mode économie d'énergie",
718
- "Mise à jour des cartes satellites disponible"
719
- ];
720
-
721
- showAlert(alerts[Math.floor(Math.random() * alerts.length)]);
722
- }
723
- }, 15000);
724
- </script>
725
- <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/conduite-temps-reel" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
726
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Euro Truck Simulator - 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
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css" rel="stylesheet">
10
  <style>
11
  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap');
12
 
13
+ :root {
14
+ --primary: #3b82f6;
15
+ --secondary: #f59e0b;
16
+ --danger: #ef4444;
17
+ --success: #10b981;
18
+ }
19
+
20
  body {
21
  font-family: 'Roboto', sans-serif;
22
  background-color: #0a0a0a;
23
  color: #fff;
24
  overflow: hidden;
25
+ touch-action: none;
26
  }
27
 
28
  .dashboard-font {
 
30
  }
31
 
32
  .glass-effect {
33
+ background: rgba(15, 23, 42, 0.85);
34
+ backdrop-filter: blur(12px);
35
+ border: 1px solid rgba(255, 255, 255, 0.15);
36
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
37
  }
38
 
39
+ .camera-view {
40
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
41
+ border-radius: 16px;
 
42
  overflow: hidden;
43
+ position: relative;
44
  }
45
 
46
+ .road-line {
47
+ position: absolute;
48
+ height: 2px;
49
+ background: rgba(255, 255, 255, 0.8);
50
+ transform-origin: left center;
51
+ box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
52
  }
53
 
54
+ .mission-card {
55
+ transition: all 0.3s ease;
56
+ cursor: pointer;
57
+ border: 1px solid rgba(255, 255, 255, 0.1);
58
+ }
59
+
60
+ .mission-card:hover {
61
+ transform: translateY(-5px);
62
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
63
+ border-color: var(--primary);
64
+ }
65
+
66
+ .truck-icon {
67
+ background-image: url('https://cdn-icons-png.flaticon.com/512/2972/2972495.png');
68
+ background-size: cover;
69
+ width: 40px;
70
+ height: 40px;
71
+ border-radius: 50%;
72
+ cursor: pointer;
73
+ }
74
+
75
+ .route-line {
76
+ background-color: var(--primary);
77
+ width: 4px;
78
+ }
79
+
80
+ .progress-bar {
81
  position: relative;
 
 
82
  overflow: hidden;
83
  }
84
 
85
+ .progress-bar::after {
86
+ content: '';
87
  position: absolute;
88
+ top: 0;
89
  left: 0;
 
90
  height: 100%;
91
+ width: 100%;
92
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
93
+ animation: progress-shine 2s infinite;
 
94
  }
95
 
96
+ @keyframes progress-shine {
97
+ 0% { transform: translateX(-100%); }
98
+ 100% { transform: translateX(100%); }
99
+ }
100
+
101
+ /* Animation route */
102
+ @keyframes road-move {
103
+ 0% { transform: translateX(0); }
104
+ 100% { transform: translateX(-100%); }
105
+ }
106
+
107
+ .road-animation {
108
+ animation: road-move 5s linear infinite;
109
+ }
110
+
111
+ /* Effets de lumière */
112
+ .light-beam {
113
  position: absolute;
114
+ width: 300px;
115
+ height: 100px;
116
+ background: linear-gradient(90deg, rgba(255,255,255,0.1), transparent);
117
+ transform: rotate(3deg);
118
+ filter: blur(5px);
119
+ opacity: 0;
 
 
 
 
120
  }
121
 
122
+ /* Effets de pluie */
123
+ .rain {
124
+ position: absolute;
125
+ top: 0;
126
+ left: 0;
127
+ right: 0;
128
+ bottom: 0;
129
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><path fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="1" d="M0,0 L400,400 M100,0 L500,400 M200,0 L600,400 M300,0 L700,400"/></svg>');
130
+ background-size: 200px 200px;
131
+ animation: rain-fall 0.5s linear infinite;
132
+ opacity: 0;
133
+ pointer-events: none;
134
  }
135
 
136
+ @keyframes rain-fall {
137
+ 0% { background-position: 0 0; }
138
+ 100% { background-position: 200px 200px; }
 
139
  }
140
 
141
+ /* Effets de brouillard */
142
+ .fog {
143
+ position: absolute;
144
+ top: 0;
145
+ left: 0;
146
+ right: 0;
147
+ bottom: 0;
148
+ background: rgba(255,255,255,0.03);
149
+ backdrop-filter: blur(2px);
150
+ opacity: 0;
151
+ pointer-events: none;
152
  }
153
 
154
+ /* Effets de phares */
155
+ .headlight {
156
+ position: absolute;
157
+ width: 400px;
158
+ height: 150px;
159
+ background: radial-gradient(ellipse at center, rgba(255,255,200,0.8) 0%, rgba(255,255,200,0.1) 70%, transparent 100%);
160
+ filter: blur(10px);
161
+ transform: translateX(-50%);
162
+ opacity: 0;
163
  }
164
 
165
+ /* Animation du moteur */
166
+ @keyframes engine-vibration {
167
+ 0%, 100% { transform: translateY(0); }
168
+ 50% { transform: translateY(1px); }
 
 
 
169
  }
170
 
171
+ .engine-vibration {
172
+ animation: engine-vibration 0.1s infinite;
 
173
  }
174
 
175
+ /* Réglages pour mobile */
176
+ @media (max-width: 768px) {
177
+ .mobile-controls {
178
+ display: flex !important;
179
+ }
180
+
181
+ .desktop-only {
182
+ display: none !important;
183
+ }
184
  }
185
 
186
+ /* Réalisme ajouté */
187
+ .realistic-shadow {
188
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
189
  }
190
 
191
+ .realistic-border {
192
+ border-radius: 12px;
193
+ overflow: hidden;
194
  }
195
 
196
+ .depth-effect {
197
+ box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
 
198
  }
199
  </style>
200
  </head>
201
  <body class="h-screen overflow-hidden">
202
+ <!-- Écran de chargement ultra-réaliste -->
203
+ <div id="loading-screen" class="fixed inset-0 bg-black z-50 flex flex-col items-center justify-center">
204
+ <div class="text-5xl font-bold mb-8 text-blue-400 tracking-wider">EURO TRUCK SIMULATOR</div>
205
+ <div class="text-xl text-yellow-400 mb-2">ÉDITION LA RÉUNION</div>
206
+
207
+ <div class="w-80 h-3 bg-gray-800 rounded-full overflow-hidden mb-4 depth-effect">
208
+ <div id="loading-progress" class="h-full bg-gradient-to-r from-blue-500 to-blue-600 rounded-full progress-bar" style="width: 0%"></div>
209
+ </div>
210
+
211
+ <div class="flex space-x-4 text-sm text-gray-400">
212
+ <div id="loading-step">Initialisation du moteur physique...</div>
213
+ <div id="loading-percent">0%</div>
214
+ </div>
215
+
216
+ <div class="absolute bottom-8 text-xs text-gray-500">
217
+ © 2023 Réunion Truck Simulations | Tous droits réservés
218
+ </div>
219
+ </div>
220
+
221
+ <!-- Menu principal amélioré -->
222
+ <div id="main-menu" class="fixed inset-0 bg-black bg-opacity-90 z-40 hidden flex items-center justify-center p-4">
223
+ <div class="glass-effect p-8 rounded-2xl max-w-4xl w-full realistic-shadow">
224
+ <div class="text-center mb-8">
225
+ <h1 class="text-5xl font-bold mb-2 text-blue-400 tracking-wider">EURO TRUCK SIMULATOR</h1>
226
+ <div class="text-2xl text-yellow-400">LA RÉUNION</div>
227
+ <div class="text-sm text-gray-400 mt-2">Version Ultime - Simulation Réaliste</div>
228
+ </div>
229
+
230
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
231
+ <div class="mission-card bg-gray-800 p-6 rounded-xl text-center" onclick="startMission('st-denis', 'st-pierre', 'express')">
232
+ <div class="w-16 h-16 bg-blue-900 rounded-full flex items-center justify-center mx-auto mb-3">
233
+ <i class="fas fa-bolt text-2xl text-blue-400"></i>
234
  </div>
235
+ <h3 class="font-bold text-lg">EXPRESS NORD-SUD</h3>
236
+ <p class="text-sm mt-2 text-gray-300">Livraison urgente de produits frais</p>
237
+ <div class="flex justify-between items-center mt-4 text-xs">
238
+ <div class="flex items-center">
239
+ <i class="fas fa-road mr-1 text-blue-400"></i>
240
+ <span>73km</span>
241
+ </div>
242
+ <div class="flex items-center">
243
+ <i class="fas fa-clock mr-1 text-yellow-400"></i>
244
+ <span>2h30</span>
245
+ </div>
246
+ <div class="flex items-center">
247
+ <i class="fas fa-euro-sign mr-1 text-green-400"></i>
248
+ <span>3 450€</span>
249
+ </div>
250
  </div>
251
+ <div class="mt-3 text-xs text-gray-500">
252
+ <i class="fas fa-traffic-light mr-1"></i> RN1 - Route du Littoral
253
  </div>
254
  </div>
 
 
 
 
 
255
 
256
+ <div class="mission-card bg-gray-800 p-6 rounded-xl text-center" onclick="startMission('st-paul', 'st-benoit', 'mountain')">
257
+ <div class="w-16 h-16 bg-green-900 rounded-full flex items-center justify-center mx-auto mb-3">
258
+ <i class="fas fa-mountain text-2xl text-green-400"></i>
259
+ </div>
260
+ <h3 class="font-bold text-lg">TRAVERSÉE DES PLAINES</h3>
261
+ <p class="text-sm mt-2 text-gray-300">Transport de matériaux de construction</p>
262
+ <div class="flex justify-between items-center mt-4 text-xs">
263
+ <div class="flex items-center">
264
+ <i class="fas fa-road mr-1 text-blue-400"></i>
265
+ <span>58km</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
266
  </div>
267
+ <div class="flex items-center">
268
+ <i class="fas fa-clock mr-1 text-yellow-400"></i>
269
+ <span>2h15</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
270
  </div>
271
+ <div class="flex items-center">
272
+ <i class="fas fa-euro-sign mr-1 text-green-400"></i>
273
+ <span>4 120€</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
274
  </div>
275
  </div>
276
+ <div class="mt-3 text-xs text-gray-500">
277
+ <i class="fas fa-hill-rockslide mr-1"></i> Route des Plaines
278
+ </div>
279
  </div>
280
 
281
+ <div class="mission-card bg-gray-800 p-6 rounded-xl text-center" onclick="startMission('st-pierre', 'st-denis', 'tour')">
282
+ <div class="w-16 h-16 bg-purple-900 rounded-full flex items-center justify-center mx-auto mb-3">
283
+ <i class="fas fa-route text-2xl text-purple-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
284
  </div>
285
+ <h3 class="font-bold text-lg">TOUR DE L'ÎLE COMPLET</h3>
286
+ <p class="text-sm mt-2 text-gray-300">Livraisons multiples - Défi de conduite</p>
287
+ <div class="flex justify-between items-center mt-4 text-xs">
288
+ <div class="flex items-center">
289
+ <i class="fas fa-road mr-1 text-blue-400"></i>
290
+ <span>207km</span>
291
  </div>
292
+ <div class="flex items-center">
293
+ <i class="fas fa-clock mr-1 text-yellow-400"></i>
294
+ <span>6h30</span>
295
  </div>
296
+ <div class="flex items-center">
297
+ <i class="fas fa-euro-sign mr-1 text-green-400"></i>
298
+ <span>9 850€</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
299
  </div>
300
  </div>
301
+ <div class="mt-3 text-xs text-gray-500">
302
+ <i class="fas fa-map-marked-alt mr-1"></i> Tour complet par la côte
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
303
  </div>
304
  </div>
305
  </div>
306
 
307
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
308
+ <div class="mission-card bg-gray-800 p-6 rounded-xl text-center" onclick="startMission('st-leu', 'st-joseph', 'danger')">
309
+ <div class="w-16 h-16 bg-red-900 rounded-full flex items-center justify-center mx-auto mb-3">
310
+ <i class="fas fa-exclamation-triangle text-2xl text-red-400"></i>
 
 
 
311
  </div>
312
+ <h3 class="font-bold text-lg">DÉFI DE LA CÔTE SAUVAGE</h3>
313
+ <p class="text-sm mt-2 text-gray-300">Route sinueuse - Conduite experte</p>
314
+ <div class="flex justify-between items-center mt-4 text-xs">
315
+ <div class="flex items-center">
316
+ <i class="fas fa-road mr-1 text-blue-400"></i>
317
+ <span>42km</span>
 
 
318
  </div>
319
+ <div class="flex items-center">
320
+ <i class="fas fa-clock mr-1 text-yellow-400"></i>
321
+ <span>1h45</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
322
  </div>
323
+ <div class="flex items-center">
324
+ <i class="fas fa-euro-sign mr-1 text-green-400"></i>
325
+ <span>6 750€</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
326
  </div>
327
  </div>
328
+ <div class="mt-3 text-xs text-gray-500">
329
+ <i class="fas fa-skull-crossbones mr-1"></i> Route du Tremblet
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
330
  </div>
331
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
332
 
333
+ <div class="mission-card bg-gray-800 p-6 rounded-xl text-center" onclick="showGarage()">
334
+ <div class="w-16 h-16 bg-yellow-900 rounded-full flex items-center justify-center mx-auto mb-3">
335
+ <i class="fas fa-warehouse text-2xl text-yellow-400"></i>
336
+ </div>
337
+ <h3 class="font-bold text-lg">GARAGE & PERSONNALISATION</h3>
338
+ <p class="text-sm mt-2 text-gray-300">Gérez votre flotte de véhicules</p>
339
+ <div class="mt-6 h-8 flex items-center justify-center">
340
+ <i class="fas fa-arrow-right text-xl text-yellow-400"></i>
341
+ </div>
342
+ </div>
343
 
344
+ <div class="mission-card bg-gray-800 p-6 rounded-xl text-center" onclick="showCompanyManager()">
345
+ <div class="w-16 h-16 bg-indigo-900 rounded-full flex items-center justify-center mx-auto mb-3">
346
+ <i class="fas fa-building text-2xl text-indigo-400"></i>
347
+ </div>
348
+ <h3 class="font-bold text-lg">GESTION D'ENTREPRISE</h3>
349
+ <p class="text-sm mt-2 text-gray-300">Développez votre compagnie</p>
350
+ <div class="mt-6 h-8 flex items-center justify-center">
351
+ <i class="fas fa-arrow-right text-xl text-indigo-400"></i>
352
+ </div>
353
+ </div>
354
+ </div>
355
 
356
+ <div class="flex flex-col md:flex-row justify-between items-center pt-4 border-t border-gray-700">
357
+ <div class="flex items-center mb-4 md:mb-0">
358
+ <img src="https://upload.wikimedia.org/wikipedia/commons/f/f6/Flag_of_La_Reunion.svg" class="w-8 h-6 mr-2">
359
+ <div class="text-sm">Simulation ultra-réaliste de La Réunion</div>
360
+ </div>
361
+
362
+ <div class="flex space-x-3">
363
+ <button class="px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center" onclick="showSettings()">
364
+ <i class="fas fa-cog mr-2"></i> Réglages
365
+ </button>
366
+ <button class="px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center" onclick="hideMenu()">
367
+ <i class="fas fa-play mr-2"></i> Continuer
368
+ </button>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ </div>
373
+
374
+ <!-- Garage amélioré -->
375
+ <div id="garage-menu" class="fixed inset-0 bg-black bg-opacity-90 z-40 hidden flex items-center justify-center p-4">
376
+ <div class="glass-effect p-8 rounded-2xl max-w-6xl w-full realistic-shadow">
377
+ <div class="flex justify-between items-center mb-6">
378
+ <div>
379
+ <h2 class="text-3xl font-bold text-blue-400">GARAGE RÉUNION</h2>
380
+ <div class="text-sm text-gray-400">Gérez votre flotte de véhicules</div>
381
+ </div>
382
+ <button class="px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center" onclick="hideGarage()">
383
+ <i class="fas fa-arrow-left mr-2"></i> Retour
384
+ </button>
385
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
386
 
387
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
388
+ <!-- Liste des véhicules -->
389
+ <div class="lg:col-span-1">
390
+ <h3 class="font-bold text-xl mb-4">VOTRE FLOTTE</h3>
 
391
 
392
+ <div class="space-y-3 max-h-96 overflow-y-auto pr-2">
393
+ <div class="bg-gray-800 rounded-xl p-4 flex items-center cursor-pointer hover:bg-gray-700 border border-blue-500">
394
+ <img src="https://cdn-icons-png.flaticon.com/512/2972/2972495.png" class="w-12 h-12 mr-3">
395
+ <div class="flex-1">
396
+ <div class="font-bold">Renault Master</div>
397
+ <div class="text-xs text-gray-400">2019 - Diesel - 3.5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
398
  </html>
prompts.txt CHANGED
@@ -5,4 +5,7 @@ UN TABLEAU DE BORD SOFISTIQUE TRES PUISSANT POUR TOUT CONTROLER
5
  JE VEUT SYSTEME SATELITE ET GPS POUR TOUT STRANSMETRE EN TEMP REEL AVEC DIFFERENT VUE AVEC VUE PANORAMIQUE
6
  JE VEUT UNE PAGE D ACCUEIL POUR POUVOIR CONDUIRE EN TEMP REE
7
  TABLEAU DE BORD DE CONDUITE
8
- je veux developper la conduite de divers camion controler par systeme robotiser par des arméés d' IA pour piloté ce projet realistes en temp normal avec systeme gps et satelite pour que tout soit reel robotiser , sur les route de l'ile de la reunion , avec ses merveilleux paysage realiste le tout creer par de tres puissant IA et leur assisant puissant IA
 
 
 
 
5
  JE VEUT SYSTEME SATELITE ET GPS POUR TOUT STRANSMETRE EN TEMP REEL AVEC DIFFERENT VUE AVEC VUE PANORAMIQUE
6
  JE VEUT UNE PAGE D ACCUEIL POUR POUVOIR CONDUIRE EN TEMP REE
7
  TABLEAU DE BORD DE CONDUITE
8
+ je veux developper la conduite de divers camion controler par systeme robotiser par des arméés d' IA pour piloté ce projet realistes en temp normal avec systeme gps et satelite pour que tout soit reel robotiser , sur les route de l'ile de la reunion , avec ses merveilleux paysage realiste le tout creer par de tres puissant IA et leur assisant puissant IA
9
+ JE VEUX UNE PAGE POUR LA CONDUITE REEL
10
+ je veux creer , un jeu de simulation de véhicule dans lequel le joueur traverse une version légèrement fictive de l' ILE DELA REUNION effectue des livraisons et des ramassages et apprend tout sur son véhicule. A propos du jeu Couvrant une grande partie de LA REUNION , la carte s'étend DE st denis en passant a st pierre , par les plaine etc.., et
11
+ je veux creer un jeux comme Euro Truck Simulator mais beaucoup plus puissant s'péciale ile de la reunion