cursor-grok-4.6 @ low · cursor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=1280, height=800" />
  <title>Weather</title>
  <style>
    :root {
      --ink: #0e1620;
      --muted: rgba(14, 22, 32, 0.58);
      --glass: rgba(255, 255, 255, 0.42);
      --line: rgba(255, 255, 255, 0.38);
      --accent: #1c4b6e;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      width: 1280px;
      height: 800px;
      overflow: hidden;
      font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
      color: var(--ink);
      background: #8eb4c8;
    }

    body {
      position: relative;
    }

    .sky {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 90% 70% at 18% 8%, rgba(255, 236, 196, 0.95) 0%, transparent 52%),
        radial-gradient(ellipse 60% 50% at 88% 18%, rgba(255, 255, 255, 0.35) 0%, transparent 50%),
        linear-gradient(180deg, #c5dceb 0%, #9ec0d4 38%, #7aa3bc 72%, #5e8aa6 100%);
      transition: background 0.6s ease;
    }

    body.w-clear .sky {
      background:
        radial-gradient(ellipse 80% 60% at 22% 6%, #fff4d2 0%, transparent 48%),
        linear-gradient(180deg, #8ec8ef 0%, #6eb0e0 40%, #4a96c8 100%);
    }
    body.w-cloud .sky {
      background:
        radial-gradient(ellipse 70% 40% at 70% 12%, rgba(255,255,255,0.55) 0%, transparent 55%),
        linear-gradient(180deg, #b7c6d4 0%, #8ea3b6 50%, #6d8498 100%);
    }
    body.w-rain .sky {
      background: linear-gradient(180deg, #6b7c8e 0%, #4e6276 45%, #3a4f62 100%);
    }
    body.w-snow .sky {
      background: linear-gradient(180deg, #dce6ef 0%, #b9c9d8 50%, #93a8bb 100%);
    }
    body.w-storm .sky {
      background: linear-gradient(180deg, #3d4654 0%, #2a3340 55%, #1c2430 100%);
    }
    body.w-fog .sky {
      background: linear-gradient(180deg, #c9d0d6 0%, #aeb8c0 50%, #8e9aa4 100%);
    }
    body.w-error .sky {
      background: linear-gradient(180deg, #c4b8ae 0%, #9d9086 100%);
    }

    .haze {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 12% 80%, rgba(255,255,255,0.18), transparent 40%),
        radial-gradient(circle at 90% 70%, rgba(20,40,60,0.12), transparent 42%);
      pointer-events: none;
    }

    .wrap {
      position: relative;
      z-index: 1;
      width: 1280px;
      height: 800px;
      padding: 48px 56px;
      display: flex;
      align-items: stretch;
    }

    .card {
      flex: 1;
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      grid-template-rows: auto 1fr auto;
      gap: 0 48px;
      padding: 44px 48px 36px;
      background: linear-gradient(165deg, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0.28) 100%);
      border: 1px solid var(--line);
      border-radius: 28px;
      box-shadow:
        0 30px 80px rgba(20, 40, 60, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.7);
      backdrop-filter: blur(18px);
    }

    .mast {
      grid-column: 1 / -1;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding-bottom: 22px;
      border-bottom: 1px solid rgba(14, 22, 32, 0.12);
    }

    .place {
      font-size: 42px;
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1.1;
    }

    .date {
      font-family: "Avenir Next", "Segoe UI", sans-serif;
      font-size: 15px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600;
    }

    .hero {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 28px 0 12px;
    }

    .condition {
      font-family: "Avenir Next", "Segoe UI", sans-serif;
      font-size: 13px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--accent);
      font-weight: 700;
      margin-bottom: 10px;
    }

    .temps {
      display: flex;
      align-items: flex-end;
      gap: 28px;
    }

    .max {
      font-size: 148px;
      font-weight: 500;
      letter-spacing: -0.06em;
      line-height: 0.85;
    }

    .max span {
      font-size: 48px;
      vertical-align: super;
      letter-spacing: 0;
      margin-left: 4px;
    }

    .min-block {
      padding-bottom: 14px;
    }

    .min-label {
      font-family: "Avenir Next", "Segoe UI", sans-serif;
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 4px;
    }

    .min {
      font-size: 48px;
      font-weight: 500;
      letter-spacing: -0.04em;
      color: rgba(14, 22, 32, 0.72);
    }

    .aside {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 20px 0 8px 8px;
      border-left: 1px solid rgba(14, 22, 32, 0.1);
    }

    .aside p {
      font-size: 22px;
      line-height: 1.45;
      color: rgba(14, 22, 32, 0.78);
      max-width: 420px;
    }

    .hourly {
      grid-column: 1 / -1;
      padding-top: 8px;
    }

    .hourly h2 {
      font-family: "Avenir Next", "Segoe UI", sans-serif;
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 14px;
      font-weight: 700;
    }

    .chart {
      height: 168px;
      position: relative;
    }

    .chart svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .hours {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
      font-family: "Avenir Next", "Segoe UI", sans-serif;
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.04em;
    }

    .error {
      grid-column: 1 / -1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      min-height: 420px;
    }

    .error h1 {
      font-size: 48px;
      letter-spacing: -0.03em;
      margin-bottom: 12px;
    }

    .error p {
      font-family: "Avenir Next", "Segoe UI", sans-serif;
      font-size: 18px;
      color: var(--muted);
      max-width: 520px;
      line-height: 1.5;
    }

    .hidden { display: none !important; }
  </style>
</head>
<body>
  <div class="sky"></div>
  <div class="haze"></div>
  <div class="wrap">
    <article class="card" id="card">
      <header class="mast">
        <div class="place" id="place">Berlin</div>
        <div class="date" id="dateLabel"></div>
      </header>
      <div class="hero" id="hero">
        <div class="condition" id="condition">Loading</div>
        <div class="temps">
          <div class="max" id="tmax">—<span>°</span></div>
          <div class="min-block">
            <div class="min-label">Low</div>
            <div class="min" id="tmin">—°</div>
          </div>
        </div>
      </div>
      <div class="aside" id="aside">
        <p id="blurb">Fetching the day’s forecast…</p>
      </div>
      <section class="hourly" id="hourly">
        <h2>Hourly temperature · °C</h2>
        <div class="chart" id="chart"></div>
        <div class="hours" id="hours"></div>
      </section>
      <div class="error hidden" id="error">
        <h1>Weather data could not be loaded</h1>
        <p id="errorDetail">The forecast for this location and date is unavailable. Check the connection and try again.</p>
      </div>
    </article>
  </div>
  <script>
    (function () {
      const WMO = {
        0: ["Clear sky", "clear", "A still, luminous day — unobstructed sun and a wide, open sky."],
        1: ["Mainly clear", "clear", "Mostly fair, with only a few high, thin clouds."],
        2: ["Partly cloudy", "cloud", "Sun and cloud in conversation; light shifting through the day."],
        3: ["Overcast", "cloud", "A closed ceiling of cloud, even light, little contrast."],
        45: ["Fog", "fog", "Low visibility, air thickened to a pale veil."],
        48: ["Depositing rime fog", "fog", "Freezing fog, surfaces gathering a fine white frost."],
        51: ["Light drizzle", "rain", "A fine, persistent dampness in the air."],
        53: ["Moderate drizzle", "rain", "Steady drizzle, streets darkened and quiet."],
        55: ["Dense drizzle", "rain", "Heavy drizzle, a soaking mist rather than rain."],
        56: ["Light freezing drizzle", "rain", "Icy drizzle; surfaces may glaze."],
        57: ["Dense freezing drizzle", "rain", "Freezing drizzle, treacherous and persistent."],
        61: ["Slight rain", "rain", "Light rain, enough to darken stone and scent the air."],
        63: ["Moderate rain", "rain", "A proper rainfall, umbrellas out, gutters busy."],
        65: ["Heavy rain", "rain", "Driving rain, the city drawn inward."],
        66: ["Light freezing rain", "rain", "Rain that ices on contact."],
        67: ["Heavy freezing rain", "rain", "Freezing rain, a glaze over everything it touches."],
        71: ["Slight snow", "snow", "Light snow, a hush settling over the streets."],
        73: ["Moderate snow", "snow", "Steady snowfall, accumulating through the hours."],
        75: ["Heavy snow", "snow", "Heavy snow, the world reduced to white and grey."],
        77: ["Snow grains", "snow", "Fine icy grains, more sting than drift."],
        80: ["Slight rain showers", "rain", "Passing showers, wet then briefly bright."],
        81: ["Moderate rain showers", "rain", "Showers coming in bands, then easing."],
        82: ["Violent rain showers", "rain", "Intense downpours, brief and forceful."],
        85: ["Slight snow showers", "snow", "Flurries arriving and departing."],
        86: ["Heavy snow showers", "snow", "Heavy snow showers, visibility dropping in bursts."],
        95: ["Thunderstorm", "storm", "Thunder and rain; the air charged and restless."],
        96: ["Thunderstorm with slight hail", "storm", "Thunder with hail, a sharp rattle on roofs."],
        99: ["Thunderstorm with heavy hail", "storm", "Severe thunderstorm with heavy hail."]
      };

      function todayUTC() {
        const n = new Date();
        const y = n.getUTCFullYear();
        const m = String(n.getUTCMonth() + 1).padStart(2, "0");
        const d = String(n.getUTCDate()).padStart(2, "0");
        return y + "-" + m + "-" + d;
      }

      function parseParams() {
        const q = new URLSearchParams(location.search);
        const lat = parseFloat(q.get("lat"));
        const lon = parseFloat(q.get("lon"));
        return {
          lat: Number.isFinite(lat) ? lat : 52.52,
          lon: Number.isFinite(lon) ? lon : 13.405,
          name: (q.get("name") || "Berlin").trim() || "Berlin",
          date: /^\d{4}-\d{2}-\d{2}$/.test(q.get("date") || "") ? q.get("date") : todayUTC()
        };
      }

      function formatDate(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 isPast(dateStr) {
        return dateStr < todayUTC();
      }

      function wmoInfo(code) {
        return WMO[code] || ["Unknown conditions", "cloud", "Conditions recorded, but the code is unfamiliar."];
      }

      function showError(msg) {
        document.body.className = "w-error";
        document.getElementById("hero").classList.add("hidden");
        document.getElementById("aside").classList.add("hidden");
        document.getElementById("hourly").classList.add("hidden");
        document.getElementById("error").classList.remove("hidden");
        if (msg) document.getElementById("errorDetail").textContent = msg;
      }

      function drawChart(hours, temps) {
        const w = 1100, h = 168, padL = 8, padR = 8, padT = 18, padB = 8;
        const vals = temps.filter(function (t) { return t != null && !Number.isNaN(t); });
        if (!vals.length) {
          document.getElementById("chart").innerHTML = "";
          return;
        }
        const min = Math.min.apply(null, vals);
        const max = Math.max.apply(null, vals);
        const span = Math.max(max - min, 1);
        const n = temps.length;
        const innerW = w - padL - padR;
        const innerH = h - padT - padB;

        function x(i) {
          return n === 1 ? padL + innerW / 2 : padL + (i / (n - 1)) * innerW;
        }
        function y(t) {
          return padT + (1 - (t - min) / span) * innerH;
        }

        let d = "";
        temps.forEach(function (t, i) {
          if (t == null || Number.isNaN(t)) return;
          d += (d ? " L " : "M ") + x(i).toFixed(1) + " " + y(t).toFixed(1);
        });

        const area = d + " L " + x(n - 1).toFixed(1) + " " + (h - padB) +
          " L " + x(0).toFixed(1) + " " + (h - padB) + " Z";

        let dots = "";
        let labels = "";
        temps.forEach(function (t, i) {
          if (t == null || Number.isNaN(t)) return;
          if (i % 3 === 0 || i === n - 1) {
            dots += '<circle cx="' + x(i).toFixed(1) + '" cy="' + y(t).toFixed(1) +
              '" r="3.2" fill="#1c4b6e" />';
            labels += '<text x="' + x(i).toFixed(1) + '" y="' + (y(t) - 10).toFixed(1) +
              '" text-anchor="middle" font-family="Avenir Next, Segoe UI, sans-serif" font-size="11" fill="#0e1620">' +
              Math.round(t) + "°</text>";
          }
        });

        document.getElementById("chart").innerHTML =
          '<svg viewBox="0 0 ' + w + " " + h + '" preserveAspectRatio="none">' +
          '<path d="' + area + '" fill="rgba(28,75,110,0.12)" />' +
          '<path d="' + d + '" fill="none" stroke="#1c4b6e" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />' +
          dots + labels + "</svg>";

        const ticks = [0, 6, 12, 18, 23].filter(function (i) { return i < hours.length; });
        document.getElementById("hours").innerHTML = ticks.map(function (i) {
          const hh = String(hours[i] || "").slice(11, 16) || (String(i).padStart(2, "0") + ":00");
          return "<span>" + hh + "</span>";
        }).join("");
      }

      async function run() {
        const p = parseParams();
        document.getElementById("place").textContent = p.name;
        document.getElementById("dateLabel").textContent = formatDate(p.date);

        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
        });

        let data;
        try {
          const res = await fetch(path + "?" + qs.toString());
          if (!res.ok) throw new Error("bad status");
          data = await res.json();
        } catch (e) {
          showError("Weather data could not be loaded.");
          return;
        }

        const daily = data && data.daily;
        const hourly = data && data.hourly;
        if (!daily || !daily.time || !daily.time.length) {
          showError("Weather data could not be loaded.");
          return;
        }

        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];
        if (tmax == null || tmin == null) {
          showError("Weather data could not be loaded.");
          return;
        }

        const info = wmoInfo(code);
        document.body.className = "w-" + info[1];
        document.getElementById("condition").textContent = info[0];
        document.getElementById("tmax").innerHTML = Math.round(tmax) + "<span>°</span>";
        document.getElementById("tmin").textContent = Math.round(tmin) + "°";
        document.getElementById("blurb").textContent = info[2];

        const times = (hourly && hourly.time) || [];
        const temps = (hourly && hourly.temperature_2m) || [];
        drawChart(times, temps);
      }

      run();
    })();
  </script>
</body>
</html>