claude-opus-4-8 @ high · cursor

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1280, initial-scale=1" />
<title>Weather</title>
<style>
  :root {
    --bg-a: #1b2a4a;
    --bg-b: #24457e;
    --card: rgba(255, 255, 255, 0.08);
    --card-border: rgba(255, 255, 255, 0.16);
    --text: #f4f7ff;
    --muted: rgba(233, 240, 255, 0.66);
    --accent: #ffd66b;
    --shadow: 0 30px 70px rgba(6, 14, 33, 0.55);
  }

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

  html, body {
    width: 1280px;
    height: 800px;
    overflow: hidden;
  }

  body {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    background: radial-gradient(1200px 700px at 78% -10%, #2f5aa3 0%, rgba(47, 90, 163, 0) 55%),
                linear-gradient(160deg, var(--bg-a) 0%, var(--bg-b) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
  }

  .card {
    width: 1080px;
    height: 640px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 28px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 44px 52px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }

  .card::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(255, 214, 107, 0.28) 0%, rgba(255, 214, 107, 0) 70%);
    pointer-events: none;
  }

  /* Header */
  .head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex: 0 0 auto;
  }
  .loc {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.3px;
  }
  .date {
    margin-top: 6px;
    font-size: 16px;
    color: var(--muted);
    letter-spacing: 0.4px;
  }
  .cond-badge {
    text-align: right;
  }
  .cond-badge .cond {
    font-size: 19px;
    font-weight: 600;
    color: var(--accent);
  }

  /* Hero */
  .hero {
    display: flex;
    align-items: center;
    gap: 34px;
    margin-top: 30px;
    flex: 0 0 auto;
  }
  .icon-wrap {
    width: 128px;
    height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--card-border);
    border-radius: 26px;
    flex: 0 0 auto;
  }
  .icon-wrap svg { width: 84px; height: 84px; }

  .temps { display: flex; align-items: baseline; gap: 26px; }
  .tmax {
    font-size: 92px;
    font-weight: 700;
    line-height: 1;
  }
  .tmax .deg { font-size: 46px; font-weight: 500; color: var(--muted); }
  .tmin-block { display: flex; flex-direction: column; gap: 4px; }
  .tmin-label { font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }
  .tmin { font-size: 30px; font-weight: 600; color: rgba(180, 205, 255, 0.95); }

  /* Divider */
  .divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.18), rgba(255,255,255,0));
    margin: 32px 0 22px;
    flex: 0 0 auto;
  }

  /* Hourly */
  .hourly-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--muted);
    margin-bottom: 16px;
    flex: 0 0 auto;
  }
  .hourly {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    min-height: 0;
  }
  .hbar {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 8px;
  }
  .hbar .hval { font-size: 12px; font-weight: 600; color: var(--text); }
  .hbar .bar {
    width: 60%;
    max-width: 20px;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, var(--accent), #ff9d5c);
    min-height: 4px;
  }
  .hbar .hlabel { font-size: 10.5px; color: var(--muted); }

  /* Error / loading */
  .state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 40px;
    background: rgba(20, 30, 55, 0.6);
  }
  .state.hidden { display: none; }
  .state .big { font-size: 22px; font-weight: 700; }
  .state .sub { font-size: 15px; color: var(--muted); max-width: 520px; line-height: 1.5; }
  .spinner {
    width: 42px; height: 42px;
    border: 4px solid rgba(255,255,255,0.2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
</style>
</head>
<body>
  <div class="card" id="card">
    <div class="head">
      <div>
        <div class="loc" id="loc">—</div>
        <div class="date" id="date">—</div>
      </div>
      <div class="cond-badge">
        <div class="cond" id="cond">—</div>
      </div>
    </div>

    <div class="hero">
      <div class="icon-wrap" id="icon"></div>
      <div class="temps">
        <div class="tmax" id="tmax">—<span class="deg">°</span></div>
        <div class="tmin-block">
          <div class="tmin-label">Low</div>
          <div class="tmin" id="tmin">—°</div>
        </div>
      </div>
    </div>

    <div class="divider"></div>

    <div class="hourly-title">Hourly temperature</div>
    <div class="hourly" id="hourly"></div>

    <div class="state" id="state">
      <div class="spinner" id="spinner"></div>
      <div class="big" id="state-big">Loading weather…</div>
      <div class="sub" id="state-sub"></div>
    </div>
  </div>

<script>
(function () {
  "use strict";

  function qp(name, def) {
    var v = new URLSearchParams(window.location.search).get(name);
    return (v === null || v === "") ? def : v;
  }

  function todayUTC() {
    var d = new Date();
    return d.getUTCFullYear() + "-" +
      String(d.getUTCMonth() + 1).padStart(2, "0") + "-" +
      String(d.getUTCDate()).padStart(2, "0");
  }

  var lat = qp("lat", "52.52");
  var lon = qp("lon", "13.405");
  var name = qp("name", "Berlin");
  var date = qp("date", todayUTC());

  var isPast = date < todayUTC();
  var base = isPast ? "/api/om/archive" : "/api/om/forecast";

  var params = new URLSearchParams({
    latitude: lat,
    longitude: lon,
    daily: "temperature_2m_max,temperature_2m_min,weather_code",
    hourly: "temperature_2m",
    timezone: "UTC",
    temperature_unit: "celsius",
    start_date: date,
    end_date: date
  });

  var 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 w/ hail", 99: "Thunderstorm w/ heavy hail"
  };

  function iconFor(code) {
    var sun = '<svg viewBox="0 0 24 24" fill="none" stroke="#ffd66b" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="12" r="4.2" fill="#ffd66b" stroke="none"/><g><line x1="12" y1="2.5" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="21.5"/><line x1="2.5" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="21.5" y2="12"/><line x1="5.2" y1="5.2" x2="6.9" y2="6.9"/><line x1="17.1" y1="17.1" x2="18.8" y2="18.8"/><line x1="18.8" y1="5.2" x2="17.1" y2="6.9"/><line x1="6.9" y1="17.1" x2="5.2" y2="18.8"/></g></svg>';
    var cloud = '<svg viewBox="0 0 24 24" fill="#dbe6ff" stroke="#dbe6ff" stroke-width="0.5"><path d="M7 18a4.5 4.5 0 0 1-.4-8.98A6 6 0 0 1 18 9.2 3.9 3.9 0 0 1 17.6 18H7z"/></svg>';
    var partly = '<svg viewBox="0 0 24 24" fill="none" stroke-linecap="round"><circle cx="8" cy="8" r="3.2" fill="#ffd66b"/><g stroke="#ffd66b" stroke-width="1.6"><line x1="8" y1="1.8" x2="8" y2="3.4"/><line x1="1.8" y1="8" x2="3.4" y2="8"/><line x1="3.6" y1="3.6" x2="4.8" y2="4.8"/><line x1="12.4" y1="3.6" x2="11.2" y2="4.8"/></g><path d="M9 20a4 4 0 0 1-.4-7.98A5.3 5.3 0 0 1 19 13a3.5 3.5 0 0 1-.4 7H9z" fill="#dbe6ff"/></svg>';
    var rain = '<svg viewBox="0 0 24 24" fill="none"><path d="M7 15a4.3 4.3 0 0 1-.4-8.58A5.7 5.7 0 0 1 17.6 8.6 3.7 3.7 0 0 1 17.3 15H7z" fill="#c7d6f2"/><g stroke="#7fb3ff" stroke-width="1.8" stroke-linecap="round"><line x1="8" y1="18" x2="7" y2="21"/><line x1="12" y1="18" x2="11" y2="21"/><line x1="16" y1="18" x2="15" y2="21"/></g></svg>';
    var snow = '<svg viewBox="0 0 24 24" fill="none"><path d="M7 15a4.3 4.3 0 0 1-.4-8.58A5.7 5.7 0 0 1 17.6 8.6 3.7 3.7 0 0 1 17.3 15H7z" fill="#dbe6ff"/><g fill="#eaf2ff"><circle cx="8" cy="19" r="1.1"/><circle cx="12" cy="20.5" r="1.1"/><circle cx="16" cy="19" r="1.1"/></g></svg>';
    var fog = '<svg viewBox="0 0 24 24" fill="none" stroke="#cdd8ee" stroke-width="1.9" stroke-linecap="round"><line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="13" x2="20" y2="13"/><line x1="6" y1="17" x2="18" y2="17"/></svg>';
    var storm = '<svg viewBox="0 0 24 24" fill="none"><path d="M7 14a4.3 4.3 0 0 1-.4-8.58A5.7 5.7 0 0 1 17.6 7.6 3.7 3.7 0 0 1 17.3 14H7z" fill="#b9c6e6"/><path d="M12 13l-2.6 4.2h2.1L10.8 22 15 15.6h-2.3L14 13z" fill="#ffd66b"/></svg>';

    if (code === 0 || code === 1) return sun;
    if (code === 2) return partly;
    if (code === 3 || code === 45 || code === 48) return code === 3 ? cloud : fog;
    if (code >= 51 && code <= 67) return rain;
    if (code >= 71 && code <= 77) return snow;
    if (code >= 80 && code <= 82) return rain;
    if (code >= 85 && code <= 86) return snow;
    if (code >= 95) return storm;
    return cloud;
  }

  function fmtDate(str) {
    var parts = str.split("-");
    var d = new Date(Date.UTC(+parts[0], +parts[1] - 1, +parts[2]));
    return d.toLocaleDateString("en-US", {
      weekday: "long", year: "numeric", month: "long", day: "numeric", timeZone: "UTC"
    });
  }

  function showError(msg) {
    var state = document.getElementById("state");
    state.classList.remove("hidden");
    document.getElementById("spinner").style.display = "none";
    document.getElementById("state-big").textContent = "Weather data unavailable";
    document.getElementById("state-sub").textContent = msg;
  }

  function render(data) {
    var daily = data && data.daily;
    var hourly = data && data.hourly;
    if (!daily || !daily.time || !daily.time.length) {
      showError("The weather service returned no data for this date and location.");
      return;
    }

    var tmax = daily.temperature_2m_max ? daily.temperature_2m_max[0] : null;
    var tmin = daily.temperature_2m_min ? daily.temperature_2m_min[0] : null;
    var code = daily.weather_code ? daily.weather_code[0] : null;

    document.getElementById("loc").textContent = name;
    document.getElementById("date").textContent = fmtDate(date);

    var cond = (code !== null && WMO[code]) ? WMO[code] : "—";
    document.getElementById("cond").textContent = cond;
    document.getElementById("icon").innerHTML = iconFor(code);

    document.getElementById("tmax").innerHTML =
      (tmax !== null ? Math.round(tmax) : "—") + '<span class="deg">°</span>';
    document.getElementById("tmin").textContent =
      (tmin !== null ? Math.round(tmin) : "—") + "°";

    renderHourly(hourly);

    document.getElementById("state").classList.add("hidden");
  }

  function renderHourly(hourly) {
    var container = document.getElementById("hourly");
    container.innerHTML = "";
    if (!hourly || !hourly.time || !hourly.temperature_2m) return;

    var times = hourly.time;
    var temps = hourly.temperature_2m;

    var pairs = [];
    for (var i = 0; i < times.length; i++) {
      if (times[i].slice(0, 10) === date && temps[i] !== null && temps[i] !== undefined) {
        pairs.push({ hour: times[i].slice(11, 13), t: temps[i] });
      }
    }
    if (!pairs.length) return;

    var vals = pairs.map(function (p) { return p.t; });
    var min = Math.min.apply(null, vals);
    var max = Math.max.apply(null, vals);
    var span = (max - min) || 1;

    pairs.forEach(function (p) {
      var pct = 20 + ((p.t - min) / span) * 80; // 20%..100%
      var el = document.createElement("div");
      el.className = "hbar";
      el.innerHTML =
        '<div class="hval">' + Math.round(p.t) + '°</div>' +
        '<div class="bar" style="height:' + pct.toFixed(1) + '%"></div>' +
        '<div class="hlabel">' + p.hour + '</div>';
      container.appendChild(el);
    });
  }

  fetch(base + "?" + params.toString(), { headers: { "Accept": "application/json" } })
    .then(function (res) {
      if (!res.ok) throw new Error("HTTP " + res.status);
      return res.json();
    })
    .then(function (data) {
      if (data && data.error) throw new Error(data.reason || "API error");
      render(data);
    })
    .catch(function (err) {
      showError("Could not load weather data. " + (err && err.message ? "(" + err.message + ")" : ""));
    });
})();
</script>
</body>
</html>