claude-opus-4-8-thinking @ 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; }
  :root {
    --bg1: #1e3a5f;
    --bg2: #4a7fb5;
    --card: rgba(255,255,255,0.14);
    --stroke: rgba(255,255,255,0.28);
    --txt: #f4f8ff;
    --muted: rgba(244,248,255,0.72);
    --accent: #ffd166;
  }
  html, body { width: 1280px; height: 800px; overflow: hidden; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(160deg, var(--bg1), var(--bg2));
    color: var(--txt);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.8s ease;
  }
  .card {
    width: 1040px;
    height: 620px;
    background: var(--card);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--stroke);
    border-radius: 32px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
  }
  .top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .loc { font-size: 40px; font-weight: 700; letter-spacing: -0.5px; }
  .date { font-size: 18px; color: var(--muted); margin-top: 6px; }
  .cond-wrap { text-align: right; }
  .icon { font-size: 82px; line-height: 1; }
  .cond { font-size: 20px; color: var(--muted); margin-top: 4px; }
  .mid {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-top: 30px;
  }
  .temp-main { font-size: 132px; font-weight: 200; letter-spacing: -4px; line-height: 1; }
  .temp-main span { font-size: 60px; vertical-align: top; font-weight: 300; }
  .hilo { display: flex; flex-direction: column; gap: 18px; }
  .hilo .row { display: flex; align-items: baseline; gap: 12px; }
  .hilo .lbl { font-size: 15px; color: var(--muted); width: 40px; letter-spacing: 1px; }
  .hilo .val { font-size: 34px; font-weight: 500; }
  .chart-title { font-size: 15px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 34px; }
  .chart { flex: 1; margin-top: 10px; position: relative; }
  svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .lbl-x { fill: var(--muted); font-size: 12px; text-anchor: middle; }
  .lbl-pt { fill: var(--txt); font-size: 12px; text-anchor: middle; font-weight: 600; }
  .msg {
    color: var(--txt);
    font-size: 22px;
    text-align: center;
    line-height: 1.5;
  }
  .msg .sub { font-size: 16px; color: var(--muted); margin-top: 12px; }
</style>
</head>
<body>
<div class="card" id="card">
  <div class="msg">Loading weather…</div>
