cursor-grok-4.5 @ 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: #152028;
    --ink-soft: #3d5160;
    --muted: #6b8290;
    --line: rgba(21, 32, 40, 0.12);
    --panel: rgba(255, 255, 255, 0.38);
    --panel-strong: rgba(255, 255, 255, 0.55);
    --sky-a: #8eb6c4;
    --sky-b: #d4e2e8;
    --sky-c: #f0ebe3;
    --accent: #1f6f7a;
    --hi: #c45c2a;
    --lo: #2a6f9e;
  }

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

  html, body {
    width: 1280px;
    height: 800px;
    overflow: hidden;
    font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
    color: var(--ink);
    background: #c9d8df;
  }

  body {
    position: relative;
  }

  .sky {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 90% 60% at 18% 12%, rgba(255, 248, 230, 0.55), transparent 55%),
      radial-gradient(ellipse 70% 50% at 88% 18%, rgba(120, 170, 190, 0.45), transparent 50%),
      linear-gradient(165deg, var(--sky-a) 0%, var(--sky-b) 48%, var(--sky-c) 100%);
    animation: skyDrift 18s ease-in-out infinite alternate;
  }

  .sky::before {
    content: "";
    position: absolute;
    inset: -10%;
    background:
      radial-gradient(ellipse 40% 22% at 30% 28%, rgba(255, 255, 255, 0.35), transparent 70%),
      radial-gradient(ellipse 50% 24% at 62% 22%, rgba(255, 255, 255, 0.22), transparent 72%);
    animation: cloudShift 22s ease-in-out infinite alternate;
    pointer-events: none;
  }

  .grain {
    position: absolute;
    inset: 0;
    opacity: 0.07;
    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)'/%3E%3C/svg%3E");
  }

  .shell {
    position: relative;
    z-index: 1;
    width: 1280px;
    height: 800px;
    padding: 56px 72px 48px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 28px;
  }

  .top {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 40px;
    opacity: 0;
    transform: translateY(12px);
    animation: riseIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards;
  }

  .place {
    min-width: 0;
  }

  .place h1 {
    font-size: 72px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 0.95;
    max-width: 14ch;
  }

  .place .meta {
    margin-top: 14px;
    display: flex;
    align-items: baseline;
    gap: 18px;
    color: var(--ink-soft);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  .place .meta time {
    font-variant-numeric: tabular-nums;
  }

  .place .condition {
    color: var(--accent);
    font-weight: 600;
  }

  .temps {
    text-align: right;
    padding-bottom: 4px;
  }

  .temps .pair {
    display: flex;
    gap: 36px;
    justify-content: flex-end;
  }

  .temps .block {
    min-width: 110px;
  }

  .temps .label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 6px;
  }

  .temps .value {
    font-size: 64px;
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .temps .value.hi { color: var(--hi); }
  .temps .value.lo { color: var(--lo); }

  .temps .unit {
    font-size: 24px;
    font-weight: 500;
    vertical-align: super;
    margin-left: 2px;
    opacity: 0.7;
  }

  .mid {
    display: flex;
    align-items: stretch;
    opacity: 0;
    transform: translateY(16px);
    animation: riseIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.22s forwards;
  }

  .hourly-panel {
    flex: 1;
    background: var(--panel);
    border: 1px solid var(--line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 28px 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .hourly-panel h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--muted);
    font-weight: 600;
  }

  .chart {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    min-height: 0;
    padding-top: 8px;
  }

  .hour {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  .hour .temp {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
    letter-spacing: -0.02em;
  }

  .hour .bar-wrap {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 120px;
  }

  .hour .bar {
    width: 70%;
    max-width: 28px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, rgba(31, 111, 122, 0.85), rgba(42, 111, 158, 0.35));
    transform-origin: bottom;
    transform: scaleY(0);
    animation: barGrow 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .hour .tick {
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
  }

  .foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: 0.04em;
    opacity: 0;
    animation: riseIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
  }

  .error {
    position: relative;
    z-index: 2;
    width: 1280px;
    height: 800px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 48px;
    background:
      radial-gradient(ellipse 70% 50% at 50% 40%, rgba(255,255,255,0.35), transparent 70%),
      linear-gradient(165deg, #9aaeb8 0%, #c5d0d6 50%, #dde3e6 100%);
  }

  .error h1 {
    font-size: 42px;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .error p {
    font-size: 18px;
    color: var(--ink-soft);
    max-width: 36ch;
  }

  .hidden { display: none !important; }

  @keyframes riseIn {
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes barGrow {
    to { transform: scaleY(1); }
  }

  @keyframes skyDrift {
    from { filter: saturate(1) brightness(1); }
    to { filter: saturate(1.08) brightness(1.03); }
  }

  @keyframes cloudShift {
    from { transform: translateX(0) translateY(0); }
    to { transform: translateX(28px) translateY(-10px); }
  }
</style>
</head>
<body>
  <div id="app" class="hidden">
    <div class="sky" aria-hidden="true"></div>
    <div class="grain" aria-hidden="true"></div>
    <div class="shell">
      <header class="top">
        <div class="place">
          <h1 id="location">Berlin</h1>
          <div class="meta">
            <time id="dateLabel"></time>
            <span class="condition" id="condition"></span>
          </div>
        </div>
        <div class="temps">
          <div class="pair">
            <div class="block">
              <div class="label">High</div>
              <div class="value hi" id="tempMax"></div>
            </div>
            <div class="block">
              <div class="label">Low</div>
              <div class="value lo" id="tempMin"></div>
            </div>
          </div>
        </div>
      </header>
      <section class="mid">
        <div class="hourly-panel">
          <h2>Hourly temperature · °C</h2>
          <div class="chart" id="hourly"></div>
        </div>
      </section>
      <footer class="foot">
        <span id="coords"></span>
        <span>UTC · Celsius</span>
      </footer>
    </div>
  </div>
  <div id="error" class="error hidden">
    <h1>Weather data unavailable</h1>
    <p>The forecast could not be loaded for this location and date.</p>
  </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 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"
  };

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

  function parseParams() {
    const q = new URLSearchParams(window.location.search);
    const lat = q.get("lat") ?? "52.52";
    const lon = q.get("lon") ?? "13.405";
    const name = q.get("name") ?? "Berlin";
    const date = q.get("date") ?? todayUTC();
    return { lat, lon, name, date };
  }

  function formatDate(iso) {
    const [y, m, d] = iso.split("-").map(Number);
    const dt = new Date(Date.UTC(y, m - 1, d));
    return new Intl.DateTimeFormat("en-GB", {
      weekday: "long",
      day: "numeric",
      month: "long",
      year: "numeric",
      timeZone: "UTC"
    }).format(dt);
  }

  function weatherLabel(code) {
    if (code == null || Number.isNaN(Number(code))) return "Unknown";
    return WMO[Number(code)] || "Unknown conditions";
  }

  function fmtTemp(v) {
    if (v == null || Number.isNaN(Number(v))) return "—";
    const n = Math.round(Number(v));
    return n + "<span class=\"unit\">°</span>";
  }

  function showError() {
    document.getElementById("app").classList.add("hidden");
    document.getElementById("error").classList.remove("hidden");
  }

  function tintForCode(code) {
    const c = Number(code);
    const root = document.documentElement.style;
    if ([0, 1].includes(c)) {
      root.setProperty("--sky-a", "#7eb4d0");
      root.setProperty("--sky-b", "#d7e8f0");
      root.setProperty("--sky-c", "#f3efe6");
      root.setProperty("--accent", "#1c6e8c");
    } else if ([2, 3].includes(c)) {
      root.setProperty("--sky-a", "#8aa0ae");
      root.setProperty("--sky-b", "#c9d5dc");
      root.setProperty("--sky-c", "#e8e6e1");
      root.setProperty("--accent", "#3d5a66");
    } else if ([45, 48].includes(c)) {
      root.setProperty("--sky-a", "#9aa8b0");
      root.setProperty("--sky-b", "#d0d6d9");
      root.setProperty("--sky-c", "#ebecea");
      root.setProperty("--accent", "#5a6a72");
    } else if (c >= 51 && c <= 67 || c >= 80 && c <= 82) {
      root.setProperty("--sky-a", "#6f8798");
      root.setProperty("--sky-b", "#aebcc6");
      root.setProperty("--sky-c", "#d9e0e4");
      root.setProperty("--accent", "#2f5d73");
    } else if (c >= 71 && c <= 77 || c >= 85 && c <= 86) {
      root.setProperty("--sky-a", "#a8c0d0");
      root.setProperty("--sky-b", "#e0e8ee");
      root.setProperty("--sky-c", "#f4f6f8");
      root.setProperty("--accent", "#4a6f86");
    } else if (c >= 95) {
      root.setProperty("--sky-a", "#5d6b7a");
      root.setProperty("--sky-b", "#8f9aa6");
      root.setProperty("--sky-c", "#c5cbd0");
      root.setProperty("--accent", "#3a4550");
    }
  }

  async function load() {
    const { lat, lon, name, date } = parseParams();
    const today = todayUTC();
    const endpoint = date < today ? "/api/om/archive" : "/api/om/forecast";

    const url = new URL(endpoint, window.location.origin);
    url.searchParams.set("latitude", lat);
    url.searchParams.set("longitude", lon);
    url.searchParams.set("daily", "temperature_2m_max,temperature_2m_min,weather_code");
    url.searchParams.set("hourly", "temperature_2m");
    url.searchParams.set("timezone", "UTC");
    url.searchParams.set("temperature_unit", "celsius");
    url.searchParams.set("start_date", date);
    url.searchParams.set("end_date", date);

    let data;
    try {
      const res = await fetch(url.toString());
      if (!res.ok) throw new Error("bad status");
      data = await res.json();
    } catch (_) {
      showError();
      return;
    }

    const daily = data && data.daily;
    const hourly = data && data.hourly;
    if (!daily || !hourly || !daily.time || !daily.time.length) {
      showError();
      return;
    }

    const idx = daily.time.indexOf(date);
    const di = idx >= 0 ? idx : 0;

    const tMax = daily.temperature_2m_max && daily.temperature_2m_max[di];
    const tMin = daily.temperature_2m_min && daily.temperature_2m_min[di];
    const code = daily.weather_code && daily.weather_code[di];

    if (tMax == null && tMin == null) {
      showError();
      return;
    }

    const hours = [];
    const times = hourly.time || [];
    const temps = hourly.temperature_2m || [];
    for (let i = 0; i < times.length; i++) {
      if (String(times[i]).startsWith(date)) {
        hours.push({ time: times[i], temp: temps[i] });
      }
    }

    if (!hours.length) {
      showError();
      return;
    }

    tintForCode(code);

    document.getElementById("location").textContent = name;
    const dateEl = document.getElementById("dateLabel");
    dateEl.dateTime = date;
    dateEl.textContent = formatDate(date);
    document.getElementById("condition").textContent = weatherLabel(code);
    document.getElementById("tempMax").innerHTML = fmtTemp(tMax);
    document.getElementById("tempMin").innerHTML = fmtTemp(tMin);
    document.getElementById("coords").textContent =
      Number(lat).toFixed(2) + "°, " + Number(lon).toFixed(2) + "°";

    const nums = hours.map(function (h) { return Number(h.temp); }).filter(function (n) { return !Number.isNaN(n); });
    const minT = Math.min.apply(null, nums);
    const maxT = Math.max.apply(null, nums);
    const span = Math.max(maxT - minT, 1);

    const chart = document.getElementById("hourly");
    chart.innerHTML = "";
    hours.forEach(function (h, i) {
      const t = Number(h.temp);
      const hour = String(h.time).slice(11, 13);
      const pct = Number.isNaN(t) ? 8 : 18 + ((t - minT) / span) * 82;
      const el = document.createElement("div");
      el.className = "hour";
      el.innerHTML =
        "<div class=\"temp\">" + (Number.isNaN(t) ? "—" : Math.round(t) + "°") + "</div>" +
        "<div class=\"bar-wrap\"><div class=\"bar\" style=\"height:" + pct + "%;animation-delay:" + (0.28 + i * 0.018) + "s\"></div></div>" +
        "<div class=\"tick\">" + hour + "</div>";
      chart.appendChild(el);
    });

    document.getElementById("error").classList.add("hidden");
    document.getElementById("app").classList.remove("hidden");
  }

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