initial commit

2026-05-05 00:40:52 -07:00
commit 4d80bb690b
7 changed files with 1007 additions and 0 deletions
@@ -0,0 +1,126 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Weather Forecast</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+  </head>
+  <body>
+    <main class="page-shell">
+      <header class="topbar">
+        <div class="brand">
+          <img class="brand-icon" src="{{ url_for('static', filename='weather-mark.svg') }}" alt="">
+          <div>
+            <p class="eyebrow">Open-Meteo forecast</p>
+            <h1>{{ forecast.location.display if forecast else default_location }}</h1>
+          </div>
+        </div>
+
+        <form class="search" method="get">
+          <label class="sr-only" for="location">Location</label>
+          <input
+            id="location"
+            name="q"
+            type="search"
+            value="{{ query }}"
+            placeholder="City or ZIP"
+            autocomplete="postal-code"
+          >
+          <button type="submit">Search</button>
+        </form>
+      </header>
+
+      {% if error %}
+        <section class="alert" role="alert">
+          <strong>Forecast error:</strong> {{ error }}
+        </section>
+      {% endif %}
+
+      {% if forecast %}
+        <section class="current-panel condition-{{ forecast.current.icon }}" aria-label="Current weather">
+          <div class="current-summary">
+            <div class="weather-art {{ forecast.current.icon }}" aria-hidden="true">
+              <span></span>
+            </div>
+
+            <div>
+              <p class="eyebrow">{{ forecast.current.time }}</p>
+              <h2>{{ forecast.current.temperature }}</h2>
+              <p class="condition-label">{{ forecast.current.label }}</p>
+            </div>
+          </div>
+
+          <dl class="metrics">
+            <div>
+              <dt>Feels like</dt>
+              <dd>{{ forecast.current.apparent_temperature }}</dd>
+            </div>
+            <div>
+              <dt>Humidity</dt>
+              <dd>{{ forecast.current.humidity }}</dd>
+            </div>
+            <div>
+              <dt>Wind</dt>
+              <dd>{{ forecast.current.wind }}</dd>
+            </div>
+            <div>
+              <dt>Gusts</dt>
+              <dd>{{ forecast.current.wind_gusts }}</dd>
+            </div>
+            <div>
+              <dt>Clouds</dt>
+              <dd>{{ forecast.current.cloud_cover }}</dd>
+            </div>
+            <div>
+              <dt>Precip</dt>
+              <dd>{{ forecast.current.precipitation }}</dd>
+            </div>
+          </dl>
+        </section>
+
+        <section class="forecast-grid" aria-label="Five day forecast">
+          {% for day in forecast.days %}
+            <article class="day-card">
+              <div class="day-header">
+                <div class="mini-art {{ day.icon }}" aria-hidden="true"><span></span></div>
+                <div>
+                  <h2>{{ day.date }}</h2>
+                  <p>{{ day.label }}</p>
+                </div>
+              </div>
+
+              <dl class="day-metrics">
+                <div>
+                  <dt>High</dt>
+                  <dd>{{ day.high }}</dd>
+                </div>
+                <div>
+                  <dt>Low</dt>
+                  <dd>{{ day.low }}</dd>
+                </div>
+                <div>
+                  <dt>Rain chance</dt>
+                  <dd>{{ day.precip_probability }}</dd>
+                </div>
+                <div>
+                  <dt>Rain total</dt>
+                  <dd>{{ day.precip_sum }}</dd>
+                </div>
+                <div>
+                  <dt>Max wind</dt>
+                  <dd>{{ day.wind }}</dd>
+                </div>
+              </dl>
+            </article>
+          {% endfor %}
+        </section>
+
+        <footer>
+          <span>Generated in {{ forecast.generation_ms }} ms.</span>
+          <a href="https://open-meteo.com/" rel="noreferrer">Open-Meteo</a>
+        </footer>
+      {% endif %}
+    </main>
+  </body>
+</html>