Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Simulateur de Camion Réaliste</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/ammo.js@1.0.0/builds/ammo.wasm.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/gsap.min.js"></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=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| overflow-x: hidden; | |
| } | |
| #simulation-container { | |
| position: relative; | |
| width: 100%; | |
| height: 70vh; | |
| background: #222; | |
| } | |
| #renderCanvas { | |
| width: 100%; | |
| height: 100%; | |
| display: block; | |
| } | |
| .dashboard { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background: rgba(0, 0, 0, 0.7); | |
| color: white; | |
| padding: 15px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .speedometer { | |
| font-size: 2rem; | |
| font-weight: bold; | |
| text-align: center; | |
| } | |
| .controls { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .control-btn { | |
| background: rgba(255, 255, 255, 0.2); | |
| border: none; | |
| color: white; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .control-btn:hover { | |
| background: rgba(255, 255, 255, 0.4); | |
| } | |
| .truck-selector { | |
| position: absolute; | |
| top: 20px; | |
| left: 20px; | |
| z-index: 10; | |
| background: rgba(0, 0, 0, 0.7); | |
| padding: 10px; | |
| border-radius: 8px; | |
| color: white; | |
| } | |
| .truck-option { | |
| display: flex; | |
| align-items: center; | |
| padding: 8px; | |
| margin: 5px 0; | |
| cursor: pointer; | |
| border-radius: 4px; | |
| transition: background 0.3s; | |
| } | |
| .truck-option:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .truck-option img { | |
| width: 50px; | |
| height: 30px; | |
| object-fit: cover; | |
| margin-right: 10px; | |
| border-radius: 3px; | |
| } | |
| .loading-screen { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: #111; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 100; | |
| color: white; | |
| } | |
| .progress-bar { | |
| width: 300px; | |
| height: 10px; | |
| background: #333; | |
| margin-top: 20px; | |
| border-radius: 5px; | |
| overflow: hidden; | |
| } | |
| .progress { | |
| height: 100%; | |
| background: #4CAF50; | |
| width: 0%; | |
| transition: width 0.3s; | |
| } | |
| .truck-info { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| background: rgba(0, 0, 0, 0.7); | |
| padding: 10px; | |
| border-radius: 8px; | |
| color: white; | |
| max-width: 250px; | |
| } | |
| .gear-indicator { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| color: #4CAF50; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bg-blue-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-3"> | |
| <i class="fas fa-truck-moving text-3xl"></i> | |
| <h1 class="text-2xl font-bold">SimuCamion Pro</h1> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="px-4 py-2 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition"> | |
| <i class="fas fa-cog mr-2"></i>Paramètres | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="loading-screen" id="loadingScreen"> | |
| <h2 class="text-2xl mb-4">Chargement du simulateur...</h2> | |
| <p class="text-gray-400">Chargement des modèles 3D et de la physique</p> | |
| <div class="progress-bar"> | |
| <div class="progress" id="progressBar"></div> | |
| </div> | |
| </div> | |
| <div id="simulation-container"> | |
| <canvas id="renderCanvas"></canvas> | |
| <div class="truck-selector"> | |
| <h3 class="text-lg font-semibold mb-2">Sélectionnez votre camion</h3> | |
| <div class="truck-option" data-truck="scania"> | |
| <img src="https://i.imgur.com/JYw7X9A.jpg" alt="Scania"> | |
| <span>Scania R500</span> | |
| </div> | |
| <div class="truck-option" data-truck="volvo"> | |
| <img src="https://i.imgur.com/VvY7QZc.jpg" alt="Volvo"> | |
| <span>Volvo FH16</span> | |
| </div> | |
| <div class="truck-option" data-truck="mercedes"> | |
| <img src="https://i.imgur.com/5XwW3fF.jpg" alt="Mercedes"> | |
| <span>Mercedes Actros</span> | |
| </div> | |
| </div> | |
| <div class="truck-info hidden" id="truckInfo"> | |
| <h3 class="font-semibold" id="truckName">Scania R500</h3> | |
| <p class="text-sm text-gray-300">Moteur: <span id="engineInfo">500 CV</span></p> | |
| <p class="text-sm text-gray-300">Transmission: <span id="transmissionInfo">12 vitesses</span></p> | |
| </div> | |
| <div class="dashboard"> | |
| <div class="speedometer"> | |
| <div id="speed">0</div> | |
| <div class="text-sm">km/h</div> | |
| </div> | |
| <div class="gear-indicator" id="gear">N</div> | |
| <div class="controls"> | |
| <button class="control-btn" id="handbrake" title="Frein à main"> | |
| <i class="fas fa-car-crash"></i> | |
| </button> | |
| <button class="control-btn" id="lights" title="Feux"> | |
| <i class="fas fa-lightbulb"></i> | |
| </button> | |
| <button class="control-btn" id="engine" title="Moteur"> | |
| <i class="fas fa-power-off"></i> | |
| </button> | |
| <button class="control-btn" id="horn" title="Klaxon"> | |
| <i class="fas fa-bullhorn"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <h3 class="font-bold text-lg mb-3">Commandes</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"><span class="bg-gray-200 px-2 py-1 rounded mr-2">Z</span> Avancer</li> | |
| <li class="flex items-center"><span class="bg-gray-200 px-2 py-1 rounded mr-2">S</span> Reculer</li> | |
| <li class="flex items-center"><span class="bg-gray-200 px-2 py-1 rounded mr-2">Q</span> Gauche</li> | |
| <li class="flex items-center"><span class="bg-gray-200 px-2 py-1 rounded mr-2">D</span> Droite</li> | |
| <li class="flex items-center"><span class="bg-gray-200 px-2 py-1 rounded mr-2">Espace</span> Frein</li> | |
| <li class="flex items-center"><span class="bg-gray-200 px-2 py-1 rounded mr-2">Shift</span> Accélérer</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <h3 class="font-bold text-lg mb-3">Statistiques</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Distance parcourue</span> | |
| <span id="distance">0 km</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Carburant</span> | |
| <span id="fuel">100%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>État du camion</span> | |
| <span id="health">100%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <h3 class="font-bold text-lg mb-3">Mission</h3> | |
| <div id="mission" class="mb-4"> | |
| <p class="text-gray-600">Aucune mission active</p> | |
| </div> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> Nouvelle mission | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simulation state | |
| const state = { | |
| speed: 0, | |
| gear: 'N', | |
| engineOn: false, | |
| lightsOn: false, | |
| handbrakeOn: true, | |
| selectedTruck: 'scania', | |
| fuel: 100, | |
| distance: 0, | |
| health: 100 | |
| }; | |
| // DOM elements | |
| const speedElement = document.getElementById('speed'); | |
| const gearElement = document.getElementById('gear'); | |
| const engineBtn = document.getElementById('engine'); | |
| const lightsBtn = document.getElementById('lights'); | |
| const handbrakeBtn = document.getElementById('handbrake'); | |
| const hornBtn = document.getElementById('horn'); | |
| const loadingScreen = document.getElementById('loadingScreen'); | |
| const progressBar = document.getElementById('progressBar'); | |
| const truckInfo = document.getElementById('truckInfo'); | |
| const truckName = document.getElementById('truckName'); | |
| const engineInfo = document.getElementById('engineInfo'); | |
| const transmissionInfo = document.getElementById('transmissionInfo'); | |
| const distanceElement = document.getElementById('distance'); | |
| const fuelElement = document.getElementById('fuel'); | |
| const healthElement = document.getElementById('health'); | |
| // Truck specifications | |
| const truckSpecs = { | |
| scania: { | |
| name: 'Scania R500', | |
| engine: '500 CV', | |
| transmission: '12 vitesses', | |
| maxSpeed: 140, | |
| fuelConsumption: 0.15 | |
| }, | |
| volvo: { | |
| name: 'Volvo FH16', | |
| engine: '750 CV', | |
| transmission: '14 vitesses', | |
| maxSpeed: 150, | |
| fuelConsumption: 0.18 | |
| }, | |
| mercedes: { | |
| name: 'Mercedes Actros', | |
| engine: '450 CV', | |
| transmission: '12 vitesses', | |
| maxSpeed: 130, | |
| fuelConsumption: 0.12 | |
| } | |
| }; | |
| // Event listeners | |
| document.querySelectorAll('.truck-option').forEach(option => { | |
| option.addEventListener('click', function() { | |
| const truckType = this.getAttribute('data-truck'); | |
| selectTruck(truckType); | |
| }); | |
| }); | |
| engineBtn.addEventListener('click', toggleEngine); | |
| lightsBtn.addEventListener('click', toggleLights); | |
| handbrakeBtn.addEventListener('click', toggleHandbrake); | |
| hornBtn.addEventListener('click', soundHorn); | |
| // Keyboard controls | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key.toLowerCase() === 'e') toggleEngine(); | |
| if (e.key.toLowerCase() === 'l') toggleLights(); | |
| if (e.key === ' ') toggleHandbrake(); | |
| if (e.key === 'h') soundHorn(); | |
| }); | |
| // Functions | |
| function selectTruck(truckType) { | |
| state.selectedTruck = truckType; | |
| const specs = truckSpecs[truckType]; | |
| truckName.textContent = specs.name; | |
| engineInfo.textContent = specs.engine; | |
| transmissionInfo.textContent = specs.transmission; | |
| truckInfo.classList.remove('hidden'); | |
| // In a real implementation, this would load the 3D model | |
| console.log(`Chargement du modèle ${truckType}...`); | |
| } | |
| function toggleEngine() { | |
| state.engineOn = !state.engineOn; | |
| engineBtn.style.color = state.engineOn ? '#4CAF50' : '#F44336'; | |
| if (state.engineOn) { | |
| state.gear = '1'; | |
| gearElement.textContent = state.gear; | |
| console.log('Moteur démarré'); | |
| } else { | |
| state.gear = 'N'; | |
| gearElement.textContent = state.gear; | |
| console.log('Moteur arrêté'); | |
| } | |
| } | |
| function toggleLights() { | |
| state.lightsOn = !state.lightsOn; | |
| lightsBtn.style.color = state.lightsOn ? '#FFC107' : 'white'; | |
| console.log(`Feux ${state.lightsOn ? 'allumés' : 'éteints'}`); | |
| } | |
| function toggleHandbrake() { | |
| state.handbrakeOn = !state.handbrakeOn; | |
| handbrakeBtn.style.color = state.handbrakeOn ? '#F44336' : '#4CAF50'; | |
| console.log(`Frein à main ${state.handbrakeOn ? 'activé' : 'désactivé'}`); | |
| } | |
| function soundHorn() { | |
| console.log('Klaxon!'); | |
| // In a real implementation, play horn sound | |
| } | |
| function updateDashboard() { | |
| speedElement.textContent = Math.round(state.speed); | |
| gearElement.textContent = state.gear; | |
| distanceElement.textContent = `${state.distance.toFixed(1)} km`; | |
| fuelElement.textContent = `${state.fuel.toFixed(0)}%`; | |
| healthElement.textContent = `${state.health.toFixed(0)}%`; | |
| } | |
| // Simulate driving physics | |
| function simulatePhysics() { | |
| if (state.engineOn && !state.handbrakeOn) { | |
| // Accelerate | |
| if (state.speed < truckSpecs[state.selectedTruck].maxSpeed) { | |
| state.speed += 0.1; | |
| } | |
| // Consume fuel | |
| state.fuel -= truckSpecs[state.selectedTruck].fuelConsumption * 0.01; | |
| if (state.fuel < 0) state.fuel = 0; | |
| // Increase distance | |
| state.distance += state.speed / 36000; | |
| // Auto gear shifting | |
| if (state.speed > 0 && state.gear === 'N') state.gear = '1'; | |
| if (state.speed > 20 && state.gear === '1') state.gear = '2'; | |
| if (state.speed > 40 && state.gear === '2') state.gear = '3'; | |
| if (state.speed > 60 && state.gear === '3') state.gear = '4'; | |
| if (state.speed > 80 && state.gear === '4') state.gear = '5'; | |
| } else { | |
| // Decelerate | |
| if (state.speed > 0) { | |
| state.speed -= 0.5; | |
| if (state.speed < 0) state.speed = 0; | |
| } | |
| } | |
| updateDashboard(); | |
| requestAnimationFrame(simulatePhysics); | |
| } | |
| // Simulate loading process | |
| function simulateLoading() { | |
| let progress = 0; | |
| const interval = setInterval(() => { | |
| progress += Math.random() * 10; | |
| if (progress > 100) progress = 100; | |
| progressBar.style.width = `${progress}%`; | |
| if (progress === 100) { | |
| clearInterval(interval); | |
| setTimeout(() => { | |
| loadingScreen.style.opacity = '0'; | |
| setTimeout(() => { | |
| loadingScreen.style.display = 'none'; | |
| // Initialize simulation after loading | |
| selectTruck('scania'); | |
| simulatePhysics(); | |
| }, 500); | |
| }, 500); | |
| } | |
| }, 200); | |
| } | |
| // Start loading simulation | |
| simulateLoading(); | |
| // In a real implementation, this would initialize Three.js and Ammo.js | |
| // for 3D rendering and physics simulation | |
| console.log('Initialisation du moteur 3D...'); | |
| // This is a placeholder for the actual Three.js implementation | |
| function initThreeJS() { | |
| // This would be replaced with actual Three.js code | |
| const canvas = document.getElementById('renderCanvas'); | |
| // Scene setup would go here | |
| // const scene = new THREE.Scene(); | |
| // const camera = new THREE.PerspectiveCamera(...); | |
| // const renderer = new THREE.WebGLRenderer({ canvas }); | |
| // Truck model loading would go here | |
| // Load GLTF/OBJ models of trucks | |
| // Physics setup would go here | |
| // Initialize Ammo.js physics world | |
| // Animation loop would go here | |
| // function animate() { | |
| // requestAnimationFrame(animate); | |
| // renderer.render(scene, camera); | |
| // } | |
| // animate(); | |
| } | |
| // For a complete implementation, we would need to: | |
| // 1. Load actual 3D models of trucks (GLTF/OBJ format) | |
| // 2. Set up a physics world with Ammo.js | |
| // 3. Implement proper vehicle physics | |
| // 4. Create environments/terrains | |
| // 5. Add lighting and post-processing effects | |
| // 6. Implement sound effects | |
| </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/camion-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |