claude-sonnet-5 @ high · cursor

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, initial-scale=1">
<link rel="icon" href="data:,">
<title>Weather</title>
<style>
  :root{
    --grad-a:#7ec8f2;
    --grad-b:#3f8efc;
    --accent:#2f6fed;
    --card-bg: rgba(255,255,255,0.62);
    --card-border: rgba(255,255,255,0.85);
    --text-primary:#1b2333;
    --text-secondary:#5b6478;
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0;
    padding:0;
    width:1280px;
    height:800px;
    overflow:hidden;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  body{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
      radial-gradient(circle at 12% 15%, var(--grad-a), transparent 55%),
      radial-gradient(circle at 88% 85%, var(--grad-b), transparent 55%),
      linear-gradient(135deg, var(--grad-a), var(--grad-b));
    transition: background 0.9s ease;
  }
  .blob{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    transition:background 0.9s ease;
    pointer-events:none;
  }
  .blob1{width:460px;height:460px;top:-140px;left:-120px;background:var(--grad-a);opacity:0.55;}
  .blob2{width:560px;height:560px;bottom:-180px;right:-160px;background:var(--grad-b);opacity:0.55;}
  .blob3{width:260px;height:260px;top:60%;left:78%;background:#ffffff;opacity:0.18;}

  .card{
    position:relative;
    width:1100px;
    min-height:600px;
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:32px;
    box-shadow:0 30px 90px rgba(20,30,60,0.28), inset 0 1px 0 rgba(255,255,255,0.6);
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    padding:44px 52px 36px;
    color:var(--text-primary);
    display:flex;
    flex-direction:column;
    gap:26px;
    animation: rise 0.6s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes rise{
    from{opacity:0; transform:translateY(18px);}
    to{opacity:1; transform:translateY(0);}
  }

  .header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
  }
  .location{
    font-size:36px;
    font-weight:700;
    letter-spacing:-0.02em;
    line-height:1.1;
  }
  .date{
    font-size:16px;
    color:var(--text-secondary);
    margin-top:8px;
    font-weight:500;
  }
  .coords{
    font-size:13px;
    color:var(--text-secondary);
    opacity:0.75;
    text-align:right;
    font-variant-numeric:tabular-nums;
    margin-top:4px;
  }

  .hero{
    display:flex;
    align-items:center;
    gap:34px;
    padding:6px 0;
  }
  .hero-icon{
    width:140px;
    height:140px;
    flex-shrink:0;
    filter:drop-shadow(0 12px 18px rgba(20,30,60,0.18));
  }
  .hero-icon svg{width:100%;height:100%;display:block;}
  .hero-info{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .condition{
    font-size:23px;
    font-weight:600;
  }
  .temps{
    display:flex;
    gap:40px;
    margin-top:10px;
  }
  .temp-block{
    display:flex;
    flex-direction:column;
  }
  .temp-label{
    font-size:12.5px;
    text-transform:uppercase;
    letter-spacing:0.09em;
    color:var(--text-secondary);
    font-weight:700;
  }
  .temp-value{
    font-size:54px;
    font-weight:700;
    letter-spacing:-0.03em;
    line-height:1;
    margin-top:6px;
    font-variant-numeric:tabular-nums;
  }
  .temp-value.high{color:var(--accent);}
  .temp-value small{
    font-size:24px;
    font-weight:600;
    margin-left:2px;
  }

  .hourly{
    margin-top:auto;
    padding-top:18px;
    border-top:1px solid rgba(110,120,150,0.2);
  }
  .hourly-title{
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.09em;
    color:var(--text-secondary);
    margin-bottom:14px;
  }
  .hour-strip{
    display:flex;
    align-items:stretch;
    gap:2px;
    height:170px;
  }
  .hour-item{
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .hour-temp{
    font-size:12px;
    font-weight:700;
    color:var(--text-primary);
    height:16px;
    white-space:nowrap;
  }
  .hour-item.now .hour-temp{color:var(--accent);}
  .hour-bar-wrap{
    flex:1;
    width:100%;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:6px 0;
  }
  .hour-bar{
    width:60%;
    max-width:14px;
    min-height:5px;
    border-radius:5px;
    background:linear-gradient(180deg, var(--accent) 0%, rgba(140,160,200,0.35) 100%);
    opacity:0.55;
    transition:height 0.4s ease;
  }
  .hour-item.now .hour-bar{
    opacity:1;
    background:var(--accent);
  }
  .hour-time{
    font-size:10px;
    color:var(--text-secondary);
    height:14px;
    white-space:nowrap;
  }
  .hour-time.ghost{visibility:hidden;}

  .source-note{
    text-align:right;
    font-size:11px;
    color:var(--text-secondary);
    opacity:0.6;
    margin-top:12px;
  }

  .center-msg{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    color:var(--text-secondary);
    text-align:center;
  }
  .spinner{
    width:38px;
    height:38px;
    border-radius:50%;
    border:3px solid rgba(120,130,160,0.25);
    border-top-color:var(--accent);
    animation:spin 0.8s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  .error-icon{font-size:40px;}
  .error-title{
    font-size:19px;
    font-weight:700;
    color:var(--text-primary);
  }
  .error-detail{font-size:14px; max-width:440px;}
  .no-data{
    color:var(--text-secondary);
    font-size:14px;
    padding:40px 0;
    text-align:center;
    width:100%;
  }
</style>
</head>
<body>
  <div class="blob blob1"></div>
  <div class="blob blob2"></div>
  <div class="blob blob3"></div>
  <div class="card" id="card">
    <div class="center-msg">
      <div class="spinner"></div>
      <div>Loading weather…</div>
    </div>
  </div>

<script>
(function(){
  function qp(key, def){
    var usp = new URLSearchParams(window.location.search);
    var v = usp.get(key);
    return (v === null || v === '') ? def : v;
  }
  function esc(s){
    return String(s).replace(/[&<>"']/g, function(c){
      return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c];
    });
  }
  function round(n){ return Math.round(n); }
  function todayUTC(){
    return new Date().toISOString().slice(0,10);
  }

  var lat = qp('lat', '52.52');
  var lon = qp('lon', '13.405');
  var name = qp('name', 'Berlin');
  var date = qp('date', todayUTC());

  var root = document.documentElement;
  var card = document.getElementById('card');

  var WEATHER_MAP = {
    0:  ['clear',  'Clear sky'],
    1:  ['partly', 'Mainly clear'],
    2:  ['partly', 'Partly cloudy'],
    3:  ['cloudy', 'Overcast'],
    45: ['fog',    'Fog'],
    48: ['fog',    'Depositing rime fog'],
    51: ['rain',   'Light drizzle'],
    53: ['rain',   'Moderate drizzle'],
    55: ['rain',   'Dense drizzle'],
    56: ['rain',   'Light freezing drizzle'],
    57: ['rain',   'Dense freezing drizzle'],
    61: ['rain',   'Slight rain'],
    63: ['rain',   'Moderate rain'],
    65: ['rain',   'Heavy rain'],
    66: ['rain',   'Light freezing rain'],
    67: ['rain',   'Heavy freezing rain'],
    71: ['snow',   'Slight snow fall'],
    73: ['snow',   'Moderate snow fall'],
    75: ['snow',   'Heavy snow fall'],
    77: ['snow',   'Snow grains'],
    80: ['rain',   'Slight rain showers'],
    81: ['rain',   'Moderate rain showers'],
    82: ['rain',   'Violent rain showers'],
    85: ['snow',   'Slight snow showers'],
    86: ['snow',   'Heavy snow showers'],
    95: ['storm',  'Thunderstorm'],
    96: ['storm',  'Thunderstorm with slight hail'],
    99: ['storm',  'Thunderstorm with heavy hail']
  };
  function weatherInfo(code){
    return WEATHER_MAP.hasOwnProperty(code) ? WEATHER_MAP[code] : ['cloudy', 'Unknown conditions'];
  }

  var THEMES = {
    clear:  { a:'#8fd3fe', b:'#3f8efc', accent:'#2f6fed', icon:'sun' },
    partly: { a:'#a7e6ff', b:'#6fa8ff', accent:'#2f80ed', icon:'cloudSun' },
    cloudy: { a:'#c7cfdd', b:'#8a94aa', accent:'#5b6478', icon:'cloud' },
    fog:    { a:'#dde3ea', b:'#b3bcc9', accent:'#7b8494', icon:'fog' },
    rain:   { a:'#9cc0ea', b:'#3a5f8a', accent:'#3568b3', icon:'rain' },
    snow:   { a:'#eaf6ff', b:'#bcd9ee', accent:'#4a90c2', icon:'snow' },
    storm:  { a:'#9099ab', b:'#3a3f4b', accent:'#565c6b', icon:'storm' }
  };

  var ICONS = {
    sun: '<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="22" fill="#FFB020"/><g stroke="#FFB020" stroke-width="6" stroke-linecap="round"><line x1="50" y1="6" x2="50" y2="18"/><line x1="50" y1="82" x2="50" y2="94"/><line x1="6" y1="50" x2="18" y2="50"/><line x1="82" y1="50" x2="94" y2="50"/><line x1="17" y1="17" x2="25" y2="25"/><line x1="75" y1="75" x2="83" y2="83"/><line x1="17" y1="83" x2="25" y2="75"/><line x1="75" y1="25" x2="83" y2="17"/></g></svg>',
    cloud: '<svg viewBox="0 0 100 100"><g fill="#9AA8C2"><ellipse cx="38" cy="58" rx="22" ry="18"/><ellipse cx="58" cy="46" rx="26" ry="24"/><ellipse cx="76" cy="58" rx="16" ry="15"/><rect x="26" y="54" width="56" height="27" rx="13.5"/></g></svg>',
    cloudSun: '<svg viewBox="0 0 100 100"><circle cx="38" cy="36" r="17" fill="#FFB020"/><g stroke="#FFB020" stroke-width="5" stroke-linecap="round"><line x1="38" y1="8" x2="38" y2="16"/><line x1="10" y1="36" x2="18" y2="36"/><line x1="17" y1="15" x2="23" y2="21"/><line x1="59" y1="15" x2="53" y2="21"/></g><g fill="#AEB9CF"><ellipse cx="46" cy="66" rx="20" ry="16"/><ellipse cx="64" cy="56" rx="24" ry="22"/><ellipse cx="81" cy="66" rx="14" ry="13"/><rect x="34" y="63" width="56" height="24" rx="12"/></g></svg>',
    fog: '<svg viewBox="0 0 100 100"><g fill="#B7BFCC"><ellipse cx="40" cy="40" rx="20" ry="14"/><ellipse cx="60" cy="32" rx="22" ry="18"/><rect x="28" y="36" width="50" height="18" rx="9"/></g><g stroke="#9AA6B8" stroke-width="5" stroke-linecap="round"><line x1="16" y1="66" x2="84" y2="66"/><line x1="24" y1="79" x2="76" y2="79"/><line x1="30" y1="92" x2="70" y2="92"/></g></svg>',
    rain: '<svg viewBox="0 0 100 100"><g fill="#8FA6C7"><ellipse cx="38" cy="40" rx="20" ry="16"/><ellipse cx="58" cy="30" rx="24" ry="22"/><ellipse cx="77" cy="42" rx="14" ry="13"/><rect x="26" y="38" width="57" height="22" rx="11"/></g><g stroke="#4C7CC7" stroke-width="6" stroke-linecap="round"><line x1="35" y1="72" x2="29" y2="90"/><line x1="54" y1="72" x2="48" y2="90"/><line x1="73" y1="72" x2="67" y2="90"/></g></svg>',
    snow: '<svg viewBox="0 0 100 100"><g fill="#C7D3E6"><ellipse cx="38" cy="40" rx="20" ry="16"/><ellipse cx="58" cy="30" rx="24" ry="22"/><ellipse cx="77" cy="42" rx="14" ry="13"/><rect x="26" y="38" width="57" height="22" rx="11"/></g><g fill="#6FA8DC"><circle cx="34" cy="80" r="4.5"/><circle cx="54" cy="88" r="4.5"/><circle cx="72" cy="78" r="4.5"/><circle cx="50" cy="70" r="4.5"/></g></svg>',
    storm: '<svg viewBox="0 0 100 100"><g fill="#6B7280"><ellipse cx="38" cy="36" rx="20" ry="15"/><ellipse cx="58" cy="28" rx="24" ry="20"/><ellipse cx="77" cy="38" rx="14" ry="12"/><rect x="26" y="34" width="57" height="20" rx="10"/></g><polygon points="58,54 44,78 54,78 46,96 72,66 60,66 68,54" fill="#F5C518"/></svg>'
  };

  function setTheme(key){
    var t = THEMES[key] || THEMES.cloudy;
    root.style.setProperty('--grad-a', t.a);
    root.style.setProperty('--grad-b', t.b);
    root.style.setProperty('--accent', t.accent);
    return t;
  }

  function formatDateLong(dateStr){
    var d = new Date(dateStr + 'T00:00:00Z');
    if (isNaN(d.getTime())) return dateStr;
    return d.toLocaleDateString('en-US', { weekday:'long', month:'long', day:'numeric', year:'numeric', timeZone:'UTC' });
  }

  function formatHourShort(isoTime){
    var hh = parseInt(isoTime.slice(11,13), 10);
    var ap = hh >= 12 ? 'p' : 'a';
    var h12 = hh % 12; if (h12 === 0) h12 = 12;
    return h12 + ap;
  }

  function buildHourStrip(times, temps){
    if (!temps || !temps.length){
      return '<div class="no-data">No hourly data available</div>';
    }
    var min = Math.min.apply(null, temps);
    var max = Math.max.apply(null, temps);
    var span = max - min;
    var nowKey = new Date().toISOString().slice(0,13);
    var html = '<div class="hour-strip">';
    for (var i = 0; i < temps.length; i++){
      var t = temps[i];
      var pct = span > 0 ? ((t - min) / span) * 88 + 10 : 55;
      var isNow = times[i] && times[i].slice(0,13) === nowKey;
      var showLabel = (i % 3 === 0) || i === temps.length - 1;
      html += '<div class="hour-item' + (isNow ? ' now' : '') + '">';
      html += '<div class="hour-temp">' + round(t) + '\u00B0</div>';
      html += '<div class="hour-bar-wrap"><div class="hour-bar" style="height:' + pct.toFixed(1) + '%"></div></div>';
      html += '<div class="hour-time' + (showLabel ? '' : ' ghost') + '">' + (times[i] ? formatHourShort(times[i]) : '') + '</div>';
      html += '</div>';
    }
    html += '</div>';
    return html;
  }

  function render(data){
    var daily = data.daily || {};
    var hourly = data.hourly || {};
    var code = daily.weather_code ? daily.weather_code[0] : null;
    var tmax = daily.temperature_2m_max ? daily.temperature_2m_max[0] : null;
    var tmin = daily.temperature_2m_min ? daily.temperature_2m_min[0] : null;
    var info = weatherInfo(code);
    var themeKey = info[0], desc = info[1];
    var theme = setTheme(themeKey);
    var icon = ICONS[theme.icon] || ICONS.cloud;

    var times = hourly.time || [];
    var temps = hourly.temperature_2m || [];

    var maxHtml = (tmax === null || tmax === undefined) ? '--' : round(tmax);
    var minHtml = (tmin === null || tmin === undefined) ? '--' : round(tmin);

    card.innerHTML =
      '<div class="header">' +
        '<div>' +
          '<div class="location">' + esc(name) + '</div>' +
          '<div class="date">' + esc(formatDateLong(date)) + '</div>' +
        '</div>' +
        '<div class="coords">' + parseFloat(lat).toFixed(2) + '\u00B0, ' + parseFloat(lon).toFixed(2) + '\u00B0</div>' +
      '</div>' +
      '<div class="hero">' +
        '<div class="hero-icon">' + icon + '</div>' +
        '<div class="hero-info">' +
          '<div class="condition">' + esc(desc) + '</div>' +
          '<div class="temps">' +
            '<div class="temp-block">' +
              '<div class="temp-label">High</div>' +
              '<div class="temp-value high">' + maxHtml + '<small>\u00B0C</small></div>' +
            '</div>' +
            '<div class="temp-block">' +
              '<div class="temp-label">Low</div>' +
              '<div class="temp-value">' + minHtml + '<small>\u00B0C</small></div>' +
            '</div>' +
          '</div>' +
        '</div>' +
      '</div>' +
      '<div class="hourly">' +
        '<div class="hourly-title">Hourly Temperature</div>' +
        buildHourStrip(times, temps) +
      '</div>' +
      '<div class="source-note">Data via Open-Meteo</div>';
  }

  function showError(msg){
    card.innerHTML =
      '<div class="center-msg">' +
        '<div class="error-icon">\u26A0\uFE0F</div>' +
        '<div class="error-title">Unable to load weather data</div>' +
        '<div class="error-detail">' + esc(msg) + '</div>' +
      '</div>';
  }

  function main(){
    var isPast = date < todayUTC();
    var base = isPast ? '/api/om/archive' : '/api/om/forecast';
    var params = 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
    });
    var url = base + '?' + params.toString();

    fetch(url)
      .then(function(res){
        if (!res.ok){
          throw new Error('Request failed with status ' + res.status);
        }
        return res.json();
      })
      .then(function(data){
        if (data && data.error){
          throw new Error(data.reason || 'The weather service returned an error.');
        }
        if (!data || !data.daily || !data.hourly ||
            !Array.isArray(data.daily.temperature_2m_max) || data.daily.temperature_2m_max.length === 0){
          throw new Error('No weather data was returned for this date.');
        }
        render(data);
      })
      .catch(function(err){
        showError(err && err.message ? err.message : 'Something went wrong while fetching weather data.');
      });
  }

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