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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, initial-scale=1.0">
<title>Weather Card</title>
<style>
  :root {
    --bg-1: #0f172a;
    --bg-2: #1e293b;
    --card-bg: rgba(255, 255, 255, 0.08);
    --card-border: rgba(255, 255, 255, 0.14);
    --text-strong: #f8fafc;
    --text-muted: #94a3b8;
    --accent: #38bdf8;
  }

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

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

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: radial-gradient(1200px 800px at 20% -10%, #1e3a8a 0%, transparent 55%),
                radial-gradient(1000px 700px at 100% 100%, #0e7490 0%, transparent 50%),
                linear-gradient(135deg, var(--bg-1), var(--bg-2));
    color: var(--text-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
  }

  .card {
    width: 960px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 28px;
    padding: 48px 56px;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.12);
  }

  .top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
  }

  .location {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.5px;
  }

  .date {
    font-size: 17px;
    color: var(--text-muted);
    margin-top: 6px;
    letter-spacing: 0.3px;
  }

  .condition-badge {
    text-align: right;
  }

  .icon {
    font-size: 68px;
    line-height: 1;
  }

  .condition-text {
    font-size: 16px;
    color: var(--text-muted);
    margin-top: 8px;
  }

  .temps {
    display: flex;
    align-items: baseline;
    gap: 36px;
    margin-bottom: 48px;
  }

  .temp-max {
    font-size: 96px;
    font-weight: 700;
    letter-spacing: -3px;
    line-height: 1;
  }

  .temp-max .unit { font-size: 44px; color: var(--text-muted); font-weight: 500; }

  .temp-min {
    font-size: 26px;
    color: var(--text-muted);
    font-weight: 500;
  }

  .temp-min .label {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
    color: #64748b;
  }

  .hourly-section h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 20px;
    font-weight: 600;
  }

  .chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 200px;
    padding-top: 24px;
  }

  .hour {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    gap: 8px;
  }

  .hour .val {
    font-size: 11px;
    color: var(--text-strong);
    font-weight: 600;
    white-space: nowrap;
  }

  .bar {
    width: 100%;
    max-width: 20px;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, var(--accent), #0ea5e9);
    min-height: 4px;
    transition: none;
  }

  .hour .hr {
    font-size: 10px;
    color: #64748b;
    margin-top: 2px;
  }

  .message {
    text-align: center;
    font-size: 20px;
    color: var(--text-muted);
    padding: 60px 0;
  }

  .message.error { color: #fca5a5; }
</style>
</head>
<body>
  <div class="card" id="card">
    <div class="message" id="loading">Loading weather…</div>
  </div>

<script>
(function () {
  const params = new URLSearchParams(window.location.search);
  const lat = params.get("lat") || "52.52";
  const lon = params.get("lon") || "13.405";
  const name = params.get("name") || "Berlin";

  function todayUTC() {
    const d = new Date();
    const y = d.getUTCFullYear();
    const m = String(d.getUTCMonth() + 1).padStart(2, "0");
    const day = String(d.getUTCDate()).padStart(2, "0");
    return `${y}-${m}-${day}`;
  }

  const dateStr = params.get("date") || todayUTC();

  const WEATHER = {
    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", "🌨️"],
    73: ["Moderate snow", "🌨️"],
    75: ["Heavy snow", "❄️"],
    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 describe(code) {
    return WEATHER[code] || ["Unknown", "❓"];
  }

  function isPast(dStr) {
    return dStr < todayUTC();
  }

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

  function showError(msg) {
    document.getElementById("card").innerHTML =
      '<div class="message error">' + msg + '</div>';
  }

  const base = isPast(dateStr) ? "/api/om/archive" : "/api/om/forecast";
  const q = 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: dateStr,
    end_date: dateStr
  });

  fetch(base + "?" + q.toString())
    .then(function (res) {
      if (!res.ok) throw new Error("Request failed (" + res.status + ")");
      return res.json();
    })
    .then(function (data) {
      if (!data || !data.daily || !data.hourly) {
        throw new Error("Malformed response");
      }
      render(data);
    })
    .catch(function (err) {
      showError("Weather data could not be loaded. " + (err.message || ""));
    });

  function render(data) {
    const daily = data.daily;
    const hourly = data.hourly;

    const tmax = daily.temperature_2m_max && daily.temperature_2m_max[0];
    const tmin = daily.temperature_2m_min && daily.temperature_2m_min[0];
    const code = daily.weather_code && daily.weather_code[0];

    if (tmax == null || tmin == null) {
      showError("Weather data could not be loaded.");
      return;
    }

    const [condText, condIcon] = describe(code);

    const times = hourly.time || [];
    const temps = hourly.temperature_2m || [];
    const hours = [];
    for (let i = 0; i < times.length; i++) {
      if (temps[i] == null) continue;
      const hr = times[i].slice(11, 16);
      hours.push({ hr: hr, t: temps[i] });
    }

    let chartHTML = "";
    if (hours.length) {
      let lo = Infinity, hi = -Infinity;
      hours.forEach(function (h) { if (h.t < lo) lo = h.t; if (h.t > hi) hi = h.t; });
      const span = hi - lo || 1;
      chartHTML = hours.map(function (h) {
        const pct = 18 + ((h.t - lo) / span) * 82;
        return '<div class="hour">' +
                 '<div class="val">' + Math.round(h.t) + '°</div>' +
                 '<div class="bar" style="height:' + pct + '%"></div>' +
                 '<div class="hr">' + h.hr + '</div>' +
               '</div>';
      }).join("");
    } else {
      chartHTML = '<div class="message">No hourly data available.</div>';
    }

    document.getElementById("card").innerHTML =
      '<div class="top">' +
        '<div>' +
          '<div class="location">' + escapeHTML(name) + '</div>' +
          '<div class="date">' + fmtDate(dateStr) + '</div>' +
        '</div>' +
        '<div class="condition-badge">' +
          '<div class="icon">' + condIcon + '</div>' +
          '<div class="condition-text">' + condText + '</div>' +
        '</div>' +
      '</div>' +
      '<div class="temps">' +
        '<div class="temp-max">' + Math.round(tmax) + '<span class="unit">°C</span></div>' +
        '<div class="temp-min">' +
          '<span class="label">Low</span>' + Math.round(tmin) + '°C' +
        '</div>' +
      '</div>' +
      '<div class="hourly-section">' +
        '<h2>Hourly Temperature</h2>' +
        '<div class="chart">' + chartHTML + '</div>' +
      '</div>';
  }

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