claude-opus-4-7 @ low · cursor

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1280" />
<title>Weather Card</title>
<style>
  *, *::before, *::after { box-sizing: border-box; }
  html, body {
    margin: 0;
    padding: 0;
    width: 1280px;
    height: 800px;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
    color: #0f172a;
    background: #e2e8f0;
    overflow: hidden;
  }
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(1200px 700px at 15% 10%, #c7d9ff 0%, transparent 60%),
      radial-gradient(900px 600px at 90% 100%, #ffd6ea 0%, transparent 55%),
      linear-gradient(135deg, #eef2ff 0%, #f0f9ff 50%, #fdf2f8 100%);
  }
  .card {
    width: 1120px;
    height: 680px;
    border-radius: 32px;
    background: linear-gradient(160deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65));
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    box-shadow:
      0 40px 80px -20px rgba(30, 41, 59, 0.35),
      0 10px 30px -10px rgba(30, 41, 59, 0.15),
      inset 0 1px 0 rgba(255,255,255,0.9);
    padding: 48px 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 28px 48px;
    position: relative;
    overflow: hidden;
  }
  .card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 300px at 100% 0%, rgba(59,130,246,0.12), transparent 70%);
    pointer-events: none;
  }
  .header { grid-column: 1 / -1; display: flex; align-items: flex-start; justify-content: space-between; }
  .location {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #64748b;
    font-weight: 600;
  }
  .name {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 8px 0 6px;
    color: #0f172a;
  }
  .date {
    font-size: 18px;
    color: #475569;
    font-weight: 500;
  }
  .condition-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
  }
  .condition-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 0 4px rgba(56,189,248,0.2); }

  .primary { display: flex; flex-direction: column; justify-content: center; gap: 24px; }
  .temp-row { display: flex; align-items: flex-start; gap: 24px; }
  .icon-wrap {
    width: 140px; height: 140px;
    border-radius: 32px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #fef9c3, #fde68a);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), 0 20px 40px -15px rgba(202, 138, 4, 0.4);
    flex-shrink: 0;
  }
  .icon-wrap svg { width: 96px; height: 96px; }
  .big-temp {
    font-size: 128px;
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.9;
    color: #0f172a;
    display: flex;
    align-items: flex-start;
  }
  .big-temp .deg { font-size: 56px; margin-top: 12px; color: #94a3b8; font-weight: 500; }
  .condition-text {
    font-size: 24px;
    font-weight: 600;
    color: #1e293b;
    margin-top: 4px;
  }
  .minmax { display: flex; gap: 12px; margin-top: 4px; }
  .chip {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(15,23,42,0.06);
    font-size: 15px;
    font-weight: 600;
    color: #334155;
  }
  .chip .label { color: #64748b; font-weight: 500; }
  .chip.high .arrow { color: #ef4444; }
  .chip.low .arrow { color: #3b82f6; }

  .hourly {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
  }
  .hourly-title {
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 700;
  }
  .chart {
    position: relative;
    flex: 1;
    min-height: 0;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 20px;
    padding: 20px 16px 12px;
  }
  .chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .hours-strip {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 2px;
    margin-top: 10px;
  }
  .hour-tick {
    text-align: center;
    font-size: 10px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
  }
  .hour-tick.major { color: #475569; font-weight: 600; }

  .error {
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #fecaca;
    padding: 20px 24px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 500;
    grid-column: 1 / -1;
    align-self: center;
  }

  .footer-note {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    color: #94a3b8;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
  }
</style>
</head>
<body>
  <div class="card" id="card">
    <div class="header">
      <div>
        <div class="location">Location</div>
        <div class="name" id="name">—</div>
        <div class="date" id="date">—</div>
      </div>
      <div class="condition-badge"><span class="dot"></span><span id="badge">Loading…</span></div>
    </div>
    <div id="content" style="display:contents;"></div>
  </div>

<script>
(function() {
  const WMO = {
    0: { text: "Clear sky", icon: "sun", grad: ["#fde68a", "#fbbf24"] },
    1: { text: "Mainly clear", icon: "sun", grad: ["#fde68a", "#fbbf24"] },
    2: { text: "Partly cloudy", icon: "partly", grad: ["#e0f2fe", "#bae6fd"] },
    3: { text: "Overcast", icon: "cloud", grad: ["#e2e8f0", "#cbd5e1"] },
    45: { text: "Fog", icon: "fog", grad: ["#e2e8f0", "#cbd5e1"] },
    48: { text: "Rime fog", icon: "fog", grad: ["#e2e8f0", "#cbd5e1"] },
    51: { text: "Light drizzle", icon: "rain", grad: ["#dbeafe", "#93c5fd"] },
    53: { text: "Drizzle", icon: "rain", grad: ["#dbeafe", "#93c5fd"] },
    55: { text: "Dense drizzle", icon: "rain", grad: ["#dbeafe", "#93c5fd"] },
    56: { text: "Freezing drizzle", icon: "rain", grad: ["#dbeafe", "#93c5fd"] },
    57: { text: "Freezing drizzle", icon: "rain", grad: ["#dbeafe", "#93c5fd"] },
    61: { text: "Light rain", icon: "rain", grad: ["#dbeafe", "#60a5fa"] },
    63: { text: "Rain", icon: "rain", grad: ["#dbeafe", "#60a5fa"] },
    65: { text: "Heavy rain", icon: "rain", grad: ["#bfdbfe", "#3b82f6"] },
    66: { text: "Freezing rain", icon: "rain", grad: ["#dbeafe", "#60a5fa"] },
    67: { text: "Freezing rain", icon: "rain", grad: ["#dbeafe", "#60a5fa"] },
    71: { text: "Light snow", icon: "snow", grad: ["#f1f5f9", "#cbd5e1"] },
    73: { text: "Snow", icon: "snow", grad: ["#f1f5f9", "#cbd5e1"] },
    75: { text: "Heavy snow", icon: "snow", grad: ["#e2e8f0", "#94a3b8"] },
    77: { text: "Snow grains", icon: "snow", grad: ["#f1f5f9", "#cbd5e1"] },
    80: { text: "Rain showers", icon: "rain", grad: ["#dbeafe", "#60a5fa"] },
    81: { text: "Rain showers", icon: "rain", grad: ["#dbeafe", "#60a5fa"] },
    82: { text: "Violent showers", icon: "rain", grad: ["#bfdbfe", "#2563eb"] },
    85: { text: "Snow showers", icon: "snow", grad: ["#f1f5f9", "#cbd5e1"] },
    86: { text: "Snow showers", icon: "snow", grad: ["#e2e8f0", "#94a3b8"] },
    95: { text: "Thunderstorm", icon: "storm", grad: ["#c7d2fe", "#6366f1"] },
    96: { text: "Thunderstorm w/ hail", icon: "storm", grad: ["#c7d2fe", "#6366f1"] },
    99: { text: "Thunderstorm w/ hail", icon: "storm", grad: ["#c7d2fe", "#6366f1"] }
  };

  function icon(name) {
    switch (name) {
      case "sun":
        return `<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="20" fill="#f59e0b"/>${
          Array.from({length:8}).map((_,i)=>{const a=i*Math.PI/4;const x1=50+Math.cos(a)*28,y1=50+Math.sin(a)*28,x2=50+Math.cos(a)*40,y2=50+Math.sin(a)*40;return `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="#f59e0b" stroke-width="5" stroke-linecap="round"/>`}).join("")
        }</svg>`;
      case "partly":
        return `<svg viewBox="0 0 100 100"><circle cx="35" cy="38" r="15" fill="#f59e0b"/><path d="M30 70 Q30 55 45 55 Q50 45 62 48 Q78 45 80 60 Q92 62 88 75 Q86 82 78 82 L34 82 Q20 82 20 72 Q20 62 30 70 Z" fill="#f8fafc" stroke="#cbd5e1" stroke-width="2"/></svg>`;
      case "cloud":
        return `<svg viewBox="0 0 100 100"><path d="M25 68 Q22 50 40 48 Q46 36 60 40 Q78 38 80 56 Q92 58 88 72 Q85 80 76 80 L30 80 Q16 80 16 70 Q16 62 25 68 Z" fill="#f8fafc" stroke="#94a3b8" stroke-width="2"/></svg>`;
      case "rain":
        return `<svg viewBox="0 0 100 100"><path d="M25 52 Q22 34 40 32 Q46 20 60 24 Q78 22 80 40 Q92 42 88 56 Q85 64 76 64 L30 64 Q16 64 16 54 Q16 46 25 52 Z" fill="#e0f2fe" stroke="#60a5fa" stroke-width="2"/>${
          [30,45,60,75].map((x,i)=>`<line x1="${x}" y1="70" x2="${x-4}" y2="86" stroke="#3b82f6" stroke-width="4" stroke-linecap="round"/>`).join("")
        }</svg>`;
      case "snow":
        return `<svg viewBox="0 0 100 100"><path d="M25 52 Q22 34 40 32 Q46 20 60 24 Q78 22 80 40 Q92 42 88 56 Q85 64 76 64 L30 64 Q16 64 16 54 Q16 46 25 52 Z" fill="#f1f5f9" stroke="#94a3b8" stroke-width="2"/>${
          [30,50,70].map(x=>`<circle cx="${x}" cy="80" r="4" fill="#e2e8f0" stroke="#94a3b8" stroke-width="1.5"/>`).join("")
        }</svg>`;
      case "storm":
        return `<svg viewBox="0 0 100 100"><path d="M25 48 Q22 30 40 28 Q46 16 60 20 Q78 18 80 36 Q92 38 88 52 Q85 60 76 60 L30 60 Q16 60 16 50 Q16 42 25 48 Z" fill="#e0e7ff" stroke="#818cf8" stroke-width="2"/><polygon points="50,60 42,80 52,80 46,94 62,72 52,72 58,60" fill="#facc15" stroke="#ca8a04" stroke-width="1.5"/></svg>`;
      case "fog":
        return `<svg viewBox="0 0 100 100"><path d="M25 48 Q22 30 40 28 Q46 16 60 20 Q78 18 80 36 Q92 38 88 52 Q85 60 76 60 L30 60 Q16 60 16 50 Q16 42 25 48 Z" fill="#f1f5f9" stroke="#94a3b8" stroke-width="2"/>${
          [70,78,86].map(y=>`<line x1="18" y1="${y}" x2="82" y2="${y}" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>`).join("")
        }</svg>`;
    }
    return "";
  }

  function qp() {
    const p = new URLSearchParams(location.search);
    const today = new Date().toISOString().slice(0,10);
    return {
      lat: parseFloat(p.get("lat")) || 52.52,
      lon: parseFloat(p.get("lon")) || 13.405,
      name: p.get("name") || "Berlin",
      date: p.get("date") || today
    };
  }

  function fmtDate(d) {
    const dt = new Date(d + "T00:00:00Z");
    return dt.toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric", timeZone: "UTC" });
  }

  function isPast(dateStr) {
    const today = new Date().toISOString().slice(0,10);
    return dateStr < today;
  }

  async function fetchData(params) {
    const endpoint = isPast(params.date) ? "/api/om/archive" : "/api/om/forecast";
    const url = new URL(endpoint, location.origin);
    url.searchParams.set("latitude", params.lat);
    url.searchParams.set("longitude", params.lon);
    url.searchParams.set("daily", "temperature_2m_max,temperature_2m_min,weather_code");
    url.searchParams.set("hourly", "temperature_2m");
    url.searchParams.set("timezone", "UTC");
    url.searchParams.set("temperature_unit", "celsius");
    url.searchParams.set("start_date", params.date);
    url.searchParams.set("end_date", params.date);
    const r = await fetch(url.toString());
    if (!r.ok) throw new Error("HTTP " + r.status);
    return r.json();
  }

  function renderError(msg) {
    document.getElementById("badge").textContent = "Error";
    document.getElementById("content").innerHTML = `<div class="error">Unable to load weather data. ${msg}</div>`;
  }

  function renderChart(hours, temps) {
    const w = 520, h = 220, padL = 36, padR = 12, padT = 18, padB = 8;
    const min = Math.min(...temps), max = Math.max(...temps);
    const range = Math.max(1, max - min);
    const yMin = Math.floor(min - range * 0.15);
    const yMax = Math.ceil(max + range * 0.15);
    const yRange = yMax - yMin;
    const xStep = (w - padL - padR) / (temps.length - 1);
    const pts = temps.map((t, i) => [padL + i * xStep, padT + (1 - (t - yMin) / yRange) * (h - padT - padB)]);
    const path = pts.map((p, i) => (i === 0 ? "M" : "L") + p[0].toFixed(1) + "," + p[1].toFixed(1)).join(" ");
    const area = path + ` L${pts[pts.length-1][0].toFixed(1)},${h-padB} L${pts[0][0].toFixed(1)},${h-padB} Z`;

    const yTicks = 4;
    let gridLines = "";
    let yLabels = "";
    for (let i = 0; i <= yTicks; i++) {
      const v = yMin + (yRange * i / yTicks);
      const y = padT + (1 - i / yTicks) * (h - padT - padB);
      gridLines += `<line x1="${padL}" y1="${y}" x2="${w-padR}" y2="${y}" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2 4"/>`;
      yLabels += `<text x="${padL - 8}" y="${y + 4}" text-anchor="end" font-size="10" fill="#94a3b8" font-weight="600">${v.toFixed(0)}°</text>`;
    }

    const maxI = temps.indexOf(max);
    const minI = temps.indexOf(min);
    const marker = (i, color, label, up) => {
      const [x, y] = pts[i];
      const dy = up ? -14 : 22;
      return `<circle cx="${x}" cy="${y}" r="5" fill="white" stroke="${color}" stroke-width="2.5"/>
              <text x="${x}" y="${y + dy}" text-anchor="middle" font-size="12" font-weight="700" fill="${color}">${label}</text>`;
    };

    return `<svg viewBox="0 0 ${w} ${h}" preserveAspectRatio="none">
      <defs>
        <linearGradient id="grad" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stop-color="#3b82f6" stop-opacity="0.35"/>
          <stop offset="100%" stop-color="#3b82f6" stop-opacity="0"/>
        </linearGradient>
      </defs>
      ${gridLines}
      ${yLabels}
      <path d="${area}" fill="url(#grad)"/>
      <path d="${path}" fill="none" stroke="#3b82f6" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
      ${marker(maxI, "#ef4444", temps[maxI].toFixed(1) + "°", true)}
      ${marker(minI, "#2563eb", temps[minI].toFixed(1) + "°", false)}
    </svg>`;
  }

  function render(params, data) {
    document.getElementById("name").textContent = params.name;
    document.getElementById("date").textContent = fmtDate(params.date);

    const daily = data.daily || {};
    const hourly = data.hourly || {};
    const code = (daily.weather_code && daily.weather_code[0] != null) ? daily.weather_code[0] : null;
    const tmax = daily.temperature_2m_max ? daily.temperature_2m_max[0] : null;
    const tmin = daily.temperature_2m_min ? daily.temperature_2m_min[0] : null;
    const times = hourly.time || [];
    const temps = hourly.temperature_2m || [];

    if (tmax == null || tmin == null || temps.length === 0) {
      renderError("Missing data for this date.");
      return;
    }

    const info = WMO[code] || { text: "Unknown", icon: "cloud", grad: ["#e2e8f0", "#cbd5e1"] };
    document.getElementById("badge").textContent = info.text;

    const hours = times.map(t => parseInt(t.slice(11, 13), 10));
    const avg = temps.reduce((a,b)=>a+b,0) / temps.length;

    const hourTicks = hours.map((h, i) => {
      const major = h % 3 === 0;
      return `<div class="hour-tick ${major ? "major" : ""}">${major ? String(h).padStart(2,"0") : ""}</div>`;
    }).join("");

    document.getElementById("content").innerHTML = `
      <div class="primary">
        <div class="temp-row">
          <div class="icon-wrap" style="background: linear-gradient(135deg, ${info.grad[0]}, ${info.grad[1]});">
            ${icon(info.icon)}
          </div>
          <div>
            <div class="big-temp">${Math.round(avg)}<span class="deg">°C</span></div>
            <div class="condition-text">${info.text}</div>
          </div>
        </div>
        <div class="minmax">
          <div class="chip high"><span class="arrow">▲</span><span class="label">High</span><span>${tmax.toFixed(1)}°C</span></div>
          <div class="chip low"><span class="arrow">▼</span><span class="label">Low</span><span>${tmin.toFixed(1)}°C</span></div>
          <div class="chip"><span class="label">Avg</span><span>${avg.toFixed(1)}°C</span></div>
        </div>
      </div>
      <div class="hourly">
        <div class="hourly-title">Hourly Temperature · UTC</div>
        <div class="chart">${renderChart(hours, temps)}</div>
        <div class="hours-strip">${hourTicks}</div>
      </div>
      <div class="footer-note">
        <span>${params.lat.toFixed(3)}°, ${params.lon.toFixed(3)}°</span>
        <span>Open-Meteo · ${isPast(params.date) ? "Archive" : "Forecast"}</span>
      </div>
    `;
  }

  const params = qp();
  document.getElementById("name").textContent = params.name;
  document.getElementById("date").textContent = fmtDate(params.date);

  fetchData(params).then(d => render(params, d)).catch(e => renderError(e.message || String(e)));
})();
</script>
</body>
</html>