Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Calculateur de Recharge Électrique</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%); | |
| } | |
| .result-card { | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .result-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| height: 8px; | |
| border-radius: 4px; | |
| background: #e5e7eb; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #3b82f6; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| input[type="range"]::-webkit-slider-thumb:hover { | |
| transform: scale(1.2); | |
| background: #2563eb; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-50"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- Header --> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-3">Tableau et temps de recharge voiture électrique </h1> | |
| <p class="text-lg text-gray-600">Convertissez les ampères en kilowatts et estimez le temps de recharge de votre véhicule électrique</p> | |
| </div> | |
| <!-- Calculator Card --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-12"> | |
| <div class="gradient-bg p-6 text-white"> | |
| <h2 class="text-2xl font-semibold flex items-center"> | |
| <i class="fas fa-bolt mr-3"></i> Paramètres de Recharge | |
| </h2> | |
| </div> | |
| <div class="p-6 md:p-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Left Column --> | |
| <div> | |
| <!-- Voltage Input --> | |
| <div class="mb-6"> | |
| <label for="voltage" class="block text-sm font-medium text-gray-700 mb-2"> | |
| <i class="fas fa-plug mr-2 text-blue-500"></i> Tension (V) | |
| </label> | |
| <select id="voltage" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="230">Monophasé 230V</option> | |
| <option value="400">Triphasé 400V</option> | |
| <option value="custom">Personnalisé</option> | |
| </select> | |
| <div id="custom-voltage-container" class="mt-2 hidden"> | |
| <input type="number" id="custom-voltage" placeholder="Entrez la tension en volts" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <!-- Current Input --> | |
| <div class="mb-6"> | |
| <label for="current" class="block text-sm font-medium text-gray-700 mb-2"> | |
| <i class="fas fa-bolt mr-2 text-yellow-500"></i> Intensité (A) | |
| </label> | |
| <input type="range" id="current" min="6" max="63" value="16" class="w-full mb-2"> | |
| <div class="flex justify-between"> | |
| <span>6A</span> | |
| <span id="current-value" class="font-bold">16A</span> | |
| <span>63A</span> | |
| </div> | |
| </div> | |
| <!-- Battery Capacity --> | |
| <div class="mb-6"> | |
| <label for="capacity" class="block text-sm font-medium text-gray-700 mb-2"> | |
| <i class="fas fa-car-battery mr-2 text-green-500"></i> Capacité de la batterie (kWh) | |
| </label> | |
| <input type="number" id="capacity" value="50" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <!-- Price per kWh --> | |
| <div class="mb-6"> | |
| <label for="price" class="block text-sm font-medium text-gray-700 mb-2"> | |
| <i class="fas fa-euro-sign mr-2 text-indigo-500"></i> Prix du kWh (€) | |
| </label> | |
| <input type="number" id="price" value="0.20" step="0.01" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div> | |
| <!-- Charging Efficiency --> | |
| <div class="mb-6"> | |
| <label for="efficiency" class="block text-sm font-medium text-gray-700 mb-2"> | |
| <i class="fas fa-tachometer-alt mr-2 text-purple-500"></i> Efficacité de charge (%) | |
| </label> | |
| <input type="range" id="efficiency" min="80" max="100" value="90" class="w-full mb-2"> | |
| <div class="flex justify-between"> | |
| <span>80%</span> | |
| <span id="efficiency-value" class="font-bold">90%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| <!-- Current Battery Level --> | |
| <div class="mb-6"> | |
| <label for="battery-level" class="block text-sm font-medium text-gray-700 mb-2"> | |
| <i class="fas fa-battery-three-quarters mr-2 text-red-500"></i> Niveau actuel de la batterie (%) | |
| </label> | |
| <input type="range" id="battery-level" min="0" max="100" value="20" class="w-full mb-2"> | |
| <div class="flex justify-between"> | |
| <span>0%</span> | |
| <span id="battery-level-value" class="font-bold">20%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| <!-- Target Battery Level --> | |
| <div class="mb-6"> | |
| <label for="target-level" class="block text-sm font-medium text-gray-700 mb-2"> | |
| <i class="fas fa-battery-full mr-2 text-green-500"></i> Niveau cible de la batterie (%) | |
| </label> | |
| <input type="range" id="target-level" min="0" max="100" value="80" class="w-full mb-2"> | |
| <div class="flex justify-between"> | |
| <span>0%</span> | |
| <span id="target-level-value" class="font-bold">80%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Calculate Button --> | |
| <div class="mt-6 text-center"> | |
| <button id="calculate-btn" class="gradient-bg text-white px-8 py-3 rounded-lg font-semibold hover:opacity-90 transition duration-300 transform hover:scale-105 shadow-lg"> | |
| <i class="fas fa-calculator mr-2"></i> Calculer | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results Section --> | |
| <div id="results" class="hidden"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center"> | |
| <i class="fas fa-chart-bar mr-2 text-blue-500"></i> Résultats | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Power Result --> | |
| <div class="result-card bg-white p-6 rounded-xl border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-bolt text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Puissance de charge</h3> | |
| </div> | |
| <div class="text-3xl font-bold text-blue-600 mb-2" id="power-result">0 kW</div> | |
| <p class="text-gray-500 text-sm">Calculé à partir de la tension et de l'intensité</p> | |
| </div> | |
| <!-- Energy Needed --> | |
| <div class="result-card bg-white p-6 rounded-xl border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-battery-three-quarters text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Énergie nécessaire</h3> | |
| </div> | |
| <div class="text-3xl font-bold text-green-600 mb-2" id="energy-needed">0 kWh</div> | |
| <p class="text-gray-500 text-sm">Énergie à fournir pour atteindre le niveau cible</p> | |
| </div> | |
| <!-- Cost --> | |
| <div class="result-card bg-white p-6 rounded-xl border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-euro-sign text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Coût estimé</h3> | |
| </div> | |
| <div class="text-3xl font-bold text-indigo-600 mb-2" id="cost-result">0 €</div> | |
| <p class="text-gray-500 text-sm">Coût total pour la recharge</p> | |
| </div> | |
| <!-- Charging Time --> | |
| <div class="result-card bg-white p-6 rounded-xl border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-clock text-purple-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Temps de recharge</h3> | |
| </div> | |
| <div class="text-3xl font-bold text-purple-600 mb-2" id="charging-time">0 h 0 min</div> | |
| <p class="text-gray-500 text-sm">Temps estimé pour une recharge complète</p> | |
| </div> | |
| </div> | |
| <!-- Detailed Results --> | |
| <div class="mt-8 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="gradient-bg p-4 text-white"> | |
| <h3 class="text-lg font-semibold flex items-center"> | |
| <i class="fas fa-info-circle mr-2"></i> Détails du Calcul | |
| </h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">Paramètres utilisés :</h4> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li><span class="font-medium">Tension :</span> <span id="detail-voltage">230</span> V</li> | |
| <li><span class="font-medium">Intensité :</span> <span id="detail-current">16</span> A</li> | |
| <li><span class="font-medium">Capacité batterie :</span> <span id="detail-capacity">50</span> kWh</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">Autres informations :</h4> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li><span class="font-medium">Niveau actuel :</span> <span id="detail-current-level">20</span>%</li> | |
| <li><span class="font-medium">Niveau cible :</span> <span id="detail-target-level">80</span>%</li> | |
| <li><span class="font-medium">Efficacité :</span> <span id="detail-efficiency">90</span>%</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-blue-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-blue-800 mb-2 flex items-center"> | |
| <i class="fas fa-lightbulb mr-2"></i> Formule utilisée | |
| </h4> | |
| <p class="text-sm text-gray-700"> | |
| Puissance (kW) = (Tension (V) × Intensité (A)) / 1000<br> | |
| Énergie nécessaire (kWh) = (Capacité × (Niveau cible - Niveau actuel)) / 100<br> | |
| Temps (heures) = Énergie nécessaire / (Puissance × Efficacité) | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Update slider values | |
| const currentSlider = document.getElementById('current'); | |
| const currentValue = document.getElementById('current-value'); | |
| const efficiencySlider = document.getElementById('efficiency'); | |
| const efficiencyValue = document.getElementById('efficiency-value'); | |
| const batteryLevelSlider = document.getElementById('battery-level'); | |
| const batteryLevelValue = document.getElementById('battery-level-value'); | |
| const targetLevelSlider = document.getElementById('target-level'); | |
| const targetLevelValue = document.getElementById('target-level-value'); | |
| const voltageSelect = document.getElementById('voltage'); | |
| const customVoltageContainer = document.getElementById('custom-voltage-container'); | |
| const customVoltage = document.getElementById('custom-voltage'); | |
| const calculateBtn = document.getElementById('calculate-btn'); | |
| const resultsSection = document.getElementById('results'); | |
| // Update slider displays | |
| currentSlider.addEventListener('input', function() { | |
| currentValue.textContent = this.value + 'A'; | |
| }); | |
| efficiencySlider.addEventListener('input', function() { | |
| efficiencyValue.textContent = this.value + '%'; | |
| }); | |
| batteryLevelSlider.addEventListener('input', function() { | |
| batteryLevelValue.textContent = this.value + '%'; | |
| // Ensure target level is always higher than current level | |
| if (parseInt(targetLevelSlider.value) <= parseInt(this.value)) { | |
| targetLevelSlider.value = parseInt(this.value) + 1; | |
| targetLevelValue.textContent = targetLevelSlider.value + '%'; | |
| } | |
| }); | |
| targetLevelSlider.addEventListener('input', function() { | |
| targetLevelValue.textContent = this.value + '%'; | |
| // Ensure target level is always higher than current level | |
| if (parseInt(this.value) <= parseInt(batteryLevelSlider.value)) { | |
| this.value = parseInt(batteryLevelSlider.value) + 1; | |
| targetLevelValue.textContent = this.value + '%'; | |
| } | |
| }); | |
| // Handle custom voltage | |
| voltageSelect.addEventListener('change', function() { | |
| if (this.value === 'custom') { | |
| customVoltageContainer.classList.remove('hidden'); | |
| } else { | |
| customVoltageContainer.classList.add('hidden'); | |
| } | |
| }); | |
| // Calculate function | |
| calculateBtn.addEventListener('click', function() { | |
| // Get values | |
| let voltage; | |
| if (voltageSelect.value === 'custom') { | |
| voltage = parseFloat(customVoltage.value) || 230; | |
| } else { | |
| voltage = parseFloat(voltageSelect.value); | |
| } | |
| const current = parseFloat(currentSlider.value); | |
| const capacity = parseFloat(document.getElementById('capacity').value); | |
| const efficiency = parseFloat(efficiencySlider.value) / 100; | |
| const currentLevel = parseFloat(batteryLevelSlider.value) / 100; | |
| const targetLevel = parseFloat(targetLevelSlider.value) / 100; | |
| // Validate inputs | |
| if (voltage <= 0 || current <= 0 || capacity <= 0) { | |
| alert('Veuillez entrer des valeurs valides (supérieures à 0)'); | |
| return; | |
| } | |
| if (targetLevel <= currentLevel) { | |
| alert('Le niveau cible doit être supérieur au niveau actuel'); | |
| return; | |
| } | |
| // Calculations | |
| const powerKW = (voltage * current) / 1000; // P = U*I / 1000 for kW | |
| const energyNeeded = capacity * (targetLevel - currentLevel); | |
| const chargingTimeHours = energyNeeded / (powerKW * efficiency); | |
| const pricePerKWh = parseFloat(document.getElementById('price').value) || 0; | |
| const totalCost = energyNeeded * pricePerKWh; | |
| // Convert hours to hours and minutes | |
| const hours = Math.floor(chargingTimeHours); | |
| const minutes = Math.round((chargingTimeHours - hours) * 60); | |
| // Update results | |
| document.getElementById('power-result').textContent = powerKW.toFixed(2) + ' kW'; | |
| document.getElementById('energy-needed').textContent = energyNeeded.toFixed(2) + ' kWh'; | |
| document.getElementById('charging-time').textContent = hours + ' h ' + minutes + ' min'; | |
| document.getElementById('cost-result').textContent = totalCost.toFixed(2) + ' €'; | |
| // Update details | |
| document.getElementById('detail-voltage').textContent = voltage; | |
| document.getElementById('detail-current').textContent = current; | |
| document.getElementById('detail-capacity').textContent = capacity; | |
| document.getElementById('detail-current-level').textContent = (currentLevel * 100); | |
| document.getElementById('detail-target-level').textContent = (targetLevel * 100); | |
| document.getElementById('detail-efficiency').textContent = (efficiency * 100); | |
| // Show results | |
| resultsSection.classList.remove('hidden'); | |
| }); | |
| }); | |
| </script> | |
| <div class="text-center text-gray-500 text-sm py-6"> | |
| Fabriqué par William BAZIN - Sit-web.fr | |
| </div> | |
| </body> | |
| </html> | |