Hugging Face's logo

Spaces:
docto41
/
ttrun
Running

App Files Community
docto41 commited on
Commit
c9c4fcd
·
verified ·
1 Parent(s): 1397451

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +557 -857
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,147 +3,107 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Réunion Truck Live - Expérience IA Robotisée</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;600;700;900&display=swap');
11
 
12
  :root {
13
- --primary: #FF6B35;
14
- --secondary: #004E89;
15
- --accent: #FFD166;
16
- --dark: #2D3047;
17
- --light: #F7F7F2;
 
18
  }
19
 
20
  body {
21
- font-family: 'Poppins', sans-serif;
22
- background-color: var(--dark);
23
  color: white;
24
  overflow-x: hidden;
25
  }
26
 
27
- .hero {
28
- background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
29
- url('https://images.unsplash.com/photo-1566438480900-0609be27a4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1889&q=80');
30
- background-size: cover;
31
- background-position: center;
32
- height: 100vh;
33
- }
34
-
35
- .live-badge {
36
- animation: pulse 2s infinite;
37
- }
38
-
39
- @keyframes pulse {
40
- 0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
41
- 70% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
42
- 100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
43
- }
44
-
45
- .driver-view {
46
- perspective: 1000px;
47
- }
48
-
49
- .driver-view-inner {
50
- transition: transform 0.5s;
51
- transform-style: preserve-3d;
52
- }
53
-
54
- .driver-view:hover .driver-view-inner {
55
- transform: rotateX(5deg) rotateY(5deg);
56
  }
57
 
58
- .dashboard-item {
59
- transition: all 0.3s ease;
 
60
  }
61
 
62
- .dashboard-item:hover {
63
- transform: translateY(-3px);
64
  }
65
 
66
- .ai-chat-bubble {
67
- animation: float 6s ease-in-out infinite;
 
 
68
  }
69
 
70
- @keyframes float {
71
- 0% { transform: translateY(0px); }
72
- 50% { transform: translateY(-10px); }
73
- 100% { transform: translateY(0px); }
 
74
  }
75
 
76
- .road-line {
77
- animation: roadMove 1.5s linear infinite;
 
78
  }
79
 
80
- @keyframes roadMove {
81
- 0% { transform: translateY(0); }
82
- 100% { transform: translateY(100px); }
 
 
 
 
 
 
 
 
83
  }
84
 
85
- .typing-indicator::after {
86
- content: '...';
87
- animation: typing 1.5s infinite;
88
  }
89
 
90
- @keyframes typing {
91
- 0% { content: '.'; }
92
- 33% { content: '..'; }
93
- 66% { content: '...'; }
94
  }
95
 
96
- /* Robotisation avancée */
97
- .robot-pulse {
98
- animation: robotPulse 3s infinite alternate;
 
 
99
  }
100
 
101
- @keyframes robotPulse {
102
- 0% { text-shadow: 0 0 5px rgba(0, 255, 255, 0.5); }
103
- 100% { text-shadow: 0 0 20px rgba(0, 255, 255, 0.8), 0 0 30px rgba(0, 255, 255, 0.6); }
104
  }
105
 
106
- .robot-scan {
107
- position: relative;
108
- overflow: hidden;
109
  }
110
 
111
- .robot-scan::after {
112
- content: '';
113
- position: absolute;
114
- top: 0;
115
- left: 0;
116
- right: 0;
117
- height: 2px;
118
- background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.8), transparent);
119
- animation: scan 3s linear infinite;
120
  }
121
 
122
- @keyframes scan {
123
- 0% { top: 0; }
124
- 100% { top: 100%; }
125
  }
126
 
127
- .robot-eye {
128
- animation: eyeBlink 5s infinite;
129
- }
130
-
131
- @keyframes eyeBlink {
132
- 0%, 45%, 55%, 100% { transform: scaleY(1); }
133
- 50% { transform: scaleY(0.1); }
134
- }
135
-
136
- .binary-bg {
137
- position: absolute;
138
- top: 0;
139
- left: 0;
140
- width: 100%;
141
- height: 100%;
142
- background-image:
143
- linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px),
144
- linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
145
- background-size: 20px 20px;
146
- z-index: -1;
147
  }
148
  </style>
149
  </head>
@@ -151,825 +111,565 @@
151
  <!-- Binary background pattern -->
152
  <div class="binary-bg"></div>
153
 
154
- <!-- Navigation IA Robotisée -->
155
- <nav class="fixed w-full z-50 bg-gray-900/90 backdrop-blur-md shadow-sm border-b border-gray-800">
156
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
157
- <div class="flex justify-between h-20 items-center">
158
- <div class="flex items-center">
159
- <a href="#" class="flex items-center robot-pulse">
160
- <img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Flag_of_Reunion_Island.svg" alt="Logo Réunion" class="h-8 w-auto">
161
- <span class="ml-2 text-xl font-bold text-white">RÉUNION TRUCK <span class="text-cyan-400">AI ROBOT</span></span>
162
- </a>
163
- </div>
164
- <div class="hidden md:flex items-center space-x-8">
165
- <div class="ai-chat-bubble px-3 py-1 rounded-full bg-cyan-600 text-white flex items-center robot-pulse">
166
- <i class="fas fa-robot mr-2 robot-eye"></i>
167
- <span id="ai-status">SYSTÈME ROBOT ACTIF</span>
168
- </div>
169
- <a href="#live" class="text-white px-3 py-1 rounded-full bg-red-600 flex items-center live-badge">
170
- <span class="relative flex h-2 w-2 mr-2">
171
- <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
172
- <span class="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
173
- </span>
174
- MODE ROBOT LIVE
175
- </a>
176
- <a href="#concept" class="text-gray-300 hover:text-cyan-400 transition">IA Robotisée</a>
177
- <a href="#fleet" class="text-gray-300 hover:text-cyan-400 transition">Flotte Robotique</a>
178
- <a href="#live-views" class="text-gray-300 hover:text-cyan-400 transition">Visions IA</a>
179
- <a href="#preorder" class="px-4 py-2 rounded-full bg-cyan-600 text-white hover:bg-cyan-700 transition">Contrôle Robot</a>
180
- </div>
181
- <div class="md:hidden flex items-center">
182
- <button id="menu-btn" class="text-gray-300 hover:text-cyan-400">
183
- <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
184
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
185
- </svg>
186
- </button>
187
  </div>
 
188
  </div>
189
- </div>
190
-
191
- <!-- Mobile menu -->
192
- <div id="mobile-menu" class="hidden md:hidden bg-gray-900 shadow-lg border-t border-gray-800">
193
- <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
194
- <a href="#live" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-red-600 flex items-center">
195
- <span class="relative flex h-2 w-2 mr-2">
196
- <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
197
- <span class="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
198
- </span>
199
- MODE ROBOT
200
- </a>
201
- <a href="#concept" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-cyan-400 hover:bg-gray-800">IA Robotisée</a>
202
- <a href="#fleet" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-cyan-400 hover:bg-gray-800">Flotte Robotique</a>
203
- <a href="#live-views" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-cyan-400 hover:bg-gray-800">Visions IA</a>
204
- <a href="#preorder" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-cyan-600 hover:bg-cyan-700">Contrôle Robot</a>
205
- </div>
206
- </div>
207
- </nav>
208
-
209
- <!-- Live Driving Section with AI Robot -->
210
- <section id="live" class="pt-32 pb-20 bg-gray-900">
211
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
212
- <div class="text-center mb-12">
213
- <div class="inline-flex items-center px-4 py-2 rounded-full bg-red-600 text-white mb-4 robot-pulse">
214
  <span class="relative flex h-2 w-2 mr-2">
215
- <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
216
- <span class="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
217
  </span>
218
- SYSTÈME ROBOT ACTIVÉ - PILOTAGE AUTONOME
219
  </div>
220
- <h2 class="text-4xl md:text-5xl font-bold mb-4 text-white robot-pulse">EXPÉRIENCE DE CONDUITE <span class="text-cyan-400">ROBOTISÉE</span></h2>
221
- <p class="text-xl text-gray-300 max-w-3xl mx-auto">Notre intelligence artificielle robotique contrôle l'ensemble des paramètres en temps réel</p>
 
222
  </div>
