claude-opus-4-8-thinking @ medium · cursor

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1280, height=800" />
<title>Weather Card</title>
<style>
  :root {
    --bg-a: #1e3a5f;
    --bg-b: #2c5f8a;
    --accent: #ffd166;
    --card-bg: rgba(255, 255, 255, 0.10);
    --card-border: rgba(255, 255, 255, 0.18);
    --text: #f5f8fc;
    --muted: rgba(245, 248, 252, 0.62);
  }

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

  html, body {
    width: 1280px;
    height: 800px;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
  }

  body {
    background:
      radial-gradient(1200px 600px at 15% -10%, rgba(255,255,255,0.12), transparent 60%),
      linear-gradient(150deg, var(--bg-a) 0%, var(--bg-b) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.6s ease;
  }

  .card {
    width: 1080px;
    height: 640px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 28px;
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow: 0 30px 80px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
    padding: 44px 52px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }

  .glow {
    position: absolute;
    top: -120px; right: -80px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, var(--accent), transparent 70%);
    opacity: 0.28;
    filter: blur(30px);
    pointer-events: none;
  }

  /* Header */
  .top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 1;
  }
  .loc {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.1;
  }
  .date {
    margin-top: 6px;
    font-size: 18px;
    color: var(--muted);
    font-weight: 500;
  }
  .coords {
    margin-top: 2px;
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.3px;
  }

  .icon {
    font-size: 84px;
    line-height: 1;
    text-align: right;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.35));
  }
  .cond {
    text-align: right;
    font-size: 19px;
    font-weight: 600;
    margin-top: 4px;
  }

  /* Middle: temps */
  .mid {
    display: flex;
    align-items: flex-end;
    gap: 46px;
    margin-top: 30px;
    z-index: 1;
  }
  .maxwrap { display: flex; align-items: flex-start; }
  .maxtemp {
    font-size: 132px;
    font-weight: 200;
    line-height: 0.9;
    letter-spacing: -4px;
  }
  .deg { font-size: 44px; font-weight: 300; margin-top: 14px; }

  .stats { display: flex; gap: 16px; padding-bottom: 12px; }
  .stat {
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 14px 22px;
    min-width: 120px;
  }
  .stat .label { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
  .stat .val { font-size: 30px; font-weight: 600; margin-top: 4px; }
  .stat.high .val { color: #ff9e6d; }
  .stat.low .val { color: #8ecbff; }

  /* Chart */
  .chartwrap {
    margin-top: auto;
    z-index: 1;
  }
  .chart-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--muted);
    margin-bottom: 10px;
  }
  svg { width: 100%; height: 190px; display: block; overflow: visible; }
  .grid-line { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
  .area { fill: url(#areaGrad); opacity: 0.5; }
  .line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .dot { fill: #fff; }
  .hlabel { fill: var(--muted); font-size: 11px; text-anchor: middle; }
  .tlabel { fill: var(--text); font-size: 12px; font-weight: 600; text-anchor: middle; }

  /* State messages */
  .msg {
    z-index: 1;
    margin: auto;
    text-align: center;
    max-width: 620px;
  }
  .msg .big { font-size: 30px; font-weight: 700; margin-bottom: 12px; }
  .msg .sub { font-size: 17px; color: var(--muted); line-height: 1.5; }
  .spinner {
    width: 46px; height: 46px; margin: 0 auto 22px;
    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); } }
  .hidden { display: none !important; }
</style>
</head>
<body>
  <div class="card">
    <div class="glow"></div>

    <!-- Loading -->
    <div id="loading" class="msg">
      <div class="spinner"></div>
      <div class="big">Loading weather…</div>
      <div class="sub" id="loading-sub">Fetching the forecast.</div>
    </div>

    <!-- Error -->
    <div id="error" class="msg hidden">
      <div class="big">Weather data unavailable</div>
      <div class="sub" id="error-sub">We couldn't load the forecast for this location. Please try again later.</div>
    </div>

    <!-- Content -->
    <div id="content" class="hidden" style="display:contents;">
      <div class="top">
        <div>
          <div class="loc" id="loc">Berlin</div>
          <div class="date" id="date">—</div>
          <div class="coords" id="coords">—</div>
        </div>
        <div>
          <div class="icon" id="icon">☀️</div>
          <div class="cond" id="cond">—</div>
        </div>
      </div>

      <div class="mid">
        <div class="maxwrap">
          <div class="maxtemp" id="maxtemp">--</div>
          <div class="deg">°C</div>
        </div>
        <div class="stats">
          <div class="stat high">
            <div class="label">High</div>
            <div class="val" id="high">--°</div>
          </div>
          <div class="stat low">
            <div class="label">Low</div>
            <div class="val" id="low">--°</div>
          </div>
        </div>
      </div>

      <div class="chartwrap">
        <div class="chart-title">Hourly temperature</div>
        <svg id="chart" viewBox="0 0 1000 190" preserveAspectRatio="none"></svg>
      </div>
    </div>
  </div>

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

  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: ["Freezing drizzle", "🌧️"],
    57: ["Freezing drizzle", "🌧️"],
    61: ["Slight rain", "🌧️"],
    63: ["Moderate rain", "🌧️"],
    65: ["Heavy rain", "🌧️"],
    66: ["Freezing rain", "🌧️"],
    67: ["Freezing rain", "🌧️"],
    71: ["Slight snow", "🌨️"],
    73: ["Moderate snow", "🌨️"],
    75: ["Heavy snow", "❄️"],
    77: ["Snow grains", "🌨️"],
    80: ["Rain showers", "🌦️"],
    81: ["Rain showers", "🌦️"],
    82: ["Violent rain showers", "⛈️"],
    85: ["Snow showers", "🌨️"],
    86: ["Snow showers", "🌨️"],
    95: ["Thunderstorm", "⛈️"],
    96: ["Thunderstorm w/ hail", "⛈️"],
    99: ["Thunderstorm w/ hail", "⛈️"]
  };

  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  = parseFloat(qp("lat", "52.52"));
  var lon  = parseFloat(qp("lon", "13.405"));
  var name = qp("name", "Berlin");
  var date = qp("date", todayUTC());

  if (isNaN(lat)) lat = 52.52;
  if (isNaN(lon)) lon = 13.405;

  function showError(sub) {
    document.getElementById("loading").classList.add("hidden");
    document.getElementById("content").classList.add("hidden");
    var e = document.getElementById("error");
    e.classList.remove("hidden");
    if (sub) document.getElementById("error-sub").textContent = sub;
  }

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

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

  function buildURL() {
    var base = isPast(date) ? "/api/om/archive" : "/api/om/forecast";
    var p = 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
    });
    return base + "?" + p.toString();
  }

  function setTheme(code) {
    var root = document.documentElement.style;
    var a, b, accent;
    if (code === 0 || code === 1) { a = "#0f5e9c"; b = "#f6a821"; accent = "#ffd166"; }
    else if (code === 2 || code === 3) { a = "#3a4a5e"; b = "#6b7f96"; accent = "#e8eef5"; }
    else if ([45,48].indexOf(code) >= 0) { a = "#4b5563"; b = "#8a94a3"; accent = "#dfe6ee"; }
    else if (code >= 71 && code <= 86 && code !== 80 && code !== 81 && code !== 82) { a = "#38506b"; b = "#9fb8d6"; accent = "#cfe4ff"; }
    else if ((code >= 51 && code <= 67) || (code >= 80 && code <= 82)) { a = "#2b3a52"; b = "#4a6178"; accent = "#8ecbff"; }
    else if (code >= 95) { a = "#232a3d"; b = "#414a63"; accent = "#c8b6ff"; }
    else { a = "#1e3a5f"; b = "#2c5f8a"; accent = "#ffd166"; }
    root.setProperty("--bg-a", a);
    root.setProperty("--bg-b", b);
    root.setProperty("--accent", accent);
  }

  function drawChart(times, temps) {
    var svg = document.getElementById("chart");
    var W = 1000, H = 190, padT = 26, padB = 26, padX = 12;
    var valid = temps.filter(function (t) { return t !== null && !isNaN(t); });
    if (valid.length === 0) { return; }
    var min = Math.min.apply(null, valid);
    var max = Math.max.apply(null, valid);
    if (min === max) { min -= 1; max += 1; }
    var range = max - min;
    var n = temps.length;

    function x(i) { return padX + (i / (n - 1)) * (W - 2 * padX); }
    function y(t) { return padT + (1 - (t - min) / range) * (H - padT - padB); }

    var ns = "http://www.w3.org/2000/svg";
    svg.innerHTML = "";

    var defs = document.createElementNS(ns, "defs");
    defs.innerHTML =
      '<linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">' +
      '<stop offset="0%" stop-color="var(--accent)" stop-opacity="0.55"/>' +
      '<stop offset="100%" stop-color="var(--accent)" stop-opacity="0"/>' +
      '</linearGradient>';
    svg.appendChild(defs);

    // gridlines
    [0, 0.5, 1].forEach(function (f) {
      var yy = padT + f * (H - padT - padB);
      var ln = document.createElementNS(ns, "line");
      ln.setAttribute("class", "grid-line");
      ln.setAttribute("x1", 0); ln.setAttribute("x2", W);
      ln.setAttribute("y1", yy); ln.setAttribute("y2", yy);
      svg.appendChild(ln);
    });

    // path
    var linePts = [], first = null, last = null;
    for (var i = 0; i < n; i++) {
      if (temps[i] === null || isNaN(temps[i])) continue;
      var px = x(i), py = y(temps[i]);
      linePts.push((linePts.length ? "L" : "M") + px.toFixed(1) + " " + py.toFixed(1));
      if (first === null) first = px;
      last = px;
    }
    var d = linePts.join(" ");

    var area = document.createElementNS(ns, "path");
    area.setAttribute("class", "area");
    area.setAttribute("d", d + " L" + last.toFixed(1) + " " + (H - padB) + " L" + first.toFixed(1) + " " + (H - padB) + " Z");
    svg.appendChild(area);

    var line = document.createElementNS(ns, "path");
    line.setAttribute("class", "line");
    line.setAttribute("d", d);
    svg.appendChild(line);

    // labels every 3 hours + dots + value at extremes
    var maxIdx = temps.indexOf(max), minIdx = temps.indexOf(min);
    for (var j = 0; j < n; j++) {
      if (temps[j] === null || isNaN(temps[j])) continue;
      var showHour = (j % 3 === 0);
      if (showHour) {
        var hl = document.createElementNS(ns, "text");
        hl.setAttribute("class", "hlabel");
        hl.setAttribute("x", x(j));
        hl.setAttribute("y", H - 6);
        var hh = times[j] ? times[j].slice(11, 16) : (j + ":00");
        hl.textContent = hh;
        svg.appendChild(hl);
      }
      if (j === maxIdx || j === minIdx) {
        var dot = document.createElementNS(ns, "circle");
        dot.setAttribute("class", "dot");
        dot.setAttribute("cx", x(j));
        dot.setAttribute("cy", y(temps[j]));
        dot.setAttribute("r", 4);
        svg.appendChild(dot);
        var tl = document.createElementNS(ns, "text");
        tl.setAttribute("class", "tlabel");
        tl.setAttribute("x", x(j));
        tl.setAttribute("y", y(temps[j]) - 10);
        tl.textContent = Math.round(temps[j]) + "°";
        svg.appendChild(tl);
      }
    }
  }

  function render(data) {
    var daily = data.daily || {};
    var hourly = data.hourly || {};
    var tmax = daily.temperature_2m_max && daily.temperature_2m_max[0];
    var tmin = daily.temperature_2m_min && daily.temperature_2m_min[0];
    var code = daily.weather_code && daily.weather_code[0];
    var times = hourly.time || [];
    var temps = hourly.temperature_2m || [];

    if ((tmax === undefined || tmax === null) && temps.length === 0) {
      showError("The API returned no data for " + date + ".");
      return;
    }

    var info = WMO[code] || ["Unknown", "❓"];
    setTheme(code);

    document.getElementById("loc").textContent = name;
    document.getElementById("date").textContent = fmtDate(date);
    document.getElementById("coords").textContent = lat.toFixed(3) + "°, " + lon.toFixed(3) + "°";
    document.getElementById("icon").textContent = info[1];
    document.getElementById("cond").textContent = info[0];
    document.getElementById("maxtemp").textContent = (tmax !== null && tmax !== undefined) ? Math.round(tmax) : "--";
    document.getElementById("high").textContent = (tmax !== null && tmax !== undefined) ? Math.round(tmax) + "°" : "--°";
    document.getElementById("low").textContent = (tmin !== null && tmin !== undefined) ? Math.round(tmin) + "°" : "--°";

    if (temps.length) drawChart(times, temps);

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

  fetch(buildURL(), { headers: { "Accept": "application/json" } })
    .then(function (r) {
      if (!r.ok) throw new Error("HTTP " + r.status);
      return r.json();
    })
    .then(function (data) {
      if (data && data.error) throw new Error(data.reason || "API error");
      render(data);
    })
    .catch(function (err) {
      showError("We couldn't load the forecast (" + (err && err.message ? err.message : "network error") + ").");
    });
})();
</script>
</body>
</html>