Hugging Face's logo

Spaces:
docto41
/
simulator
Running

App Files Community
docto41 commited on
Commit
cfbc572
·
verified ·
1 Parent(s): 94d027e

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +570 -213
  2. prompts.txt +4 -1
index.html CHANGED
@@ -3,300 +3,657 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>IVECO - Vues Réelles</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 
 
 
 
 
 
11
 
12
  body {
13
  margin: 0;
14
  padding: 0;
15
  font-family: 'Roboto', sans-serif;
16
- background-color: #111;
17
  color: white;
 
 
 
 
 
 
 
18
  overflow: hidden;
19
  }
20
 
21
- .view-container {
22
- transition: all 0.5s ease;
 
 
 
 
 
 
23
  }
24
 
25
- .dashboard {
26
- background: rgba(20, 20, 20, 0.95);
27
- border-top: 1px solid rgba(255, 255, 255, 0.1);
28
  }
29
 
30
- .speed-needle {
31
- transform-origin: center bottom;
32
- transition: transform 0.3s ease-out;
 
 
 
 
33
  }
34
 
35
- .glass-effect {
36
- background: rgba(40, 40, 40, 0.7);
37
- backdrop-filter: blur(5px);
38
- border: 1px solid rgba(255, 255, 255, 0.1);
39
  }
40
 
41
- /* Style spécifique IVECO */
42
- .iveco-blue {
43
- background-color: #005baa;
 
 
44
  }
45
 
46
- .iveco-steering-wheel {
47
- background-color: #333;
48
- border: 3px solid #555;
49
  }
50
 
