claude-sonnet-5-thinking @ medium · cursor

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1280, height=800" />
<title>Weather Card</title>
<style>
  :root {
    --bg-top: #4a6fb5;
    --bg-bottom: #2c4270;
    --card-bg: rgba(255, 255, 255, 0.10);
    --card-border: rgba(255, 255, 255, 0.18);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.72);
    --text-tertiary: rgba(255, 255, 255, 0.5);
    --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;
    background: linear-gradient(160deg, var(--bg-top) 0%, #3a5a94 45%, var(--bg-bottom) 100%);
    color: var(--text-primary);
  }

  .backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
  }

  .glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;
  }
  .glow.one {
    width: 520px;
    height: 520px;
    top: -180px;
    right: -120px;
    background: radial-gradient(circle, #ffe08a, transparent 70%);
    opacity: 0.28;
  }
  .glow.two {
    width: 600px;
    height: 600px;
    bottom: -260px;
    left: -180px;
    background: radial-gradient(circle, #7ea9e8, transparent 70%);
    opacity: 0.3;
  }

  .stage {
    position: relative;
    z-index: 1;
    width: 1280px;
    height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card {
    width: 920px;
    height: 620px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 32px;
    backdrop-filter: blur(20px);
    box-shadow:
      0 30px 80px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
    padding: 44px 56px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .location-block .location-name {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
  }

  .location-block .location-date {
    margin-top: 6px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: capitalize;
  }

  .coords {
    text-align: right;
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
  }

  .main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 6px;
    flex: 0 0 auto;
  }

  .temp-display {
    display: flex;
    align-items: flex-start;
    gap: 6px;
  }

  .temp-display .big-temp {
    font-size: 128px;
    font-weight: 200;
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .temp-display .deg-unit {
    font-size: 40px;
    font-weight: 300;
    margin-top: 14px;
    color: var(--text-secondary);
  }

  .condition-block {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .weather-icon {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
  }

  .condition-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .condition-label {
    font-size: 22px;
    font-weight: 600;
  }

  .minmax {
    display: flex;
    gap: 18px;
    font-size: 16px;
    color: var(--text-secondary);
  }

  .minmax span.hi { color: var(--accent); font-weight: 600; }
  .minmax span.lo { color: #9ec3f5; font-weight: 600; }

  .divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    flex-shrink: 0;
  }

  .hourly-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
  }

  .hourly-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }

  .hourly-scroll {
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 0;
    scrollbar-width: thin;
  }

  .hourly-track {
    display: flex;
    gap: 6px;
    height: 100%;
    align-items: stretch;
  }

  .hour-item {
    flex: 0 0 auto;
    width: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 12px 4px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.15s ease;
  }

  .hour-item.current {
    background: rgba(255, 209, 102, 0.18);
    border: 1px solid rgba(255, 209, 102, 0.4);
  }

  .hour-item .hour-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
  }

  .hour-item .hour-icon {
    width: 26px;
    height: 26px;
    margin: 6px 0;
  }

  .hour-item .hour-temp {
    font-size: 15px;
    font-weight: 600;
  }

  .status-message {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    text-align: center;
  }

  .status-message .status-icon {
    font-size: 44px;
  }

  .status-message .status-title {
    font-size: 22px;
    font-weight: 700;
  }

  .status-message .status-detail {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 480px;
  }

  .skeleton {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
    justify-content: center;
  }

  .skeleton .bar {
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
    animation: pulse 1.4s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
  }

  .hourly-scroll::-webkit-scrollbar { height: 6px; }
  .hourly-scroll::-webkit-scrollbar-track { background: transparent; }
  .hourly-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.25);
    border-radius: 4px;
  }

  .hidden { display: none !important; }
</style>
</head>
<body>

<div class="backdrop">
  <div class="glow one"></div>
  <div class="glow two"></div>
