<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WLAN-Wetterstation</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; background-color:
#f4f4f4; padding: 20px; }
.data { font-size:
24px; font-weight: bold; }
.container { background:
white; padding: 20px; border-radius: 10px; box-shadow:
0 0 10px rgba(0,0,0,0.1); display:
inline-block; }
</style>
<script>
function updateWeather() {
fetch("/data") // Holt
JSON-Daten vom ESP8266
.then(response
=> response.json())
.then(data
=> {
document.getElementById("temperature").innerText = data.temperature + " °C";
document.getElementById("humidity").innerText = data.humidity + " %";
document.getElementById("wind").innerText = data.windDirection;
})
.catch(error => console.error("Fehler beim Abrufen der
Wetterdaten:", error));
}
setInterval(updateWeather, 5000); // Alle 5 Sekunden aktualisieren
window.onload = updateWeather; // Beim Laden der Seite direkt abrufen
</script>
</head>
<body>
<div class="container">
<h1>🌤️
WLAN-Wetterstation</h1>
<p>🌡️
Temperatur: <span id="temperature"
class="data">Laden...</span></p>
<p>💧
Luftfeuchtigkeit: <span id="humidity" class="data">Laden...</span></p>
<p>🧭
Windrichtung: <span id="wind" class="data">Laden...</span></p>
</div>
</body>
</html>