cursor-grok-4.5 @ medium · 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: #1a2332;
    --ink-soft: #4a5568;
    --line: rgba(26, 35, 50, 0.12);
    --surface: rgba(255, 255, 255, 0.42);
    --accent: #2a6f7f;
    --temp-warm: #c45c26;
    --temp-cool: #2a6f7f;
    --sky-top: #c5d9e8;
    --sky-mid: #e8eef4;
    --sky-bot: #f4f0e8;
  }

  * { 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: var(--sky-bot);
  }

  body {
    position: relative;
  }

  .sky {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 90% 60% at 18% 12%, var(--sky-top) 0%, transparent 55%),
      radial-gradient(ellipse 70% 50% at 88% 20%, rgba(255, 255, 255, 0.55) 0%, transparent 50%),
      linear-gradient(165deg, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-bot) 100%);
    transition: background 0.8s ease;
  }

  .sky::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(
        -12deg,
        transparent,
        transparent 48px,
        rgba(255, 255, 255, 0.03) 48px,
        rgba(255, 255, 255, 0.03) 49px
      );
    pointer-events: none;
    opacity: 0.7;
  }

  .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.45;
    pointer-events: none;
    animation: drift 18s ease-in-out infinite alternate;
  }

  .orb-a {
    width: 320px;
    height: 320px;
    top: -60px;
    right: 180px;
    background: radial-gradient(circle, #fff6d6 0%, transparent 70%);
  }

  .orb-b {
    width: 420px;
    height: 280px;
    bottom: 40px;
    left: -80px;
    background: radial-gradient(circle, rgba(90, 140, 160, 0.35) 0%, transparent 70%);
    animation-delay: -6s;
  }

  @keyframes drift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(24px, 16px) scale(1.06); }
  }

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

  .masthead {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 32px;
    animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .place {
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
    font-size: 72px;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 0.95;
    max-width: 720px;
  }

  .meta {
    text-align: right;
    padding-bottom: 8px;
  }

  .date {
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 500;
  }

  .condition {
    margin-top: 10px;
    font-size: 22px;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: -0.01em;
  }

  .temps {
    display: flex;
    align-items: flex-end;
    gap: 48px;
    animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
  }

  .temp-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

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

  .temp-value {
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
    font-size: 120px;
    line-height: 0.85;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
  }

  .temp-value .unit {
    font-size: 42px;
    vertical-align: super;
    margin-left: 4px;
    opacity: 0.55;
    letter-spacing: 0;
  }

  .temp-block.max .temp-value { color: var(--temp-warm); }
  .temp-block.min .temp-value { color: var(--temp-cool); }

  .divider {
    width: 1px;
    align-self: stretch;
    background: var(--line);
    margin: 12px 0 8px;
  }

  .hourly {
    animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
  }

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

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

  .hourly-range {
    font-size: 14px;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
  }

  .chart-wrap {
    position: relative;
    height: 220px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.08) 100%
    );
  }

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

  .hours {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    margin-top: 10px;
  }

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

  .hour:nth-child(odd) { opacity: 0; }
  .hour:nth-child(4n+1) { opacity: 1; }

  .status {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 2;
    background:
      radial-gradient(ellipse 80% 60% at 50% 40%, #d7e4ee 0%, transparent 60%),
      linear-gradient(165deg, #c8d8e6, #ece7dc);
  }

  .status[hidden] { display: none; }

  .status-inner {
    text-align: center;
    max-width: 480px;
    padding: 40px;
  }

  .status-title {
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
    font-size: 36px;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
  }

  .status-copy {
    font-size: 17px;
    color: var(--ink-soft);
    line-height: 1.5;
  }

  .loading-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    margin: 0 auto 24px;
    animation: pulse 1.2s ease-in-out infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 0.3; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.15); }
  }

  body.is-clear {
    --sky-top: #9ec8e6;
    --sky-mid: #d9eaf6;
    --sky-bot: #f2ebe0;
    --accent: #2f6b8a;
  }

  body.is-cloud {
    --sky-top: #a8b8c8;
    --sky-mid: #d5dde5;
    --sky-bot: #ebe6dc;
    --accent: #4a5d6e;
  }

  body.is-rain {
    --sky-top: #7a91a8;
    --sky-mid: #b8c6d4;
    --sky-bot: #d9dde2;
    --accent: #3d5a73;
  }

  body.is-snow {
    --sky-top: #c9d6e4;
    --sky-mid: #e8eef4;
    --sky-bot: #f5f7fa;
    --accent: #5a7a94;
  }

  body.is-fog {
    --sky-top: #b8c0c8;
    --sky-mid: #d8dde2;
    --sky-bot: #e8e6e0;
    --accent: #6a737c;
  }

  body.is-storm {
    --sky-top: #5c6b7a;
    --sky-mid: #8a9aaa;
    --sky-bot: #c4cdd6;
    --accent: #364555;
    --ink: #1c2430;
  }
