cursor-grok-4.5 @ medium · 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: #3a4a57;
    --muted: #6b7c8a;
    --line: rgba(14, 26, 36, 0.1);
    --panel: rgba(255, 255, 255, 0.42);
    --panel-strong: rgba(255, 255, 255, 0.62);
    --accent: #c45c26;
    --sky-top: #7eb6d9;
    --sky-mid: #c5dde8;
    --sky-bot: #eef3f0;
    --glow: rgba(255, 214, 160, 0.55);
  }

  * { 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: #0b1220;
  }

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

  .stage {
    position: relative;
    width: 1280px;
    height: 800px;
    overflow: hidden;
    background:
      radial-gradient(ellipse 900px 480px at 78% 18%, var(--glow), transparent 60%),
      linear-gradient(165deg, var(--sky-top) 0%, var(--sky-mid) 48%, var(--sky-bot) 100%);
    transition: background 0.8s ease;
  }

  .stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 18% 78%, rgba(255,255,255,0.25), transparent 42%),
      radial-gradient(circle at 86% 72%, rgba(14,26,36,0.06), transparent 35%);
    pointer-events: none;
  }

  .haze {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -8%;
    height: 42%;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.35) 40%, rgba(238,243,240,0.85));
    filter: blur(18px);
    animation: drift 18s ease-in-out infinite alternate;
    pointer-events: none;
  }

  @keyframes drift {
    from { transform: translateX(-2%) translateY(0); }
    to { transform: translateX(3%) translateY(-1.5%); }
  }

  .sun {
    position: absolute;
    top: 72px;
    right: 140px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff7e6 0%, #ffd27a 38%, #f0a35a 70%, transparent 72%);
    box-shadow: 0 0 80px 30px rgba(255, 200, 120, 0.35);
    opacity: 0.9;
    animation: pulse 6s ease-in-out infinite;
    pointer-events: none;
  }

  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.88; }
    50% { transform: scale(1.04); opacity: 1; }
  }

  .content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 56px 72px 48px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 28px;
  }

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

  .place {
    max-width: 720px;
  }

  .place h1 {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: 72px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: var(--ink);
    text-wrap: balance;
  }

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

  .condition-block {
    text-align: right;
    padding-top: 10px;
    min-width: 240px;
  }

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

  .condition {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: 32px;
    line-height: 1.15;
    color: var(--ink);
  }

  .temps {
    display: flex;
    align-items: flex-end;
    gap: 48px;
    padding: 8px 0 12px;
  }

  .temp-main {
    display: flex;
    align-items: flex-start;
    gap: 6px;
  }

  .temp-main .value {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: 168px;
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 0.82;
    color: var(--ink);
  }

  .temp-main .unit {
    font-size: 36px;
    font-weight: 500;
    margin-top: 18px;
    color: var(--ink-soft);
  }

  .temp-range {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 14px;
  }

  .range-item {
    display: grid;
    grid-template-columns: 48px auto;
    align-items: baseline;
    gap: 12px;
  }

  .range-item .label {
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .range-item .num {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: 42px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
  }

  .hourly {
    background: var(--panel);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 20px;
    padding: 22px 28px 20px;
    box-shadow: 0 20px 50px rgba(14, 26, 36, 0.08);
  }

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

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

  .hourly-head span {
    font-size: 13px;
    color: var(--ink-soft);
  }

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

  .hour {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

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

  .hour .bar {
    width: 70%;
    max-width: 18px;
    border-radius: 999px 999px 6px 6px;
    background: linear-gradient(180deg, rgba(196, 92, 38, 0.85), rgba(14, 26, 36, 0.18));
    transform-origin: bottom;
    animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes rise {
    from { transform: scaleY(0.15); opacity: 0; }
    to { transform: scaleY(1); opacity: 1; }
  }

  .hour .t {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .hour .h {
    font-size: 10px;
    letter-spacing: 0.02em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }

  .error, .loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    background:
      radial-gradient(ellipse 800px 420px at 50% 40%, rgba(255,255,255,0.55), transparent 70%),
      linear-gradient(165deg, #8aa8be 0%, #d5e2e8 55%, #eef2ef 100%);
    text-align: center;
    padding: 48px;
  }

  .error h1, .loading h1 {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: 48px;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
  }

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

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

  .hidden { display: none !important; }

  .stage[data-theme="clear"] {
    --sky-top: #5ea6d4;
    --sky-mid: #b9d8ea;
    --sky-bot: #eef4f1;
    --glow: rgba(255, 214, 150, 0.6);
  }

  .stage[data-theme="cloudy"] {
    --sky-top: #7f93a5;
    --sky-mid: #b7c4ce;
    --sky-bot: #e4e8ea;
    --glow: rgba(220, 230, 240, 0.35);
  }

  .stage[data-theme="rain"] {
    --sky-top: #4d6578;
    --sky-mid: #7f96a6;
    --sky-bot: #c9d4db;
    --glow: rgba(160, 190, 210, 0.25);
    --ink: #10202c;
  }

  .stage[data-theme="snow"] {
    --sky-top: #9bb4c8;
    --sky-mid: #d4e0ea;
    --sky-bot: #f2f5f7;
    --glow: rgba(255, 255, 255, 0.7);
  }

  .stage[data-theme="storm"] {
    --sky-top: #2f3d4d;
    --sky-mid: #5a6d7d;
    --sky-bot: #9aadb8;
    --glow: rgba(180, 200, 220, 0.2);
    --ink: #0d1720;
    --panel: rgba(255,255,255,0.28);
  }

  .stage[data-theme="fog"] {
    --sky-top: #9aa6ad;
    --sky-mid: #c8d0d4;
    --sky-bot: #e8ecee;
    --glow: rgba(255,255,255,0.45);
  }

  .stage[data-theme="clear"] .sun { opacity: 1; }
  .stage[data-theme="cloudy"] .sun,
  .stage[data-theme="rain"] .sun,
  .stage[data-theme="storm"] .sun,
  .stage[data-theme="fog"] .sun,
  .stage[data-theme="snow"] .sun { opacity: 0.25; filter: grayscale(0.4); }
</style>
</head>
<body>
  <div class="stage" id="stage" data-theme="clear">
    <div class="sun" id="sun"></div>
    <div class="haze"></div>

    <div class="loading" id="loading">
      <div>
        <div class="pulse-dot"></div>
        <h1>Fetching sky</h1>
        <p>Loading weather for your location…</p>
      </div>
    </div>

    <div class="error hidden" id="error">
      <div>
        <h1>Weather unavailable</h1>
        <p>The data could not be loaded. Check the location and date, then try again.</p>
      </div>
    </div>

    <div class="content hidden" id="content">
      <header class="top">
        <div class="place">
          <h1 id="name">Berlin</h1>
          <div class="date" id="dateLabel">—</div>
        </div>
        <div class="condition-block">
          <div class="condition-label">Condition</div>
          <div class="condition" id="condition">—</div>
        </div>
      </header>

      <section class="temps">
        <div class="temp-main">
          <div class="value" id="maxTemp">—</div>
          <div class="unit">°C</div>
        </div>
        <div class="temp-range">
          <div class="range-item">
            <span class="label">High</span>
            <span class="num" id="maxTempSide">—</span>
          </div>
          <div class="range-item">
            <span class="label">Low</span>
            <span class="num" id="minTemp">—</span>
          </div>
        </div>
      </section>

      <section class="hourly">
        <div class="hourly-head">
          <h2>Hourly temperature</h2>
          <span id="hourSummary">24 hours · °C</span>
        </div>
        <div class="hours" id="hours"></div>
      </section>
    </div>
  </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 themeForCode(code) {
    if (code === 0 || code === 1) return "clear";
    if (code === 2 || code === 3) return "cloudy";
    if (code === 45 || code === 48) return "fog";
    if ([71, 73, 75, 77, 85, 86].includes(code)) return "snow";
    if ([95, 96, 99].includes(code)) return "storm";
    if ([51, 53, 55, 56, 57, 61, 63, 65, 66, 67, 80, 81, 82].includes(code)) return "rain";
    return "cloudy";
  }

  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 [y, m, d] = dateStr.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 showError() {
    document.getElementById("loading").classList.add("hidden");
    document.getElementById("content").classList.add("hidden");
    document.getElementById("error").classList.remove("hidden");
  }

  function buildUrl(base, params) {
    const sp = 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
    });
    return `${base}?${sp.toString()}`;
  }

  function roundTemp(t) {
    if (t == null || Number.isNaN(t)) return null;
    return Math.round(t);
  }

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

    if (max == null || min == null || code == null || !times.length || !temps.length) {
      showError();
      return;
    }

    const theme = themeForCode(code);
    document.getElementById("stage").setAttribute("data-theme", theme);

    document.getElementById("name").textContent = params.name;
    document.getElementById("dateLabel").textContent = formatDisplayDate(params.date);
    document.getElementById("condition").textContent = WMO[code] || `Code ${code}`;
    document.getElementById("maxTemp").textContent = String(max);
    document.getElementById("maxTempSide").textContent = `${max}°`;
    document.getElementById("minTemp").textContent = `${min}°`;

    const nums = temps.map((t) => (t == null ? null : Number(t))).filter((t) => t != null);
    const lo = Math.min(...nums);
    const hi = Math.max(...nums);
    const span = Math.max(hi - lo, 1);

    const hoursEl = document.getElementById("hours");
    hoursEl.innerHTML = "";

    const pairs = times.map((t, i) => ({ time: t, temp: temps[i] }))
      .filter((p) => p.time && p.time.startsWith(params.date));

    const list = pairs.length ? pairs : times.map((t, i) => ({ time: t, temp: temps[i] }));

    list.forEach((p, i) => {
      const temp = roundTemp(p.temp);
      if (temp == null) return;
      const hour = p.time.slice(11, 13) || String(i).padStart(2, "0");
      const height = 18 + ((Number(p.temp) - lo) / span) * 92;
      const el = document.createElement("div");
      el.className = "hour";
      el.innerHTML =
        `<div class="bar-wrap"><div class="bar" style="height:${height}px;animation-delay:${i * 18}ms"></div></div>` +
        `<div class="t">${temp}°</div>` +
        `<div class="h">${hour}</div>`;
      hoursEl.appendChild(el);
    });

    document.getElementById("hourSummary").textContent =
      `${list.length} hours · ${min}° to ${max}°C`;

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

  async function main() {
    const params = parseParams();
    const endpoint = isPastDate(params.date) ? "/api/om/archive" : "/api/om/forecast";
    try {
      const res = await fetch(buildUrl(endpoint, params));
      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 (e) {
      showError();
    }
  }

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