cursor-grok-4.6 @ xhigh · cursor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=1280, height=800, initial-scale=1">
  <title>Weather</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      width: 1280px;
      height: 800px;
      overflow: hidden;
    }
    body {
      --ink: #1c1814;
      --paper: #f3ece1;
      --paper-2: #e8dfd1;
      --muted: #7a7168;
      --rule: rgba(28, 24, 20, 0.12);
      --accent: #b45a2a;
      --atmos: #7a3418;
      --cream: #f6efe4;
      --glow: rgba(255, 196, 140, 0.42);
      --ring: rgba(246, 239, 228, 0.28);
      display: grid;
      grid-template-columns: 428px 1fr;
      grid-template-rows: 56px 1fr 268px;
      color: var(--ink);
      background: var(--paper);
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    body[data-sky="clear"] { --atmos: #8f3a16; --accent: #c45c26; --glow: rgba(255, 186, 112, 0.5); }
    body[data-sky="cloud"] { --atmos: #2f3d48; --accent: #5e7c90; --glow: rgba(186, 210, 224, 0.28); }
    body[data-sky="fog"]   { --atmos: #3e4944; --accent: #7f9188; --glow: rgba(210, 220, 214, 0.3); }
    body[data-sky="rain"]  { --atmos: #14343f; --accent: #2f7f8e; --glow: rgba(120, 196, 206, 0.28); }
    body[data-sky="snow"]  { --atmos: #3a5160; --accent: #7fa9bb; --glow: rgba(210, 232, 240, 0.34); }
    body[data-sky="storm"] { --atmos: #241c38; --accent: #7d63b8; --glow: rgba(186, 164, 230, 0.32); }

    .mast {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      background: #171410;
      color: #f3ece1;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      font-size: 11px;
      font-weight: 650;
    }
    .mast-mark {
      display: inline-block;
      width: 7px;
      height: 7px;
      margin-right: 12px;
      border-radius: 50%;
      background: var(--accent);
      vertical-align: 1px;
    }

    .atmos {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 36px 36px 32px;
      overflow: hidden;
      color: var(--cream);
      background: var(--atmos);
    }
    .glyph {
      position: absolute;
      right: -92px;
      bottom: -110px;
      width: 340px;
      height: 340px;
      border-radius: 50%;
      background: radial-gradient(circle at 36% 32%, var(--glow), transparent 64%);
      pointer-events: none;
    }
    .glyph::before,
    .glyph::after {
      position: absolute;
      border-radius: 50%;
      content: "";
    }
    .glyph::before {
      inset: 54px;
      border: 1px solid var(--ring);
    }
    .glyph::after {
      inset: 92px;
      background: rgba(246, 239, 228, 0.08);
    }
    body[data-sky="rain"] .glyph {
      background:
        repeating-linear-gradient(-32deg, transparent 0 11px, rgba(255,255,255,0.07) 11px 12px),
        radial-gradient(circle at 36% 32%, var(--glow), transparent 64%);
    }
    body[data-sky="storm"] .glyph::after {
      inset: 78px;
      border-radius: 8px;
      transform: rotate(18deg);
      background: rgba(246, 239, 228, 0.1);
    }
    .kicker {
      position: relative;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      font-size: 11px;
      font-weight: 650;
      opacity: 0.72;
    }
    .place {
      position: relative;
      margin: 18px 0 14px;
      max-height: 2.05em;
      overflow: hidden;
      font-family: Palatino, "Palatino Linotype", "Iowan Old Style", Georgia, serif;
      font-size: 64px;
      font-weight: 600;
      line-height: 0.98;
      letter-spacing: -0.03em;
    }
    .condition {
      position: relative;
      font-family: Palatino, "Palatino Linotype", Georgia, serif;
      font-size: 28px;
      font-style: italic;
      font-weight: 500;
      line-height: 1.2;
    }
    .date-line {
      position: relative;
      margin-top: 22px;
      letter-spacing: 0.04em;
      font-size: 16px;
      font-weight: 500;
      opacity: 0.82;
    }

    .main {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 28px 48px 24px 44px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.35), transparent 28%),
        var(--paper);
    }
    .extremes {
      display: grid;
      grid-template-columns: 1fr 1px 1fr;
      align-items: end;
      min-height: 220px;
    }
    .stat { min-width: 0; padding: 8px 8px 0; }
    .stat.low { padding-left: 36px; }
    .stat-label {
      margin-bottom: 8px;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      font-size: 13px;
      font-weight: 700;
      color: var(--muted);
    }
    .stat-value {
      font-size: 92px;
      font-weight: 620;
      line-height: 0.86;
      letter-spacing: -0.05em;
      font-variant-numeric: tabular-nums;
    }
    .stat.low .stat-value { color: var(--accent); }
    .rule {
      width: 1px;
      height: 168px;
      margin-bottom: 6px;
      background: var(--rule);
      justify-self: center;
    }
    .caption {
      margin-top: 28px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-size: 11px;
      font-weight: 650;
      color: var(--muted);
    }
    .message {
      display: none;
      max-width: 28em;
      font-family: Palatino, "Palatino Linotype", Georgia, serif;
      font-size: 34px;
      font-style: italic;
      line-height: 1.25;
    }

    .band {
      grid-column: 1 / -1;
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 18px 28px 20px;
      background: var(--paper-2);
      border-top: 1px solid var(--rule);
    }
    .band-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
    }
    .hours {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: 1fr 1fr;
      gap: 8px;
      flex: 1;
      min-height: 0;
    }
    .hour {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 6px 2px 7px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.46);
      box-shadow: inset 0 0 0 1px rgba(28, 24, 20, 0.05);
    }
    .hour-temp {
      font-size: 15px;
      font-weight: 650;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.03em;
    }
    .hour-meter {
      display: flex;
      align-items: flex-end;
      width: 8px;
      height: 34px;
      overflow: hidden;
      border-radius: 99px;
      background: rgba(28, 24, 20, 0.08);
    }
    .hour-meter > span {
      display: block;
      width: 100%;
      border-radius: 99px;
      background: var(--accent);
    }
    .hour-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--muted);
      font-variant-numeric: tabular-nums;
    }

    body.is-loading .extremes,
    body.is-loading .caption,
    body.is-loading .hours,
    body.is-error .extremes,
    body.is-error .caption,
    body.is-error .hours,
    body.is-ready .message { display: none; }
    body.is-loading .message,
    body.is-error .message { display: block; }
    body.is-error .condition { display: none; }
    body.is-error .band-head { display: none; }
  </style>
</head>
<body class="is-loading" data-sky="cloud">
  <header class="mast">
    <div><span class="mast-mark"></span>Weather bulletin</div>
    <div>Celsius · UTC</div>
  </header>
  <section class="atmos">
    <div>
      <div class="kicker">Location</div>
      <h1 class="place" id="place">Berlin</h1>
      <div class="condition" id="condition"></div>
    </div>
    <div class="date-line" id="dateLine"></div>
    <div class="glyph" aria-hidden="true"></div>
  </section>
  <section class="main">
    <p class="message" id="status">Loading weather…</p>
    <div class="extremes">
      <div class="stat">
        <div class="stat-label">High</div>
        <div class="stat-value" id="highVal"></div>
      </div>
      <div class="rule"></div>
      <div class="stat low">
        <div class="stat-label">Low</div>
        <div class="stat-value" id="lowVal"></div>
      </div>
    </div>
    <div class="caption">Daily extremes in Celsius</div>
  </section>
  <section class="band">
    <div class="band-head">
      <span>Hourly temperatures</span>
      <span>UTC</span>
    </div>
    <div class="hours" id="hours"></div>
  </section>
  <script>
    (function () {
      "use strict";

      var MONTHS = ["January","February","March","April","May","June","July","August","September","October","November","December"];
      var 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 snow",
        73: "Moderate snow",
        75: "Heavy snow",
        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"
      };

      var params = new URLSearchParams(window.location.search);

      function read(key, fallback) {
        if (!params.has(key)) return fallback;
        var v = params.get(key);
        if (v == null || String(v).trim() === "") return fallback;
        return String(v).trim();
      }

      function utcToday() {
        return new Date().toISOString().slice(0, 10);
      }

      function validDate(s) {
        if (!/^\d{4}-\d{2}-\d{2}$/.test(s)) return false;
        var p = s.split("-").map(Number);
        var d = new Date(Date.UTC(p[0], p[1] - 1, p[2]));
        return d.getUTCFullYear() === p[0] && d.getUTCMonth() === p[1] - 1 && d.getUTCDate() === p[2];
      }

      function prettyDate(iso) {
        var p = iso.split("-").map(Number);
        return p[2] + " " + MONTHS[p[1] - 1] + " " + p[0];
      }

      function formatTemp(n) {
        var sign = n < 0 ? "-" : "";
        var tenths = Math.abs(n) * 10;
        var rounded = Math.floor(tenths + 0.5 + 1e-8);
        return sign + Math.floor(rounded / 10) + "." + (rounded % 10) + "°";
      }

      function skyFor(code) {
        if (code === 0 || code === 1) return "clear";
        if (code === 2 || code === 3) return "cloud";
        if (code === 45 || code === 48) return "fog";
        if (code === 71 || code === 73 || code === 75 || code === 77 || code === 85 || code === 86) return "snow";
        if (code === 95 || code === 96 || code === 99 || code === 82) return "storm";
        if (code >= 51 && code <= 81) return "rain";
        return "cloud";
      }

      function num(v) {
        if (v == null || v === "") return NaN;
        return Number(v);
      }

      var latStr = read("lat", "52.52");
      var lonStr = read("lon", "13.405");
      var name = read("name", "Berlin");
      var date = read("date", utcToday());
      var lat = Number(latStr);
      var lon = Number(lonStr);

      document.getElementById("place").textContent = name;
      document.title = name;
      if (validDate(date)) document.getElementById("dateLine").textContent = prettyDate(date);

      function fail() {
        document.body.className = "is-error";
        document.getElementById("status").textContent = "Weather data cannot be loaded.";
        document.getElementById("condition").textContent = "";
      }

      if (!Number.isFinite(lat) || !Number.isFinite(lon) || !validDate(date)) {
        fail();
        return;
      }

      var today = utcToday();
      var endpoint = date < today ? "/api/om/archive" : "/api/om/forecast";
      var query = new URLSearchParams({
        latitude: latStr,
        longitude: lonStr,
        daily: "temperature_2m_max,temperature_2m_min,weather_code",
        hourly: "temperature_2m",
        timezone: "UTC",
        temperature_unit: "celsius",
        start_date: date,
        end_date: date
      });

      fetch(endpoint + "?" + query.toString())
        .then(function (res) {
          if (!res.ok) throw new Error("http");
          return res.json();
        })
        .then(function (data) {
          if (!data || data.error) throw new Error("api");
          var daily = data.daily || {};
          var hourly = data.hourly || {};
          var times = daily.time || [];
          var idx = times.indexOf(date);
          if (idx < 0) idx = 0;
          var tmax = num(daily.temperature_2m_max && daily.temperature_2m_max[idx]);
          var tmin = num(daily.temperature_2m_min && daily.temperature_2m_min[idx]);
          var codes = daily.weather_code || daily.weathercode || [];
          var code = num(codes[idx]);
          if (!Number.isFinite(tmax) || !Number.isFinite(tmin) || !Number.isFinite(code)) throw new Error("daily");

          var rows = [];
          var ht = hourly.time || [];
          var hv = hourly.temperature_2m || [];
          for (var i = 0; i < ht.length; i++) {
            var stamp = String(ht[i] || "");
            if (stamp.slice(0, 10) !== date) continue;
            var hour = parseInt(stamp.slice(11, 13), 10);
            var temp = num(hv[i]);
            if (!Number.isFinite(hour) || hour < 0 || hour > 23 || !Number.isFinite(temp)) continue;
            rows.push({ hour: hour, temp: temp });
          }
          rows.sort(function (a, b) { return a.hour - b.hour; });
          var uniq = [];
          var seen = {};
          for (var r = 0; r < rows.length; r++) {
            if (seen[rows[r].hour]) continue;
            seen[rows[r].hour] = true;
            uniq.push(rows[r]);
          }
          if (uniq.length !== 24) throw new Error("hourly");

          var lo = uniq[0].temp;
          var hi = uniq[0].temp;
          for (var u = 1; u < uniq.length; u++) {
            if (uniq[u].temp < lo) lo = uniq[u].temp;
            if (uniq[u].temp > hi) hi = uniq[u].temp;
          }
          var span = hi - lo || 1;

          var grid = document.getElementById("hours");
          grid.textContent = "";
          for (var h = 0; h < uniq.length; h++) {
            var row = uniq[h];
            var cell = document.createElement("div");
            cell.className = "hour";
            var tEl = document.createElement("div");
            tEl.className = "hour-temp";
            tEl.textContent = formatTemp(row.temp);
            var meter = document.createElement("div");
            meter.className = "hour-meter";
            var fill = document.createElement("span");
            fill.style.height = Math.round(10 + ((row.temp - lo) / span) * 90) + "%";
            meter.appendChild(fill);
            var lEl = document.createElement("div");
            lEl.className = "hour-label";
            lEl.textContent = (row.hour < 10 ? "0" : "") + row.hour + "h";
            cell.appendChild(tEl);
            cell.appendChild(meter);
            cell.appendChild(lEl);
            grid.appendChild(cell);
          }

          document.body.setAttribute("data-sky", skyFor(code));
          document.getElementById("condition").textContent = WMO[code] || ("Code " + code);
          document.getElementById("highVal").textContent = formatTemp(tmax);
          document.getElementById("lowVal").textContent = formatTemp(tmin);
          document.body.className = "is-ready";
        })
        .catch(function () {
          fail();
        });
    })();
  </script>
</body>
</html>