gpt-6-luna @ high · codex

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#e9eef5">
  <title>Weather Card</title>
  <style>
    :root {
      color-scheme: light;
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-synthesis: none;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      --ink: #17243a;
      --muted: #748199;
      --line: rgba(47, 66, 99, .1);
      --blue: #3159ad;
      --gold: #f5bc67;
    }

    * { box-sizing: border-box; }

    body {
      min-width: 320px;
      min-height: 100vh;
      margin: 0;
      display: grid;
      place-items: center;
      overflow-x: hidden;
      color: var(--ink);
      background:
        radial-gradient(ellipse at 16% 16%, rgba(255,255,255,.9), transparent 38%),
        radial-gradient(ellipse at 92% 82%, rgba(201,216,239,.68), transparent 36%),
        linear-gradient(135deg, #edf1f7 0%, #e7ecf4 55%, #f0f2f7 100%);
    }

    .stage {
      width: min(100% - 48px, 1080px);
      padding: 28px 0;
    }

    .card {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      min-height: 650px;
      padding: 50px 58px 36px;
      border: 1px solid rgba(255,255,255,.78);
      border-radius: 30px;
      background: rgba(255,255,255,.88);
      box-shadow: 0 32px 90px rgba(35, 51, 79, .13), 0 3px 12px rgba(35, 51, 79, .05);
      backdrop-filter: blur(18px);
    }

    .card::before {
      position: absolute;
      z-index: -1;
      top: -310px;
      right: -220px;
      width: 680px;
      height: 680px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(246,205,136,.25), rgba(246,205,136,0) 68%);
      content: "";
    }

    .topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      color: #33425b;
      font-size: 13px;
      font-weight: 750;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .brand-mark {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border-radius: 12px;
      color: #fff;
      background: linear-gradient(145deg, #6689d1, #365aa8);
      box-shadow: 0 5px 12px rgba(54,90,168,.24);
    }

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

    .date-chip {
      padding: 10px 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: #66738a;
      background: rgba(255,255,255,.58);
      font-size: 12px;
      font-weight: 650;
      letter-spacing: .025em;
    }

    .main {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 260px;
      align-items: center;
      gap: 28px;
      min-height: 330px;
      padding: 30px 4px 22px;
    }

    .eyebrow {
      margin: 0 0 10px;
      color: #8792a5;
      font-size: 12px;
      font-weight: 750;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    h1 {
      max-width: 700px;
      margin: 0;
      overflow-wrap: anywhere;
      color: #1a2943;
      font-size: clamp(35px, 5vw, 58px);
      font-weight: 720;
      letter-spacing: -.055em;
      line-height: 1.05;
    }

    .condition-line {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 20px;
      color: #65738b;
      font-size: 16px;
      font-weight: 550;
    }

    .condition-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #72a4d4;
      box-shadow: 0 0 0 5px rgba(114,164,212,.13);
    }

    .temperatures {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      margin-top: 28px;
    }

    .high {
      color: #1c2a43;
      font-size: clamp(78px, 10vw, 116px);
      font-weight: 650;
      letter-spacing: -.085em;
      line-height: .92;
    }

    .unit {
      position: relative;
      top: 10px;
      margin-left: 5px;
      color: #56647b;
      font-size: .35em;
      font-weight: 550;
      letter-spacing: -.04em;
      vertical-align: top;
    }

    .low-block {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-top: 14px;
      padding-left: 20px;
      border-left: 1px solid var(--line);
    }

    .low-label {
      color: #98a1b1;
      font-size: 10px;
      font-weight: 750;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .low-value {
      color: #66748a;
      font-size: 26px;
      font-weight: 580;
      letter-spacing: -.045em;
    }

    .weather-art {
      display: grid;
      width: 240px;
      height: 240px;
      place-items: center;
      justify-self: end;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 45%, rgba(249,219,163,.5), rgba(249,219,163,.12) 42%, transparent 70%);
    }

    .weather-art svg {
      width: 210px;
      height: 210px;
      overflow: visible;
      filter: drop-shadow(0 20px 18px rgba(110,123,148,.16));
    }

    .hourly {
      padding-top: 24px;
      border-top: 1px solid var(--line);
    }

    .hourly-heading {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 19px;
    }

    .hourly-heading h2 {
      margin: 0;
      color: #34445e;
      font-size: 14px;
      font-weight: 720;
      letter-spacing: -.01em;
    }

    .hourly-heading span {
      color: #9aa4b4;
      font-size: 11px;
      font-weight: 600;
    }

    .hours {
      display: grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      gap: 8px;
    }

    .hour {
      display: flex;
      min-height: 110px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border: 1px solid transparent;
      border-radius: 17px;
      background: #f6f8fb;
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
    }

    .hour:first-child {
      border-color: rgba(74,106,174,.13);
      background: #edf2fb;
    }

    .hour:hover {
      transform: translateY(-3px);
      border-color: rgba(74,106,174,.2);
      background: #eef3fc;
    }

    .hour-time {
      color: #8994a7;
      font-size: 11px;
      font-weight: 650;
    }

    .hour-icon {
      width: 25px;
      height: 25px;
      color: #eba94d;
    }

    .hour-temp {
      color: #34445e;
      font-size: 14px;
      font-weight: 720;
      letter-spacing: -.02em;
    }

    .footer {
      display: flex;
      justify-content: space-between;
      gap: 15px;
      margin-top: 19px;
      color: #a0a9b8;
      font-size: 10px;
      font-weight: 550;
    }

    .state {
      display: flex;
      min-height: 370px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #77849a;
    }

    .state-mark {
      display: grid;
      width: 52px;
      height: 52px;
      margin-bottom: 16px;
      place-items: center;
      border-radius: 18px;
      color: #5371af;
      background: #edf2fb;
    }

    .state-mark svg { width: 25px; height: 25px; }

    .state strong {
      margin-bottom: 7px;
      color: #273752;
      font-size: 18px;
      font-weight: 700;
    }

    .state span { font-size: 13px; }

    @media (max-width: 700px) {
      .stage { width: min(100% - 24px, 540px); padding: 12px 0; }
      .card { min-height: auto; padding: 28px 24px 22px; border-radius: 24px; }
      .topline { align-items: flex-start; }
      .date-chip { max-width: 48%; text-align: right; line-height: 1.35; }
      .main { grid-template-columns: 1fr; min-height: 0; gap: 0; padding: 46px 0 30px; }
      .weather-art { position: absolute; top: 91px; right: 9px; width: 130px; height: 130px; opacity: .65; }
      .weather-art svg { width: 124px; height: 124px; }
      .main-copy { position: relative; z-index: 1; }
      h1 { max-width: 68%; font-size: clamp(32px, 9vw, 48px); }
      .condition-line { font-size: 14px; }
      .temperatures { margin-top: 34px; }
      .high { font-size: 88px; }
      .hours { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .hour { min-height: 98px; }
      .footer { font-size: 9px; }
    }

    @media (max-width: 380px) {
      .brand { font-size: 11px; }
      .brand-mark { width: 30px; height: 30px; }
      .card { padding-inline: 18px; }
      .high { font-size: 76px; }
      .low-block { padding-left: 13px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
    }
  </style>
</head>
<body>
  <main class="stage">
    <section class="card" aria-label="Weather forecast">
      <header class="topline">
        <div class="brand">
          <span class="brand-mark" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none">
              <path d="M12 3v2M12 19v2M3 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.7" stroke-linecap="round"/>
              <circle cx="12" cy="12" r="4" stroke="currentColor" stroke-width="1.7"/>
            </svg>
          </span>
          <span>Field Notes <span style="color:#9aa6b8;font-weight:500">/ Weather</span></span>
        </div>
        <time class="date-chip" id="date-chip"></time>
      </header>

      <section id="content" aria-live="polite">
        <div class="state" role="status">
          <span class="state-mark" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none">
              <path d="M5 15.5a4 4 0 0 1 .8-7.92A6.5 6.5 0 0 1 18.4 9a3.5 3.5 0 0 1 .1 7H5Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="m9 19 1.3-2m3.4 2L15 17" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
            </svg>
          </span>
          <strong>Gathering the forecast</strong>
          <span>Just a moment while we check the sky.</span>
        </div>
      </section>
    </section>
  </main>

  <script>
    (() => {
      const params = new URLSearchParams(window.location.search);
      const today = new Date().toISOString().slice(0, 10);
      const latitude = params.get("lat") ?? "52.52";
      const longitude = params.get("lon") ?? "13.405";
      const locationName = params.get("name") ?? "Berlin";
      const requestedDate = params.get("date") ?? today;
      const content = document.getElementById("content");
      const dateChip = document.getElementById("date-chip");

      function parseDate(value) {
        if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return null;
        const parsed = new Date(`${value}T00:00:00Z`);
        return Number.isNaN(parsed.getTime()) || parsed.toISOString().slice(0, 10) !== value ? null : parsed;
      }

      const date = parseDate(requestedDate);
      const dateLabel = date
        ? new Intl.DateTimeFormat("en", { weekday: "long", month: "long", day: "numeric", year: "numeric", timeZone: "UTC" }).format(date)
        : requestedDate;
      dateChip.textContent = dateLabel;

      const conditions = {
        0: "Clear sky",
        1: "Mostly clear",
        2: "Partly cloudy",
        3: "Overcast",
        45: "Fog",
        48: "Freezing fog",
        51: "Light drizzle",
        53: "Drizzle",
        55: "Heavy drizzle",
        56: "Freezing drizzle",
        57: "Heavy freezing drizzle",
        61: "Light rain",
        63: "Rain",
        65: "Heavy rain",
        66: "Freezing rain",
        67: "Heavy freezing rain",
        71: "Light snow",
        73: "Snow",
        75: "Heavy snow",
        77: "Snow grains",
        80: "Light showers",
        81: "Rain showers",
        82: "Heavy showers",
        85: "Snow showers",
        86: "Heavy snow showers",
        95: "Thunderstorms",
        96: "Thunderstorms & hail",
        99: "Severe thunderstorms"
      };

      function iconFor(code) {
        if (code === 0 || code === 1) {
          return '<svg viewBox="0 0 28 28" fill="none" aria-hidden="true"><circle cx="14" cy="14" r="5" fill="currentColor"/><path d="M14 2.8v3m0 16.4v3M2.8 14h3m16.4 0h3M6.07 6.07l2.12 2.12m11.62 11.62 2.12 2.12m0-15.86-2.12 2.12M8.19 19.81l-2.12 2.12" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>';
        }
        if (code >= 2 && code <= 3) {
          return '<svg viewBox="0 0 28 28" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="4.1" fill="currentColor" opacity=".82"/><path d="M8 21h12.2a4.1 4.1 0 0 0 .4-8.2 6.8 6.8 0 0 0-12.9 1.1A3.6 3.6 0 0 0 8 21Z" fill="#b7c5d9" stroke="#91a2bb" stroke-width="1.2"/></svg>';
        }
        return '<svg viewBox="0 0 28 28" fill="none" aria-hidden="true"><path d="M5.1 16.8a3.3 3.3 0 0 1 .7-6.5A5.6 5.6 0 0 1 17 11a3 3 0 0 1 .1 5.8H5.1Z" fill="#b7c5d9" stroke="#91a2bb" stroke-width="1.2"/><path d="m9 20.2 1-1.7m4.2 1.7 1-1.7m4 1.7 1-1.7" stroke="#6689ba" stroke-width="1.5" stroke-linecap="round"/></svg>';
      }

      function showError() {
        content.innerHTML = `
          <div class="state" role="alert">
            <span class="state-mark" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none"><path d="M12 8v5m0 3.5h.01M10.3 3.9 2.8 17a2 2 0 0 0 1.7 3h15a2 2 0 0 0 1.7-3l-7.5-13.1a2 2 0 0 0-3.4 0Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </span>
            <strong>Weather data unavailable</strong>
            <span>We couldn’t load the forecast for this date. Please try again later.</span>
          </div>`;
      }

      function showWeather(data) {
        const dayIndex = data.daily?.time?.indexOf(requestedDate) ?? -1;
        const max = dayIndex >= 0 ? data.daily.temperature_2m_max?.[dayIndex] : null;
        const min = dayIndex >= 0 ? data.daily.temperature_2m_min?.[dayIndex] : null;
        const code = dayIndex >= 0 ? data.daily.weather_code?.[dayIndex] : null;
        const times = data.hourly?.time ?? [];
        const temps = data.hourly?.temperature_2m ?? [];
        const hours = times
          .map((time, index) => ({ time, temp: temps[index] }))
          .filter(item => item.time.startsWith(`${requestedDate}T`) && Number.isFinite(item.temp));

        if (!Number.isFinite(max) || !Number.isFinite(min) || code === null || hours.length === 0) {
          showError();
          return;
        }

        const hourlyMarkup = hours.map(({ time, temp }) => {
          const hour = Number(time.slice(11, 13));
          const label = hour === 0 ? "12 AM" : hour < 12 ? `${hour} AM` : hour === 12 ? "12 PM" : `${hour - 12} PM`;
          return `<div class="hour"><span class="hour-time">${label}</span><span class="hour-icon">${iconFor(code)}</span><span class="hour-temp">${Math.round(temp)}°</span></div>`;
        }).join("");

        content.innerHTML = `
          <section class="main">
            <div class="main-copy">
              <p class="eyebrow">${date === null ? "" : new Intl.DateTimeFormat("en", { weekday: "long", timeZone: "UTC" }).format(date)} outlook</p>
              <h1 id="location-title"></h1>
              <div class="condition-line"><span class="condition-dot"></span><span>${conditions[code] ?? "Variable conditions"}</span></div>
              <div class="temperatures">
                <div class="high">${Math.round(max)}<span class="unit">°C</span></div>
                <div class="low-block"><span class="low-label">Low</span><span class="low-value">${Math.round(min)}°</span></div>
              </div>
            </div>
            <div class="weather-art" aria-hidden="true">
              <svg viewBox="0 0 220 220" fill="none">
                <circle cx="110" cy="104" r="70" fill="url(#sunGlow)"/>
                <circle cx="110" cy="96" r="34" fill="url(#sunFill)"/>
                <path d="M62 148.5a25.5 25.5 0 0 1 5.6-50.4 43.5 43.5 0 0 1 100.2 8.1 23.6 23.6 0 0 1 .7 47H62Z" fill="url(#cloudFill)" stroke="white" stroke-opacity=".9" stroke-width="2"/>
                <path d="M68 151h94" stroke="#dce3ed" stroke-width="2" stroke-linecap="round"/>
                <defs>
                  <radialGradient id="sunGlow"><stop stop-color="#F6CC7D" stop-opacity=".62"/><stop offset="1" stop-color="#F6CC7D" stop-opacity="0"/></radialGradient>
                  <linearGradient id="sunFill" x1="76" y1="61" x2="143" y2="130" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE3A8"/><stop offset="1" stop-color="#F2B95E"/></linearGradient>
                  <linearGradient id="cloudFill" x1="91" y1="95" x2="142" y2="159" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#E8EDF5"/></linearGradient>
                </defs>
              </svg>
            </div>
          </section>
          <section class="hourly" aria-label="Hourly temperatures">
            <div class="hourly-heading"><h2>Hourly temperature</h2><span>Throughout the day · °C</span></div>
            <div class="hours">${hourlyMarkup}</div>
          </section>
          <footer class="footer"><span>Daily high &amp; low · Celsius</span><span>Times shown in UTC</span></footer>`;

        document.getElementById("location-title").textContent = locationName;
      }

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

        const endpoint = requestedDate < 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: requestedDate,
          end_date: requestedDate
        });

        try {
          const response = await fetch(`${endpoint}?${query.toString()}`, { headers: { Accept: "application/json" } });
          if (!response.ok) throw new Error("Weather request failed");
          showWeather(await response.json());
        } catch {
          showError();
        }
      }

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