claude-opus-4-8 @ low · 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>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    width: 100%; min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #0b1220;
    color: #e8edf5;
    display: flex; align-items: center; justify-content: center;
    padding: 40px;
  }
  #app {
    width: 1040px;
    max-width: 100%;
  }
  .card {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(160deg, #1e3a5f 0%, #2d5a8c 45%, #4a7fb5 100%);
    box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
    transition: background 0.6s ease;
  }
  .card::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 78% 18%, rgba(255,255,255,0.22), transparent 42%);
    pointer-events: none;
  }
  .card-inner { position: relative; padding: 44px 52px 40px; }

  .header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px;
  }
  .loc { display: flex; flex-direction: column; gap: 6px; }
  .loc .name {
    font-size: 32px; font-weight: 700; letter-spacing: -0.5px;
    display: flex; align-items: center; gap: 10px;
  }
  .loc .name svg { opacity: 0.85; }
  .loc .date { font-size: 15px; font-weight: 500; color: rgba(232,237,245,0.72); }
  .loc .coords { font-size: 12.5px; color: rgba(232,237,245,0.5); letter-spacing: 0.3px; }

  .cond-badge {
    text-align: right;
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  }
  .cond-badge .cond-text { font-size: 17px; font-weight: 600; }
  .cond-badge .cond-sub { font-size: 12.5px; color: rgba(232,237,245,0.6); }

  .main {
    margin-top: 34px;
    display: flex; align-items: center; gap: 40px;
  }
  .icon-wrap {
    flex: 0 0 auto;
    width: 150px; height: 150px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
  }
  .temps { display: flex; flex-direction: column; gap: 10px; }
  .temp-max {
    font-size: 84px; font-weight: 200; line-height: 1; letter-spacing: -3px;
    display: flex; align-items: flex-start;
  }
  .temp-max .deg { font-size: 40px; font-weight: 300; margin-top: 8px; }
  .temp-meta { display: flex; gap: 22px; font-size: 16px; }
  .temp-meta .chip {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 999px;
    background: rgba(255,255,255,0.09);
  }
  .temp-meta .chip .label { color: rgba(232,237,245,0.65); font-size: 13px; }
  .temp-meta .chip .val { font-weight: 600; }

  .hourly {
    margin-top: 40px;
    background: rgba(0,0,0,0.16);
    border-radius: 20px;
    padding: 22px 24px 26px;
  }
  .hourly h3 {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1.4px; color: rgba(232,237,245,0.6);
    margin-bottom: 18px;
  }
  .chart { position: relative; }
  .chart svg { display: block; width: 100%; height: 150px; overflow: visible; }
  .chart .hlabel { font-size: 10px; fill: rgba(232,237,245,0.5); }
  .chart .vlabel { font-size: 11px; fill: rgba(232,237,245,0.92); font-weight: 600; }
  .chart .dot { fill: #ffd580; }

  .msg {
    padding: 80px 40px; text-align: center;
  }
  .msg .big { font-size: 22px; font-weight: 600; margin-bottom: 10px; }
  .msg .small { font-size: 15px; color: rgba(232,237,245,0.7); }
  .msg.error .big { color: #ffb4a2; }

  .skeleton { color: rgba(232,237,245,0.6); }
</style>
</head>
<body>
<div id="app">
  <div class="card"><div class="card-inner" id="content">
    <div class="msg skeleton"><div class="big">Loading weather…</div></div>
  </div></div>
</div>
<script>
(function () {
  "use strict";

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

  function todayUTC() {
    var d = new Date();
    return d.getUTCFullYear() + "-" + pad(d.getUTCMonth() + 1) + "-" + pad(d.getUTCDate());
  }
  function pad(n) { return (n < 10 ? "0" : "") + n; }

  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;
  if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) date = todayUTC();

  // Weather code mapping (WMO)
  var WMO = {
    0:  { t: "Clear sky", g: "clear" },
    1:  { t: "Mainly clear", g: "clear" },
    2:  { t: "Partly cloudy", g: "cloud" },
    3:  { t: "Overcast", g: "cloud" },
    45: { t: "Fog", g: "fog" },
    48: { t: "Depositing rime fog", g: "fog" },
    51: { t: "Light drizzle", g: "rain" },
    53: { t: "Moderate drizzle", g: "rain" },
    55: { t: "Dense drizzle", g: "rain" },
    56: { t: "Freezing drizzle", g: "rain" },
    57: { t: "Dense freezing drizzle", g: "rain" },
    61: { t: "Slight rain", g: "rain" },
    63: { t: "Moderate rain", g: "rain" },
    65: { t: "Heavy rain", g: "rain" },
    66: { t: "Freezing rain", g: "rain" },
    67: { t: "Heavy freezing rain", g: "rain" },
    71: { t: "Slight snow", g: "snow" },
    73: { t: "Moderate snow", g: "snow" },
    75: { t: "Heavy snow", g: "snow" },
    77: { t: "Snow grains", g: "snow" },
    80: { t: "Slight rain showers", g: "rain" },
    81: { t: "Moderate rain showers", g: "rain" },
    82: { t: "Violent rain showers", g: "rain" },
    85: { t: "Slight snow showers", g: "snow" },
    86: { t: "Heavy snow showers", g: "snow" },
    95: { t: "Thunderstorm", g: "storm" },
    96: { t: "Thunderstorm w/ slight hail", g: "storm" },
    99: { t: "Thunderstorm w/ heavy hail", g: "storm" }
  };

  var GRADIENTS = {
    clear: "linear-gradient(160deg, #2b5876 0%, #4e8fc4 50%, #7fb2df 100%)",
    cloud: "linear-gradient(160deg, #3a4a5c 0%, #5a6b7d 55%, #7c8b9c 100%)",
    fog:   "linear-gradient(160deg, #4a5560 0%, #6b7580 55%, #939ba5 100%)",
    rain:  "linear-gradient(160deg, #223047 0%, #37506b 55%, #547394 100%)",
    snow:  "linear-gradient(160deg, #4a6079 0%, #7593b0 55%, #aec6dd 100%)",
    storm: "linear-gradient(160deg, #1b2130 0%, #33405a 55%, #4a5a7d 100%)"
  };

  function iconFor(group) {
    var s = '<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">';
    var sun = '<circle cx="44" cy="40" r="18" fill="#ffd580"/>' +
      '<g stroke="#ffd580" stroke-width="4" stroke-linecap="round">' +
      '<line x1="44" y1="8" x2="44" y2="16"/><line x1="44" y1="64" x2="44" y2="72"/>' +
      '<line x1="12" y1="40" x2="20" y2="40"/><line x1="68" y1="40" x2="76" y2="40"/>' +
      '<line x1="21" y1="17" x2="27" y2="23"/><line x1="61" y1="57" x2="67" y2="63"/>' +
      '<line x1="67" y1="17" x2="61" y2="23"/><line x1="27" y1="57" x2="21" y2="63"/></g>';
    var cloud = '<path d="M26 58a14 14 0 0 1 1.6-27.9 20 20 0 0 1 38 4.2A12 12 0 0 1 64 58H26z" fill="#e8edf5"/>';
    var cloudDark = '<path d="M26 58a14 14 0 0 1 1.6-27.9 20 20 0 0 1 38 4.2A12 12 0 0 1 64 58H26z" fill="#c3ccd6"/>';
    var drops = '<g stroke="#8ec5ff" stroke-width="4" stroke-linecap="round"><line x1="32" y1="66" x2="29" y2="78"/><line x1="46" y1="66" x2="43" y2="78"/><line x1="60" y1="66" x2="57" y2="78"/></g>';
    var flakes = '<g fill="#ffffff"><circle cx="31" cy="72" r="3"/><circle cx="45" cy="76" r="3"/><circle cx="59" cy="72" r="3"/></g>';
    var bolt = '<path d="M46 62l-12 0 8-14-14 0 16-22-4 16 12 0z" fill="#ffd580"/>';

    if (group === "clear") s += sun;
    else if (group === "cloud") s += '<circle cx="30" cy="32" r="12" fill="#ffd580"/>' + cloud;
    else if (group === "fog") s += cloudDark + '<g stroke="#cfd7e0" stroke-width="4" stroke-linecap="round"><line x1="24" y1="68" x2="56" y2="68"/><line x1="30" y1="76" x2="62" y2="76"/></g>';
    else if (group === "rain") s += cloud + drops;
    else if (group === "snow") s += cloud + flakes;
    else if (group === "storm") s += cloudDark + bolt;
    else s += cloud;
    s += '</svg>';
    return s;
  }

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

  function fmtDate(iso) {
    var parts = iso.split("-");
    var d = new Date(Date.UTC(+parts[0], +parts[1] - 1, +parts[2]));
    var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
    var mons = ["January","February","March","April","May","June","July","August","September","October","November","December"];
    return days[d.getUTCDay()] + ", " + mons[d.getUTCMonth()] + " " + d.getUTCDate() + ", " + d.getUTCFullYear();
  }

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

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

  function showError(detail) {
    content.innerHTML =
      '<div class="msg error">' +
      '<div class="big">Weather data could not be loaded</div>' +
      '<div class="small">' + esc(detail || "Please try again later.") + '</div>' +
      '</div>';
  }

  function round(v) { return Math.round(v); }

  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 wcode = daily.weather_code && daily.weather_code[0];

    if (tmax == null || tmin == null) {
      showError("The response did not include temperature data for this date.");
      return;
    }

    var wmo = WMO[wcode] || { t: "Unknown", g: "cloud" };
    document.querySelector(".card").style.background = GRADIENTS[wmo.g] || GRADIENTS.clear;

    var htimes = hourly.time || [];
    var htemps = hourly.temperature_2m || [];
    var hours = [];
    for (var i = 0; i < htimes.length; i++) {
      if (htimes[i].indexOf(date) === 0 && htemps[i] != null) {
        hours.push({ h: parseInt(htimes[i].substr(11, 2), 10), v: htemps[i] });
      }
    }

    var pinSvg = '<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z"/></svg>';

    var html =
      '<div class="header">' +
        '<div class="loc">' +
          '<div class="name">' + pinSvg + '<span>' + esc(name) + '</span></div>' +
          '<div class="date">' + esc(fmtDate(date)) + '</div>' +
          '<div class="coords">' + lat.toFixed(3) + '°, ' + lon.toFixed(3) + '°</div>' +
        '</div>' +
        '<div class="cond-badge">' +
          '<div class="cond-text">' + esc(wmo.t) + '</div>' +
          '<div class="cond-sub">' + (isPast(date) ? "Historical record" : "Forecast") + '</div>' +
        '</div>' +
      '</div>' +
      '<div class="main">' +
        '<div class="icon-wrap">' + iconFor(wmo.g) + '</div>' +
        '<div class="temps">' +
          '<div class="temp-max">' + round(tmax) + '<span class="deg">°C</span></div>' +
          '<div class="temp-meta">' +
            '<div class="chip"><span class="label">High</span><span class="val">' + round(tmax) + '°</span></div>' +
            '<div class="chip"><span class="label">Low</span><span class="val">' + round(tmin) + '°</span></div>' +
          '</div>' +
        '</div>' +
      '</div>' +
      '<div class="hourly">' +
        '<h3>Hourly temperature</h3>' +
        '<div class="chart">' + chart(hours) + '</div>' +
      '</div>';

    content.innerHTML = html;
  }

  function chart(hours) {
    if (!hours.length) {
      return '<div class="small" style="color:rgba(232,237,245,0.6)">No hourly data available for this date.</div>';
    }
    var W = 944, H = 150, padT = 26, padB = 24, padX = 14;
    var vals = hours.map(function (h) { return h.v; });
    var mn = Math.min.apply(null, vals), mx = Math.max.apply(null, vals);
    if (mn === mx) { mn -= 1; mx += 1; }
    var n = hours.length;
    var innerW = W - padX * 2;
    function x(i) { return padX + (n === 1 ? innerW / 2 : innerW * i / (n - 1)); }
    function y(v) { return padT + (H - padT - padB) * (1 - (v - mn) / (mx - mn)); }

    var linePts = "", areaPts = "";
    for (var i = 0; i < n; i++) {
      linePts += (i ? " L" : "M") + x(i).toFixed(1) + " " + y(hours[i].v).toFixed(1);
    }
    areaPts = linePts + " L" + x(n - 1).toFixed(1) + " " + (H - padB) + " L" + x(0).toFixed(1) + " " + (H - padB) + " Z";

    var svg = '<svg viewBox="0 0 ' + W + ' ' + H + '" preserveAspectRatio="none">';
    svg += '<defs><linearGradient id="ag" x1="0" y1="0" x2="0" y2="1">' +
           '<stop offset="0" stop-color="#ffd580" stop-opacity="0.35"/>' +
           '<stop offset="1" stop-color="#ffd580" stop-opacity="0"/></linearGradient></defs>';
    svg += '<path d="' + areaPts + '" fill="url(#ag)"/>';
    svg += '<path d="' + linePts + '" fill="none" stroke="#ffd580" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>';

    // step for labels to avoid crowding
    var labelStep = n > 12 ? Math.ceil(n / 8) : 1;
    for (var j = 0; j < n; j++) {
      var cx = x(j), cy = y(hours[j].v);
      var showLabel = (j % labelStep === 0) || j === n - 1;
      if (showLabel) {
        svg += '<circle class="dot" cx="' + cx.toFixed(1) + '" cy="' + cy.toFixed(1) + '" r="3"/>';
        svg += '<text class="vlabel" x="' + cx.toFixed(1) + '" y="' + (cy - 9).toFixed(1) + '" text-anchor="middle">' + round(hours[j].v) + '°</text>';
        svg += '<text class="hlabel" x="' + cx.toFixed(1) + '" y="' + (H - 6) + '" text-anchor="middle">' + pad(hours[j].h) + '</text>';
      }
    }
    svg += '</svg>';
    return svg;
  }

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

  fetch(buildURL(base))
    .then(function (r) {
      if (!r.ok) throw new Error("Server responded with status " + 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(err && err.message ? err.message : "Network error");
    });
})();
</script>
</body>
</html>