</style>
</head>
<body>
  <div class="sky" aria-hidden="true"></div>
  <div class="orb orb-a" aria-hidden="true"></div>
  <div class="orb orb-b" aria-hidden="true"></div>

  <div class="status" id="status">
    <div class="status-inner">
      <div class="loading-pulse" id="statusPulse"></div>
      <h1 class="status-title" id="statusTitle">Loading weather</h1>
      <p class="status-copy" id="statusCopy">Fetching conditions for your location…</p>
    </div>
  </div>

  <main class="stage" id="stage" hidden>
    <header class="masthead">
      <h1 class="place" id="place"></h1>
      <div class="meta">
        <div class="date" id="dateLabel"></div>
        <div class="condition" id="condition"></div>
      </div>
    </header>

    <section class="temps" aria-label="Daily temperature range">
      <div class="temp-block max">
        <span class="temp-label">High</span>
        <div class="temp-value" id="tempMax"></div>
      </div>
      <div class="divider" aria-hidden="true"></div>
      <div class="temp-block min">
        <span class="temp-label">Low</span>
        <div class="temp-value" id="tempMin"></div>
      </div>
    </section>

    <section class="hourly" aria-label="Hourly temperatures">
      <div class="hourly-head">
        <h2 class="hourly-title">Hourly temperature</h2>
        <div class="hourly-range" id="hourlyRange"></div>
      </div>
      <div class="chart-wrap">
        <svg id="chart" viewBox="0 0 1136 220" preserveAspectRatio="none" role="img" aria-label="Hourly temperature chart"></svg>
      </div>
      <div class="hours" id="hours"></div>
    </section>
  </main>

