claude-sonnet-5 @ low · cursor

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather Card</title>
<style>
  :root{
    --bg1:#4b6cb7;
    --bg2:#182848;
    --card-bg: rgba(255,255,255,0.10);
    --card-border: rgba(255,255,255,0.18);
    --text:#f5f7fb;
    --text-dim: rgba(245,247,251,0.65);
    --accent:#ffd166;
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0;
    padding:0;
    width:1280px;
    height:800px;
    overflow:hidden;
    font-family:'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    background: radial-gradient(1200px 800px at 20% 10%, #5b7fd1 0%, var(--bg1) 35%, var(--bg2) 100%);
    color: var(--text);
  }
  body{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .stage{
    width:1280px;
    height:800px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .stage::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      radial-gradient(600px 300px at 90% 5%, rgba(255,255,255,0.10), transparent 60%),
      radial-gradient(500px 400px at 5% 95%, rgba(0,0,0,0.25), transparent 60%);
    pointer-events:none;
  }
  .card{
    position:relative;
    width:960px;
    height:640px;
    border-radius:28px;
    background: var(--card-bg);
    border:1px solid var(--card-border);
    backdrop-filter: blur(18px);
    box-shadow:
      0 30px 80px rgba(0,0,0,0.35),
      inset 0 1px 0 rgba(255,255,255,0.15);
    padding:44px 52px;
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
  }
  .location{
    font-size:34px;
    font-weight:600;
    letter-spacing:0.3px;
  }
  .date{
    margin-top:6px;
    font-size:16px;
    color: var(--text-dim);
    font-weight:400;
  }
  .badge{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color: var(--text-dim);
    background: rgba(255,255,255,0.08);
    border:1px solid var(--card-border);
    padding:6px 14px;
    border-radius:999px;
  }
  .main{
    display:flex;
    align-items:center;
    gap:36px;
    padding:6px 0 4px 0;
  }
  .icon{
    width:130px;
    height:130px;
    flex-shrink:0;
    filter: drop-shadow(0 10px 25px rgba(0,0,0,0.3));
  }
  .temps{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .condition{
    font-size:22px;
    font-weight:500;
    color: var(--text);
  }
  .minmax{
    display:flex;
    align-items:baseline;
    gap:22px;
  }
  .maxTemp{
    font-size:64px;
    font-weight:700;
    line-height:1;
  }
  .maxTemp sup{
    font-size:28px;
    font-weight:400;
    opacity:0.8;
  }
  .minTemp{
    font-size:26px;
    color: var(--text-dim);
    font-weight:500;
  }
  .divider{
    height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    margin: 4px 0;
  }
  .hourly-title{
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color: var(--text-dim);
    margin-bottom:10px;
  }
  .hourly{
    display:flex;
    gap:0;
    overflow-x:auto;
    padding-bottom:6px;
    scrollbar-width:none;
  }
  .hourly::-webkit-scrollbar{ display:none; }
  .hour{
    flex:1 0 auto;
    min-width:34px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:0 4px;
    position:relative;
  }
  .hour .t{
    font-size:15px;
    font-weight:600;
  }
  .hour .bar-wrap{
    height:70px;
    display:flex;
    align-items:flex-end;
  }
  .hour .bar{
    width:6px;
    border-radius:4px;
    background: linear-gradient(180deg, var(--accent), #ff8c42);
    box-shadow: 0 0 10px rgba(255,209,102,0.35);
  }
  .hour .lbl{
    font-size:11px;
    color: var(--text-dim);
  }
  .status{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:20px;
    color: var(--text-dim);
    gap:12px;
    flex-direction:column;
  }
  .status .err-icon{
    font-size:40px;
  }
  .spinner{
    width:36px;
    height:36px;
    border-radius:50%;
    border:3px solid rgba(255,255,255,0.25);
    border-top-color: var(--accent);
    animation: spin 0.9s linear infinite;
  }
  @keyframes spin{ to{ transform: rotate(360deg); } }
  .hidden{ display:none !important; }
  .footer-note{
    font-size:12px;
    color: var(--text-dim);
    text-align:right;
  }
</style>
</head>
<body>
<div class="stage">
  <div class="card" id="card">

    <div class="header">
      <div>
        <div class="location" id="locationName">—</div>
        <div class="date" id="dateLabel">—</div>
      </div>
      <div class="badge" id="unitBadge">°C</div>
    </div>

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

    <div id="errorState" class="status hidden">
      <div class="err-icon">⚠️</div>
      <div id="errorMessage">Unable to load weather data.</div>
    </div>

    <div id="content" class="hidden">
      <div class="main">
        <svg class="icon" id="weatherIcon" viewBox="0 0 100 100"></svg>
        <div class="temps">
          <div class="condition" id="conditionText">—</div>
          <div class="minmax">
            <div class="maxTemp" id="maxTemp">—<sup>°C</sup></div>
            <div class="minTemp" id="minTemp">—°C min</div>
          </div>
        </div>
      </div>

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

      <div>
        <div class="hourly-title">Hourly Temperature</div>
        <div class="hourly" id="hourlyRow"></div>
      </div>

      <div class="footer-note">Data via Open-Meteo</div>
    </div>

  </div>
</div>

<script>
(function(){
  function qp(name, def){
    const v = new URLSearchParams(location.search).get(name);
    return (v === null || v === '') ? def : v;
  }
  function todayUTC(){
    const d = new Date();
    return d.getUTCFullYear() + '-' + String(d.getUTCMonth()+1).padStart(2,'0') + '-' + String(d.getUTCDate()).padStart(2,'0');
  }

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

  document.getElementById('locationName').textContent = name;

  const dObj = new Date(dateStr + 'T00:00:00Z');
  const dateFmt = isNaN(dObj.getTime()) ? dateStr : dObj.toLocaleDateString('en-US', {
    weekday:'long', year:'numeric', month:'long', day:'numeric', timeZone:'UTC'
  });
  document.getElementById('dateLabel').textContent = dateFmt;

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

  function iconSVG(kind){
    const c = 'var(--accent)';
    switch(kind){
      case 'sun':
        return `<circle cx="50" cy="50" r="20" fill="#ffd166"/>
          ${Array.from({length:8}).map((_,i)=>{
            const a = i*45*Math.PI/180;
            const x1=50+28*Math.cos(a), y1=50+28*Math.sin(a);
            const x2=50+40*Math.cos(a), y2=50+40*Math.sin(a);
            return `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="#ffd166" stroke-width="4" stroke-linecap="round"/>`;
          }).join('')}`;
      case 'cloud-sun':
        return `<circle cx="38" cy="40" r="16" fill="#ffd166"/>
          <ellipse cx="55" cy="60" rx="30" ry="18" fill="#e8ecf5"/>
          <ellipse cx="35" cy="65" rx="20" ry="14" fill="#e8ecf5"/>`;
      case 'cloud':
        return `<ellipse cx="55" cy="58" rx="32" ry="19" fill="#e8ecf5"/>
          <ellipse cx="32" cy="62" rx="20" ry="15" fill="#d6dcea"/>`;
      case 'fog':
        return `${[35,50,65,80].map((y,i)=>`<rect x="${15+((i%2)*5)}" y="${y}" width="${70-((i%2)*10)}" height="6" rx="3" fill="#dfe4ef" opacity="${0.9-i*0.1}"/>`).join('')}`;
      case 'rain':
        return `<ellipse cx="52" cy="42" rx="28" ry="17" fill="#d6dcea"/>
          ${[30,50,70].map(x=>`<line x1="${x}" y1="62" x2="${x-8}" y2="82" stroke="#7fb3ff" stroke-width="4" stroke-linecap="round"/>`).join('')}`;
      case 'snow':
        return `<ellipse cx="52" cy="42" rx="28" ry="17" fill="#e8ecf5"/>
          ${[30,50,70].map(x=>`<circle cx="${x}" cy="75" r="4" fill="#ffffff"/>`).join('')}`;
      case 'storm':
        return `<ellipse cx="52" cy="40" rx="28" ry="17" fill="#8a94ad"/>
          <polygon points="52,58 42,78 52,78 46,94 66,68 54,68" fill="#ffd166"/>`;
      default:
        return `<circle cx="50" cy="50" r="24" fill="#e8ecf5"/>`;
    }
  }

  function setIcon(code){
    const entry = WMO[code] || ['Unknown', 'cloud'];
    document.getElementById('weatherIcon').innerHTML = iconSVG(entry[1]);
    return entry[0];
  }

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

  function buildHourly(hourlyTimes, hourlyTemps, targetDate){
    const row = document.getElementById('hourlyRow');
    row.innerHTML = '';
    const pairs = [];
    for(let i=0;i<hourlyTimes.length;i++){
      if(hourlyTimes[i].slice(0,10) === targetDate){
        pairs.push([hourlyTimes[i], hourlyTemps[i]]);
      }
    }
    if(pairs.length === 0) return;
    const vals = pairs.map(p=>p[1]).filter(v=>v!==null && v!==undefined);
    const min = Math.min(...vals), max = Math.max(...vals);
    const range = Math.max(max-min, 1);
    pairs.forEach(([t,v])=>{
      const hour = t.slice(11,13);
      const heightPct = v===null ? 0 : 10 + ((v-min)/range)*60;
      const div = document.createElement('div');
      div.className = 'hour';
      div.innerHTML = `
        <div class="t">${v===null?'–':Math.round(v)+'°'}</div>
        <div class="bar-wrap"><div class="bar" style="height:${heightPct}px"></div></div>
        <div class="lbl">${hour}:00</div>
      `;
      row.appendChild(div);
    });
  }

  async function load(){
    if(isNaN(lat) || isNaN(lon) || isNaN(dObj.getTime())){
      showError('Invalid location or date parameters.');
      return;
    }

    const todayStr = todayUTC();
    const isPast = dateStr < todayStr;
    const base = isPast ? '/api/om/archive' : '/api/om/forecast';

    const 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
    });

    try{
      const res = await fetch(`${base}?${params.toString()}`);
      if(!res.ok){
        throw new Error('Request failed with status ' + res.status);
      }
      const data = await res.json();

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

      const idx = data.daily.time.indexOf(dateStr);
      const dayIdx = idx === -1 ? 0 : idx;

      const tmax = data.daily.temperature_2m_max ? data.daily.temperature_2m_max[dayIdx] : null;
      const tmin = data.daily.temperature_2m_min ? data.daily.temperature_2m_min[dayIdx] : null;
      const code = data.daily.weather_code ? data.daily.weather_code[dayIdx] : null;

      if(tmax === null || tmax === undefined || tmin === null || tmin === undefined){
        throw new Error('Incomplete weather data for this date.');
      }

      const condition = setIcon(code);
      document.getElementById('conditionText').textContent = condition;
      document.getElementById('maxTemp').innerHTML = Math.round(tmax) + '<sup>°C</sup>';
      document.getElementById('minTemp').textContent = Math.round(tmin) + '°C min';

      if(data.hourly && Array.isArray(data.hourly.time)){
        buildHourly(data.hourly.time, data.hourly.temperature_2m, dateStr);
      }

      document.getElementById('loadingState').classList.add('hidden');
      document.getElementById('content').classList.remove('hidden');
    }catch(err){
      showError('Unable to load weather data: ' + err.message);
    }
  }

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