claude-sonnet-5 @ low · cursor-xl

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather Card</title>
<style>
  :root {
    --bg1: #4b6cb7;
    --bg2: #182848;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0;
    padding: 0;
    width: 1280px;
    height: 800px;
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    background: radial-gradient(circle at 20% 15%, #6b8fd4 0%, #3a5a9e 35%, #182848 100%);
    overflow: hidden;
    color: #fff;
  }
  .stage {
    width: 1280px;
    height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .bg-glow {
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 70%);
    top: -150px;
    right: -100px;
    pointer-events: none;
  }
  .card {
    width: 900px;
    height: 620px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 28px;
    backdrop-filter: blur(20px);
    box-shadow:
      0 30px 60px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .location {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: 0.3px;
  }
  .date {
    font-size: 16px;
    opacity: 0.75;
    margin-top: 6px;
    font-weight: 400;
  }
  .condition-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.12);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.15);
  }
  .main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
  }
  .icon-wrap {
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.25));
  }
  .icon-wrap svg { width: 140px; height: 140px; }
  .temps {
    text-align: right;
  }
  .current-temp {
    font-size: 96px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -2px;
  }
  .current-temp sup {
    font-size: 42px;
    font-weight: 300;
    top: -0.5em;
  }
  .minmax {
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 8px;
    font-size: 18px;
    opacity: 0.85;
  }
  .minmax span.max { color: #ffd479; }
  .minmax span.min { color: #8ec9ff; }
  .divider {
    height: 1px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.25), rgba(255,255,255,0));
    margin: 28px 0 22px;
  }
  .hourly-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.6;
    margin-bottom: 14px;
    font-weight: 600;
  }
  .hourly-scroll {
    flex: 1;
    overflow: hidden;
    position: relative;
  }
  .hourly-track {
    display: flex;
    gap: 6px;
    height: 100%;
    align-items: stretch;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }
  .hourly-track::-webkit-scrollbar { height: 6px; }
  .hourly-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; }
  .hour-item {
    min-width: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 14px 4px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    transition: background 0.2s;
  }
  .hour-item.now {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
  }
  .hour-time {
    font-size: 12px;
    opacity: 0.65;
    font-weight: 500;
  }
  .hour-temp {
    font-size: 18px;
    font-weight: 500;
    margin-top: 10px;
  }
  .hour-bar-wrap {
    width: 4px;
    height: 60px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    margin-top: 10px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
  }
  .hour-bar {
    width: 100%;
    background: linear-gradient(to top, #ffd479, #ff9d76);
    border-radius: 2px;
  }
  .status-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .status-msg .big {
    font-size: 22px;
    font-weight: 600;
  }
  .status-msg .small {
    font-size: 14px;
    opacity: 0.7;
    max-width: 500px;
  }
  .spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .hidden { display: none !important; }
</style>
</head>
<body>
<div class="stage">
  <div class="bg-glow"></div>
  <div class="card">

    <div id="loadingState" class="status-msg">
      <div class="spinner"></div>
      <div class="big">Loading weather…</div>
    </div>

    <div id="errorState" class="status-msg hidden">
      <div class="big">⚠️ Unable to load weather data</div>
      <div class="small" id="errorDetail">Please check your connection and try again.</div>
    </div>

    <div id="content" class="hidden" style="display:flex; flex-direction:column; height:100%;">
      <div class="header">
        <div>
          <div class="location" id="locationName">—</div>
          <div class="date" id="dateLabel">—</div>
        </div>
        <div class="condition-badge">
          <span id="badgeIcon">☀️</span>
          <span id="conditionText">—</span>
        </div>
      </div>

      <div class="main-row">
        <div class="icon-wrap" id="mainIcon"></div>
        <div class="temps">
          <div class="current-temp" id="avgTemp">—<sup>°C</sup></div>
          <div class="minmax">
            <span class="max">↑ <span id="maxTemp">—</span>°</span>
            <span class="min">↓ <span id="minTemp">—</span>°</span>
          </div>
        </div>
      </div>

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

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

  </div>
</div>

<script>
(function () {
  const params = new URLSearchParams(window.location.search);

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

  const lat = parseFloat(params.get('lat')) || 52.52;
  const lon = parseFloat(params.get('lon')) || 13.405;
  const name = params.get('name') || 'Berlin';
  const dateStr = params.get('date') || todayUTC();

  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: ['Light freezing drizzle', '🌧️'],
    57: ['Freezing drizzle', '🌧️'],
    61: ['Light rain', '🌧️'],
    63: ['Rain', '🌧️'],
    65: ['Heavy rain', '🌧️'],
    66: ['Light freezing rain', '🌧️'],
    67: ['Freezing rain', '🌧️'],
    71: ['Light snow', '🌨️'],
    73: ['Snow', '🌨️'],
    75: ['Heavy snow', '❄️'],
    77: ['Snow grains', '❄️'],
    80: ['Light showers', '🌦️'],
    81: ['Showers', '🌧️'],
    82: ['Violent showers', '⛈️'],
    85: ['Light snow showers', '🌨️'],
    86: ['Snow showers', '❄️'],
    95: ['Thunderstorm', '⛈️'],
    96: ['Thunderstorm w/ hail', '⛈️'],
    99: ['Severe thunderstorm', '⛈️']
  };

  function weatherInfo(code) {
    return WMO[code] || ['Unknown', '🌡️'];
  }

  function isPastDate(ds) {
    const today = todayUTC();
    return ds < today;
  }

  function buildUrl(ds) {
    const base = isPastDate(ds) ? '/api/om/archive' : '/api/om/forecast';
    const q = 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 + '?' + q.toString();
  }

  function fmtDateLabel(ds) {
    const [y, m, d] = ds.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 fmtHour(iso) {
    const dt = new Date(iso + 'Z'.startsWith(iso.slice(-1)) ? iso : iso);
    const hourPart = iso.split('T')[1] || '00:00';
    let h = parseInt(hourPart.slice(0, 2), 10);
    const suffix = h >= 12 ? 'PM' : 'AM';
    let h12 = h % 12;
    if (h12 === 0) h12 = 12;
    return h12 + suffix;
  }

  function showError(msg) {
    document.getElementById('loadingState').classList.add('hidden');
    document.getElementById('errorState').classList.remove('hidden');
    document.getElementById('errorDetail').textContent = msg;
  }

  function render(data) {
    if (!data || !data.daily || !data.hourly ||
        !Array.isArray(data.daily.temperature_2m_max) || data.daily.temperature_2m_max.length === 0 ||
        !Array.isArray(data.hourly.temperature_2m) || data.hourly.temperature_2m.length === 0) {
      showError('The weather service returned no data for this location and date.');
      return;
    }

    const maxT = data.daily.temperature_2m_max[0];
    const minT = data.daily.temperature_2m_min[0];
    const code = data.daily.weather_code[0];
    const [condText, condIcon] = weatherInfo(code);

    document.getElementById('locationName').textContent = name;
    document.getElementById('dateLabel').textContent = fmtDateLabel(dateStr);
    document.getElementById('conditionText').textContent = condText;
    document.getElementById('badgeIcon').textContent = condIcon;
    document.getElementById('mainIcon').innerHTML = iconSVG(code);

    const avg = (maxT + minT) / 2;
    document.getElementById('avgTemp').innerHTML = Math.round(avg) + '<sup>°C</sup>';
    document.getElementById('maxTemp').textContent = Math.round(maxT);
    document.getElementById('minTemp').textContent = Math.round(minT);

    const track = document.getElementById('hourlyTrack');
    track.innerHTML = '';
    const temps = data.hourly.temperature_2m;
    const times = data.hourly.time;
    const localMax = Math.max(...temps.filter(t => t !== null && t !== undefined));
    const localMin = Math.min(...temps.filter(t => t !== null && t !== undefined));
    const range = Math.max(1, localMax - localMin);

    const nowHour = new Date().getUTCHours();
    const isToday = dateStr === todayUTC();

    for (let i = 0; i < temps.length; i++) {
      const t = temps[i];
      if (t === null || t === undefined) continue;
      const item = document.createElement('div');
      item.className = 'hour-item';
      const hourNum = parseInt((times[i].split('T')[1] || '00:00').slice(0, 2), 10);
      if (isToday && hourNum === nowHour) item.classList.add('now');

      const barHeightPct = ((t - localMin) / range) * 100;
      item.innerHTML =
        '<div class="hour-time">' + fmtHour(times[i]) + '</div>' +
        '<div class="hour-bar-wrap"><div class="hour-bar" style="height:' + Math.max(6, barHeightPct) + '%"></div></div>' +
        '<div class="hour-temp">' + Math.round(t) + '°</div>';
      track.appendChild(item);
    }

    document.getElementById('loadingState').classList.add('hidden');
    document.getElementById('content').classList.remove('hidden');
  }

  function iconSVG(code) {
    const sunny = '<svg viewBox="0 0 100 100" fill="none"><circle cx="50" cy="50" r="22" fill="#ffd479"/><g stroke="#ffd479" stroke-width="5" stroke-linecap="round"><line x1="50" y1="8" x2="50" y2="20"/><line x1="50" y1="80" x2="50" y2="92"/><line x1="8" y1="50" x2="20" y2="50"/><line x1="80" y1="50" x2="92" y2="50"/><line x1="18" y1="18" x2="27" y2="27"/><line x1="73" y1="73" x2="82" y2="82"/><line x1="18" y1="82" x2="27" y2="73"/><line x1="73" y1="27" x2="82" y2="18"/></g></svg>';
    const cloudy = '<svg viewBox="0 0 100 100" fill="none"><ellipse cx="45" cy="60" rx="30" ry="20" fill="#e8eefc"/><circle cx="35" cy="48" r="16" fill="#e8eefc"/><circle cx="60" cy="45" r="20" fill="#f4f8ff"/></svg>';
    const partly = '<svg viewBox="0 0 100 100" fill="none"><circle cx="38" cy="38" r="18" fill="#ffd479"/><ellipse cx="58" cy="62" rx="28" ry="18" fill="#eef2fb"/><circle cx="50" cy="52" r="14" fill="#eef2fb"/></svg>';
    const rain = '<svg viewBox="0 0 100 100" fill="none"><ellipse cx="50" cy="45" rx="28" ry="18" fill="#d7dfef"/><g stroke="#8ec9ff" stroke-width="4" stroke-linecap="round"><line x1="35" y1="70" x2="30" y2="88"/><line x1="50" y1="70" x2="45" y2="88"/><line x1="65" y1="70" x2="60" y2="88"/></g></svg>';
    const snow = '<svg viewBox="0 0 100 100" fill="none"><ellipse cx="50" cy="42" rx="28" ry="18" fill="#e6ecf7"/><g fill="#cfe3ff"><circle cx="35" cy="75" r="4"/><circle cx="50" cy="80" r="4"/><circle cx="65" cy="75" r="4"/></g></svg>';
    const storm = '<svg viewBox="0 0 100 100" fill="none"><ellipse cx="50" cy="40" rx="28" ry="18" fill="#c9cfe0"/><polygon points="48,58 38,80 50,80 42,96 65,68 53,68 60,58" fill="#ffd479"/></svg>';
    const fog = '<svg viewBox="0 0 100 100" fill="none"><g stroke="#dbe3f2" stroke-width="6" stroke-linecap="round"><line x1="20" y1="40" x2="80" y2="40"/><line x1="15" y1="55" x2="85" y2="55"/><line x1="20" y1="70" x2="80" y2="70"/></g></svg>';

    if (code === 0) return sunny;
    if (code === 1 || code === 2) return partly;
    if (code === 3) return cloudy;
    if (code === 45 || code === 48) return fog;
    if ([51,53,55,56,57,61,63,65,66,67,80,81,82].includes(code)) return rain;
    if ([71,73,75,77,85,86].includes(code)) return snow;
    if ([95,96,99].includes(code)) return storm;
    return cloudy;
  }

  const url = buildUrl(dateStr);

  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 || 'API returned an error.');
      }
      render(data);
    })
    .catch(function (err) {
      showError(err && err.message ? err.message : 'An unknown error occurred.');
    });
})();
</script>
</body>
</html>