Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EV Charging Station</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 pulse { | |
| 0% { opacity: 0.6; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.6; } | |
| } | |
| .charging-pulse { | |
| animation: pulse 1.5s infinite; | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease-in-out; | |
| } | |
| .knob { | |
| transition: transform 0.2s ease; | |
| } | |
| .knob:active { | |
| transform: scale(0.95); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen flex items-center justify-center p-4"> | |
| <div class="max-w-md w-full bg-gray-800 rounded-3xl overflow-hidden shadow-2xl"> | |
| <!-- Display Screen --> | |
| <div class="bg-black p-6 rounded-t-3xl border-b-4 border-gray-700"> | |
| <div class="bg-gray-900 rounded-xl p-4 h-64 flex flex-col"> | |
| <!-- Status Bar --> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bolt text-yellow-400 mr-2"></i> | |
| <span class="font-mono">EV-PRO 2.0</span> | |
| </div> | |
| <div class="text-sm font-mono"> | |
| <span id="current-time">14:30</span> | |
| </div> | |
| </div> | |
| <!-- Main Display --> | |
| <div class="flex-1 flex flex-col justify-center items-center"> | |
| <div id="charging-status" class="text-2xl font-bold mb-2">READY TO CHARGE</div> | |
| <div class="text-5xl font-bold mb-4" id="current-amperage">16A</div> | |
| <div class="w-full bg-gray-700 h-4 rounded-full mb-4"> | |
| <div id="charge-progress" class="progress-bar bg-green-500 h-4 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 w-full"> | |
| <div class="bg-gray-800 p-3 rounded-lg"> | |
| <div class="text-xs text-gray-400">VOLTAGE</div> | |
| <div class="text-xl font-mono" id="voltage-display">230V</div> | |
| </div> | |
| <div class="bg-gray-800 p-3 rounded-lg"> | |
| <div class="text-xs text-gray-400">POWER</div> | |
| <div class="text-xl font-mono" id="power-display">3.68kW</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Controls --> | |
| <div class="p-6"> | |
| <!-- Amperage Control --> | |
| <div class="mb-8"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-300">Amperage</span> | |
| <span class="font-mono text-lg" id="selected-amperage">16A</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <button id="decrease-amp" class="knob bg-gray-700 hover:bg-gray-600 w-12 h-12 rounded-full flex items-center justify-center mr-2"> | |
| <i class="fas fa-minus"></i> | |
| </button> | |
| <input type="range" id="amp-range" min="6" max="32" value="16" step="1" class="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> | |
| <button id="increase-amp" class="knob bg-gray-700 hover:bg-gray-600 w-12 h-12 rounded-full flex items-center justify-center ml-2"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> | |
| <span>6A</span> | |
| <span>32A</span> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <button id="start-charge" class="bg-green-600 hover:bg-green-700 py-3 px-4 rounded-xl font-bold flex items-center justify-center"> | |
| <i class="fas fa-play mr-2"></i> START | |
| </button> | |
| <button id="stop-charge" class="bg-red-600 hover:bg-red-700 py-3 px-4 rounded-xl font-bold flex items-center justify-center"> | |
| <i class="fas fa-stop mr-2"></i> STOP | |
| </button> | |
| </div> | |
| <!-- Additional Info --> | |
| <div class="mt-6 text-center text-sm text-gray-400"> | |
| <div class="flex justify-center space-x-4 mb-2"> | |
| <div> | |
| <i class="fas fa-clock mr-1"></i> | |
| <span id="time-remaining">--:--</span> | |
| </div> | |
| <div> | |
| <i class="fas fa-battery-three-quarters mr-1"></i> | |
| <span id="battery-percent">0%</span> | |
| </div> | |
| </div> | |
| <div id="cost-display" class="text-gray-300">Cost: $0.00</div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Update time | |
| function updateTime() { | |
| const now = new Date(); | |
| const hours = now.getHours().toString().padStart(2, '0'); | |
| const minutes = now.getMinutes().toString().padStart(2, '0'); | |
| document.getElementById('current-time').textContent = `${hours}:${minutes}`; | |
| } | |
| setInterval(updateTime, 60000); | |
| updateTime(); | |
| // Amperage control | |
| const ampRange = document.getElementById('amp-range'); | |
| const selectedAmp = document.getElementById('selected-amperage'); | |
| const currentAmp = document.getElementById('current-amperage'); | |
| const powerDisplay = document.getElementById('power-display'); | |
| const decreaseBtn = document.getElementById('decrease-amp'); | |
| const increaseBtn = document.getElementById('increase-amp'); | |
| function updateAmperage() { | |
| const ampValue = parseInt(ampRange.value); | |
| selectedAmp.textContent = `${ampValue}A`; | |
| currentAmp.textContent = `${ampValue}A`; | |
| // Calculate power (P = V * I) | |
| const voltage = 230; // Standard voltage | |
| const power = (voltage * ampValue / 1000).toFixed(2); | |
| powerDisplay.textContent = `${power}kW`; | |
| } | |
| ampRange.addEventListener('input', updateAmperage); | |
| decreaseBtn.addEventListener('click', () => { | |
| ampRange.value = Math.max(6, parseInt(ampRange.value) - 1); | |
| updateAmperage(); | |
| }); | |
| increaseBtn.addEventListener('click', () => { | |
| ampRange.value = Math.min(32, parseInt(ampRange.value) + 1); | |
| updateAmperage(); | |
| }); | |
| // Charging simulation | |
| const startBtn = document.getElementById('start-charge'); | |
| const stopBtn = document.getElementById('stop-charge'); | |
| const chargeStatus = document.getElementById('charging-status'); | |
| const chargeProgress = document.getElementById('charge-progress'); | |
| const timeRemaining = document.getElementById('time-remaining'); | |
| const batteryPercent = document.getElementById('battery-percent'); | |
| const costDisplay = document.getElementById('cost-display'); | |
| let chargingInterval; | |
| let currentCharge = 0; | |
| let isCharging = false; | |
| const batteryCapacity = 75; // kWh (typical EV battery) | |
| const costPerKwh = 0.15; // $ per kWh | |
| function startCharging() { | |
| if (isCharging) return; | |
| isCharging = true; | |
| chargeStatus.textContent = "CHARGING"; | |
| chargeStatus.classList.add('text-green-500', 'charging-pulse'); | |
| chargeStatus.classList.remove('text-gray-400'); | |
| const ampValue = parseInt(ampRange.value); | |
| const power = 230 * ampValue / 1000; // kW | |
| const chargeRate = power / batteryCapacity * 100; // % per second (simplified) | |
| let cost = 0; | |
| let secondsCharged = 0; | |
| chargingInterval = setInterval(() => { | |
| currentCharge = Math.min(100, currentCharge + chargeRate/60); | |
| chargeProgress.style.width = `${currentCharge}%`; | |
| batteryPercent.textContent = `${Math.floor(currentCharge)}%`; | |
| // Calculate time remaining | |
| secondsCharged++; | |
| const remainingSeconds = Math.floor((100 - currentCharge) / chargeRate * 60); | |
| const hours = Math.floor(remainingSeconds / 3600); | |
| const minutes = Math.floor((remainingSeconds % 3600) / 60); | |
| timeRemaining.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`; | |
| // Calculate cost | |
| cost += power * costPerKwh / 3600; | |
| costDisplay.textContent = `Cost: $${cost.toFixed(2)}`; | |
| if (currentCharge >= 100) { | |
| stopCharging(); | |
| chargeStatus.textContent = "CHARGE COMPLETE"; | |
| } | |
| }, 1000); | |
| } | |
| function stopCharging() { | |
| clearInterval(chargingInterval); | |
| isCharging = false; | |
| chargeStatus.textContent = "READY TO CHARGE"; | |
| chargeStatus.classList.remove('text-green-500', 'charging-pulse'); | |
| chargeStatus.classList.add('text-gray-400'); | |
| } | |
| startBtn.addEventListener('click', startCharging); | |
| stopBtn.addEventListener('click', stopCharging); | |
| // Initialize display | |
| updateAmperage(); | |
| </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=privateuserh/privev" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |