claude-opus-4-8-thinking @ low · cursor

<!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: #2c5282;
    --accent: #ffd166;
    --card-bg: rgba(255, 255, 255, 0.12);
    --card-border: rgba(255, 255, 255, 0.22);
    --text: #f7fafc;
    --text-dim: rgba(247, 250, 252, 0.72);
  }
  html, body {
    width: 1280px;
    height: 800px;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
  }
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 55%, #4a6fa5 100%);
    transition: background 0.6s ease;
  }
  .card {
    width: 1040px;
    height: 660px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 28px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.15);
    padding: 44px 52px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: relative;
    overflow: hidden;
  }
  .card::before {
    content: "";
    position: absolute;
    top: -120px; right: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(255,209,102,0.28), transparent 70%);
    pointer-events: none;
  }

  header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .loc-name {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.5px;
  }
  .loc-sub {
    font-size: 16px;
    color: var(--text-dim);
    margin-top: 6px;
  }
  .date-badge {
    text-align: right;
    font-size: 17px;
    color: var(--text-dim);
    line-height: 1.5;
  }
  .date-badge .day { font-size: 22px; color: var(--text); font-weight: 600; }

  .main-row {
    display: flex;
    align-items: center;
    gap: 40px;
  }
  .icon-big { font-size: 118px; line-height: 1; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.25)); }
  .temps { flex: 1; }
  .cond { font-size: 30px; font-weight: 600; margin-bottom: 10px; }
  .minmax { display: flex; gap: 34px; }
  .mm-item { display: flex; flex-direction: column; }
  .mm-label { font-size: 14px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
  .mm-val { font-size: 46px; font-weight: 700; }
  .mm-max .mm-val { color: #ff9e6d; }
  .mm-min .mm-val { color: #7fd0ff; }

  .hourly-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .hourly-title { font-size: 15px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 14px; }
  .chart {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    min-height: 0;
  }
  .bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 6px;
  }
  .bar .val { font-size: 11px; color: var(--text); font-weight: 600; opacity: 0.9; }
  .bar .col {
    width: 60%;
    background: linear-gradient(180deg, var(--accent), #ff9e6d);
    border-radius: 5px 5px 0 0;
    min-height: 3px;
    transition: height 0.4s ease;
  }
  .bar .hr { font-size: 10px; color: var(--text-dim); margin-top: 4px; }

  .error {
    text-align: center;
    font-size: 22px;
    line-height: 1.6;
    color: #ffd0d0;
    margin: auto;
  }
  .error .em { font-size: 54px; display: block; margin-bottom: 16px; }
  .hidden { display: none !important; }
  .loading { margin: auto; font-size: 20px; color: var(--text-dim); }
</style>
</head>
<body>
  <div class="card" id="card">
    <div class="loading" id="loading">Loading weather…</div>

    <div id="content" class="hidden" style="display:flex;flex-direction:column;gap:28px;height:100%;">
      <header>
        <div>
          <div class="loc-name" id="locName">—</div>
          <div class="loc-sub" id="locSub"></div>
        </div>
        <div class="date-badge">
          <div class="day" id="dateDay"></div>
          <div id="dateFull"></div>
        </div>
      </header>

      <div class="main-row">
        <div class="icon-big" id="iconBig">☀️</div>
        <div class="temps">
          <div class="cond" id="cond">—</div>
          <div class="minmax">
            <div class="mm-item mm-max">
              <span class="mm-label">High</span>
              <span class="mm-val" id="tMax">—</span>
            </div>
            <div class="mm-item mm-min">
              <span class="mm-label">Low</span>
              <span class="mm-val" id="tMin">—</span>
            </div>
          </div>
        </div>
      </div>

      <div class="hourly-wrap">
        <div class="hourly-title">Hourly Temperature (°C)</div>
        <div class="chart" id="chart"></div>
      </div>
    </div>

    <div id="error" class="error hidden">
      <span class="em">⚠️</span>
      <span id="errorMsg">Weather data could not be loaded.</span>
    </div>
  </div>

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

  lat = (lat === null || lat === "") ? 52.52 : parseFloat(lat);
  lon = (lon === null || lon === "") ? 13.405 : parseFloat(lon);
  if (isNaN(lat)) lat = 52.52;
  if (isNaN(lon)) lon = 13.405;

  function todayUTC() {
    var d = new Date();
    return d.getUTCFullYear() + "-" +
      String(d.getUTCMonth() + 1).padStart(2, "0") + "-" +
      String(d.getUTCDate()).padStart(2, "0");
  }
  if (!date || !/^\d{4}-\d{2}-\d{2}$/.test(date)) date = todayUTC();

  var WX = {
    0:  ["Clear sky", "☀️", ["#2b5876", "#4e7bb0"]],
    1:  ["Mainly clear", "🌤️", ["#2b5876", "#4e7bb0"]],
    2:  ["Partly cloudy", "⛅", ["#3a5a78", "#5c7a99"]],
    3:  ["Overcast", "☁️", ["#4a5568", "#6b7280"]],
    45: ["Fog", "🌫️", ["#556270", "#7a8794"]],
    48: ["Rime fog", "🌫️", ["#556270", "#7a8794"]],
    51: ["Light drizzle", "🌦️", ["#3d5a6c", "#5a7d8c"]],
    53: ["Drizzle", "🌦️", ["#3d5a6c", "#5a7d8c"]],
    55: ["Dense drizzle", "🌧️", ["#37474f", "#546e7a"]],
    56: ["Freezing drizzle", "🌧️", ["#37474f", "#546e7a"]],
    57: ["Freezing drizzle", "🌧️", ["#37474f", "#546e7a"]],
    61: ["Light rain", "🌦️", ["#37474f", "#546e7a"]],
    63: ["Rain", "🌧️", ["#2f3e46", "#4a5d68"]],
    65: ["Heavy rain", "🌧️", ["#2f3e46", "#4a5d68"]],
    66: ["Freezing rain", "🌧️", ["#2f3e46", "#4a5d68"]],
    67: ["Freezing rain", "🌧️", ["#2f3e46", "#4a5d68"]],
    71: ["Light snow", "🌨️", ["#5c7080", "#8095a5"]],
    73: ["Snow", "❄️", ["#5c7080", "#8095a5"]],
    75: ["Heavy snow", "❄️", ["#5c7080", "#8095a5"]],
    77: ["Snow grains", "🌨️", ["#5c7080", "#8095a5"]],
    80: ["Rain showers", "🌦️", ["#37474f", "#546e7a"]],
    81: ["Rain showers", "🌧️", ["#2f3e46", "#4a5d68"]],
    82: ["Violent showers", "⛈️", ["#232f34", "#3d4f57"]],
    85: ["Snow showers", "🌨️", ["#5c7080", "#8095a5"]],
    86: ["Snow showers", "🌨️", ["#5c7080", "#8095a5"]],
    95: ["Thunderstorm", "⛈️", ["#232f34", "#3d4f57"]],
    96: ["Thunderstorm, hail", "⛈️", ["#232f34", "#3d4f57"]],
    99: ["Thunderstorm, hail", "⛈️", ["#232f34", "#3d4f57"]]
  };

  function fmtTemp(v) {
    return (v === null || v === undefined || isNaN(v)) ? "—" : Math.round(v) + "°";
  }

  function showError(msg) {
    document.getElementById("loading").classList.add("hidden");
    document.getElementById("content").classList.add("hidden");
    var e = document.getElementById("error");
    e.classList.remove("hidden");
    if (msg) document.getElementById("errorMsg").textContent = msg;
  }

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

  var endpoint = isPast(date) ? "/api/om/archive" : "/api/om/forecast";
  var qs = 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
  });

  fetch(endpoint + "?" + qs.toString())
    .then(function (r) {
      if (!r.ok) throw new Error("HTTP " + r.status);
      return r.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 && err.message ? err.message : "unknown error") + ")");
    });

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

    var tMax = daily.temperature_2m_max ? daily.temperature_2m_max[0] : null;
    var tMin = daily.temperature_2m_min ? daily.temperature_2m_min[0] : null;
    var code = daily.weather_code ? daily.weather_code[0] : 0;

    var info = WX[code] || ["Unknown", "❓", ["#2b5876", "#4e7bb0"]];

    document.getElementById("locName").textContent = name;
    document.getElementById("locSub").textContent =
      lat.toFixed(3) + "°, " + lon.toFixed(3) + "°";

    var dObj = new Date(date + "T00:00:00Z");
    var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
    var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
    document.getElementById("dateDay").textContent = days[dObj.getUTCDay()];
    document.getElementById("dateFull").textContent =
      months[dObj.getUTCMonth()] + " " + dObj.getUTCDate() + ", " + dObj.getUTCFullYear();

    document.getElementById("iconBig").textContent = info[1];
    document.getElementById("cond").textContent = info[0];
    document.getElementById("tMax").textContent = fmtTemp(tMax);
    document.getElementById("tMin").textContent = fmtTemp(tMin);

    document.body.style.background =
      "linear-gradient(135deg, " + info[2][0] + " 0%, " + info[2][1] + " 60%, #4a6fa5 100%)";

    var times = hourly.time || [];
    var temps = hourly.temperature_2m || [];
    var chart = document.getElementById("chart");
    chart.innerHTML = "";

    var valid = temps.filter(function (t) { return t !== null && !isNaN(t); });
    var hi = valid.length ? Math.max.apply(null, valid) : 1;
    var lo = valid.length ? Math.min.apply(null, valid) : 0;
    var range = (hi - lo) || 1;

    if (!times.length) {
      chart.innerHTML = '<div style="color:var(--text-dim);margin:auto;">No hourly data available.</div>';
    }

    for (var i = 0; i < times.length; i++) {
      var t = temps[i];
      var hr = times[i].slice(11, 13);
      var bar = document.createElement("div");
      bar.className = "bar";

      var val = document.createElement("span");
      val.className = "val";
      val.textContent = fmtTemp(t);

      var col = document.createElement("div");
      col.className = "col";
      var pct = (t === null || isNaN(t)) ? 0 : ((t - lo) / range) * 82 + 8;
      col.style.height = pct + "%";

      var lbl = document.createElement("span");
      lbl.className = "hr";
      lbl.textContent = hr;

      bar.appendChild(val);
      bar.appendChild(col);
      bar.appendChild(lbl);
      chart.appendChild(bar);
    }

    document.getElementById("loading").classList.add("hidden");
    document.getElementById("content").classList.remove("hidden");
  }
})();
</script>
</body>
</html>