claude-sonnet-5 @ medium · cursor

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather</title>
<meta name="viewport" content="width=1280, height=800">
<style>
  :root{
    --sky-top:#4a7fd6;
    --sky-bottom:#8fc4e8;
    --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);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{
    width:1280px;height:800px;overflow:hidden;
    font-family:'Segoe UI',Helvetica,Arial,sans-serif;
    background:linear-gradient(160deg,var(--sky-top) 0%,var(--sky-bottom) 60%,#cfe8f7 100%);
    color:var(--text);
    position:relative;
  }
  body::before{
    content:"";
    position:absolute;inset:0;
    background:
      radial-gradient(circle at 15% 20%, rgba(255,255,255,0.18), transparent 45%),
      radial-gradient(circle at 85% 75%, rgba(255,255,255,0.12), transparent 40%);
    pointer-events:none;
  }
  .stars{
    position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;pointer-events:none;
  }
  .clouds{
    position:absolute;inset:0;pointer-events:none;overflow:hidden;
  }
  .cloud{
    position:absolute;background:rgba(255,255,255,0.5);border-radius:50%;
    filter:blur(6px);opacity:0.55;
  }
  .cloud.c1{width:260px;height:90px;top:80px;left:-100px;animation:drift 55s linear infinite;}
  .cloud.c2{width:180px;height:70px;top:180px;left:-260px;animation:drift 75s linear infinite;animation-delay:8s;}
  .cloud.c3{width:320px;height:110px;top:40px;left:-320px;animation:drift 90s linear infinite;animation-delay:20s;}
  @keyframes drift{
    from{transform:translateX(0);}
    to{transform:translateX(1650px);}
  }

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

  .card{
    width:920px;
    min-height:640px;
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:28px;
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    box-shadow:0 30px 60px -20px rgba(0,20,50,0.45), inset 0 1px 0 rgba(255,255,255,0.4);
    padding:44px 52px;
    display:flex;
    flex-direction:column;
    gap:28px;
    position:relative;
  }

  .top-row{
    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;
    color:var(--text-dim);
    margin-top:6px;
    font-weight:400;
  }
  .coords{
    font-size:13px;
    color:var(--text-dim);
    text-align:right;
    line-height:1.5;
    opacity:0.85;
  }

  .main-weather{
    display:flex;
    align-items:center;
    gap:36px;
    padding:12px 0 8px;
  }
  .icon-wrap{
    width:150px;height:150px;
    display:flex;align-items:center;justify-content:center;
    filter:drop-shadow(0 12px 18px rgba(0,0,0,0.25));
    animation:floatIcon 4.5s ease-in-out infinite;
  }
  @keyframes floatIcon{
    0%,100%{transform:translateY(0px);}
    50%{transform:translateY(-8px);}
  }
  .temp-block{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .current-temp{
    font-size:96px;
    font-weight:300;
    line-height:1;
    letter-spacing:-2px;
  }
  .current-temp sup{
    font-size:42px;
    font-weight:200;
    top:-0.5em;
  }
  .condition{
    font-size:24px;
    font-weight:500;
    color:var(--text);
  }
  .minmax{
    display:flex;
    gap:18px;
    margin-top:4px;
  }
  .chip{
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 14px;
    border-radius:999px;
    background:rgba(255,255,255,0.16);
    border:1px solid rgba(255,255,255,0.25);
    font-size:15px;
  }
  .chip .dot{
    width:8px;height:8px;border-radius:50%;
  }
  .chip.max .dot{background:#ff8a5c;}
  .chip.min .dot{background:#6ecbff;}

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

  .hourly-title{
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:1.6px;
    color:var(--text-dim);
    font-weight:600;
  }

  .hourly-scroll{
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding:10px 4px 14px;
    scrollbar-width:thin;
  }
  .hourly-scroll::-webkit-scrollbar{height:6px;}
  .hourly-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.35);border-radius:6px;}
  .hourly-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,0.08);border-radius:6px;}

  .hour-item{
    flex:0 0 auto;
    width:66px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:14px 6px;
    border-radius:16px;
    background:rgba(255,255,255,0.10);
    border:1px solid rgba(255,255,255,0.18);
    transition:background 0.2s ease;
  }
  .hour-item.now{
    background:rgba(255,255,255,0.28);
    border-color:rgba(255,255,255,0.55);
  }
  .hour-label{
    font-size:12.5px;
    color:var(--text-dim);
    font-weight:600;
  }
  .hour-bar-track{
    width:6px;
    height:70px;
    border-radius:6px;
    background:rgba(255,255,255,0.16);
    position:relative;
    overflow:hidden;
  }
  .hour-bar-fill{
    position:absolute;
    bottom:0;left:0;right:0;
    border-radius:6px;
    background:linear-gradient(180deg,#ffd27a,#ff9d5c);
  }
  .hour-temp{
    font-size:14px;
    font-weight:600;
  }

  .status{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:80px 20px;
    text-align:center;
  }
  .spinner{
    width:44px;height:44px;
    border-radius:50%;
    border:4px solid rgba(255,255,255,0.25);
    border-top-color:rgba(255,255,255,0.9);
    animation:spin 0.9s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  .status-text{
    font-size:17px;
    color:var(--text-dim);
  }
  .error-text{
    font-size:20px;
    font-weight:600;
    color:#ffe3e3;
  }
  .error-sub{
    font-size:14px;
    color:var(--text-dim);
    max-width:480px;
  }

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

  <div class="clouds" id="clouds">
    <div class="cloud c1"></div>
    <div class="cloud c2"></div>
    <div class="cloud c3"></div>
  </div>

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

      <div id="loadingState" class="status">
        <div class="spinner"></div>
        <div class="status-text">Loading weather data…</div>
      </div>

      <div id="errorState" class="status hidden">
        <div class="error-text">Unable to load weather data</div>
        <div class="error-sub" id="errorDetail">Please check your connection or try again later.</div>
      </div>

      <div id="content" class="hidden" style="display:flex;flex-direction:column;gap:28px;">
        <div class="top-row">
          <div>
            <div class="location" id="locationName">—</div>
            <div class="date" id="dateLabel">—</div>
          </div>
          <div class="coords" id="coordsLabel"></div>
        </div>

        <div class="main-weather">
          <div class="icon-wrap" id="weatherIcon"></div>
          <div class="temp-block">
            <div class="current-temp" id="currentTemp">—</div>
            <div class="condition" id="conditionText">—</div>
            <div class="minmax">
              <div class="chip max"><span class="dot"></span><span id="maxTemp">—</span></div>
              <div class="chip min"><span class="dot"></span><span id="minTemp">—</span></div>
            </div>
          </div>
        </div>

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

        <div>
          <div class="hourly-title">Hourly forecast</div>
          <div class="hourly-scroll" id="hourlyScroll"></div>
        </div>
      </div>

    </div>
  </div>

<script>
(function(){
  const params = new URLSearchParams(window.location.search);
  const lat = parseFloat(params.get('lat')) || 52.52;
  const lon = parseFloat(params.get('lon')) || 13.405;
  const name = params.get('name') || 'Berlin';

  function todayUTC(){
    const d = new Date();
    return d.toISOString().slice(0,10);
  }
  const dateParam = params.get('date') || todayUTC();

  const WMO = {
    0:  { text:'Clear sky',            icon:'sun' },
    1:  { text:'Mainly clear',         icon:'sun-cloud' },
    2:  { text:'Partly cloudy',        icon:'sun-cloud' },
    3:  { text:'Overcast',             icon:'cloud' },
    45: { text:'Fog',                  icon:'fog' },
    48: { text:'Rime fog',             icon:'fog' },
    51: { text:'Light drizzle',        icon:'drizzle' },
    53: { text:'Drizzle',              icon:'drizzle' },
    55: { text:'Dense drizzle',        icon:'drizzle' },
    56: { text:'Freezing drizzle',     icon:'drizzle' },
    57: { text:'Freezing drizzle',     icon:'drizzle' },
    61: { text:'Light rain',           icon:'rain' },
    63: { text:'Rain',                 icon:'rain' },
    65: { text:'Heavy rain',           icon:'rain' },
    66: { text:'Freezing rain',        icon:'rain' },
    67: { text:'Freezing rain',        icon:'rain' },
    71: { text:'Light snow',           icon:'snow' },
    73: { text:'Snow',                 icon:'snow' },
    75: { text:'Heavy snow',           icon:'snow' },
    77: { text:'Snow grains',          icon:'snow' },
    80: { text:'Rain showers',         icon:'rain' },
    81: { text:'Rain showers',         icon:'rain' },
    82: { text:'Violent rain showers', icon:'rain' },
    85: { text:'Snow showers',         icon:'snow' },
    86: { text:'Snow showers',         icon:'snow' },
    95: { text:'Thunderstorm',         icon:'storm' },
    96: { text:'Thunderstorm + hail',  icon:'storm' },
    99: { text:'Thunderstorm + hail',  icon:'storm' }
  };

  const BG = {
    sun:       ['#3f8ee0','#8fc4e8'],
    'sun-cloud':['#5a8fc9','#9db9d6'],
    cloud:     ['#6d7f96','#a8b6c6'],
    fog:       ['#7c8896','#b3bcc4'],
    drizzle:   ['#546b8a','#8a9dbb'],
    rain:      ['#3f5a78','#5f7a9b'],
    snow:      ['#7f95ab','#c6d5e0'],
    storm:     ['#2e3b52','#4a5b78']
  };

  function svgIcon(kind){
    const icons = {
      sun: '<svg width="120" height="120" viewBox="0 0 100 100"><circle cx="50" cy="50" r="22" fill="#FFD166"/><g stroke="#FFD166" 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="19" y1="19" x2="27" y2="27"/><line x1="73" y1="73" x2="81" y2="81"/><line x1="19" y1="81" x2="27" y2="73"/><line x1="73" y1="27" x2="81" y2="19"/></g></svg>',
      'sun-cloud': '<svg width="130" height="120" viewBox="0 0 120 100"><circle cx="45" cy="38" r="20" fill="#FFD166"/><g stroke="#FFD166" stroke-width="4" stroke-linecap="round"><line x1="45" y1="6" x2="45" y2="14"/><line x1="14" y1="38" x2="22" y2="38"/><line x1="24" y1="17" x2="30" y2="23"/></g><ellipse cx="65" cy="65" rx="35" ry="22" fill="#ffffff"/><ellipse cx="42" cy="70" rx="24" ry="16" fill="#f0f4f8"/></svg>',
      cloud: '<svg width="140" height="110" viewBox="0 0 140 100"><ellipse cx="75" cy="55" rx="40" ry="26" fill="#ffffff"/><ellipse cx="45" cy="62" rx="28" ry="19" fill="#eef2f6"/><ellipse cx="100" cy="65" rx="24" ry="16" fill="#e4e9ee"/></svg>',
      fog: '<svg width="140" height="110" viewBox="0 0 140 100"><ellipse cx="70" cy="42" rx="38" ry="22" fill="#ffffff" opacity="0.9"/><g stroke="#e8edf1" stroke-width="6" stroke-linecap="round"><line x1="20" y1="68" x2="120" y2="68"/><line x1="30" y1="80" x2="110" y2="80"/><line x1="15" y1="92" x2="125" y2="92"/></g></svg>',
      drizzle: '<svg width="140" height="120" viewBox="0 0 140 110"><ellipse cx="70" cy="40" rx="38" ry="22" fill="#ffffff"/><g stroke="#8fd3ff" stroke-width="5" stroke-linecap="round"><line x1="50" y1="78" x2="46" y2="94"/><line x1="70" y1="78" x2="66" y2="94"/><line x1="90" y1="78" x2="86" y2="94"/></g></svg>',
      rain: '<svg width="140" height="120" viewBox="0 0 140 110"><ellipse cx="70" cy="38" rx="40" ry="24" fill="#e7edf2"/><g stroke="#4fa3e0" stroke-width="6" stroke-linecap="round"><line x1="45" y1="78" x2="38" y2="100"/><line x1="70" y1="78" x2="63" y2="100"/><line x1="95" y1="78" x2="88" y2="100"/></g></svg>',
      snow: '<svg width="140" height="120" viewBox="0 0 140 110"><ellipse cx="70" cy="38" rx="40" ry="24" fill="#eef4f8"/><g fill="#ffffff" stroke="#cfe3ef" stroke-width="1.5"><circle cx="48" cy="86" r="5"/><circle cx="70" cy="92" r="5"/><circle cx="92" cy="86" r="5"/></g></svg>',
      storm: '<svg width="140" height="120" viewBox="0 0 140 110"><ellipse cx="70" cy="36" rx="40" ry="22" fill="#c9d3dc"/><polygon points="72,58 55,88 68,88 60,108 90,72 74,72" fill="#FFD166"/></svg>'
    };
    return icons[kind] || icons.cloud;
  }

  function fmtDateLabel(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 setBackground(kind){
    const pair = BG[kind] || BG.cloud;
    document.documentElement.style.setProperty('--sky-top', pair[0]);
    document.documentElement.style.setProperty('--sky-bottom', pair[1]);
    if (kind === 'storm' || kind === 'rain' || kind === 'snow'){
      document.getElementById('clouds').style.opacity = '0.5';
    }
  }

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

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

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

  function render(data){
    if (!data || !data.daily || !data.daily.time || data.daily.time.length === 0){
      showError('No weather data was returned for this date.');
      return;
    }
    const code = data.daily.weather_code[0];
    const info = WMO[code] || { text: 'Unknown', icon: 'cloud' };
    setBackground(info.icon);

    document.getElementById('locationName').textContent = name;
    document.getElementById('dateLabel').textContent = fmtDateLabel(dateParam);
    document.getElementById('coordsLabel').innerHTML =
      lat.toFixed(3) + '°, ' + lon.toFixed(3) + '°<br>UTC';

    document.getElementById('weatherIcon').innerHTML = svgIcon(info.icon);
    document.getElementById('conditionText').textContent = info.text;

    const max = data.daily.temperature_2m_max[0];
    const min = data.daily.temperature_2m_min[0];
    document.getElementById('maxTemp').textContent = (max != null ? Math.round(max) : '—') + '°';
    document.getElementById('minTemp').textContent = (min != null ? Math.round(min) : '—') + '°';

    const avg = (max != null && min != null) ? Math.round((max + min) / 2) : null;
    document.getElementById('currentTemp').innerHTML =
      (avg != null ? avg : '—') + '<sup>°C</sup>';

    const scroll = document.getElementById('hourlyScroll');
    scroll.innerHTML = '';
    const times = (data.hourly && data.hourly.time) || [];
    const temps = (data.hourly && data.hourly.temperature_2m) || [];
    const nowUTCHour = isPastDate(dateParam) ? -1 :
      (dateParam === todayUTC() ? new Date().getUTCHours() : -1);

    const validTemps = temps.filter(t => t != null);
    const tMax = validTemps.length ? Math.max(...validTemps) : 1;
    const tMin = validTemps.length ? Math.min(...validTemps) : 0;
    const range = Math.max(tMax - tMin, 1);

    times.forEach((t, i) => {
      const hour = new Date(t).getUTCHours();
      const temp = temps[i];
      const item = document.createElement('div');
      item.className = 'hour-item' + (hour === nowUTCHour ? ' now' : '');
      const pct = temp != null ? ((temp - tMin) / range) * 70 + 8 : 8;
      item.innerHTML =
        '<div class="hour-label">' + (hour === 0 ? '12AM' : hour === 12 ? '12PM' : hour < 12 ? hour + 'AM' : (hour - 12) + 'PM') + '</div>' +
        '<div class="hour-bar-track"><div class="hour-bar-fill" style="height:' + pct + 'px;"></div></div>' +
        '<div class="hour-temp">' + (temp != null ? Math.round(temp) + '°' : '—') + '</div>';
      scroll.appendChild(item);
    });

    document.getElementById('loadingState').classList.add('hidden');
    document.getElementById('content').classList.remove('hidden');
    document.getElementById('content').style.display = 'flex';
  }

  async function load(){
    try{
      const url = buildUrl(dateParam);
      const res = await fetch(url);
      if (!res.ok){
        throw new Error('Server responded with status ' + res.status);
      }
      const data = await res.json();
      if (data && data.error){
        throw new Error(data.reason || 'API returned an error');
      }
      render(data);
    }catch(err){
      showError(err && err.message ? err.message : 'An unexpected error occurred.');
    }
  }

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