cursor-grok-4.5 @ high · 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;
    --ink-muted: #7a8699;
    --paper: #e8eef4;
    --glass: rgba(255, 255, 255, 0.55);
    --glass-edge: rgba(255, 255, 255, 0.7);
    --line: rgba(26, 35, 50, 0.1);
    --accent: #2a6f8f;
    --temp-high: #c45c26;
    --temp-low: #2a6f8f;
    --sky-top: #7ba3c4;
    --sky-mid: #b8cfe0;
    --sky-bot: #e4ecf2;
  }

  * { 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(--paper);
  }

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

  .stage {
    position: relative;
    width: 1280px;
    height: 800px;
    overflow: hidden;
    background:
      radial-gradient(ellipse 90% 60% at 70% 15%, var(--sky-mid) 0%, transparent 55%),
      radial-gradient(ellipse 50% 40% at 20% 80%, rgba(255,255,255,0.45) 0%, transparent 50%),
      linear-gradient(165deg, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-bot) 100%);
    animation: skyIn 1.1s ease-out both;
  }

  .stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 18% 22%, rgba(255,255,255,0.35) 0%, transparent 28%),
      radial-gradient(circle at 82% 28%, rgba(255,255,255,0.2) 0%, transparent 22%);
    pointer-events: none;
    animation: haze 8s ease-in-out infinite alternate;
  }

  .stage[data-cond="clear"] {
    --sky-top: #5a9bc4;
    --sky-mid: #a8cce0;
    --sky-bot: #e8f0f6;
  }
  .stage[data-cond="cloudy"] {
    --sky-top: #6d7f91;
    --sky-mid: #a8b4c0;
    --sky-bot: #d8dee4;
  }
  .stage[data-cond="fog"] {
    --sky-top: #8a959e;
    --sky-mid: #c4c0c8;
    --sky-bot: #e6e9ec;
  }
  .stage[data-cond="rain"] {
    --sky-top: #4a6578;
    --sky-mid: #7a94a6;
    --sky-bot: #c5d2db;
  }
  .stage[data-cond="snow"] {
    --sky-top: #7a8fa3;
    --sky-mid: #c5d4e0;
    --sky-bot: #eef3f7;
  }
  .stage[data-cond="storm"] {
    --sky-top: #3d4a5c;
    --sky-mid: #6a7a8c;
    --sky-bot: #a8b4c0;
  }
  .stage[data-cond="error"] {
    --sky-top: #6b7280;
    --sky-mid: #9ca3af;
    --sky-bot: #e5e7eb;
  }

  .orb {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    top: 72px;
    right: 140px;
    background: radial-gradient(circle at 35% 35%, #fff6d6 0%, #f0c96a 45%, #e8a84a 70%, transparent 72%);
    opacity: 0.85;
    filter: blur(2px);
    animation: orbRise 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    pointer-events: none;
  }

  .stage[data-cond="cloudy"] .orb,
  .stage[data-cond="fog"] .orb,
  .stage[data-cond="rain"] .orb,
  .stage[data-cond="storm"] .orb {
    opacity: 0.25;
    filter: blur(8px);
  }
  .stage[data-cond="snow"] .orb { opacity: 0.4; }

  .panel {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 64px 80px 56px;
    display: flex;
    flex-direction: column;
  }

  .location {
    font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    font-size: 72px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink);
    animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
  }

  .date-line {
    margin-top: 14px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
  }

  .summary {
    margin-top: 48px;
    display: flex;
    align-items: flex-end;
    gap: 56px;
    animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
  }

  .temps {
    display: flex;
    gap: 40px;
    align-items: baseline;
  }

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

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

  .temp-value {
    font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    font-size: 96px;
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.03em;
  }

  .temp-value .unit {
    font-size: 36px;
    font-weight: 500;
    margin-left: 2px;
    vertical-align: super;
    letter-spacing: 0;
  }

  .temp-block.high .temp-value { color: var(--temp-high); }
  .temp-block.low .temp-value { color: var(--temp-low); }

  .condition {
    padding-bottom: 12px;
  }

  .condition-name {
    font-size: 28px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
  }

  .hourly-wrap {
    margin-top: auto;
    animation: rise 1s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
  }

  .hourly-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 18px;
  }

  .hourly {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 6px;
    align-items: end;
    height: 160px;
    padding: 20px 18px 16px;
    background: var(--glass);
    border: 1px solid var(--glass-edge);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

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

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

  .hour-bar {
    width: 70%;
    max-width: 18px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, var(--accent) 0%, rgba(42, 111, 143, 0.35) 100%);
    transform-origin: bottom;
    animation: barGrow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

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

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

  .error-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 560px;
    animation: rise 0.7s ease both;
  }

  .error-state h1 {
    font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
  }

  .error-state p {
    font-size: 20px;
    line-height: 1.5;
    color: var(--ink-soft);
  }

  .loading .location,
  .loading .date-line,
  .loading .summary,
  .loading .hourly-wrap {
    opacity: 0.35;
  }

  @keyframes skyIn {
    from { filter: saturate(0.7) brightness(0.95); }
    to { filter: none; }
  }

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

  @keyframes orbRise {
    from { opacity: 0; transform: translateY(30px) scale(0.92); }
    to { opacity: 0.85; transform: translateY(0) scale(1); }
  }

  @keyframes barGrow {
    from { transform: scaleY(0); opacity: 0.4; }
    to { transform: scaleY(1); opacity: 1; }
  }

  @keyframes haze {
    from { opacity: 0.7; }
    to { opacity: 1; }
  }
