claude-opus-4-7-thinking @ low · cursor-xl

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1280" />
<title>Weather</title>
<style>
  *,*::before,*::after{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    min-height:100vh;
    font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;
    color:#0f172a;
    background:
      radial-gradient(1000px 600px at 12% -10%, #ffe6b0 0%, transparent 60%),
      radial-gradient(900px 700px at 110% 10%, #b6d8ff 0%, transparent 55%),
      linear-gradient(160deg,#eaf2ff 0%,#f7f4ee 55%,#fdeedd 100%);
    -webkit-font-smoothing:antialiased;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px 24px;
  }
  .card{
    width:1120px;
    background:rgba(255,255,255,0.72);
    backdrop-filter:blur(24px) saturate(1.1);
    -webkit-backdrop-filter:blur(24px) saturate(1.1);
    border:1px solid rgba(255,255,255,0.9);
    border-radius:28px;
    box-shadow:
      0 30px 80px -30px rgba(30,58,138,0.35),
      0 8px 24px -12px rgba(15,23,42,0.15),
      inset 0 1px 0 rgba(255,255,255,0.9);
    padding:44px 52px;
  }
  .head{
    display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
    padding-bottom:28px;border-bottom:1px solid rgba(15,23,42,0.08);
  }
  .loc-label{
    font-size:13px;letter-spacing:.14em;text-transform:uppercase;
    color:#64748b;font-weight:600;margin-bottom:6px;
    display:flex;align-items:center;gap:8px;
  }
  .loc-label svg{width:14px;height:14px}
  .name{font-size:44px;font-weight:700;letter-spacing:-0.02em;line-height:1.05;margin:0}
  .date{margin-top:8px;font-size:16px;color:#475569;font-weight:500}
  .coords{font-variant-numeric:tabular-nums;font-size:12px;color:#94a3b8;margin-top:10px;letter-spacing:.02em}

  .main{
    display:grid;grid-template-columns:1.05fr 1fr;gap:56px;
    padding:36px 0 32px;align-items:center;
  }
  .now{display:flex;align-items:center;gap:28px}
  .icon-wrap{
    width:150px;height:150px;flex:none;
    border-radius:32px;
    background:linear-gradient(160deg,#fff 0%,#f1f5ff 100%);
    box-shadow:0 12px 30px -12px rgba(30,58,138,0.25), inset 0 1px 0 #fff;
    display:flex;align-items:center;justify-content:center;
  }
  .icon-wrap svg{width:110px;height:110px}
  .temps{display:flex;flex-direction:column}
  .cond{font-size:22px;font-weight:600;color:#1e293b;margin-bottom:6px}
  .temp-max{font-size:96px;font-weight:700;line-height:0.95;letter-spacing:-0.04em;font-variant-numeric:tabular-nums}
  .temp-max .deg{color:#f59e0b}
  .minmax{display:flex;gap:22px;margin-top:10px;font-size:16px;color:#475569;font-weight:500}
  .minmax .lo{color:#2563eb}
  .minmax .hi{color:#dc2626}
  .minmax span b{font-weight:700;color:#0f172a;font-variant-numeric:tabular-nums}

  .stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .stat{
    background:rgba(255,255,255,0.75);
    border:1px solid rgba(15,23,42,0.06);
    border-radius:18px;padding:16px 18px;
    box-shadow:0 4px 14px -8px rgba(15,23,42,0.15);
  }
  .stat .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#64748b;font-weight:600}
  .stat .v{font-size:22px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
  .stat .v small{font-size:13px;font-weight:600;color:#64748b;margin-left:2px}

  .hourly{padding-top:28px;border-top:1px solid rgba(15,23,42,0.08)}
  .hourly h3{
    margin:0 0 18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
    color:#64748b;font-weight:700;
  }
  .chart{position:relative;height:170px;width:100%}
  .chart svg{width:100%;height:100%;overflow:visible;display:block}
  .hours{
    display:grid;grid-template-columns:repeat(24,1fr);margin-top:10px;
    font-variant-numeric:tabular-nums;font-size:11px;color:#94a3b8;font-weight:600;
  }
  .hours span{text-align:center}
  .hours span.tick{color:#475569}

  .error{
    padding:40px;text-align:center;
    background:#fff5f5;border:1px solid #fecaca;border-radius:18px;
    color:#991b1b;font-weight:600;font-size:16px;
  }
  .footer{margin-top:22px;font-size:11px;color:#94a3b8;text-align:right;letter-spacing:.05em}
</style>
</head>
<body>
<div class="card" id="card">
  <div class="head">
    <div>
      <div class="loc-label">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-7-6.5-7-12a7 7 0 1 1 14 0c0 5.5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>
        <span>Location</span>
      </div>
      <h1 class="name" id="name">—</h1>
      <div class="date" id="date">—</div>
      <div class="coords" id="coords">—</div>
    </div>
    <div style="text-align:right">
      <div class="loc-label" style="justify-content:flex-end">Forecast</div>
      <div style="font-size:15px;color:#475569;font-weight:500;max-width:220px">Daily summary &amp; hourly temperature trend</div>
    </div>
  </div>
  <div id="body">
    <div class="main" id="main" style="opacity:.4">
      <div class="now">
        <div class="icon-wrap" id="icon-wrap"></div>
        <div class="temps">
          <div class="cond" id="cond">Loading…</div>
          <div class="temp-max" id="tmax">—<span class="deg">°</span></div>
          <div class="minmax">
            <span class="hi">High <b id="hi">—°</b></span>
            <span class="lo">Low <b id="lo">—°</b></span>
          </div>
        </div>
      </div>
      <div class="stats">
        <div class="stat"><div class="k">Peak Hour</div><div class="v" id="peak">—</div></div>
        <div class="stat"><div class="k">Coolest Hour</div><div class="v" id="cool">—</div></div>
        <div class="stat"><div class="k">Range</div><div class="v" id="range">—<small>°C</small></div></div>
        <div class="stat"><div class="k">Avg Temp</div><div class="v" id="avg">—<small>°C</small></div></div>
      </div>
    </div>
    <div class="hourly">
      <h3>Hourly Temperature — 24h (UTC)</h3>
      <div class="chart" id="chart"></div>
      <div class="hours" id="hours"></div>
    </div>
  </div>
  <div class="footer">Data · Open-Meteo compatible API</div>
</div>

<script>
(function(){
  const qs = new URLSearchParams(location.search);
  const lat = parseFloat(qs.get('lat') ?? '52.52');
  const lon = parseFloat(qs.get('lon') ?? '13.405');
  const name = qs.get('name') || 'Berlin';
  const today = new Date().toISOString().slice(0,10);
  const date = qs.get('date') || today;

  const WCODES = {
    0:['Clear sky','sun'],
    1:['Mainly clear','sun'],
    2:['Partly cloudy','partly'],
    3:['Overcast','cloud'],
    45:['Fog','fog'],48:['Rime fog','fog'],
    51:['Light drizzle','drizzle'],53:['Drizzle','drizzle'],55:['Dense drizzle','drizzle'],
    56:['Freezing drizzle','drizzle'],57:['Freezing drizzle','drizzle'],
    61:['Light rain','rain'],63:['Rain','rain'],65:['Heavy rain','rain'],
    66:['Freezing rain','rain'],67:['Freezing rain','rain'],
    71:['Light snow','snow'],73:['Snow','snow'],75:['Heavy snow','snow'],77:['Snow grains','snow'],
    80:['Rain showers','rain'],81:['Rain 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 icon(kind){
    const S = (inner)=>`<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">${inner}</svg>`;
    const sun = `<defs><radialGradient id="sg" cx="50%" cy="50%" r="50%"><stop offset="0" stop-color="#fde68a"/><stop offset="1" stop-color="#f59e0b"/></radialGradient></defs><circle cx="60" cy="60" r="26" fill="url(#sg)"/><g stroke="#f59e0b" stroke-width="5" stroke-linecap="round"><line x1="60" y1="14" x2="60" y2="26"/><line x1="60" y1="94" x2="60" y2="106"/><line x1="14" y1="60" x2="26" y2="60"/><line x1="94" y1="60" x2="106" y2="60"/><line x1="27" y1="27" x2="36" y2="36"/><line x1="84" y1="84" x2="93" y2="93"/><line x1="27" y1="93" x2="36" y2="84"/><line x1="84" y1="36" x2="93" y2="27"/></g>`;
    const cloud = `<defs><linearGradient id="cg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#f8fafc"/><stop offset="1" stop-color="#cbd5e1"/></linearGradient></defs><path d="M35 78 Q18 78 18 62 Q18 48 34 46 Q38 30 56 30 Q76 30 80 48 Q98 48 98 64 Q98 78 82 78 Z" fill="url(#cg)" stroke="#94a3b8" stroke-width="2"/>`;
    const partly = `<defs><radialGradient id="sg2" cx="50%" cy="50%" r="50%"><stop offset="0" stop-color="#fde68a"/><stop offset="1" stop-color="#f59e0b"/></radialGradient><linearGradient id="cg2" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#f8fafc"/><stop offset="1" stop-color="#cbd5e1"/></linearGradient></defs><circle cx="42" cy="42" r="20" fill="url(#sg2)"/><g stroke="#f59e0b" stroke-width="4" stroke-linecap="round"><line x1="42" y1="10" x2="42" y2="18"/><line x1="10" y1="42" x2="18" y2="42"/><line x1="20" y1="20" x2="26" y2="26"/><line x1="58" y1="26" x2="64" y2="20"/></g><path d="M45 88 Q30 88 30 74 Q30 62 44 60 Q48 46 64 46 Q82 46 86 62 Q102 62 102 76 Q102 88 88 88 Z" fill="url(#cg2)" stroke="#94a3b8" stroke-width="2"/>`;
    const rain = cloud + `<g stroke="#2563eb" stroke-width="4" stroke-linecap="round"><line x1="42" y1="86" x2="36" y2="102"/><line x1="60" y1="86" x2="54" y2="102"/><line x1="78" y1="86" x2="72" y2="102"/></g>`;
    const drizzle = cloud + `<g fill="#60a5fa"><circle cx="42" cy="94" r="3"/><circle cx="60" cy="98" r="3"/><circle cx="78" cy="94" r="3"/></g>`;
    const snow = cloud + `<g fill="#93c5fd" stroke="#60a5fa" stroke-width="1"><circle cx="42" cy="94" r="4"/><circle cx="60" cy="100" r="4"/><circle cx="78" cy="94" r="4"/></g>`;
    const fog = `<g stroke="#94a3b8" stroke-width="6" stroke-linecap="round"><line x1="20" y1="42" x2="100" y2="42"/><line x1="14" y1="60" x2="106" y2="60"/><line x1="24" y1="78" x2="96" y2="78"/><line x1="30" y1="94" x2="90" y2="94"/></g>`;
    const storm = cloud + `<polygon points="58,80 48,100 60,100 52,116 72,94 60,94 66,80" fill="#f59e0b" stroke="#b45309" stroke-width="1.5"/>`;
    const map = {sun,cloud,partly,rain,drizzle,snow,fog,storm};
    return S(map[kind] || cloud);
  }

  function fmtDate(d){
    try{
      const dt = new Date(d+'T12:00:00Z');
      return dt.toLocaleDateString('en-US',{weekday:'long',year:'numeric',month:'long',day:'numeric',timeZone:'UTC'});
    }catch(e){return d}
  }

  document.getElementById('name').textContent = name;
  document.getElementById('date').textContent = fmtDate(date);
  document.getElementById('coords').textContent = `${lat.toFixed(4)}°, ${lon.toFixed(4)}°`;

  const isPast = date < today;
  const base = isPast ? '/api/om/archive' : '/api/om/forecast';
  const url = `${base}?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}`;

  function showError(msg){
    document.getElementById('body').innerHTML = `<div class="error">Unable to load weather data.<br><span style="font-weight:400;color:#7f1d1d">${msg||''}</span></div>`;
  }

  fetch(url).then(r=>{
    if(!r.ok) throw new Error('HTTP '+r.status);
    return r.json();
  }).then(data=>{
    const d = data.daily, h = data.hourly;
    if(!d || !h || !d.temperature_2m_max || !h.temperature_2m) throw new Error('Malformed response');
    const tmax = d.temperature_2m_max[0], tmin = d.temperature_2m_min[0];
    const code = (d.weather_code && d.weather_code[0]) ?? 3;
    const meta = WCODES[code] || ['Unknown','cloud'];
    document.getElementById('icon-wrap').innerHTML = icon(meta[1]);
    document.getElementById('cond').textContent = meta[0];
    document.getElementById('tmax').innerHTML = `${Math.round(tmax)}<span class="deg">°</span>`;
    document.getElementById('hi').textContent = `${Math.round(tmax)}°`;
    document.getElementById('lo').textContent = `${Math.round(tmin)}°`;

    const temps = h.temperature_2m.slice(0,24);
    const times = h.time.slice(0,24);
    const valid = temps.map(v=>typeof v==='number' && !isNaN(v));
    const clean = temps.filter((v,i)=>valid[i]);
    const maxT = Math.max(...clean), minT = Math.min(...clean);
    const avgT = clean.reduce((a,b)=>a+b,0)/clean.length;
    const peakI = temps.indexOf(maxT), coolI = temps.indexOf(minT);
    const hourOf = (t)=> t ? t.slice(11,16) : '—';
    document.getElementById('peak').innerHTML = `${Math.round(maxT)}°<small> at ${hourOf(times[peakI])}</small>`;
    document.getElementById('cool').innerHTML = `${Math.round(minT)}°<small> at ${hourOf(times[coolI])}</small>`;
    document.getElementById('range').innerHTML = `${Math.round(maxT-minT)}<small>°C</small>`;
    document.getElementById('avg').innerHTML = `${Math.round(avgT)}<small>°C</small>`;

    // chart
    const W = 1016, H = 170, PAD_L = 34, PAD_R = 12, PAD_T = 18, PAD_B = 30;
    const cw = W - PAD_L - PAD_R, ch = H - PAD_T - PAD_B;
    const lo = Math.floor(minT - 1), hi = Math.ceil(maxT + 1);
    const xAt = i => PAD_L + (i/23)*cw;
    const yAt = v => PAD_T + (1 - (v-lo)/(hi-lo))*ch;
    let pts = temps.map((v,i)=> valid[i] ? `${xAt(i).toFixed(1)},${yAt(v).toFixed(1)}` : null).filter(Boolean).join(' ');
    let areaPts = `${PAD_L},${PAD_T+ch} ` + pts + ` ${PAD_L+cw},${PAD_T+ch}`;
    // grid
    const gridN = 4;
    let grid = '';
    for(let i=0;i<=gridN;i++){
      const y = PAD_T + (i/gridN)*ch;
      const val = Math.round(hi - (i/gridN)*(hi-lo));
      grid += `<line x1="${PAD_L}" y1="${y}" x2="${PAD_L+cw}" y2="${y}" stroke="#e2e8f0" stroke-dasharray="2 4"/>`;
      grid += `<text x="${PAD_L-8}" y="${y+4}" font-size="10" fill="#94a3b8" text-anchor="end" font-family="inherit">${val}°</text>`;
    }
    // dots
    let dots = '';
    temps.forEach((v,i)=>{
      if(!valid[i]) return;
      if(i===peakI) dots += `<circle cx="${xAt(i)}" cy="${yAt(v)}" r="5" fill="#dc2626" stroke="#fff" stroke-width="2"/><text x="${xAt(i)}" y="${yAt(v)-12}" text-anchor="middle" font-size="11" font-weight="700" fill="#dc2626" font-family="inherit">${Math.round(v)}°</text>`;
      else if(i===coolI) dots += `<circle cx="${xAt(i)}" cy="${yAt(v)}" r="5" fill="#2563eb" stroke="#fff" stroke-width="2"/><text x="${xAt(i)}" y="${yAt(v)+18}" text-anchor="middle" font-size="11" font-weight="700" fill="#2563eb" font-family="inherit">${Math.round(v)}°</text>`;
    });

    document.getElementById('chart').innerHTML = `
      <svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="none">
        <defs>
          <linearGradient id="fill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stop-color="#fb923c" stop-opacity=".45"/>
            <stop offset="1" stop-color="#fb923c" stop-opacity="0"/>
          </linearGradient>
          <linearGradient id="stroke" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stop-color="#f97316"/>
            <stop offset="1" stop-color="#ef4444"/>
          </linearGradient>
        </defs>
        ${grid}
        <polygon points="${areaPts}" fill="url(#fill)"/>
        <polyline points="${pts}" fill="none" stroke="url(#stroke)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
        ${dots}
      </svg>`;
    let hoursHtml = '';
    for(let i=0;i<24;i++){
      const cls = (i%3===0) ? 'tick' : '';
      hoursHtml += `<span class="${cls}">${(i%3===0)?String(i).padStart(2,'0'):''}</span>`;
    }
    document.getElementById('hours').innerHTML = hoursHtml;
    document.getElementById('main').style.opacity = '1';
  }).catch(err=>{
    showError(err && err.message);
  });
})();
</script>
</body>
</html>