cursor-grok-4.6 @ low · cursor-xl

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=1280, height=800" />
  <title>Weather</title>
  <style>
    :root {
      --ink: #0f1724;
      --muted: rgba(15, 23, 36, 0.58);
      --line: rgba(255, 255, 255, 0.22);
      --glass: rgba(255, 255, 255, 0.16);
      --glass-strong: rgba(255, 255, 255, 0.28);
    }

    * { 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: #1a2230;
    }

    body {
      display: grid;
      place-items: center;
    }

    .stage {
      width: 1280px;
      height: 800px;
      position: relative;
      overflow: hidden;
    }

    .sky {
      position: absolute;
      inset: 0;
      transition: background 700ms ease;
    }

    .sky.clear {
      background:
        radial-gradient(ellipse 90% 70% at 78% 8%, #ffe7a8 0%, transparent 45%),
        linear-gradient(165deg, #6eb4ea 0%, #8ec5f0 28%, #c9e4f8 58%, #f3e6c8 100%);
    }

    .sky.clouds {
      background:
        radial-gradient(ellipse 70% 50% at 20% 0%, rgba(255,255,255,0.45) 0%, transparent 50%),
        linear-gradient(180deg, #7fa8c9 0%, #a8c3d8 40%, #d5dce4 100%);
    }

    .sky.rain {
      background: linear-gradient(180deg, #3d5368 0%, #5a7388 38%, #8aa0b0 100%);
    }

    .sky.storm {
      background: linear-gradient(180deg, #2a3340 0%, #3e4d5c 45%, #5c6d7c 100%);
    }

    .sky.snow {
      background: linear-gradient(180deg, #9bb4c8 0%, #c5d4e0 48%, #e8eef3 100%);
    }

    .sky.fog {
      background: linear-gradient(180deg, #8b97a3 0%, #b7bec6 50%, #d8dce0 100%);
    }

    .sky.night {
      background:
        radial-gradient(ellipse 50% 40% at 80% 12%, rgba(255, 214, 140, 0.28) 0%, transparent 50%),
        linear-gradient(180deg, #0e1a2e 0%, #1c334d 55%, #2d4a66 100%);
    }

    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(0.2px);
    }

    .sun {
      width: 220px;
      height: 220px;
      right: 140px;
      top: 70px;
      background: radial-gradient(circle at 40% 38%, #fff6d4 0%, #ffd56a 42%, #f0a43a 70%, transparent 72%);
      box-shadow: 0 0 80px 24px rgba(255, 196, 80, 0.45);
      opacity: 0;
    }

    .sky.clear .sun { opacity: 1; }

    .moon {
      width: 90px;
      height: 90px;
      right: 180px;
      top: 90px;
      background: radial-gradient(circle at 35% 32%, #f7f1de 0%, #d8cda8 70%);
      box-shadow: 0 0 40px 10px rgba(220, 210, 180, 0.25);
      opacity: 0;
    }

    .sky.night .moon { opacity: 1; }

    .haze {
      position: absolute;
      inset: auto 0 0 0;
      height: 280px;
      background: linear-gradient(to top, rgba(255,255,255,0.28), transparent);
      pointer-events: none;
    }

    .card {
      position: relative;
      z-index: 2;
      width: 1080px;
      height: 680px;
      margin: 60px auto;
      padding: 48px 56px 40px;
      border-radius: 36px;
      background: linear-gradient(160deg, rgba(255,255,255,0.42), rgba(255,255,255,0.16) 45%, rgba(255,255,255,0.08));
      border: 1px solid rgba(255,255,255,0.38);
      box-shadow:
        0 40px 80px rgba(18, 32, 48, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.55);
      backdrop-filter: blur(18px);
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 28px;
      color: var(--ink);
    }

    .sky.rain .card,
    .sky.storm .card,
    .sky.night .card {
      color: #f4f7fb;
      --muted: rgba(244, 247, 251, 0.62);
    }

    .top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 24px;
    }

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

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

    .condition-wrap {
      text-align: right;
    }

    .icon {
      font-size: 72px;
      line-height: 1;
      filter: drop-shadow(0 8px 16px rgba(0,0,0,0.12));
    }

    .condition {
      margin-top: 8px;
      font-family: "Avenir Next", "Segoe UI", sans-serif;
      font-size: 18px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
    }

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

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

    .max span {
      font-size: 52px;
      vertical-align: super;
      margin-left: 4px;
      opacity: 0.7;
    }

    .minmax {
      padding-bottom: 18px;
      font-family: "Avenir Next", "Segoe UI", sans-serif;
    }

    .minmax .label {
      font-size: 12px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 6px;
    }

    .minmax .val {
      font-size: 36px;
      font-weight: 500;
    }

    .hourly {
      border-top: 1px solid var(--line);
      padding-top: 22px;
    }

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

    .hours {
      display: flex;
      gap: 8px;
      overflow: hidden;
    }

    .hour {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 10px 0 6px;
      border-radius: 16px;
      background: rgba(255,255,255,0.12);
    }

    .hour .t {
      font-family: "Avenir Next", "Segoe UI", sans-serif;
      font-size: 11px;
      letter-spacing: 0.08em;
      color: var(--muted);
    }

    .bar-wrap {
      height: 72px;
      width: 8px;
      border-radius: 8px;
      background: rgba(255,255,255,0.18);
      display: flex;
      align-items: flex-end;
      overflow: hidden;
    }

    .bar {
      width: 100%;
      border-radius: 8px;
      background: linear-gradient(to top, rgba(255,255,255,0.35), rgba(255,255,255,0.95));
    }

    .hour .deg {
      font-size: 15px;
      font-weight: 600;
      font-family: "Avenir Next", "Segoe UI", sans-serif;
    }

    .error {
      position: relative;
      z-index: 2;
      width: 720px;
      margin: 260px auto 0;
      padding: 48px 56px;
      border-radius: 28px;
      background: rgba(255,255,255,0.88);
      text-align: center;
      box-shadow: 0 30px 70px rgba(0,0,0,0.22);
    }

    .error h1 {
      font-size: 32px;
      margin-bottom: 12px;
    }

    .error p {
      font-family: "Avenir Next", "Segoe UI", sans-serif;
      color: var(--muted);
      font-size: 16px;
    }

    .hidden { display: none !important; }
  </style>
</head>
<body>
  <div class="stage">
    <div class="sky clear" id="sky">
      <div class="orb sun"></div>
      <div class="orb moon"></div>
      <div class="haze"></div>
    </div>
    <article class="card" id="card">
      <header class="top">
        <div>
          <div class="place" id="place">—</div>
          <div class="date" id="dateLabel">—</div>
        </div>
        <div class="condition-wrap">
          <div class="icon" id="icon">·</div>
          <div class="condition" id="condition">—</div>
        </div>
      </header>
      <section class="temps">
        <div class="max" id="maxTemp">—<span>°</span></div>
        <div class="minmax">
          <div class="label">Low</div>
          <div class="val" id="minTemp">—°</div>
        </div>
        <div class="minmax">
          <div class="label">High</div>
          <div class="val" id="maxTempSmall">—°</div>
        </div>
      </section>
      <section class="hourly">
        <div class="hourly-label">Hourly temperature · UTC</div>
        <div class="hours" id="hours"></div>
      </section>
    </article>
    <div class="error hidden" id="error">
      <h1>Weather data could not be loaded</h1>
      <p>The forecast for this location and date is unavailable.</p>
    </div>
  </div>
  <script>
    (function () {
      var WMO = {
        0: { label: "Clear sky", icon: "☀", sky: "clear" },
        1: { label: "Mainly clear", icon: "🌤", sky: "clear" },
        2: { label: "Partly cloudy", icon: "⛅", sky: "clouds" },
        3: { label: "Overcast", icon: "☁", sky: "clouds" },
        45: { label: "Fog", icon: "🌫", sky: "fog" },
        48: { label: "Rime fog", icon: "🌫", sky: "fog" },
        51: { label: "Light drizzle", icon: "🌦", sky: "rain" },
        53: { label: "Drizzle", icon: "🌦", sky: "rain" },
        55: { label: "Dense drizzle", icon: "🌧", sky: "rain" },
        56: { label: "Freezing drizzle", icon: "🌧", sky: "rain" },
        57: { label: "Freezing drizzle", icon: "🌧", sky: "rain" },
        61: { label: "Slight rain", icon: "🌧", sky: "rain" },
        63: { label: "Rain", icon: "🌧", sky: "rain" },
        65: { label: "Heavy rain", icon: "🌧", sky: "rain" },
        66: { label: "Freezing rain", icon: "🌧", sky: "rain" },
        67: { label: "Freezing rain", icon: "🌧", sky: "rain" },
        71: { label: "Slight snow", icon: "❄", sky: "snow" },
        73: { label: "Snow", icon: "❄", sky: "snow" },
        75: { label: "Heavy snow", icon: "❄", sky: "snow" },
        77: { label: "Snow grains", icon: "❄", sky: "snow" },
        80: { label: "Rain showers", icon: "🌦", sky: "rain" },
        81: { label: "Rain showers", icon: "🌧", sky: "rain" },
        82: { label: "Violent showers", icon: "🌧", sky: "storm" },
        85: { label: "Snow showers", icon: "❄", sky: "snow" },
        86: { label: "Snow showers", icon: "❄", sky: "snow" },
        95: { label: "Thunderstorm", icon: "⛈", sky: "storm" },
        96: { label: "Thunderstorm", icon: "⛈", sky: "storm" },
        99: { label: "Thunderstorm", icon: "⛈", sky: "storm" }
      };

      function pad(n) { return String(n).padStart(2, "0"); }

      function utcToday() {
        var d = new Date();
        return d.getUTCFullYear() + "-" + pad(d.getUTCMonth() + 1) + "-" + pad(d.getUTCDate());
      }

      function parseParams() {
        var q = new URLSearchParams(window.location.search);
        var lat = parseFloat(q.get("lat"));
        var lon = parseFloat(q.get("lon"));
        return {
          lat: isFinite(lat) ? lat : 52.52,
          lon: isFinite(lon) ? lon : 13.405,
          name: q.get("name") || "Berlin",
          date: q.get("date") || utcToday()
        };
      }

      function formatDate(iso) {
        var parts = iso.split("-");
        var d = new Date(Date.UTC(+parts[0], +parts[1] - 1, +parts[2]));
        return d.toLocaleDateString("en-GB", {
          weekday: "long",
          year: "numeric",
          month: "long",
          day: "numeric",
          timeZone: "UTC"
        });
      }

      function isPast(dateStr) {
        return dateStr < utcToday();
      }

      function round1(n) {
        if (n == null || !isFinite(n)) return "—";
        return Math.round(n);
      }

      function fail() {
        document.getElementById("card").classList.add("hidden");
        document.getElementById("error").classList.remove("hidden");
        document.getElementById("sky").className = "sky clouds";
      }

      function render(p, data) {
        var daily = data.daily || {};
        var hourly = data.hourly || {};
        var tmax = daily.temperature_2m_max && daily.temperature_2m_max[0];
        var tmin = daily.temperature_2m_min && daily.temperature_2m_min[0];
        var code = daily.weather_code && daily.weather_code[0];
        var meta = WMO[code] || { label: "Unknown", icon: "·", sky: "clouds" };

        document.getElementById("place").textContent = p.name;
        document.getElementById("dateLabel").textContent = formatDate(p.date);
        document.getElementById("maxTemp").innerHTML = round1(tmax) + "<span>°</span>";
        document.getElementById("maxTempSmall").textContent = round1(tmax) + "°";
        document.getElementById("minTemp").textContent = round1(tmin) + "°";
        document.getElementById("icon").textContent = meta.icon;
        document.getElementById("condition").textContent = meta.label;
        document.getElementById("sky").className = "sky " + meta.sky;

        var times = hourly.time || [];
        var temps = hourly.temperature_2m || [];
        var filtered = [];
        for (var i = 0; i < times.length; i++) {
          if (times[i].indexOf(p.date) === 0 && temps[i] != null) {
            filtered.push({ time: times[i], temp: temps[i] });
          }
        }
        if (filtered.length === 0) {
          for (var j = 0; j < temps.length; j++) {
            if (temps[j] != null) filtered.push({ time: times[j], temp: temps[j] });
          }
        }

        var step = filtered.length > 24 ? Math.ceil(filtered.length / 24) : 1;
        var shown = [];
        for (var k = 0; k < filtered.length; k += step) shown.push(filtered[k]);
        if (shown.length > 12) {
          var keep = [];
          var stride = Math.ceil(shown.length / 12);
          for (var m = 0; m < shown.length; m += stride) keep.push(shown[m]);
          shown = keep.slice(0, 12);
        }

        var minH = Infinity, maxH = -Infinity;
        shown.forEach(function (h) {
          if (h.temp < minH) minH = h.temp;
          if (h.temp > maxH) maxH = h.temp;
        });
        var span = Math.max(maxH - minH, 1);

        var host = document.getElementById("hours");
        host.innerHTML = "";
        shown.forEach(function (h) {
          var hour = (h.time.split("T")[1] || "00:00").slice(0, 5);
          var pct = 18 + ((h.temp - minH) / span) * 82;
          var el = document.createElement("div");
          el.className = "hour";
          el.innerHTML =
            '<div class="t">' + hour + "</div>" +
            '<div class="bar-wrap"><div class="bar" style="height:' + pct + '%"></div></div>' +
            '<div class="deg">' + round1(h.temp) + "°</div>";
          host.appendChild(el);
        });
      }

      var p = parseParams();
      var endpoint = isPast(p.date) ? "/api/om/archive" : "/api/om/forecast";
      var qs =
        "latitude=" + encodeURIComponent(p.lat) +
        "&longitude=" + encodeURIComponent(p.lon) +
        "&daily=" + encodeURIComponent("temperature_2m_max,temperature_2m_min,weather_code") +
        "&hourly=" + encodeURIComponent("temperature_2m") +
        "&timezone=UTC" +
        "&temperature_unit=celsius" +
        "&start_date=" + encodeURIComponent(p.date) +
        "&end_date=" + encodeURIComponent(p.date);

      fetch(endpoint + "?" + qs)
        .then(function (res) {
          if (!res.ok) throw new Error("bad status");
          return res.json();
        })
        .then(function (data) {
          if (!data || !data.daily || !data.daily.temperature_2m_max) throw new Error("empty");
          render(p, data);
        })
        .catch(fail);
    })();
  </script>
</body>
</html>