223
-
224
- <!-- Main Live Stream with AI Controls -->
225
- <div class="bg-black rounded-xl overflow-hidden shadow-2xl mb-12 driver-view relative robot-scan">
226
- <!-- AI Road Simulation -->
227
- <div class="absolute inset-0 overflow-hidden opacity-20">
228
- <div class="absolute top-0 left-1/4 w-1/2 h-full">
229
- <div class="relative h-full">
230
- <div class="absolute left-1/2 w-1 h-full bg-yellow-300 transform -translate-x-1/2"></div>
231
- <div class="road-line absolute left-1/4 w-1/2 h-4 bg-gray-600 transform -translate-x-1/2"></div>
232
- </div>
233
- </div>
234
- </div>
235
-
236
- <div class="relative pt-[56.25%] driver-view-inner">
237
- <!-- Stream placeholder with AI controls -->
238
- <div class="absolute inset-0 bg-gray-800 flex items-center justify-center">
239
- <div class="text-center z-10">
240
- <div class="mb-6">
241
- <div class="inline-flex items-center px-4 py-2 rounded-full bg-cyan-600 text-white robot-pulse">
242
- <i class="fas fa-robot mr-2 robot-eye"></i>
243
- <span>ROBOT DE CONDUITE ACTIF</span>
244
- </div>
245
- </div>
246
- <h3 class="text-2xl font-bold text-white mb-2">Route du Volcan - Mode Robotique</h3>
247
- <p class="text-gray-300 mb-6" id="ai-driving-stats">Vitesse: 72 km/h | Altitude: 1200m | Météo: Nuageux</p>
248
- <div class="w-full max-w-md mx-auto bg-gray-700 rounded-full h-2.5 mb-6">
249
- <div class="bg-cyan-600 h-2.5 rounded-full" style="width: 78%" id="ai-progress"></div>
250
- </div>
251
- <button id="ai-control-btn" class="px-8 py-4 bg-red-600 rounded-full font-bold text-white hover:bg-red-700 transition flex items-center mx-auto robot-pulse">
252
- <i class="fas fa-robot mr-3"></i> PRENDRE LE CONTRÔLE ROBOT
253
- </button>
254
- </div>
255
- </div>
256
- </div>
257
-
258
- <!-- AI Dashboard overlay -->
259
- <div class="bg-gray-900/90 p-4 backdrop-blur-sm">
260
- <div class="flex flex-wrap justify-between items-center">
261
- <div class="dashboard-item flex items-center px-4 py-2 bg-gray-800 rounded-lg m-1 robot-pulse">
262
- <i class="fas fa-robot text-cyan-400 mr-2"></i>
263
- <span id="ai-mode">Mode autonome robotisé</span>
264
- </div>
265
- <div class="dashboard-item flex items-center px-4 py-2 bg-gray-800 rounded-lg m-1">
266
- <i class="fas fa-tachometer-alt text-yellow-400 mr-2"></i>
267
- <span id="ai-speed">72 km/h</span>
268
- </div>
269
- <div class="dashboard-item flex items-center px-4 py-2 bg-gray-800 rounded-lg m-1">
270
- <i class="fas fa-gas-pump text-blue-400 mr-2"></i>
271
- <span id="ai-fuel">64% énergie</span>
272
- </div>
273
- <div class="dashboard-item flex items-center px-4 py-2 bg-gray-800 rounded-lg m-1">
274
- <i class="fas fa-road text-green-400 mr-2"></i>
275
- <span id="ai-distance">12.7 km parcourus</span>
276
- </div>
277
- <div class="dashboard-item flex items-center px-4 py-2 bg-gray-800 rounded-lg m-1 robot-pulse">
278
- <i class="fas fa-brain text-purple-400 mr-2"></i>
279
- <span id="ai-processing">Calcul robot: 92%</span>
280
- </div>
281
- </div>
282
- </div>
283
 
284
- <!-- AI Chat Assistant -->
285
- <div id="ai-chat-container" class="absolute bottom-24 right-4 w-72 bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 opacity-0 scale-95 border border-cyan-500">
286
- <div class="bg-cyan-600 px-4 py-2 flex justify-between items-center">
287
- <div class="flex items-center">
288
- <i class="fas fa-robot mr-2 robot-eye"></i>
289
- <span>Assistant Robot</span>
290
- </div>
291
- <button id="close-chat" class="text-white hover:text-gray-200">
292
- <i class="fas fa-times"></i>
 
293
  </button>
294
- </div>
295
- <div class="p-4 h-48 overflow-y-auto" id="ai-chat-messages">
296
- <div class="mb-3">
297
- <div class="bg-gray-700 rounded-lg p-3 text-sm inline-block">
298
- [SYSTÈME ROBOT] Initialisation terminée. Je suis votre assistant IA robotisé. Posez-moi vos questions!
299
- </div>
300
- </div>
301
- </div>
302
- <div class="p-2 border-t border-gray-700 flex">
303
- <input type="text" id="ai-chat-input" placeholder="Commande robot..." class="flex-1 bg-gray-700 text-white px-3 py-2 rounded-l-md focus:outline-none focus:ring-1 focus:ring-cyan-500">
304
- <button id="ai-chat-send" class="bg-cyan-600 text-white px-3 py-2 rounded-r-md hover:bg-cyan-700">
305
- <i class="fas fa-paper-plane"></i>
306
  </button>
307
  </div>
308
  </div>
309
 
310
- <!-- AI Chat Button -->
311
- <button id="ai-chat-btn" class="absolute bottom-4 right-4 bg-cyan-600 text-white p-3 rounded-full shadow-lg hover:bg-cyan-700 transition robot-pulse">
312
- <i class="fas fa-comment-dots text-xl"></i>
313
- </button>
314
- </div>
315
- </div>
316
- </section>
317
-
318
- <!-- AI Features Section -->
319
- <section id="concept" class="py-20 bg-gray-800">
320
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
321
- <div class="text-center mb-16">
322
- <h2 class="text-3xl md:text-4xl font-bold mb-4 text-white robot-pulse">TECHNOLOGIES <span class="text-cyan-400">ROBOTIQUES</span></h2>
323
- <p class="text-xl text-gray-300 max-w-3xl mx-auto">Nos systèmes IA robotisés révolutionnent l'expérience de conduite</p>
324
- </div>
325
-
326
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
327
- <!-- AI Feature 1 -->
328
- <div class="bg-gray-900 rounded-xl overflow-hidden shadow-lg transition hover:shadow-xl hover:transform hover:-translate-y-1 p-6 border border-cyan-500/30">
329
- <div class="w-16 h-16 bg-cyan-600 rounded-full flex items-center justify-center text-white mb-6 mx-auto robot-pulse">
330
- <i class="fas fa-eye text-2xl robot-eye"></i>
331
- </div>
332
- <h3 class="text-xl font-bold text-white mb-3 text-center">Vision Robotique</h3>
333
- <p class="text-gray-300 mb-4">Nos robots analysent en temps réel avec 12 caméras haute résolution et capteurs LiDAR.</p>
334
- <div class="bg-gray-800 rounded-lg p-3">
335
- <div class="flex justify-between text-sm text-gray-400 mb-1">
336
- <span>Détection obstacles</span>
337
- <span id="ai-detection">98%</span>
338
- </div>
339
- <div class="w-full bg-gray-700 rounded-full h-2">
340
- <div class="bg-green-500 h-2 rounded-full" style="width: 98%"></div>
341
- </div>
342
- </div>
343
- </div>
344
-
345
- <!-- AI Feature 2 -->
346
- <div class="bg-gray-900 rounded-xl overflow-hidden shadow-lg transition hover:shadow-xl hover:transform hover:-translate-y-1 p-6 border border-cyan-500/30">
347
- <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center text-white mb-6 mx-auto robot-pulse">
348
- <i class="fas fa-cloud-sun-rain text-2xl"></i>
349
- </div>
350
- <h3 class="text-xl font-bold text-white mb-3 text-center">Météo Robotique</h3>
351
- <p class="text-gray-300 mb-4">L'IA adapte la conduite en temps réel aux conditions météo avec précision millimétrique.</p>
352
- <div class="bg-gray-800 rounded-lg p-3">
353
- <div class="flex justify-between text-sm text-gray-400 mb-1">
354
- <span>Précision météo</span>
355
- <span id="ai-weather">94%</span>
356
- </div>
357
- <div class="w-full bg-gray-700 rounded-full h-2">
358
- <div class="bg-blue-500 h-2 rounded-full" style="width: 94%"></div>
359
- </div>
360
- </div>
361
- </div>
362
-
363
- <!-- AI Feature 3 -->
364
- <div class="bg-gray-900 rounded-xl overflow-hidden shadow-lg transition hover:shadow-xl hover:transform hover:-translate-y-1 p-6 border border-cyan-500/30">
365
- <div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center text-white mb-6 mx-auto robot-pulse">
366
- <i class="fas fa-route text-2xl"></i>
367
- </div>
368
- <h3 class="text-xl font-bold text-white mb-3 text-center">Navigation Robotique</h3>
369
- <p class="text-gray-300 mb-4">Algorithmes d'apprentissage profond optimisés pour les routes réunionnaises.</p>
370
- <div class="bg-gray-800 rounded-lg p-3">
371
- <div class="flex justify-between text-sm text-gray-400 mb-1">
372
- <span>Optimisation itinéraire</span>
373
- <span id="ai-route">89%</span>
374
- </div>
375
- <div class="w-full bg-gray-700 rounded-full h-2">
376
- <div class="bg-yellow-500 h-2 rounded-full" style="width: 89%"></div>
377
- </div>
378
- </div>
379
- </div>
380
- </div>
381
- </div>
382
- </section>
383
-
384
- <!-- Live Views Grid Section with AI -->
385
- <section id="live-views" class="py-16 bg-gray-900">
386
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
387
- <div class="text-center mb-12">
388
- <h2 class="text-3xl md:text-4xl font-bold mb-4 text-white robot-pulse">CAMÉRAS <span class="text-cyan-400">ROBOTIQUES</span></h2>
389
- <p class="text-xl text-gray-300 max-w-3xl mx-auto">Chaque caméra est équipée de notre technologie de vision robotique</p>
390
- </div>
391
-
392
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
393
- <!-- Stream 1 with AI -->
394
- <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg transition hover:shadow-xl hover:transform hover:-translate-y-1 group border border-cyan-500/30">
395
- <div class="relative pt-[56.25%] bg-gray-700">
396
- <div class="absolute inset-0 flex items-center justify-center">
397
- <div class="text-center">
398
- <div class="mb-2">
399
- <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-600 text-white text-sm robot-pulse">
400
- <i class="fas fa-robot mr-1 robot-eye"></i>
401
- <span>ROBOT ACTIF</span>
402
- </div>
403
- </div>
404
- <button class="px-4 py-2 bg-black/50 rounded-full text-white group-hover:bg-cyan-600 transition">
405
- <i class="fas fa-expand"></i>
406
- </button>
407
- </div>
408
- </div>
409
- <div class="absolute top-2 left-2 bg-black/50 text-white text-xs px-2 py-1 rounded">
410
- <i class="fas fa-map-marker-alt mr-1"></i> Route du Littoral
411
- </div>
412
- <div class="absolute bottom-2 left-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded flex justify-between">
413
- <span><i class="fas fa-car mr-1"></i> 12 véhicules détectés</span>
414
- <span><i class="fas fa-traffic-light mr-1"></i> Fluide</span>
415
- </div>
416
- </div>
417
- <div class="p-4">
418
- <h3 class="text-lg font-bold text-white mb-1">Robot #RT-412</h3>
419
- <p class="text-gray-400 text-sm mb-2">Analyse Robot: Circulation normale - Temps clair</p>
420
- <div class="flex justify-between items-center text-xs text-gray-500">
421
- <span><i class="fas fa-brain mr-1"></i> 94% précision</span>
422
- <span><i class="fas fa-wifi mr-1"></i> 5G</span>
423
- <span><i class="fas fa-clock mr-1"></i> 0.8s latence</span>
424
- </div>
425
- </div>
426
- </div>
427
-
428
- <!-- Stream 2 with AI -->
429
- <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg transition hover:shadow-xl hover:transform hover:-translate-y-1 group border border-cyan-500/30">
430
- <div class="relative pt-[56.25%] bg-gray-700">
431
- <div class="absolute inset-0 flex items-center justify-center">
432
- <div class="text-center">
433
- <div class="mb-2">
434
- <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-600 text-white text-sm robot-pulse">
435
- <i class="fas fa-robot mr-1 robot-eye"></i>
436
- <span>ROBOT ACTIF</span>
437
- </div>
438
- </div>
439
- <button class="px-4 py-2 bg-black/50 rounded-full text-white group-hover:bg-cyan-600 transition">
440
- <i class="fas fa-expand"></i>
441
- </button>
442
- </div>
443
- </div>
444
- <div class="absolute top-2 left-2 bg-black/50 text-white text-xs px-2 py-1 rounded">
445
- <i class="fas fa-map-marker-alt mr-1"></i> Route des Tamarins
446
- </div>
447
- <div class="absolute bottom-2 left-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded flex justify-between">
448
- <span><i class="fas fa-car mr-1"></i> 8 véhicules détectés</span>
449
- <span><i class="fas fa-traffic-light mr-1"></i> Modérée</span>
450
- </div>
451
- </div>
452
- <div class="p-4">
453
- <h3 class="text-lg font-bold text-white mb-1">Robot #RT-219</h3>
454
- <p class="text-gray-400 text-sm mb-2">Analyse Robot: Pluie légère - Chaussée humide</p>
455
- <div class="flex justify-between items-center text-xs text-gray-500">
456
- <span><i class="fas fa-brain mr-1"></i> 89% précision</span>
457
- <span><i class="fas fa-wifi mr-1"></i> 5G</span>
458
- <span><i class="fas fa-clock mr-1"></i> 1.2s latence</span>
459
- </div>
460
  </div>
