claude-sonnet-5-thinking @ low · cursor-xl

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather Card</title>
<style>
  :root {
    color-scheme: light;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0;
    padding: 0;
    width: 1280px;
    height: 800px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
  }
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
  }

  .card {
    position: relative;
    width: 920px;
    height: 640px;
    border-radius: 32px;
    background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.3);
    color: #fff;
    overflow: hidden;
    padding: 44px 52px;
    display: flex;
    flex-direction: column;
  }

  .card::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }
  .card::after {
    content: "";
    position: absolute;
    bottom: -160px;
    left: -100px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }

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

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

  .date {
    margin-top: 6px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255,255,255,0.72);
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }

  .condition-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
  }
  .condition-badge .emoji { font-size: 22px; line-height: 1; }

  .main-row {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;
  }

  .temp-block {
    display: flex;
    align-items: center;
    gap: 28px;
  }

  .weather-icon {
    font-size: 96px;
    line-height: 1;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.35));
  }

  .current-temp {
    font-size: 108px;
    font-weight: 200;
    letter-spacing: -4px;
    line-height: 1;
  }
  .current-temp .unit {
    font-size: 48px;
    font-weight: 300;
    vertical-align: super;
    margin-left: 4px;
  }

  .minmax {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-end;
  }
  .minmax .stat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 600;
  }
  .minmax .stat .label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    min-width: 34px;
  }
  .minmax .arrow-up { color: #ffb199; }
  .minmax .arrow-down { color: #9fd3ff; }

  .divider {
    z-index: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    margin: 32px 0 24px;
  }

  .hourly-title {
    z-index: 1;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 16px;
  }

  .hourly-scroll {
    z-index: 1;
    flex: 1;
    overflow: hidden;
  }

  .hourly-track {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
    height: 100%;
  }

  .hour-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 4px;
    border-radius: 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    transition: background 0.2s;
  }
  .hour-cell.now {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
  }
  .hour-cell .hr-time {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
  }
  .hour-cell .hr-temp {
    font-size: 17px;
    font-weight: 700;
  }

  .status-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    background: rgba(20, 28, 50, 0.72);
    z-index: 10;
    text-align: center;
    padding: 40px;
  }
  .status-overlay.show { display: flex; }
  .status-overlay .icon { font-size: 48px; }
  .status-overlay .msg {
    font-size: 18px;
    font-weight: 600;
    max-width: 500px;
    line-height: 1.5;
  }
  .spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: #fff;
    animation: spin 0.9s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .card.hidden-content > *:not(.status-overlay) {
    visibility: hidden;
  }
