<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Sensor Dashboard</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; }
.sensor { margin: 10px; padding: 10px; border: 1px solid #ccc; }
.sensor-title { font-weight: bold; }
.sensor-value { font-size: 2em; color: #333; }
</style>
</head>
<body>
<h1>Sensor Data</h1>
<div id="temperature" class="sensor">
<div class="sensor-title">Temperature</div>
<div class="sensor-value" id="temp-value">--</div>
</div>
<div id="humidity" class="sensor">
<div class="sensor-title">Humidity</div>
<div class="sensor-value" id="humidity-value">--</div>
</div>
<script>
async function fetchData() {
try {
const tempResponse = await fetch('./data/HTU21D.json');
const tempData = await tempResponse.json();
document.getElementById('temp-value').textContent = tempData.temperature.toFixed(1) + ' ℃';
document.getElementById('humidity-value').textContent = tempData.humidity.toFixed(1) + ' %';
} catch (error) {
console.error('Error fetching data:', error);
}
}
// Update data every 60 seconds
setInterval(fetchData, 60000);
fetchData(); // Initial fetch
</script>
</body>
</html>