gpt-6-luna @ xhigh · codex

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#eef2f8">
  <title>Weather</title>
  <style>
    :root {
      color-scheme: light;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: #202943;
      background: #eef2f8;
      font-synthesis: none;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    * { box-sizing: border-box; }

    body {
      min-width: 320px;
      min-height: 100vh;
      margin: 0;
      display: grid;
      place-items: center;
      padding: 48px 28px;
      background:
        radial-gradient(ellipse at 18% 14%, rgba(255, 255, 255, .95) 0, transparent 42%),
        radial-gradient(ellipse at 88% 82%, rgba(210, 223, 246, .6) 0, transparent 38%),
        #eef2f8;
    }

    .weather-card {
      width: min(100%, 1080px);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .85);
      border-radius: 30px;
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 32px 90px rgba(35, 51, 87, .13), 0 3px 12px rgba(35, 51, 87, .04);
    }

    .topbar {
      min-height: 84px;
      padding: 0 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #edf0f5;
    }

    .brand {
      display: flex;
      gap: 12px;
      align-items: center;
      color: #293551;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -.02em;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 11px;
      color: #fff;
      background: linear-gradient(145deg, #688af6, #4266d5);
      box-shadow: 0 5px 12px rgba(74, 107, 220, .25);
    }

    .brand-mark svg { width: 19px; height: 19px; }

    .unit-label {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #8790a5;
      font-size: 12px;
      font-weight: 650;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .unit-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #73c8a6;
      box-shadow: 0 0 0 3px rgba(115, 200, 166, .14);
    }

    .main-content { padding: 38px 48px 44px; }

    .overview {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
      gap: 26px;
    }

    .hero-panel {
      min-height: 300px;
      position: relative;
      overflow: hidden;
      padding: 34px 38px;
      border-radius: 23px;
      color: #fff;
      background: linear-gradient(135deg, #5f83ef 0%, #4f70df 52%, #3d5fc8 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 15px 32px rgba(70, 99, 196, .18);
    }

    .hero-panel::before,
    .hero-panel::after {
      content: "";
      position: absolute;
      pointer-events: none;
      border: 1px solid rgba(255, 255, 255, .11);
      border-radius: 50%;
    }

    .hero-panel::before {
      width: 320px;
      height: 320px;
      right: -128px;
      top: -124px;
    }

    .hero-panel::after {
      width: 250px;
      height: 250px;
      right: -82px;
      top: -89px;
    }

    .location-line {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 9px;
      color: rgba(255,255,255,.83);
      font-size: 14px;
      font-weight: 550;
      letter-spacing: .01em;
    }

    .location-line svg { width: 16px; height: 16px; flex: none; }

    .date-label {
      position: relative;
      z-index: 1;
      margin-top: 8px;
      color: rgba(255,255,255,.68);
      font-size: 13px;
      font-weight: 500;
    }

    .hero-weather {
      position: relative;
      z-index: 1;
      min-height: 205px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .temperature-wrap { padding-top: 10px; }

    .temperature {
      display: flex;
      align-items: flex-start;
      color: #fff;
      font-size: clamp(76px, 9vw, 108px);
      font-weight: 650;
      line-height: .92;
      letter-spacing: -.09em;
    }

    .temperature .degree {
      margin: 7px 0 0 5px;
      font-size: .36em;
      font-weight: 450;
      letter-spacing: -.04em;
    }

    .condition {
      margin-top: 15px;
      color: rgba(255,255,255,.91);
      font-size: 17px;
      font-weight: 550;
      letter-spacing: -.02em;
    }

    .weather-icon {
      width: 112px;
      height: 112px;
      margin: 0 9px 2px 0;
      filter: drop-shadow(0 10px 18px rgba(24, 49, 130, .16));
    }

    .stats-panel {
      min-height: 300px;
      padding: 28px 30px;
      display: flex;
      flex-direction: column;
      border: 1px solid #edf0f5;
      border-radius: 23px;
      background: linear-gradient(145deg, #fff, #fbfcff);
    }

    .section-eyebrow {
      color: #8992a7;
      font-size: 11px;
      font-weight: 750;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .stats-heading {
      margin: 8px 0 20px;
      color: #29334d;
      font-size: 18px;
      font-weight: 650;
      letter-spacing: -.035em;
    }

    .range-card {
      flex: 1;
      min-height: 148px;
      padding: 23px 22px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 23px;
      border-radius: 17px;
      background: #f5f7fc;
    }

    .range-row {
      display: grid;
      grid-template-columns: 20px 1fr auto;
      align-items: center;
      gap: 12px;
    }

    .range-icon { width: 18px; height: 18px; }
    .range-icon.high { color: #f09b60; }
    .range-icon.low { color: #6b8ee8; }

    .range-label {
      color: #778198;
      font-size: 13px;
      font-weight: 550;
    }

    .range-value {
      color: #28334e;
      font-size: 23px;
      font-weight: 650;
      letter-spacing: -.055em;
    }

    .range-value span {
      margin-left: 2px;
      color: #79839a;
      font-size: 14px;
      font-weight: 500;
    }

    .hourly-section { margin-top: 36px; }

    .hourly-header {
      margin-bottom: 16px;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
    }

    .hourly-title {
      margin: 6px 0 0;
      color: #29334d;
      font-size: 21px;
      font-weight: 650;
      letter-spacing: -.045em;
    }

    .hourly-note {
      color: #929bb0;
      font-size: 12px;
      font-weight: 500;
    }

    .hourly-track {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 9px;
    }

    .hour {
      min-width: 0;
      min-height: 104px;
      padding: 14px 5px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      border: 1px solid #edf0f5;
      border-radius: 14px;
      background: #fff;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .hour:hover {
      transform: translateY(-3px);
      border-color: #dce4fb;
      box-shadow: 0 8px 20px rgba(48, 67, 120, .08);
    }

    .hour-time {
      color: #8a93a8;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
    }

    .hour-icon {
      width: 22px;
      height: 22px;
      color: #e7a64f;
    }

    .hour-temp {
      color: #35405c;
      font-size: 14px;
      font-weight: 650;
      letter-spacing: -.02em;
      white-space: nowrap;
    }

    .status {
      min-height: 100px;
      display: grid;
      place-items: center;
      color: #8a93a8;
      font-size: 14px;
      text-align: center;
    }

    .status.error {
      padding: 24px;
      border: 1px solid #f3d8d5;
      border-radius: 15px;
      color: #a24f49;
      background: #fff7f6;
    }

    [hidden] { display: none !important; }

    @media (max-width: 760px) {
      body { padding: 20px 14px; }
      .weather-card { border-radius: 23px; }
      .topbar { min-height: 72px; padding: 0 24px; }
      .main-content { padding: 24px; }
      .overview { grid-template-columns: 1fr; gap: 16px; }
      .hero-panel { min-height: 275px; padding: 28px; }
      .stats-panel { min-height: 260px; padding: 25px; }
      .hourly-track { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    }

    @media (max-width: 480px) {
      .main-content { padding: 18px; }
      .hero-panel { padding: 25px 23px; }
      .weather-icon { width: 82px; height: 82px; margin-right: 0; }
      .temperature { font-size: 78px; }
      .hourly-track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
      .hourly-note { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
    }
  </style>
</head>
<body>
  <main class="weather-card" aria-label="Weather forecast">
    <header class="topbar">
      <div class="brand">
        <span class="brand-mark" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none">
            <path d="M12 3v2m0 14v2M3 12h2m14 0h2M5.64 5.64l1.42 1.42m9.88 9.88 1.42 1.42m0-12.72-1.42 1.42m-9.88 9.88-1.42 1.42" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
            <circle cx="12" cy="12" r="4.1" stroke="currentColor" stroke-width="1.8"/>
          </svg>
        </span>
        <span>Weather brief</span>
      </div>
      <div class="unit-label"><span class="unit-dot"></span> Celsius</div>
    </header>

    <div class="main-content">
      <section class="overview" aria-label="Daily weather summary">
        <article class="hero-panel">
          <div class="location-line">
            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path d="M19 10.2c0 5.1-7 10.3-7 10.3S5 15.3 5 10.2a7 7 0 1 1 14 0Z" stroke="currentColor" stroke-width="1.7"/>
              <circle cx="12" cy="10" r="2.3" stroke="currentColor" stroke-width="1.7"/>
            </svg>
            <span id="location">Berlin</span>
          </div>
          <div class="date-label" id="date-label">Loading date…</div>
          <div class="hero-weather" id="hero-weather" hidden>
            <div class="temperature-wrap">
              <div class="temperature"><span id="current-temp">—</span><span class="degree">°</span></div>
              <div class="condition" id="condition">—</div>
            </div>
            <div id="weather-icon" aria-hidden="true"></div>
          </div>
          <div class="status" id="hero-status" role="status">Loading weather…</div>
        </article>

        <article class="stats-panel">
          <div class="section-eyebrow">Daily outlook</div>
          <h1 class="stats-heading">The day at a glance</h1>
          <div class="range-card" id="range-card" hidden>
            <div class="range-row">
              <svg class="range-icon high" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path d="M12 19V5m0 0L6.5 10.5M12 5l5.5 5.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <span class="range-label">High</span>
              <strong class="range-value"><span id="high-temp">—</span><span>°C</span></strong>
            </div>
            <div class="range-row">
              <svg class="range-icon low" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path d="M12 5v14m0 0 5.5-5.5M12 19l-5.5-5.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <span class="range-label">Low</span>
              <strong class="range-value"><span id="low-temp">—</span><span>°C</span></strong>
            </div>
          </div>
          <div class="status" id="range-status">Your daily high and low will appear here.</div>
        </article>
      </section>

      <section class="hourly-section" aria-label="Hourly temperatures">
        <div class="hourly-header">
          <div>
            <div class="section-eyebrow">Through the day</div>
            <h2 class="hourly-title">Hourly temperature</h2>
          </div>
          <span class="hourly-note">Times shown in UTC</span>
        </div>
        <div class="hourly-track" id="hourly-track" hidden></div>
        <div class="status" id="hourly-status">Hourly temperatures will appear here.</div>
      </section>
    </div>
  </main>

  <script>
    (() => {
      const params = new URLSearchParams(window.location.search);
      const today = new Date().toISOString().slice(0, 10);
      const date = params.get("date") || today;
      const locationName = params.get("name") || "Berlin";
      const latitude = params.get("lat") || "52.52";
      const longitude = params.get("lon") || "13.405";

      const locationElement = document.getElementById("location");
      const dateElement = document.getElementById("date-label");
      const heroStatus = document.getElementById("hero-status");
      const heroWeather = document.getElementById("hero-weather");
      const rangeStatus = document.getElementById("range-status");
      const rangeCard = document.getElementById("range-card");
      const hourlyStatus = document.getElementById("hourly-status");
      const hourlyTrack = document.getElementById("hourly-track");

      locationElement.textContent = locationName;
      document.title = `${locationName} weather`;

      const isValidDate = /^\d{4}-\d{2}-\d{2}$/.test(date) &&
        !Number.isNaN(Date.parse(`${date}T00:00:00Z`)) &&
        new Date(`${date}T00:00:00Z`).toISOString().slice(0, 10) === date;

      dateElement.textContent = isValidDate
        ? new Intl.DateTimeFormat(undefined, { weekday: "long", month: "long", day: "numeric", year: "numeric", timeZone: "UTC" }).format(new Date(`${date}T00:00:00Z`))
        : date;

      function describeCode(code) {
        if (code === 0) return "Clear sky";
        if (code === 1) return "Mainly clear";
        if (code === 2) return "Partly cloudy";
        if (code === 3) return "Overcast";
        if (code === 45 || code === 48) return "Fog";
        if ([51, 53, 55].includes(code)) return "Drizzle";
        if ([56, 57].includes(code)) return "Freezing drizzle";
        if ([61, 63, 65].includes(code)) return "Rain";
        if ([66, 67].includes(code)) return "Freezing rain";
        if ([71, 73, 75, 77].includes(code)) return "Snow";
        if ([80, 81, 82].includes(code)) return "Rain showers";
        if ([85, 86].includes(code)) return "Snow showers";
        if (code === 95) return "Thunderstorm";
        if ([96, 99].includes(code)) return "Thunderstorm with hail";
        return "Weather";
      }

      function iconSvg(code, small = false) {
        const size = small ? 22 : 112;
        const sun = `<circle cx="44" cy="42" r="17" fill="#FFD36B"/><g stroke="#FFD36B" stroke-width="4" stroke-linecap="round"><path d="M44 10v8M44 66v8M12 42h8M68 42h8M21.4 19.4l5.7 5.7M60.9 58.9l5.7 5.7M66.6 19.4l-5.7 5.7M27.1 58.9l-5.7 5.7"/></g>`;
        const cloud = `<path d="M33 70h36a16 16 0 0 0 0-32 23 23 0 0 0-44-4 19 19 0 0 0 8 36Z" fill="#F6F8FF" stroke="#E2E9FF" stroke-width="2"/>`;
        const rain = `<g stroke="#9AC7FF" stroke-width="4" stroke-linecap="round"><path d="m37 76-4 9m20-9-4 9m20-9-4 9"/></g>`;
        const snow = `<g stroke="#C9E7FF" stroke-width="3" stroke-linecap="round"><path d="M36 78v10m-4-5h8m-3-3  -2 2 2 2m17-6v10m-4-5h8m-3-3-2 2 2 2"/></g>`;
        const storm = `<path d="m50 67-12 20h10l-4 14 18-23H51l5-11Z" fill="#FFD36B"/>`;
        let scene = cloud;
        if (code === 0 || code === 1) scene = sun;
        else if (code === 2) scene = sun + cloud;
        else if ([51, 53, 55, 56, 57, 61, 63, 65, 66, 67, 80, 81, 82].includes(code)) scene = cloud + rain;
        else if ([71, 73, 75, 77, 85, 86].includes(code)) scene = cloud + snow;
        else if ([95, 96, 99].includes(code)) scene = cloud + rain + storm;
        return `<svg class="${small ? "hour-icon" : "weather-icon"}" width="${size}" height="${size}" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">${scene}</svg>`;
      }

      function showError() {
        heroStatus.textContent = "Weather data could not be loaded.";
        heroStatus.classList.add("error");
        rangeStatus.textContent = "Weather data could not be loaded.";
        rangeStatus.classList.add("error");
        hourlyStatus.textContent = "Weather data could not be loaded.";
        hourlyStatus.classList.add("error");
      }

      async function loadWeather() {
        if (!isValidDate || !Number.isFinite(Number(latitude)) || !Number.isFinite(Number(longitude))) {
          showError();
          return;
        }

        const endpoint = date < today ? "/api/om/archive" : "/api/om/forecast";
        const query = new URLSearchParams({
          latitude,
          longitude,
          daily: "temperature_2m_max,temperature_2m_min,weather_code",
          hourly: "temperature_2m",
          timezone: "UTC",
          temperature_unit: "celsius",
          start_date: date,
          end_date: date
        });

        try {
          const response = await fetch(`${endpoint}?${query.toString()}`, {
            headers: { Accept: "application/json" }
          });
          if (!response.ok) throw new Error("Weather request failed");
          const data = await response.json();
          const dayIndex = Array.isArray(data.daily?.time) ? data.daily.time.indexOf(date) : -1;
          if (dayIndex < 0) throw new Error("No daily data for the selected date");

          const high = data.daily.temperature_2m_max?.[dayIndex];
          const low = data.daily.temperature_2m_min?.[dayIndex];
          const code = data.daily.weather_code?.[dayIndex];
          if (!Number.isFinite(high) || !Number.isFinite(low)) throw new Error("Incomplete daily data");

          document.getElementById("high-temp").textContent = Math.round(high);
          document.getElementById("low-temp").textContent = Math.round(low);
          rangeStatus.hidden = true;
          rangeCard.hidden = false;

          const hourlyTimes = data.hourly?.time || [];
          const hourlyTemps = data.hourly?.temperature_2m || [];
          const hours = hourlyTimes
            .map((time, index) => ({ time, temperature: hourlyTemps[index] }))
            .filter(item => item.time.startsWith(`${date}T`) && Number.isFinite(item.temperature));

          if (!hours.length) throw new Error("No hourly data for the selected date");

          const midday = hours.find(item => item.time.slice(11, 13) === "12") || hours[Math.floor(hours.length / 2)];
          document.getElementById("current-temp").textContent = Math.round(midday.temperature);
          document.getElementById("condition").textContent = describeCode(code);
          document.getElementById("weather-icon").innerHTML = iconSvg(code);
          heroStatus.hidden = true;
          heroWeather.hidden = false;

          hourlyTrack.innerHTML = hours.map(item => {
            const hour = item.time.slice(11, 13);
            const label = hour === "00" ? "12 AM" : hour === "12" ? "12 PM" : `${Number(hour) % 12 || 12} ${Number(hour) < 12 ? "AM" : "PM"}`;
            return `<div class="hour"><span class="hour-time">${label}</span>${iconSvg(code, true)}<strong class="hour-temp">${Math.round(item.temperature)}°</strong></div>`;
          }).join("");
          hourlyStatus.hidden = true;
          hourlyTrack.hidden = false;
        } catch {
          showError();
        }
      }

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