<!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>