gpt-6-luna @ medium · 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="#edf3f7">
  <title>Weather Card</title>
  <style>
    :root {
      color-scheme: light;
      --ink: #183044;
      --muted: #708395;
      --blue: #3787d6;
      --line: rgba(31, 65, 90, .09);
      --card: rgba(255, 255, 255, .82);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 40px 24px;
      background:
        radial-gradient(ellipse at 80% 9%, rgba(255, 221, 158, .35), transparent 33%),
        radial-gradient(ellipse at 10% 92%, rgba(112, 186, 224, .20), transparent 38%),
        linear-gradient(145deg, #f5f8fa, #e9f0f4);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    .card {
      width: min(100%, 960px);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .9);
      border-radius: 30px;
      background: var(--card);
      box-shadow: 0 28px 80px rgba(43, 72, 94, .13), 0 3px 12px rgba(43, 72, 94, .04);
      backdrop-filter: blur(16px);
    }
    .top {
      position: relative;
      min-height: 316px;
      padding: 42px 48px 36px;
      overflow: hidden;
      background: linear-gradient(118deg, #f8fbfd 5%, #eef6fa 59%, #e7f1f5);
    }
    .top::after {
      content: "";
      position: absolute;
      width: 410px;
      height: 410px;
      right: -70px;
      top: -112px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 225, 165, .43), rgba(255, 230, 186, .10) 52%, transparent 70%);
      pointer-events: none;
    }
    .eyebrow {
      display: flex;
      align-items: center;
      gap: 9px;
      color: #7a8e9e;
      font-size: 11px;
      font-weight: 750;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .live-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #59ae8d;
      box-shadow: 0 0 0 4px rgba(89, 174, 141, .13);
    }
    .summary {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 35px;
    }
    .place { min-width: 0; }
    h1 {
      margin: 0;
      max-width: 570px;
      overflow: hidden;
      color: #1b3448;
      font-size: clamp(34px, 4vw, 49px);
      font-weight: 650;
      letter-spacing: -.045em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .date {
      margin-top: 9px;
      color: #768b9b;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: .01em;
    }
    .weather-icon {
      width: 156px;
      height: 136px;
      margin-right: 45px;
      filter: drop-shadow(0 14px 19px rgba(127, 154, 169, .13));
    }
    .stats {
      display: flex;
      align-items: center;
      gap: 34px;
      margin-top: 24px;
    }
    .current {
      color: #19364b;
      font-size: clamp(76px, 9vw, 100px);
      font-weight: 350;
      letter-spacing: -.09em;
      line-height: .95;
    }
    .unit {
      margin-left: 5px;
      color: #658095;
      font-size: .38em;
      font-weight: 450;
      letter-spacing: -.03em;
      vertical-align: top;
    }
    .condition-block { padding-top: 10px; }
    .condition {
      color: #35546b;
      font-size: 19px;
      font-weight: 620;
      letter-spacing: -.02em;
    }
    .highlow {
      display: flex;
      gap: 14px;
      margin-top: 9px;
      color: #8193a1;
      font-size: 13px;
      font-weight: 550;
    }
    .highlow strong { color: #456176; font-weight: 650; }
    .divider { color: #bdc9d0; }
    .forecast {
      padding: 29px 48px 35px;
      background: rgba(255,255,255,.57);
    }
    .section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
    }
    h2 {
      margin: 0;
      color: #29465b;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -.01em;
    }
    .unit-note {
      color: #94a3ae;
      font-size: 11px;
      font-weight: 650;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .chart-wrap { position: relative; height: 108px; }
    .chart {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .hours {
      display: grid;
      grid-template-columns: repeat(24, minmax(0, 1fr));
      gap: 4px;
      margin-top: 13px;
    }
    .hour {
      min-width: 0;
      text-align: center;
    }
    .hour-time {
      color: #91a1ac;
      font-size: 10px;
      font-weight: 600;
      white-space: nowrap;
    }
    .hour-temp {
      margin-top: 7px;
      color: #476277;
      font-size: 11px;
      font-weight: 650;
      white-space: nowrap;
    }
    .status {
      padding: 26px 48px;
      color: #748896;
      font-size: 14px;
      line-height: 1.5;
    }
    .status.error { color: #9b4f49; }
    .hidden { display: none !important; }
    @media (max-width: 700px) {
      body { padding: 18px 12px; }
      .card { border-radius: 23px; }
      .top { min-height: auto; padding: 30px 25px 28px; }
      .summary { margin-top: 30px; }
      .weather-icon { width: 102px; height: 96px; margin-right: 0; }
      .stats { gap: 19px; margin-top: 26px; }
      .current { font-size: 78px; }
      .condition { font-size: 16px; }
      .forecast { padding: 25px 22px 28px; }
      .hours { overflow-x: auto; grid-template-columns: repeat(24, 34px); padding-bottom: 5px; }
      .status { padding: 22px 25px; }
    }
  </style>
</head>
<body>
  <main class="card" aria-label="Daily weather">
    <section class="top">
      <div class="eyebrow"><span class="live-dot" aria-hidden="true"></span> Daily weather</div>
      <div id="content" class="hidden">
        <div class="summary">
          <div class="place">
            <h1 id="location"></h1>
            <div id="date" class="date"></div>
          </div>
          <svg id="weatherIcon" class="weather-icon" viewBox="0 0 160 140" role="img" aria-label=""></svg>
        </div>
        <div class="stats">
          <div id="maxTemp" class="current"></div>
          <div class="condition-block">
            <div id="condition" class="condition"></div>
            <div class="highlow"><span>H <strong id="high"></strong></span><span class="divider">/</span><span>L <strong id="low"></strong></span></div>
          </div>
        </div>
      </div>
    </section>
    <section id="forecast" class="forecast hidden" aria-label="Hourly temperatures">
      <div class="section-head">
        <h2>Temperature through the day</h2>
        <span class="unit-note">Hourly · °C</span>
      </div>
      <div class="chart-wrap"><svg id="chart" class="chart" role="img" aria-label="Hourly temperature chart"></svg></div>
      <div id="hours" class="hours"></div>
    </section>
    <div id="status" class="status" role="status" aria-live="polite">Loading weather…</div>
  </main>
  <script>
    (() => {
      const params = new URLSearchParams(location.search);
      const today = new Date().toISOString().slice(0, 10);
      const datePattern = /^\d{4}-\d{2}-\d{2}$/;
      const requestedDate = params.get("date") || today;
      const validDate = datePattern.test(requestedDate) && !Number.isNaN(Date.parse(requestedDate + "T00:00:00Z"));
      const date = validDate ? requestedDate : today;
      const latitude = params.get("lat") || "52.52";
      const longitude = params.get("lon") || "13.405";
      const locationName = params.get("name") || "Berlin";
      const status = document.getElementById("status");

      const descriptions = {
        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 snowfall", 73: "Moderate snowfall", 75: "Heavy snowfall", 77: "Snow grains",
        80: "Slight rain showers", 81: "Moderate rain showers", 82: "Violent rain showers",
        85: "Slight snow showers", 86: "Heavy snow showers",
        во: "Thunderstorm", 95: "Thunderstorm", 96: "Thunderstorm with hail", 99: "Thunderstorm with heavy hail"
      };
      descriptions[95] = "Thunderstorm";
      const weatherName = code => descriptions[Number(code)] || "Weather conditions";

      function iconFor(code) {
        const n = Number(code);
        const sun = '<circle cx="99" cy="51" r="24" fill="#f6c96e"/><g stroke="#f2bd59" stroke-width="3" stroke-linecap="round"><path d="M99 15v-7M99 94v-7M63 51h-7M142 51h-7M73 25l-5-5M130 82l-5-5M125 25l5-5M68 82l5-5"/></g>';
        const cloud = '<path d="M43 98h70a22 22 0 0 0 0-44 31 31 0 0 0-59-3 24 24 0 0 0-11 47Z" fill="#fff" stroke="#d9e5eb" stroke-width="3" stroke-linejoin="round"/>';
        let art;
        if (n === 0 || n === 1) art = sun + '<circle cx="74" cy="86" r="34" fill="#f8cf79"/><path d="M74 52a34 34 0 0 1 0 68" fill="#f2b85d"/>';
        else if (n <= 3) art = sun + cloud;
        else if (n >= 51 && n <= 67 || n >= 80 && n <= 82) art = '<path d="M46 85h66a21 21 0 0 0 0-42 30 30 0 0 0-58-3 23 23 0 0 0-8 45Z" fill="#fff" stroke="#d9e5eb" stroke-width="3"/><g stroke="#70afd5" stroke-width="4" stroke-linecap="round"><path d="m63 98-6 13M86 98l-6 13M109 98l-6 13"/></g>';
        else if (n >= 71 && n <= 86) art = '<path d="M46 83h66a21 21 0 0 0 0-42 30 30 0 0 0-58-3 23 23 0 0 0-8 45Z" fill="#fff" stroke="#d9e5eb" stroke-width="3"/><g fill="#78b7dc"><circle cx="63" cy="101" r="4"/><circle cx="86" cy="111" r="4"/><circle cx="109" cy="100" r="4"/></g>';
        else art = '<path d="M46 82h66a21 21 0 0 0 0-42 30 30 0 0 0-58-3 23 23 0 0 0-8 45Z" fill="#fff" stroke="#d9e5eb" stroke-width="3"/><path d="m84 83-13 21h13l-7 19 24-28H87l9-12Z" fill="#f3bf59"/>';
        return art;
      }

      function drawChart(values) {
        const svg = document.getElementById("chart");
        const width = 864, height = 108, padX = 6, padY = 15;
        svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
        const nums = values.map(Number);
        const min = Math.min(...nums), max = Math.max(...nums);
        const span = Math.max(max - min, 4);
        const points = nums.map((v, i) => {
          const x = padX + (i / Math.max(nums.length - 1, 1)) * (width - padX * 2);
          const y = padY + ((max - v + (span - (max - min)) / 2) / span) * (height - padY * 2);
          return [x, y];
        });
        const line = points.map((p, i) => `${i ? "L" : "M"}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(" ");
        const area = `${line} L${points[points.length - 1][0]},${height} L${points[0][0]},${height} Z`;
        const markers = points.filter((_, i) => i % 6 === 0 || i === points.length - 1).map(p => `<circle cx="${p[0]}" cy="${p[1]}" r="3.5" fill="#fff" stroke="#398bd3" stroke-width="2"/>`).join("");
        svg.innerHTML = `<defs><linearGradient id="fill" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="#6ab0e8" stop-opacity=".23"/><stop offset="100%" stop-color="#6ab0e8" stop-opacity="0"/></linearGradient></defs><path d="${area}" fill="url(#fill)"/><path d="${line}" fill="none" stroke="#398bd3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>${markers}`;
      }

      function showError() {
        status.textContent = "Weather data couldn’t be loaded. Please try again later.";
        status.classList.add("error");
      }

      async function load() {
        if (!validDate) {
          status.textContent = "Please provide a date in YYYY-MM-DD format.";
          status.classList.add("error");
          return;
        }
        try {
          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
          });
          const response = await fetch(`${endpoint}?${query}`);
          if (!response.ok) throw new Error("Weather request failed");
          const data = await response.json();
          const dayIndex = data.daily?.time?.indexOf(date) ?? -1;
          if (dayIndex < 0) throw new Error("No daily data");
          const max = data.daily.temperature_2m_max?.[dayIndex];
          const min = data.daily.temperature_2m_min?.[dayIndex];
          const code = data.daily.weather_code?.[dayIndex];
          const hourlyTimes = data.hourly?.time || [];
          const hourlyValues = data.hourly?.temperature_2m || [];
          const pairs = hourlyTimes.map((time, i) => ({ time, value: hourlyValues[i] }))
            .filter(item => item.time.slice(0, 10) === date && Number.isFinite(Number(item.value)));
          if (max == null || min == null || code == null || !pairs.length) throw new Error("Incomplete weather data");

          document.getElementById("location").textContent = locationName;
          document.getElementById("date").textContent = new Intl.DateTimeFormat(undefined, {
            weekday: "long", month: "long", day: "numeric", year: "numeric", timeZone: "UTC"
          }).format(new Date(`${date}T00:00:00Z`));
          document.getElementById("maxTemp").innerHTML = `${Math.round(max)}<span class="unit">°C</span>`;
          document.getElementById("high").textContent = `${Math.round(max)}°`;
          document.getElementById("low").textContent = `${Math.round(min)}°`;
          document.getElementById("condition").textContent = weatherName(code);
          const icon = document.getElementById("weatherIcon");
          icon.innerHTML = iconFor(code);
          icon.setAttribute("aria-label", weatherName(code));

          drawChart(pairs.map(item => item.value));
          document.getElementById("hours").innerHTML = pairs.map(item => {
            const hour = Number(item.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"><div class="hour-time">${label}</div><div class="hour-temp">${Math.round(item.value)}°</div></div>`;
          }).join("");
          document.getElementById("content").classList.remove("hidden");
          document.getElementById("forecast").classList.remove("hidden");
          status.classList.add("hidden");
        } catch {
          showError();
        }
      }
      load();
    })();
  </script>
</body>
</html>