</div>
<script>
(function () {
  var q = new URLSearchParams(location.search);
  var lat = q.get('lat') || '52.52';
  var lon = q.get('lon') || '13.405';
  var name = q.get('name') || 'Berlin';
  var today = new Date().toISOString().slice(0, 10);
  var date = q.get('date') || today;

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

  var WMO = {
    0:  ['Clear sky', '☀️'],
    1:  ['Mainly clear', '🌤️'],
    2:  ['Partly cloudy', '⛅'],
    3:  ['Overcast', '☁️'],
    45: ['Fog', '🌫️'], 48: ['Rime fog', '🌫️'],
    51: ['Light drizzle', '🌦️'], 53: ['Drizzle', '🌦️'], 55: ['Dense drizzle', '🌧️'],
    56: ['Freezing drizzle', '🌧️'], 57: ['Freezing drizzle', '🌧️'],
    61: ['Light rain', '🌦️'], 63: ['Rain', '🌧️'], 65: ['Heavy rain', '🌧️'],
    66: ['Freezing rain', '🌧️'], 67: ['Freezing rain', '🌧️'],
    71: ['Light snow', '🌨️'], 73: ['Snow', '🌨️'], 75: ['Heavy snow', '❄️'],
    77: ['Snow grains', '🌨️'],
    80: ['Rain showers', '🌦️'], 81: ['Rain showers', '🌧️'], 82: ['Violent showers', '⛈️'],
    85: ['Snow showers', '🌨️'], 86: ['Snow showers', '❄️'],
    95: ['Thunderstorm', '⛈️'], 96: ['Thunderstorm', '⛈️'], 99: ['Thunderstorm', '⛈️']
  };

  function fmt(t) { return Math.round(t) + '°'; }

  function niceDate(d) {
    var parts = d.split('-');
    var dt = new Date(Date.UTC(+parts[0], +parts[1] - 1, +parts[2]));
    return dt.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' });
  }

  function setTheme(code) {
    var g;
    if (code === 0 || code === 1) g = ['#2b5876', '#4e93c9'];
    else if (code === 2 || code === 3 || code === 45 || code === 48) g = ['#3a4a5a', '#6b7f93'];
    else if (code >= 71 && code <= 86) g = ['#4a5a6e', '#95aec4'];
    else if (code >= 51 && code <= 82) g = ['#2c3e50', '#4a6079'];
    else if (code >= 95) g = ['#232946', '#3a4a6b'];
    else g = ['#1e3a5f', '#4a7fb5'];
    document.body.style.background = 'linear-gradient(160deg,' + g[0] + ',' + g[1] + ')';
  }

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

  var base = isPast(date) ? '/api/om/archive' : '/api/om/forecast';
  var url = base + '?latitude=' + encodeURIComponent(lat) +
            '&longitude=' + encodeURIComponent(lon) +
            '&daily=temperature_2m_max,temperature_2m_min,weather_code' +
            '&hourly=temperature_2m' +
            '&timezone=UTC&temperature_unit=celsius' +
            '&start_date=' + encodeURIComponent(date) +
            '&end_date=' + encodeURIComponent(date);

  fetch(url)
    .then(function (r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
    .then(function (data) { render(data); })
    .catch(function (e) { showError(e); });

  function showError(e) {
    card.innerHTML = '<div class="msg">Weather data could not be loaded.' +
      '<div class="sub">' + (e && e.message ? String(e.message) : 'Unknown error') + '</div></div>';
  }

  function render(data) {
    try {
      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 temps = hourly.temperature_2m || [];
      var times = hourly.time || [];

      if (tmax == null || tmin == null || !temps.length) throw new Error('Incomplete data');

      code = code == null ? -1 : code;
      var cond = WMO[code] || ['Unknown', '🌡️'];
      setTheme(code);

      var avg = Math.round((tmax + tmin) / 2);

      var html = '' +
        '<div class="top">' +
          '<div><div class="loc">' + esc(name) + '</div>' +
          '<div class="date">' + niceDate(date) + '</div></div>' +
          '<div class="cond-wrap"><div class="icon">' + cond[1] + '</div>' +
          '<div class="cond">' + cond[0] + '</div></div>' +
        '</div>' +
        '<div class="mid">' +
          '<div class="temp-main">' + Math.round(avg) + '<span>°C</span></div>' +
          '<div class="hilo">' +
            '<div class="row"><div class="lbl">HIGH</div><div class="val">' + fmt(tmax) + '</div></div>' +
            '<div class="row"><div class="lbl">LOW</div><div class="val">' + fmt(tmin) + '</div></div>' +
          '</div>' +
        '</div>' +
        '<div class="chart-title">Hourly temperature</div>' +
        '<div class="chart">' + chartSVG(temps, times) + '</div>';

      card.innerHTML = html;
    } catch (e) {
      showError(e);
    }
  }

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

  function chartSVG(temps, times) {
    var W = 928, H = 200, padL = 10, padR = 10, padT = 34, padB = 28;
    var n = temps.length;
    var min = Math.min.apply(null, temps), max = Math.max.apply(null, temps);
    if (min === max) { min -= 1; max += 1; }
    var iw = W - padL - padR, ih = H - padT - padB;
    function x(i) { return padL + (n <= 1 ? iw / 2 : (i / (n - 1)) * iw); }
    function y(v) { return padT + ih - ((v - min) / (max - min)) * ih; }

    var line = '', area = '', pts = '', labels = '';
    for (var i = 0; i < n; i++) {
      var px = x(i), py = y(temps[i]);
      line += (i === 0 ? 'M' : 'L') + px.toFixed(1) + ',' + py.toFixed(1) + ' ';
      if (i === 0) area += 'M' + px.toFixed(1) + ',' + py.toFixed(1) + ' ';
      else area += 'L' + px.toFixed(1) + ',' + py.toFixed(1) + ' ';
    }
    area += 'L' + x(n - 1).toFixed(1) + ',' + (padT + ih) + ' L' + x(0).toFixed(1) + ',' + (padT + ih) + ' Z';

    var step = n > 12 ? Math.ceil(n / 8) : 1;
    for (var j = 0; j < n; j++) {
      var hr = times[j] ? times[j].slice(11, 16) : j + ':00';
      if (j % step === 0 || j === n - 1) {
        labels += '<text class="lbl-x" x="' + x(j).toFixed(1) + '" y="' + (H - 8) + '">' + hr + '</text>';
        labels += '<text class="lbl-pt" x="' + x(j).toFixed(1) + '" y="' + (y(temps[j]) - 10).toFixed(1) + '">' + Math.round(temps[j]) + '°</text>';
        labels += '<circle cx="' + x(j).toFixed(1) + '" cy="' + y(temps[j]).toFixed(1) + '" r="3.5" fill="#ffd166"/>';
      }
    }

    return '<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(255,209,102,0.35)"/>' +
      '<stop offset="100%" stop-color="rgba(255,209,102,0)"/>' +
      '</linearGradient></defs>' +
      '<path d="' + area + '" fill="url(#fill)"/>' +
      '<path d="' + line + '" fill="none" stroke="#ffd166" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>' +
      labels +
      '</svg>';
  }
})();
</script>
</body>
</html>