461
  </div>
462
 
463
- <!-- Stream 3 with AI -->
464
- <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg transition hover:shadow-xl hover:transform hover:-translate-y-1 group border border-cyan-500/30">
465
- <div class="relative pt-[56.25%] bg-gray-700">
466
- <div class="absolute inset-0 flex items-center justify-center">
467
- <div class="text-center">
468
- <div class="mb-2">
469
- <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-600 text-white text-sm robot-pulse">
470
- <i class="fas fa-robot mr-1 robot-eye"></i>
471
- <span>ROBOT ACTIF</span>
472
- </div>
473
- </div>
474
- <button class="px-4 py-2 bg-black/50 rounded-full text-white group-hover:bg-cyan-600 transition">
475
- <i class="fas fa-expand"></i>
476
- </button>
477
- </div>
478
- </div>
479
- <div class="absolute top-2 left-2 bg-black/50 text-white text-xs px-2 py-1 rounded">
480
- <i class="fas fa-map-marker-alt mr-1"></i> Route du Volcan
481
- </div>
482
- <div class="absolute bottom-2 left-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded flex justify-between">
483
- <span><i class="fas fa-car mr-1"></i> 3 véhicules détectés</span>
484
- <span><i class="fas fa-traffic-light mr-1"></i> Fluide</span>
485
- </div>
486
- </div>
487
- <div class="p-4">
488
- <h3 class="text-lg font-bold text-white mb-1">Robot #RT-785</h3>
489
- <p class="text-gray-400 text-sm mb-2">Analyse Robot: Brouillard léger - Visibilité réduite</p>
490
- <div class="flex justify-between items-center text-xs text-gray-500">
491
- <span><i class="fas fa-brain mr-1"></i> 82% précision</span>
492
- <span><i class="fas fa-wifi mr-1"></i> 4G</span>
493
- <span><i class="fas fa-clock mr-1"></i> 2.1s latence</span>
494
- </div>
495
- </div>
496
- </div>
497
- </div>
498
-
499
- <div class="mt-12 text-center">
500
- <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-cyan-600 hover:bg-cyan-700 robot-pulse">
501
- ACCÉDER À TOUS LES ROBOTS (18 UNITÉS ACTIVES)
502
- <svg class="ml-3 -mr-1 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
503
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
504
- </svg>
505
- </button>
506
- </div>
507
- </div>
508
- </section>
509
-
510
- <!-- AI Fleet Section -->
511
- <section id="fleet" class="py-20 bg-gray-800">
512
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
513
- <div class="text-center mb-16">
514
- <h2 class="text-3xl md:text-4xl font-bold mb-4 text-white robot-pulse">NOTRE <span class="text-cyan-400">FLOTTE ROBOTIQUE</span></h2>
515
- <p class="text-xl text-gray-300 max-w-3xl mx-auto">Véhicules autonomes équipés des dernières technologies IA</p>
516
- </div>
517
-
518
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
519
- <!-- AI Truck 1 -->
520
- <div class="bg-gray-900 rounded-xl overflow-hidden shadow-lg transition hover:shadow-xl hover:transform hover:-translate-y-1 border border-cyan-500/30">
521
- <div class="h-48 bg-gray-800 flex items-center justify-center relative">
522
- <img src="https://cdn-icons-png.flaticon.com/512/2942/2942737.png" alt="Camion IA" class="h-32">
523
- <div class="absolute top-2 right-2 bg-cyan-600 text-white text-xs px-2 py-1 rounded-full robot-pulse">
524
- <i class="fas fa-bolt"></i> ROBOT NIVEAU 4
525
- </div>
526
- </div>
527
- <div class="p-6">
528
- <h3 class="text-xl font-bold text-white mb-2">Robot Sentinel</h3>
529
- <p class="text-gray-300 mb-4">Autonomie complète avec 12 capteurs LiDAR et 8 caméras 360°</p>
530
- <div class="flex justify-between items-center">
531
- <div>
532
- <span class="text-cyan-400 font-bold">EN SERVICE</span>
533
- <div class="flex items-center mt-1">
534
- <i class="fas fa-microchip text-gray-400 mr-2"></i>
535
- <span class="text-gray-300 text-sm">2x NVIDIA Orin</span>
536
- </div>
537
- </div>
538
- <button class="px-4 py-2 bg-gray-700 rounded-lg text-white text-sm hover:bg-gray-600">DÉTAILS TECH</button>
539
- </div>
540
  </div>
541
  </div>
542
 
543
- <!-- AI Truck 2 -->
544
- <div class="bg-gray-900 rounded-xl overflow-hidden shadow-lg transition hover:shadow-xl hover:transform hover:-translate-y-1 border border-cyan-500/30">
545
- <div class="h-48 bg-gray-800 flex items-center justify-center relative">
546
- <img src="https://cdn-icons-png.flaticon.com/512/2942/2942713.png" alt="Camion IA" class="h-32">
547
- <div class="absolute top-2 right-2 bg-purple-600 text-white text-xs px-2 py-1 rounded-full robot-pulse">
548
- <i class="fas fa-brain"></i> IA AVANCÉE
549
- </div>
550
- </div>
551
- <div class="p-6">
552
- <h3 class="text-xl font-bold text-white mb-2">Robot Horizon</h3>
553
- <p class="text-gray-300 mb-4">Navigation robotique avec apprentissage profond des routes locales</p>
554
- <div class="flex justify-between items-center">
555
- <div>
556
- <span class="text-purple-400 font-bold">EN SERVICE</span>
557
- <div class="flex items-center mt-1">
558
- <i class="fas fa-microchip text-gray-400 mr-2"></i>
559
- <span class="text-gray-300 text-sm">Qualcomm AI Stack</span>
560
  </div>
561
  </div>
562
- <button class="px-4 py-2 bg-gray-700 rounded-lg text-white text-sm hover:bg-gray-600">DÉTAILS TECH</button>
563
- </div>
564
- </div>
565
- </div>
566
-
567
- <!-- AI Truck 3 -->
568
- <div class="bg-gray-900 rounded-xl overflow-hidden shadow-lg transition hover:shadow-xl hover:transform hover:-translate-y-1 border border-cyan-500/30">
569
- <div class="h-48 bg-gray-800 flex items-center justify-center relative">
570
- <img src="https://cdn-icons-png.flaticon.com/512/2942/2942663.png" alt="Camion IA" class="h-32">
571
- <div class="absolute top-2 right-2 bg-green-600 text-white text-xs px-2 py-1 rounded-full robot-pulse">
572
- <i class="fas fa-leaf"></i> ROBOT ÉCOLO
573
  </div>
