grok-4.6 @ low · grok-cli

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=1280, height=800" />
  <title>Weather</title>
  <style>
    :root {
      --ink: #1a1814;
      --muted: #6b6458;
      --paper: #f4efe4;
      --card: #faf6ee;
      --line: rgba(26, 24, 20, 0.12);
      --accent: #c45c26;
      --sky: #3d6b8a;
      --good: #2d6a4f;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      width: 1280px;
      height: 800px;
      overflow: hidden;
      font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
      color: var(--ink);
      background: var(--paper);
    }
    body {
      background:
        radial-gradient(1200px 600px at 10% -10%, #e8dcc6 0%, transparent 55%),
        radial-gradient(900px 500px at 110% 20%, #d7e3ea 0%, transparent 50%),
        linear-gradient(165deg, #f7f1e6 0%, #ece4d4 48%, #e4ddd0 100%);
    }
    .stage {
      width: 1280px;
      height: 800px;
      padding: 36px 44px 32px;
      display: flex;
      flex-direction: column;
    }
    .mast {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      border-bottom: 1px solid var(--line);
      padding-bottom: 14px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-size: 11px;
      color: var(--muted);
      font-family: "Avenir Next", "Segoe UI", sans-serif;
    }
    .mast strong { color: var(--ink); letter-spacing: 0.28em; font-weight: 600; }
    .card {
      flex: 1;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 0;
      margin-top: 22px;
      background: var(--card);
      border-radius: 4px;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        0 24px 60px rgba(60, 42, 20, 0.10);
      overflow: hidden;
      position: relative;
    }
    .card::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
      mix-blend-mode: multiply;
    }
    .left {
      padding: 40px 44px 32px;
      display: flex;
      flex-direction: column;
      border-right: 1px solid var(--line);
    }
    .place {
      font-size: 56px;
      line-height: 0.95;
      font-weight: 500;
      letter-spacing: -0.03em;
    }
    .date-line {
      margin-top: 12px;
      font-family: "Avenir Next", "Segoe UI", sans-serif;
      font-size: 14px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .hero {
      margin-top: 36px;
      display: flex;
      align-items: flex-end;
      gap: 28px;
    }
    .temps { display: flex; align-items: flex-end; gap: 22px; }
    .tmax {
      font-size: 128px;
      line-height: 0.8;
      letter-spacing: -0.05em;
      font-weight: 400;
    }
    .tmax span { font-size: 42px; vertical-align: super; letter-spacing: 0; }
    .tmin {
      padding-bottom: 10px;
      font-size: 36px;
      color: var(--muted);
    }
    .cond {
      margin-top: 18px;
      font-size: 28px;
      font-style: italic;
      color: var(--sky);
    }
    .meta {
      margin-top: auto;
      display: flex;
      gap: 28px;
      font-family: "Avenir Next", "Segoe UI", sans-serif;
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .meta b { color: var(--ink); font-weight: 600; }
    .right {
      padding: 32px 28px 24px 32px;
      display: flex;
      flex-direction: column;
    }
    .right h2 {
      font-family: "Avenir Next", "Segoe UI", sans-serif;
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 16px;
    }
    .chart {
      height: 168px;
      position: relative;
    }
    .chart svg { width: 100%; height: 100%; display: block; }
    .hours {
      margin-top: 18px;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 8px 6px;
      flex: 1;
    }
    .hcell {
      background: rgba(255,255,255,0.45);
      border: 1px solid var(--line);
      border-radius: 3px;
      padding: 10px 6px 8px;
      text-align: center;
    }
    .hcell .hh {
      font-family: "Avenir Next", "Segoe UI", sans-serif;
      font-size: 10px;
      letter-spacing: 0.08em;
      color: var(--muted);
    }
    .hcell .ht {
      margin-top: 4px;
      font-size: 18px;
      letter-spacing: -0.03em;
    }
    .status {
      display: none;
      flex: 1;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 40px;
      font-size: 28px;
      font-style: italic;
      color: var(--muted);
    }
    .status.show { display: flex; }
    .card.err .left, .card.err .right { display: none; }
    .card.load .left, .card.load .right { opacity: 0.28; pointer-events: none; }
  </style>
</head>
<body>
  <div class="stage">
    <header class="mast">
      <strong>Daily Weather</strong>
      <span id="stamp">UTC</span>
    </header>
    <article class="card load" id="card">
      <div class="status show" id="status">Loading weather…</div>
      <section class="left">
        <div class="place" id="name">—</div>
        <div class="date-line" id="dateLine">—</div>
        <div class="hero">
          <div class="temps">
            <div class="tmax" id="tmax">—<span>°</span></div>
            <div class="tmin">low <span id="tmin">—</span>°</div>
          </div>
        </div>
        <div class="cond" id="cond">—</div>
        <div class="meta">
          <div>High <b id="hiLabel">—</b></div>
          <div>Low <b id="loLabel">—</b></div>
          <div>Unit <b>°C</b></div>
        </div>
      </section>
      <section class="right">
        <h2>Hourly temperature · Celsius</h2>
        <div class="chart" id="chart"></div>
        <div class="hours" id="hours"></div>
      </section>
    </article>
  </div>
  <script>
    (function () {
      const WMO = {
        0: "Clear sky",
        1: "Mainly clear",
        2: "Partly cloudy",
        3: "Overcast",
        45: "Fog",
        48: "Depositing rime fog",
        51: "Light drizzle",
        53: "Moderate drizzle",
        55: "Dense drizzle",
        56: "Light freezing drizzle",
        57: "Dense freezing drizzle",
        61: "Slight rain",
        63: "Moderate rain",
        65: "Heavy rain",
        66: "Light freezing rain",
        67: "Heavy freezing rain",
        71: "Slight snowfall",
        73: "Moderate snowfall",
        75: "Heavy snowfall",
        77: "Snow grains",
        80: "Slight rain showers",
        81: "Moderate rain showers",
        82: "Violent rain showers",
        85: "Slight snow showers",
        86: "Heavy snow showers",
        95: "Thunderstorm",
        96: "Thunderstorm with slight hail",
        99: "Thunderstorm with heavy hail"
      };

      function pad(n) { return String(n).padStart(2, "0"); }
      function todayUTC() {
        const d = new Date();
        return d.getUTCFullYear() + "-" + pad(d.getUTCMonth() + 1) + "-" + pad(d.getUTCDate());
      }
      function parseParams() {
        const q = new URLSearchParams(location.search);
        const lat = q.has("lat") ? Number(q.get("lat")) : 52.52;
        const lon = q.has("lon") ? Number(q.get("lon")) : 13.405;
        const name = q.get("name") || "Berlin";
        const date = q.get("date") || todayUTC();
        return { lat, lon, name, date };
      }
      function isPast(dateStr) {
        return dateStr < todayUTC();
      }
      function fmtDate(iso) {
        const [y, m, d] = iso.split("-").map(Number);
        const dt = new Date(Date.UTC(y, m - 1, d));
        return dt.toLocaleDateString("en-GB", {
          weekday: "long",
          day: "numeric",
          month: "long",
          year: "numeric",
          timeZone: "UTC"
        });
      }
      function fmtC(n) {
        if (n === null || n === undefined || Number.isNaN(Number(n))) return "—";
        return String(Math.round(Number(n)));
      }
      function fail(msg) {
        const card = document.getElementById("card");
        card.classList.remove("load");
        card.classList.add("err");
        const s = document.getElementById("status");
        s.textContent = msg;
        s.classList.add("show");
      }
      function spark(temps) {
        const w = 480, h = 168, padX = 8, padY = 16;
        const vals = temps.map(function (t) { return Number(t); });
        const min = Math.min.apply(null, vals);
        const max = Math.max.apply(null, vals);
        const span = max - min || 1;
        const pts = vals.map(function (v, i) {
          const x = padX + (i / Math.max(vals.length - 1, 1)) * (w - padX * 2);
          const y = padY + (1 - (v - min) / span) * (h - padY * 2);
          return [x, y];
        });
        let d = "";
        pts.forEach(function (p, i) {
          d += (i ? " L " : "M ") + p[0].toFixed(1) + " " + p[1].toFixed(1);
        });
        const area = d + " L " + pts[pts.length - 1][0].toFixed(1) + " " + (h - 4) +
          " L " + pts[0][0].toFixed(1) + " " + (h - 4) + " Z";
        let dots = "";
        [0, 6, 12, 18, 23].forEach(function (i) {
          if (!pts[i]) return;
          dots += '<circle cx="' + pts[i][0].toFixed(1) + '" cy="' + pts[i][1].toFixed(1) +
            '" r="3.2" fill="#c45c26"/>';
        });
        document.getElementById("chart").innerHTML =
          '<svg viewBox="0 0 ' + w + ' ' + h + '" preserveAspectRatio="none">' +
          '<path d="' + area + '" fill="rgba(61,107,138,0.10)"/>' +
          '<path d="' + d + '" fill="none" stroke="#3d6b8a" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>' +
          dots + "</svg>";
      }
      function renderHours(times, temps) {
        const root = document.getElementById("hours");
        root.innerHTML = "";
        for (let i = 0; i < times.length; i += 3) {
          const t = times[i];
          const hour = t.slice(11, 16);
          const cell = document.createElement("div");
          cell.className = "hcell";
          cell.innerHTML = '<div class="hh">' + hour + '</div><div class="ht">' + fmtC(temps[i]) + '°</div>';
          root.appendChild(cell);
        }
      }

      async function main() {
        const p = parseParams();
        document.getElementById("name").textContent = p.name;
        document.getElementById("dateLine").textContent = fmtDate(p.date);
        document.getElementById("stamp").textContent = p.date + " · UTC";
        if (!Number.isFinite(p.lat) || !Number.isFinite(p.lon) || !/^\d{4}-\d{2}-\d{2}$/.test(p.date)) {
          fail("Weather data could not be loaded.");
          return;
        }
        const path = isPast(p.date) ? "/api/om/archive" : "/api/om/forecast";
        const qs = new URLSearchParams({
          latitude: String(p.lat),
          longitude: String(p.lon),
          daily: "temperature_2m_max,temperature_2m_min,weather_code",
          hourly: "temperature_2m",
          timezone: "UTC",
          temperature_unit: "celsius",
          start_date: p.date,
          end_date: p.date
        });
        try {
          const res = await fetch(path + "?" + qs.toString());
          if (!res.ok) throw new Error("bad status");
          const data = await res.json();
          const daily = data.daily || {};
          const hourly = data.hourly || {};
          const tmax = daily.temperature_2m_max && daily.temperature_2m_max[0];
          const tmin = daily.temperature_2m_min && daily.temperature_2m_min[0];
          const code = daily.weather_code && daily.weather_code[0];
          const temps = hourly.temperature_2m;
          const times = hourly.time;
          if (tmax == null || tmin == null || !temps || !temps.length || !times) {
            throw new Error("incomplete");
          }
          document.getElementById("tmax").innerHTML = fmtC(tmax) + "<span>°</span>";
          document.getElementById("tmin").textContent = fmtC(tmin);
          document.getElementById("hiLabel").textContent = fmtC(tmax) + "°C";
          document.getElementById("loLabel").textContent = fmtC(tmin) + "°C";
          document.getElementById("cond").textContent = WMO[code] || ("Weather code " + code);
          spark(temps);
          renderHours(times, temps);
          const card = document.getElementById("card");
          card.classList.remove("load");
          document.getElementById("status").classList.remove("show");
        } catch (e) {
          fail("Weather data could not be loaded.");
        }
      }
      main();
    })();
  </script>
</body>
</html>