</style>
</head>
<body>
  <div class="card" id="card">
    <div class="status-overlay" id="statusOverlay">
      <div class="spinner" id="spinner"></div>
      <div class="icon" id="statusIcon" style="display:none;"></div>
      <div class="msg" id="statusMsg">Loading weather data…</div>
    </div>

    <div class="header">
      <div>
        <div class="location" id="locationName">—</div>
        <div class="date" id="dateLabel">—</div>
      </div>
      <div class="condition-badge">
        <span class="emoji" id="conditionEmoji">—</span>
        <span id="conditionText">—</span>
      </div>
    </div>

    <div class="main-row">
      <div class="temp-block">
        <div class="weather-icon" id="mainIcon">—</div>
        <div class="current-temp"><span id="avgTemp">—</span><span class="unit">°C</span></div>
      </div>
      <div class="minmax">
        <div class="stat"><span class="label">High</span><span class="arrow-up">▲</span><span id="maxTemp">—°C</span></div>
        <div class="stat"><span class="label">Low</span><span class="arrow-down">▼</span><span id="minTemp">—°C</span></div>
      </div>
    </div>

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

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

  function wmoInfo(code) {
    return WMO[code] || ["Unknown", "❓"];
  }

  function todayUTC() {
    const d = new Date();
    return d.toISOString().slice(0, 10);
  }

  const params = new URLSearchParams(window.location.search);
  const lat = parseFloat(params.get("lat"));
  const lon = parseFloat(params.get("lon"));
  const latitude = Number.isFinite(lat) ? lat : 52.52;
  const longitude = Number.isFinite(lon) ? lon : 13.405;
  const name = params.get("name") || "Berlin";
  let date = params.get("date");
  if (!date || !/^\d{4}-\d{2}-\d{2}$/.test(date)) {
    date = todayUTC();
  }

  const statusOverlay = document.getElementById("statusOverlay");
  const spinner = document.getElementById("spinner");
  const statusIcon = document.getElementById("statusIcon");
  const statusMsg = document.getElementById("statusMsg");
  const card = document.getElementById("card");

  function showStatus(message, isError) {
    card.classList.add("hidden-content");
    statusOverlay.classList.add("show");
    statusMsg.textContent = message;
    if (isError) {
      spinner.style.display = "none";
      statusIcon.style.display = "block";
      statusIcon.textContent = "⚠️";
    }
  }

  function hideStatus() {
    statusOverlay.classList.remove("show");
    card.classList.remove("hidden-content");
  }

  function formatDateLabel(dateStr) {
    const [y, m, d] = dateStr.split("-").map(Number);
    const dt = new Date(Date.UTC(y, m - 1, d));
    return dt.toLocaleDateString("en-US", {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
      timeZone: "UTC",
    });
  }

  function formatHour(isoStr) {
    const hourPart = isoStr.split("T")[1];
    const h = parseInt(hourPart.slice(0, 2), 10);
    if (h === 0) return "12 AM";
    if (h === 12) return "12 PM";
    return h < 12 ? `${h} AM` : `${h - 12} PM`;
  }

  function isFutureOrToday(dateStr) {
    return dateStr >= todayUTC();
  }

  async function fetchWeather() {
    const useForecast = isFutureOrToday(date);
    const base = useForecast ? "/api/om/forecast" : "/api/om/archive";
    const qs = new URLSearchParams({
      latitude: String(latitude),
      longitude: String(longitude),
      daily: "temperature_2m_max,temperature_2m_min,weather_code",
      hourly: "temperature_2m",
      timezone: "UTC",
      temperature_unit: "celsius",
      start_date: date,
      end_date: date,
    });
    const url = `${base}?${qs.toString()}`;
    const res = await fetch(url);
    if (!res.ok) {
      throw new Error(`Request failed with status ${res.status}`);
    }
    const data = await res.json();
    if (data.error) {
      throw new Error(data.reason || "API returned an error");
    }
    return data;
  }

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

    if (
      !daily || !hourly ||
      !Array.isArray(daily.time) || daily.time.length === 0 ||
      !Array.isArray(hourly.time) || hourly.time.length === 0
    ) {
      throw new Error("No weather data available for this date");
    }

    const maxT = daily.temperature_2m_max[0];
    const minT = daily.temperature_2m_min[0];
    const code = daily.weather_code[0];
    const [condText, emoji] = wmoInfo(code);

    document.getElementById("locationName").textContent = name;
    document.getElementById("dateLabel").textContent = formatDateLabel(date);
    document.getElementById("conditionText").textContent = condText;
    document.getElementById("conditionEmoji").textContent = emoji;
    document.getElementById("mainIcon").textContent = emoji;
    document.getElementById("maxTemp").textContent = `${Math.round(maxT)}°C`;
    document.getElementById("minTemp").textContent = `${Math.round(minT)}°C`;

    const avg = (maxT + minT) / 2;
    document.getElementById("avgTemp").textContent = Math.round(avg);

    const track = document.getElementById("hourlyTrack");
    track.innerHTML = "";
    const nowHour = new Date().getUTCHours();
    const isToday = date === todayUTC();

    hourly.time.forEach((t, i) => {
      const temp = hourly.temperature_2m[i];
      if (temp === null || temp === undefined) return;
      const cell = document.createElement("div");
      cell.className = "hour-cell";
      const h = parseInt(t.split("T")[1].slice(0, 2), 10);
      if (isToday && h === nowHour) cell.classList.add("now");
      cell.innerHTML = `<div class="hr-time">${formatHour(t)}</div><div class="hr-temp">${Math.round(temp)}°</div>`;
      track.appendChild(cell);
    });

    hideStatus();
  }

  fetchWeather()
    .then(render)
    .catch((err) => {
      console.error(err);
      showStatus(
        `Unable to load weather data. ${err && err.message ? err.message : ""}`.trim(),
        true
      );
    });
})();
</script>
</body>
</html>