claude-opus-4-8 @ low · cursor

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, initial-scale=1">
<title>Weather Card</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  :root {
    --bg-1: #1e2a52;
    --bg-2: #3a4a7a;
    --accent: #ffd166;
    --text: #f4f7ff;
    --muted: rgba(244, 247, 255, 0.65);
    --card: rgba(255, 255, 255, 0.08);
    --stroke: rgba(255, 255, 255, 0.16);
  }
  html, body {
    width: 100%;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    background: linear-gradient(135deg, var(--bg-1), var(--bg-2));
    background-attachment: fixed;
    transition: background 0.8s ease;
    -webkit-font-smoothing: antialiased;
  }
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
  }
  .card {
    width: 940px;
    max-width: 100%;
    background: var(--card);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--stroke);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    overflow: hidden;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 40px 44px 28px;
  }
  .loc {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.3px;
  }
  .date {
    margin-top: 6px;
    font-size: 16px;
    color: var(--muted);
    font-weight: 500;
  }
  .icon {
    font-size: 84px;
    line-height: 1;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.3));
  }
  .main {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 8px 44px 36px;
  }
  .temp-now {
    font-size: 96px;
    font-weight: 200;
    line-height: 0.9;
    letter-spacing: -3px;
  }
  .temp-now sup { font-size: 40px; font-weight: 300; top: -0.55em; }
  .cond {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 14px;
  }
  .minmax { display: flex; gap: 24px; }
  .minmax div { font-size: 16px; color: var(--muted); }
  .minmax .hi { color: var(--accent); font-weight: 600; }
  .minmax b { color: var(--text); font-weight: 700; font-size: 18px; }
  .hourly {
    padding: 28px 44px 40px;
    border-top: 1px solid var(--stroke);
    background: rgba(0, 0, 0, 0.12);
  }
  .hourly h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--muted);
    margin-bottom: 20px;
    font-weight: 600;
  }
  .chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 150px;
  }
  .hour {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 6px;
  }
  .hour .v { font-size: 11px; color: var(--text); font-weight: 600; }
  .hour .bar {
    width: 60%;
    max-width: 18px;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(to top, var(--accent), #ff9e6d);
    transition: height 0.5s ease;
    min-height: 3px;
  }
  .hour .t { font-size: 10px; color: var(--muted); }
  .msg {
    padding: 80px 44px;
    text-align: center;
    font-size: 20px;
    color: var(--muted);
  }
  .msg.error { color: #ff9b9b; }
</style>
</head>
<body>
  <div class="card" id="card">
    <div class="msg" id="status">Loading weather…</div>
  </div>

<script>
(function () {
  const qs = new URLSearchParams(location.search);
  const lat = parseFloat(qs.get("lat")) || 52.52;
  const lon = parseFloat(qs.get("lon")) || 13.405;
  const name = qs.get("name") || "Berlin";
  const todayUTC = new Date().toISOString().slice(0, 10);
  const date = qs.get("date") || todayUTC;

  const WMO = {
    0:  ["Clear sky", "☀️", ["#2b5876", "#4e7fb0"]],
    1:  ["Mainly clear", "🌤️", ["#3a6073", "#5b8aa8"]],
    2:  ["Partly cloudy", "⛅", ["#4b6584", "#778ca3"]],
    3:  ["Overcast", "☁️", ["#525f7a", "#78849e"]],
    45: ["Fog", "🌫️", ["#5a6472", "#828b98"]],
    48: ["Rime fog", "🌫️", ["#5a6472", "#828b98"]],
    51: ["Light drizzle", "🌦️", ["#3f5871", "#6683a0"]],
    53: ["Drizzle", "🌦️", ["#3f5871", "#6683a0"]],
    55: ["Dense drizzle", "🌧️", ["#374a63", "#5a708c"]],
    56: ["Freezing drizzle", "🌧️", ["#374a63", "#5a708c"]],
    57: ["Freezing drizzle", "🌧️", ["#374a63", "#5a708c"]],
    61: ["Light rain", "🌦️", ["#334a63", "#516d8c"]],
    63: ["Rain", "🌧️", ["#2c3e54", "#47617e"]],
    65: ["Heavy rain", "🌧️", ["#26374a", "#3d5570"]],
    66: ["Freezing rain", "🌧️", ["#26374a", "#3d5570"]],
    67: ["Freezing rain", "🌧️", ["#26374a", "#3d5570"]],
    71: ["Light snow", "🌨️", ["#5f6b7a", "#8b97a6"]],
    73: ["Snow", "🌨️", ["#5f6b7a", "#8b97a6"]],
    75: ["Heavy snow", "❄️", ["#6b7684", "#97a2b0"]],
    77: ["Snow grains", "🌨️", ["#5f6b7a", "#8b97a6"]],
    80: ["Rain showers", "🌦️", ["#334a63", "#516d8c"]],
    81: ["Rain showers", "🌧️", ["#2c3e54", "#47617e"]],
    82: ["Violent showers", "⛈️", ["#26374a", "#3d5570"]],
    85: ["Snow showers", "🌨️", ["#5f6b7a", "#8b97a6"]],
    86: ["Snow showers", "❄️", ["#6b7684", "#97a2b0"]],
    95: ["Thunderstorm", "⛈️", ["#2b2f45", "#474d6e"]],
    96: ["Thunderstorm", "⛈️", ["#2b2f45", "#474d6e"]],
    99: ["Thunderstorm w/ hail", "⛈️", ["#2b2f45", "#474d6e"]]
  };

  function describe(code) { return WMO[code] || ["Unknown", "🌡️", ["#1e2a52", "#3a4a7a"]]; }

  function fmtDate(d) {
    const dt = new Date(d + "T00:00:00Z");
    return dt.toLocaleDateString("en-US", {
      weekday: "long", year: "numeric", month: "long", day: "numeric", timeZone: "UTC"
    });
  }

  function showError(text) {
    document.getElementById("card").innerHTML =
      '<div class="msg error">' + text + '</div>';
  }

  function isPast(d) { return d < todayUTC; }

  const endpoint = isPast(date) ? "/api/om/archive" : "/api/om/forecast";
  const 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
  });

  fetch(endpoint + "?" + params.toString())
    .then(function (r) {
      if (!r.ok) throw new Error("HTTP " + r.status);
      return r.json();
    })
    .then(function (data) {
      if (!data || !data.daily || !data.daily.time || !data.daily.time.length) {
        throw new Error("No data available for this date.");
      }
      render(data);
    })
    .catch(function (err) {
      showError("Weather data could not be loaded. " + (err.message || ""));
    });

  function render(data) {
    const d = data.daily;
    const hi = d.temperature_2m_max[0];
    const lo = d.temperature_2m_min[0];
    const code = d.weather_code[0];
    const [label, emoji, grad] = describe(code);

    document.body.style.background =
      "linear-gradient(135deg, " + grad[0] + ", " + grad[1] + ")";

    const hours = (data.hourly && data.hourly.time) || [];
    const temps = (data.hourly && data.hourly.temperature_2m) || [];
    const valid = [];
    for (let i = 0; i < hours.length; i++) {
      if (temps[i] !== null && temps[i] !== undefined) {
        valid.push({ h: hours[i].slice(11, 16), t: temps[i] });
      }
    }

    let nowTemp = hi;
    if (valid.length) {
      let sum = 0;
      valid.forEach(function (v) { sum += v.t; });
      nowTemp = Math.round((sum / valid.length) * 10) / 10;
    }

    let bars = "";
    if (valid.length) {
      const tvals = valid.map(function (v) { return v.t; });
      let mn = Math.min.apply(null, tvals);
      let mx = Math.max.apply(null, tvals);
      if (mx === mn) mx = mn + 1;
      const step = valid.length > 12 ? 2 : 1;
      for (let i = 0; i < valid.length; i += step) {
        const v = valid[i];
        const pct = 20 + ((v.t - mn) / (mx - mn)) * 80;
        bars +=
          '<div class="hour">' +
            '<div class="v">' + Math.round(v.t) + "°</div>" +
            '<div class="bar" style="height:' + pct + '%"></div>' +
            '<div class="t">' + v.h + "</div>" +
          "</div>";
      }
    } else {
      bars = '<div style="color:var(--muted);font-size:14px;">Hourly data unavailable</div>';
    }

    document.getElementById("card").innerHTML =
      '<div class="header">' +
        '<div>' +
          '<div class="loc">' + escapeHtml(name) + "</div>" +
          '<div class="date">' + fmtDate(date) + "</div>" +
        "</div>" +
        '<div class="icon">' + emoji + "</div>" +
      "</div>" +
      '<div class="main">' +
        '<div class="temp-now">' + Math.round(nowTemp) + "<sup>°C</sup></div>" +
        "<div>" +
          '<div class="cond">' + label + "</div>" +
          '<div class="minmax">' +
            '<div class="hi">High <b>' + Math.round(hi) + "°</b></div>" +
            "<div>Low <b>" + Math.round(lo) + "°</b></div>" +
          "</div>" +
        "</div>" +
      "</div>" +
      '<div class="hourly">' +
        "<h2>Hourly Temperature</h2>" +
        '<div class="chart">' + bars + "</div>" +
      "</div>";
  }

  function escapeHtml(s) {
    return String(s).replace(/[&<>"']/g, function (c) {
      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
    });
  }
})();
</script>
</body>
</html>