<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() {
    const now = new Date();
    const y = now.getUTCFullYear();
    const m = String(now.getUTCMonth() + 1).padStart(2, "0");
    const d = String(now.getUTCDate()).padStart(2, "0");
    return y + "-" + m + "-" + d;
  }

  function parseParams() {
    const q = new URLSearchParams(window.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",
      date: q.get("date") || todayUTC()
    };
  }

  function isPastDate(dateStr) {
    return dateStr < todayUTC();
  }

  function formatDisplayDate(dateStr) {
    const parts = dateStr.split("-").map(Number);
    const dt = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2]));
    return new Intl.DateTimeFormat("en-GB", {
      weekday: "long",
      day: "numeric",
      month: "long",
      year: "numeric",
      timeZone: "UTC"
    }).format(dt);
  }

  function weatherTheme(code) {
    if (code === 0 || code === 1) return "is-clear";
    if (code === 2 || code === 3) return "is-cloud";
    if (code === 45 || code === 48) return "is-fog";
    if (code >= 71 && code <= 77) return "is-snow";
    if (code === 85 || code === 86) return "is-snow";
    if (code >= 95) return "is-storm";
    if (code >= 51) return "is-rain";
    return "is-cloud";
  }

  function conditionLabel(code) {
    return WMO[code] || "Unknown conditions";
  }

  function formatTemp(n) {
    if (!Number.isFinite(n)) return "—";
    const rounded = Math.round(n);
    return (rounded > 0 ? "+" : "") + rounded;
  }

  function showError(message) {
    const status = document.getElementById("status");
    const pulse = document.getElementById("statusPulse");
    document.getElementById("statusTitle").textContent = "Weather unavailable";
    document.getElementById("statusCopy").textContent = message;
    pulse.style.display = "none";
    status.hidden = false;
    document.getElementById("stage").hidden = true;
  }

  function buildHourlyChart(temps) {
    const svg = document.getElementById("chart");
    const hoursEl = document.getElementById("hours");
    const width = 1136;
    const height = 220;
    const padX = 8;
    const padY = 28;
    const n = temps.length;
    const min = Math.min.apply(null, temps);
    const max = Math.max.apply(null, temps);
    const span = Math.max(max - min, 1);

    function xAt(i) {
      return padX + (i / Math.max(n - 1, 1)) * (width - padX * 2);
    }

    function yAt(v) {
      return padY + (1 - (v - min) / span) * (height - padY * 2);
    }

    const points = temps.map(function (t, i) {
      return xAt(i).toFixed(1) + "," + yAt(t).toFixed(1);
    });

    const areaPoints =
      xAt(0).toFixed(1) + "," + (height - 4) + " " +
      points.join(" ") + " " +
      xAt(n - 1).toFixed(1) + "," + (height - 4);

    let dots = "";
    let labels = "";
    temps.forEach(function (t, i) {
      if (i % 3 !== 0 && i !== n - 1) return;
      const x = xAt(i);
      const y = yAt(t);
      dots +=
        '<circle cx="' + x.toFixed(1) + '" cy="' + y.toFixed(1) +
        '" r="3.5" fill="#1a2332" opacity="0.85"/>';
      labels +=
        '<text x="' + x.toFixed(1) + '" y="' + (y - 12).toFixed(1) +
        '" text-anchor="middle" font-size="12" font-family="Avenir Next, Segoe UI, sans-serif" fill="#1a2332" opacity="0.75">' +
        Math.round(t) + "°</text>";
    });

    svg.innerHTML =
      '<defs>' +
        '<linearGradient id="areaFill" x1="0" y1="0" x2="0" y2="1">' +
          '<stop offset="0%" stop-color="#2a6f7f" stop-opacity="0.28"/>' +
          '<stop offset="100%" stop-color="#2a6f7f" stop-opacity="0"/>' +
        '</linearGradient>' +
      '</defs>' +
      '<polygon points="' + areaPoints + '" fill="url(#areaFill)"/>' +
      '<polyline points="' + points.join(" ") +
        '" fill="none" stroke="#2a6f7f" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>' +
      dots + labels;

    hoursEl.innerHTML = temps.map(function (_, i) {
      return '<div class="hour">' + String(i).padStart(2, "0") + "</div>";
    }).join("");

    document.getElementById("hourlyRange").textContent =
      Math.round(min) + "° to " + Math.round(max) + "° across the day";
  }

  function render(params, data) {
    const daily = data.daily || {};
    const hourly = data.hourly || {};
    const max = daily.temperature_2m_max && daily.temperature_2m_max[0];
    const min = daily.temperature_2m_min && daily.temperature_2m_min[0];
    const code = daily.weather_code && daily.weather_code[0];
    const temps = hourly.temperature_2m;

    if (
      !Number.isFinite(max) ||
      !Number.isFinite(min) ||
      code === undefined ||
      code === null ||
      !Array.isArray(temps) ||
      temps.length === 0
    ) {
      showError("The data could not be loaded for this date and location.");
      return;
    }

    document.body.className = weatherTheme(Number(code));
    document.getElementById("place").textContent = params.name;
    document.getElementById("dateLabel").textContent = formatDisplayDate(params.date);
    document.getElementById("condition").textContent = conditionLabel(Number(code));
    document.getElementById("tempMax").innerHTML =
      formatTemp(max) + '<span class="unit">°C</span>';
    document.getElementById("tempMin").innerHTML =
      formatTemp(min) + '<span class="unit">°C</span>';
    buildHourlyChart(temps.map(Number));

    document.getElementById("status").hidden = true;
    document.getElementById("stage").hidden = false;
  }

  async function load() {
    const params = parseParams();
    const endpoint = isPastDate(params.date) ? "/api/om/archive" : "/api/om/forecast";
    const qs = new URLSearchParams({
      latitude: String(params.lat),
      longitude: String(params.lon),
      daily: "temperature_2m_max,temperature_2m_min,weather_code",
      hourly: "temperature_2m",
      timezone: "UTC",
      temperature_unit: "celsius",
      start_date: params.date,
      end_date: params.date
    });

    try {
      const res = await fetch(endpoint + "?" + qs.toString());
      if (!res.ok) throw new Error("bad status");
      const data = await res.json();
      if (data.error) throw new Error(data.reason || "api error");
      render(params, data);
    } catch (err) {
      showError("The data could not be loaded. Please check the location and date, then try again.");
    }
  }

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