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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, initial-scale=1">
<title>Weather Card</title>
<style>
  :root {
    --bg: #0f1220;
    --card-radius: 28px;
    --ink: #f5f7ff;
    --ink-dim: rgba(245, 247, 255, 0.72);
    --ink-faint: rgba(245, 247, 255, 0.5);
    --stroke: rgba(255, 255, 255, 0.14);
    --glass: rgba(255, 255, 255, 0.08);
  }

  * { 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;
    background:
      radial-gradient(1200px 700px at 15% -10%, #3a4d8f 0%, transparent 55%),
      radial-gradient(1000px 800px at 110% 120%, #7a4fa3 0%, transparent 50%),
      linear-gradient(160deg, #10132a 0%, #0b0d1c 100%);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
  }

  .card {
    width: 1120px;
    height: 660px;
    border-radius: var(--card-radius);
    background: linear-gradient(150deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
    border: 1px solid var(--stroke);
    box-shadow:
      0 40px 90px -30px rgba(0,0,0,0.65),
      inset 0 1px 0 rgba(255,255,255,0.22);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: grid;
    grid-template-columns: 420px 1fr;
    overflow: hidden;
  }

  /* ---------- Left panel ---------- */
  .hero {
    position: relative;
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
    border-right: 1px solid var(--stroke);
  }

  .location {
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .location .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #6ee7ff; box-shadow: 0 0 12px #6ee7ff;
  }

  .place-name {
    margin-top: 6px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
  }
  .date-line {
    margin-top: 8px;
    font-size: 16px;
    color: var(--ink-dim);
    font-weight: 500;
  }

  .icon-wrap {
    margin: 30px 0 8px;
    display: flex;
    justify-content: center;
  }
  .wx-icon { width: 150px; height: 150px; filter: drop-shadow(0 12px 24px rgba(0,0,0,0.4)); }

  .condition {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    margin-top: 4px;
  }

  .temps {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    gap: 28px;
    padding-top: 24px;
  }
  .temp-max { display: flex; flex-direction: column; }
  .temp-max .big {
    font-size: 76px;
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.03em;
  }
  .temp-max .lbl, .temp-min .lbl {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 6px;
  }
  .temp-min { padding-bottom: 12px; }
  .temp-min .val {
    font-size: 34px;
    font-weight: 600;
    color: var(--ink-dim);
    letter-spacing: -0.02em;
  }

  /* ---------- Right panel ---------- */
  .detail {
    padding: 44px 46px 34px;
    display: flex;
    flex-direction: column;
  }
  .detail h2 {
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-dim);
    font-weight: 600;
  }
  .range-row {
    margin-top: 8px;
    display: flex;
    align-items: baseline;
    gap: 18px;
    color: var(--ink-dim);
    font-size: 15px;
  }
  .range-row b { color: var(--ink); font-weight: 600; }

  .chart {
    flex: 1;
    margin-top: 26px;
    position: relative;
  }
  svg { width: 100%; height: 100%; display: block; overflow: visible; }

  .hours-strip {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
  }
  .hour {
    text-align: center;
    padding: 10px 4px;
    border-radius: 12px;
    background: var(--glass);
    border: 1px solid rgba(255,255,255,0.06);
  }
  .hour .h { font-size: 11px; color: var(--ink-faint); font-weight: 600; }
  .hour .t { font-size: 14px; font-weight: 700; margin-top: 3px; }

  /* ---------- Status / error ---------- */
  .status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    background: rgba(10,12,24,0.4);
    z-index: 5;
  }
  .status.hidden { display: none; }
  .status .box { max-width: 460px; }
  .status .title { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
  .status .msg { color: var(--ink-dim); font-size: 15px; line-height: 1.5; }
  .spinner {
    width: 42px; height: 42px; margin: 0 auto 18px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: #6ee7ff;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .content.dim { opacity: 0.25; filter: blur(2px); }
</style>
</head>
<body>
  <div class="card">
    <div class="content" id="content" style="display:contents;">
      <div class="hero">
        <div class="location"><span class="dot"></span><span id="loc">—</span></div>
        <div class="place-name" id="place">—</div>
        <div class="date-line" id="date">—</div>
        <div class="icon-wrap"><div id="icon" class="wx-icon"></div></div>
        <div class="condition" id="cond">—</div>
        <div class="temps">
          <div class="temp-max">
            <span class="lbl">High</span>
            <span class="big" id="tmax">—</span>
          </div>
          <div class="temp-min">
            <span class="lbl">Low</span>
            <span class="val" id="tmin">—</span>
          </div>
        </div>
      </div>
      <div class="detail">
        <h2>Hourly temperature</h2>
        <div class="range-row">
          <span>Peak <b id="peak">—</b></span>
          <span>Dip <b id="dip">—</b></span>
          <span>Avg <b id="avg">—</b></span>
        </div>
        <div class="chart"><svg id="chart" viewBox="0 0 620 260" preserveAspectRatio="none"></svg></div>
        <div class="hours-strip" id="strip"></div>
      </div>
    </div>
    <div class="status" id="status">
      <div class="box">
        <div class="spinner" id="spinner"></div>
        <div class="title" id="statusTitle">Loading weather…</div>
        <div class="msg" id="statusMsg"></div>
      </div>
    </div>
  </div>

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

  var qs = new URLSearchParams(location.search);
  var lat = parseFloat(qs.get("lat"));
  var lon = parseFloat(qs.get("lon"));
  if (!isFinite(lat)) lat = 52.52;
  if (!isFinite(lon)) lon = 13.405;
  var name = qs.get("name") || "Berlin";

  function todayUTC() {
    var d = new Date();
    return d.getUTCFullYear() + "-" +
      String(d.getUTCMonth() + 1).padStart(2, "0") + "-" +
      String(d.getUTCDate()).padStart(2, "0");
  }
  var dateStr = qs.get("date") || todayUTC();
  if (!/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) dateStr = todayUTC();

  // WMO weather code -> {label, icon}
  var WMO = {
    0:  ["Clear sky", "sun"],
    1:  ["Mainly clear", "sun"],
    2:  ["Partly cloudy", "partly"],
    3:  ["Overcast", "cloud"],
    45: ["Fog", "fog"],
    48: ["Rime fog", "fog"],
    51: ["Light drizzle", "drizzle"],
    53: ["Drizzle", "drizzle"],
    55: ["Dense drizzle", "drizzle"],
    56: ["Freezing drizzle", "drizzle"],
    57: ["Freezing drizzle", "drizzle"],
    61: ["Light rain", "rain"],
    63: ["Rain", "rain"],
    65: ["Heavy rain", "rain"],
    66: ["Freezing rain", "rain"],
    67: ["Freezing rain", "rain"],
    71: ["Light snow", "snow"],
    73: ["Snow", "snow"],
    75: ["Heavy snow", "snow"],
    77: ["Snow grains", "snow"],
    80: ["Rain showers", "rain"],
    81: ["Rain showers", "rain"],
    82: ["Violent showers", "rain"],
    85: ["Snow showers", "snow"],
    86: ["Snow showers", "snow"],
    95: ["Thunderstorm", "storm"],
    96: ["Thunderstorm", "storm"],
    99: ["Thunderstorm", "storm"]
  };

  function icon(kind) {
    var c = {
      sun: '<circle cx="50" cy="50" r="20" fill="#ffd166"/>' + rays(),
      partly: '<circle cx="40" cy="40" r="16" fill="#ffd166"/>' + rays(40,40,0.9) + cloudPath("#e8ecff"),
      cloud: cloudPath("#dfe5f5"),
      fog: cloudPath("#d7dcec") + '<g stroke="#c3c9dd" stroke-width="4" stroke-linecap="round"><line x1="22" y1="76" x2="70" y2="76"/><line x1="30" y1="86" x2="80" y2="86"/></g>',
      drizzle: cloudPath("#cfd6ea") + drops("#6ec6ff", 2),
      rain: cloudPath("#c6cee4") + drops("#4fa8ff", 3),
      snow: cloudPath("#dfe5f5") + flakes(),
      storm: cloudPath("#b9c1d8") + '<polygon points="48,70 62,70 52,88 60,88 44,110 50,90 40,90" fill="#ffd166"/>'
    };
    var body = c[kind] || c.cloud;
    return '<svg viewBox="0 0 100 100" width="150" height="150">' + body + '</svg>';
  }
  function rays(cx, cy, op) {
    cx = cx || 50; cy = cy || 50; op = op || 1;
    var s = '<g stroke="#ffd166" stroke-width="4" stroke-linecap="round" opacity="' + op + '">';
    for (var i = 0; i < 8; i++) {
      var a = i * Math.PI / 4;
      var x1 = cx + Math.cos(a) * 26, y1 = cy + Math.sin(a) * 26;
      var x2 = cx + Math.cos(a) * 34, y2 = cy + Math.sin(a) * 34;
      s += '<line x1="' + x1.toFixed(1) + '" y1="' + y1.toFixed(1) + '" x2="' + x2.toFixed(1) + '" y2="' + y2.toFixed(1) + '"/>';
    }
    return s + '</g>';
  }
  function cloudPath(fill) {
    return '<path d="M32 74 a18 18 0 0 1 2 -35 a22 22 0 0 1 42 6 a16 16 0 0 1 -4 29 z" fill="' + fill + '"/>';
  }
  function drops(fill, n) {
    var s = '<g fill="' + fill + '">';
    var xs = [38, 52, 66];
    for (var i = 0; i < n; i++) {
      s += '<path d="M' + xs[i] + ' 80 q4 8 0 12 q-4 -4 0 -12 z"/>';
    }
    return s + '</g>';
  }
  function flakes() {
    var s = '<g fill="#eaf2ff">';
    var xs = [38, 52, 66];
    for (var i = 0; i < 3; i++) s += '<circle cx="' + xs[i] + '" cy="86" r="3.2"/>';
    return s + '</g>';
  }

  function fmt(t) {
    return (t == null || !isFinite(t)) ? "—" : Math.round(t) + "\u00B0";
  }
  function prettyDate(s) {
    var p = s.split("-");
    var d = new Date(Date.UTC(+p[0], +p[1] - 1, +p[2]));
    return d.toLocaleDateString("en-US", {
      weekday: "long", year: "numeric", month: "long", day: "numeric", timeZone: "UTC"
    });
  }

  function showError(msg) {
    document.getElementById("spinner").style.display = "none";
    document.getElementById("statusTitle").textContent = "Weather unavailable";
    document.getElementById("statusMsg").textContent = msg;
    document.getElementById("status").classList.remove("hidden");
    document.getElementById("content").classList.add("dim");
  }
  function hideStatus() {
    document.getElementById("status").classList.add("hidden");
    document.getElementById("content").classList.remove("dim");
  }

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

  function buildURL(base) {
    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: dateStr,
      end_date: dateStr
    });
    return base + "?" + p.toString();
  }

  var endpoint = isPast(dateStr) ? "/api/om/archive" : "/api/om/forecast";

  fetch(buildURL(endpoint))
    .then(function (r) {
      if (!r.ok) throw new Error("Server responded with status " + r.status);
      return r.json();
    })
    .then(function (data) {
      if (!data || !data.daily || !data.hourly) {
        throw new Error("The weather service returned an unexpected response.");
      }
      render(data);
    })
    .catch(function (err) {
      showError("We couldn't load the forecast for " + name + ". " + (err && err.message ? err.message : ""));
    });

  function render(data) {
    document.getElementById("loc").textContent =
      lat.toFixed(2) + ", " + lon.toFixed(2);
    document.getElementById("place").textContent = name;
    document.getElementById("date").textContent = prettyDate(dateStr);

    var daily = data.daily;
    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;

    var wx = WMO[code] || ["Unknown", "cloud"];
    document.getElementById("icon").innerHTML = icon(wx[1]);
    document.getElementById("cond").textContent = wx[0];
    document.getElementById("tmax").textContent = fmt(tmax);
    document.getElementById("tmin").textContent = fmt(tmin);

    var times = data.hourly.time || [];
    var temps = data.hourly.temperature_2m || [];
    var pts = [];
    for (var i = 0; i < times.length; i++) {
      if (times[i].indexOf(dateStr) === 0) {
        pts.push({ h: times[i].slice(11, 16), t: temps[i] });
      }
    }
    if (!pts.length) {
      throw new Error("No hourly data was available for this date.");
    }

    var vals = pts.map(function (p) { return p.t; }).filter(function (v) { return isFinite(v); });
    var peak = Math.max.apply(null, vals);
    var dip = Math.min.apply(null, vals);
    var avg = vals.reduce(function (a, b) { return a + b; }, 0) / vals.length;
    document.getElementById("peak").textContent = fmt(peak);
    document.getElementById("dip").textContent = fmt(dip);
    document.getElementById("avg").textContent = fmt(avg);

    drawChart(pts, peak, dip);
    drawStrip(pts);
    hideStatus();
  }

  function drawChart(pts, peak, dip) {
    var W = 620, H = 260, padX = 14, padTop = 30, padBot = 34;
    var n = pts.length;
    var min = dip, max = peak;
    if (max === min) { max += 1; min -= 1; }
    var span = max - min;

    function xAt(i) { return padX + (i / (n - 1)) * (W - padX * 2); }
    function yAt(t) { return padTop + (1 - (t - min) / span) * (H - padTop - padBot); }

    var line = "", area = "";
    for (var i = 0; i < n; i++) {
      var x = xAt(i), y = yAt(pts[i].t);
      line += (i === 0 ? "M" : "L") + x.toFixed(1) + " " + y.toFixed(1) + " ";
    }
    area = line + "L" + xAt(n - 1).toFixed(1) + " " + (H - padBot) + " L" + xAt(0).toFixed(1) + " " + (H - padBot) + " Z";

    var dots = "";
    for (var j = 0; j < n; j++) {
      if (j % 3 === 0) {
        dots += '<circle cx="' + xAt(j).toFixed(1) + '" cy="' + yAt(pts[j].t).toFixed(1) + '" r="3" fill="#fff"/>';
      }
    }

    var svg =
      '<defs>' +
        '<linearGradient id="lg" x1="0" y1="0" x2="0" y2="1">' +
          '<stop offset="0%" stop-color="#6ee7ff" stop-opacity="0.45"/>' +
          '<stop offset="100%" stop-color="#6ee7ff" stop-opacity="0"/>' +
        '</linearGradient>' +
        '<linearGradient id="lgline" x1="0" y1="0" x2="1" y2="0">' +
          '<stop offset="0%" stop-color="#7fd8ff"/>' +
          '<stop offset="100%" stop-color="#b98bff"/>' +
        '</linearGradient>' +
      '</defs>' +
      '<path d="' + area + '" fill="url(#lg)"/>' +
      '<path d="' + line + '" fill="none" stroke="url(#lgline)" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/>' +
      dots;

    document.getElementById("chart").innerHTML = svg;
  }

  function drawStrip(pts) {
    // Show every other hour to fit 12 cells
    var strip = document.getElementById("strip");
    strip.innerHTML = "";
    var step = Math.ceil(pts.length / 12) || 1;
    var shown = [];
    for (var i = 0; i < pts.length; i += step) shown.push(pts[i]);
    shown = shown.slice(0, 12);
    shown.forEach(function (p) {
      var el = document.createElement("div");
      el.className = "hour";
      el.innerHTML = '<div class="h">' + p.h + '</div><div class="t">' + fmt(p.t) + '</div>';
      strip.appendChild(el);
    });
  }
})();
</script>
</body>
</html>