claude-sonnet-5 @ medium · cursor-xl

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather Card</title>
<style>
  :root{
    --bg1:#4facfe;
    --bg2:#00c2fe;
    --card-bg: rgba(255,255,255,0.14);
    --card-border: rgba(255,255,255,0.35);
    --text: #ffffff;
    --text-dim: rgba(255,255,255,0.72);
    --accent: #ffd166;
  }
  *{ box-sizing: border-box; }
  html,body{
    margin:0;
    padding:0;
    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), var(--bg2));
    transition: background 0.8s ease;
    position:relative;
  }
  body::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 15% 20%, rgba(255,255,255,0.18), transparent 40%),
      radial-gradient(circle at 85% 75%, rgba(255,255,255,0.12), transparent 45%);
    pointer-events:none;
  }

  .card{
    position:relative;
    width:920px;
    height:640px;
    border-radius:32px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
      0 30px 60px -15px rgba(0,0,0,0.35),
      inset 0 1px 0 rgba(255,255,255,0.4);
    padding:44px 56px;
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .top-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
  }
  .location{
    font-size:34px;
    font-weight:700;
    letter-spacing:0.3px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.15);
  }
  .location .pin{
    font-size:22px;
    margin-right:6px;
    opacity:0.85;
  }
  .date-label{
    margin-top:6px;
    font-size:16px;
    font-weight:500;
    color: var(--text-dim);
    letter-spacing:0.4px;
  }
  .badge{
    font-size:13px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1.2px;
    background: rgba(255,255,255,0.22);
    border:1px solid rgba(255,255,255,0.35);
    padding:8px 16px;
    border-radius:999px;
    color: var(--text);
    white-space:nowrap;
  }

  .main-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:6px 0 10px;
    border-bottom: 1px solid rgba(255,255,255,0.22);
  }
  .icon-block{
    display:flex;
    align-items:center;
    gap:22px;
  }
  .icon-emoji{
    font-size:96px;
    line-height:1;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.25));
  }
  .condition-text{
    font-size:24px;
    font-weight:600;
  }
  .condition-sub{
    font-size:14px;
    color: var(--text-dim);
    margin-top:4px;
  }

  .temp-block{
    text-align:right;
  }
  .temp-current{
    font-size:88px;
    font-weight:200;
    line-height:1;
    letter-spacing:-2px;
  }
  .temp-current sup{
    font-size:40px;
    font-weight:300;
    opacity:0.85;
  }
  .minmax{
    display:flex;
    gap:18px;
    justify-content:flex-end;
    margin-top:8px;
    font-size:17px;
  }
  .minmax .max{ color: #ffd6a0; font-weight:700; }
  .minmax .min{ color: #bfe3ff; font-weight:700; }
  .minmax span.lbl{
    font-weight:400;
    color: var(--text-dim);
    margin-right:4px;
  }

  .hourly-section{
    flex:1;
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  .hourly-title{
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1.4px;
    color: var(--text-dim);
    margin-bottom:10px;
  }
  .chart-wrap{
    flex:1;
    position:relative;
  }
  svg.chart{
    width:100%;
    height:100%;
    overflow:visible;
  }
  .hour-tick{
    font-size:12px;
    fill: rgba(255,255,255,0.65);
    font-weight:500;
  }
  .temp-label{
    font-size:12px;
    fill: rgba(255,255,255,0.92);
    font-weight:700;
    text-anchor:middle;
  }

  .status{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:14px;
    text-align:center;
    padding:40px;
  }
  .status .spinner{
    width:44px;
    height:44px;
    border-radius:50%;
    border: 4px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    animation: spin 0.9s linear infinite;
  }
  @keyframes spin{ to { transform: rotate(360deg); } }
  .status .msg{
    font-size:17px;
    color: var(--text-dim);
    max-width:520px;
  }
  .status .err-icon{
    font-size:48px;
  }
  .status .err-title{
    font-size:20px;
    font-weight:700;
  }
  .hidden{ display:none !important; }
</style>
</head>
<body>

<div class="card" id="card">

  <div id="statusOverlay" class="status">
    <div class="spinner"></div>
    <div class="msg">Loading weather data…</div>
  </div>

  <div id="content" class="hidden" style="display:flex; flex-direction:column; height:100%; gap:18px;">
    <div class="top-row">
      <div>
        <div class="location"><span class="pin">📍</span><span id="locationName">—</span></div>
        <div class="date-label" id="dateLabel">—</div>
      </div>
      <div class="badge" id="sourceBadge">FORECAST</div>
    </div>

    <div class="main-row">
      <div class="icon-block">
        <div class="icon-emoji" id="weatherIcon">🌤️</div>
        <div>
          <div class="condition-text" id="conditionText">—</div>
          <div class="condition-sub" id="conditionSub">Daily overview</div>
        </div>
      </div>
      <div class="temp-block">
        <div class="temp-current" id="tempAvg">—<sup>°C</sup></div>
        <div class="minmax">
          <div class="max"><span class="lbl">High</span><span id="tempMax">—°</span></div>
          <div class="min"><span class="lbl">Low</span><span id="tempMin">—°</span></div>
        </div>
      </div>
    </div>

    <div class="hourly-section">
      <div class="hourly-title">Hourly Temperature</div>
      <div class="chart-wrap">
        <svg class="chart" id="chartSvg" viewBox="0 0 808 220" preserveAspectRatio="none"></svg>
      </div>
    </div>
  </div>

</div>

<script>
(function () {
  "use strict";

  function qp(name, fallback) {
    var v = new URLSearchParams(window.location.search).get(name);
    return (v === null || v === "") ? fallback : v;
  }

  function todayUTC() {
    var d = new Date();
    return d.getUTCFullYear() + "-" +
      String(d.getUTCMonth() + 1).padStart(2, "0") + "-" +
      String(d.getUTCDate()).padStart(2, "0");
  }

  var lat = parseFloat(qp("lat", "52.52"));
  var lon = parseFloat(qp("lon", "13.405"));
  var name = qp("name", "Berlin");
  var dateStr = qp("date", todayUTC());

  if (isNaN(lat)) lat = 52.52;
  if (isNaN(lon)) lon = 13.405;

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

  var GRADIENTS = {
    clear:   ["#2b90ef", "#7bc8ff"],
    cloud:   ["#6c8199", "#9db3c7"],
    fog:     ["#8b9aa8", "#b9c4cc"],
    rain:    ["#3a5a78", "#5f84a3"],
    snow:    ["#7fa6c9", "#c7dcef"],
    storm:   ["#2c3e50", "#4a5f78"]
  };

  function gradientFor(code) {
    if (code === 0 || code === 1) return GRADIENTS.clear;
    if (code === 2 || code === 3) return GRADIENTS.cloud;
    if (code === 45 || code === 48) return GRADIENTS.fog;
    if (code >= 95) return GRADIENTS.storm;
    if ((code >= 71 && code <= 77) || code === 85 || code === 86) return GRADIENTS.snow;
    if ((code >= 51 && code <= 67) || (code >= 80 && code <= 82)) return GRADIENTS.rain;
    return GRADIENTS.clear;
  }

  function weatherInfo(code) {
    return WEATHER_CODES[code] || { text: "Unknown", icon: "🌡️" };
  }

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

  function showError(message) {
    var overlay = document.getElementById("statusOverlay");
    overlay.innerHTML =
      '<div class="err-icon">⚠️</div>' +
      '<div class="err-title">Unable to load weather data</div>' +
      '<div class="msg">' + message + '</div>';
    overlay.classList.remove("hidden");
    document.getElementById("content").classList.add("hidden");
  }

  function buildChart(hours, temps) {
    var svg = document.getElementById("chartSvg");
    var W = 808, H = 220;
    var padL = 30, padR = 20, padT = 30, padB = 30;
    var innerW = W - padL - padR;
    var innerH = H - padT - padB;

    var maxT = Math.max.apply(null, temps);
    var minT = Math.min.apply(null, temps);
    if (maxT === minT) { maxT += 1; minT -= 1; }
    var range = maxT - minT;

    function x(i) { return padL + (i / (temps.length - 1)) * innerW; }
    function y(t) { return padT + innerH - ((t - minT) / range) * innerH; }

    var ns = "http://www.w3.org/2000/svg";
    var svgns = ns;

    var pathD = "";
    var areaD = "";
    var points = [];
    for (var i = 0; i < temps.length; i++) {
      var px = x(i), py = y(temps[i]);
      points.push([px, py]);
      pathD += (i === 0 ? "M" : "L") + px.toFixed(1) + "," + py.toFixed(1) + " ";
    }
    areaD = "M" + points[0][0].toFixed(1) + "," + (padT + innerH).toFixed(1) + " ";
    points.forEach(function (p) { areaD += "L" + p[0].toFixed(1) + "," + p[1].toFixed(1) + " "; });
    areaD += "L" + points[points.length - 1][0].toFixed(1) + "," + (padT + innerH).toFixed(1) + " Z";

    var svgHtml = "";
    svgHtml += '<defs>' +
      '<linearGradient id="areaFill" x1="0" y1="0" x2="0" y2="1">' +
      '<stop offset="0%" stop-color="rgba(255,255,255,0.55)"/>' +
      '<stop offset="100%" stop-color="rgba(255,255,255,0.02)"/>' +
      '</linearGradient>' +
      '</defs>';

    // gridlines
    for (var g = 0; g <= 3; g++) {
      var gy = padT + (innerH / 3) * g;
      svgHtml += '<line x1="' + padL + '" y1="' + gy.toFixed(1) + '" x2="' + (W - padR) + '" y2="' + gy.toFixed(1) + '" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>';
    }

    svgHtml += '<path d="' + areaD + '" fill="url(#areaFill)" stroke="none"/>';
    svgHtml += '<path d="' + pathD.trim() + '" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>';

    // dots + labels every 3 hours, plus ticks
    for (var j = 0; j < temps.length; j++) {
      if (j % 3 === 0) {
        var px2 = x(j), py2 = y(temps[j]);
        svgHtml += '<circle cx="' + px2.toFixed(1) + '" cy="' + py2.toFixed(1) + '" r="4" fill="#ffffff"/>';
        svgHtml += '<text class="temp-label" x="' + px2.toFixed(1) + '" y="' + (py2 - 12).toFixed(1) + '">' + Math.round(temps[j]) + '°</text>';
        var hourLabel = hours[j].split("T")[1].slice(0, 2) + ":00";
        svgHtml += '<text class="hour-tick" x="' + px2.toFixed(1) + '" y="' + (H - 6) + '" text-anchor="middle">' + hourLabel + '</text>';
      }
    }

    svg.innerHTML = svgHtml;
  }

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

    if (!daily || !hourly || !daily.time || daily.time.length === 0) {
      showError("The weather service returned no data for this location and date.");
      return;
    }

    var idx = daily.time.indexOf(dateStr);
    if (idx === -1) idx = 0;

    var tMax = daily.temperature_2m_max[idx];
    var tMin = daily.temperature_2m_min[idx];
    var code = daily.weather_code[idx];
    var info = weatherInfo(code);
    var grad = gradientFor(code);

    document.documentElement.style.setProperty("--bg1", grad[0]);
    document.documentElement.style.setProperty("--bg2", grad[1]);

    document.getElementById("locationName").textContent = name;
    document.getElementById("dateLabel").textContent = fmtDateLabel(dateStr);
    document.getElementById("sourceBadge").textContent = isArchive ? "ARCHIVE" : "FORECAST";
    document.getElementById("weatherIcon").textContent = info.icon;
    document.getElementById("conditionText").textContent = info.text;
    document.getElementById("conditionSub").textContent = "Daily overview for " + name;

    var avg = (tMax + tMin) / 2;
    document.getElementById("tempAvg").innerHTML = Math.round(avg) + "<sup>°C</sup>";
    document.getElementById("tempMax").textContent = Math.round(tMax) + "°C";
    document.getElementById("tempMin").textContent = Math.round(tMin) + "°C";

    var hours = [];
    var temps = [];
    for (var i = 0; i < hourly.time.length; i++) {
      if (hourly.time[i].slice(0, 10) === dateStr) {
        hours.push(hourly.time[i]);
        temps.push(hourly.temperature_2m[i]);
      }
    }
    if (hours.length === 0) {
      hours = hourly.time;
      temps = hourly.temperature_2m;
    }

    buildChart(hours, temps);

    document.getElementById("statusOverlay").classList.add("hidden");
    document.getElementById("content").classList.remove("hidden");
  }

  function fetchWeather() {
    var isArchive = dateStr < todayUTC();
    var base = isArchive ? "/api/om/archive" : "/api/om/forecast";
    var 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: dateStr,
      end_date: dateStr
    });
    var url = base + "?" + params.toString();

    fetch(url)
      .then(function (res) {
        if (!res.ok) {
          throw new Error("Server responded with status " + res.status);
        }
        return res.json();
      })
      .then(function (data) {
        if (data && data.error) {
          throw new Error(data.reason || "The weather service returned an error.");
        }
        render(data, isArchive);
      })
      .catch(function (err) {
        showError(err && err.message ? err.message : "An unknown error occurred while fetching weather data.");
      });
  }

  fetchWeather();
})();
</script>
</body>
</html>