claude-opus-5-5 @ low · CC

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Weather</title>
<style>
  :root{
    --bg1:#0f1c3f; --bg2:#27407a; --card:rgba(255,255,255,0.08); --border:rgba(255,255,255,0.14);
    --text:#f4f6fb; --muted:#aab5d3; --warm:#ffb86b; --cool:#7cc4ff;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
    color:var(--text);
    background:radial-gradient(1200px 700px at 15% 10%, #3a5ba8 0%, transparent 60%),
               radial-gradient(900px 600px at 90% 90%, #6a3f8f 0%, transparent 55%),
               linear-gradient(160deg,var(--bg1),var(--bg2));
    display:flex;align-items:center;justify-content:center;min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  .card{
    width:960px;padding:44px 52px 40px;border-radius:28px;
    background:var(--card);border:1px solid var(--border);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    box-shadow:0 30px 80px rgba(5,10,30,.45), inset 0 1px 0 rgba(255,255,255,.12);
  }
  header{display:flex;justify-content:space-between;align-items:flex-start}
  .loc{font-size:40px;font-weight:700;letter-spacing:-.02em}
  .date{margin-top:6px;color:var(--muted);font-size:17px}
  .coords{margin-top:4px;color:var(--muted);font-size:13px;opacity:.75;font-variant-numeric:tabular-nums}
  .badge{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid var(--border);font-size:13px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
  .main{display:flex;align-items:center;gap:40px;margin:34px 0 30px}
  .icon{font-size:96px;line-height:1;filter:drop-shadow(0 8px 20px rgba(0,0,0,.3))}
  .cond{font-size:28px;font-weight:600}
  .temps{display:flex;gap:28px;margin-top:12px}
  .t{display:flex;flex-direction:column}
  .t .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
  .t .val{font-size:48px;font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .t.max .val{color:var(--warm)} .t.min .val{color:var(--cool)}
  .panel{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:20px 22px 12px}
  .panel h2{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:600;margin-bottom:8px}
  svg text{fill:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
  .state{padding:60px 0;text-align:center;color:var(--muted);font-size:18px}
  .error{color:#ffb3b3}
  .spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;margin:0 auto 16px;animation:spin 1s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
</style>
</head>
<body>
<div class="card" id="card">
  <header>
    <div>
      <div class="loc" id="loc"></div>
      <div class="date" id="date"></div>
      <div class="coords" id="coords"></div>
    </div>
    <div class="badge" id="badge">Loading</div>
  </header>
  <div id="content"><div class="state"><div class="spinner"></div>Loading weather data…</div></div>
</div>
<script>
(function(){
  const p = new URLSearchParams(location.search);
  const num = (v, d) => { const n = parseFloat(v); return isFinite(n) ? n : d; };
  const lat = num(p.get('lat'), 52.52), lon = num(p.get('lon'), 13.405);
  const name = p.get('name') || 'Berlin';
  const today = new Date().toISOString().slice(0,10);
  let date = p.get('date');
  if (!date || !/^\d{4}-\d{2}-\d{2}$/.test(date)) date = today;

  const $ = id => document.getElementById(id);
  $('loc').textContent = name;
  document.title = name + ' · Weather';
  const d = new Date(date + 'T00:00:00Z');
  $('date').textContent = isNaN(d) ? date : d.toLocaleDateString('en-GB',{weekday:'long',day:'numeric',month:'long',year:'numeric',timeZone:'UTC'});
  $('coords').textContent = lat.toFixed(3) + '°, ' + lon.toFixed(3) + '°';

  const WMO = {
    0:['Clear sky','☀️'],1:['Mainly clear','🌤️'],2:['Partly cloudy','⛅'],3:['Overcast','☁️'],
    45:['Fog','🌫️'],48:['Depositing 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:['Rain showers','🌧️'],82:['Violent showers','⛈️'],
    85:['Snow showers','🌨️'],86:['Heavy snow showers','❄️'],
    95:['Thunderstorm','⛈️'],96:['Thunderstorm with hail','⛈️'],99:['Severe thunderstorm with hail','⛈️']
  };

  const archive = date < today;
  $('badge').textContent = archive ? 'Historical' : (date === today ? 'Today' : 'Forecast');
  const qs = new URLSearchParams({
    latitude:lat, longitude:lon,
    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 = (archive ? '/api/om/archive' : '/api/om/forecast') + '?' + qs.toString();

  const fmt = v => (v == null || !isFinite(v)) ? '—' : Math.round(v) + '°';
  const esc = s => String(s).replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));

  function fail(msg){
    $('badge').textContent = 'Unavailable';
    $('content').innerHTML = '<div class="state error">⚠️ Weather data could not be loaded.<br><span style="font-size:14px;color:var(--muted)">' + esc(msg) + '</span></div>';
  }

  fetch(url).then(r => { if(!r.ok) throw new Error('Server responded with ' + r.status); return r.json(); })
  .then(j => {
    if (j.error) throw new Error(j.reason || 'API error');
    const dl = j.daily || {};
    const i = (dl.time || []).indexOf(date);
    if (i < 0) throw new Error('No data for ' + date);
    const max = dl.temperature_2m_max[i], min = dl.temperature_2m_min[i], code = dl.weather_code[i];
    const hr = j.hourly || {};
    const hours = [];
    (hr.time || []).forEach((t,k) => { if (t.slice(0,10) === date) hours.push({h:parseInt(t.slice(11,13),10), v:hr.temperature_2m[k]}); });
    if (max == null && min == null && !hours.some(x => x.v != null)) throw new Error('No data for ' + date);
    const [cond, icon] = WMO[code] || ['Unknown conditions','🌡️'];
    $('content').innerHTML =
      '<div class="main"><div class="icon">' + icon + '</div><div>' +
      '<div class="cond">' + esc(cond) + '</div>' +
      '<div class="temps"><div class="t max"><span class="lbl">High</span><span class="val">' + fmt(max) + 'C</span></div>' +
      '<div class="t min"><span class="lbl">Low</span><span class="val">' + fmt(min) + 'C</span></div></div></div></div>' +
      '<div class="panel"><h2>Hourly temperature (°C, UTC)</h2>' + chart(hours) + '</div>';
  })
  .catch(e => fail(e && e.message ? e.message : 'Network error'));

  function chart(hours){
    const pts = hours.filter(x => x.v != null && isFinite(x.v));
    if (!pts.length) return '<div class="state" style="padding:30px">No hourly data available.</div>';
    const W=856, H=230, L=34, R=14, T=26, B=30;
    let lo = Math.min(...pts.map(x=>x.v)), hi = Math.max(...pts.map(x=>x.v));
    lo = Math.floor(lo) - 1; hi = Math.ceil(hi) + 1;
    const x = h => L + (W-L-R) * h / 23, y = v => T + (H-T-B) * (1 - (v-lo)/(hi-lo));
    let s = '<svg viewBox="0 0 '+W+' '+H+'" width="100%" role="img" aria-label="Hourly temperatures">' +
      '<defs><linearGradient id="ln" x1="0" x2="1"><stop offset="0" stop-color="#7cc4ff"/><stop offset=".55" stop-color="#ffb86b"/><stop offset="1" stop-color="#ff8a8a"/></linearGradient>' +
      '<linearGradient id="ar" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ffb86b" stop-opacity=".35"/><stop offset="1" stop-color="#7cc4ff" stop-opacity="0"/></linearGradient></defs>';
    const step = Math.max(1, Math.ceil((hi-lo)/4));
    for (let v = Math.ceil(lo); v <= hi; v += step){
      s += '<line x1="'+L+'" x2="'+(W-R)+'" y1="'+y(v)+'" y2="'+y(v)+'" stroke="rgba(255,255,255,.08)"/>' +
           '<text x="'+(L-8)+'" y="'+(y(v)+4)+'" text-anchor="end">'+v+'°</text>';
    }
    const line = pts.map((p,k)=>(k?'L':'M')+x(p.h).toFixed(1)+' '+y(p.v).toFixed(1)).join(' ');
    s += '<path d="'+line+' L'+x(pts[pts.length-1].h)+' '+(H-B)+' L'+x(pts[0].h)+' '+(H-B)+' Z" fill="url(#ar)"/>';
    s += '<path d="'+line+'" fill="none" stroke="url(#ln)" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/>';
    pts.forEach(p => {
      s += '<circle cx="'+x(p.h)+'" cy="'+y(p.v)+'" r="3" fill="#fff" opacity=".9"><title>'+String(p.h).padStart(2,'0')+':00 — '+p.v.toFixed(1)+' °C</title></circle>';
      if (p.h % 3 === 0) s += '<text x="'+x(p.h)+'" y="'+(y(p.v)-10)+'" text-anchor="middle" style="fill:#f4f6fb;font-weight:600">'+Math.round(p.v)+'°</text>';
    });
    for (let h = 0; h < 24; h += 3) s += '<text x="'+x(h)+'" y="'+(H-8)+'" text-anchor="middle">'+String(h).padStart(2,'0')+':00</text>';
    return s + '</svg>';
  }
})();
</script>
</body>
</html>