</style>
</head>
<body>
  <div class="stage loading" id="stage" data-cond="clear">
    <div class="orb" id="orb" aria-hidden="true"></div>
    <div class="panel" id="panel">
      <div class="location" id="location">—</div>
      <div class="date-line" id="dateLine">—</div>
      <div class="summary" id="summary">
        <div class="temps">
          <div class="temp-block high">
            <span class="temp-label">High</span>
            <span class="temp-value" id="tempMax">—<span class="unit">°</span></span>
          </div>
          <div class="temp-block low">
            <span class="temp-label">Low</span>
            <span class="temp-value" id="tempMin">—<span class="unit">°</span></span>
          </div>
        </div>
        <div class="condition">
          <div class="condition-name" id="condition">—</div>
        </div>
      </div>
      <div class="hourly-wrap" id="hourlyWrap">
        <div class="hourly-label">Hourly temperature</div>
        <div class="hourly" id="hourly"></div>
      </div>
    </div>
  </div>

<script>
(function () {
  const WEATHER = {
    0: { label: "Clear sky", cond: "clear" },
    1: { label: "Mainly clear", cond: "clear" },
    2: { label: "Partly cloudy", cond: "cloudy" },
    3: { label: "Overcast", cond: "cloudy" },
    45: { label: "Fog", cond: "fog" },
    48: { label: "Depositing rime fog", cond: "fog" },
    51: { label: "Light drizzle", cond: "rain" },
    53: { label: "Moderate drizzle", cond: "rain" },
    55: { label: "Dense drizzle", cond: "rain" },
    56: { label: "Light freezing drizzle", cond: "rain" },
    57: { label: "Dense freezing drizzle", cond: "rain" },
    61: { label: "Slight rain", cond: "rain" },
    63: { label: "Moderate rain", cond: "rain" },
    65: { label: "Heavy rain", cond: "rain" },
    66: { label: "Light freezing rain", cond: "rain" },
    67: { label: "Heavy freezing rain", cond: "rain" },
    71: { label: "Slight snow", cond: "snow" },
    73: { label: "Moderate snow", cond: "snow" },
    75: { label: "Heavy snow", cond: "snow" },
    77: { label: "Snow grains", cond: "snow" },
    80: { label: "Slight rain showers", cond: "rain" },
    81: { label: "Moderate rain showers", cond: "rain" },
    82: { label: "Violent rain showers", cond: "rain" },
    85: { label: "Slight snow showers", cond: "snow" },
    86: { label: "Heavy snow showers", cond: "snow" },
    95: { label: "Thunderstorm", cond: "storm" },
    96: { label: "Thunderstorm with slight hail", cond: "storm" },
    99: { label: "Thunderstorm with heavy hail", cond: "storm" }
  };

  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 dt.toLocaleDateString("en-US", {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
      timeZone: "UTC"
    });
  }

  function weatherInfo(code) {
    return WEATHER[code] || { label: "Unknown conditions", cond: "cloudy" };
  }

  function showError(message) {
    const stage = document.getElementById("stage");
    stage.classList.remove("loading");
    stage.setAttribute("data-cond", "error");
    document.getElementById("orb").style.display = "none";
    document.getElementById("panel").innerHTML =
      '<div class="error-state">' +
        "<h1>Weather unavailable</h1>" +
        "<p>" + message + "</p>" +
      "</div>";
  }

  function buildUrl(base, params) {
    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
    });
    return base + "?" + qs.toString();
  }

  function renderHourly(temps, times) {
    const el = document.getElementById("hourly");
    el.innerHTML = "";
    if (!temps || !temps.length) return;

    const finite = temps.filter(function (t) { return typeof t === "number" && !isNaN(t); });
    const minT = Math.min.apply(null, finite);
    const maxT = Math.max.apply(null, finite);
    const span = Math.max(maxT - minT, 1);

    temps.forEach(function (t, i) {
      const hour = document.createElement("div");
      hour.className = "hour";

      const track = document.createElement("div");
      track.className = "hour-bar-track";

      const bar = document.createElement("div");
      bar.className = "hour-bar";
      const pct = typeof t === "number" && !isNaN(t)
        ? 18 + ((t - minT) / span) * 82
        : 10;
      bar.style.height = pct + "%";
      bar.style.animationDelay = (0.02 * i) + "s";
      track.appendChild(bar);

      const tempEl = document.createElement("div");
      tempEl.className = "hour-temp";
      tempEl.textContent = (typeof t === "number" && !isNaN(t)) ? Math.round(t) + "°" : "—";

      const timeEl = document.createElement("div");
      timeEl.className = "hour-time";
      let label = String(i).padStart(2, "0");
      if (times && times[i]) {
        const h = times[i].slice(11, 13);
        label = h;
      }
      timeEl.textContent = label;

      hour.appendChild(track);
      hour.appendChild(tempEl);
      hour.appendChild(timeEl);
      el.appendChild(hour);
    });
  }

  function render(data, params) {
    const daily = data.daily;
    const hourly = data.hourly;
    if (!daily || !daily.time || !daily.time.length) {
      showError("No weather data was returned for this date and location.");
      return;
    }

    const max = daily.temperature_2m_max[0];
    const min = daily.temperature_2m_min[0];
    const code = daily.weather_code[0];
    const info = weatherInfo(code);

    const stage = document.getElementById("stage");
    stage.classList.remove("loading");
    stage.setAttribute("data-cond", info.cond);

    document.getElementById("location").textContent = params.name;
    document.getElementById("dateLine").textContent = formatDisplayDate(params.date);
    document.getElementById("tempMax").innerHTML = Math.round(max) + '<span class="unit">°</span>';
    document.getElementById("tempMin").innerHTML = Math.round(min) + '<span class="unit">°</span>';
    document.getElementById("condition").textContent = info.label;

    const temps = (hourly && hourly.temperature_2m) ? hourly.temperature_2m : [];
    const times = (hourly && hourly.time) ? hourly.time : [];
    renderHourly(temps, times);
  }

  async function main() {
    const params = parseParams();
    document.getElementById("location").textContent = params.name;
    document.getElementById("dateLine").textContent = formatDisplayDate(params.date);

    const endpoint = isPastDate(params.date) ? "/api/om/archive" : "/api/om/forecast";
    const url = buildUrl(endpoint, params);

    try {
      const res = await fetch(url);
      if (!res.ok) throw new Error("HTTP " + res.status);
      const data = await res.json();
      if (data.error) throw new Error(data.reason || data.error);
      render(data, params);
    } catch (err) {
      showError("Weather data could not be loaded. Please try again later.");
    }
  }

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