51
- .iveco-dashboard {
52
- background: linear-gradient(to bottom, #1a1a1a, #2d2d2d);
53
  }
54
 
55
- .iveco-button {
56
- background: linear-gradient(to bottom, #3a3a3a, #2a2a2a);
57
- border: 1px solid #555;
 
 
 
 
 
 
58
  }
59
 
60
- .realistic-shadow {
61
- box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
62
  }
63
 
64
- .camera-btn.active {
65
- background-color: #005baa;
66
- color: white;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  }
68
 
69
- /* Images de fond pour les différentes vues */
70
- .cabine-view {
71
- background-image: url('https://i.imgur.com/JYjJLbV.jpg');
72
- background-size: cover;
73
- background-position: center;
74
  }
75
 
76
- .exterior-view {
77
- background-image: url('https://i.imgur.com/VvZz3Qk.jpg');
78
- background-size: cover;
79
- background-position: center;
80
  }
81
 
82
- .dashboard-view {
83
- background-image: url('https://i.imgur.com/5XwLQ9s.jpg');
84
- background-size: cover;
85
- background-position: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
86
  }
87
  </style>
88
  </head>
89
- <body class="relative h-screen w-screen">
90
- <!-- Contrôles de vue -->
91
- <div class="absolute top-4 left-1/2 transform -translate-x-1/2 z-50 flex space-x-2 bg-black bg-opacity-70 p-2 rounded-lg">
92
- <button class="camera-btn px-4 py-2 rounded-lg" data-view="cabine">
93
- <i class="fas fa-user mr-2"></i>Cabine
94
- </button>
95
- <button class="camera-btn px-4 py-2 rounded-lg" data-view="exterior">
96
- <i class="fas fa-truck mr-2"></i>Extérieur
97
- </button>
98
- <button class="camera-btn px-4 py-2 rounded-lg" data-view="dashboard">
99
- <i class="fas fa-tachometer-alt mr-2"></i>Tableau de bord
100
- </button>
101
- </div>
102
-
103
- <!-- Vue Cabine -->
104
- <div class="view-container absolute inset-0 cabine-view" id="cabine-view">
105
- <!-- Volant -->
106
- <div class="absolute bottom-32 left-1/2 transform -translate-x-1/2 w-40 h-40 rounded-full iveco-steering-wheel flex items-center justify-center shadow-xl">
107
- <div class="w-32 h-32 rounded-full bg-gray-700 flex items-center justify-center">
108
- <div class="w-28 h-28 rounded-full bg-gray-600 flex items-center justify-center">
109
- <div class="text-white text-sm font-bold">IVECO</div>
110
  </div>
111
  </div>
112
  </div>
 
 
 
 
 
 
113
 
114
- <!-- Levier de vitesse -->
115
- <div class="absolute bottom-32 right-16 glass-effect rounded-lg w-20 h-20 flex items-center justify-center">
116
- <div class="text-2xl font-bold">N</div>
117
- </div>
118
 
119
- <!-- Pédales -->
120
- <div class="absolute bottom-16 left-1/2 transform -translate-x-1/2 flex space-x-8">
121
- <div class="w-20 h-20 rounded-full bg-red-600 flex items-center justify-center shadow-lg">
122
- <i class="fas fa-hand-paper text-white text-2xl"></i>
123
- </div>
124
- <div class="w-20 h-20 rounded-full bg-green-600 flex items-center justify-center shadow-lg">
125
- <i class="fas fa-bolt text-white text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
126
  </div>
 
 
127
  </div>
128
-
129
- <!-- Rétroviseur -->
130
- <div class="absolute top-8 left-1/2 transform -translate-x-1/2 w-32 h-16 bg-gray-800 rounded-lg flex justify-center items-center">
131
- <div class="w-28 h-12 bg-blue-900 opacity-30 rounded"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
132
  </div>
133
- </div>
134
-
135
- <!-- Vue Extérieure -->
136
- <div class="view-container absolute inset-0 exterior-view hidden" id="exterior-view">
137
- <!-- Infos camion -->
138
- <div class="absolute bottom-8 left-8 glass-effect rounded-lg p-4 max-w-md">
139
- <h2 class="text-xl font-bold mb-2">IVECO STRALIS XP</h2>
140
- <div class="grid grid-cols-2 gap-4">
141
- <div>
142
- <div class="text-sm text-gray-400">Moteur</div>
143
- <div class="font-bold">Cursor 11</div>
144
  </div>
145
- <div>
146
- <div class="text-sm text-gray-400">Puissance</div>
147
- <div class="font-bold">460 ch</div>
148
  </div>
149
- <div>
150
- <div class="text-sm text-gray-400">Transmission</div>
151
- <div class="font-bold">12+2</div>
152
  </div>
153
- <div>
154
- <div class="text-sm text-gray-400">PTAC</div>
155
- <div class="font-bold">44 t</div>
156
  </div>
157
  </div>
158
  </div>
159
- </div>
160
-
161
- <!-- Vue Tableau de bord -->
162
- <div class="view-container absolute inset-0 dashboard-view hidden" id="dashboard-view">
163
- <!-- Compteurs -->
164
- <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex space-x-8">
165
- <!-- Compteur de vitesse -->
166
- <div class="glass-effect rounded-lg p-6 w-40 h-40 relative">
167
- <div class="text-center text-gray-300 text-lg mb-2">SPEED</div>
168
- <div class="text-center text-white text-5xl font-bold">0</div>
169
- <div class="text-center text-gray-400 text-sm">km/h</div>
170
- <div class="absolute bottom-4 left-1/2 w-32 h-1 bg-gray-700 rounded-full transform -translate-x-1/2">
171
- <div class="speed-needle absolute bottom-0 left-1/2 w-1 h-12 bg-red-500 rounded-full transform -translate-x-1/2 rotate-0"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
172
  </div>
173
  </div>
174
 
175
- <!-- Compteur de régime -->
176
- <div class="glass-effect rounded-lg p-6 w-40 h-40 relative">
177
- <div class="text-center text-gray-300 text-lg mb-2">RPM</div>
178
- <div class="text-center text-white text-5xl font-bold">800</div>
179
- <div class="text-center text-gray-400 text-sm">x100</div>
180
- <div class="absolute bottom-4 left-1/2 w-32 h-1 bg-gray-700 rounded-full transform -translate-x-1/2">
181
- <div class="speed-needle absolute bottom-0 left-1/2 w-1 h-12 bg-yellow-500 rounded-full transform -translate-x-1/2 rotate-0"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
182
  </div>
183
  </div>
184
  </div>
185
-
186
- <!-- Indicateurs -->
187
- <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 glass-effect rounded-lg p-4">
188
- <div class="flex space-x-6">
189
- <div class="flex flex-col items-center">
190
- <div class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center">
191
- <i class="fas fa-exclamation text-white"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
192
  </div>
193
- <div class="text-xs text-gray-400 mt-1">HANDBRK</div>
194
  </div>
195
- <div class="flex flex-col items-center">
196
- <div class="w-10 h-10 rounded-full bg-yellow-500 opacity-0 flex items-center justify-center">
197
- <i class="fas fa-engine-warning text-white"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
198
  </div>
199
- <div class="text-xs text-gray-400 mt-1">ENGINE</div>
200
  </div>
201
- <div class="flex flex-col items-center">
202
- <div class="w-10 h-10 rounded-full bg-blue-500 opacity-0 flex items-center justify-center">
203
- <i class="fas fa-lightbulb text-white"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
204
  </div>
205
- <div class="text-xs text-gray-400 mt-1">BEAM</div>
206
  </div>
207
- <div class="flex flex-col items-center">
208
- <div class="w-10 h-10 rounded-full bg-green-500 opacity-0 flex items-center justify-center">
209
- <i class="fas fa-tachometer-alt text-white"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
210
  </div>
211
- <div class="text-xs text-gray-400 mt-1">CRUISE</div>
 
 
 
 
 
 
 
 
 
 
 
212
  </div>
213
  </div>
214
  </div>
215
- </div>
216
-
217
- <!-- Console d'information -->
218
- <div class="absolute bottom-4 right-4 bg-black bg-opacity-80 text-green-400 font-mono text-sm p-3 rounded-lg max-w-xs">
219
- > Système IVECO actif<br>
220
- > Vue cabine sélectionnée<br>
221
- > Tous systèmes OK
222
- </div>
223
 
224
  <script>
225
- // Gestion des vues
226
- const views = {
227
- 'cabine': document.getElementById('cabine-view'),
228
- 'exterior': document.getElementById('exterior-view'),
229
- 'dashboard': document.getElementById('dashboard-view')
230
- };
231
-
232
- const buttons = document.querySelectorAll('.camera-btn');
233
-
234
- buttons.forEach(button => {
235
- button.addEventListener('click', () => {
236
- const view = button.dataset.view;
237
 
238
- // Masquer toutes les vues
239
- Object.values(views).forEach(v => v.classList.add('hidden'));
 
240
 
241
- // Afficher la vue sélectionnée
242
- views[view].classList.remove('hidden');
243
 
244
- // Mettre à jour les boutons actifs
245
- buttons.forEach(btn => btn.classList.remove('active'));
246
- button.classList.add('active');
247
 
248
- // Mettre à jour la console
249
- updateConsole(view);
250
- });
251
- });
252
-
253
- // Activer la vue cabine par défaut
254
- document.querySelector('.camera-btn[data-view="cabine"]').click();
255
-
256
- // Fonction pour mettre à jour la console
257
- function updateConsole(view) {
258
- const consoleText = document.querySelector('.font-mono');
259
- let message = '';
260
-
261
- switch(view) {
262
- case 'cabine':
263
- message = "> Vue cabine activée\n> Position conducteur\n> Contrôles principaux visibles";
264
- break;
265
- case 'exterior':
266
- message = "> Vue extérieure activée\n> IVECO Stralis XP\n> Configuration 4x2";
267
- break;
268
- case 'dashboard':
269
- message = "> Tableau de bord activé\n> Instruments de contrôle\n> Voyants de statut";
270
- break;
271
  }
272
-
273
- consoleText.innerHTML = `> Système IVECO actif<br>${message.replace(/\n/g, '<br>')}`;
274
  }
275
 
276
- // Animation des aiguilles (simulation)
277
- let speed = 0;
278
- let rpm = 800;
279
 
280
- function animateDashboard() {
281
- // Simulation légère de variation
282
- speed = 50 + Math.sin(Date.now() / 3000) * 10;
283
- rpm = 800 + speed * 20 + Math.sin(Date.now() / 2000) * 100;
284
-
285
- // Mettre à jour les affichages
286
- const speedElements = document.querySelectorAll('.glass-effect .text-5xl');
287
- if (speedElements[0]) speedElements[0].textContent = Math.floor(speed);
288
-
289
- if (speedElements[1]) speedElements[1].textContent = Math.floor(rpm);
290
-
291
- // Mettre à jour les aiguilles
292
- const speedNeedles = document.querySelectorAll('.speed-needle');
293
- if (speedNeedles[0]) speedNeedles[0].style.transform = `translateX(-50%) rotate(${-90 + (speed / 120) * 180}deg)`;
294
- if (speedNeedles[1]) speedNeedles[1].style.transform = `translateX(-50%) rotate(${-90 + (rpm / 4000) * 180}deg)`;
295
 
296
- requestAnimationFrame(animateDashboard);
297
- }
 
 
 
 
 
 
 
298
 
299
- animateDashboard();
 
300
  </script>
301
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/simulator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
302
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>IVECO - Nouvelle Génération</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
11
+
12
+ :root {
13
+ --iveco-blue: #005baa;
14
+ --iveco-dark: #0a1929;
15
+ --iveco-light: #f0f8ff;
16
+ }
17
 
18
  body {
19
  margin: 0;
20
  padding: 0;
21
  font-family: 'Roboto', sans-serif;
22
+ background-color: var(--iveco-dark);
23
  color: white;
24
+ overflow-x: hidden;
25
+ }
26
+
27
+ .hero-section {
28
+ background: linear-gradient(135deg, var(--iveco-dark) 0%, var(--iveco-blue) 100%);
29
+ min-height: 100vh;
30
+ position: relative;
31
  overflow: hidden;
32
  }
33
 
34
+ .hero-overlay {
35
+ position: absolute;
36
+ top: 0;
37
+ left: 0;
38
+ width: 100%;
39
+ height: 100%;
40
+ background: rgba(0, 0, 0, 0.3);
41
+ z-index: 1;
42
  }
43
 
44
+ .hero-content {
45
+ position: relative;
46
+ z-index: 2;
47
  }
48
 
49
+ .truck-animation {
50
+ position: absolute;
51
+ bottom: -10%;
52
+ right: -10%;
53
+ width: 70%;
54
+ max-width: 800px;
55
+ animation: float 8s ease-in-out infinite;
56
  }
57
 
58
+ @keyframes float {
59
+ 0% { transform: translateY(0px) rotate(0deg); }
60
+ 50% { transform: translateY(-20px) rotate(2deg); }
61
+ 100% { transform: translateY(0px) rotate(0deg); }
62
  }
63
 
64
+ .feature-card {
65
+ background: rgba(255, 255, 255, 0.1);
66
+ backdrop-filter: blur(10px);
67
+ border: 1px solid rgba(255, 255, 255, 0.2);
68
+ transition: all 0.3s ease;
69
  }
70
 
71
+ .feature-card:hover {
72
+ transform: translateY(-10px);
73
+ box-shadow: 0 15px 30px rgba(0, 91, 170, 0.3);
74
  }
75
 
76
+ .nav-link {
77
+ position: relative;
78
  }
79
 
80
+ .nav-link::after {
81
+ content: '';
82
+ position: absolute;
83
+ width: 0;
84
+ height: 2px;
85
+ bottom: -5px;
86
+ left: 0;
87
+ background-color: white;
88
+ transition: width 0.3s ease;
89
  }
90
 
91
+ .nav-link:hover::after {
92
+ width: 100%;
93
  }
94
 
95
+ .btn-primary {
96
+ background: var(--iveco-blue);
97
+ transition: all 0.3s ease;
98
+ }
99
+
100
+ .btn-primary:hover {
101
+ background: #004a8c;
102
+ transform: translateY(-2px);
103
+ box-shadow: 0 5px 15px rgba(0, 91, 170, 0.4);
104
+ }
105
+
106
+ .btn-outline {
107
+ border: 2px solid white;
108
+ transition: all 0.3s ease;
109
+ }
110
+
111
+ .btn-outline:hover {
112
+ background: white;
113
+ color: var(--iveco-blue);
114
+ }
115
+
116
+ .stats-item {
117
+ position: relative;
118
+ padding-left: 2rem;
119
+ }
120
+
121
+ .stats-item::before {
122
+ content: '';
123
+ position: absolute;
124
+ left: 0;
125
+ top: 50%;
126
+ transform: translateY(-50%);
127
+ width: 1rem;
128
+ height: 1rem;
129
+ background: var(--iveco-blue);
130
+ border-radius: 50%;
131
  }
132
 
133
+ .section-divider {
134
+ height: 100px;
135
+ background: linear-gradient(to bottom, var(--iveco-blue), transparent);
136
+ clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
 
137
  }
138
 
139
+ .footer {
140
+ background: linear-gradient(to bottom, var(--iveco-dark), #000);
 
 
141
  }
142
 
143
+ /* Animation des particules */
144
+ .particles {
145
+ position: absolute;
146
+ top: 0;
147
+ left: 0;
148
+ width: 100%;
149
+ height: 100%;
150
+ z-index: 1;
151
+ overflow: hidden;
152
+ }
153
+
154
+ .particle {
155
+ position: absolute;
156
+ background: rgba(255, 255, 255, 0.5);
157
+ border-radius: 50%;
158
+ animation: particles-animation linear infinite;
159
+ }
160
+
161
+ @keyframes particles-animation {
162
+ 0% { transform: translateY(0) translateX(0); opacity: 1; }
163
+ 100% { transform: translateY(-1000px) translateX(200px); opacity: 0; }
164
+ }
165
+
166
+ /* Responsive */
167
+ @media (max-width: 768px) {
168
+ .truck-animation {
169
+ width: 100%;
170
+ right: -30%;
171
+ }
172
+
173
+ .hero-content {
174
+ padding-top: 100px;
175
+ }
176
  }
177
  </style>
178
  </head>
179
+ <body>
180
+ <!-- Navigation -->
181
+ <nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg">
182
+ <div class="container mx-auto px-6 py-4">
183
+ <div class="flex justify-between items-center">
184
+ <div class="flex items-center">
185
+ <img src="https://www.iveco.com/etc.clientlibs/iveco/clientlibs/clientlib-site/resources/images/logo.svg" alt="IVECO Logo" class="h-10">
186
+ </div>
187
+ <div class="hidden md:flex space-x-8">
188
+ <a href="#" class="nav-link text-white font-medium">Accueil</a>
189
+ <a href="#" class="nav-link text-white font-medium">Gamme</a>
190
+ <a href="#" class="nav-link text-white font-medium">Services</a>
191
+ <a href="#" class="nav-link text-white font-medium">Innovation</a>
192
+ <a href="#" class="nav-link text-white font-medium">À propos</a>
193
+ <a href="#" class="nav-link text-white font-medium">Contact</a>
194
+ </div>
195
+ <div class="md:hidden">
196
+ <button class="text-white focus:outline-none">
197
+ <i class="fas fa-bars text-2xl"></i>
198
+ </button>
 
199
  </div>
200
  </div>
201
  </div>
202
+ </nav>
203
+
204
+ <!-- Hero Section -->
205
+ <section class="hero-section">
206
+ <!-- Particules animées -->
207
+ <div class="particles" id="particles"></div>
208
 
209
+ <div class="hero-overlay"></div>
 
 
 
210
 
211
+ <div class="container mx-auto px-6 py-24 hero-content flex flex-col justify-center min-h-screen">
212
+ <div class="w-full md:w-1/2">
213
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">
214
+ <span class="text-white">L'avenir du</span>
215
+ <span class="text-blue-300">transport</span>
216
+ </h1>
217
+ <p class="text-xl md:text-2xl text-gray-300 mb-10">
218
+ Découvrez la nouvelle génération de véhicules IVECO, conçus pour maximiser l'efficacité, réduire les émissions et révolutionner votre expérience de conduite.
219
+ </p>
220
+ <div class="flex flex-wrap gap-4">
221
+ <a href="#" class="btn-primary px-8 py-4 rounded-full text-white font-bold">
222
+ Explorer la gamme <i class="fas fa-arrow-right ml-2"></i>
223
+ </a>
224
+ <a href="#" class="btn-outline px-8 py-4 rounded-full text-white font-bold">
225
+ Configurateur 3D <i class="fas fa-cog ml-2"></i>
226
+ </a>
227
+ </div>
228
  </div>
229
+
230
+ <img src="https://www.iveco.com/dam/jcr:6c5c1c1b-3a4e-4d1e-9c6a-3b3e3b3b3b3b" alt="IVECO Truck" class="truck-animation">
231
  </div>
232
+ </section>
233
+
234
+ <!-- Divider -->
235
+ <div class="section-divider"></div>
236
+
237
+ <!-- Features Section -->
238
+ <section class="py-20 bg-gray-900">
239
+ <div class="container mx-auto px-6">
240
+ <div class="text-center mb-20">
241
+ <h2 class="text-4xl font-bold mb-4">Pourquoi choisir IVECO ?</h2>
242
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">
243
+ Une combinaison unique de performance, d'innovation et de durabilité qui fait la différence sur la route.
244
+ </p>
245
+ </div>
246
+
247
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
248
+ <div class="feature-card p-8 rounded-xl">
249
+ <div class="text-blue-400 text-5xl mb-6">
250
+ <i class="fas fa-leaf"></i>
251
+ </div>
252
+ <h3 class="text-2xl font-bold mb-4">Durabilité</h3>
253
+ <p class="text-gray-300">
254
+ Nos solutions à faibles émissions et notre engagement envers l'économie circulaire réduisent l'impact environnemental.
255
+ </p>
256
+ </div>
257
+
258
+ <div class="feature-card p-8 rounded-xl">
259
+ <div class="text-blue-400 text-5xl mb-6">
260
+ <i class="fas fa-tachometer-alt"></i>
261
+ </div>
262
+ <h3 class="text-2xl font-bold mb-4">Performance</h3>
263
+ <p class="text-gray-300">
264
+ Moteurs haute performance conçus pour offrir le meilleur rendement énergétique et la plus grande fiabilité.
265
+ </p>
266
+ </div>
267
+
268
+ <div class="feature-card p-8 rounded-xl">
269
+ <div class="text-blue-400 text-5xl mb-6">
270
+ <i class="fas fa-cogs"></i>
271
+ </div>
272
+ <h3 class="text-2xl font-bold mb-4">Technologie</h3>
273
+ <p class="text-gray-300">
274
+ Systèmes connectés et assistance à la conduite de pointe pour une sécurité et une efficacité maximales.
275
+ </p>
276
+ </div>
277
+ </div>
278
  </div>
279
+ </section>
280
+
281
+ <!-- Stats Section -->
282
+ <section class="py-20 bg-gray-800">
283
+ <div class="container mx-auto px-6">
284
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
285
+ <div class="text-center">
286
+ <div class="text-5xl font-bold text-blue-400 mb-2">45+</div>
287
+ <div class="text-xl text-gray-300">Années d'expérience</div>
 
 
288
  </div>
289
+ <div class="text-center">
290
+ <div class="text-5xl font-bold text-blue-400 mb-2">160+</div>
291
+ <div class="text-xl text-gray-300">Pays desservis</div>
292
  </div>
293
+ <div class="text-center">
294
+ <div class="text-5xl font-bold text-blue-400 mb-2">500K+</div>
295
+ <div class="text-xl text-gray-300">Véhicules produits</div>
296
  </div>
297
+ <div class="text-center">
298
+ <div class="text-5xl font-bold text-blue-400 mb-2">10K+</div>
299
+ <div class="text-xl text-gray-300">Employés dédiés</div>
300
  </div>
301
  </div>
302
  </div>
303
+ </section>
304
+
305
+ <!-- Models Section -->
306
+ <section class="py-20 bg-gray-900">
307
+ <div class="container mx-auto px-6">
308
+ <div class="text-center mb-20">
309
+ <h2 class="text-4xl font-bold mb-4">Notre gamme de véhicules</h2>
310
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">
311
+ Découvrez notre sélection de véhicules conçus pour répondre à tous vos besoins de transport.
312
+ </p>
313
+ </div>
314
+
315
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
316
+ <!-- Modèle 1 -->
317
+ <div class="relative overflow-hidden rounded-xl h-96 group">
318
+ <img src="https://www.iveco.com/dam/jcr:12345678-1234-1234-1234-123456789012" alt="IVECO S-Way" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
319
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
320
+ <div class="absolute bottom-0 left-0 p-8 text-white">
321
+ <h3 class="text-2xl font-bold mb-2">IVECO S-Way</h3>
322
+ <p class="text-gray-300 mb-4">Le camion longue distance par excellence</p>
323
+ <a href="#" class="inline-flex items-center text-blue-400 font-medium">
324
+ En savoir plus <i class="fas fa-arrow-right ml-2"></i>
325
+ </a>
326
+ </div>
327
+ </div>
328
+
329
+ <!-- Modèle 2 -->
330
+ <div class="relative overflow-hidden rounded-xl h-96 group">
331
+ <img src="https://www.iveco.com/dam/jcr:87654321-4321-4321-4321-210987654321" alt="IVECO T-Way" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
332
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
333
+ <div class="absolute bottom-0 left-0 p-8 text-white">
334
+ <h3 class="text-2xl font-bold mb-2">IVECO T-Way</h3>
335
+ <p class="text-gray-300 mb-4">Robuste et polyvalent pour les chantiers</p>
336
+ <a href="#" class="inline-flex items-center text-blue-400 font-medium">
337
+ En savoir plus <i class="fas fa-arrow-right ml-2"></i>
338
+ </a>
339
+ </div>
340
+ </div>
341
+
342
+ <!-- Modèle 3 -->
343
+ <div class="relative overflow-hidden rounded-xl h-96 group">
344
+ <img src="https://www.iveco.com/dam/jcr:abcdef12-3456-7890-1234-567890abcdef" alt="IVECO Daily" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
345
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
346
+ <div class="absolute bottom-0 left-0 p-8 text-white">
347
+ <h3 class="text-2xl font-bold mb-2">IVECO Daily</h3>
348
+ <p class="text-gray-300 mb-4">Le véhicule utilitaire léger polyvalent</p>
349
+ <a href="#" class="inline-flex items-center text-blue-400 font-medium">
350
+ En savoir plus <i class="fas fa-arrow-right ml-2"></i>
351
+ </a>
352
+ </div>
353
  </div>
354
  </div>
355
 
356
+ <div class="text-center mt-12">
357
+ <a href="#" class="btn-primary px-8 py-4 rounded-full text-white font-bold inline-flex items-center">
358
+ Voir toute la gamme <i class="fas fa-chevron-down ml-2"></i>
359
+ </a>
360
+ </div>
361
+ </div>
362
+ </section>
363
+
364
+ <!-- Technology Section -->
365
+ <section class="py-20 bg-gray-800">
366
+ <div class="container mx-auto px-6">
367
+ <div class="flex flex-col md:flex-row items-center">
368
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
369
+ <h2 class="text-4xl font-bold mb-6">Technologie de pointe</h2>
370
+ <p class="text-xl text-gray-300 mb-8">
371
+ IVECO intègre les dernières innovations technologiques pour offrir des véhicules plus intelligents, plus sûrs et plus efficaces.
372
+ </p>
373
+
374
+ <div class="space-y-6">
375
+ <div class="stats-item">
376
+ <h3 class="text-2xl font-bold mb-2">Connectivité avancée</h3>
377
+ <p class="text-gray-400">
378
+ Systèmes embarqués connectés pour une gestion optimale de votre flotte.
379
+ </p>
380
+ </div>
381
+
382
+ <div class="stats-item">
383
+ <h3 class="text-2xl font-bold mb-2">Assistance à la conduite</h3>
384
+ <p class="text-gray-400">
385
+ Technologies ADAS pour une sécurité renforcée sur toutes vos routes.
386
+ </p>
387
+ </div>
388
+
389
+ <div class="stats-item">
390
+ <h3 class="text-2xl font-bold mb-2">Motorisation alternative</h3>
391
+ <p class="text-gray-400">
392
+ Solutions électriques, GNL et hydrogène pour une transition énergétique efficace.
393
+ </p>
394
+ </div>
395
+ </div>
396
+ </div>
397
+
398
+ <div class="md:w-1/2">
399
+ <div class="relative">
400
+ <img src="https://www.iveco.com/dam/jcr:98765432-1234-5678-9012-345678901234" alt="IVECO Technology" class="w-full rounded-xl">
401
+ <div class="absolute inset-0 flex items-center justify-center">
402
+ <button class="bg-blue-500 hover:bg-blue-600 text-white rounded-full w-20 h-20 flex items-center justify-center shadow-xl transform hover:scale-110 transition-all">
403
+ <i class="fas fa-play text-2xl"></i>
404
+ </button>
405
+ </div>
406
+ </div>
407
  </div>
408
  </div>
409
  </div>
410
+ </section>
411
+
412
+ <!-- Testimonials Section -->
413
+ <section class="py-20 bg-gray-900">
414
+ <div class="container mx-auto px-6">
415
+ <div class="text-center mb-20">
416
+ <h2 class="text-4xl font-bold mb-4">Ils nous font confiance</h2>
417
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">
418
+ Des entreprises de toutes tailles choisissent IVECO pour leurs besoins de transport.
419
+ </p>
420
+ </div>
421
+
422
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
423
+ <!-- Témoignage 1 -->
424
+ <div class="bg-gray-800 p-8 rounded-xl">
425
+ <div class="flex items-center mb-6">
426
+ <div class="text-yellow-400 text-xl mr-2">
427
+ <i class="fas fa-star"></i>
428
+ <i class="fas fa-star"></i>
429
+ <i class="fas fa-star"></i>
430
+ <i class="fas fa-star"></i>
431
+ <i class="fas fa-star"></i>
432
+ </div>
433
+ </div>
434
+ <p class="text-gray-300 mb-6">
435
+ "La fiabilité de nos IVECO nous permet de garantir des livraisons à temps à nos clients, avec un excellent rendement énergétique."
436
+ </p>
437
+ <div class="flex items-center">
438
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Jean Dupont" class="w-12 h-12 rounded-full mr-4">
439
+ <div>
440
+ <h4 class="font-bold">Jean Dupont</h4>
441
+ <p class="text-gray-400 text-sm">Directeur Logistique, Transports Dupont</p>
442
+ </div>
443
  </div>
 
444
  </div>
445
+
446
+ <!-- Témoignage 2 -->
447
+ <div class="bg-gray-800 p-8 rounded-xl">
448
+ <div class="flex items-center mb-6">
449
+ <div class="text-yellow-400 text-xl mr-2">
450
+ <i class="fas fa-star"></i>
451
+ <i class="fas fa-star"></i>
452
+ <i class="fas fa-star"></i>
453
+ <i class="fas fa-star"></i>
454
+ <i class="fas fa-star"></i>
455
+ </div>
456
+ </div>
457
+ <p class="text-gray-300 mb-6">
458
+ "Le service après-vente IVECO est exceptionnel. Nos véhicules sont toujours opérationnels grâce à leur réactivité."
459
+ </p>
460
+ <div class="flex items-center">
461
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Marie Lambert" class="w-12 h-12 rounded-full mr-4">
462
+ <div>
463
+ <h4 class="font-bold">Marie Lambert</h4>
464
+ <p class="text-gray-400 text-sm">Responsable Flotte, Bâtiments Lambert</p>
465
+ </div>
466
  </div>
 
467
  </div>
468
+
469
+ <!-- Témoignage 3 -->
470
+ <div class="bg-gray-800 p-8 rounded-xl">
471
+ <div class="flex items-center mb-6">
472
+ <div class="text-yellow-400 text-xl mr-2">
473
+ <i class="fas fa-star"></i>
474
+ <i class="fas fa-star"></i>
475
+ <i class="fas fa-star"></i>
476
+ <i class="fas fa-star"></i>
477
+ <i class="fas fa-star-half-alt"></i>
478
+ </div>
479
+ </div>
480
+ <p class="text-gray-300 mb-6">
481
+ "La transition vers les modèles électriques IVECO a été fluide et nous a permis de réduire significativement notre empreinte carbone."
482
+ </p>
483
+ <div class="flex items-center">
484
+ <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Thomas Martin" class="w-12 h-12 rounded-full mr-4">
485
+ <div>
486
+ <h4 class="font-bold">Thomas Martin</h4>
487
+ <p class="text-gray-400 text-sm">PDG, Eco-Transports Martin</p>
488
+ </div>
489
  </div>
 
490
  </div>
491
+ </div>
492
+ </div>
493
+ </section>
494
+
495
+ <!-- CTA Section -->
496
+ <section class="py-20 bg-blue-900">
497
+ <div class="container mx-auto px-6 text-center">
498
+ <h2 class="text-4xl font-bold mb-6">Prêt à révolutionner votre flotte ?</h2>
499
+ <p class="text-xl text-blue-200 mb-10 max-w-3xl mx-auto">
500
+ Contactez nos experts pour trouver la solution IVECO parfaitement adaptée à vos besoins.
501
+ </p>
502
+ <div class="flex flex-wrap justify-center gap-4">
503
+ <a href="#" class="btn-primary px-8 py-4 rounded-full text-white font-bold">
504
+ Demander un devis <i class="fas fa-file-alt ml-2"></i>
505
+ </a>
506
+ <a href="#" class="btn-outline px-8 py-4 rounded-full text-white font-bold">
507
+ Nous contacter <i class="fas fa-phone ml-2"></i>
508
+ </a>
509
+ </div>
510
+ </div>
511
+ </section>
512
+
513
+ <!-- Footer -->
514
+ <footer class="footer pt-20 pb-10">
515
+ <div class="container mx-auto px-6">
516
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-10 mb-10">
517
+ <div>
518
+ <img src="https://www.iveco.com/etc.clientlibs/iveco/clientlibs/clientlib-site/resources/images/logo.svg" alt="IVECO Logo" class="h-10 mb-6">
519
+ <p class="text-gray-400">
520
+ Leader européen des véhicules industriels, IVECO conçoit, fabrique et commercialise des solutions de transport durables.
521
+ </p>
522
+ </div>
523
+
524
+ <div>
525
+ <h3 class="text-xl font-bold mb-6 text-white">Gamme de véhicules</h3>
526
+ <ul class="space-y-3">
527
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Camions longue distance</a></li>
528
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Camions chantiers</a></li>
529
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Véhicules utilitaires</a></li>
530
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Bus et autocars</a></li>
531
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Véhicules spéciaux</a></li>
532
+ </ul>
533
+ </div>
534
+
535
+ <div>
536
+ <h3 class="text-xl font-bold mb-6 text-white">Services</h3>
537
+ <ul class="space-y-3">
538
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Entretien et réparation</a></li>
539
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Financement</a></li>
540
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Connectivité flotte</a></li>
541
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Formation conducteurs</a></li>
542
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Pièces détachées</a></li>
543
+ </ul>
544
+ </div>
545
+
546
+ <div>
547
+ <h3 class="text-xl font-bold mb-6 text-white">Contact</h3>
548
+ <ul class="space-y-3">
549
+ <li class="flex items-center text-gray-400">
550
+ <i class="fas fa-map-marker-alt mr-3 text-blue-400"></i> 40 Rue de la République, Lyon
551
+ </li>
552
+ <li class="flex items-center text-gray-400">
553
+ <i class="fas fa-phone mr-3 text-blue-400"></i> +33 4 72 00 00 00
554
+ </li>
555
+ <li class="flex items-center text-gray-400">
556
+ <i class="fas fa-envelope mr-3 text-blue-400"></i> contact@iveco-france.com
557
+ </li>
558
+ </ul>
559
+ <div class="flex space-x-4 mt-6">
560
+ <a href="#" class="text-gray-400 hover:text-white text-xl">
561
+ <i class="fab fa-facebook-f"></i>
562
+ </a>
563
+ <a href="#" class="text-gray-400 hover:text-white text-xl">
564
+ <i class="fab fa-twitter"></i>
565
+ </a>
566
+ <a href="#" class="text-gray-400 hover:text-white text-xl">
567
+ <i class="fab fa-linkedin-in"></i>
568
+ </a>
569
+ <a href="#" class="text-gray-400 hover:text-white text-xl">
570
+ <i class="fab fa-youtube"></i>
571
+ </a>
572
+ <a href="#" class="text-gray-400 hover:text-white text-xl">
573
+ <i class="fab fa-instagram"></i>
574
+ </a>
575
  </div>
576
+ </div>
577
+ </div>
578
+
579
+ <div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center">
580
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">
581
+ © 2023 IVECO France. Tous droits réservés.
582
+ </p>
583
+ <div class="flex space-x-6">
584
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Mentions légales</a>
585
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Politique de confidentialité</a>
586
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Conditions générales</a>
587
+ <a href="#" class="text-gray-500 hover:text-white text-sm">Cookies</a>
588
  </div>
589
  </div>
590
  </div>
591
+ </footer>
 
 
 
 
 
 
 
592
 
593
  <script>
594
+ // Animation des particules
595
+ function createParticles() {
596
+ const particlesContainer = document.getElementById('particles');
597
+ const particleCount = 30;
598
+
599
+ for (let i = 0; i < particleCount; i++) {
600
+ const particle = document.createElement('div');
601
+ particle.classList.add('particle');
 
 
 
 
602
 
603
+ // Position aléatoire
604
+ const posX = Math.random() * 100;
605
+ const posY = Math.random() * 100 + 100;
606
 
607
+ // Taille aléatoire
608
+ const size = Math.random() * 5 + 1;
609
 
610
+ // Durée d'animation aléatoire
611
+ const duration = Math.random() * 20 + 10;
 
612
 
613
+ // Délai aléatoire
614
+ const delay = Math.random() * 5;
615
+
616
+ particle.style.left = `${posX}%`;
617
+ particle.style.top = `${posY}%`;
618
+ particle.style.width = `${size}px`;
619
+ particle.style.height = `${size}px`;
620
+ particle.style.animationDuration = `${duration}s`;
621
+ particle.style.animationDelay = `${delay}s`;
622
+
623
+ particlesContainer.appendChild(particle);
 
 
 
 
 
 
 
 
 
 
 
 
624
  }
 
 
625
  }
626
 
627
+ // Lancer l'animation au chargement
628
+ window.addEventListener('load', createParticles);
 
629
 
630
+ // Animation du défilement fluide pour les ancres
631
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
632
+ anchor.addEventListener('click', function (e) {
633
+ e.preventDefault();
634
+
635
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
636
+ behavior: 'smooth'
637
+ });
638
+ });
639
+ });
640
+
641
+ // Animation au défilement
642
+ const animateOnScroll = () => {
643
+ const elements = document.querySelectorAll('.feature-card, .stats-item, .model-card');
 
644
 
645
+ elements.forEach(element => {
646
+ const elementPosition = element.getBoundingClientRect().top;
647
+ const windowHeight = window.innerHeight;
648
+
649
+ if (elementPosition < windowHeight - 100) {
650
+ element.classList.add('animate__animated', 'animate__fadeInUp');
651
+ }
652
+ });
653
+ };
654
 
655
+ window.addEventListener('scroll', animateOnScroll);
656
+ window.addEventListener('load', animateOnScroll);
657
  </script>
658
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/simulator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
659
  </html>
prompts.txt CHANGED
@@ -4,4 +4,7 @@ je veux tableau de bord avec toute complet
4
  je veux la vue en reel dans le camion avec de vrai vue
5
  je veu etre dabs le camion en reerl acec toute les bouton de config
6
  je veu etre a linterrieur dun camion iveco au volat en reel
7
- JE VEUX VUE RELLE ENLEVER LA 3D JE VEUX VOIR PLUSSIEUR VUE
 
 
 
 
4
  je veux la vue en reel dans le camion avec de vrai vue
5
  je veu etre dabs le camion en reerl acec toute les bouton de config
6
  je veu etre a linterrieur dun camion iveco au volat en reel
7
+ JE VEUX VUE RELLE ENLEVER LA 3D JE VEUX VOIR PLUSSIEUR VUE
8
+ JE VEUX PAYSAGE
9
+ CORRIGER L4ERREUR DE VUE
10
+ RECONFIGUE TOOUTE LE SITE CHANGER LA PAGE D ACCUEIL