Add 2 files
Browse files- index.html +386 -50
- prompts.txt +2 -1
index.html
CHANGED
|
@@ -174,6 +174,17 @@
|
|
| 174 |
padding-top: 100px;
|
| 175 |
}
|
| 176 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 177 |
</style>
|
| 178 |
</head>
|
| 179 |
<body>
|
|
@@ -185,24 +196,35 @@
|
|
| 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 |
|
|
@@ -218,10 +240,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>
|
|
@@ -235,7 +257,7 @@
|
|
| 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>
|
|
@@ -271,7 +293,7 @@
|
|
| 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é
|
| 275 |
</p>
|
| 276 |
</div>
|
| 277 |
</div>
|
|
@@ -279,7 +301,7 @@
|
|
| 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">
|
|
@@ -303,7 +325,7 @@
|
|
| 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>
|
|
@@ -320,7 +342,7 @@
|
|
| 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>
|
|
@@ -333,7 +355,7 @@
|
|
| 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>
|
|
@@ -346,7 +368,7 @@
|
|
| 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>
|
|
@@ -354,7 +376,7 @@
|
|
| 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>
|
|
@@ -362,7 +384,7 @@
|
|
| 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">
|
|
@@ -398,11 +420,11 @@
|
|
| 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 |
-
<
|
| 402 |
-
<
|
| 403 |
<i class="fas fa-play text-2xl"></i>
|
| 404 |
-
</
|
| 405 |
-
</
|
| 406 |
</div>
|
| 407 |
</div>
|
| 408 |
</div>
|
|
@@ -493,17 +515,17 @@
|
|
| 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>
|
|
@@ -524,22 +546,22 @@
|
|
| 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 |
|
|
@@ -557,19 +579,19 @@
|
|
| 557 |
</li>
|
| 558 |
</ul>
|
| 559 |
<div class="flex space-x-4 mt-6">
|
| 560 |
-
<a href="
|
| 561 |
<i class="fab fa-facebook-f"></i>
|
| 562 |
</a>
|
| 563 |
-
<a href="
|
| 564 |
<i class="fab fa-twitter"></i>
|
| 565 |
</a>
|
| 566 |
-
<a href="
|
| 567 |
<i class="fab fa-linkedin-in"></i>
|
| 568 |
</a>
|
| 569 |
-
<a href="
|
| 570 |
<i class="fab fa-youtube"></i>
|
| 571 |
</a>
|
| 572 |
-
<a href="
|
| 573 |
<i class="fab fa-instagram"></i>
|
| 574 |
</a>
|
| 575 |
</div>
|
|
@@ -590,6 +612,151 @@
|
|
| 590 |
</div>
|
| 591 |
</footer>
|
| 592 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 593 |
<script>
|
| 594 |
// Animation des particules
|
| 595 |
function createParticles() {
|
|
@@ -624,23 +791,173 @@
|
|
| 624 |
}
|
| 625 |
}
|
| 626 |
|
| 627 |
-
//
|
| 628 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 629 |
|
| 630 |
-
|
| 631 |
-
|
| 632 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 633 |
e.preventDefault();
|
|
|
|
|
|
|
|
|
|
|
|
|
| 634 |
|
| 635 |
-
|
| 636 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 637 |
});
|
|
|
|
|
|
|
| 638 |
});
|
| 639 |
});
|
| 640 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 641 |
// Animation au défilement
|
| 642 |
const animateOnScroll = () => {
|
| 643 |
-
const elements = document.querySelectorAll('.feature-card, .stats-item,
|
| 644 |
|
| 645 |
elements.forEach(element => {
|
| 646 |
const elementPosition = element.getBoundingClientRect().top;
|
|
@@ -652,8 +969,27 @@
|
|
| 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>
|
|
|
|
| 174 |
padding-top: 100px;
|
| 175 |
}
|
| 176 |
}
|
| 177 |
+
|
| 178 |
+
/* Menu mobile */
|
| 179 |
+
.mobile-menu {
|
| 180 |
+
max-height: 0;
|
| 181 |
+
overflow: hidden;
|
| 182 |
+
transition: max-height 0.3s ease-out;
|
| 183 |
+
}
|
| 184 |
+
|
| 185 |
+
.mobile-menu.open {
|
| 186 |
+
max-height: 500px;
|
| 187 |
+
}
|
| 188 |
</style>
|
| 189 |
</head>
|
| 190 |
<body>
|
|
|
|
| 196 |
<img src="https://www.iveco.com/etc.clientlibs/iveco/clientlibs/clientlib-site/resources/images/logo.svg" alt="IVECO Logo" class="h-10">
|
| 197 |
</div>
|
| 198 |
<div class="hidden md:flex space-x-8">
|
| 199 |
+
<a href="#home" class="nav-link text-white font-medium">Accueil</a>
|
| 200 |
+
<a href="#models" class="nav-link text-white font-medium">Gamme</a>
|
| 201 |
+
<a href="#services" class="nav-link text-white font-medium">Services</a>
|
| 202 |
+
<a href="#technology" class="nav-link text-white font-medium">Innovation</a>
|
| 203 |
+
<a href="#about" class="nav-link text-white font-medium">À propos</a>
|
| 204 |
+
<a href="#contact" class="nav-link text-white font-medium">Contact</a>
|
| 205 |
</div>
|
| 206 |
<div class="md:hidden">
|
| 207 |
+
<button id="mobile-menu-button" class="text-white focus:outline-none">
|
| 208 |
<i class="fas fa-bars text-2xl"></i>
|
| 209 |
</button>
|
| 210 |
</div>
|
| 211 |
</div>
|
| 212 |
+
<!-- Menu mobile -->
|
| 213 |
+
<div id="mobile-menu" class="mobile-menu md:hidden bg-gray-900 mt-4 rounded-lg">
|
| 214 |
+
<div class="px-4 py-2 flex flex-col space-y-3">
|
| 215 |
+
<a href="#home" class="nav-link text-white font-medium block py-2">Accueil</a>
|
| 216 |
+
<a href="#models" class="nav-link text-white font-medium block py-2">Gamme</a>
|
| 217 |
+
<a href="#services" class="nav-link text-white font-medium block py-2">Services</a>
|
| 218 |
+
<a href="#technology" class="nav-link text-white font-medium block py-2">Innovation</a>
|
| 219 |
+
<a href="#about" class="nav-link text-white font-medium block py-2">À propos</a>
|
| 220 |
+
<a href="#contact" class="nav-link text-white font-medium block py-2">Contact</a>
|
| 221 |
+
</div>
|
| 222 |
+
</div>
|
| 223 |
</div>
|
| 224 |
</nav>
|
| 225 |
|
| 226 |
<!-- Hero Section -->
|
| 227 |
+
<section id="home" class="hero-section">
|
| 228 |
<!-- Particules animées -->
|
| 229 |
<div class="particles" id="particles"></div>
|
| 230 |
|
|
|
|
| 240 |
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.
|
| 241 |
</p>
|
| 242 |
<div class="flex flex-wrap gap-4">
|
| 243 |
+
<a href="#models" class="btn-primary px-8 py-4 rounded-full text-white font-bold">
|
| 244 |
Explorer la gamme <i class="fas fa-arrow-right ml-2"></i>
|
| 245 |
</a>
|
| 246 |
+
<a href="#" id="configurator-btn" class="btn-outline px-8 py-4 rounded-full text-white font-bold">
|
| 247 |
Configurateur 3D <i class="fas fa-cog ml-2"></i>
|
| 248 |
</a>
|
| 249 |
</div>
|
|
|
|
| 257 |
<div class="section-divider"></div>
|
| 258 |
|
| 259 |
<!-- Features Section -->
|
| 260 |
+
<section id="services" class="py-20 bg-gray-900">
|
| 261 |
<div class="container mx-auto px-6">
|
| 262 |
<div class="text-center mb-20">
|
| 263 |
<h2 class="text-4xl font-bold mb-4">Pourquoi choisir IVECO ?</h2>
|
|
|
|
| 293 |
</div>
|
| 294 |
<h3 class="text-2xl font-bold mb-4">Technologie</h3>
|
| 295 |
<p class="text-gray-300">
|
| 296 |
+
Systèmes connectés et assistance à la conduite de pointe pour une sécurité et une efficacité maximale.
|
| 297 |
</p>
|
| 298 |
</div>
|
| 299 |
</div>
|
|
|
|
| 301 |
</section>
|
| 302 |
|
| 303 |
<!-- Stats Section -->
|
| 304 |
+
<section id="about" class="py-20 bg-gray-800">
|
| 305 |
<div class="container mx-auto px-6">
|
| 306 |
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
| 307 |
<div class="text-center">
|
|
|
|
| 325 |
</section>
|
| 326 |
|
| 327 |
<!-- Models Section -->
|
| 328 |
+
<section id="models" class="py-20 bg-gray-900">
|
| 329 |
<div class="container mx-auto px-6">
|
| 330 |
<div class="text-center mb-20">
|
| 331 |
<h2 class="text-4xl font-bold mb-4">Notre gamme de véhicules</h2>
|
|
|
|
| 342 |
<div class="absolute bottom-0 left-0 p-8 text-white">
|
| 343 |
<h3 class="text-2xl font-bold mb-2">IVECO S-Way</h3>
|
| 344 |
<p class="text-gray-300 mb-4">Le camion longue distance par excellence</p>
|
| 345 |
+
<a href="#" class="model-details inline-flex items-center text-blue-400 font-medium" data-model="s-way">
|
| 346 |
En savoir plus <i class="fas fa-arrow-right ml-2"></i>
|
| 347 |
</a>
|
| 348 |
</div>
|
|
|
|
| 355 |
<div class="absolute bottom-0 left-0 p-8 text-white">
|
| 356 |
<h3 class="text-2xl font-bold mb-2">IVECO T-Way</h3>
|
| 357 |
<p class="text-gray-300 mb-4">Robuste et polyvalent pour les chantiers</p>
|
| 358 |
+
<a href="#" class="model-details inline-flex items-center text-blue-400 font-medium" data-model="t-way">
|
| 359 |
En savoir plus <i class="fas fa-arrow-right ml-2"></i>
|
| 360 |
</a>
|
| 361 |
</div>
|
|
|
|
| 368 |
<div class="absolute bottom-0 left-0 p-8 text-white">
|
| 369 |
<h3 class="text-2xl font-bold mb-2">IVECO Daily</h3>
|
| 370 |
<p class="text-gray-300 mb-4">Le véhicule utilitaire léger polyvalent</p>
|
| 371 |
+
<a href="#" class="model-details inline-flex items-center text-blue-400 font-medium" data-model="daily">
|
| 372 |
En savoir plus <i class="fas fa-arrow-right ml-2"></i>
|
| 373 |
</a>
|
| 374 |
</div>
|
|
|
|
| 376 |
</div>
|
| 377 |
|
| 378 |
<div class="text-center mt-12">
|
| 379 |
+
<a href="#models" class="btn-primary px-8 py-4 rounded-full text-white font-bold inline-flex items-center">
|
| 380 |
Voir toute la gamme <i class="fas fa-chevron-down ml-2"></i>
|
| 381 |
</a>
|
| 382 |
</div>
|
|
|
|
| 384 |
</section>
|
| 385 |
|
| 386 |
<!-- Technology Section -->
|
| 387 |
+
<section id="technology" class="py-20 bg-gray-800">
|
| 388 |
<div class="container mx-auto px-6">
|
| 389 |
<div class="flex flex-col md:flex-row items-center">
|
| 390 |
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
|
|
|
|
| 420 |
<div class="md:w-1/2">
|
| 421 |
<div class="relative">
|
| 422 |
<img src="https://www.iveco.com/dam/jcr:98765432-1234-5678-9012-345678901234" alt="IVECO Technology" class="w-full rounded-xl">
|
| 423 |
+
<button id="video-btn" class="absolute inset-0 flex items-center justify-center">
|
| 424 |
+
<span 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">
|
| 425 |
<i class="fas fa-play text-2xl"></i>
|
| 426 |
+
</span>
|
| 427 |
+
</button>
|
| 428 |
</div>
|
| 429 |
</div>
|
| 430 |
</div>
|
|
|
|
| 515 |
</section>
|
| 516 |
|
| 517 |
<!-- CTA Section -->
|
| 518 |
+
<section id="contact" class="py-20 bg-blue-900">
|
| 519 |
<div class="container mx-auto px-6 text-center">
|
| 520 |
<h2 class="text-4xl font-bold mb-6">Prêt à révolutionner votre flotte ?</h2>
|
| 521 |
<p class="text-xl text-blue-200 mb-10 max-w-3xl mx-auto">
|
| 522 |
Contactez nos experts pour trouver la solution IVECO parfaitement adaptée à vos besoins.
|
| 523 |
</p>
|
| 524 |
<div class="flex flex-wrap justify-center gap-4">
|
| 525 |
+
<a href="#" id="quote-btn" class="btn-primary px-8 py-4 rounded-full text-white font-bold">
|
| 526 |
Demander un devis <i class="fas fa-file-alt ml-2"></i>
|
| 527 |
</a>
|
| 528 |
+
<a href="#" id="contact-btn" class="btn-outline px-8 py-4 rounded-full text-white font-bold">
|
| 529 |
Nous contacter <i class="fas fa-phone ml-2"></i>
|
| 530 |
</a>
|
| 531 |
</div>
|
|
|
|
| 546 |
<div>
|
| 547 |
<h3 class="text-xl font-bold mb-6 text-white">Gamme de véhicules</h3>
|
| 548 |
<ul class="space-y-3">
|
| 549 |
+
<li><a href="#models" class="text-gray-400 hover:text-white transition">Camions longue distance</a></li>
|
| 550 |
+
<li><a href="#models" class="text-gray-400 hover:text-white transition">Camions chantiers</a></li>
|
| 551 |
+
<li><a href="#models" class="text-gray-400 hover:text-white transition">Véhicules utilitaires</a></li>
|
| 552 |
+
<li><a href="#models" class="text-gray-400 hover:text-white transition">Bus et autocars</a></li>
|
| 553 |
+
<li><a href="#models" class="text-gray-400 hover:text-white transition">Véhicules spéciaux</a></li>
|
| 554 |
</ul>
|
| 555 |
</div>
|
| 556 |
|
| 557 |
<div>
|
| 558 |
<h3 class="text-xl font-bold mb-6 text-white">Services</h3>
|
| 559 |
<ul class="space-y-3">
|
| 560 |
+
<li><a href="#services" class="text-gray-400 hover:text-white transition">Entretien et réparation</a></li>
|
| 561 |
+
<li><a href="#services" class="text-gray-400 hover:text-white transition">Financement</a></li>
|
| 562 |
+
<li><a href="#services" class="text-gray-400 hover:text-white transition">Connectivité flotte</a></li>
|
| 563 |
+
<li><a href="#services" class="text-gray-400 hover:text-white transition">Formation conducteurs</a></li>
|
| 564 |
+
<li><a href="#services" class="text-gray-400 hover:text-white transition">Pièces détachées</a></li>
|
| 565 |
</ul>
|
| 566 |
</div>
|
| 567 |
|
|
|
|
| 579 |
</li>
|
| 580 |
</ul>
|
| 581 |
<div class="flex space-x-4 mt-6">
|
| 582 |
+
<a href="https://facebook.com" target="_blank" class="text-gray-400 hover:text-white text-xl">
|
| 583 |
<i class="fab fa-facebook-f"></i>
|
| 584 |
</a>
|
| 585 |
+
<a href="https://twitter.com" target="_blank" class="text-gray-400 hover:text-white text-xl">
|
| 586 |
<i class="fab fa-twitter"></i>
|
| 587 |
</a>
|
| 588 |
+
<a href="https://linkedin.com" target="_blank" class="text-gray-400 hover:text-white text-xl">
|
| 589 |
<i class="fab fa-linkedin-in"></i>
|
| 590 |
</a>
|
| 591 |
+
<a href="https://youtube.com" target="_blank" class="text-gray-400 hover:text-white text-xl">
|
| 592 |
<i class="fab fa-youtube"></i>
|
| 593 |
</a>
|
| 594 |
+
<a href="https://instagram.com" target="_blank" class="text-gray-400 hover:text-white text-xl">
|
| 595 |
<i class="fab fa-instagram"></i>
|
| 596 |
</a>
|
| 597 |
</div>
|
|
|
|
| 612 |
</div>
|
| 613 |
</footer>
|
| 614 |
|
| 615 |
+
<!-- Modals -->
|
| 616 |
+
<!-- Modal Configurateur -->
|
| 617 |
+
<div id="configurator-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
|
| 618 |
+
<div class="bg-gray-900 rounded-xl p-8 max-w-4xl w-full mx-4 relative">
|
| 619 |
+
<button id="close-configurator" class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl">
|
| 620 |
+
<i class="fas fa-times"></i>
|
| 621 |
+
</button>
|
| 622 |
+
<h3 class="text-3xl font-bold mb-6">Configurateur 3D</h3>
|
| 623 |
+
<div class="bg-gray-800 rounded-lg p-6 mb-6 h-96 flex items-center justify-center">
|
| 624 |
+
<p class="text-gray-400">Interface du configurateur 3D en cours de chargement...</p>
|
| 625 |
+
</div>
|
| 626 |
+
<div class="flex justify-end">
|
| 627 |
+
<button class="btn-primary px-6 py-3 rounded-full text-white font-bold">
|
| 628 |
+
Sauvegarder ma configuration <i class="fas fa-save ml-2"></i>
|
| 629 |
+
</button>
|
| 630 |
+
</div>
|
| 631 |
+
</div>
|
| 632 |
+
</div>
|
| 633 |
+
|
| 634 |
+
<!-- Modal Vidéo -->
|
| 635 |
+
<div id="video-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
|
| 636 |
+
<div class="bg-gray-900 rounded-xl p-8 max-w-4xl w-full mx-4 relative">
|
| 637 |
+
<button id="close-video" class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl">
|
| 638 |
+
<i class="fas fa-times"></i>
|
| 639 |
+
</button>
|
| 640 |
+
<h3 class="text-3xl font-bold mb-6">Technologies IVECO</h3>
|
| 641 |
+
<div class="bg-gray-800 rounded-lg p-6 mb-6 aspect-video flex items-center justify-center">
|
| 642 |
+
<p class="text-gray-400">Vidéo de démonstration des technologies IVECO</p>
|
| 643 |
+
</div>
|
| 644 |
+
</div>
|
| 645 |
+
</div>
|
| 646 |
+
|
| 647 |
+
<!-- Modal Détails Modèle -->
|
| 648 |
+
<div id="model-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
|
| 649 |
+
<div class="bg-gray-900 rounded-xl p-8 max-w-4xl w-full mx-4 relative">
|
| 650 |
+
<button id="close-model" class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl">
|
| 651 |
+
<i class="fas fa-times"></i>
|
| 652 |
+
</button>
|
| 653 |
+
<h3 id="model-title" class="text-3xl font-bold mb-6">Détails du modèle</h3>
|
| 654 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
| 655 |
+
<div>
|
| 656 |
+
<div class="bg-gray-800 rounded-lg p-6 mb-6 h-64 flex items-center justify-center">
|
| 657 |
+
<p id="model-image-placeholder" class="text-gray-400">Image du véhicule</p>
|
| 658 |
+
</div>
|
| 659 |
+
<div class="grid grid-cols-2 gap-4">
|
| 660 |
+
<div class="bg-gray-800 p-4 rounded-lg">
|
| 661 |
+
<div class="text-blue-400 text-xl mb-2">
|
| 662 |
+
<i class="fas fa-gas-pump"></i>
|
| 663 |
+
</div>
|
| 664 |
+
<h4 class="font-bold mb-1">Consommation</h4>
|
| 665 |
+
<p id="model-consumption" class="text-gray-400 text-sm">-- L/100km</p>
|
| 666 |
+
</div>
|
| 667 |
+
<div class="bg-gray-800 p-4 rounded-lg">
|
| 668 |
+
<div class="text-blue-400 text-xl mb-2">
|
| 669 |
+
<i class="fas fa-horse-head"></i>
|
| 670 |
+
</div>
|
| 671 |
+
<h4 class="font-bold mb-1">Puissance</h4>
|
| 672 |
+
<p id="model-power" class="text-gray-400 text-sm">-- CV</p>
|
| 673 |
+
</div>
|
| 674 |
+
</div>
|
| 675 |
+
</div>
|
| 676 |
+
<div>
|
| 677 |
+
<h4 class="text-xl font-bold mb-4">Caractéristiques</h4>
|
| 678 |
+
<ul id="model-features" class="space-y-3 text-gray-300 mb-6">
|
| 679 |
+
<!-- Les caractéristiques seront ajoutées dynamiquement -->
|
| 680 |
+
</ul>
|
| 681 |
+
<a href="#contact" class="btn-primary px-6 py-3 rounded-full text-white font-bold inline-block">
|
| 682 |
+
Demander un devis <i class="fas fa-file-alt ml-2"></i>
|
| 683 |
+
</a>
|
| 684 |
+
</div>
|
| 685 |
+
</div>
|
| 686 |
+
</div>
|
| 687 |
+
</div>
|
| 688 |
+
|
| 689 |
+
<!-- Modal Contact -->
|
| 690 |
+
<div id="contact-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
|
| 691 |
+
<div class="bg-gray-900 rounded-xl p-8 max-w-2xl w-full mx-4 relative">
|
| 692 |
+
<button id="close-contact" class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl">
|
| 693 |
+
<i class="fas fa-times"></i>
|
| 694 |
+
</button>
|
| 695 |
+
<h3 class="text-3xl font-bold mb-6">Contactez-nous</h3>
|
| 696 |
+
<form class="space-y-4">
|
| 697 |
+
<div>
|
| 698 |
+
<label for="name" class="block text-gray-300 mb-2">Nom complet</label>
|
| 699 |
+
<input type="text" id="name" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
|
| 700 |
+
</div>
|
| 701 |
+
<div>
|
| 702 |
+
<label for="email" class="block text-gray-300 mb-2">Email</label>
|
| 703 |
+
<input type="email" id="email" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
|
| 704 |
+
</div>
|
| 705 |
+
<div>
|
| 706 |
+
<label for="phone" class="block text-gray-300 mb-2">Téléphone</label>
|
| 707 |
+
<input type="tel" id="phone" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
|
| 708 |
+
</div>
|
| 709 |
+
<div>
|
| 710 |
+
<label for="message" class="block text-gray-300 mb-2">Message</label>
|
| 711 |
+
<textarea id="message" rows="4" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
|
| 712 |
+
</div>
|
| 713 |
+
<button type="submit" class="btn-primary px-6 py-3 rounded-full text-white font-bold w-full">
|
| 714 |
+
Envoyer <i class="fas fa-paper-plane ml-2"></i>
|
| 715 |
+
</button>
|
| 716 |
+
</form>
|
| 717 |
+
</div>
|
| 718 |
+
</div>
|
| 719 |
+
|
| 720 |
+
<!-- Modal Devis -->
|
| 721 |
+
<div id="quote-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
|
| 722 |
+
<div class="bg-gray-900 rounded-xl p-8 max-w-2xl w-full mx-4 relative">
|
| 723 |
+
<button id="close-quote" class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl">
|
| 724 |
+
<i class="fas fa-times"></i>
|
| 725 |
+
</button>
|
| 726 |
+
<h3 class="text-3xl font-bold mb-6">Demande de devis</h3>
|
| 727 |
+
<form class="space-y-4">
|
| 728 |
+
<div>
|
| 729 |
+
<label for="quote-name" class="block text-gray-300 mb-2">Nom complet</label>
|
| 730 |
+
<input type="text" id="quote-name" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
|
| 731 |
+
</div>
|
| 732 |
+
<div>
|
| 733 |
+
<label for="quote-email" class="block text-gray-300 mb-2">Email</label>
|
| 734 |
+
<input type="email" id="quote-email" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
|
| 735 |
+
</div>
|
| 736 |
+
<div>
|
| 737 |
+
<label for="quote-phone" class="block text-gray-300 mb-2">Téléphone</label>
|
| 738 |
+
<input type="tel" id="quote-phone" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
|
| 739 |
+
</div>
|
| 740 |
+
<div>
|
| 741 |
+
<label for="quote-model" class="block text-gray-300 mb-2">Modèle intéressé</label>
|
| 742 |
+
<select id="quote-model" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
|
| 743 |
+
<option value="">Sélectionnez un modèle</option>
|
| 744 |
+
<option value="s-way">IVECO S-Way</option>
|
| 745 |
+
<option value="t-way">IVECO T-Way</option>
|
| 746 |
+
<option value="daily">IVECO Daily</option>
|
| 747 |
+
</select>
|
| 748 |
+
</div>
|
| 749 |
+
<div>
|
| 750 |
+
<label for="quote-usage" class="block text-gray-300 mb-2">Usage prévu</label>
|
| 751 |
+
<textarea id="quote-usage" rows="3" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
|
| 752 |
+
</div>
|
| 753 |
+
<button type="submit" class="btn-primary px-6 py-3 rounded-full text-white font-bold w-full">
|
| 754 |
+
Demander un devis <i class="fas fa-file-alt ml-2"></i>
|
| 755 |
+
</button>
|
| 756 |
+
</form>
|
| 757 |
+
</div>
|
| 758 |
+
</div>
|
| 759 |
+
|
| 760 |
<script>
|
| 761 |
// Animation des particules
|
| 762 |
function createParticles() {
|
|
|
|
| 791 |
}
|
| 792 |
}
|
| 793 |
|
| 794 |
+
// Menu mobile
|
| 795 |
+
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
| 796 |
+
const mobileMenu = document.getElementById('mobile-menu');
|
| 797 |
+
|
| 798 |
+
mobileMenuButton.addEventListener('click', function() {
|
| 799 |
+
mobileMenu.classList.toggle('open');
|
| 800 |
+
});
|
| 801 |
+
|
| 802 |
+
// Fermer le menu mobile quand on clique sur un lien
|
| 803 |
+
document.querySelectorAll('#mobile-menu a').forEach(link => {
|
| 804 |
+
link.addEventListener('click', function() {
|
| 805 |
+
mobileMenu.classList.remove('open');
|
| 806 |
+
});
|
| 807 |
+
});
|
| 808 |
+
|
| 809 |
+
// Gestion des modals
|
| 810 |
+
const configuratorBtn = document.getElementById('configurator-btn');
|
| 811 |
+
const configuratorModal = document.getElementById('configurator-modal');
|
| 812 |
+
const closeConfigurator = document.getElementById('close-configurator');
|
| 813 |
+
|
| 814 |
+
const videoBtn = document.getElementById('video-btn');
|
| 815 |
+
const videoModal = document.getElementById('video-modal');
|
| 816 |
+
const closeVideo = document.getElementById('close-video');
|
| 817 |
+
|
| 818 |
+
const modelDetails = document.querySelectorAll('.model-details');
|
| 819 |
+
const modelModal = document.getElementById('model-modal');
|
| 820 |
+
const closeModel = document.getElementById('close-model');
|
| 821 |
+
|
| 822 |
+
const contactBtn = document.getElementById('contact-btn');
|
| 823 |
+
const contactModal = document.getElementById('contact-modal');
|
| 824 |
+
const closeContact = document.getElementById('close-contact');
|
| 825 |
+
|
| 826 |
+
const quoteBtn = document.getElementById('quote-btn');
|
| 827 |
+
const quoteModal = document.getElementById('quote-modal');
|
| 828 |
+
const closeQuote = document.getElementById('close-quote');
|
| 829 |
+
|
| 830 |
+
// Configurateur
|
| 831 |
+
configuratorBtn.addEventListener('click', function(e) {
|
| 832 |
+
e.preventDefault();
|
| 833 |
+
configuratorModal.classList.remove('hidden');
|
| 834 |
+
});
|
| 835 |
+
|
| 836 |
+
closeConfigurator.addEventListener('click', function() {
|
| 837 |
+
configuratorModal.classList.add('hidden');
|
| 838 |
+
});
|
| 839 |
+
|
| 840 |
+
// Vidéo
|
| 841 |
+
videoBtn.addEventListener('click', function(e) {
|
| 842 |
+
e.preventDefault();
|
| 843 |
+
videoModal.classList.remove('hidden');
|
| 844 |
+
});
|
| 845 |
|
| 846 |
+
closeVideo.addEventListener('click', function() {
|
| 847 |
+
videoModal.classList.add('hidden');
|
| 848 |
+
});
|
| 849 |
+
|
| 850 |
+
// Détails modèle
|
| 851 |
+
modelDetails.forEach(button => {
|
| 852 |
+
button.addEventListener('click', function(e) {
|
| 853 |
e.preventDefault();
|
| 854 |
+
const model = this.getAttribute('data-model');
|
| 855 |
+
|
| 856 |
+
// Mettre à jour le modal avec les infos du modèle
|
| 857 |
+
document.getElementById('model-title').textContent = this.parentElement.querySelector('h3').textContent;
|
| 858 |
|
| 859 |
+
// Simuler des données pour le modèle
|
| 860 |
+
let consumption, power, features;
|
| 861 |
+
|
| 862 |
+
switch(model) {
|
| 863 |
+
case 's-way':
|
| 864 |
+
consumption = '24.5 L/100km';
|
| 865 |
+
power = '570 CV';
|
| 866 |
+
features = [
|
| 867 |
+
'Moteur Cursor 13 Euro VI',
|
| 868 |
+
'Transmission automatique 12 rapports',
|
| 869 |
+
'Cabine haut de gamme avec literie',
|
| 870 |
+
'Système de navigation intégré',
|
| 871 |
+
'Assistance au maintien de voie'
|
| 872 |
+
];
|
| 873 |
+
break;
|
| 874 |
+
case 't-way':
|
| 875 |
+
consumption = '28.7 L/100km';
|
| 876 |
+
power = '520 CV';
|
| 877 |
+
features = [
|
| 878 |
+
'Moteur Cursor 11 Euro VI',
|
| 879 |
+
'Transmission automatique 16 rapports',
|
| 880 |
+
'Cabine robuste avec protection',
|
| 881 |
+
'Suspension renforcée',
|
| 882 |
+
'Différentiel verrouillable'
|
| 883 |
+
];
|
| 884 |
+
break;
|
| 885 |
+
case 'daily':
|
| 886 |
+
consumption = '9.2 L/100km';
|
| 887 |
+
power = '210 CV';
|
| 888 |
+
features = [
|
| 889 |
+
'Moteur F1C Euro VI',
|
| 890 |
+
'Transmission automatique 8 rapports',
|
| 891 |
+
'Cabine multifonction',
|
| 892 |
+
'Châssis modulable',
|
| 893 |
+
'Options électriques disponibles'
|
| 894 |
+
];
|
| 895 |
+
break;
|
| 896 |
+
}
|
| 897 |
+
|
| 898 |
+
document.getElementById('model-consumption').textContent = consumption;
|
| 899 |
+
document.getElementById('model-power').textContent = power;
|
| 900 |
+
|
| 901 |
+
const featuresList = document.getElementById('model-features');
|
| 902 |
+
featuresList.innerHTML = '';
|
| 903 |
+
|
| 904 |
+
features.forEach(feature => {
|
| 905 |
+
const li = document.createElement('li');
|
| 906 |
+
li.className = 'flex items-start';
|
| 907 |
+
li.innerHTML = `<i class="fas fa-check text-blue-400 mt-1 mr-2"></i> ${feature}`;
|
| 908 |
+
featuresList.appendChild(li);
|
| 909 |
});
|
| 910 |
+
|
| 911 |
+
modelModal.classList.remove('hidden');
|
| 912 |
});
|
| 913 |
});
|
| 914 |
|
| 915 |
+
closeModel.addEventListener('click', function() {
|
| 916 |
+
modelModal.classList.add('hidden');
|
| 917 |
+
});
|
| 918 |
+
|
| 919 |
+
// Contact
|
| 920 |
+
contactBtn.addEventListener('click', function(e) {
|
| 921 |
+
e.preventDefault();
|
| 922 |
+
contactModal.classList.remove('hidden');
|
| 923 |
+
});
|
| 924 |
+
|
| 925 |
+
closeContact.addEventListener('click', function() {
|
| 926 |
+
contactModal.classList.add('hidden');
|
| 927 |
+
});
|
| 928 |
+
|
| 929 |
+
// Devis
|
| 930 |
+
quoteBtn.addEventListener('click', function(e) {
|
| 931 |
+
e.preventDefault();
|
| 932 |
+
quoteModal.classList.remove('hidden');
|
| 933 |
+
});
|
| 934 |
+
|
| 935 |
+
closeQuote.addEventListener('click', function() {
|
| 936 |
+
quoteModal.classList.add('hidden');
|
| 937 |
+
});
|
| 938 |
+
|
| 939 |
+
// Fermer les modals en cliquant à l'extérieur
|
| 940 |
+
window.addEventListener('click', function(e) {
|
| 941 |
+
if (e.target === configuratorModal) {
|
| 942 |
+
configuratorModal.classList.add('hidden');
|
| 943 |
+
}
|
| 944 |
+
if (e.target === videoModal) {
|
| 945 |
+
videoModal.classList.add('hidden');
|
| 946 |
+
}
|
| 947 |
+
if (e.target === modelModal) {
|
| 948 |
+
modelModal.classList.add('hidden');
|
| 949 |
+
}
|
| 950 |
+
if (e.target === contactModal) {
|
| 951 |
+
contactModal.classList.add('hidden');
|
| 952 |
+
}
|
| 953 |
+
if (e.target === quoteModal) {
|
| 954 |
+
quoteModal.classList.add('hidden');
|
| 955 |
+
}
|
| 956 |
+
});
|
| 957 |
+
|
| 958 |
// Animation au défilement
|
| 959 |
const animateOnScroll = () => {
|
| 960 |
+
const elements = document.querySelectorAll('.feature-card, .stats-item, [class*="group"]');
|
| 961 |
|
| 962 |
elements.forEach(element => {
|
| 963 |
const elementPosition = element.getBoundingClientRect().top;
|
|
|
|
| 969 |
});
|
| 970 |
};
|
| 971 |
|
| 972 |
+
// Gestion des formulaires
|
| 973 |
+
document.querySelectorAll('form').forEach(form => {
|
| 974 |
+
form.addEventListener('submit', function(e) {
|
| 975 |
+
e.preventDefault();
|
| 976 |
+
alert('Merci pour votre demande ! Un conseiller IVECO vous contactera rapidement.');
|
| 977 |
+
this.reset();
|
| 978 |
+
|
| 979 |
+
// Fermer le modal après soumission
|
| 980 |
+
if (this.closest('.modal')) {
|
| 981 |
+
this.closest('.modal').classList.add('hidden');
|
| 982 |
+
}
|
| 983 |
+
});
|
| 984 |
+
});
|
| 985 |
+
|
| 986 |
+
// Lancer les animations au chargement
|
| 987 |
+
window.addEventListener('load', function() {
|
| 988 |
+
createParticles();
|
| 989 |
+
animateOnScroll();
|
| 990 |
+
});
|
| 991 |
+
|
| 992 |
window.addEventListener('scroll', animateOnScroll);
|
|
|
|
| 993 |
</script>
|
| 994 |
<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>
|
| 995 |
</html>
|
prompts.txt
CHANGED
|
@@ -7,4 +7,5 @@ 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
|
|
|
|
|
|
| 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
|
| 11 |
+
AUCUN BOUTON FONCTIONNE
|