</div>

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

    <div id="loadingView" class="skeleton">
      <div class="bar" style="width: 60%; height: 34px;"></div>
      <div class="bar" style="width: 40%; height: 18px;"></div>
      <div class="bar" style="width: 100%; height: 140px; border-radius: 20px;"></div>
      <div class="bar" style="width: 100%; height: 100px; border-radius: 16px;"></div>
    </div>

    <div id="errorView" class="status-message hidden">
      <div class="status-icon">&#9888;&#65039;</div>
      <div class="status-title">Unable to load weather data</div>
      <div class="status-detail" id="errorDetail">Something went wrong while fetching the forecast. Please try again later.</div>
    </div>

    <div id="contentView" class="hidden" style="display: flex; flex-direction: column; gap: 22px; height: 100%;">
      <div class="header">
        <div class="location-block">
          <div class="location-name" id="locationName">Berlin</div>
          <div class="location-date" id="locationDate">Thursday, January 1</div>
        </div>
        <div class="coords" id="coordsBlock"></div>
      </div>

      <div class="main-row">
        <div class="temp-display">
          <div class="big-temp" id="bigTemp">--</div>
          <div class="deg-unit">&deg;C</div>
        </div>
        <div class="condition-block">
          <svg class="weather-icon" id="mainIcon" viewBox="0 0 64 64"></svg>
          <div class="condition-text">
            <div class="condition-label" id="conditionLabel">--</div>
            <div class="minmax">
              <span>H: <span class="hi" id="tempMax">--&deg;</span></span>
              <span>L: <span class="lo" id="tempMin">--&deg;</span></span>
            </div>
          </div>
        </div>
      </div>

      <div class="divider"></div>

      <div class="hourly-section">
        <div class="hourly-title">Hourly Forecast</div>
        <div class="hourly-scroll">
          <div class="hourly-track" id="hourlyTrack"></div>
        </div>
      </div>
    </div>

  </div>
