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