|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>EVTOL Charging Station with Solar dev by Ampere</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); |
|
|
} |
|
|
.solar-btn { |
|
|
position: fixed; |
|
|
bottom: 30px; |
|
|
right: 30px; |
|
|
z-index: 50; |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 10px 25px rgba(245, 158, 11, 0.3); |
|
|
} |
|
|
.solar-btn:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 15px 30px rgba(245, 158, 11, 0.4); |
|
|
} |
|
|
.solar-btn.active { |
|
|
background-color: #f59e0b; |
|
|
color: white; |
|
|
} |
|
|
.solar-btn.inactive { |
|
|
background-color: #374151; |
|
|
color: #9ca3af; |
|
|
} |
|
|
.frequency-btn { |
|
|
position: fixed; |
|
|
bottom: 110px; |
|
|
right: 30px; |
|
|
z-index: 50; |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3); |
|
|
} |
|
|
.frequency-btn:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 15px 30px rgba(59, 130, 246, 0.4); |
|
|
} |
|
|
.frequency-btn.active { |
|
|
background-color: #3b82f6; |
|
|
color: white; |
|
|
} |
|
|
.frequency-btn.inactive { |
|
|
background-color: #374151; |
|
|
color: #9ca3af; |
|
|
} |
|
|
.tooltip { |
|
|
position: absolute; |
|
|
right: 70px; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
width: 200px; |
|
|
background: rgba(31, 41, 55, 0.9); |
|
|
backdrop-filter: blur(10px); |
|
|
border-radius: 10px; |
|
|
padding: 10px; |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
.solar-btn:hover .tooltip, |
|
|
.frequency-btn:hover .tooltip { |
|
|
opacity: 1; |
|
|
right: 80px; |
|
|
} |
|
|
@keyframes solar-glow { |
|
|
0% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); } |
|
|
50% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.8); } |
|
|
100% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); } |
|
|
} |
|
|
@keyframes frequency-glow { |
|
|
0% { box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); } |
|
|
50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); } |
|
|
100% { box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); } |
|
|
} |
|
|
.solar-glow { |
|
|
animation: solar-glow 2s infinite; |
|
|
} |
|
|
.frequency-glow { |
|
|
animation: frequency-glow 2s infinite; |
|
|
} |
|
|
.frequency-indicator { |
|
|
position: absolute; |
|
|
top: -10px; |
|
|
right: -10px; |
|
|
background-color: #3b82f6; |
|
|
color: white; |
|
|
border-radius: 50%; |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 12px; |
|
|
font-weight: bold; |
|
|
} |
|
|
.frequency-popup { |
|
|
position: fixed; |
|
|
bottom: 190px; |
|
|
right: 30px; |
|
|
width: 250px; |
|
|
background: rgba(31, 41, 55, 0.95); |
|
|
backdrop-filter: blur(10px); |
|
|
border-radius: 15px; |
|
|
padding: 15px; |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); |
|
|
z-index: 60; |
|
|
transform: scale(0.9); |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.frequency-popup.active { |
|
|
transform: scale(1); |
|
|
opacity: 1; |
|
|
pointer-events: all; |
|
|
} |
|
|
</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 relative"> |
|
|
|
|
|
<div class="absolute top-4 right-4 flex items-center space-x-3"> |
|
|
<div class="relative"> |
|
|
<div id="solar-indicator" class="w-3 h-3 rounded-full bg-gray-500 mr-2"></div> |
|
|
<span class="text-xs text-gray-400">SOLAR</span> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div id="frequency-indicator" class="w-3 h-3 rounded-full bg-gray-500 mr-2"></div> |
|
|
<span class="text-xs text-gray-400">RF</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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-3 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 class="bg-gray-800 p-3 rounded-lg"> |
|
|
<div class="text-xs text-gray-400">FREQUENCY</div> |
|
|
<div class="text-xl font-mono" id="frequency-display">-- GHz</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-6"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
<i class="fas fa-wave-square mr-1"></i> |
|
|
<span id="rf-efficiency">0%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div id="cost-display" class="text-gray-300">Cost: $0.00</div> |
|
|
<div id="solar-usage" class="text-yellow-400 mt-1 hidden"> |
|
|
<i class="fas fa-solar-panel mr-1"></i> |
|
|
<span>Using Solar: <span id="solar-percentage">0</span>%</span> |
|
|
</div> |
|
|
<div id="rf-usage" class="text-blue-400 mt-1 hidden"> |
|
|
<i class="fas fa-satellite-dish mr-1"></i> |
|
|
<span>Using RF: <span id="rf-percentage">0</span>%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button id="solar-btn" class="solar-btn inactive w-16 h-16 rounded-full flex items-center justify-center text-2xl"> |
|
|
<i class="fas fa-solar-panel"></i> |
|
|
<div class="tooltip text-sm"> |
|
|
<div class="font-bold mb-1">Solar Bank</div> |
|
|
<div id="solar-capacity">Current capacity: 0%</div> |
|
|
<div>Automatically activates when solar is available</div> |
|
|
</div> |
|
|
</button> |
|
|
|
|
|
|
|
|
<button id="frequency-btn" class="frequency-btn inactive w-16 h-16 rounded-full flex items-center justify-center text-2xl relative"> |
|
|
<i class="fas fa-satellite-dish"></i> |
|
|
<div class="frequency-indicator" id="frequency-value">0</div> |
|
|
<div class="tooltip text-sm"> |
|
|
<div class="font-bold mb-1">RF Harvester</div> |
|
|
<div id="frequency-status">Status: Inactive</div> |
|
|
<div>300MHz - 300GHz range</div> |
|
|
</div> |
|
|
</button> |
|
|
|
|
|
|
|
|
<div id="frequency-popup" class="frequency-popup"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<h3 class="font-bold text-lg">RF Frequency Control</h3> |
|
|
<button id="close-frequency" class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="text-gray-300">Frequency</span> |
|
|
<span class="font-mono text-lg" id="selected-frequency">2.4 GHz</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<button id="decrease-freq" class="knob bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-minus"></i> |
|
|
</button> |
|
|
<input type="range" id="freq-range" min="300" max="300000" value="2400" step="100" class="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> |
|
|
<button id="increase-freq" class="knob bg-gray-700 hover:bg-gray-600 w-10 h-10 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>300 MHz</span> |
|
|
<span>300 GHz</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="text-gray-300">Power Level</span> |
|
|
<span class="font-mono text-lg" id="selected-power">50%</span> |
|
|
</div> |
|
|
<input type="range" id="power-range" min="0" max="100" value="50" step="5" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> |
|
|
</div> |
|
|
<button id="toggle-frequency" class="w-full bg-blue-600 hover:bg-blue-700 py-2 px-4 rounded-lg font-bold flex items-center justify-center"> |
|
|
<i class="fas fa-power-off mr-2"></i> ACTIVATE RF |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
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}`; |
|
|
|
|
|
|
|
|
updateSolarCapacity(hours); |
|
|
|
|
|
|
|
|
updateRFAvailability(); |
|
|
} |
|
|
setInterval(updateTime, 60000); |
|
|
updateTime(); |
|
|
|
|
|
|
|
|
let solarAvailable = false; |
|
|
let solarCapacity = 0; |
|
|
let usingSolar = false; |
|
|
const solarBtn = document.getElementById('solar-btn'); |
|
|
const solarIndicator = document.getElementById('solar-indicator'); |
|
|
const solarUsageDisplay = document.getElementById('solar-usage'); |
|
|
const solarPercentage = document.getElementById('solar-percentage'); |
|
|
const solarCapacityDisplay = document.getElementById('solar-capacity'); |
|
|
|
|
|
|
|
|
let rfAvailable = false; |
|
|
let rfActive = false; |
|
|
let rfEfficiency = 0; |
|
|
let usingRF = false; |
|
|
const frequencyBtn = document.getElementById('frequency-btn'); |
|
|
const frequencyIndicator = document.getElementById('frequency-indicator'); |
|
|
const frequencyValue = document.getElementById('frequency-value'); |
|
|
const frequencyStatus = document.getElementById('frequency-status'); |
|
|
const frequencyDisplay = document.getElementById('frequency-display'); |
|
|
const rfUsageDisplay = document.getElementById('rf-usage'); |
|
|
const rfPercentage = document.getElementById('rf-percentage'); |
|
|
const rfEfficiencyDisplay = document.getElementById('rf-efficiency'); |
|
|
const frequencyPopup = document.getElementById('frequency-popup'); |
|
|
|
|
|
|
|
|
let currentFrequency = 2400; |
|
|
let currentPowerLevel = 50; |
|
|
const freqRange = document.getElementById('freq-range'); |
|
|
const powerRange = document.getElementById('power-range'); |
|
|
const selectedFrequency = document.getElementById('selected-frequency'); |
|
|
const selectedPower = document.getElementById('selected-power'); |
|
|
const toggleFrequencyBtn = document.getElementById('toggle-frequency'); |
|
|
|
|
|
function updateSolarCapacity(hour) { |
|
|
const hourNum = parseInt(hour); |
|
|
|
|
|
if (hourNum >= 5 && hourNum < 7) { |
|
|
solarCapacity = 20 + (hourNum - 5) * 15; |
|
|
} else if (hourNum >= 7 && hourNum < 12) { |
|
|
solarCapacity = 50 + (hourNum - 7) * 10; |
|
|
} else if (hourNum >= 12 && hourNum < 15) { |
|
|
solarCapacity = 90 + (hourNum - 12) * 3; |
|
|
} else if (hourNum >= 15 && hourNum < 19) { |
|
|
solarCapacity = 90 - (hourNum - 15) * 15; |
|
|
} else if (hourNum >= 19 && hourNum < 21) { |
|
|
solarCapacity = 30 - (hourNum - 19) * 15; |
|
|
} else { |
|
|
solarCapacity = 0; |
|
|
} |
|
|
|
|
|
solarCapacity = Math.max(0, Math.min(100, solarCapacity)); |
|
|
solarCapacityDisplay.textContent = `Current capacity: ${Math.round(solarCapacity)}%`; |
|
|
|
|
|
if (solarCapacity >= 30 && !solarAvailable) { |
|
|
enableSolar(); |
|
|
} else if (solarCapacity < 30 && solarAvailable) { |
|
|
disableSolar(); |
|
|
} |
|
|
|
|
|
if (usingSolar) { |
|
|
const solarUsagePercent = Math.min(100, Math.floor(solarCapacity / 2)); |
|
|
solarPercentage.textContent = solarUsagePercent; |
|
|
|
|
|
if (solarUsagePercent < 10) { |
|
|
disableSolarUsage(); |
|
|
|
|
|
if (rfAvailable && !rfActive) { |
|
|
activateRF(); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function updateRFAvailability() { |
|
|
|
|
|
rfAvailable = Math.random() > 0.3; |
|
|
|
|
|
if (rfAvailable) { |
|
|
|
|
|
rfEfficiency = Math.min(100, Math.floor( |
|
|
(currentPowerLevel / 100) * |
|
|
(Math.min(1, currentFrequency / 10000)) * |
|
|
80 |
|
|
)); |
|
|
|
|
|
if (!rfActive) { |
|
|
frequencyBtn.classList.remove('inactive'); |
|
|
frequencyBtn.classList.add('active'); |
|
|
frequencyIndicator.classList.remove('bg-gray-500'); |
|
|
frequencyIndicator.classList.add('bg-blue-400'); |
|
|
frequencyStatus.textContent = "Status: Available"; |
|
|
} |
|
|
} else { |
|
|
rfEfficiency = 0; |
|
|
if (rfActive) { |
|
|
deactivateRF(); |
|
|
} |
|
|
frequencyBtn.classList.remove('active', 'frequency-glow'); |
|
|
frequencyBtn.classList.add('inactive'); |
|
|
frequencyIndicator.classList.remove('bg-blue-400'); |
|
|
frequencyIndicator.classList.add('bg-gray-500'); |
|
|
frequencyStatus.textContent = "Status: Unavailable"; |
|
|
} |
|
|
|
|
|
rfEfficiencyDisplay.textContent = `${rfEfficiency}%`; |
|
|
} |
|
|
|
|
|
function enableSolar() { |
|
|
solarAvailable = true; |
|
|
solarBtn.classList.remove('inactive'); |
|
|
solarBtn.classList.add('active', 'solar-glow'); |
|
|
solarIndicator.classList.remove('bg-gray-500'); |
|
|
solarIndicator.classList.add('bg-yellow-400'); |
|
|
} |
|
|
|
|
|
function disableSolar() { |
|
|
solarAvailable = false; |
|
|
solarBtn.classList.remove('active', 'solar-glow'); |
|
|
solarBtn.classList.add('inactive'); |
|
|
solarIndicator.classList.remove('bg-yellow-400'); |
|
|
solarIndicator.classList.add('bg-gray-500'); |
|
|
disableSolarUsage(); |
|
|
} |
|
|
|
|
|
function enableSolarUsage() { |
|
|
if (!solarAvailable) return; |
|
|
|
|
|
usingSolar = true; |
|
|
solarUsageDisplay.classList.remove('hidden'); |
|
|
costPerKwh = 0.07; |
|
|
solarBtn.classList.add('animate-pulse'); |
|
|
} |
|
|
|
|
|
function disableSolarUsage() { |
|
|
usingSolar = false; |
|
|
solarUsageDisplay.classList.add('hidden'); |
|
|
costPerKwh = 0.15; |
|
|
solarBtn.classList.remove('animate-pulse'); |
|
|
} |
|
|
|
|
|
function activateRF() { |
|
|
if (!rfAvailable) return; |
|
|
|
|
|
rfActive = true; |
|
|
usingRF = true; |
|
|
rfUsageDisplay.classList.remove('hidden'); |
|
|
rfPercentage.textContent = rfEfficiency; |
|
|
frequencyBtn.classList.add('frequency-glow'); |
|
|
toggleFrequencyBtn.innerHTML = '<i class="fas fa-power-off mr-2"></i> DEACTIVATE RF'; |
|
|
frequencyStatus.textContent = "Status: Active"; |
|
|
|
|
|
|
|
|
const displayFreq = currentFrequency >= 1000 ? |
|
|
`${(currentFrequency/1000).toFixed(1)} GHz` : |
|
|
`${currentFrequency} MHz`; |
|
|
frequencyDisplay.textContent = displayFreq; |
|
|
frequencyValue.textContent = Math.floor(currentFrequency/1000); |
|
|
|
|
|
|
|
|
if (isCharging) { |
|
|
costPerKwh = 0.10; |
|
|
} |
|
|
} |
|
|
|
|
|
function deactivateRF() { |
|
|
rfActive = false; |
|
|
usingRF = false; |
|
|
rfUsageDisplay.classList.add('hidden'); |
|
|
frequencyBtn.classList.remove('frequency-glow'); |
|
|
toggleFrequencyBtn.innerHTML = '<i class="fas fa-power-off mr-2"></i> ACTIVATE RF'; |
|
|
frequencyStatus.textContent = "Status: Available"; |
|
|
frequencyDisplay.textContent = "-- GHz"; |
|
|
frequencyValue.textContent = "0"; |
|
|
|
|
|
|
|
|
if (isCharging) { |
|
|
costPerKwh = usingSolar ? 0.07 : 0.15; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function updateFrequencyDisplay() { |
|
|
const displayFreq = currentFrequency >= 1000 ? |
|
|
`${(currentFrequency/1000).toFixed(1)} GHz` : |
|
|
`${currentFrequency} MHz`; |
|
|
selectedFrequency.textContent = displayFreq; |
|
|
|
|
|
if (rfActive) { |
|
|
frequencyDisplay.textContent = displayFreq; |
|
|
frequencyValue.textContent = Math.floor(currentFrequency/1000); |
|
|
} |
|
|
|
|
|
|
|
|
updateRFAvailability(); |
|
|
if (rfActive) { |
|
|
rfPercentage.textContent = rfEfficiency; |
|
|
} |
|
|
} |
|
|
|
|
|
function updatePowerDisplay() { |
|
|
selectedPower.textContent = `${currentPowerLevel}%`; |
|
|
|
|
|
|
|
|
updateRFAvailability(); |
|
|
if (rfActive) { |
|
|
rfPercentage.textContent = rfEfficiency; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
solarBtn.addEventListener('click', () => { |
|
|
if (!solarAvailable) return; |
|
|
|
|
|
if (usingSolar) { |
|
|
disableSolarUsage(); |
|
|
} else { |
|
|
enableSolarUsage(); |
|
|
|
|
|
if (usingRF) { |
|
|
deactivateRF(); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
frequencyBtn.addEventListener('click', () => { |
|
|
frequencyPopup.classList.toggle('active'); |
|
|
}); |
|
|
|
|
|
document.getElementById('close-frequency').addEventListener('click', () => { |
|
|
frequencyPopup.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
toggleFrequencyBtn.addEventListener('click', () => { |
|
|
if (rfActive) { |
|
|
deactivateRF(); |
|
|
} else { |
|
|
activateRF(); |
|
|
|
|
|
if (usingSolar) { |
|
|
disableSolarUsage(); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
freqRange.addEventListener('input', () => { |
|
|
currentFrequency = parseInt(freqRange.value); |
|
|
updateFrequencyDisplay(); |
|
|
}); |
|
|
|
|
|
powerRange.addEventListener('input', () => { |
|
|
currentPowerLevel = parseInt(powerRange.value); |
|
|
updatePowerDisplay(); |
|
|
}); |
|
|
|
|
|
document.getElementById('decrease-freq').addEventListener('click', () => { |
|
|
freqRange.value = Math.max(300, parseInt(freqRange.value) - 100); |
|
|
currentFrequency = parseInt(freqRange.value); |
|
|
updateFrequencyDisplay(); |
|
|
}); |
|
|
|
|
|
document.getElementById('increase-freq').addEventListener('click', () => { |
|
|
freqRange.value = Math.min(300000, parseInt(freqRange.value) + 100); |
|
|
currentFrequency = parseInt(freqRange.value); |
|
|
updateFrequencyDisplay(); |
|
|
}); |
|
|
|
|
|
|
|
|
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`; |
|
|
|
|
|
const voltage = 230; |
|
|
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(); |
|
|
}); |
|
|
|
|
|
|
|
|
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; |
|
|
let costPerKwh = 0.15; |
|
|
|
|
|
function startCharging() { |
|
|
if (isCharging) return; |
|
|
|
|
|
isCharging = true; |
|
|
chargeStatus.textContent = "CHARGING"; |
|
|
chargeStatus.classList.add('text-green-500', 'charging-pulse'); |
|
|
chargeStatus.classList.remove('text-gray-400'); |
|
|
|
|
|
|
|
|
if (solarAvailable && !usingSolar && solarCapacity >= 50) { |
|
|
enableSolarUsage(); |
|
|
} else if (rfAvailable && !rfActive && solarCapacity < 30) { |
|
|
activateRF(); |
|
|
} |
|
|
|
|
|
const ampValue = parseInt(ampRange.value); |
|
|
const power = 230 * ampValue / 1000; |
|
|
const chargeRate = power / batteryCapacity * 100; |
|
|
|
|
|
let cost = 0; |
|
|
let secondsCharged = 0; |
|
|
|
|
|
chargingInterval = setInterval(() => { |
|
|
currentCharge = Math.min(100, currentCharge + chargeRate/60); |
|
|
chargeProgress.style.width = `${currentCharge}%`; |
|
|
batteryPercent.textContent = `${Math.floor(currentCharge)}%`; |
|
|
|
|
|
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')}`; |
|
|
|
|
|
cost += power * costPerKwh / 3600; |
|
|
costDisplay.textContent = `Cost: $${cost.toFixed(2)}`; |
|
|
|
|
|
|
|
|
if (usingSolar && solarCapacity < 10 && rfAvailable && !rfActive) { |
|
|
disableSolarUsage(); |
|
|
activateRF(); |
|
|
} |
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
updateAmperage(); |
|
|
updateFrequencyDisplay(); |
|
|
updatePowerDisplay(); |
|
|
updateSolarCapacity(new Date().getHours()); |
|
|
updateRFAvailability(); |
|
|
</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/privevdev-betav1-00" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