574
- </div>
575
- <div class="p-6">
576
- <h3 class="text-xl font-bold text-white mb-2">Robot Terra</h3>
577
- <p class="text-gray-300 mb-4">Optimisation énergétique robotique et conduite éco-responsable</p>
578
- <div class="flex justify-between items-center">
579
- <div>
580
- <span class="text-green-400 font-bold">EN SERVICE</span>
581
- <div class="flex items-center mt-1">
582
- <i class="fas fa-microchip text-gray-400 mr-2"></i>
583
- <span class="text-gray-300 text-sm">Tesla Dojo</span>
584
- </div>
585
- </div>
586
- <button class="px-4 py-2 bg-gray-700 rounded-lg text-white text-sm hover:bg-gray-600">DÉTAILS TECH</button>
 
 
 
587
  </div>
588
  </div>
589
  </div>
590
  </div>
591
- </div>
592
- </section>
593
-
594
- <!-- AI Roadmap Section -->
595
- <section class="py-20 bg-gray-900">
596
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
597
- <div class="text-center mb-16">
598
- <h2 class="text-3xl md:text-4xl font-bold mb-4 text-white robot-pulse">ÉVOLUTION <span class="text-cyan-400">ROBOTIQUE</span></h2>
599
- <p class="text-xl text-gray-300 max-w-3xl mx-auto">Le développement de notre intelligence artificielle robotisée</p>
600
- </div>
601
 
602
- <div class="relative">
603
- <!-- Timeline -->
604
- <div class="hidden sm:block absolute h-full w-1 bg-gray-700 left-1/2 transform -translate-x-1/2"></div>
605
-
606
- <!-- Timeline Item 1 -->
607
- <div class="mb-12 sm:mb-0">
608
- <div class="flex flex-col sm:flex-row items-center">
609
- <div class="flex-1 sm:text-right sm:pr-8 order-1 sm:order-1">
610
- <h3 class="text-xl font-bold text-white mb-2">Q3 2023</h3>
611
- <p class="text-gray-300">Déploiement des premiers robots avec détection basique d'obstacles</p>
612
- </div>
613
- <div class="flex-shrink-0 mx-4 my-4 sm:my-0 order-2 sm:order-2">
614
- <div class="w-8 h-8 bg-cyan-600 rounded-full flex items-center justify-center text-white robot-pulse">
615
- <i class="fas fa-check"></i>
616
- </div>
617
- </div>
618
- <div class="flex-1 sm:text-left sm:pl-8 order-3 sm:order-3">
619
- <div class="bg-gray-800 rounded-lg p-4">
620
- <div class="flex justify-between text-sm text-gray-400 mb-1">
621
- <span>Précision détection</span>
622
- <span>78%</span>
623
- </div>
624
- <div class="w-full bg-gray-700 rounded-full h-2">
625
- <div class="bg-cyan-500 h-2 rounded-full" style="width: 78%"></div>
626
  </div>
627
  </div>
 
 
 
628
  </div>
629
- </div>
630
- </div>
631
-
632
- <!-- Timeline Item 2 -->
633
- <div class="mb-12 sm:mb-0">
634
- <div class="flex flex-col sm:flex-row items-center">
635
- <div class="flex-1 sm:text-right sm:pr-8 order-1 sm:order-3">
636
- <h3 class="text-xl font-bold text-white mb-2">Q1 2024</h3>
637
- <p class="text-gray-300">Intégration de la reconnaissance des panneaux et feux de circulation</p>
638
- </div>
639
- <div class="flex-shrink-0 mx-4 my-4 sm:my-0 order-2 sm:order-2">
640
- <div class="w-8 h-8 bg-cyan-600 rounded-full flex items-center justify-center text-white robot-pulse">
641
- <i class="fas fa-check"></i>
642
- </div>
643
- </div>
644
- <div class="flex-1 sm:text-left sm:pl-8 order-3 sm:order-1">
645
- <div class="bg-gray-800 rounded-lg p-4">
646
- <div class="flex justify-between text-sm text-gray-400 mb-1">
647
- <span>Précision signalisation</span>
648
- <span>92%</span>
649
- </div>
650
- <div class="w-full bg-gray-700 rounded-full h-2">
651
- <div class="bg-cyan-500 h-2 rounded-full" style="width: 92%"></div>
652
- </div>
653
- </div>
654
- </div>
655
- </div>
656
- </div>
657
-
658
- <!-- Timeline Item 3 -->
659
- <div class="mb-12 sm:mb-0">
660
- <div class="flex flex-col sm:flex-row items-center">
661
- <div class="flex-1 sm:text-right sm:pr-8 order-1 sm:order-1">
662
- <h3 class="text-xl font-bold text-white mb-2">Q3 2024</h3>
663
- <p class="text-gray-300">Conduite autonome de niveau 3 sur routes sélectionnées</p>
664
- </div>
665
- <div class="flex-shrink-0 mx-4 my-4 sm:my-0 order-2 sm:order-2">
666
- <div class="w-8 h-8 bg-cyan-600 rounded-full flex items-center justify-center text-white robot-pulse">
667
- <i class="fas fa-spinner fa-spin"></i>
668
- </div>
669
- </div>
670
- <div class="flex-1 sm:text-left sm:pl-8 order-3 sm:order-3">
671
- <div class="bg-gray-800 rounded-lg p-4">
672
- <div class="flex justify-between text-sm text-gray-400 mb-1">
673
- <span>Autonomie niveau 3</span>
674
- <span>65%</span>
675
- </div>
676
- <div class="w-full bg-gray-700 rounded-full h-2">
677
- <div class="bg-cyan-500 h-2 rounded-full" style="width: 65%"></div>
678
  </div>
679
  </div>
680
- </div>
681
- </div>
682
- </div>
683
-
684
- <!-- Timeline Item 4 -->
685
- <div class="mb-12 sm:mb-0">
686
- <div class="flex flex-col sm:flex-row items-center">
687
- <div class="flex-1 sm:text-right sm:pr-8 order-1 sm:order-3">
688
- <h3 class="text-xl font-bold text-white mb-2">2025</h3>
689
- <p class="text-gray-300">Conduite entièrement autonome sur tout le réseau routier réunionnais</p>
690
- </div>
691
- <div class="flex-shrink-0 mx-4 my-4 sm:my-0 order-2 sm:order-2">
692
- <div class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center text-white">
693
- <i class="far fa-clock"></i>
694
  </div>
695
- </div>
696
- <div class="flex-1 sm:text-left sm:pl-8 order-3 sm:order-1">
697
- <div class="bg-gray-800 rounded-lg p-4">
698
- <div class="flex justify-between text-sm text-gray-400 mb-1">
699
- <span>Objectif autonomie</span>
700
- <span>Niveau 4</span>
701
- </div>
702
- <div class="w-full bg-gray-700 rounded-full h-2">
703
- <div class="bg-cyan-500 h-2 rounded-full" style="width: 25%"></div>
704
- </div>
705
  </div>
706
  </div>
707
  </div>
708
  </div>
709
  </div>
710
- </div>
711
- </section>
712
 
713
- <!-- AI Call to Action -->
714
- <section class="py-20 bg-gradient-to-r from-cyan-600 to-purple-600">
715
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
716
- <h2 class="text-3xl md:text-4xl font-bold mb-6 text-white robot-pulse">PRÊT À CONTRÔLER NOS <span class="text-cyan-300">ROBOTS IA</span> ?</h2>
717
- <p class="text-xl text-white/90 mb-8 max-w-3xl mx-auto">Notre intelligence artificielle robotisée vous attend pour une expérience unique</p>
718
- <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
719
- <a href="#preorder" class="px-8 py-4 bg-white rounded-full font-bold text-gray-900 hover:bg-gray-100 transition text-lg">ESSAYER LA DÉMO ROBOT</a>
720
- <a href="#live" class="px-8 py-4 border-2 border-white rounded-full font-bold text-white hover:bg-white/10 transition text-lg flex items-center justify-center robot-pulse">
721
- <i class="fas fa-robot mr-2 robot-eye"></i> VOIR LES ROBOTS EN ACTION
722
- </a>
723
- </div>
724
- </div>
725
- </section>
726
-
727
- <!-- Footer with AI -->
728
- <footer class="bg-gray-900 text-white pt-16 pb-8 border-t border-gray-800">
729
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
730
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
731
- <div>
732
- <h3 class="text-lg font-semibold mb-4">RÉUNION TRUCK <span class="text-cyan-400">ROBOT</span></h3>
733
- <p class="text-gray-400 mb-4">L'avenir de la conduite robotisée, piloté par intelligence artificielle.</p>
734
- <div class="flex space-x-4">
735
- <a href="#" class="text-gray-400 hover:text-cyan-400">
736
- <i class="fab fa-github"></i>
737
- </a>
738
- <a href="#" class="text-gray-400 hover:text-cyan-400">
739
- <i class="fab fa-youtube"></i>
740
- </a>
741
- <a href="#" class="text-gray-400 hover:text-cyan-400">
742
- <i class="fab fa-linkedin"></i>
743
- </a>
744
- <a href="#" class="text-gray-400 hover:text-cyan-400">
745
- <i class="fab fa-discord"></i>
746
- </a>
747
- </div>
748
- </div>
749
-
750
- <div>
751
- <h3 class="text-lg font-semibold mb-4">RESSOURCES ROBOT</h3>
752
- <ul class="space-y-2">
753
- <li><a href="#" class="text-gray-400 hover:text-cyan-400">API Robot</a></li>
754
- <li><a href="#" class="text-gray-400 hover:text-cyan-400">GitHub</a></li>
755
- <li><a href="#" class="text-gray-400 hover:text-cyan-400">Benchmarks</a></li>
756
- <li><a href="#" class="text-gray-400 hover:text-cyan-400">Whitepaper</a></li>
757
- </ul>
758
- </div>
759
-
760
- <div>
761
- <h3 class="text-lg font-semibold mb-4">PARTENARIATS</h3>
762
- <ul class="space-y-2">
763
- <li><a href="#" class="text-gray-400 hover:text-cyan-400">Devenir partenaire</a></li>
764
- <li><a href="#" class="text-gray-400 hover:text-cyan-400">API Streaming</a></li>
765
- <li><a href="#" class="text-gray-400 hover:text-cyan-400">SDK Robot</a></li>
766
- <li><a href="#" class="text-gray-400 hover:text-cyan-400">Carrières</a></li>
767
- </ul>
768
- </div>
769
 
