grok-4.6 @ low · api

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    width: 1280px; height: 800px; overflow: hidden;
    font-family: 'Outfit', system-ui, sans-serif;
    background: #0b1220;
    color: #e8eef8;
  }
  body {
    display: flex; align-items: center; justify-content: center;
    background:
      radial-gradient(900px 500px at 15% 10%, rgba(56,189,248,.18), transparent 55%),
      radial-gradient(800px 480px at 90% 80%, rgba(167,139,250,.16), transparent 50%),
      linear-gradient(160deg, #071018 0%, #0e1a2e 55%, #122033 100%);
  }
  .card {
    width: 920px; min-height: 560px;
    border-radius: 28px;
    padding: 40px 44px 36px;
    background: linear-gradient(165deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(18px);
    position: relative;
    overflow: hidden;
  }
  .card::before {
    content: "";
    position: absolute; inset: auto -40px -80px auto;
    width: 280px; height: 280px; border-radius: 50%;
    background: radial-gradient(circle, rgba(125,211,252,.25), transparent 70%);
    pointer-events: none;
  }
  header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
  .place { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; }
  .date { margin-top: 6px; font-size: 16px; color: #9fb0c8; font-weight: 400; }
  .condition {
    text-align: right;
    font-size: 20px; font-weight: 500; color: #d6e4f5;
  }
  .temps {
    display: flex; align-items: flex-end; gap: 28px;
    margin: 36px 0 28px;
  }
  .max { font-size: 92px; font-weight: 700; line-height: .9; letter-spacing: -0.04em; }
  .max span { font-size: 40px; font-weight: 500; vertical-align: super; margin-left: 4px; color: #c9d8ea; }
  .minmax { padding-bottom: 10px; color: #a9bbd0; font-size: 18px; }
  .minmax b { color: #eaf2fb; font-weight: 600; }
  .hours {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
    margin-top: 8px;
  }
  .hour {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    padding: 12px 4px 10px;
    text-align: center;
  }
  .hour .t { font-size: 12px; color: #8ea0b8; margin-bottom: 8px; }
  .hour .v { font-size: 16px; font-weight: 600; }
  .error {
    margin-top: 80px; text-align: center;
    font-size: 22px; color: #fca5a5;
  }
  .sub { margin-top: 8px; color: #93a4b8; font-size: 15px; text-align: center; }
</style>
</head>
<body>
<div class="card" id="root">
  <p class="sub" style="margin-top:180px">Loading weather…</p>
</div>
<script>
(function () {
  const WMO = {
    0: 'Clear sky', 1: 'Mainly clear', 2: 'Partly cloudy', 3: 'Overcast',
    45: 'Fog', 48: 'Depositing rime fog',
    51: 'Light drizzle', 53: 'Moderate drizzle', 55: 'Dense drizzle',
    56: 'Light freezing drizzle', 57: 'Dense freezing drizzle',
    61: 'Slight rain', 63: 'Moderate rain', 65: 'Heavy rain',
    66: 'Light freezing rain', 67: 'Heavy freezing rain',
    71: 'Slight snow', 73: 'Moderate snow', 75: 'Heavy snow', 77: 'Snow grains',
    80: 'Slight rain showers', 81: 'Moderate rain showers', 82: 'Violent rain showers',
    85: 'Slight snow showers', 86: 'Heavy snow showers',
    95: 'Thunderstorm', 96: 'Thunderstorm with hail', 99: 'Thunderstorm with heavy hail'
  };

  function pad(n) { return String(n).padStart(2, '0'); }
  function todayUTC() {
    const d = new Date();
    return d.getUTCFullYear() + '-' + pad(d.getUTCMonth() + 1) + '-' + pad(d.getUTCDate());
  }
  function prettyDate(iso) {
    const [y, m, d] = iso.split('-').map(Number);
    const dt = new Date(Date.UTC(y, m - 1, d));
    return dt.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric', timeZone: 'UTC' });
  }

  const params = new URLSearchParams(location.search);
  const lat = params.get('lat') || '52.52';
  const lon = params.get('lon') || '13.405';
  const name = params.get('name') || 'Berlin';
  const date = params.get('date') || todayUTC();

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

  const root = document.getElementById('root');

  function fail() {
    root.innerHTML = '<div class="error">Weather data could not be loaded.</div><p class="sub">Check the date and try again.</p>';
  }

  fetch(endpoint + '?' + qs.toString())
    .then(function (r) { if (!r.ok) throw new Error('bad'); return r.json(); })
    .then(function (data) {
      if (!data || !data.daily || !data.hourly) throw new Error('shape');
      const max = data.daily.temperature_2m_max[0];
      const min = data.daily.temperature_2m_min[0];
      const code = data.daily.weather_code[0];
      const cond = WMO[code] || ('Code ' + code);
      const times = data.hourly.time || [];
      const temps = data.hourly.temperature_2m || [];
      const hours = [];
      for (let i = 0; i < times.length; i++) {
        if (times[i].slice(0, 10) === date) {
          hours.push({ h: times[i].slice(11, 16), t: temps[i] });
        }
      }
      if (hours.length === 0 && temps.length) {
        for (let i = 0; i < temps.length && i < 24; i++) {
          hours.push({ h: pad(i) + ':00', t: temps[i] });
        }
      }
      const step = hours.length > 12 ? Math.ceil(hours.length / 12) : 1;
      const shown = hours.filter(function (_, i) { return i % step === 0; }).slice(0, 12);

      let hoursHtml = shown.map(function (h) {
        const v = (h.t == null) ? '—' : Math.round(h.t) + '°';
        return '<div class="hour"><div class="t">' + h.h + '</div><div class="v">' + v + '</div></div>';
      }).join('');

      root.innerHTML =
        '<header><div><div class="place">' + escapeHtml(name) + '</div>' +
        '<div class="date">' + prettyDate(date) + '</div></div>' +
        '<div class="condition">' + cond + '</div></header>' +
        '<div class="temps"><div class="max">' + Math.round(max) + '<span>°C</span></div>' +
        '<div class="minmax">High <b>' + Math.round(max) + '°</b> · Low <b>' + Math.round(min) + '°</b></div></div>' +
        '<div class="hours">' + hoursHtml + '</div>';
    })
    .catch(fail);

  function escapeHtml(s) {
    return String(s).replace(/[&<>"']/g, function (c) {
      return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c];
    });
  }
})();
</script>
</body>
</html>