claude-opus-4-8-thinking @ high · 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 {
    --card-w: 920px;
    --radius: 28px;
    --ink: #0f2740;
    --ink-soft: #4a6076;
    --glass: rgba(255, 255, 255, 0.55);
    --glass-strong: rgba(255, 255, 255, 0.72);
    --line: rgba(15, 39, 64, 0.10);
  }

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

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

  body {
    font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    background: linear-gradient(135deg, #a9c8ff 0%, #dfeaff 45%, #f4f8ff 100%);
    transition: background 0.6s ease;
    -webkit-font-smoothing: antialiased;
  }

  /* Sky themes driven by weather condition */
  body[data-sky="clear"]   { background: linear-gradient(135deg, #4a90e2 0%, #7fb2f0 40%, #cfe4ff 100%); }
  body[data-sky="cloudy"]  { background: linear-gradient(135deg, #7f93a8 0%, #a9bccf 45%, #dbe6f0 100%); }
  body[data-sky="overcast"]{ background: linear-gradient(135deg, #6d7a89 0%, #93a3b3 45%, #cbd6e0 100%); }
  body[data-sky="rain"]    { background: linear-gradient(135deg, #4c6178 0%, #6d8299 45%, #a6bacd 100%); }
  body[data-sky="snow"]    { background: linear-gradient(135deg, #8fa6bd 0%, #c3d4e6 45%, #eef4fb 100%); }
  body[data-sky="storm"]   { background: linear-gradient(135deg, #2f3b52 0%, #4d5b78 45%, #8593ad 100%); }
  body[data-sky="fog"]     { background: linear-gradient(135deg, #9aa7b3 0%, #c0cad3 45%, #e7edf2 100%); }

  .stage {
    position: relative;
    width: 1280px;
    height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* soft atmospheric blobs */
  .stage::before, .stage::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    opacity: 0.5;
    pointer-events: none;
  }
  .stage::before {
    width: 420px; height: 420px;
    top: 60px; left: 120px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(255,255,255,0));
  }
  .stage::after {
    width: 520px; height: 520px;
    bottom: 20px; right: 90px;
    background: radial-gradient(circle at 60% 40%, rgba(255,255,255,0.55), rgba(255,255,255,0));
  }

  .card {
    position: relative;
    z-index: 2;
    width: var(--card-w);
    background: var(--glass);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: var(--radius);
    box-shadow:
      0 30px 70px rgba(20, 45, 80, 0.28),
      inset 0 1px 0 rgba(255,255,255,0.6);
    padding: 46px 52px 40px;
    animation: rise 0.7s cubic-bezier(.2,.8,.2,1) both;
  }

  @keyframes rise {
    from { opacity: 0; transform: translateY(22px) scale(.985); }
    to   { opacity: 1; transform: none; }
  }

  /* ---------- Header ---------- */
  .head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
  }
  .loc { min-width: 0; }
  .loc .name {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 480px;
  }
  .loc .date {
    margin-top: 8px;
    font-size: 17px;
    color: var(--ink-soft);
    font-weight: 500;
  }
  .loc .coords {
    margin-top: 3px;
    font-size: 13px;
    color: var(--ink-soft);
    opacity: 0.75;
  }

  .cond {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: right;
  }
  .cond .cond-text {
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    max-width: 190px;
    line-height: 1.15;
  }
  .icon { width: 84px; height: 84px; flex: 0 0 auto; }

  /* ---------- Main temps ---------- */
  .main {
    margin-top: 30px;
    display: flex;
    align-items: flex-end;
    gap: 40px;
  }
  .bigtemp {
    font-size: 132px;
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    background: linear-gradient(180deg, #163b62, #2f6fb0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .bigtemp .deg { font-size: 64px; vertical-align: super; font-weight: 700; }

  .minmax { display: flex; gap: 14px; padding-bottom: 20px; }
  .chip {
    background: var(--glass-strong);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px 20px;
    min-width: 118px;
  }
  .chip .lbl {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 600;
  }
  .chip .val {
    margin-top: 6px;
    font-size: 30px;
    font-weight: 700;
  }
  .chip.max .val { color: #d1533b; }
  .chip.min .val { color: #2f78c4; }

  /* ---------- Hourly ---------- */
  .hourly {
    margin-top: 34px;
    background: rgba(255,255,255,0.34);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 20px 22px 12px;
  }
  .hourly h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    font-weight: 700;
    margin-bottom: 6px;
  }

  .chart {
    position: relative;
    height: 150px;
    margin: 8px 0 2px;
  }
  .chart svg { width: 100%; height: 100%; display: block; overflow: visible; }

  .track {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
  }
  .hcell {
    flex: 1 1 0;
    text-align: center;
    font-size: 11px;
    color: var(--ink-soft);
    position: relative;
  }
  .hcell .t {
    font-weight: 700;
    color: var(--ink);
    font-size: 12px;
    display: block;
  }
  .hcell .hr { display: block; margin-top: 3px; opacity: 0.8; }

  /* ---------- States ---------- */
  .state {
    width: 620px;
    text-align: center;
    padding: 30px 10px;
  }
  .state .emoji { font-size: 54px; }
  .state h1 { font-size: 26px; margin-top: 14px; }
  .state p { margin-top: 10px; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }

  .spinner {
    width: 46px; height: 46px;
    border: 4px solid rgba(15,39,64,0.15);
    border-top-color: #2f6fb0;
    border-radius: 50%;
    margin: 0 auto;
    animation: spin 0.9s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .footnote {
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--ink-soft);
    opacity: 0.8;
  }
</style>
</head>
<body>
  <div class="stage">
    <div class="card" id="card">
      <div class="state">
        <div class="spinner"></div>
        <h1 style="margin-top:20px;">Loading weather…</h1>
      </div>
    </div>
  </div>

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

  // ---------- Query params & defaults ----------
  var q = new URLSearchParams(location.search);
  var lat = parseFloat(q.get("lat"));
  var lon = parseFloat(q.get("lon"));
  if (!isFinite(lat)) lat = 52.52;
  if (!isFinite(lon)) lon = 13.405;
  var name = q.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 date = q.get("date");
  if (!date || !/^\d{4}-\d{2}-\d{2}$/.test(date)) date = todayUTC();

  // ---------- Choose endpoint (forecast vs archive) ----------
  var isPast = date < todayUTC();
  var endpoint = 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 url = endpoint + "?" + params.toString();

  // ---------- WMO weather code interpretation ----------
  function weather(code) {
    var m = {
      0:  ["Clear sky", "clear"],
      1:  ["Mainly clear", "clear"],
      2:  ["Partly cloudy", "cloudy"],
      3:  ["Overcast", "overcast"],
      45: ["Fog", "fog"],
      48: ["Rime fog", "fog"],
      51: ["Light drizzle", "rain"],
      53: ["Drizzle", "rain"],
      55: ["Dense drizzle", "rain"],
      56: ["Freezing drizzle", "rain"],
      57: ["Freezing drizzle", "rain"],
      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, hail", "storm"],
      99: ["Thunderstorm, hail", "storm"]
    };
    return m[code] || ["Unknown", "cloudy"];
  }

  // ---------- SVG icons per sky group ----------
  function icon(sky) {
    var sun = '<circle cx="32" cy="32" r="14" fill="#ffcf4d" stroke="#f4a92a" stroke-width="2"/>' +
      '<g stroke="#f4a92a" stroke-width="3" stroke-linecap="round">' +
      '<line x1="32" y1="4" x2="32" y2="12"/><line x1="32" y1="52" x2="32" y2="60"/>' +
      '<line x1="4" y1="32" x2="12" y2="32"/><line x1="52" y1="32" x2="60" y2="32"/>' +
      '<line x1="12" y1="12" x2="17" y2="17"/><line x1="47" y1="47" x2="52" y2="52"/>' +
      '<line x1="52" y1="12" x2="47" y2="17"/><line x1="17" y1="47" x2="12" y2="52"/></g>';
    var cloud = '<path d="M20 44 a12 12 0 0 1 2-23 a16 16 0 0 1 30 6 a10 10 0 0 1 -2 20 z" ' +
      'fill="#f2f6fb" stroke="#cdd8e4" stroke-width="2"/>';
    var drops = '<g stroke="#4aa3e6" stroke-width="3" stroke-linecap="round">' +
      '<line x1="24" y1="50" x2="21" y2="58"/><line x1="34" y1="50" x2="31" y2="58"/>' +
      '<line x1="44" y1="50" x2="41" y2="58"/></g>';
    var flakes = '<g fill="#79b6ea"><circle cx="24" cy="54" r="2.6"/><circle cx="34" cy="56" r="2.6"/>' +
      '<circle cx="44" cy="54" r="2.6"/></g>';
    var bolt = '<path d="M34 46 l-8 12 h6 l-3 10 12 -16 h-7 l4 -6 z" fill="#ffd23f" stroke="#f0a800" stroke-width="1.5"/>';

    var body;
    switch (sky) {
      case "clear":   body = sun; break;
      case "cloudy":  body = '<g transform="translate(-6,-6) scale(0.9)">' + sun + '</g>' + cloud; break;
      case "rain":    body = cloud + drops; break;
      case "snow":    body = cloud + flakes; break;
      case "storm":   body = cloud + bolt; break;
      case "fog":     body = cloud + '<g stroke="#c2ccd6" stroke-width="3" stroke-linecap="round">' +
                        '<line x1="16" y1="52" x2="48" y2="52"/><line x1="20" y1="59" x2="44" y2="59"/></g>'; break;
      default:        body = cloud; // overcast
    }
    return '<svg class="icon" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">' + body + '</svg>';
  }

  function fmtDate(iso) {
    var p = iso.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 round(x) { return Math.round(x); }

  var card = document.getElementById("card");

  function showError(msg) {
    document.body.setAttribute("data-sky", "overcast");
    card.innerHTML =
      '<div class="state">' +
        '<div class="emoji">⚠️</div>' +
        '<h1>Weather data unavailable</h1>' +
        '<p>' + msg + '</p>' +
      '</div>';
  }

  // ---------- Hourly chart (SVG line + area) ----------
  function buildChart(times, temps) {
    var n = temps.length;
    var W = 1000, H = 150, padY = 22;
    var min = Math.min.apply(null, temps);
    var max = Math.max.apply(null, temps);
    if (min === max) { min -= 1; max += 1; }

    function X(i) { return n <= 1 ? W / 2 : (i / (n - 1)) * W; }
    function Y(t) { return H - padY - ((t - min) / (max - min)) * (H - 2 * padY); }

    var line = "", area = "M0," + H + " ";
    for (var i = 0; i < n; i++) {
      var x = X(i), y = Y(temps[i]);
      line += (i === 0 ? "M" : "L") + x.toFixed(1) + "," + y.toFixed(1) + " ";
      area += "L" + x.toFixed(1) + "," + y.toFixed(1) + " ";
    }
    area += "L" + W + "," + H + " Z";

    var dots = "";
    // Peak & trough markers
    var iMax = temps.indexOf(max), iMin = temps.indexOf(min);
    [[iMax, "#d1533b"], [iMin, "#2f78c4"]].forEach(function (d) {
      dots += '<circle cx="' + X(d[0]).toFixed(1) + '" cy="' + Y(temps[d[0]]).toFixed(1) +
        '" r="4.5" fill="' + d[1] + '" stroke="#fff" stroke-width="2"/>';
    });

    var svg = '<svg viewBox="0 0 ' + W + ' ' + H + '" preserveAspectRatio="none">' +
      '<defs><linearGradient id="fill" x1="0" y1="0" x2="0" y2="1">' +
        '<stop offset="0%" stop-color="rgba(47,111,176,0.42)"/>' +
        '<stop offset="100%" stop-color="rgba(47,111,176,0.02)"/>' +
      '</linearGradient></defs>' +
      '<path d="' + area + '" fill="url(#fill)"/>' +
      '<path d="' + line + '" fill="none" stroke="#2f6fb0" stroke-width="3" ' +
        'stroke-linejoin="round" stroke-linecap="round"/>' +
      dots +
    '</svg>';

    // Ticks: every 3 hours to stay readable
    var track = "";
    for (var h = 0; h < n; h++) {
      if (h % 3 !== 0) continue;
      var hr = times[h] ? times[h].slice(11, 16) : (String(h).padStart(2, "0") + ":00");
      track += '<div class="hcell" style="flex:3 1 0">' +
        '<span class="t">' + round(temps[h]) + '°</span>' +
        '<span class="hr">' + hr + '</span></div>';
    }

    return '<div class="chart">' + svg + '</div><div class="track">' + track + '</div>';
  }

  // ---------- Render success ----------
  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 htimes = hourly.time || [];
    var htemps = (hourly.temperature_2m || []).map(function (v) { return v == null ? null : v; });

    // filter out null hourly values while keeping alignment
    var pairT = [], pairV = [];
    for (var i = 0; i < htemps.length; i++) {
      if (htemps[i] != null) { pairT.push(htimes[i]); pairV.push(htemps[i]); }
    }

    if ((tmax == null && tmin == null) && pairV.length === 0) {
      showError("No temperature data was returned for this date and location.");
      return;
    }

    var w = weather(code);
    var condText = w[0], sky = w[1];
    document.body.setAttribute("data-sky", sky);

    var avg = null;
    if (pairV.length) {
      avg = pairV.reduce(function (a, b) { return a + b; }, 0) / pairV.length;
    }
    var big = (tmax != null && tmin != null) ? (tmax + tmin) / 2 : (avg != null ? avg : tmax);

    var html =
      '<div class="head">' +
        '<div class="loc">' +
          '<div class="name">' + escapeHtml(name) + '</div>' +
          '<div class="date">' + fmtDate(date) + '</div>' +
          '<div class="coords">' + lat.toFixed(3) + '°, ' + lon.toFixed(3) + '°</div>' +
        '</div>' +
        '<div class="cond">' +
          '<div class="cond-text">' + condText + '</div>' +
          icon(sky) +
        '</div>' +
      '</div>' +

      '<div class="main">' +
        '<div class="bigtemp">' + (big != null ? round(big) : "–") + '<span class="deg">°C</span></div>' +
        '<div class="minmax">' +
          '<div class="chip max"><div class="lbl">High</div><div class="val">' +
            (tmax != null ? round(tmax) + "°" : "–") + '</div></div>' +
          '<div class="chip min"><div class="lbl">Low</div><div class="val">' +
            (tmin != null ? round(tmin) + "°" : "–") + '</div></div>' +
        '</div>' +
      '</div>';

    if (pairV.length) {
      html += '<div class="hourly"><h2>Hourly temperature (°C, UTC)</h2>' +
        buildChart(pairT, pairV) + '</div>';
    }

    html += '<div class="footnote">' +
      '<span>' + (isPast ? "Historical record" : "Forecast") + ' · Open-Meteo</span>' +
      '<span>Times in UTC</span>' +
    '</div>';

    card.innerHTML = html;
  }

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

  // ---------- Fetch ----------
  fetch(url, { headers: { "Accept": "application/json" } })
    .then(function (res) {
      if (!res.ok) throw new Error("Server responded with status " + res.status + ".");
      return res.json();
    })
    .then(function (data) {
      if (data && data.error) throw new Error(data.reason || "The weather API returned an error.");
      render(data);
    })
    .catch(function (err) {
      showError((err && err.message) ? err.message : "Could not reach the weather service.");
    });
})();
</script>
</body>
</html>