770
- <div>
771
- <h3 class="text-lg font-semibold mb-4">LABS ROBOT</h3>
772
- <p class="text-gray-400 mb-4">Abonnez-vous à notre newsletter sur la robotique et l'IA.</p>
773
- <form class="flex">
774
- <input type="email" placeholder="Votre email" class="px-4 py-2 rounded-l-md w-full text-gray-900 focus:outline-none focus:ring-1 focus:ring-cyan-500">
775
- <button type="submit" class="bg-cyan-600 text-white px-4 py-2 rounded-r-md hover:bg-cyan-700">
776
- <i class="fas fa-paper-plane"></i>
777
- </button>
778
- </form>
779
- </div>
780
- </div>
781
 
782
- <div class="mt-12 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
783
- <p>© 2023 Réunion Truck Robot. Tous droits réservés. Technologie brevetée.</p>
784
- </div>
785
- </div>
786
- </footer>
787
-
788
- <script>
789
- // Mobile menu toggle
790
- document.getElementById('menu-btn').addEventListener('click', function() {
791
- document.getElementById('mobile-menu').classList.toggle('hidden');
792
  });
793
-
794
- // AI Chat Toggle
795
- const chatBtn = document.getElementById('ai-chat-btn');
796
- const chatContainer = document.getElementById('ai-chat-container');
797
- const closeChat = document.getElementById('close-chat');
798
-
799
- chatBtn.addEventListener('click', function() {
800
- chatContainer.classList.toggle('opacity-0');
801
- chatContainer.classList.toggle('scale-95');
802
- chatContainer.classList.toggle('opacity-100');
803
- chatContainer.classList.toggle('scale-100');
804
  });
805
 
806
- closeChat.addEventListener('click', function() {
807
- chatContainer.classList.add('opacity-0');
808
- chatContainer.classList.add('scale-95');
809
- chatContainer.classList.remove('opacity-100');
810
- chatContainer.classList.remove('scale-100');
811
  });
812
-
813
- // AI Control Toggle
814
- const controlBtn = document.getElementById('ai-control-btn');
815
- let aiActive = true;
816
-
817
- controlBtn.addEventListener('click', function() {
818
- aiActive = !aiActive;
819
- if(aiActive) {
820
- controlBtn.innerHTML = '<i class="fas fa-robot mr-3"></i> PRENDRE LE CONTRÔLE ROBOT';
821
- document.getElementById('ai-mode').textContent = 'Mode autonome robotisé';
822
- controlBtn.classList.remove('bg-green-600');
823
- controlBtn.classList.add('bg-red-600');
824
  } else {
825
- controlBtn.innerHTML = '<i class="fas fa-user mr-3"></i> ACTIVER LE ROBOT';
826
- document.getElementById('ai-mode').textContent = 'Mode manuel';
827
- controlBtn.classList.remove('bg-red-600');
828
- controlBtn.classList.add('bg-green-600');
829
  }
830
  });
831
-
832
- // Simulate AI processing
833
- function simulateAI() {
834
- // Update speed randomly
835
- const speeds = aiActive ? [65, 68, 72, 75] : [45, 50, 55, 60, 65];
836
- const newSpeed = speeds[Math.floor(Math.random() * speeds.length)];
837
- document.getElementById('ai-speed').textContent = `${newSpeed} km/h`;
838
-
839
- // Update distance
840
- const distanceElement = document.getElementById('ai-distance');
841
- const currentDist = parseFloat(distanceElement.textContent);
842
- const distanceIncrement = newSpeed / 3600 * 5; // km per 5 seconds
843
- const newDist = (currentDist + distanceIncrement).toFixed(1);
844
- distanceElement.textContent = `${newDist} km parcourus`;
845
 
846
- // Update fuel
847
- const fuelElement = document.getElementById('ai-fuel');
848
- let currentFuel = parseFloat(fuelElement.textContent);
849
- const fuelDecrement = (0.01 + Math.random() * 0.02) * (newSpeed / 80);
850
- const newFuel = Math.max(5, (currentFuel - fuelDecrement).toFixed(1));
851
- fuelElement.textContent = `${newFuel}% énergie`;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
852
 
853
- // Update progress
854
- const progressElement = document.getElementById('ai-progress');
855
- let currentProgress = parseFloat(progressElement.style.width);
856
- const progressIncrement = (0.5 + Math.random() * 1.5) * (newSpeed / 80);
857
- const newProgress = Math.min(100, currentProgress + progressIncrement);
858
- progressElement.style.width = `${newProgress}%`;
859
 
860
- // Update processing
861
- const processingElement = document.getElementById('ai-processing');
862
- const processingValue = aiActive ?
863
- Math.min(99, 85 + Math.random() * 15).toFixed(0) :
864
- Math.min(99, 40 + Math.random() * 30).toFixed(0);
865
- processingElement.textContent = `Calcul robot: ${processingValue}%`;
866
 
867
- // Update driving stats
868
- const weatherConditions = ['Ensoleillé', 'Nuageux', 'Pluie légère', 'Brouillard', 'Orageux'];
869
- const altitudes = ['12m', '450m', '1200m', '800m', '1600m'];
870
- const randomWeather = weatherConditions[Math.floor(Math.random() * weatherConditions.length)];
871
- const randomAltitude = altitudes[Math.floor(Math.random() * altitudes.length)];
872
- document.getElementById('ai-driving-stats').textContent =
873
- `Vitesse: ${newSpeed} km/h | Altitude: ${randomAltitude} | Météo: ${randomWeather}`;
874
 
875
- // Update detection stats
876
- document.getElementById('ai-detection').textContent =
877
- aiActive ? `${Math.min(100, 95 + Math.random() * 5).toFixed(0)}%` : `${Math.min(100, 70 + Math.random() * 20).toFixed(0)}%`;
878
-
879
- document.getElementById('ai-weather').textContent =
880
- aiActive ? `${Math.min(100, 90 + Math.random() * 8).toFixed(0)}%` : `${Math.min(100, 60 + Math.random() * 25).toFixed(0)}%`;
881
-
882
- document.getElementById('ai-route').textContent =
883
- aiActive ? `${Math.min(100, 85 + Math.random() * 12).toFixed(0)}%` : `${Math.min(100, 50 + Math.random() * 30).toFixed(0)}%`;
884
- }
 
 
885
 
886
- // Update every 5 seconds
887
- setInterval(simulateAI, 5000);
888
- simulateAI(); // Initial call
889
-
890
- // AI Chat Simulation
891
- const chatMessages = document.getElementById('ai-chat-messages');
892
- const chatInput = document.getElementById('ai-chat-input');
893
- const chatSend = document.getElementById('ai-chat-send');
894
-
895
- const aiResponses = [
896
- "[ROBOT] Actuellement, nous traversons la route du Volcan avec une vue imprenable sur le Piton de la Fournaise.",
897
- "[SYSTÈME] La météo actuelle est favorable avec une température de 24°C et un ciel partiellement nuageux.",
898
- "[DÉTECTION] Notre robot a identifié 3 véhicules dans un rayon de 200 mètres, circulation fluide.",
899
- "[NAVIGATION] Le prochain point d'intérêt est le Pas de Bellecombe dans environ 12 minutes.",
900
- "[ROBOT] Je peux vous fournir des informations techniques sur mon fonctionnement si vous le souhaitez.",
901
- "[SYSTÈME] La chaussée est légèrement humide mais mes capteurs sont optimisés pour ces conditions.",
902
- "[DÉTECTION] Nous approchons d'une zone de forte biodiversité, habitat naturel des geckos de Bourbon.",
903
- "[ROBOT] La vitesse est actuellement limitée à 70 km/h sur ce tronçon de route."
904
- ];
905
-
906
- function addAIMessage(message) {
907
- const messageDiv = document.createElement('div');
908
- messageDiv.className = 'mb-3';
909
- messageDiv.innerHTML = `
910
- <div class="bg-gray-700 rounded-lg p-3 text-sm inline-block">
911
- ${message}
912
- </div>
913
- `;
914
- chatMessages.appendChild(messageDiv);
915
- chatMessages.scrollTop = chatMessages.scrollHeight;
916
  }
917
 
918
- chatSend.addEventListener('click', function() {
919
- const userMessage = chatInput.value.trim();
920
- if(userMessage) {
921
- // Add user message
922
- const userDiv = document.createElement('div');
923
- userDiv.className = 'mb-3 text-right';
924
- userDiv.innerHTML = `
925
- <div class="bg-cyan-600 rounded-lg p-3 text-sm inline-block">
926
- ${userMessage}
927
- </div>
928
- `;
929
- chatMessages.appendChild(userDiv);
930
 
931
- // Clear input
932
- chatInput.value = '';
 
 
 
 
 
 
 
 
 
 
 
933
 
934
- // Simulate AI typing
935
- const typingDiv = document.createElement('div');
936
- typingDiv.className = 'mb-3';
937
- typingDiv.innerHTML = `
938
- <div class="bg-gray-700 rounded-lg p-3 text-sm inline-block typing-indicator">
939
- Robot répond...
940
- </div>
941
- `;
942
- chatMessages.appendChild(typingDiv);
943
- chatMessages.scrollTop = chatMessages.scrollHeight;
944
 
945
- // Add AI response after delay
946
- setTimeout(function() {
947
- chatMessages.removeChild(typingDiv);
948
- const randomResponse = aiResponses[Math.floor(Math.random() * aiResponses.length)];
949
- addAIMessage(randomResponse);
950
- }, 1500 + Math.random() * 2000);
951
  }
952
- });
953
 
