<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Battery Time Estimation</title>
</head>
<body>
<h1>Battery Time Estimation</h1>
<div>Time Remaining: <span id="timeRemaining">Calculating...</span></div>
<script>navigator.getBattery().then(function(battery) {
function updateTimeRemaining() {
let time = battery.dischargingTime;
if (battery.chargingTime !== Infinity) {
time = battery.chargingTime;
document.getElementById('timeRemaining').textContent = `Charging, time left: ${time/3600} hours`;
} else if (time === Infinity) {
document.getElementById('timeRemaining').textContent = 'Plugged in, not charging';
} else {
document.getElementById('timeRemaining').textContent = `Time remaining: ${time/3600} hours`;
}
}
updateTimeRemaining();
battery.addEventListener('chargingchange', updateTimeRemaining);
battery.addEventListener('levelchange', updateTimeRemaining);
battery.addEventListener('chargingtimechange', updateTimeRemaining);
battery.addEventListener('dischargingtimechange', updateTimeRemaining);
});
</script>
</body>
</html>