claude-opus-4-7 @ medium · cursor-xl

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1280,initial-scale=1" />
<title>Weather</title>
<style>
  :root {
    --bg-0: #0b1020;
    --bg-1: #131a35;
    --ink: #eef2ff;
    --ink-dim: #9aa4c7;
    --ink-soft: #c7cee6;
    --line: rgba(255,255,255,0.08);
    --card: rgba(255,255,255,0.045);
    --card-strong: rgba(255,255,255,0.08);
    --accent: #ffd166;
    --cool: #7cc4ff;
    --warm: #ff8f6b;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    width: 1280px;
    min-height: 800px;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background:
      radial-gradient(1200px 700px at 85% -10%, rgba(255,209,102,0.10), transparent 60%),
      radial-gradient(900px 700px at -10% 110%, rgba(124,196,255,0.12), transparent 60%),
      linear-gradient(160deg, #0a0f24 0%, #0d1430 40%, #121a3b 100%);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
  }
  .stage {
    width: 1280px;
    height: 800px;
    padding: 56px 64px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  header.top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink-dim);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .brand .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(255,209,102,0.7);
  }
  .meta {
    text-align: right;
    color: var(--ink-dim);
    font-size: 13px;
    letter-spacing: 0.06em;
  }
  .meta .coords { font-variant-numeric: tabular-nums; }

  .card {
    flex: 1;
    display: grid;
    grid-template-columns: 1.05fr 1.35fr;
    gap: 40px;
    padding: 40px;
    border-radius: 28px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid var(--line);
    box-shadow:
      0 30px 80px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.06);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
  }
  .card::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(600px 300px at 90% 0%, rgba(255,209,102,0.08), transparent 60%);
    pointer-events: none;
  }

  .left { display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 1; }
  .place {
    font-size: 14px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  h1.name {
    margin: 4px 0 0 0;
    font-size: 56px;
    line-height: 1.02;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .date {
    margin-top: 6px;
    font-size: 17px;
    color: var(--ink-soft);
  }

  .hero {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 8px;
  }
  .icon-wrap {
    width: 132px; height: 132px;
    display: grid; place-items: center;
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .icon-wrap svg { width: 96px; height: 96px; display: block; }
  .temps { display: flex; flex-direction: column; gap: 6px; }
  .big-temp {
    font-size: 96px;
    line-height: 0.95;
    font-weight: 500;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
  }
  .big-temp .deg { font-size: 44px; color: var(--ink-dim); font-weight: 400; margin-left: 4px; vertical-align: super; }
  .condition {
    font-size: 20px;
    color: var(--ink-soft);
  }

  .stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: auto;
  }
  .stat {
    padding: 18px 20px;
    border-radius: 18px;
    background: var(--card);
    border: 1px solid var(--line);
  }
  .stat .k {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-dim);
    display: flex; align-items: center; gap: 8px;
  }
  .stat .k .pill {
    width: 8px; height: 8px; border-radius: 50%;
  }
  .stat.max .pill { background: var(--warm); box-shadow: 0 0 8px rgba(255,143,107,0.7); }
  .stat.min .pill { background: var(--cool); box-shadow: 0 0 8px rgba(124,196,255,0.7); }
  .stat .v {
    margin-top: 8px;
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .stat .v .deg { color: var(--ink-dim); font-weight: 400; font-size: 22px; margin-left: 2px; }

  .right { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .right-head {
    display: flex; align-items: baseline; justify-content: space-between;
  }
  .right-title {
    font-size: 14px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .range {
    color: var(--ink-soft);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }
  .chart-wrap {
    flex: 1;
    padding: 20px 8px 8px 8px;
    border-radius: 20px;
    background: var(--card);
    border: 1px solid var(--line);
    min-height: 260px;
    display: flex; flex-direction: column;
  }
  .chart-wrap svg { width: 100%; height: 100%; display: block; }

  .hours {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
  }
  .hour {
    padding: 10px 6px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
    text-align: center;
  }
  .hour .h { font-size: 10px; color: var(--ink-dim); letter-spacing: 0.06em; }
  .hour .t { font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }

  .footer {
    display: flex; justify-content: space-between; color: var(--ink-dim); font-size: 12px; letter-spacing: 0.08em;
  }

  .error {
    margin: auto;
    text-align: center;
    padding: 40px;
  }
  .error .title { font-size: 28px; margin-bottom: 8px; }
  .error .msg { color: var(--ink-dim); font-size: 15px; }

  .loading { color: var(--ink-dim); font-size: 14px; }
</style>
</head>
<body>
<div class="stage" id="stage">
  <div class="loading">Loading…</div>
</div>

<script>
(function () {
  const qs = new URLSearchParams(location.search);
  const lat = parseFloat(qs.get("lat") ?? "52.52");
  const lon = parseFloat(qs.get("lon") ?? "13.405");
  const name = qs.get("name") ?? "Berlin";
  const todayUTC = new Date().toISOString().slice(0, 10);
  const date = qs.get("date") ?? todayUTC;

  const isPast = date < todayUTC;
  const endpoint = isPast ? "/api/om/archive" : "/api/om/forecast";

  const params = new URLSearchParams({
    latitude: String(lat),
    longitude: String(lon),
    daily: "temperature_2m_max,temperature_2m_min,weather_code",
    hourly: "temperature_2m",
    timezone: "UTC",
    temperature_unit: "celsius",
    start_date: date,
    end_date: date,
  });

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

  function iconFor(code) {
    // Returns inline SVG string
    const sun = `
      <defs>
        <radialGradient id="sg" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stop-color="#ffe08a"/>
          <stop offset="70%" stop-color="#ffb43a"/>
          <stop offset="100%" stop-color="#ff8f2e"/>
        </radialGradient>
      </defs>
      <g stroke="#ffd166" stroke-width="3" stroke-linecap="round">
        <line x1="48" y1="6" x2="48" y2="18"/>
        <line x1="48" y1="78" x2="48" y2="90"/>
        <line x1="6" y1="48" x2="18" y2="48"/>
        <line x1="78" y1="48" x2="90" y2="48"/>
        <line x1="17" y1="17" x2="26" y2="26"/>
        <line x1="70" y1="70" x2="79" y2="79"/>
        <line x1="17" y1="79" x2="26" y2="70"/>
        <line x1="70" y1="26" x2="79" y2="17"/>
      </g>
      <circle cx="48" cy="48" r="20" fill="url(#sg)"/>`;
    const cloud = (fill = "#e6ecff", stroke = "#c9d3f7") => `
      <g>
        <path d="M24 62 Q10 62 12 48 Q14 36 28 36 Q30 24 44 24 Q60 24 62 38 Q78 38 78 52 Q78 66 62 66 L26 66 Z"
              fill="${fill}" stroke="${stroke}" stroke-width="2"/>
      </g>`;
    const sunSmall = `
      <g>
        <circle cx="34" cy="34" r="14" fill="#ffd166"/>
        <g stroke="#ffd166" stroke-width="2.5" stroke-linecap="round">
          <line x1="34" y1="10" x2="34" y2="16"/>
          <line x1="34" y1="52" x2="34" y2="58"/>
          <line x1="10" y1="34" x2="16" y2="34"/>
          <line x1="52" y1="34" x2="58" y2="34"/>
          <line x1="17" y1="17" x2="21" y2="21"/>
          <line x1="47" y1="47" x2="51" y2="51"/>
          <line x1="17" y1="51" x2="21" y2="47"/>
          <line x1="47" y1="21" x2="51" y2="17"/>
        </g>
      </g>`;
    const rain = `
      <g fill="#7cc4ff">
        <path d="M30 74 l-4 8" stroke="#7cc4ff" stroke-width="3" stroke-linecap="round"/>
        <path d="M46 74 l-4 10" stroke="#7cc4ff" stroke-width="3" stroke-linecap="round"/>
        <path d="M62 74 l-4 8" stroke="#7cc4ff" stroke-width="3" stroke-linecap="round"/>
      </g>`;
    const snow = `
      <g stroke="#dbe7ff" stroke-width="2.5" stroke-linecap="round">
        <g transform="translate(30,80)"><line x1="-4" y1="0" x2="4" y2="0"/><line x1="0" y1="-4" x2="0" y2="4"/></g>
        <g transform="translate(48,84)"><line x1="-4" y1="0" x2="4" y2="0"/><line x1="0" y1="-4" x2="0" y2="4"/></g>
        <g transform="translate(66,80)"><line x1="-4" y1="0" x2="4" y2="0"/><line x1="0" y1="-4" x2="0" y2="4"/></g>
      </g>`;
    const bolt = `
      <path d="M46 60 L58 60 L48 82 L64 56 L52 56 L60 40 Z" fill="#ffd166" stroke="#ffb020" stroke-width="1.5" stroke-linejoin="round"/>`;
    const fog = `
      <g stroke="#c9d3f7" stroke-width="4" stroke-linecap="round" opacity="0.85">
        <line x1="14" y1="72" x2="82" y2="72"/>
        <line x1="20" y1="82" x2="76" y2="82"/>
      </g>`;

    let svg = `<svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">`;
    if (code === 0) svg += sun;
    else if (code === 1 || code === 2) svg += sunSmall + cloud();
    else if (code === 3) svg += cloud();
    else if (code === 45 || code === 48) svg += cloud("#dfe6fb", "#b8c3ee") + fog;
    else if ((code >= 51 && code <= 57) || (code >= 61 && code <= 67) || (code >= 80 && code <= 82)) svg += cloud() + rain;
    else if ((code >= 71 && code <= 77) || code === 85 || code === 86) svg += cloud() + snow;
    else if (code >= 95) svg += cloud("#c9d3f7", "#8fa1d8") + bolt;
    else svg += cloud();
    svg += `</svg>`;
    return svg;
  }

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

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

  function renderError(msg) {
    document.getElementById("stage").innerHTML = `
      <div class="card">
        <div class="error">
          <div class="title">Weather unavailable</div>
          <div class="msg">${esc(msg)}</div>
        </div>
      </div>`;
  }

  function buildChart(hours, temps) {
    const W = 720, H = 240, P = { t: 24, r: 24, b: 34, l: 40 };
    const iw = W - P.l - P.r;
    const ih = H - P.t - P.b;
    const n = temps.length;
    if (!n) return "";
    const min = Math.min(...temps);
    const max = Math.max(...temps);
    const pad = Math.max(1, (max - min) * 0.15);
    const y0 = min - pad, y1 = max + pad;
    const x = (i) => P.l + (iw * i) / Math.max(1, n - 1);
    const y = (v) => P.t + ih - ((v - y0) / (y1 - y0)) * ih;

    // grid
    const ticks = 4;
    let grid = "";
    for (let i = 0; i <= ticks; i++) {
      const v = y0 + ((y1 - y0) * i) / ticks;
      const yy = y(v);
      grid += `<line x1="${P.l}" x2="${W - P.r}" y1="${yy}" y2="${yy}" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>`;
      grid += `<text x="${P.l - 8}" y="${yy + 4}" text-anchor="end" fill="#9aa4c7" font-size="10" font-family="inherit">${v.toFixed(0)}°</text>`;
    }

    // x labels every 3h
    let xl = "";
    for (let i = 0; i < n; i += 3) {
      const label = hours[i].slice(11, 13) + ":00";
      xl += `<text x="${x(i)}" y="${H - 10}" text-anchor="middle" fill="#9aa4c7" font-size="10" font-family="inherit">${label}</text>`;
    }

    // area + line path
    let d = "";
    for (let i = 0; i < n; i++) d += (i ? " L " : "M ") + x(i).toFixed(1) + " " + y(temps[i]).toFixed(1);
    const area = `M ${x(0).toFixed(1)} ${(P.t + ih).toFixed(1)} L ` +
      temps.map((v, i) => x(i).toFixed(1) + " " + y(v).toFixed(1)).join(" L ") +
      ` L ${x(n - 1).toFixed(1)} ${(P.t + ih).toFixed(1)} Z`;

    // dots at min/max
    const iMax = temps.indexOf(max);
    const iMin = temps.indexOf(min);

    return `
      <svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="none">
        <defs>
          <linearGradient id="area" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stop-color="#ffb86b" stop-opacity="0.55"/>
            <stop offset="55%" stop-color="#ff8f6b" stop-opacity="0.18"/>
            <stop offset="100%" stop-color="#7cc4ff" stop-opacity="0.02"/>
          </linearGradient>
          <linearGradient id="line" x1="0" x2="1" y1="0" y2="0">
            <stop offset="0%" stop-color="#7cc4ff"/>
            <stop offset="50%" stop-color="#ffd166"/>
            <stop offset="100%" stop-color="#ff8f6b"/>
          </linearGradient>
        </defs>
        ${grid}
        <path d="${area}" fill="url(#area)"/>
        <path d="${d}" fill="none" stroke="url(#line)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
        <circle cx="${x(iMax)}" cy="${y(max)}" r="4" fill="#ff8f6b" stroke="#1a1f3a" stroke-width="2"/>
        <text x="${x(iMax)}" y="${y(max) - 10}" text-anchor="middle" fill="#ffd7c2" font-size="11" font-family="inherit">${max.toFixed(1)}°</text>
        <circle cx="${x(iMin)}" cy="${y(min)}" r="4" fill="#7cc4ff" stroke="#1a1f3a" stroke-width="2"/>
        <text x="${x(iMin)}" y="${y(min) + 16}" text-anchor="middle" fill="#c2ddff" font-size="11" font-family="inherit">${min.toFixed(1)}°</text>
        ${xl}
      </svg>`;
  }

  function render(data) {
    const daily = data.daily || {};
    const hourly = data.hourly || {};
    const idx = 0;
    const tmax = daily.temperature_2m_max?.[idx];
    const tmin = daily.temperature_2m_min?.[idx];
    const code = daily.weather_code?.[idx];
    const times = hourly.time || [];
    const temps = hourly.temperature_2m || [];

    if (tmax == null || tmin == null || code == null || times.length === 0) {
      renderError("The API returned no data for this date.");
      return;
    }

    const condition = WMO[code] ?? "Unknown conditions";
    const dayTemp = ((tmax + tmin) / 2);

    // Hour strip: pick every 2nd hour (12 items)
    const strip = [];
    for (let i = 0; i < times.length && strip.length < 12; i += 2) {
      strip.push({ h: times[i].slice(11, 16), t: temps[i] });
    }

    const html = `
      <header class="top">
        <div class="brand"><span class="dot"></span><span>Weather Report</span></div>
        <div class="meta">
          <div>${esc(fmtDate(date))}</div>
          <div class="coords">${lat.toFixed(3)}°, ${lon.toFixed(3)}° · UTC</div>
        </div>
      </header>

      <div class="card">
        <section class="left">
          <div>
            <div class="place">Location</div>
            <h1 class="name">${esc(name)}</h1>
            <div class="date">${esc(fmtDate(date))}</div>
          </div>

          <div class="hero">
            <div class="icon-wrap">${iconFor(code)}</div>
            <div class="temps">
              <div class="big-temp">${dayTemp.toFixed(1)}<span class="deg">°C</span></div>
              <div class="condition">${esc(condition)}</div>
            </div>
          </div>

          <div class="stats">
            <div class="stat max">
              <div class="k"><span class="pill"></span>High</div>
              <div class="v">${tmax.toFixed(1)}<span class="deg">°C</span></div>
            </div>
            <div class="stat min">
              <div class="k"><span class="pill"></span>Low</div>
              <div class="v">${tmin.toFixed(1)}<span class="deg">°C</span></div>
            </div>
          </div>
        </section>

        <section class="right">
          <div class="right-head">
            <div class="right-title">Hourly Temperature</div>
            <div class="range">00:00 – 23:00 UTC</div>
          </div>
          <div class="chart-wrap">${buildChart(times, temps)}</div>
          <div class="hours">
            ${strip.map((s) => `
              <div class="hour">
                <div class="h">${esc(s.h)}</div>
                <div class="t">${s.t.toFixed(1)}°</div>
              </div>`).join("")}
          </div>
        </section>
      </div>

      <div class="footer">
        <div>Data · Open-Meteo compatible</div>
        <div>Rendered for 1280 × 800</div>
      </div>
    `;
    document.getElementById("stage").innerHTML = html;
  }

  fetch(endpoint + "?" + params.toString(), { headers: { accept: "application/json" } })
    .then((r) => {
      if (!r.ok) throw new Error("HTTP " + r.status);
      return r.json();
    })
    .then((data) => {
      if (data && data.error) throw new Error(data.reason || "API error");
      render(data);
    })
    .catch((err) => {
      renderError("Could not load weather data. " + (err && err.message ? err.message : ""));
    });
})();
</script>
</body>
</html>