glm-5.2 · opencode

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, initial-scale=1.0">
<title>Weather Card</title>
<style>
  :root{
    --bg-0:#0b1020;
    --bg-1:#131a32;
    --card:rgba(255,255,255,0.06);
    --card-border:rgba(255,255,255,0.12);
    --text:#f3f6ff;
    --muted:#9aa6c7;
    --accent:#7cc4ff;
    --accent-2:#ffd98a;
    --hot:#ff8a6b;
    --cold:#8ad0ff;
    --grid:rgba(255,255,255,0.08);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--text);
    background:
      radial-gradient(1200px 600px at 15% -10%, #1c2a55 0%, transparent 60%),
      radial-gradient(900px 500px at 110% 120%, #2a1c4a 0%, transparent 55%),
      linear-gradient(160deg, var(--bg-0), var(--bg-1));
    min-height:800px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px;
  }
  .card{
    width:1180px;
    min-height:704px;
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:28px;
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    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;
    gap:32px;
    position:relative;
    overflow:hidden;
  }
  .card::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 85% 15%, rgba(124,196,255,0.10), transparent 45%);
    pointer-events:none;
  }
  header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    position:relative;
    z-index:1;
  }
  .loc{display:flex;flex-direction:column;gap:6px}
  .loc .label{
    font-size:13px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--muted);
    font-weight:600;
  }
  .loc h1{
    font-size:44px;
    font-weight:700;
    letter-spacing:-0.01em;
    display:flex;
    align-items:center;
    gap:16px;
  }
  .loc .date{
    font-size:16px;
    color:var(--muted);
    font-weight:500;
  }
  .glyph{
    width:84px;height:84px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:linear-gradient(145deg, rgba(124,196,255,0.18), rgba(255,217,138,0.10));
    border:1px solid rgba(255,255,255,0.14);
  }
  .glyph svg{width:54px;height:54px;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke:currentColor;stroke-width:2}
  .condition{
    text-align:right;
    display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  }
  .condition .cond{font-size:20px;font-weight:600;color:var(--accent)}
  .condition .sub{font-size:13px;color:var(--muted);letter-spacing:0.06em}

  .metrics{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    position:relative;z-index:1;
  }
  .metric{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:18px;
    padding:22px 26px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
  }
  .metric .k{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .metric .v{font-size:34px;font-weight:700;letter-spacing:-0.01em}
  .metric.max .v{color:var(--hot)}
  .metric.min .v{color:var(--cold)}
  .metric .unit{font-size:16px;color:var(--muted);font-weight:600;margin-left:4px}

  .chart-wrap{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;gap:14px;min-height:260px}
  .chart-wrap .title{
    display:flex;justify-content:space-between;align-items:baseline;
  }
  .chart-wrap .title h2{font-size:16px;font-weight:600;letter-spacing:0.04em}
  .chart-wrap .title .legend{font-size:12px;color:var(--muted)}
  #chart{width:100%;height:240px;display:block}

  .error{
    margin:auto;
    text-align:center;
    padding:48px;
    color:var(--muted);
    font-size:18px;
    max-width:560px;
    line-height:1.55;
  }
  .error strong{display:block;font-size:22px;color:var(--hot);margin-bottom:12px;font-weight:700}
  .spinner{
    margin:auto;
    width:48px;height:48px;
    border-radius:50%;
    border:3px solid rgba(255,255,255,0.12);
    border-top-color:var(--accent);
    animation:spin 0.9s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg)}}
  .hidden{display:none}
  .foot{position:relative;z-index:1;font-size:11px;color:var(--muted);text-align:right;letter-spacing:0.08em}
</style>
</head>
<body>
  <section class="card" id="card">
    <div id="state-loading" class="spinner" role="status" aria-label="Loading weather"></div>

    <div id="state-error" class="error hidden">
      <strong>Couldn't load weather data</strong>
      <span id="error-msg">Please check the URL parameters (lat, lon, name, date) and try again.</span>
    </div>

    <div id="state-ready" class="hidden" style="display:flex;flex-direction:column;gap:32px;height:100%">
      <header>
        <div class="loc">
          <span class="label">Location</span>
          <h1 id="loc-name">—</h1>
          <span class="date" id="loc-date">—</span>
        </div>
        <div class="condition">
          <div class="glyph" id="glyph" aria-hidden="true"></div>
          <div class="cond" id="cond-text">—</div>
          <div class="sub" id="cond-sub"></div>
        </div>
      </header>

      <div class="metrics">
        <div class="metric max">
          <span class="k">High</span>
          <span class="v"><span id="t-max">—</span><span class="unit">°C</span></span>
        </div>
        <div class="metric min">
          <span class="k">Low</span>
          <span class="v"><span id="t-min">—</span><span class="unit">°C</span></span>
        </div>
      </div>

      <div class="chart-wrap">
        <div class="title">
          <h2>Hourly temperature</h2>
          <span class="legend">°C, UTC</span>
        </div>
        <canvas id="chart"></canvas>
      </div>

      <div class="foot">Open-Meteo · same-origin proxy</div>
    </div>
  </section>

