glm-5.1 · opencode

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280">
<title>Weather Card</title>
<style>
  :root{
    --bg-start:#0b1226;
    --bg-mid:#16224d;
    --bg-end:#243b6b;
    --card:rgba(255,255,255,0.06);
    --card-border:rgba(255,255,255,0.14);
    --text:#f4f7ff;
    --text-dim:#aebbd6;
    --accent:#6fb3ff;
    --warm:#ffb86b;
    --cool:#6fd0ff;
    --grid:rgba(255,255,255,0.08);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    width:1280px;height:800px;overflow:hidden;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
    color:var(--text);
    background:radial-gradient(120% 120% at 15% 10%, var(--bg-mid) 0%, var(--bg-start) 55%, #060a18 100%);
    display:flex;align-items:center;justify-content:center;
  }
  .card{
    width:1120px;height:680px;
    background:linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
    border:1px solid var(--card-border);
    border-radius:28px;
    backdrop-filter:blur(18px);
    box-shadow:0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
    padding:48px 56px;
    display:flex;flex-direction:column;
    position:relative;overflow:hidden;
  }
  .glow{
    position:absolute;width:520px;height:520px;border-radius:50%;
    background:radial-gradient(circle, rgba(111,179,255,0.18), transparent 70%);
    top:-160px;right:-120px;pointer-events:none;
  }
  .head{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
  .loc{font-size:38px;font-weight:700;letter-spacing:-0.5px}
  .meta{margin-top:8px;font-size:16px;color:var(--text-dim);font-variant-numeric:tabular-nums}
  .coord{font-size:13px;color:var(--text-dim);opacity:0.8;text-align:right;line-height:1.5}
  .main{display:flex;align-items:center;gap:40px;margin-top:34px;position:relative;z-index:1}
  .big{display:flex;align-items:flex-start;gap:6px}
  .big .t{font-size:108px;font-weight:200;line-height:1;letter-spacing:-3px}
  .big .deg{font-size:40px;font-weight:300;margin-top:14px;color:var(--text-dim)}
  .cond{display:flex;flex-direction:column;gap:6px}
  .cond .icon{width:74px;height:74px}
  .cond .text{font-size:20px;font-weight:600;color:var(--text)}
  .cond .sub{font-size:14px;color:var(--text-dim)}
  .hilo{display:flex;gap:28px;margin-top:30px;position:relative;z-index:1}
  .pill{
    display:flex;align-items:center;gap:10px;
    padding:12px 20px;border-radius:14px;
    background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
  }
  .pill .label{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-dim)}
  .pill .val{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
  .pill.max .val{color:var(--warm)}
  .pill.min .val{color:var(--cool)}
  .hourly{margin-top:auto;position:relative;z-index:1}
  .hourly .title{font-size:13px;text-transform:uppercase;letter-spacing:1.4px;color:var(--text-dim);margin-bottom:14px}
  .chart-wrap{position:relative;height:180px}
  svg{width:100%;height:100%;display:block;overflow:visible}
  .ytick{font-size:11px;fill:var(--text-dim);font-variant-numeric:tabular-nums}
  .xtick{font-size:11px;fill:var(--text-dim);font-variant-numeric:tabular-nums;text-anchor:middle}
  .error{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    height:100%;text-align:center;gap:14px;
  }
  .error .big{font-size:24px;font-weight:600;color:var(--text)}
  .error .det{font-size:15px;color:var(--text-dim);max-width:560px}
  .loader{display:flex;align-items:center;justify-content:center;height:100%;gap:14px;color:var(--text-dim);font-size:16px}
  .spin{width:22px;height:22px;border:2.5px solid rgba(255,255,255,0.2);border-top-color:var(--accent);border-radius:50%;animation:sp 0.8s linear infinite}
  @keyframes sp{to{transform:rotate(360deg)}}
  .hidden{display:none!important}
</style>
</head>
<body>
<div class="card">
  <div class="glow"></div>
  <div id="load" class="loader"><div class="spin"></div><span>Loading weather…</span></div>
  <div id="err" class="error hidden">
    <div class="big">Unable to load weather data</div>
    <div class="det" id="errdet"></div>
  </div>
  <div id="content" class="hidden" style="display:flex;flex-direction:column;height:100%;position:relative;z-index:1">
    <div class="head">
      <div>
        <div class="loc" id="loc"></div>
        <div class="meta" id="meta"></div>
      </div>
      <div class="coord" id="coord"></div>
    </div>
    <div class="main">
      <div class="big"><span class="t" id="avg"></span><span class="deg">°C</span></div>
      <div class="cond">
        <svg class="icon" id="cicon" viewBox="0 0 74 74"></svg>
        <div class="text" id="ctext"></div>
        <div class="sub" id="csub"></div>
      </div>
    </div>
    <div class="hilo">
      <div class="pill max"><span class="label">High</span><span class="val" id="tmax"></span></div>
      <div class="pill min"><span class="label">Low</span><span class="val" id="tmin"></span></div>
      <div class="pill"><span class="label">Range</span><span class="val" id="trange"></span></div>
    </div>
    <div class="hourly">
      <div class="title">Hourly temperature · °C</div>
      <div class="chart-wrap"><svg id="chart"></svg></div>
    </div>
  </div>
</div>
<script>
(function(){
  function pad(n){return n<10?'0'+n:''+n}
  function fmtDate(d){
    return d.getFullYear()+'-'+pad(d.getMonth()+1)+'-'+pad(d.getDate());
  }
  var params=new URLSearchParams(location.search);
  var lat=parseFloat(params.get('lat'));
  var lon=parseFloat(params.get('lon'));
  if(isNaN(lat))lat=52.52;
  if(isNaN(lon))lon=13.405;
  var name=params.get('name')||'Berlin';
  var dateStr=params.get('date');
  var today=new Date(Date.now());
  var todayUTC=new Date(Date.UTC(today.getUTCFullYear(),today.getUTCMonth(),today.getUTCDate()));
  var reqDate;
  if(dateStr&&/^\d{4}-\d{2}-\d{2}$/.test(dateStr)){
    var p=dateStr.split('-');
    reqDate=new Date(Date.UTC(+p[0],+p[1]-1,+p[2]));
  }else{
    reqDate=todayUTC;
  }
  var reqStr=fmtDate(reqDate);
  var isArchive=reqDate.getTime()<todayUTC.getTime();
  var endpoint=isArchive?'/api/om/archive':'/api/om/forecast';

  var q=new URLSearchParams({
    latitude:lat.toFixed(4),
    longitude:lon.toFixed(4),
    daily:'temperature_2m_max,temperature_2m_min,weather_code',
    hourly:'temperature_2m',
    timezone:'UTC',
    temperature_unit:'celsius',
    start_date:reqStr,
    end_date:reqStr
  });

  function fail(msg){
    document.getElementById('load').classList.add('hidden');
    document.getElementById('err').classList.remove('hidden');
    document.getElementById('errdet').textContent=msg||'Please check your connection and try again.';
  }

  fetch(endpoint+'?'+q.toString())
    .then(function(r){
      if(!r.ok)throw new Error('HTTP '+r.status);
      return r.json();
    })
    .then(function(d){
      if(!d||!d.daily)throw new Error('Malformed response');
      render(d);
    })
    .catch(function(e){
      fail('Request to '+endpoint+' failed: '+(e&&e.message?e.message:'unknown error'));
    });

  var WMO={
    0:['Clear sky','clear'],
    1:['Mainly clear','clear'],2:['Partly cloudy','partly'],3:['Overcast','cloudy'],
    45:['Fog','fog'],48:['Depositing rime fog','fog'],
    51:['Light drizzle','drizzle'],53:['Moderate drizzle','drizzle'],55:['Dense drizzle','drizzle'],
    56:['Freezing drizzle','sleet'],57:['Freezing dense drizzle','sleet'],
    61:['Slight rain','rain'],63:['Moderate rain','rain'],65:['Heavy rain','rain'],
    66:['Freezing rain','sleet'],67:['Freezing heavy rain','sleet'],
    71:['Slight snow','snow'],73:['Moderate snow','snow'],75:['Heavy snow','snow'],
    77:['Snow grains','snow'],
    80:['Slight rain showers','rain'],81:['Moderate rain showers','rain'],82:['Violent rain showers','rain'],
    85:['Slight snow showers','snow'],86:['Violent snow showers','snow'],
    95:['Thunderstorm','storm'],96:['Thunderstorm slight hail','storm'],99:['Thunderstorm heavy hail','storm']
  };

  function iconSVG(kind){
    var defs={name:'g',children:[]};
    var sun=function(cx,cy,r){return '<circle cx="'+cx+'" cy="'+cy+'" r="'+r+'" fill="#ffd76a"/>'+
      [0,45,90,135,180,225,270,315].map(function(a){
        var rad=a*Math.PI/180;
        var x1=cx+Math.cos(rad)*(r+6),y1=cy+Math.sin(rad)*(r+6);
        var x2=cx+Math.cos(rad)*(r+13),y2=cy+Math.sin(rad)*(r+13);
        return '<line x1="'+x1.toFixed(1)+'" y1="'+y1.toFixed(1)+'" x2="'+x2.toFixed(1)+'" y2="'+y2.toFixed(1)+'" stroke="#ffd76a" stroke-width="2.5" stroke-linecap="round"/>';
      }).join('');};
    var cloud=function(dx,dy,fill){return '<path d="M'+(14+dx)+' '+(44+dy)+' a12 12 0 0 1 6 -22 a14 14 0 0 1 27 4 a11 11 0 0 1 -3 22 z" fill="'+fill+'"/>';};
    var rain=function(){return '<g stroke="#6fb3ff" stroke-width="2.5" stroke-linecap="round">'+
      '<line x1="28" y1="52" x2="24" y2="62"/>'+
      '<line x1="38" y1="52" x2="34" y2="62"/>'+
      '<line x1="48" y1="52" x2="44" y2="62"/><line x1="58" y1="52" x2="54" y2="62"/></g>';};
    var snow=function(){return '<g fill="#cfeaff">'+
      '<circle cx="28" cy="58" r="2.4"/><circle cx="40" cy="62" r="2.4"/><circle cx="52" cy="58" r="2.4"/><circle cx="60" cy="64" r="2.4"/></g>';};
    var bolt=function(){return '<path d="M40 48 L30 64 L38 64 L32 76 L48 56 L40 56 L46 46 Z" fill="#ffd76a" stroke="#ffb86b" stroke-width="1"/>';};
    var body='';
    if(kind==='clear'){body=sun(37,37,16);}
    else if(kind==='partly'){body=sun(28,28,12)+cloud(8,6,'rgba(255,255,255,0.85)');}
    else if(kind==='cloudy'){body=cloud(4,4,'rgba(200,210,230,0.85)')+cloud(-6,10,'rgba(255,255,255,0.9)');}
    else if(kind==='fog'){body=cloud(0,0,'rgba(210,220,240,0.7)')+'<g stroke="#aebbd6" stroke-width="3" stroke-linecap="round"><line x1="18" y1="52" x2="56" y2="52"/><line x1="22" y1="60" x2="52" y2="60"/><line x1="18" y1="68" x2="58" y2="68"/></g>';}
    else if(kind==='drizzle'){body=cloud(2,0,'rgba(200,210,230,0.9)')+'<g stroke="#8fb8ff" stroke-width="2" stroke-linecap="round"><line x1="30" y1="52" x2="27" y2="59"/><line x1="44" y1="52" x2="41" y2="59"/></g>';}
    else if(kind==='rain'){body=cloud(2,0,'rgba(200,210,230,0.9)')+rain();}
    else if(kind==='sleet'){body=cloud(2,0,'rgba(200,210,230,0.9)')+rain()+'<circle cx="55" cy="62" r="2.4" fill="#cfeaff"/>';}
    else if(kind==='snow'){body=cloud(2,0,'rgba(210,225,245,0.9)')+snow();}
    else if(kind==='storm'){body=cloud(2,0,'rgba(170,180,205,0.95)')+bolt();}
    else{body=cloud(2,0,'rgba(200,210,230,0.9)');}
    return '<g>'+body+'</g>';
  }

  function render(d){
    var dl=d.daily;
    var f=function(i){return i==null?'':(''+i);};
    var tmax=dl.temperature_2m_max[0];
    var tmin=dl.temperature_2m_min[0];
    var code=dl.weather_code[0];
    var info=WMO[code]||['Unknown','cloudy'];
    var hours=d.hourly.time;
    var temps=d.hourly.temperature_2m;
    var valid=[];
    for(var i=0;i<hours.length;i++){
      var h=new Date(hours[i]+'Z').getUTCHours();
      if(typeof temps[i]==='number')valid.push({h:h,t:temps[i]});
    }
    var avg=valid.length?valid.reduce(function(s,v){return s+v.t;},0)/valid.length:NaN;

    document.getElementById('loc').textContent=name;
    document.getElementById('meta').textContent=reqStr+' · UTC';
    document.getElementById('coord').innerHTML='lat '+lat.toFixed(2)+'<br>lon '+lon.toFixed(2);
    document.getElementById('avg').textContent=isNaN(avg)?'–':Math.round(avg*10)/10;
    document.getElementById('tmax').textContent=(tmax==null?'–':(Math.round(tmax*10)/10+'°'));
    document.getElementById('tmin').textContent=(tmin==null?'–':(Math.round(tmin*10)/10+'°'));
    document.getElementById('trange').textContent=(tmax==null||tmin==null?'–':(Math.round((tmax-tmin)*10)/10+'°'));
    document.getElementById('cicon').innerHTML=iconSVG(info[1]);
    document.getElementById('ctext').textContent=info[0];
    document.getElementById('csub').textContent=isNaN(avg)?'':'avg '+Math.round(avg*10)/10+'°C';

    drawChart(valid);
    document.getElementById('load').classList.add('hidden');
    document.getElementById('content').classList.remove('hidden');
  }

  function drawChart(valid){
    var svg=document.getElementById('chart');
    if(!valid.length){svg.innerHTML='<text x="500" y="90" class="xtick">No hourly data</text>';return;}
    var W=1024,H=180,mL=44,mR=12,mT=16,mB=28;
    var pw=W-mL-mR,ph=H-mT-mB;
    var ts=valid.map(function(v){return v.t;});
    var lo=Math.min.apply(null,ts),hi=Math.max.apply(null,ts);
    if(hi-lo<4){hi+=1;lo-=1;}
    var yFor=function(t){return mT+ph-((t-lo)/(hi-lo))*ph;};
    var xFor=function(i){return mL+(valid.length<=1?0:(i/(valid.length-1))*pw);};
    var pts=valid.map(function(v,i){return [xFor(i),yFor(v.t)];});
    var linePath=pts.map(function(p,i){return (i?'L':'M')+p[0].toFixed(1)+' '+p[1].toFixed(1);}).join(' ');
    var areaPath=linePath+' L'+pts[pts.length-1][0].toFixed(1)+' '+(mT+ph)+' L'+pts[0][0].toFixed(1)+' '+(mT+ph)+' Z';
    var y5=5;
    var ticks=[];for(var i=0;i<=y5;i++){ticks.push(lo+(hi-lo)*i/y5);}
    var grid=ticks.map(function(t){return '<line x1="'+mL+'" y1="'+yFor(t).toFixed(1)+'" x2="'+(W-mR)+'" y2="'+yFor(t).toFixed(1)+'" stroke="rgba(255,255,255,0.06)" />'+
      '<text x="'+(mL-8)+'" y="'+(yFor(t)+4).toFixed(1)+'" class="ytick" text-anchor="end">'+Math.round(t)+'°</text>';}).join('');
    var step=valid.length<=12?1:Math.ceil(valid.length/12);
    var xlab=valid.map(function(v,i){if(i%step!==0&&i!==valid.length-1)return'';return '<text x="'+xFor(i).toFixed(1)+'" y="'+(H-8)+'" class="xtick">'+pad(v.h)+'</text>';}).join('');
    var dots=pts.map(function(p,i){return '<circle cx="'+p[0].toFixed(1)+'" cy="'+p[1].toFixed(1)+'" r="3.2" fill="#6fb3ff" stroke="#0b1226" stroke-width="1.5"/>';}).join('');
    var defs='<defs><linearGradient id="fill" x1="0" y1="0" x2="0" y2="1">'+
      '<stop offset="0%" stop-color="rgba(111,179,255,0.45)"/>'+
      '<stop offset="100%" stop-color="rgba(111,179,255,0.02)"/></linearGradient></defs>';
    svg.setAttribute('viewBox','0 0 '+W+' '+H);
    svg.innerHTML=defs+grid+'<path d="'+areaPath+'" fill="url(#fill)"/>'+
      '<path d="'+linePath+'" fill="none" stroke="#6fb3ff" stroke-width="2.4" stroke-linejoin="round" stroke-linecap="round"/>'+
      dots+xlab;
  }
})();
</script>
</body>
</html>