</div>

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

  function qp(name, fallback) {
    var url = new URL(window.location.href);
    var v = url.searchParams.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 WMO = {
    0:  { label: "Clear sky",        icon: "sun" },
    1:  { label: "Mainly clear",     icon: "sun-cloud" },
    2:  { label: "Partly cloudy",    icon: "sun-cloud" },
    3:  { label: "Overcast",         icon: "cloud" },
    45: { label: "Fog",              icon: "fog" },
    48: { label: "Freezing fog",     icon: "fog" },
    51: { label: "Light drizzle",    icon: "rain" },
    53: { label: "Drizzle",          icon: "rain" },
    55: { label: "Dense drizzle",    icon: "rain" },
    56: { label: "Freezing drizzle", icon: "rain" },
    57: { label: "Freezing drizzle", icon: "rain" },
    61: { label: "Light rain",       icon: "rain" },
    63: { label: "Rain",             icon: "rain" },
    65: { label: "Heavy rain",       icon: "rain" },
    66: { label: "Freezing rain",    icon: "rain" },
    67: { label: "Freezing rain",    icon: "rain" },
    71: { label: "Light snow",       icon: "snow" },
    73: { label: "Snow",             icon: "snow" },
    75: { label: "Heavy snow",       icon: "snow" },
    77: { label: "Snow grains",      icon: "snow" },
    80: { label: "Light showers",    icon: "rain" },
    81: { label: "Showers",          icon: "rain" },
    82: { label: "Violent showers",  icon: "rain" },
    85: { label: "Snow showers",     icon: "snow" },
    86: { label: "Snow showers",     icon: "snow" },
    95: { label: "Thunderstorm",     icon: "storm" },
    96: { label: "Thunderstorm",     icon: "storm" },
    99: { label: "Thunderstorm",     icon: "storm" }
  };

  function weatherInfo(code) {
    return WMO[code] || { label: "Unknown", icon: "cloud" };
  }

  var ICONS = {
    sun: '<circle cx="32" cy="32" r="13" fill="#ffd166"/><g stroke="#ffd166" stroke-width="4" stroke-linecap="round"><line x1="32" y1="4" x2="32" y2="12"/><line x1="32" y1="52" x2="32" y2="60"/><line x1="4" y1="32" x2="12" y2="32"/><line x1="52" y1="32" x2="60" y2="32"/><line x1="11" y1="11" x2="17" y2="17"/><line x1="47" y1="47" x2="53" y2="53"/><line x1="11" y1="53" x2="17" y2="47"/><line x1="47" y1="17" x2="53" y2="11"/></g>',
    "sun-cloud": '<circle cx="24" cy="26" r="11" fill="#ffd166"/><g stroke="#ffd166" stroke-width="3.5" stroke-linecap="round"><line x1="24" y1="6" x2="24" y2="11"/><line x1="8" y1="26" x2="13" y2="26"/><line x1="11.5" y1="13.5" x2="15" y2="17"/></g><path d="M20 46c-6 0-11-4.5-11-10 0-5 4-9.3 9-9.9 1.6-6 7-9.6 12.4-8.4 5 1.1 8.4 5.5 8.4 10.3 0 .4 0 .8-.1 1.2A9.5 9.5 0 0 1 47 39.5C47 44.2 43.2 46 39 46H20z" fill="#e9edf5"/>',
    cloud: '<path d="M18 44c-7 0-13-5.4-13-12 0-6 4.7-11 10.7-11.9C17.6 13 24.5 8 32.2 9.4c6.3 1.2 11 6.6 11 13 0 .5 0 1-.1 1.4A11.5 11.5 0 0 1 54 35.5c0 5.8-4.7 8.5-10.5 8.5H18z" fill="#e9edf5"/>',
    fog: '<path d="M18 34c-6 0-11-4.6-11-10.2C7 18.5 11.3 14 17 13.3 18.4 7.9 24 4 30.2 5.2c5.4 1 9.4 5.6 9.4 11.1 0 .4 0 .8-.1 1.2A9.8 9.8 0 0 1 48 27c0 4.9-4 7.2-9 7.2H18z" fill="#c9d3e0"/><g stroke="#c9d3e0" stroke-width="3.5" stroke-linecap="round"><line x1="8" y1="44" x2="56" y2="44"/><line x1="14" y1="52" x2="50" y2="52"/></g>',
    rain: '<path d="M16 34c-6 0-11-4.6-11-10.2C5 18.5 9.3 14 15 13.3 16.4 7.9 22 4 28.2 5.2c5.4 1 9.4 5.6 9.4 11.1 0 .4 0 .8-.1 1.2A9.8 9.8 0 0 1 46 27c0 4.9-4 7.2-9 7.2H16z" fill="#c9d3e0"/><g stroke="#7ea9e8" stroke-width="4" stroke-linecap="round"><line x1="20" y1="42" x2="17" y2="54"/><line x1="32" y1="42" x2="29" y2="54"/><line x1="44" y1="42" x2="41" y2="54"/></g>',
    snow: '<path d="M16 34c-6 0-11-4.6-11-10.2C5 18.5 9.3 14 15 13.3 16.4 7.9 22 4 28.2 5.2c5.4 1 9.4 5.6 9.4 11.1 0 .4 0 .8-.1 1.2A9.8 9.8 0 0 1 46 27c0 4.9-4 7.2-9 7.2H16z" fill="#c9d3e0"/><g stroke="#ffffff" stroke-width="3.2" stroke-linecap="round"><line x1="20" y1="40" x2="20" y2="54"/><line x1="14" y1="47" x2="26" y2="47"/><line x1="32" y1="40" x2="32" y2="54"/><line x1="26" y1="47" x2="38" y2="47"/><line x1="44" y1="40" x2="44" y2="54"/><line x1="38" y1="47" x2="50" y2="47"/></g>',
    storm: '<path d="M16 30c-6 0-11-4.6-11-10.2C5 14.5 9.3 10 15 9.3 16.4 3.9 22 0 28.2 1.2c5.4 1 9.4 5.6 9.4 11.1 0 .4 0 .8-.1 1.2A9.8 9.8 0 0 1 46 23c0 4.9-4 7.2-9 7.2H16z" fill="#c9d3e0"/><polygon points="30,32 20,48 28,48 24,60 40,40 31,40" fill="#ffd166"/>'
  };

  function iconSvg(iconKey) {
    return ICONS[iconKey] || ICONS.cloud;
  }

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

  function isPastDate(ds) {
    return ds < todayUTC();
  }

  function buildUrl(ds) {
    var base = isPastDate(ds) ? "/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: ds,
      end_date: ds
    });
    return base + "?" + params.toString();
  }

  function showLoading() {
    document.getElementById("loadingView").classList.remove("hidden");
    document.getElementById("errorView").classList.add("hidden");
    document.getElementById("contentView").classList.add("hidden");
  }

  function showError(detail) {
    document.getElementById("loadingView").classList.add("hidden");
    document.getElementById("errorView").classList.remove("hidden");
    document.getElementById("contentView").classList.add("hidden");
    if (detail) document.getElementById("errorDetail").textContent = detail;
  }

  function showContent() {
    document.getElementById("loadingView").classList.add("hidden");
    document.getElementById("errorView").classList.add("hidden");
    document.getElementById("contentView").classList.remove("hidden");
  }

  function round(n) {
    return Math.round(n);
  }

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

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

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

    document.getElementById("locationName").textContent = name;
    document.getElementById("locationDate").textContent = formatDateLabel(dateStr);
    document.getElementById("coordsBlock").innerHTML =
      Math.abs(lat).toFixed(2) + "&deg;" + (lat >= 0 ? "N" : "S") + ",<br>" +
      Math.abs(lon).toFixed(2) + "&deg;" + (lon >= 0 ? "E" : "W");

    document.getElementById("bigTemp").textContent = round((tMax + tMin) / 2);
    document.getElementById("conditionLabel").textContent = info.label;
    document.getElementById("tempMax").innerHTML = round(tMax) + "&deg;";
    document.getElementById("tempMin").innerHTML = round(tMin) + "&deg;";
    document.getElementById("mainIcon").innerHTML = iconSvg(info.icon);

    var track = document.getElementById("hourlyTrack");
    track.innerHTML = "";

    if (hourly && hourly.time && hourly.temperature_2m) {
      var nowHourIso = null;
      if (dateStr === todayUTC()) {
        var now = new Date();
        nowHourIso = dateStr + "T" + String(now.getUTCHours()).padStart(2, "0") + ":00";
      }

      for (var i = 0; i < hourly.time.length; i++) {
        var t = hourly.time[i];
        var temp = hourly.temperature_2m[i];
        var hourNum = parseInt(t.split("T")[1].split(":")[0], 10);
        var label = hourNum === 0 ? "12A" : hourNum === 12 ? "12P" : hourNum > 12 ? (hourNum - 12) + "P" : hourNum + "A";

        var item = document.createElement("div");
        item.className = "hour-item" + (t === nowHourIso ? " current" : "");

        var lbl = document.createElement("div");
        lbl.className = "hour-label";
        lbl.textContent = label;

        var icon = document.createElement("svg");
        icon.setAttribute("viewBox", "0 0 64 64");
        icon.className = "hour-icon";
        icon.innerHTML = iconSvg(info.icon);

        var tempEl = document.createElement("div");
        tempEl.className = "hour-temp";
        tempEl.innerHTML = (temp == null ? "--" : round(temp)) + "&deg;";

        item.appendChild(lbl);
        item.appendChild(icon);
        item.appendChild(tempEl);
        track.appendChild(item);
      }
    }

    showContent();
  }

  function load() {
    showLoading();
    var url = buildUrl(dateStr);

    fetch(url)
      .then(function (res) {
        if (!res.ok) {
          throw new Error("Weather service 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);
      })
      .catch(function (err) {
        showError(err && err.message ? err.message : "Could not connect to the weather service.");
      });
  }

  load();
})();
</script>

</body>
</html>