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 - Vues Réelles</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> | |
| @keyframes roadMove { | |
| from { background-position: 0 0; } | |
| to { background-position: 0 100px; } | |
| } | |
| .road { | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| #4a5568, | |
| #4a5568 20px, | |
| #2d3748 20px, | |
| #2d3748 40px | |
| ); | |
| animation: roadMove 0.5s linear infinite; | |
| } | |
| .dashboard-glow { | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.7); | |
| } | |
| .pedal:active { | |
| transform: translateY(5px); | |
| } | |
| .mirror-view { | |
| transform: perspective(300px) rotateY(20deg); | |
| } | |
| .mirror-view.right { | |
| transform: perspective(300px) rotateY(-20deg); | |
| } | |
| .truck-body { | |
| background: linear-gradient(to bottom, #1a202c, #2d3748); | |
| } | |
| .view-switch-btn.active { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .steering-wheel { | |
| transition: transform 0.2s ease; | |
| } | |
| .tachometer-needle { | |
| transform-origin: bottom center; | |
| transition: transform 0.3s ease; | |
| } | |
| .windshield { | |
| background: rgba(0, 100, 200, 0.1); | |
| backdrop-filter: blur(2px); | |
| } | |
| .real-view { | |
| background-size: cover; | |
| background-position: center; | |
| transition: background-image 1s ease; | |
| } | |
| .mirror-image { | |
| transform: scaleX(-1); | |
| opacity: 0.8; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-4xl md:text-5xl font-bold bg-gradient-to-r from-yellow-500 to-red-600 bg-clip-text text-transparent mb-2"> | |
| Simulateur de Camion Pro | |
| </h1> | |
| <p class="text-lg text-gray-400">Expérience de conduite réaliste avec vues multiples</p> | |
| </header> | |
| <!-- View Selector --> | |
| <div class="flex flex-wrap gap-2 mb-4 justify-center"> | |
| <button class="view-switch-btn active px-4 py-2 rounded-lg bg-gray-800 hover:bg-gray-700" data-view="cabin"> | |
| <i class="fas fa-truck-cab mr-2"></i> Vue Cabine | |
| </button> | |
| <button class="view-switch-btn px-4 py-2 rounded-lg bg-gray-800 hover:bg-gray-700" data-view="exterior"> | |
| <i class="fas fa-truck mr-2"></i> Vue Extérieure | |
| </button> | |
| <button class="view-switch-btn px-4 py-2 rounded-lg bg-gray-800 hover:bg-gray-700" data-view="dashboard"> | |
| <i class="fas fa-tachometer-alt mr-2"></i> Tableau de bord | |
| </button> | |
| <button class="view-switch-btn px-4 py-2 rounded-lg bg-gray-800 hover:bg-gray-700" data-view="top"> | |
| <i class="fas fa-map mr-2"></i> Vue du dessus | |
| </button> | |
| </div> | |
| <!-- Main Simulation Area --> | |
| <div class="relative bg-gray-800 rounded-xl overflow-hidden mb-6" style="height: 500px;"> | |
| <!-- Cabin View (Default) --> | |
| <div id="cabin-view" class="h-full flex flex-col"> | |
| <!-- Dashboard --> | |
| <div class="dashboard-glow bg-gray-900 p-4 rounded-t-lg"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="text-center"> | |
| <div class="text-2xl font-mono font-bold text-yellow-500 speedometer">0</div> | |
| <div class="text-xs text-gray-400">km/h</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-xl font-mono font-bold rpm-meter">0</div> | |
| <div class="text-xs text-gray-400">RPM</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-lg font-mono font-bold gear-display">N</div> | |
| <div class="text-xs text-gray-400">Vitesse</div> | |
| </div> | |
| </div> | |
| <div class="h-2 bg-gray-800 rounded-full mb-2"> | |
| <div class="h-full bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 rounded-full rpm-bar" style="width: 0%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-400"> | |
| <div>Fuel: <span class="text-white">85%</span></div> | |
| <div>Distance: <span class="text-white">0 km</span></div> | |
| <div>Time: <span class="text-white">12:45</span></div> | |
| </div> | |
| </div> | |
| <!-- Road View --> | |
| <div class="real-view flex-1 relative overflow-hidden" id="road-view" style="background-image: url('https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"> | |
| <!-- Mirrors --> | |
| <div class="absolute left-0 top-1/4 w-24 h-16 bg-black bg-opacity-50 border border-gray-700 rounded mirror-view overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1509316785289-025f5b846b35?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="mirror-image w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 h-4 bg-yellow-500"></div> | |
| </div> | |
| <div class="absolute right-0 top-1/4 w-24 h-16 bg-black bg-opacity-50 border border-gray-700 rounded mirror-view right overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1509316785289-025f5b846b35?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 h-4 bg-yellow-500"></div> | |
| </div> | |
| <!-- Windshield --> | |
| <div class="windshield absolute inset-0 border-t-4 border-gray-600 border-opacity-50"></div> | |
| <!-- Steering wheel --> | |
| <div class="absolute left-1/2 bottom-20 transform -translate-x-1/2 steering-wheel"> | |
| <div class="w-24 h-24 rounded-full border-4 border-yellow-600 flex items-center justify-center"> | |
| <div class="w-4 h-4 rounded-full bg-yellow-500"></div> | |
| </div> | |
| </div> | |
| <!-- Pedals --> | |
| <div class="absolute left-1/4 bottom-20 flex gap-8"> | |
| <div class="pedal w-12 h-16 bg-gray-800 rounded-t-lg border-t-4 border-red-600 flex items-end justify-center pb-2 cursor-pointer"> | |
| <i class="fas fa-arrow-down text-gray-400"></i> | |
| </div> | |
| <div class="pedal w-12 h-16 bg-gray-800 rounded-t-lg border-t-4 border-green-600 flex items-end justify-center pb-2 cursor-pointer"> | |
| <i class="fas fa-arrow-up text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Truck Seat --> | |
| <div class="truck-seat h-16 rounded-b-lg flex items-center justify-between px-4 bg-gray-700"> | |
| <div class="flex gap-2"> | |
| <button class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700"> | |
| <i class="fas fa-lightbulb text-yellow-400"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700"> | |
| <i class="fas fa-bolt text-blue-400"></i> | |
| </button> | |
| </div> | |
| <div class="text-xs text-gray-400"> | |
| <span class="text-yellow-500">Scania R500</span> • 500 CV | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Exterior View --> | |
| <div id="exterior-view" class="hidden h-full relative"> | |
| <div class="real-view absolute inset-0" id="exterior-scene" style="background-image: url('https://images.unsplash.com/photo-1509316785289-025f5b846b35?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"> | |
| <!-- Truck --> | |
| <div class="absolute bottom-1/4 left-1/2 transform -translate-x-1/2"> | |
| <img src="https://images.unsplash.com/photo-1601362840469-37e0e9d2392f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="w-64 h-auto"> | |
| </div> | |
| <!-- Road --> | |
| <div class="absolute bottom-0 left-0 right-0 h-1/4 road"></div> | |
| </div> | |
| </div> | |
| <!-- Dashboard View --> | |
| <div id="dashboard-view" class="hidden h-full bg-gray-900 p-8 flex flex-col items-center justify-center"> | |
| <div class="w-full max-w-md bg-gray-800 rounded-xl p-6"> | |
| <!-- Speedometer --> | |
| <div class="relative w-48 h-48 mx-auto mb-8"> | |
| <div class="absolute inset-0 rounded-full border-4 border-gray-700"></div> | |
| <div class="absolute inset-4 rounded-full border-4 border-gray-600"></div> | |
| <!-- Speed markings --> | |
| <div class="absolute top-0 left-1/2 transform -translate-x-1/2 text-xs text-gray-400">0</div> | |
| <div class="absolute top-1/4 right-1/4 transform translate-x-2 text-xs text-gray-400">30</div> | |
| <div class="absolute top-1/2 right-0 transform translate-y-1 text-xs text-gray-400">60</div> | |
| <div class="absolute bottom-1/4 right-1/4 transform translate-x-2 text-xs text-gray-400">90</div> | |
| <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 text-xs text-gray-400">120</div> | |
| <div class="absolute bottom-1/4 left-1/4 transform -translate-x-2 text-xs text-gray-400">150</div> | |
| <!-- Needle --> | |
| <div class="tachometer-needle absolute bottom-1/2 left-1/2 w-1 h-20 bg-red-500 transform -translate-x-1/2 rotate-0 origin-bottom" style="transform: rotate(-90deg);"></div> | |
| <!-- Center --> | |
| <div class="absolute top-1/2 left-1/2 w-8 h-8 bg-gray-700 rounded-full transform -translate-x-1/2 -translate-y-1/2"></div> | |
| <!-- Speed display --> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center"> | |
| <div class="text-3xl font-bold text-yellow-500 speedometer">0</div> | |
| <div class="text-xs text-gray-400">km/h</div> | |
| </div> | |
| </div> | |
| <!-- Gauges --> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div class="bg-gray-700 p-2 rounded text-center"> | |
| <div class="text-sm text-gray-400">RPM</div> | |
| <div class="text-xl font-mono rpm-meter">0</div> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded text-center"> | |
| <div class="text-sm text-gray-400">Vitesse</div> | |
| <div class="text-xl font-mono gear-display">N</div> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded text-center"> | |
| <div class="text-sm text-gray-400">Fuel</div> | |
| <div class="text-xl font-mono">85%</div> | |
| </div> | |
| </div> | |
| <!-- Indicators --> | |
| <div class="mt-6 grid grid-cols-4 gap-2"> | |
| <div class="p-2 rounded bg-gray-700 text-center"> | |
| <i class="fas fa-lightbulb text-yellow-400"></i> | |
| </div> | |
| <div class="p-2 rounded bg-gray-700 text-center"> | |
| <i class="fas fa-bolt text-blue-400"></i> | |
| </div> | |
| <div class="p-2 rounded bg-gray-700 text-center"> | |
| <i class="fas fa-oil-can text-red-400"></i> | |
| </div> | |
| <div class="p-2 rounded bg-gray-700 text-center"> | |
| <i class="fas fa-temperature-high text-orange-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Top View --> | |
| <div id="top-view" class="hidden h-full bg-gray-900 p-8"> | |
| <div class="real-view relative w-full h-full" id="map-view" style="background-image: url('https://maps.googleapis.com/maps/api/staticmap?center=48.8566,2.3522&zoom=12&size=800x500&maptype=roadmap&key=YOUR_API_KEY')"> | |
| <!-- Truck indicator --> | |
| <div class="absolute top-1/2 left-1/2 w-8 h-8 bg-red-500 rounded-full transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center"> | |
| <i class="fas fa-truck text-white text-xs"></i> | |
| </div> | |
| <!-- Position indicator --> | |
| <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-gray-800 p-2 rounded-lg text-center"> | |
| <div class="text-sm text-gray-400">Position</div> | |
| <div class="text-lg font-bold">0 km</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Controls --> | |
| <div class="bg-gray-800 rounded-xl p-6 mb-8"> | |
| <h2 class="text-xl font-bold mb-4 border-b border-gray-700 pb-2">Contrôles</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="bg-gray-700 p-4 rounded-lg text-center"> | |
| <div class="text-2xl mb-2"><i class="fas fa-arrow-up"></i></div> | |
| <div class="text-sm">Accélérer</div> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg text-center"> | |
| <div class="text-2xl mb-2"><i class="fas fa-arrow-down"></i></div> | |
| <div class="text-sm">Freiner</div> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg text-center"> | |
| <div class="text-2xl mb-2"><i class="fas fa-arrows-alt-h"></i></div> | |
| <div class="text-sm">Direction</div> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg text-center"> | |
| <div class="text-2xl mb-2"><i class="fas fa-exchange-alt"></i></div> | |
| <div class="text-sm">Changer vitesse</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats --> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <h2 class="text-xl font-bold mb-4 border-b border-gray-700 pb-2">Statistiques</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-400">Distance</h3> | |
| <p class="text-2xl font-bold">0 <span class="text-sm font-normal text-gray-400">km</span></p> | |
| </div> | |
| <div class="p-2 bg-gray-800 rounded-full"> | |
| <i class="fas fa-road text-yellow-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-400">Temps</h3> | |
| <p class="text-2xl font-bold">00:00 <span class="text-sm font-normal text-gray-400">hh:mm</span></p> | |
| </div> | |
| <div class="p-2 bg-gray-800 rounded-full"> | |
| <i class="fas fa-clock text-blue-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-400">Consommation</h3> | |
| <p class="text-2xl font-bold">0 <span class="text-sm font-normal text-gray-400">L/100km</span></p> | |
| </div> | |
| <div class="p-2 bg-gray-800 rounded-full"> | |
| <i class="fas fa-gas-pump text-red-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Elements | |
| const viewButtons = document.querySelectorAll('.view-switch-btn'); | |
| const views = { | |
| cabin: document.getElementById('cabin-view'), | |
| exterior: document.getElementById('exterior-view'), | |
| dashboard: document.getElementById('dashboard-view'), | |
| top: document.getElementById('top-view') | |
| }; | |
| const speedometer = document.querySelectorAll('.speedometer'); | |
| const rpmMeter = document.querySelectorAll('.rpm-meter'); | |
| const rpmBar = document.querySelector('.rpm-bar'); | |
| const gearDisplay = document.querySelectorAll('.gear-display'); | |
| const tachometerNeedle = document.querySelector('.tachometer-needle'); | |
| const steeringWheel = document.querySelector('.steering-wheel'); | |
| const roadView = document.getElementById('road-view'); | |
| const exteriorScene = document.getElementById('exterior-scene'); | |
| const mapView = document.getElementById('map-view'); | |
| // Landscape images (replace with your own) | |
| const landscapes = [ | |
| 'https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', | |
| 'https://images.unsplash.com/photo-1509316785289-025f5b846b35?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', | |
| 'https://images.unsplash.com/photo-1516731415730-72748ec87094?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', | |
| 'https://images.unsplash.com/photo-1518098268026-4e89f1a2cd8e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' | |
| ]; | |
| // Truck images | |
| const trucks = [ | |
| 'https://images.unsplash.com/photo-1601362840469-37e0e9d2392f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', | |
| 'https://images.unsplash.com/photo-1605559421013-3120af7fe89a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', | |
| 'https://images.unsplash.com/photo-1605559421013-3120af7fe89a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' | |
| ]; | |
| // Simulation state | |
| let currentSpeed = 0; | |
| let currentRPM = 800; | |
| let currentGear = 'N'; | |
| let isAccelerating = false; | |
| let isBraking = false; | |
| let steeringAngle = 0; | |
| let distance = 0; | |
| let currentLandscape = 0; | |
| let currentTruck = 0; | |
| // Switch views | |
| viewButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const view = this.getAttribute('data-view'); | |
| // Hide all views | |
| Object.values(views).forEach(v => v.classList.add('hidden')); | |
| // Show selected view | |
| views[view].classList.remove('hidden'); | |
| // Update active button | |
| viewButtons.forEach(btn => btn.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Keyboard controls | |
| document.addEventListener('keydown', function(e) { | |
| switch(e.key) { | |
| case 'ArrowUp': | |
| isAccelerating = true; | |
| break; | |
| case 'ArrowDown': | |
| isBraking = true; | |
| break; | |
| case 'ArrowLeft': | |
| steeringAngle = -30; | |
| steeringWheel.style.transform = `rotate(${steeringAngle}deg)`; | |
| break; | |
| case 'ArrowRight': | |
| steeringAngle = 30; | |
| steeringWheel.style.transform = `rotate(${steeringAngle}deg)`; | |
| break; | |
| case ' ': | |
| shiftGearUp(); | |
| break; | |
| case 'Shift': | |
| shiftGearDown(); | |
| break; | |
| case 'l': | |
| // Change landscape | |
| currentLandscape = (currentLandscape + 1) % landscapes.length; | |
| roadView.style.backgroundImage = `url('${landscapes[currentLandscape]}')`; | |
| break; | |
| case 't': | |
| // Change truck | |
| currentTruck = (currentTruck + 1) % trucks.length; | |
| exteriorScene.style.backgroundImage = `url('${trucks[currentTruck]}')`; | |
| break; | |
| } | |
| }); | |
| document.addEventListener('keyup', function(e) { | |
| switch(e.key) { | |
| case 'ArrowUp': | |
| isAccelerating = false; | |
| break; | |
| case 'ArrowDown': | |
| isBraking = false; | |
| break; | |
| case 'ArrowLeft': | |
| case 'ArrowRight': | |
| steeringAngle = 0; | |
| steeringWheel.style.transform = `rotate(${steeringAngle}deg)`; | |
| break; | |
| } | |
| }); | |
| // Pedal mouse controls | |
| const pedals = document.querySelectorAll('.pedal'); | |
| pedals.forEach(pedal => { | |
| pedal.addEventListener('mousedown', function() { | |
| if (this.querySelector('.fa-arrow-up')) { | |
| isAccelerating = true; | |
| } else { | |
| isBraking = true; | |
| } | |
| }); | |
| pedal.addEventListener('mouseup', function() { | |
| if (this.querySelector('.fa-arrow-up')) { | |
| isAccelerating = false; | |
| } else { | |
| isBraking = false; | |
| } | |
| }); | |
| pedal.addEventListener('mouseleave', function() { | |
| if (this.querySelector('.fa-arrow-up')) { | |
| isAccelerating = false; | |
| } else { | |
| isBraking = false; | |
| } | |
| }); | |
| }); | |
| // Gear shifting | |
| function shiftGearUp() { | |
| if (currentGear === 'N') { | |
| currentGear = '1'; | |
| } else if (currentGear !== '12') { | |
| currentGear = (parseInt(currentGear) + 1).toString(); | |
| currentRPM = Math.max(800, currentRPM - 500); | |
| } | |
| updateDashboard(); | |
| } | |
| function shiftGearDown() { | |
| if (currentGear !== 'N' && currentGear !== '1') { | |
| currentGear = (parseInt(currentGear) - 1).toString(); | |
| currentRPM = Math.min(3000, currentRPM + 500); | |
| } | |
| updateDashboard(); | |
| } | |
| // Update dashboard | |
| function updateDashboard() { | |
| // Update all speedometers | |
| speedometer.forEach(el => el.textContent = Math.round(currentSpeed)); | |
| // Update all RPM meters | |
| rpmMeter.forEach(el => el.textContent = currentRPM); | |
| // Update RPM bar | |
| rpmBar.style.width = (currentRPM / 30) + '%'; | |
| // Update all gear displays | |
| gearDisplay.forEach(el => el.textContent = currentGear); | |
| // Update tachometer needle (-90deg to 90deg for 0-3000 RPM) | |
| const needleRotation = -90 + (currentRPM / 3000 * 180); | |
| tachometerNeedle.style.transform = `rotate(${needleRotation}deg)`; | |
| } | |
| // Simulation loop | |
| function simulate() { | |
| // Acceleration | |
| if (isAccelerating && currentSpeed < 150) { | |
| currentSpeed += 0.5; | |
| currentRPM = Math.min(3000, currentRPM + 5); | |
| distance += 0.001; | |
| // Auto shift up at high RPM | |
| if (currentRPM > 2800 && currentGear !== '12') { | |
| shiftGearUp(); | |
| } | |
| } | |
| // Braking | |
| if (isBraking && currentSpeed > 0) { | |
| currentSpeed = Math.max(0, currentSpeed - 1); | |
| currentRPM = Math.max(800, currentRPM - 10); | |
| // Auto shift down at low speed | |
| if (currentSpeed < 10 && currentGear !== 'N') { | |
| currentGear = 'N'; | |
| updateDashboard(); | |
| } | |
| } | |
| // Engine braking when not accelerating | |
| if (!isAccelerating && currentSpeed > 0) { | |
| currentSpeed = Math.max(0, currentSpeed - 0.1); | |
| currentRPM = Math.max(800, currentRPM - 2); | |
| } | |
| // Keep RPM at idle when stopped | |
| if (currentSpeed <= 0) { | |
| currentSpeed = 0; | |
| currentRPM = 800; | |
| } | |
| // Change landscape after certain distance | |
| if (distance > 5) { | |
| distance = 0; | |
| currentLandscape = (currentLandscape + 1) % landscapes.length; | |
| roadView.style.backgroundImage = `url('${landscapes[currentLandscape]}')`; | |
| } | |
| updateDashboard(); | |
| requestAnimationFrame(simulate); | |
| } | |
| // Start simulation | |
| simulate(); | |
| }); | |
| </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/simulateur-de-camion" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |