qwen3.7-max · go

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    width: 100%; height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
    color: #f4f6fb;
    overflow: hidden;
  }
  body {
    background: radial-gradient(ellipse at 20% 10%, #3a4a7a 0%, #141a2e 45%, #0a0e1c 100%);
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 40px;
    position: relative;
  }
  body::before {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 80% 20%, rgba(120,160,255,0.15), transparent 50%),
      radial-gradient(circle at 15% 85%, rgba(255,180,120,0.08), transparent 55%);
    pointer-events: none;
  }
  .card {
    position: relative;
    width: 100%; max-width: 1180px;
    min-height: 640px;
    background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 28px;
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    box-shadow:
      0 30px 80px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.08);
    padding: 44px 48px;
    display: grid;
    grid-template-columns: 1.1fr 1.4fr;
    gap: 40px;
    overflow: hidden;
  }
  .card::after {
    content: "";
    position: absolute;
    top: -40%; right: -10%;
    width: 520px; height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent, rgba(120,160,255,0.35)), transparent 60%);
    filter: blur(30px);
    pointer-events: none;
    z-index: 0;
  }
  .left, .right { position: relative; z-index: 1; }
  .location {
    font-size: 14px; font-weight: 500;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(244,246,251,0.65);
    display: flex; align-items: center; gap: 10px;
  }
  .location .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #7bd4ff; box-shadow: 0 0 12px #7bd4ff;
  }
  .date {
    margin-top: 14px;
    font-size: 22px; font-weight: 300;
    color: #e4e8f3;
  }
  .date .weekday { font-weight: 600; color: #fff; }
  .hero {
    margin-top: 48px;
    display: flex; align-items: flex-start; gap: 14px;
  }
  .hero .icon { font-size: 88px; line-height: 1; filter: drop-shadow(0 6px 20px rgba(0,0,0,0.35)); }
  .hero .temp {
    font-size: 108px; font-weight: 200;
    letter-spacing: -4px; line-height: 0.9;
    color: #fff;
  }
  .hero .temp sup {
    font-size: 34px; font-weight: 300;
    letter-spacing: 0; margin-left: 4px;
    color: rgba(244,246,251,0.7);
  }
  .condition {
    margin-top: 18px;
    font-size: 22px; font-weight: 400;
    color: #e9ecf5;
  }
  .minmax {
    margin-top: 28px;
    display: flex; gap: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .mm-item .lbl {
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(244,246,251,0.55);
  }
  .mm-item .val {
    margin-top: 6px;
    font-size: 26px; font-weight: 300;
    color: #fff;
  }
  .mm-item .val span { color: rgba(244,246,251,0.45); font-size: 18px; margin-right: 4px; }
  .right h3 {
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.22em;
    color: rgba(244,246,251,0.6); font-weight: 500;
    margin-bottom: 16px;
  }
  .chart-wrap {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 24px 20px 16px;
  }
  .chart-svg { width: 100%; height: 260px; display: block; }
  .hourly-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
  }
  .hour-cell {
    text-align: center;
    padding: 10px 4px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    transition: background 0.2s;
  }
  .hour-cell:hover { background: rgba(255,255,255,0.08); }
  .hour-cell .h {
    font-size: 11px; color: rgba(244,246,251,0.55);
    letter-spacing: 0.08em;
  }
  .hour-cell .ic { font-size: 16px; margin: 4px 0; }
  .hour-cell .t { font-size: 14px; font-weight: 500; color: #fff; }
  .error {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 12px;
    z-index: 2;
  }
  .error .em { font-size: 48px; }
  .error .msg { font-size: 18px; color: #ffb4b4; }
  .error .sub { font-size: 13px; color: rgba(255,180,180,0.7); }
  .loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; }
  .spinner {
    width: 44px; height: 44px;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: #7bd4ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .hidden { display: none !important; }
  .axis-label {
    font-size: 10px; fill: rgba(244,246,251,0.45);
    font-family: inherit;
  }
  .grid-line { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
</style>
</head>
<body>
  <div class="card" id="card" style="--accent: rgba(120,170,255,0.35);">
    <div class="loading" id="loading"><div class="spinner"></div></div>
    <div class="error hidden" id="error">
      <div class="em">⚠️</div>
      <div class="msg">Weather data could not be loaded</div>
      <div class="sub" id="errMsg"></div>
    </div>

    <div class="left hidden" id="left">
      <div class="location"><span class="dot"></span><span id="locName">Berlin</span></div>
      <div class="date"><span class="weekday" id="weekday">—</span> · <span id="dateStr">—</span></div>
      <div class="hero">
        <div class="icon" id="bigIcon">☀️</div>
        <div class="temp"><span id="bigTemp">—</span><sup>°C</sup></div>
      </div>
      <div class="condition" id="condition">—</div>
      <div class="minmax">
        <div class="mm-item"><div class="lbl">Maximum</div><div class="val"><span>↑</span><span id="tMax">—</span>°</div></div>
        <div class="mm-item"><div class="lbl">Minimum</div><div class="val"><span>↓</span><span id="tMin">—</span>°</div></div>
      </div>
    </div>

    <div class="right hidden" id="right">
      <h3>Hourly temperatures</h3>
      <div class="chart-wrap">
        <svg class="chart-svg" id="chart" viewBox="0 0 700 260" preserveAspectRatio="none"></svg>
      </div>
      <div class="hourly-grid" id="hourlyGrid"></div>
    </div>
  </div>

<script>
(() => {
  const WMO = {
    0:  ['Clear sky','☀️','rgba(255,200,120,0.35)'],
    1:  ['Mainly clear','🌤️','rgba(255,210,140,0.32)'],
    2:  ['Partly cloudy','⛅','rgba(200,220,255,0.30)'],
    3:  ['Overcast','☁️','rgba(180,200,230,0.28)'],
    45: ['Fog','🌫️','rgba(200,210,220,0.30)'],
    48: ['Rime fog','🌫️','rgba(200,210,220,0.30)'],
    51: ['Light drizzle','🌦️','rgba(140,190,230,0.35)'],
    53: ['Drizzle','🌦️','rgba(140,190,230,0.35)'],
    55: ['Dense drizzle','🌧️','rgba(120,170,220,0.40)'],
    56: ['Freezing drizzle','🌧️','rgba(160,200,240,0.35)'],
    57: ['Freezing drizzle','🌧️','rgba(160,200,240,0.35)'],
    61: ['Light rain','🌦️','rgba(120,170,220,0.40)'],
    63: ['Rain','🌧️','rgba(100,160,220,0.45)'],
    65: ['Heavy rain','🌧️','rgba(80,140,210,0.50)'],
    66: ['Freezing rain','🌧️','rgba(120,170,220,0.45)'],
    67: ['Freezing rain','🌧️','rgba(120,170,220,0.45)'],
    71: ['Light snow','🌨️','rgba(220,235,255,0.35)'],
    73: ['Snow','❄️','rgba(200,225,255,0.40)'],
    75: ['Heavy snow','❄️','rgba(180,215,255,0.45)'],
    77: ['Snow grains','❄️','rgba(210,230,255,0.35)'],
    80: ['Light showers','🌦️','rgba(120,180,225,0.40)'],
    81: ['Showers','🌧️','rgba(100,170,220,0.45)'],
    82: ['Violent showers','⛈️','rgba(80,140,210,0.55)'],
    85: ['Snow showers','🌨️','rgba(210,230,255,0.40)'],
    86: ['Snow showers','🌨️','rgba(200,225,255,0.45)'],
    95: ['Thunderstorm','⛈️','rgba(120,110,180,0.45)'],
    96: ['Thunderstorm w/ hail','⛈️','rgba(140,120,200,0.50)'],
    99: ['Thunderstorm w/ hail','⛈️','rgba(140,120,200,0.55)'],
  };

  const params = new URLSearchParams(location.search);
  const lat = parseFloat(params.get('lat')) || 52.52;
  const lon = parseFloat(params.get('lon')) || 13.405;
  const name = params.get('name') || 'Berlin';
  const todayUTC = new Date().toISOString().slice(0,10);
  const date = params.get('date') || todayUTC;

  document.getElementById('locName').textContent = name;
  const d = new Date(date + 'T00:00:00Z');
  const weekdays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
  const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
  document.getElementById('weekday').textContent = weekdays[d.getUTCDay()];
  document.getElementById('dateStr').textContent = `${d.getUTCDate()} ${months[d.getUTCMonth()]} ${d.getUTCFullYear()}`;

  const endpoint = (date >= todayUTC) ? '/api/om/forecast' : '/api/om/archive';
  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,
  });

  function showError(msg) {
    document.getElementById('loading').classList.add('hidden');
    document.getElementById('error').classList.remove('hidden');
    document.getElementById('errMsg').textContent = msg || '';
  }

  function catmull(points, tension = 0.5) {
    // Convert points to smooth SVG path
    if (points.length < 2) return '';
    let d = `M ${points[0].x},${points[0].y}`;
    for (let i = 0; i < points.length - 1; i++) {
      const p0 = points[i - 1] || points[i];
      const p1 = points[i];
      const p2 = points[i + 1];
      const p3 = points[i + 2] || p2;
      const cp1x = p1.x + (p2.x - p0.x) / 6 / tension;
      const cp1y = p1.y + (p2.y - p0.y) / 6 / tension;
      const cp2x = p2.x - (p3.x - p1.x) / 6 / tension;
      const cp2y = p2.y - (p3.y - p1.y) / 6 / tension;
      d += ` C ${cp1x},${cp1y} ${cp2x},${cp2y} ${p2.x},${p2.y}`;
    }
    return d;
  }

  function fmtT(t) {
    if (t == null || isNaN(t)) return '—';
    return Math.round(t);
  }

  function hourIcon(code, hour) {
    const night = hour < 6 || hour >= 20;
    const w = WMO[code] || WMO[3];
    if (night && (code === 0 || code === 1)) return '🌙';
    if (night && code === 2) return '☁️';
    return w[1];
  }

  fetch(`${endpoint}?${qs.toString()}`)
    .then(r => { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
    .then(data => {
      document.getElementById('loading').classList.add('hidden');
      if (!data || !data.daily || !data.hourly) throw new Error('Invalid response');

      const tMax = data.daily.temperature_2m_max?.[0];
      const tMin = data.daily.temperature_2m_min?.[0];
      const code = data.daily.weather_code?.[0];
      const hourlyT = data.hourly.temperature_2m || [];
      const hourlyTime = data.hourly.time || [];

      const w = WMO[code] ?? WMO[3];
      document.getElementById('bigIcon').textContent = w[1];
      document.getElementById('bigTemp').textContent = fmtT(tMax);
      document.getElementById('condition').textContent = w[0];
      document.getElementById('tMax').textContent = fmtT(tMax);
      document.getElementById('tMin').textContent = fmtT(tMin);
      document.getElementById('card').style.setProperty('--accent', w[2]);

      // Chart
      const W = 700, H = 260, padX = 30, padY = 30;
      const valid = hourlyT.map((v,i) => ({v,i})).filter(o => o.v != null && !isNaN(o.v));
      if (valid.length < 2) throw new Error('No hourly data');
      const minV = Math.min(...valid.map(o=>o.v)) - 1;
      const maxV = Math.max(...valid.map(o=>o.v)) + 1;
      const range = maxV - minV || 1;
      const xStep = (W - padX*2) / (hourlyT.length - 1 || 1);
      const points = hourlyT.map((v,i) => ({
        x: padX + i*xStep,
        y: padY + (1 - (v - minV)/range) * (H - padY*2),
        v
      }));

      const svg = document.getElementById('chart');
      const ns = 'http://www.w3.org/2000/svg';

      // Grid lines
      const gridCount = 4;
      for (let g = 0; g <= gridCount; g++) {
        const y = padY + g * (H - padY*2) / gridCount;
        const line = document.createElementNS(ns,'line');
        line.setAttribute('x1', padX); line.setAttribute('x2', W - padX);
        line.setAttribute('y1', y); line.setAttribute('y2', y);
        line.setAttribute('class','grid-line');
        svg.appendChild(line);
        const v = maxV - g * (maxV - minV) / gridCount;
        const t = document.createElementNS(ns,'text');
        t.setAttribute('x', 6); t.setAttribute('y', y + 3);
        t.setAttribute('class','axis-label');
        t.textContent = Math.round(v) + '°';
        svg.appendChild(t);
      }

      // Gradient defs
      const defs = document.createElementNS(ns,'defs');
      const grad = document.createElementNS(ns,'linearGradient');
      grad.setAttribute('id','areaGrad'); grad.setAttribute('x1','0'); grad.setAttribute('x2','0');
      grad.setAttribute('y1','0'); grad.setAttribute('y2','1');
      const s1 = document.createElementNS(ns,'stop'); s1.setAttribute('offset','0%');
      s1.setAttribute('stop-color','rgba(123,212,255,0.55)');
      const s2 = document.createElementNS(ns,'stop'); s2.setAttribute('offset','100%');
      s2.setAttribute('stop-color','rgba(123,212,255,0)');
      grad.appendChild(s1); grad.appendChild(s2);
      defs.appendChild(grad);

      const lineGrad = document.createElementNS(ns,'linearGradient');
      lineGrad.setAttribute('id','lineGrad'); lineGrad.setAttribute('x1','0'); lineGrad.setAttribute('x2','1');
      lineGrad.setAttribute('y1','0'); lineGrad.setAttribute('y2','0');
      const ls1 = document.createElementNS(ns,'stop'); ls1.setAttribute('offset','0%'); ls1.setAttribute('stop-color','#7bd4ff');
      const ls2 = document.createElementNS(ns,'stop'); ls2.setAttribute('offset','100%'); ls2.setAttribute('stop-color','#b48cff');
      lineGrad.appendChild(ls1); lineGrad.appendChild(ls2);
      defs.appendChild(lineGrad);
      svg.appendChild(defs);

      const pathD = catmull(points);
      const area = document.createElementNS(ns,'path');
      area.setAttribute('d', pathD + ` L ${points[points.length-1].x},${H-padY} L ${points[0].x},${H-padY} Z`);
      area.setAttribute('fill','url(#areaGrad)');
      svg.appendChild(area);

      const path = document.createElementNS(ns,'path');
      path.setAttribute('d', pathD);
      path.setAttribute('fill','none');
      path.setAttribute('stroke','url(#lineGrad)');
      path.setAttribute('stroke-width','2.5');
      path.setAttribute('stroke-linecap','round');
      path.setAttribute('stroke-linejoin','round');
      svg.appendChild(path);

      // Dots & hour labels
      points.forEach((p,i) => {
        if (hourlyT[i] == null) return;
        const c = document.createElementNS(ns,'circle');
        c.setAttribute('cx', p.x); c.setAttribute('cy', p.y); c.setAttribute('r', 3);
        c.setAttribute('fill','#fff');
        c.setAttribute('stroke','#7bd4ff'); c.setAttribute('stroke-width','1.5');
        svg.appendChild(c);

        if (i % 3 === 0) {
          const hr = new Date(hourlyTime[i]).getUTCHours();
          const lbl = document.createElementNS(ns,'text');
          lbl.setAttribute('x', p.x); lbl.setAttribute('y', H - 10);
          lbl.setAttribute('text-anchor','middle');
          lbl.setAttribute('class','axis-label');
          lbl.textContent = String(hr).padStart(2,'0') + ':00';
          svg.appendChild(lbl);

          const tv = document.createElementNS(ns,'text');
          tv.setAttribute('x', p.x); tv.setAttribute('y', p.y - 10);
          tv.setAttribute('text-anchor','middle');
          tv.setAttribute('fill','#fff');
          tv.setAttribute('font-size','11');
          tv.setAttribute('font-family','inherit');
          tv.textContent = Math.round(hourlyT[i]) + '°';
          svg.appendChild(tv);
        }
      });

      // Hourly cells (8 evenly spaced)
      const grid = document.getElementById('hourlyGrid');
      const step = Math.max(1, Math.floor(hourlyT.length / 8));
      for (let i = 0; i < hourlyT.length; i += step) {
        if (grid.children.length >= 8) break;
        const hr = new Date(hourlyTime[i]).getUTCHours();
        const t = hourlyT[i];
        const cell = document.createElement('div');
        cell.className = 'hour-cell';
        cell.innerHTML = `
          <div class="h">${String(hr).padStart(2,'0')}:00</div>
          <div class="ic">${hourIcon(code, hr)}</div>
          <div class="t">${t != null ? Math.round(t) + '°' : '—'}</div>`;
        grid.appendChild(cell);
      }

      document.getElementById('left').classList.remove('hidden');
      document.getElementById('right').classList.remove('hidden');
    })
    .catch(err => {
      console.error(err);
      showError(err.message || 'Unknown error');
    });
})();
</script>
</body>
</html>