<script>
(function(){
  "use strict";

  var params = new URLSearchParams(window.location.search);
  var lat = parseFloat(params.get("lat"));
  var lon = parseFloat(params.get("lon"));
  var name = params.get("name");
  var dateStr = params.get("date");

  if(!isFinite(lat)) lat = 52.52;
  if(!isFinite(lon)) lon = 13.405;
  if(!name) name = "Berlin";

  function todayUTC(){
    var d = new Date();
    var y = d.getUTCFullYear();
    var m = String(d.getUTCMonth()+1).padStart(2,"0");
    var dd = String(d.getUTCDate()).padStart(2,"0");
    return y+"-"+m+"-"+dd;
  }
  if(!dateStr || !/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) dateStr = todayUTC();

  // Determine forecast vs archive: today and future -> forecast, past -> archive.
  var today = todayUTC();
  var endpoint = dateStr >= today ? "/api/om/forecast" : "/api/om/archive";

  var qs = 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: dateStr,
    end_date: dateStr
  }).toString();

  function showError(msg){
    document.getElementById("state-loading").classList.add("hidden");
    var e = document.getElementById("state-error");
    e.classList.remove("hidden");
    if(msg) document.getElementById("error-msg").textContent = msg;
  }

  function showReady(){
    document.getElementById("state-loading").classList.add("hidden");
    document.getElementById("state-ready").classList.remove("hidden");
    document.getElementById("state-ready").style.display = "flex";
  }

  // WMO weather code -> {label, sub, svg}
  function wmo(code){
    var map = {
      0:["Clear sky","Clear conditions dominate"],
      1:["Mainly clear","Mostly clear sky"],
      2:["Partly cloudy","Mixed sun and clouds"],
      3:["Overcast","Cloudy throughout the day"],
      45:["Fog","Visibility reduced by fog"],
      48:["Depositing rime fog","Rime fog in the air"],
      51:["Light drizzle","Light freezing drizzle"],
      53:["Drizzle","Moderate drizzle"],
      55:["Dense drizzle","Intense drizzle"],
      56:["Freezing drizzle","Light freezing drizzle"],
      57:["Freezing drizzle","Dense freezing drizzle"],
      61:["Light rain","Slight rainfall"],
      63:["Rain","Moderate rainfall"],
      65:["Heavy rain","Heavy rainfall"],
      66:["Freezing rain","Light freezing rain"],
      67:["Freezing rain","Heavy freezing rain"],
      71:["Light snow","Slight snowfall"],
      73:["Snow","Moderate snowfall"],
      75:["Heavy snow","Heavy snowfall"],
      77:["Snow grains","Snow grains falling"],
      80:["Rain showers","Slight rain showers"],
      81:["Rain showers","Moderate rain showers"],
      82:["Violent rain showers","Violent rain showers"],
      85:["Snow showers","Slight snow showers"],
      86:["Heavy snow showers","Heavy snow showers"],
      95:["Thunderstorm","Thunderstorm in vicinity"],
      96:["Thunderstorm, hail","Thunderstorm with hail"],
      99:["Severe thunderstorm","Heavy hail thunderstorm"]
    };
    var e = map[code] || ["Unknown","Weather code "+code];
    return {label:e[0], sub:e[1]};
  }

  function svgFor(code){
    if(code <= 1) return '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4.5"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6L17 7M7 17l-1.4 1.4"/></svg>';
    if(code <= 3 || code === 45 || code === 48) return '<svg viewBox="0 0 24 24"><circle cx="8" cy="9" r="3.2"/><path d="M11 12h7a4 4 0 0 0 0-8 5 5 0 0 0-9.6-1.6"/></svg>';
    if((code>=51 && code<=67) || (code>=80 && code<=82)) return '<svg viewBox="0 0 24 24"><path d="M6 12a4 4 0 0 1 4-6 5 5 0 0 1 9 1 3.5 3.5 0 0 1-1 6.9H7a4 4 0 0 1-1-1.9z"/><path d="M9 17l-1 3M13 17l-1 3M17 17l-1 3"/></svg>';
    if((code>=71 && code<=77) || (code>=85 && code<=86)) return '<svg viewBox="0 0 24 24"><path d="M6 11a4 4 0 0 1 4-6 5 5 0 0 1 9 1 3.5 3.5 0 0 1-1 6.9H7a4 4 0 0 1-1-1.9z"/><path d="M9 16l-1 4M13 16l-1 4M17 16l-1 4"/></svg>';
    if(code >= 95) return '<svg viewBox="0 0 24 24"><path d="M6 11a4 4 0 0 1 4-6 5 5 0 0 1 9 1 3.5 3.5 0 0 1-1 6.9H7a4 4 0 0 1-1-1.9z"/><path d="M11 14l-2 6M16 14l-2 6"/></svg>';
    return '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4.5"/></svg>';
  }

  function formatHuman(dateISO){
    var d = new Date(dateISO+"T00:00:00Z");
    if(isNaN(d.getTime())) return dateISO;
    var opts = {weekday:"long", year:"numeric", month:"long", day:"numeric", timeZone:"UTC"};
    return d.toLocaleDateString(undefined, opts) + " · UTC";
  }

  function niceDate(dateISO){
    var d = new Date(dateISO+"T00:00:00Z");
    if(isNaN(d.getTime())) return dateISO;
    var opts = {weekday:"long", year:"numeric", month:"long", day:"numeric", timeZone:"UTC"};
    return d.toLocaleDateString(undefined, opts);
  }

  function drawChart(values){
    var canvas = document.getElementById("chart");
    var ctx = canvas.getContext("2d");
    var dpr = window.devicePixelRatio || 1;
    var w = canvas.clientWidth, h = canvas.clientHeight;
    canvas.width = Math.floor(w*dpr);
    canvas.height = Math.floor(h*dpr);
    ctx.setTransform(dpr,0,0,dpr,0,0);
    ctx.clearRect(0,0,w,h);

    var pad = {l:48, r:24, t:18, b:32};
    var pw = w - pad.l - pad.r;
    var ph = h - pad.t - pad.b;

    var n = values.length;
    if(n < 2) return;

    var min = Math.min.apply(null, values.map(function(v){return v==null?Infinity:v}));
    var max = Math.max.apply(null, values.map(function(v){return v==null?-Infinity:v}));
    if(!isFinite(min)||!isFinite(max)){min=0;max=1;}
    if(min === max){min -= 1; max += 1;}
    var range = max - min;
    var padR = range * 0.15;
    min -= padR; max += padR;

    function x(i){return pad.l + (i/(n-1))*pw;}
    function y(v){return pad.t + (1 - (v-min)/(max-min))*ph;}

    // Grid lines (5 horizontal)
    ctx.strokeStyle = "rgba(255,255,255,0.08)";
    ctx.lineWidth = 1;
    ctx.font = "11px -apple-system, sans-serif";
    ctx.fillStyle = "rgba(154,166,199,0.9)";
    ctx.textAlign = "right";
    ctx.textBaseline = "middle";
    var lines = 5;
    for(var g=0; g<=lines; g++){
      var gv = min + (g/lines)*(max-min);
      var gy = y(gv);
      ctx.beginPath();
      ctx.moveTo(pad.l, gy);
      ctx.lineTo(w - pad.r, gy);
      ctx.stroke();
      ctx.fillText(gv.toFixed(0)+"°", pad.l - 10, gy);
    }

    // X-axis labels (00, 06, 12, 18, 23)
    ctx.textAlign = "center";
    ctx.textBaseline = "top";
    var xlabels = [0,6,12,18,23];
    for(var xi=0; xi<xlabels.length; xi++){
      var hr = xlabels[xi];
      var lx = x(hr);
      ctx.fillStyle = "rgba(154,166,199,0.9)";
      ctx.fillText(String(hr).padStart(2,"0"), lx, h - pad.b + 8);
    }

    // Build a smooth path skipping nulls (but here assuming complete series)
    var pts = [];
    for(var i=0;i<n;i++){
      pts.push({x:x(i), y:y(values[i]), v:values[i]});
    }

    // Area fill
    var grad = ctx.createLinearGradient(0, pad.t, 0, pad.t+ph);
    grad.addColorStop(0, "rgba(124,196,255,0.35)");
    grad.addColorStop(1, "rgba(124,196,255,0.02)");
    ctx.beginPath();
    ctx.moveTo(pts[0].x, pad.t + ph);
    ctx.lineTo(pts[0].x, pts[0].y);
    for(var i=1;i<pts.length;i++){
      var p0 = pts[i-1], p1 = pts[i];
      var cx = (p0.x + p1.x)/2;
      ctx.bezierCurveTo(cx, p0.y, cx, p1.y, p1.x, p1.y);
    }
    ctx.lineTo(pts[pts.length-1].x, pad.t + ph);
    ctx.closePath();
    ctx.fillStyle = grad;
    ctx.fill();

    // Line
    ctx.beginPath();
    ctx.moveTo(pts[0].x, pts[0].y);
    for(var i=1;i<pts.length;i++){
      var p0 = pts[i-1], p1 = pts[i];
      var cx = (p0.x + p1.x)/2;
      ctx.bezierCurveTo(cx, p0.y, cx, p1.y, p1.x, p1.y);
    }
    ctx.strokeStyle = "#7cc4ff";
    ctx.lineWidth = 2.5;
    ctx.lineJoin = "round";
    ctx.stroke();

    // Min/max dots
    var minIdx = 0, maxIdx = 0;
    for(var i=0;i<n;i++){
      if(values[i] < values[minIdx]) minIdx = i;
      if(values[i] > values[maxIdx]) maxIdx = i;
    }
    function dot(idx, color){
      ctx.beginPath();
      ctx.arc(pts[idx].x, pts[idx].y, 4, 0, Math.PI*2);
      ctx.fillStyle = color;
      ctx.fill();
      ctx.strokeStyle = "rgba(11,16,32,0.85)";
      ctx.lineWidth = 2;
      ctx.stroke();
    }
    dot(maxIdx, "#ff8a6b");
    dot(minIdx, "#8ad0ff");

    // Labels near min/max
    function label(idx, color, above){
      ctx.font = "600 12px -apple-system, sans-serif";
      ctx.fillStyle = color;
      ctx.textAlign = "center";
      ctx.textBaseline = above ? "bottom" : "top";
      var ly = pts[idx].y + (above ? -10 : 10);
      ctx.fillText(values[idx].toFixed(1)+"°", pts[idx].x, ly);
    }
    label(maxIdx, "#ff8a6b", true);
    label(minIdx, "#8ad0ff", false);
  }

  function render(data){
    var daily = data.daily || {};
    var dates = daily.time || [];
    var idx = dates.indexOf(dateStr);
    if(idx < 0) idx = 0;
    var tMax = daily.temperature_2m_max ? daily.temperature_2m_max[idx] : null;
    var tMin = daily.temperature_2m_min ? daily.temperature_2m_min[idx] : null;
    var wcode = daily.weather_code ? daily.weather_code[idx] : null;

    var hourly = data.hourly || {};
    var hTimes = hourly.time || [];
    var hVals = hourly.temperature_2m || [];
    var hourValues = [];
    for(var i=0;i<24;i++){
      var want = dateStr + "T" + String(i).padStart(2,"0") + ":00";
      var j = hTimes.indexOf(want);
      if(j >= 0 && hVals[j] != null) hourValues.push(hVals[j]);
      else if(i < hVals.length && hTimes[i] && hTimes[i].indexOf(dateStr) === 0) hourValues.push(hVals[i]);
      else hourValues.push(null);
    }
    // fallback: if not 24-hour aligned, use whatever array aligns by index
    var nonNullCount = hourValues.filter(function(v){return v!=null;}).length;
    if(nonNullCount === 0 && hVals.length >= 1){
      hourValues = [];
      var cnt = Math.min(24, hVals.length);
      for(var k=0;k<cnt;k++) hourValues.push(hVals[k]);
      while(hourValues.length < 24) hourValues.push(hourValues[hourValues.length-1]);
    }

    document.getElementById("loc-name").textContent = name;
    document.getElementById("loc-date").textContent = niceDate(dateStr);

    var cond = wmo(wcode == null ? -1 : wcode);
    document.getElementById("cond-text").textContent = cond.label;
    document.getElementById("cond-sub").textContent = cond.sub;
    document.getElementById("glyph").innerHTML = svgFor(wcode == null ? 2 : wcode);

    document.getElementById("t-max").textContent = (tMax == null ? "—" : tMax.toFixed(1));
    document.getElementById("t-min").textContent = (tMin == null ? "—" : tMin.toFixed(1));

    showReady();

    if(nonNullCount > 0 || hourValues.filter(function(v){return v!=null;}).length > 0){
      var clean = hourValues.map(function(v){return v==null ? 0 : v;});
      drawChart(clean);
    } else {
      var cw = document.querySelector(".chart-wrap");
      cw.querySelector(".title").insertAdjacentHTML("afterend",
        '<div style="color:var(--muted);padding:24px;text-align:center;font-size:14px;">No hourly temperature data available for this date.</div>');
      var cnv = document.getElementById("chart");
      cnv.style.display = "none";
    }
  }

  fetch(endpoint + "?" + qs, {headers:{"Accept":"application/json"}})
    .then(function(r){
      if(!r.ok) throw new Error("HTTP " + r.status);
      return r.json();
    })
    .then(function(data){
      if(!data || (!data.daily && !data.hourly)) throw new Error("Malformed response");
      render(data);
    })
    .catch(function(err){
      showError("The weather service could not be reached for this date and location. (" + (err.message || "network error") + ")");
    });
})();
</script>
</body>
</html>