cursor-grok-4.5 @ 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: #0e1a24;
    --ink-soft: rgba(14, 26, 36, 0.62);
    --line: rgba(14, 26, 36, 0.12);
    --glow: rgba(255, 255, 255, 0.55);
    --accent: #1f6f7a;
    --sky-top: #9ec8d8;
    --sky-mid: #c5dde8;
    --sky-bot: #e8eef2;
    --band: rgba(255, 255, 255, 0.28);
  }

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

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

  body {
    position: relative;
  }

  .sky {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 90% 55% at 18% 12%, var(--glow), transparent 55%),
      radial-gradient(ellipse 70% 45% at 88% 18%, rgba(255, 220, 170, 0.35), transparent 50%),
      linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-bot) 100%);
    animation: skyDrift 18s ease-in-out infinite alternate;
  }

  .sky::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.08) 45%, transparent 70%),
      repeating-linear-gradient(
        -18deg,
        transparent 0 14px,
        rgba(255, 255, 255, 0.03) 14px 15px
      );
    pointer-events: none;
  }

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

  .frame {
    position: relative;
    z-index: 1;
    width: 1280px;
    height: 800px;
    padding: 64px 80px 56px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    opacity: 0;
    transform: translateY(14px);
    animation: riseIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
  }

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

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

  .identity {
    max-width: 760px;
  }

  .location {
    font-size: 92px;
    line-height: 0.92;
    letter-spacing: -0.045em;
    font-weight: 600;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  }

  .date {
    margin-top: 18px;
    font-size: 22px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 500;
  }

  .temps {
    text-align: right;
    padding-top: 10px;
    min-width: 280px;
  }

  .temps .pair {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 28px;
  }

  .temp-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .temp-label {
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 6px;
  }

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

  .temp-value span {
    font-size: 28px;
    margin-left: 2px;
    opacity: 0.55;
    font-weight: 500;
  }

  .condition-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 0 40px;
  }

  .condition {
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 500;
    max-width: 820px;
    color: var(--ink);
  }

  .condition-rule {
    width: 72px;
    height: 3px;
    margin: 28px 0 0;
    background: var(--accent);
    transform-origin: left center;
    animation: ruleGrow 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
  }

  @keyframes ruleGrow {
    from { transform: scaleX(0); opacity: 0; }
    to { transform: scaleX(1); opacity: 1; }
  }

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

  .hourly-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 22px;
  }

  .hourly-title {
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 600;
  }

  .hourly-unit {
    font-size: 13px;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
  }

  .hours {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 6px;
    align-items: end;
    height: 168px;
  }

  .hour {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 10px;
    opacity: 0;
    transform: translateY(10px);
    animation: hourIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

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

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

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

  .hour-bar {
    width: 100%;
    max-width: 28px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, rgba(31, 111, 122, 0.85), rgba(31, 111, 122, 0.28));
    transform-origin: bottom center;
    animation: barRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    min-height: 4px;
  }

  @keyframes barRise {
    from { transform: scaleY(0.15); opacity: 0.4; }
    to { transform: scaleY(1); opacity: 1; }
  }

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

  .error {
    position: relative;
    z-index: 1;
    width: 1280px;
    height: 800px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px;
    background:
      radial-gradient(ellipse 80% 50% at 50% 30%, rgba(255,255,255,0.5), transparent 60%),
      linear-gradient(180deg, #b7c4cc 0%, #dfe6ea 100%);
  }

  .error h1 {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    font-size: 64px;
    letter-spacing: -0.03em;
    margin-bottom: 18px;
  }

  .error p {
    font-size: 22px;
    color: var(--ink-soft);
    max-width: 520px;
    line-height: 1.45;
  }

  body[data-theme="clear"] {
    --sky-top: #7eb6d4;
    --sky-mid: #b9d7e8;
    --sky-bot: #e7f0f4;
    --accent: #1a6d8f;
    --glow: rgba(255, 245, 220, 0.55);
  }

  body[data-theme="cloud"] {
    --sky-top: #8a9aaa;
    --sky-mid: #b8c3cc;
    --sky-bot: #e4e8eb;
    --accent: #4a5d6a;
    --glow: rgba(255, 255, 255, 0.4);
  }

  body[data-theme="rain"] {
    --sky-top: #5f7386;
    --sky-mid: #8fa0af;
    --sky-bot: #d5dde3;
    --accent: #2f5268;
    --glow: rgba(190, 210, 230, 0.35);
  }

  body[data-theme="snow"] {
    --sky-top: #9bb0c2;
    --sky-mid: #c9d5e0;
    --sky-bot: #eef2f5;
    --accent: #5a7388;
    --glow: rgba(255, 255, 255, 0.7);
  }

  body[data-theme="storm"] {
    --sky-top: #3f4d5c;
    --sky-mid: #6d7c8a;
    --sky-bot: #c5ced6;
    --accent: #243746;
    --glow: rgba(180, 200, 220, 0.25);
    --ink: #0c141c;
  }

  body[data-theme="fog"] {
    --sky-top: #a8b0b6;
    --sky-mid: #c9ced2;
    --sky-bot: #e8eaec;
    --accent: #667178;
    --glow: rgba(255, 255, 255, 0.55);
  }
</style>
</head>
<body>
<div class="sky" aria-hidden="true"></div>
<main id="app"></main>
<script>
(function () {
  const WMO = {
    0: ["Clear sky", "clear"],
    1: ["Mainly clear", "clear"],
    2: ["Partly cloudy", "cloud"],
    3: ["Overcast", "cloud"],
    45: ["Fog", "fog"],
    48: ["Depositing rime fog", "fog"],
    51: ["Light drizzle", "rain"],
    53: ["Moderate drizzle", "rain"],
    55: ["Dense drizzle", "rain"],
    56: ["Light freezing drizzle", "rain"],
    57: ["Dense freezing drizzle", "rain"],
    61: ["Slight rain", "rain"],
    63: ["Moderate rain", "rain"],
    65: ["Heavy rain", "rain"],
    66: ["Light freezing rain", "rain"],
    67: ["Heavy freezing rain", "rain"],
    71: ["Slight snow", "snow"],
    73: ["Moderate snow", "snow"],
    75: ["Heavy snow", "snow"],
    77: ["Snow grains", "snow"],
    80: ["Slight rain showers", "rain"],
    81: ["Moderate rain showers", "rain"],
    82: ["Violent rain showers", "rain"],
    85: ["Slight snow showers", "snow"],
    86: ["Heavy snow showers", "snow"],
    95: ["Thunderstorm", "storm"],
    96: ["Thunderstorm with slight hail", "storm"],
    99: ["Thunderstorm with heavy hail", "storm"]
  };

  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 = 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 formatDisplayDate(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 weatherInfo(code) {
    return WMO[code] || ["Unknown conditions", "cloud"];
  }

  function esc(s) {
    return String(s)
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;");
  }

  function showError(msg) {
    document.body.removeAttribute("data-theme");
    document.getElementById("app").innerHTML =
      '<section class="error"><h1>Weather unavailable</h1><p>' + esc(msg) + "</p></section>";
  }

  function pickEndpoint(date) {
    return date < todayUTC() ? "/api/om/archive" : "/api/om/forecast";
  }

  async function load() {
    const p = parseParams();
    const endpoint = pickEndpoint(p.date);
    const url = endpoint +
      "?latitude=" + encodeURIComponent(p.lat) +
      "&longitude=" + encodeURIComponent(p.lon) +
      "&daily=temperature_2m_max,temperature_2m_min,weather_code" +
      "&hourly=temperature_2m" +
      "&timezone=UTC" +
      "&temperature_unit=celsius" +
      "&start_date=" + encodeURIComponent(p.date) +
      "&end_date=" + encodeURIComponent(p.date);

    let data;
    try {
      const res = await fetch(url);
      if (!res.ok) throw new Error("Request failed");
      data = await res.json();
    } catch (e) {
      showError("The weather data could not be loaded for this location and date.");
      return;
    }

    const daily = data && data.daily;
    const hourly = data && data.hourly;
    if (!daily || !daily.time || !daily.time.length ||
        daily.temperature_2m_max == null || daily.temperature_2m_min == null ||
        !hourly || !hourly.time || !hourly.temperature_2m) {
      showError("The weather data could not be loaded for this location and date.");
      return;
    }

    const tmax = daily.temperature_2m_max[0];
    const tmin = daily.temperature_2m_min[0];
    const code = daily.weather_code[0];
    if (tmax == null || tmin == null || code == null) {
      showError("The weather data could not be loaded for this location and date.");
      return;
    }

    const [condition, theme] = weatherInfo(code);
    document.body.setAttribute("data-theme", theme);

    const hours = [];
    for (let i = 0; i < hourly.time.length; i++) {
      if (hourly.time[i].slice(0, 10) !== p.date) continue;
      const t = hourly.temperature_2m[i];
      if (t == null) continue;
      hours.push({
        hour: hourly.time[i].slice(11, 13),
        temp: t
      });
    }

    if (!hours.length) {
      showError("The weather data could not be loaded for this location and date.");
      return;
    }

    const temps = hours.map(h => h.temp);
    const minH = Math.min.apply(null, temps);
    const maxH = Math.max.apply(null, temps);
    const span = Math.max(maxH - minH, 1);

    function fmtTemp(v) {
      const n = Math.round(v);
      return (n > 0 ? "+" : "") + n;
    }

    const bars = hours.map(function (h, i) {
      const pct = 18 + ((h.temp - minH) / span) * 82;
      const delay = (0.35 + i * 0.028).toFixed(3) + "s";
      const showLabel = i % 3 === 0 || i === hours.length - 1;
      return (
        '<div class="hour" style="animation-delay:' + delay + '">' +
          '<div class="hour-temp">' + fmtTemp(h.temp) + "°</div>" +
          '<div class="hour-bar-wrap"><div class="hour-bar" style="height:' + pct.toFixed(1) + "%;animation-delay:" + delay + '"></div></div>' +
          '<div class="hour-label">' + (showLabel ? h.hour : "") + "</div>" +
        "</div>"
      );
    }).join("");

    document.getElementById("app").innerHTML =
      '<section class="frame">' +
        '<header class="top">' +
          '<div class="identity">' +
            '<h1 class="location">' + esc(p.name) + "</h1>" +
            '<p class="date">' + esc(formatDisplayDate(p.date)) + "</p>" +
          "</div>" +
          '<div class="temps">' +
            '<div class="pair">' +
              '<div class="temp-block">' +
                '<div class="temp-label">High</div>' +
                '<div class="temp-value">' + Math.round(tmax) + "<span>°C</span></div>" +
              "</div>" +
              '<div class="temp-block">' +
                '<div class="temp-label">Low</div>' +
                '<div class="temp-value">' + Math.round(tmin) + "<span>°C</span></div>" +
              "</div>" +
            "</div>" +
          "</div>" +
        "</header>" +
        '<div class="condition-wrap">' +
          '<p class="condition">' + esc(condition) + "</p>" +
          '<div class="condition-rule" aria-hidden="true"></div>' +
        "</div>" +
        '<section class="hourly">' +
          '<div class="hourly-head">' +
            '<h2 class="hourly-title">Hourly temperature</h2>' +
            '<div class="hourly-unit">UTC · Celsius</div>' +
          "</div>" +
          '<div class="hours">' + bars + "</div>" +
        "</section>" +
      "</section>";
  }

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