954
- // Allow Enter key to send message
955
- chatInput.addEventListener('keypress', function(e) {
956
- if(e.key === 'Enter') {
957
- chatSend.click();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
958
  }
959
- });
 
 
 
 
 
 
 
 
 
 
 
960
 
961
- // Initial AI message
962
- setTimeout(function() {
963
- addAIMessage("[SYSTÈME ROBOT] Initialisation terminée. Je suis votre assistant IA robotisé. Posez-moi vos questions!");
964
- }, 1000);
 
 
 
 
 
965
 
966
- // Add robot pulse effect to all elements with robot-pulse class
967
- const robotElements = document.querySelectorAll('.robot-pulse');
968
- robotElements.forEach(el => {
969
- setInterval(() => {
970
- el.style.textShadow = `0 0 ${5 + Math.random() * 5}px rgba(0, 255, 255, ${0.4 + Math.random() * 0.3})`;
971
- }, 1000);
972
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
973
  </script>
974
  <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/ttrun" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
975
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Centre de Contrôle Robotique - Mode Jeu</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=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap');
11
 
12
  :root {
13
+ --primary: #3B82F6;
14
+ --secondary: #10B981;
15
+ --accent: #F59E0B;
16
+ --dark: #1F2937;
17
+ --darker: #111827;
18
+ --light: #F3F4F6;
19
  }
20
 
21
  body {
22
+ font-family: 'Roboto', sans-serif;
23
+ background-color: var(--darker);
24
  color: white;
25
  overflow-x: hidden;
26
  }
27
 
28
+ .tech-font {
29
+ font-family: 'Orbitron', sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30
  }
31
 
32
+ .control-panel {
33
+ background: linear-gradient(135deg, #1E3A8A 0%, #111827 100%);
34
+ border: 1px solid rgba(59, 130, 246, 0.3);
35
  }
36
 
37
+ .robot-active {
38
+ animation: pulse 2s infinite;
39
  }
40
 
41
+ @keyframes pulse {
42
+ 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
43
+ 70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
44
+ 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
45
  }
46
 
47
+ .game-screen {
48
+ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
49
+ url('https://images.unsplash.com/photo-1593508512255-86ab42a8e620?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2078&q=80');
50
+ background-size: cover;
51
+ background-position: center;
52
  }
53
 
54
+ .joystick {
55
+ background: radial-gradient(circle at center, #3B82F6 0%, #1D4ED8 100%);
56
+ box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
57
  }
58
 
59
+ .binary-bg {
60
+ position: absolute;
61
+ top: 0;
62
+ left: 0;
63
+ width: 100%;
64
+ height: 100%;
65
+ background-image:
66
+ linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
67
+ linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
68
+ background-size: 20px 20px;
69
+ z-index: -1;
70
  }
71
 
72
+ .robot-eye {
73
+ animation: eyeBlink 5s infinite;
 
74
  }
75
 
76
+ @keyframes eyeBlink {
77
+ 0%, 45%, 55%, 100% { transform: scaleY(1); }
78
+ 50% { transform: scaleY(0.1); }
 
79
  }
80
 
81
+ .game-grid {
82
+ display: grid;
83
+ grid-template-columns: repeat(10, 1fr);
84
+ grid-template-rows: repeat(10, 1fr);
85
+ gap: 2px;
86
  }
87
 
88
+ .game-cell {
89
+ background-color: rgba(31, 41, 55, 0.7);
90
+ transition: all 0.2s;
91
  }
92
 
93
+ .game-cell.active {
94
+ background-color: #3B82F6;
 
95
  }
96
 
97
+ .game-cell.robot {
98
+ background-color: #10B981;
 
 
 
 
 
 
 
99
  }
100
 
101
+ .game-cell.target {
102
+ background-color: #F59E0B;
 
103
  }
104
 
105
+ .game-cell.obstacle {
106
+ background-color: #EF4444;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
107
  }
108
  </style>
109
  </head>
 
111
  <!-- Binary background pattern -->
112
  <div class="binary-bg"></div>
113
 
114
+ <!-- Main Control Panel -->
115
+ <div class="min-h-screen flex flex-col">
116
+ <!-- Header -->
117
+ <header class="bg-gray-900 py-4 px-6 border-b border-gray-800 flex justify-between items-center">
118
+ <div class="flex items-center space-x-4">
119
+ <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center">
120
+ <i class="fas fa-robot text-white"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
121
  </div>
122
+ <h1 class="text-xl font-bold tech-font">CENTRE DE CONTRÔLE <span class="text-blue-400">ROBOTIQUE</span></h1>
123
  </div>
124
+ <div class="flex items-center space-x-4">
125
+ <div class="px-4 py-2 rounded-full bg-green-600 text-white flex items-center">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
126
  <span class="relative flex h-2 w-2 mr-2">
127
+ <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
128
+ <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
129
  </span>
130
+ <span id="system-status">SYSTÈME ACTIF</span>
131
  </div>
132
+ <button id="fullscreen-btn" class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 text-white">
133
+ <i class="fas fa-expand"></i>
134
+ </button>
135
  </div>
136
+ </header>
137
+
138
+ <!-- Main Content -->
139
+ <main class="flex-1 grid grid-cols-1 lg:grid-cols-3 gap-6 p-6">
140
+ <!-- Robot Control Panel -->
141
+ <div class="control-panel rounded-xl p-6 col-span-1">
142
+ <h2 class="text-2xl font-bold mb-6 tech-font flex items-center">
143
+ <i class="fas fa-gamepad mr-3 text-blue-400"></i>
144
+ <span>CONTROLE <span class="text-blue-400">ROBOT</span></span>
145
+ </h2>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
146
 
147
+ <!-- Robot Selection -->
148
+ <div class="mb-8">
149
+ <h3 class="text-lg font-semibold mb-3 flex items-center">
150
+ <i class="fas fa-robot mr-2 text-blue-400"></i>
151
+ Sélection Robot
152
+ </h3>
153
+ <div class="grid grid-cols-3 gap-3">
154
+ <button class="robot-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-robot="1">
155
+ <i class="fas fa-robot text-2xl mb-1 text-blue-400"></i>
156
+ <span class="text-xs">RT-001</span>
157
  </button>
158
+ <button class="robot-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-robot="2">
159
+ <i class="fas fa-robot text-2xl mb-1 text-green-400"></i>
160
+ <span class="text-xs">RT-002</span>
161
+ </button>
162
+ <button class="robot-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-robot="3">
163
+ <i class="fas fa-robot text-2xl mb-1 text-yellow-400"></i>
164
+ <span class="text-xs">RT-003</span>
 
 
 
 
 
165
  </button>
166
  </div>
167
  </div>
168
 
169
+ <!-- Activation Panel -->
170
+ <div class="mb-8">
171
+ <h3 class="text-lg font-semibold mb-3 flex items-center">
172
+ <i class="fas fa-power-off mr-2 text-red-400"></i>
173
+ Activation Robot
174
+ </h3>
175
+ <div class="bg-gray-800 rounded-lg p-4">
176
+ <div class="flex justify-between items-center mb-4">
177
+ <span>Statut Robot:</span>
178
+ <span id="robot-status" class="px-3 py-1 rounded-full bg-gray-700 text-gray-300">INACTIF</span>
179
+ </div>
180
+ <button id="activate-btn" class="w-full py-3 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-bold flex items-center justify-center">
181
+ <i class="fas fa-play mr-2"></i> ACTIVER ROBOT
182
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
183
  </div>
184
  </div>
185
 
186
+ <!-- Game Mode Selection -->
187
+ <div class="mb-8">
188
+ <h3 class="text-lg font-semibold mb-3 flex items-center">
189
+ <i class="fas fa-chess-board mr-2 text-purple-400"></i>
190
+ Mode Jeu
191
+ </h3>
192
+ <div class="grid grid-cols-2 gap-3">
193
+ <button class="game-mode-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-mode="maze">
194
+ <i class="fas fa-project-diagram text-2xl mb-1 text-purple-400"></i>
195
+ <span class="text-xs">Labyrinthe</span>
196
+ </button>
197
+ <button class="game-mode-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-mode="race">
198
+ <i class="fas fa-flag-checkered text-2xl mb-1 text-red-400"></i>
199
+ <span class="text-xs">Course</span>
200
+ </button>
201
+ <button class="game-mode-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-mode="collect">
202
+ <i class="fas fa-coins text-2xl mb-1 text-yellow-400"></i>
203
+ <span class="text-xs">Collection</span>
204
+ </button>
205
+ <button class="game-mode-btn p-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center" data-mode="battle">
206
+ <i class="fas fa-robot text-2xl mb-1 text-green-400"></i>
207
+ <span class="text-xs">Combat</span>
208
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
209
  </div>
210
  </div>
211
 
212
+ <!-- Joystick Control -->
213
+ <div>
214
+ <h3 class="text-lg font-semibold mb-3 flex items-center">
215
+ <i class="fas fa-joystick mr-2 text-yellow-400"></i>
216
+ Contrôle Manuel
217
+ </h3>
218
+ <div class="bg-gray-800 rounded-lg p-6 flex flex-col items-center">
219
+ <div class="relative w-40 h-40 mb-4">
220
+ <div class="absolute inset-0 flex items-center justify-center">
221
+ <div class="joystick w-24 h-24 rounded-full flex items-center justify-center cursor-move" id="joystick">
222
+ <i class="fas fa-arrows-alt text-white text-xl"></i>
 
 
 
 
 
 
223
  </div>
224
  </div>
 
 
 
 
 
 
 
 
 
 
 
225
  </div>
226
+ <div class="grid grid-cols-3 gap-2 w-full">
227
+ <button class="control-btn p-3 rounded bg-gray-700 hover:bg-gray-600 flex items-center justify-center" data-direction="forward">
228
+ <i class="fas fa-arrow-up"></i>
229
+ </button>
230
+ <button class="control-btn p-3 rounded bg-gray-700 hover:bg-gray-600 flex items-center justify-center" data-direction="left">
231
+ <i class="fas fa-arrow-left"></i>
232
+ </button>
233
+ <button class="control-btn p-3 rounded bg-gray-700 hover:bg-gray-600 flex items-center justify-center" data-direction="right">
234
+ <i class="fas fa-arrow-right"></i>
235
+ </button>
236
+ <button class="control-btn p-3 rounded bg-gray-700 hover:bg-gray-600 flex items-center justify-center" data-direction="backward">
237
+ <i class="fas fa-arrow-down"></i>
238
+ </button>
239
+ <button class="control-btn p-3 rounded bg-gray-700 hover:bg-gray-600 flex items-center justify-center col-span-3" data-direction="stop">
240
+ <i class="fas fa-stop-circle mr-2"></i> STOP
241
+ </button>
242
  </div>
243
  </div>
244
  </div>
245
  </div>
 
 
 
 
 
 
 
 
 
 
246
 
247
+ <!-- Game Screen -->
248
+ <div class="game-screen rounded-xl p-6 col-span-2 relative overflow-hidden">
249
+ <div class="absolute inset-0 flex items-center justify-center">
250
+ <div class="text-center z-10 w-full max-w-2xl">
251
+ <div id="game-start-screen">
252
+ <h2 class="text-4xl font-bold mb-6 tech-font">MODE <span class="text-blue-400">JEU ROBOT</span></h2>
253
+ <p class="text-xl mb-8">Sélectionnez un robot et un mode de jeu pour commencer</p>
254
+ <div class="flex justify-center">
255
+ <div class="w-32 h-32 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-6 robot-eye">
256
+ <i class="fas fa-robot text-5xl text-white"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
257
  </div>
258
  </div>
259
+ <button id="start-game-btn" class="px-8 py-4 bg-blue-600 rounded-full text-white font-bold hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
260
+ <i class="fas fa-play mr-2"></i> DÉMARRER LE JEU
261
+ </button>
262
  </div>
263
+
264
+ <div id="game-container" class="hidden">
265
+ <div class="flex justify-between items-center mb-4">
266
+ <h3 id="game-title" class="text-2xl font-bold tech-font">LABYRINTHE ROBOT</h3>
267
+ <div class="flex items-center space-x-4">
268
+ <div class="px-4 py-2 rounded-full bg-gray-800">
269
+ <span id="game-score">Score: 0</span>
270
+ </div>
271
+ <div class="px-4 py-2 rounded-full bg-gray-800">
272
+ <span id="game-time">Temps: 00:00</span>
273
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
274
  </div>
275
  </div>
276
+
277
+ <div class="game-grid w-full aspect-square max-w-2xl mx-auto bg-gray-900 p-1 rounded-lg" id="game-grid">
278
+ <!-- Game grid will be generated by JavaScript -->
 
 
 
 
 
 
 
 
 
 
 
279
  </div>
280
+
281
+ <div class="mt-6 flex justify-center space-x-4">
282
+ <button id="restart-game-btn" class="px-6 py-3 bg-yellow-600 rounded-lg text-white hover:bg-yellow-700">
283
+ <i class="fas fa-redo mr-2"></i> Recommencer
284
+ </button>
285
+ <button id="end-game-btn" class="px-6 py-3 bg-red-600 rounded-lg text-white hover:bg-red-700">
286
+ <i class="fas fa-stop mr-2"></i> Quitter
287
+ </button>
 
 
288
  </div>
289
  </div>
290
  </div>
291
  </div>
292
  </div>
293
+ </main>
294
+ </div>
295
 
296
+ <script>
297
+ // System Status
298
+ let systemActive = true;
299
+ let robotActive = false;
300
+ let selectedRobot = null;
301
+ let gameMode = null;
302
+ let gameRunning = false;
303
+ let gameInterval;
304
+ let gameTime = 0;
305
+ let gameScore = 0;
306
+ let robotPosition = { x: 0, y: 0 };
307
+ let targetPosition = { x: 0, y: 0 };
308
+ let obstacles = [];
309
+
310
+ // DOM Elements
311
+ const systemStatusEl = document.getElementById('system-status');
312
+ const robotStatusEl = document.getElementById('robot-status');
313
+ const activateBtn = document.getElementById('activate-btn');
314
+ const startGameBtn = document.getElementById('start-game-btn');
315
+ const gameStartScreen = document.getElementById('game-start-screen');
316
+ const gameContainer = document.getElementById('game-container');
317
+ const gameGrid = document.getElementById('game-grid');
318
+ const gameTitleEl = document.getElementById('game-title');
319
+ const gameScoreEl = document.getElementById('game-score');
320
+ const gameTimeEl = document.getElementById('game-time');
321
+ const restartGameBtn = document.getElementById('restart-game-btn');
322
+ const endGameBtn = document.getElementById('end-game-btn');
323
+ const fullscreenBtn = document.getElementById('fullscreen-btn');
324
+
325
+ // Robot Buttons
326
+ const robotButtons = document.querySelectorAll('.robot-btn');
327
+ robotButtons.forEach(btn => {
328
+ btn.addEventListener('click', () => {
329
+ robotButtons.forEach(b => b.classList.remove('bg-blue-600', 'text-white'));
330
+ btn.classList.add('bg-blue-600', 'text-white');
331
+ selectedRobot = btn.dataset.robot;
332
+ updateStartButton();
333
+ });
334
+ });
335
+
336
+ // Game Mode Buttons
337
+ const gameModeButtons = document.querySelectorAll('.game-mode-btn');
338
+ gameModeButtons.forEach(btn => {
339
+ btn.addEventListener('click', () => {
340
+ gameModeButtons.forEach(b => b.classList.remove('bg-blue-600', 'text-white'));
341
+ btn.classList.add('bg-blue-600', 'text-white');
342
+ gameMode = btn.dataset.mode;
343
+ updateStartButton();
344
+ });
345
+ });
346
+
347
+ // Control Buttons
348
+ const controlButtons = document.querySelectorAll('.control-btn');
349
+ controlButtons.forEach(btn => {
350
+ btn.addEventListener('click', () => {
351
+ if (!robotActive) return;
352
 
353
+ const direction = btn.dataset.direction;
354
+ moveRobot(direction);
355
+ });
356
+ });
357
+
358
+ // Activate Robot
359
+ activateBtn.addEventListener('click', () => {
360
+ if (!selectedRobot) {
361
+ alert('Veuillez sélectionner un robot');
362
+ return;
363
+ }
364
 
365
+ robotActive = !robotActive;
366
+ updateRobotStatus();
 
 
 
 
 
 
 
 
367
  });
368
+
369
+ // Start Game
370
+ startGameBtn.addEventListener('click', () => {
371
+ if (!robotActive) {
372
+ alert('Veuillez activer un robot');
373
+ return;
374
+ }
375
+
376
+ startGame();
 
 
377
  });
378
 
379
+ // Restart Game
380
+ restartGameBtn.addEventListener('click', () => {
381
+ startGame();
 
 
382
  });
383
+
384
+ // End Game
385
+ endGameBtn.addEventListener('click', () => {
386
+ endGame();
387
+ });
388
+
389
+ // Fullscreen
390
+ fullscreenBtn.addEventListener('click', () => {
391
+ if (!document.fullscreenElement) {
392
+ document.documentElement.requestFullscreen().catch(err => {
393
+ console.error(`Error attempting to enable fullscreen: ${err.message}`);
394
+ });
395
  } else {
396
+ if (document.exitFullscreen) {
397
+ document.exitFullscreen();
398
+ }
 
399
  }
400
  });
401
+
402
+ // Keyboard Controls
403
+ document.addEventListener('keydown', (e) => {
404
+ if (!robotActive || !gameRunning) return;
 
 
 
 
 
 
 
 
 
 
405
 
406
+ switch(e.key) {
407
+ case 'ArrowUp':
408
+ moveRobot('forward');
409
+ break;
410
+ case 'ArrowDown':
411
+ moveRobot('backward');
412
+ break;
413
+ case 'ArrowLeft':
414
+ moveRobot('left');
415
+ break;
416
+ case 'ArrowRight':
417
+ moveRobot('right');
418
+ break;
419
+ case ' ':
420
+ moveRobot('stop');
421
+ break;
422
+ }
423
+ });
424
+
425
+ // Joystick Control
426
+ const joystick = document.getElementById('joystick');
427
+ let isDragging = false;
428
+
429
+ joystick.addEventListener('mousedown', () => {
430
+ isDragging = true;
431
+ });
432
+
433
+ document.addEventListener('mousemove', (e) => {
434
+ if (!isDragging || !robotActive || !gameRunning) return;
435
 
436
+ const rect = joystick.getBoundingClientRect();
437
+ const centerX = rect.left + rect.width / 2;
438
+ const centerY = rect.top + rect.height / 2;
 
 
 
439
 
440
+ const deltaX = e.clientX - centerX;
441
+ const deltaY = e.clientY - centerY;
 
 
 
 
442
 
443
+ // Calculate direction based on angle
444
+ const angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;
 
 
 
 
 
445
 
446
+ if (Math.abs(deltaX) > 20 || Math.abs(deltaY) > 20) {
447
+ if (angle >= -45 && angle < 45) {
448
+ moveRobot('right');
449
+ } else if (angle >= 45 && angle < 135) {
450
+ moveRobot('backward');
451
+ } else if (angle >= 135 || angle < -135) {
452
+ moveRobot('left');
453
+ } else if (angle >= -135 && angle < -45) {
454
+ moveRobot('forward');
455
+ }
456
+ }
457
+ });
458
 
459
+ document.addEventListener('mouseup', () => {
460
+ isDragging = false;
461
+ if (robotActive && gameRunning) {
462
+ moveRobot('stop');
463
+ }
464
+ });
465
+
466
+ // Functions
467
+ function updateStartButton() {
468
+ startGameBtn.disabled = !(selectedRobot && gameMode);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
469
  }
470
 
471
+ function updateRobotStatus() {
472
+ if (robotActive) {
473
+ robotStatusEl.textContent = 'ACTIF';
474
+ robotStatusEl.classList.remove('bg-gray-700', 'text-gray-300');
475
+ robotStatusEl.classList.add('bg-green-600', 'text-white');
476
+ activateBtn.innerHTML = '<i class="fas fa-stop mr-2"></i> DÉSACTIVER ROBOT';
477
+ activateBtn.classList.remove('bg-blue-600');
478
+ activateBtn.classList.add('bg-red-600');
 
 
 
 
479
 
480
+ // Add robot-active class to robot buttons
481
+ robotButtons.forEach(btn => {
482
+ if (btn.dataset.robot === selectedRobot) {
483
+ btn.classList.add('robot-active');
484
+ }
485
+ });
486
+ } else {
487
+ robotStatusEl.textContent = 'INACTIF';
488
+ robotStatusEl.classList.add('bg-gray-700', 'text-gray-300');
489
+ robotStatusEl.classList.remove('bg-green-600', 'text-white');
490
+ activateBtn.innerHTML = '<i class="fas fa-play mr-2"></i> ACTIVER ROBOT';
491
+ activateBtn.classList.add('bg-blue-600');
492
+ activateBtn.classList.remove('bg-red-600');
493
 
494
+ // Remove robot-active class
495
+ robotButtons.forEach(btn => {
496
+ btn.classList.remove('robot-active');
497
+ });
 
 
 
 
 
 
498
 
499
+ // End game if running
500
+ if (gameRunning) {
501
+ endGame();
502
+ }
 
 
503
  }
504
+ }
505
 
506
+ function startGame() {
507
+ gameStartScreen.classList.add('hidden');
508
+ gameContainer.classList.remove('hidden');
509
+ gameRunning = true;
510
+ gameTime = 0;
511
+ gameScore = 0;
512
+
513
+ // Set game title based on mode
514
+ switch(gameMode) {
515
+ case 'maze':
516
+ gameTitleEl.textContent = 'LABYRINTHE ROBOT';
517
+ break;
518
+ case 'race':
519
+ gameTitleEl.textContent = 'COURSE ROBOT';
520
+ break;
521
+ case 'collect':
522
+ gameTitleEl.textContent = 'COLLECTION ROBOT';
523
+ break;
524
+ case 'battle':
525
+ gameTitleEl.textContent = 'COMBAT ROBOT';
526
+ break;
527
  }
528
+
529
+ // Initialize game grid
530
+ initializeGameGrid();
531
+
532
+ // Start game timer
533
+ gameInterval = setInterval(() => {
534
+ gameTime++;
535
+ const minutes = Math.floor(gameTime / 60).toString().padStart(2, '0');
536
+ const seconds = (gameTime % 60).toString().padStart(2, '0');
537
+ gameTimeEl.textContent = `Temps: ${minutes}:${seconds}`;
538
+ }, 1000);
539
+ }
540
 
541
+ function endGame() {
542
+ clearInterval(gameInterval);
543
+ gameRunning = false;
544
+ gameContainer.classList.add('hidden');
545
+ gameStartScreen.classList.remove('hidden');
546
+
547
+ // Reset game grid
548
+ gameGrid.innerHTML = '';
549
+ }
550
 
551
+ function initializeGameGrid() {
552
+ gameGrid.innerHTML = '';
553
+
554
+ // Create 10x10 grid
555
+ for (let y = 0; y < 10; y++) {
556
+ for (let x = 0; x < 10; x++) {
557
+ const cell = document.createElement('div');
558
+ cell.className = 'game-cell';
559
+ cell.dataset.x = x;
560
+ cell.dataset.y = y;
561
+ gameGrid.appendChild(cell);
562
+ }
563
+ }
564
+
565
+ // Set initial robot position (random)
566
+ robotPosition = {
567
+ x: Math.floor(Math.random() * 10),
568
+ y: Math.floor(Math.random() * 10)
569
+ };
570
+
571
+ // Set target position (random, not same as robot)
572
+ do {
573
+ targetPosition = {
574
+ x: Math.floor(Math.random() * 10),
575
+ y: Math.floor(Math.random() * 10)
576
+ };
577
+ } while (targetPosition.x === robotPosition.x && targetPosition.y === robotPosition.y);
578
+
579
+ // Generate obstacles (20% of cells)
580
+ obstacles = [];
581
+ for (let i = 0; i < 20; i++) {
582
+ let obstacle;
583
+ do {
584
+ obstacle = {
585
+ x: Math.floor(Math.random() * 10),
586
+ y: Math.floor(Math.random() * 10)
587
+ };
588
+ } while (
589
+ (obstacle.x === robotPosition.x && obstacle.y === robotPosition.y) ||
590
+ (obstacle.x === targetPosition.x && obstacle.y === targetPosition.y) ||
591
+ obstacles.some(o => o.x === obstacle.x && o.y === obstacle.y)
592
+ );
593
+
594
+ obstacles.push(obstacle);
595
+ }
596
+
597
+ // Update grid display
598
+ updateGameGrid();
599
+ }
600
+
601
+ function updateGameGrid() {
602
+ const cells = document.querySelectorAll('.game-cell');
603
+
604
+ cells.forEach(cell => {
605
+ cell.className = 'game-cell';
606
+ const x = parseInt(cell.dataset.x);
607
+ const y = parseInt(cell.dataset.y);
608
+
609
+ if (x === robotPosition.x && y === robotPosition.y) {
610
+ cell.classList.add('robot');
611
+ } else if (x === targetPosition.x && y === targetPosition.y) {
612
+ cell.classList.add('target');
613
+ } else if (obstacles.some(o => o.x === x && o.y === y)) {
614
+ cell.classList.add('obstacle');
615
+ }
616
+ });
617
+ }
618
+
619
+ function moveRobot(direction) {
620
+ if (!gameRunning) return;
621
+
622
+ let newX = robotPosition.x;
623
+ let newY = robotPosition.y;
624
+
625
+ switch(direction) {
626
+ case 'forward':
627
+ newY = Math.max(0, robotPosition.y - 1);
628
+ break;
629
+ case 'backward':
630
+ newY = Math.min(9, robotPosition.y + 1);
631
+ break;
632
+ case 'left':
633
+ newX = Math.max(0, robotPosition.x - 1);
634
+ break;
635
+ case 'right':
636
+ newX = Math.min(9, robotPosition.x + 1);
637
+ break;
638
+ case 'stop':
639
+ // No movement
640
+ break;
641
+ }
642
+
643
+ // Check if new position is obstacle
644
+ const isObstacle = obstacles.some(o => o.x === newX && o.y === newY);
645
+
646
+ if (!isObstacle || direction === 'stop') {
647
+ robotPosition.x = newX;
648
+ robotPosition.y = newY;
649
+
650
+ // Check if reached target
651
+ if (robotPosition.x === targetPosition.x && robotPosition.y === targetPosition.y) {
652
+ gameScore += 10;
653
+ gameScoreEl.textContent = `Score: ${gameScore}`;
654
+
655
+ // Set new target
656
+ do {
657
+ targetPosition = {
658
+ x: Math.floor(Math.random() * 10),
659
+ y: Math.floor(Math.random() * 10)
660
+ };
661
+ } while (
662
+ (targetPosition.x === robotPosition.x && targetPosition.y === robotPosition.y) ||
663
+ obstacles.some(o => o.x === targetPosition.x && o.y === targetPosition.y)
664
+ );
665
+ }
666
+
667
+ updateGameGrid();
668
+ }
669
+ }
670
+
671
+ // Initialize
672
+ updateRobotStatus();
673
  </script>
674
  <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/ttrun" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
675
  </html>
prompts.txt CHANGED
@@ -3,4 +3,5 @@ je veux une arméés de 100000 IA tres puissant pour creer un puissant jeux
3
  :corriger les bouton non cliquable : voir toutes les marchandise , je veux afficher les flotte de camion de la reunion toutes les transpot bus , camion etc.....
4
  je veux afficher les panorama de ilde de la reunion en conduisant les camion en reel direct live
5
  fait fonctionner toute sa avec ses puissant IA
6
- ACTIVE TOUTES LES IA QUIL MET LE SITE EN ROBOTIS22 POUR FAIRE FONCTIONN2
 
 
3
  :corriger les bouton non cliquable : voir toutes les marchandise , je veux afficher les flotte de camion de la reunion toutes les transpot bus , camion etc.....
4
  je veux afficher les panorama de ilde de la reunion en conduisant les camion en reel direct live
5
  fait fonctionner toute sa avec ses puissant IA
6
+ ACTIVE TOUTES LES IA QUIL MET LE SITE EN ROBOTIS22 POUR FAIRE FONCTIONN2
7
+ ACTIVER TOUTES LES ROBOT FAIT FONCTIONNER LES JEUX