| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Euro Truck Simulator: Réunion Edition</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); |
| |
| body { |
| font-family: 'Montserrat', sans-serif; |
| background-color: #1a1a2e; |
| color: #e6e6e6; |
| overflow-x: hidden; |
| } |
| |
| .truck-dashboard { |
| background: linear-gradient(135deg, #16213e 0%, #0f3460 100%); |
| border-radius: 15px; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); |
| } |
| |
| .speedometer { |
| background: rgba(0, 0, 0, 0.7); |
| border: 3px solid #e94560; |
| border-radius: 50%; |
| box-shadow: 0 0 20px #e94560; |
| } |
| |
| .needle { |
| transform-origin: bottom center; |
| transition: transform 0.5s ease-out; |
| } |
| |
| .road { |
| background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><rect width="200" height="200" fill="%232a2a3a"/><path d="M100 0 L100 200" stroke="%23e94560" stroke-width="4" stroke-dasharray="10,10"/></svg>'); |
| animation: roadMove 2s linear infinite; |
| } |
| |
| @keyframes roadMove { |
| 0% { background-position: 0 0; } |
| 100% { background-position: 0 200px; } |
| } |
| |
| .truck-shadow { |
| filter: drop-shadow(0 0 15px rgba(233, 69, 96, 0.7)); |
| } |
| |
| .map-container { |
| background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><rect width="400" height="400" fill="%231f1f2e"/><path d="M200,50 L250,100 L300,80 L350,150 L300,200 L250,180 L200,250 L150,200 L100,250 L50,200 L100,150 L150,180 Z" fill="%2335355e" stroke="%23e94560" stroke-width="2"/></svg>'); |
| background-size: cover; |
| border-radius: 10px; |
| } |
| |
| .mission-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(233, 69, 96, 0.3); |
| } |
| |
| .piton-shadow { |
| filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3)); |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| |
| <nav class="bg-gray-900 text-white py-4 px-6 shadow-lg"> |
| <div class="container mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-truck text-2xl text-red-500"></i> |
| <h1 class="text-2xl font-bold">Truck Simulator <span class="text-red-500">Réunion</span></h1> |
| </div> |
| <div class="hidden md:flex space-x-6"> |
| <a href="#" class="hover:text-red-400 transition">Accueil</a> |
| <a href="#" class="hover:text-red-400 transition">Missions</a> |
| <a href="#" class="hover:text-red-400 transition">Garage</a> |
| <a href="#" class="hover:text-red-400 transition">Carte</a> |
| <a href="#" class="hover:text-red-400 transition">Statistiques</a> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-md transition"> |
| <i class="fas fa-sign-in-alt mr-2"></i>Connexion |
| </button> |
| <button class="md:hidden text-2xl"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <main class="container mx-auto py-8 px-4"> |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| |
| <div class="truck-dashboard p-6 lg:col-span-2"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold">Camion: <span class="text-red-500">Scania R500</span></h2> |
| <div class="flex space-x-2"> |
| <span class="bg-gray-800 px-3 py-1 rounded-full text-sm">€ 42,750</span> |
| <span class="bg-gray-800 px-3 py-1 rounded-full text-sm">Niveau 12</span> |
| </div> |
| </div> |
| |
| |
| <div class="relative h-64 mb-8 flex justify-center items-center"> |
| <div class="absolute inset-0 road opacity-20 rounded-lg"></div> |
| <img src="https://cdn-icons-png.flaticon.com/512/2583/2583344.png" |
| alt="Truck" |
| class="relative z-10 h-48 truck-shadow"> |
| <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-black to-transparent"></div> |
| </div> |
| |
| |
| <div class="grid grid-cols-3 gap-4"> |
| <div class="bg-gray-800 p-4 rounded-lg text-center"> |
| <div class="text-red-500 text-2xl mb-2"> |
| <i class="fas fa-gas-pump"></i> |
| </div> |
| <div class="text-sm">Carburant</div> |
| <div class="font-bold">87%</div> |
| </div> |
| <div class="bg-gray-800 p-4 rounded-lg text-center"> |
| <div class="text-red-500 text-2xl mb-2"> |
| <i class="fas fa-cog"></i> |
| </div> |
| <div class="text-sm">État</div> |
| <div class="font-bold">94%</div> |
| </div> |
| <div class="bg-gray-800 p-4 rounded-lg text-center"> |
| <div class="text-red-500 text-2xl mb-2"> |
| <i class="fas fa-road"></i> |
| </div> |
| <div class="text-sm">Kilométrage</div> |
| <div class="font-bold">12,487 km</div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-8 flex justify-center"> |
| <div class="relative speedometer w-48 h-48 flex items-center justify-center"> |
| <div class="absolute w-full h-full rounded-full border-8 border-transparent" |
| style="background: conic-gradient(from 0deg, #e94560 0%, #e94560 70%, #4a4a6a 70%, #4a4a6a 100%);"></div> |
| <div class="absolute w-40 h-40 rounded-full bg-gray-900 flex items-center justify-center"> |
| <div class="text-center"> |
| <div class="text-3xl font-bold" id="speed">0</div> |
| <div class="text-sm">km/h</div> |
| </div> |
| </div> |
| <div class="needle absolute w-1 h-20 bg-red-500 bottom-24" style="transform: rotate(-90deg);"></div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="space-y-6"> |
| |
| <div class="truck-dashboard p-6"> |
| <h2 class="text-xl font-bold mb-4">Mission en cours</h2> |
| <div class="bg-gray-800 p-4 rounded-lg"> |
| <div class="flex justify-between items-start mb-2"> |
| <div> |
| <h3 class="font-bold">Livraison de canne à sucre</h3> |
| <p class="text-sm text-gray-400">Usine du Gol → Distillerie de Saint-Pierre</p> |
| </div> |
| <span class="bg-red-600 text-xs px-2 py-1 rounded-full">+ €1,240</span> |
| </div> |
| <div class="w-full bg-gray-700 h-2 rounded-full mt-2"> |
| <div class="bg-red-500 h-2 rounded-full" style="width: 45%;"></div> |
| </div> |
| <div class="flex justify-between text-xs mt-1"> |
| <span>45% complété</span> |
| <span>87 km restants</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="truck-dashboard p-6"> |
| <h2 class="text-xl font-bold mb-4">Carte de la Réunion</h2> |
| <div class="map-container h-64 relative"> |
| <div class="absolute inset-0 bg-black bg-opacity-30 rounded-lg flex items-center justify-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Reunion_Island_relief_location_map.jpg/800px-Reunion_Island_relief_location_map.jpg" |
| alt="Carte de la Réunion" |
| class="max-h-full max-w-full rounded-lg opacity-70"> |
| </div> |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> |
| <div class="relative"> |
| <img src="https://cdn-icons-png.flaticon.com/512/2583/2583319.png" |
| alt="Position du camion" |
| class="h-10 w-10 piton-shadow"> |
| <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-red-600 text-white text-xs px-1 rounded-full"> |
| Vous |
| </div> |
| </div> |
| </div> |
| <div class="absolute bottom-4 left-4 bg-black bg-opacity-50 text-white text-xs p-2 rounded"> |
| <i class="fas fa-map-marker-alt text-red-500 mr-1"></i> Route du Littoral |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="truck-dashboard p-6"> |
| <h2 class="text-xl font-bold mb-4">Missions disponibles</h2> |
| <div class="space-y-3"> |
| <div class="mission-card bg-gray-800 p-4 rounded-lg transition cursor-pointer hover:bg-gray-700"> |
| <div class="flex justify-between"> |
| <div> |
| <h3 class="font-bold">Produits locaux</h3> |
| <p class="text-sm text-gray-400">Saint-Denis → Saint-Pierre</p> |
| </div> |
| <span class="bg-green-600 text-xs px-2 py-1 rounded-full">+ €980</span> |
| </div> |
| </div> |
| <div class="mission-card bg-gray-800 p-4 rounded-lg transition cursor-pointer hover:bg-gray-700"> |
| <div class="flex justify-between"> |
| <div> |
| <h3 class="font-bold">Matériaux de construction</h3> |
| <p class="text-sm text-gray-400">Le Port → Cilaos</p> |
| </div> |
| <span class="bg-green-600 text-xs px-2 py-1 rounded-full">+ €1,520</span> |
| </div> |
| </div> |
| <div class="mission-card bg-gray-800 p-4 rounded-lg transition cursor-pointer hover:bg-gray-700"> |
| <div class="flex justify-between"> |
| <div> |
| <h3 class="font-bold">Marchandises diverses</h3> |
| <p class="text-sm text-gray-400">Saint-Benoît → Saint-Paul</p> |
| </div> |
| <span class="bg-green-600 text-xs px-2 py-1 rounded-full">+ €1,150</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-16"> |
| <h2 class="text-3xl font-bold text-center mb-8">Découvrez les routes de la Réunion</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg"> |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://www.reunion.fr/wp-content/uploads/2020/03/route-reunion-1.jpg');"></div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Route du Littoral</h3> |
| <p class="text-gray-400">Parcourez la célèbre route côtière avec ses vues spectaculaires sur l'océan Indien.</p> |
| </div> |
| </div> |
| <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg"> |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://www.reunion.fr/wp-content/uploads/2020/03/route-reunion-2.jpg');"></div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Route des Tamarins</h3> |
| <p class="text-gray-400">L'autoroute moderne qui traverse l'île avec des paysages à couper le souffle.</p> |
| </div> |
| </div> |
| <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg"> |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://www.reunion.fr/wp-content/uploads/2020/03/route-reunion-3.jpg');"></div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Route des Cirques</h3> |
| <p class="text-gray-400">Défiez les routes sinueuses des cirques avec des dénivelés impressionnants.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="bg-gray-900 text-white py-8 mt-16"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-xl font-bold mb-4">Truck Simulator Réunion</h3> |
| <p class="text-gray-400">Découvrez les routes spectaculaires de l'île de la Réunion au volant de votre camion.</p> |
| </div> |
| <div> |
| <h4 class="font-bold mb-4">Navigation</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Missions</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Garage</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Carte</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-bold mb-4">Support</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Confidentialité</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-bold mb-4">Réseaux sociaux</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white text-2xl transition"><i class="fab fa-facebook"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white text-2xl transition"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white text-2xl transition"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white text-2xl transition"><i class="fab fa-youtube"></i></a> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm"> |
| <p>© 2023 Truck Simulator Réunion. Tous droits réservés.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| let speed = 0; |
| const speedElement = document.getElementById('speed'); |
| const needle = document.querySelector('.needle'); |
| |
| function updateSpeedometer() { |
| if (speed < 80) { |
| speed += 1; |
| speedElement.textContent = speed; |
| |
| |
| const rotation = -90 + (speed / 80) * 180; |
| needle.style.transform = `rotate(${rotation}deg)`; |
| |
| setTimeout(updateSpeedometer, 50); |
| } |
| } |
| |
| |
| window.addEventListener('load', () => { |
| setTimeout(updateSpeedometer, 1000); |
| }); |
| |
| |
| const missionCards = document.querySelectorAll('.mission-card'); |
| missionCards.forEach(card => { |
| card.addEventListener('mouseenter', () => { |
| card.classList.add('transform'); |
| card.classList.add('shadow-lg'); |
| }); |
| card.addEventListener('mouseleave', () => { |
| card.classList.remove('transform'); |
| card.classList.remove('shadow-lg'); |
| }); |
| }); |
| </script> |
| <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/scania" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
