Add templates/weather.html

2025-07-24 12:17:41 +00:00
parent 5b18a826a7
commit 81e8eba960
1 changed files with 67 additions and 0 deletions
--- a/templates/weather.html
+++ b/templates/weather.html
@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="pl">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Pogoda</title>
+  <style>
+    body {
+      font-family: 'Segoe UI', sans-serif;
+      background: #e8f0fe;
+      margin: 0;
+      padding: 2rem;
+      display: flex;
+      justify-content: center;
+    }
+    .card {
+      background: white;
+      padding: 2rem;
+      border-radius: 12px;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
+      max-width: 400px;
+      width: 100%;
+    }
+    h1 {
+      margin-top: 0;
+      font-size: 1.8rem;
+      color: #333;
+    }
+    .info {
+      margin: 1rem 0;
+      font-size: 1.2rem;
+      color: #555;
+    }
+    .label {
+      font-weight: bold;
+    }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <h1>Pogoda w <span id="city">...</span></h1>
+    <div class="info"><span class="label">Temperatura:</span> <span id="temp">...</span> °C</div>
+    <div class="info"><span class="label">Wiatr:</span> <span id="wind">...</span> m/s</div>
+    <div class="info"><span class="label">Czas pomiaru:</span> <span id="time">...</span></div>
+  </div>
+  <script>
+  // Pobierz ?city=poznan z adresu URL
+  const urlParams = new URLSearchParams(window.location.search);
+  const city = urlParams.get("city") || "Warszawa";
+
+  fetch(`https://meteo.cbpio.pl/weather?city=${encodeURIComponent(city)}`)
+    .then(res => res.json())
+    .then(data => {
+      document.getElementById("city").textContent = data.city;
+      document.getElementById("temp").textContent = data.temperature.toFixed(1);
+      document.getElementById("wind").textContent = data.windspeed.toFixed(1);
+      document.getElementById("time").textContent = new Date(data.time).toLocaleString("pl-PL");
+    })
+    .catch(err => {
+      document.querySelector(".card").innerHTML = "<p style='color: red;'>Błąd ładowania danych pogodowych.</p>";
+      console.error(err);
+    });
+</script>
+
+</body>
+</html>
+