gpt-6-sol · codex

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Weather, at a glance</title>
  <style>
    :root {
      color-scheme: dark;
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-synthesis: none;
      --text: #f8f6ef;
      --muted: #a6b4bd;
      --accent: #ffc477;
    }

    * { box-sizing: border-box; }

    body {
      min-width: 320px;
      min-height: 100vh;
      margin: 0;
      display: grid;
      place-items: center;
      color: var(--text);
      background: #07151c;
    }

    .card {
      position: relative;
      isolation: isolate;
      width: min(1200px, calc(100vw - 48px));
      min-height: 744px;
      overflow: hidden;
      padding: 42px 52px 38px;
      border: 1px solid rgba(219, 235, 235, .14);
      border-radius: 30px;
      background:
        radial-gradient(ellipse 610px 410px at 84% 24%, rgba(117, 104, 93, .31), transparent 76%),
        radial-gradient(ellipse 700px 500px at 8% 98%, rgba(31, 91, 102, .22), transparent 75%),
        linear-gradient(135deg, #1b343b 0%, #102831 48%, #0c202a 100%);
      box-shadow: 0 36px 100px rgba(0, 0, 0, .35);
    }

    .card::before {
      position: absolute;
      z-index: -1;
      inset: 0;
      content: "";
      opacity: .25;
      background-image: radial-gradient(rgba(255,255,255,.27) .55px, transparent .55px);
      background-size: 7px 7px;
      mask-image: linear-gradient(to bottom, black, transparent 85%);
      pointer-events: none;
    }

    .topline, .heading, .section-heading, .temperature-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .topline {
      padding-bottom: 25px;
      border-bottom: 1px solid rgba(224, 238, 238, .13);
    }

    .brand, .eyebrow, .date-label, .section-kicker, .unit {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .19em;
      text-transform: uppercase;
    }

    .brand { display: flex; align-items: center; gap: 11px; color: #e4ede9; }
    .brand-mark {
      width: 20px;
      height: 20px;
      border: 1.5px solid var(--accent);
      border-radius: 50%;
      box-shadow: 8px -5px 0 -6px var(--accent), -7px 5px 0 -5px var(--accent);
    }
    .top-note { color: #a8b9b9; font-size: 12px; letter-spacing: .06em; }

    .heading { align-items: flex-start; margin-top: 39px; }
    .eyebrow, .section-kicker { color: var(--accent); }
    h1 {
      max-width: 660px;
      margin: 12px 0 0;
      font-size: clamp(42px, 5.1vw, 68px);
      font-weight: 550;
      letter-spacing: -.065em;
      line-height: 1.05;
      overflow-wrap: anywhere;
    }
    .date-block { padding-top: 5px; text-align: right; }
    .date-label { color: #91aab0; }
    .date-value { margin-top: 9px; font-size: 18px; font-weight: 500; }

    .hero {
      display: grid;
      grid-template-columns: 1fr 390px;
      align-items: center;
      min-height: 285px;
    }

    .condition { margin: 18px 0 7px; color: #d4e0dd; font-size: 19px; font-weight: 400; }
    .temperature-row { justify-content: flex-start; align-items: baseline; gap: 27px; }
    .high {
      font-size: clamp(92px, 10vw, 138px);
      font-weight: 350;
      letter-spacing: -.105em;
      line-height: 1.05;
    }
    .high sup { position: relative; top: -25px; margin-left: 8px; font-size: 39px; letter-spacing: -.03em; }
    .low-group { display: flex; flex-direction: column; gap: 7px; padding-left: 24px; border-left: 1px solid rgba(222,237,236,.23); }
    .low-group span:first-child { color: #99afb4; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
    .low-group strong { font-size: 30px; font-weight: 450; letter-spacing: -.045em; }
    .unit { margin-top: 1px; color: #8fa5a9; }

    .art {
      position: relative;
      height: 285px;
      display: grid;
      place-items: center;
    }
    .orbit {
      position: absolute;
      width: 296px;
      height: 296px;
      border: 1px solid rgba(240, 231, 207, .09);
      border-radius: 50%;
    }
    .orbit::after {
      position: absolute;
      inset: 31px;
      border: 1px solid rgba(240, 231, 207, .12);
      border-radius: 50%;
      content: "";
    }
    .sun {
      position: relative;
      width: 174px;
      height: 174px;
      border-radius: 50%;
      background: radial-gradient(circle at 34% 30%, #ffe0a6 0%, #ffc377 47%, #ed8a62 100%);
      box-shadow: 0 0 68px 21px rgba(250, 162, 100, .22), inset -17px -20px 35px rgba(198, 82, 69, .18);
    }
    .cloud {
      position: absolute;
      right: 29px;
      bottom: 43px;
      display: none;
      width: 195px;
      height: 59px;
      border-radius: 40px;
      background: linear-gradient(140deg, #d2ded7, #839ea5);
      box-shadow: 0 15px 26px rgba(5, 25, 34, .24);
    }
    .cloud::before, .cloud::after {
      position: absolute;
      bottom: 20px;
      border-radius: 50%;
      content: "";
      background: inherit;
    }
    .cloud::before { left: 29px; width: 82px; height: 82px; }
    .cloud::after { right: 29px; width: 104px; height: 104px; }
    .precipitation {
      position: absolute;
      right: 70px;
      bottom: 5px;
      display: none;
      color: #91cfdb;
      font-size: 28px;
      letter-spacing: 15px;
      transform: rotate(15deg);
    }
    .art.cloudy .cloud, .art.rainy .cloud, .art.snowy .cloud, .art.stormy .cloud, .art.foggy .cloud { display: block; }
    .art.cloudy .sun, .art.rainy .sun, .art.snowy .sun, .art.stormy .sun, .art.foggy .sun { opacity: .65; transform: translate(-29px, -24px) scale(.86); }
    .art.rainy .precipitation, .art.snowy .precipitation, .art.stormy .precipitation { display: block; }
    .art.snowy .precipitation { color: #e3edf0; }
    .art.stormy .precipitation { color: #ffdc97; }
    .art.foggy .cloud { opacity: .55; }

    .hourly {
      margin-top: 7px;
      padding: 25px 26px 21px;
      border: 1px solid rgba(221, 237, 233, .12);
      border-radius: 19px;
      background: rgba(5, 22, 30, .32);
      backdrop-filter: blur(10px);
    }
    .section-heading { margin-bottom: 11px; }
    h2 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.025em; }
    .section-kicker { color: #95abb0; font-size: 10px; }
    .chart { display: block; width: 100%; height: 110px; overflow: visible; }
    .hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 0; }
    .hour { min-width: 0; text-align: center; }
    .hour-temp { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; }
    .hour-time { display: block; margin-top: 9px; color: #849da4; font-size: 10px; white-space: nowrap; }

    .footer {
      display: flex;
      justify-content: space-between;
      margin-top: 19px;
      color: #89a1a6;
      font-size: 11px;
      letter-spacing: .035em;
    }
    .error {
      margin: 30px 0;
      padding: 24px;
      border: 1px solid rgba(255, 196, 119, .3);
      border-radius: 16px;
      color: #ffe0bb;
      background: rgba(255, 196, 119, .08);
      font-size: 16px;
    }
    [hidden] { display: none !important; }

    @media (max-width: 760px) {
      body { display: block; }
      .card { width: 100%; min-height: 100vh; padding: 28px 22px; border-radius: 0; }
      .heading { gap: 16px; }
      .date-value { font-size: 13px; }
      .hero { grid-template-columns: 1fr; min-height: auto; }
      .art { height: 180px; grid-row: 1; justify-self: end; width: 230px; margin-top: -10px; }
      .orbit { transform: scale(.65); }
      .sun { transform: scale(.75); }
      .cloud { transform: scale(.75); transform-origin: bottom right; }
      .temperature-row { gap: 12px; }
      .high { font-size: 94px; }
      .hourly { overflow-x: auto; padding: 20px 15px; }
      .chart, .hours { min-width: 860px; }
      .footer { gap: 12px; }
    }
  </style>
</head>
<body>
  <main class="card">
    <header class="topline">
      <div class="brand"><span class="brand-mark" aria-hidden="true"></span> DAYLIGHT / WEATHER</div>
      <div class="top-note">A day in detail &nbsp;·&nbsp; UTC</div>
    </header>

    <div class="heading">
      <div>
        <div class="eyebrow">The forecast for</div>
        <h1 id="location">Berlin</h1>
      </div>
      <div class="date-block">
        <div class="date-label">Selected day</div>
        <div class="date-value" id="date"></div>
      </div>
    </div>

    <div id="content">
      <section class="hero" aria-label="Daily weather">
        <div>
          <p class="condition" id="condition">Loading conditions…</p>
          <div class="temperature-row">
            <div class="high"><span id="high">—</span><sup>°</sup></div>
            <div class="low-group"><span>Low</span><strong id="low">—°</strong></div>
          </div>
          <div class="unit">TEMPERATURE IN CELSIUS</div>
        </div>
        <div class="art" id="art" aria-hidden="true">
          <div class="orbit"></div>
          <div class="sun"></div>
          <div class="cloud"></div>
          <div class="precipitation" id="precipitation">///</div>
        </div>
      </section>

      <section class="hourly" aria-label="Hourly temperatures">
        <div class="section-heading">
          <h2>Across the day</h2>
          <span class="section-kicker">HOURLY TEMPERATURE · °C</span>
        </div>
        <svg class="chart" id="chart" viewBox="0 0 960 110" preserveAspectRatio="none" role="img" aria-label="Hourly temperature trend"></svg>
        <div class="hours" id="hours"></div>
      </section>
    </div>

    <div class="error" id="error" role="alert" hidden>Weather data could not be loaded for this date and location. Please try again later.</div>
    <footer class="footer">
      <span>ONE PLACE. ONE DAY. THE WHOLE PICTURE.</span>
      <span>Weather data via Open-Meteo</span>
    </footer>
  </main>

  <script>
    (() => {
      const params = new URLSearchParams(window.location.search);
      const today = new Date().toISOString().slice(0, 10);
      const requestedDate = params.get("date");
      const validDate = requestedDate && /^\d{4}-\d{2}-\d{2}$/.test(requestedDate)
        && !Number.isNaN(Date.parse(requestedDate + "T00:00:00Z"));
      const date = validDate ? requestedDate : today;
      const latitude = Number(params.get("lat"));
      const longitude = Number(params.get("lon"));
      const lat = params.has("lat") && Number.isFinite(latitude) && latitude >= -90 && latitude <= 90 ? latitude : 52.52;
      const lon = params.has("lon") && Number.isFinite(longitude) && longitude >= -180 && longitude <= 180 ? longitude : 13.405;
      const name = params.get("name")?.trim() || "Berlin";

      document.getElementById("location").textContent = name;
      document.getElementById("date").textContent = new Intl.DateTimeFormat("en", {
        timeZone: "UTC", weekday: "long", day: "numeric", month: "long", year: "numeric"
      }).format(new Date(date + "T12:00:00Z"));
      document.title = name + " · " + date + " · Weather";

      const conditions = {
        0: ["Clear skies", "clear"],
        1: ["Mainly clear", "clear"],
        2: ["Partly cloudy", "cloudy"],
        3: ["Overcast", "cloudy"],
        45: ["Fog", "foggy"],
        48: ["Depositing rime fog", "foggy"],
        51: ["Light drizzle", "rainy"],
        53: ["Drizzle", "rainy"],
        55: ["Dense drizzle", "rainy"],
        56: ["Light freezing drizzle", "rainy"],
        57: ["Freezing drizzle", "rainy"],
        61: ["Light rain", "rainy"],
        63: ["Rain", "rainy"],
        65: ["Heavy rain", "rainy"],
        66: ["Light freezing rain", "rainy"],
        67: ["Heavy freezing rain", "rainy"],
        71: ["Light snow", "snowy"],
        73: ["Snow", "snowy"],
        75: ["Heavy snow", "snowy"],
        77: ["Snow grains", "snowy"],
        80: ["Light rain showers", "rainy"],
        81: ["Rain showers", "rainy"],
        82: ["Heavy rain showers", "rainy"],
        85: ["Light snow showers", "snowy"],
        86: ["Heavy snow showers", "snowy"],
        95: ["Thunderstorm", "stormy"],
        96: ["Thunderstorm with hail", "stormy"],
        99: ["Thunderstorm with heavy hail", "stormy"]
      };

      function drawChart(temperatures) {
        const svg = document.getElementById("chart");
        const namespace = "http://www.w3.org/2000/svg";
        const make = (tag, attributes) => {
          const element = document.createElementNS(namespace, tag);
          for (const [key, value] of Object.entries(attributes)) element.setAttribute(key, value);
          return element;
        };
        const values = temperatures.map(item => item.temperature);
        const minimum = Math.min(...values) - 2;
        const maximum = Math.max(...values) + 2;
        const points = values.map((value, index) => [
          20 + index * (920 / Math.max(values.length - 1, 1)),
          94 - (value - minimum) / (maximum - minimum) * 77
        ]);
        const path = points.map(([x, y], index) => `${index ? "L" : "M"} ${x.toFixed(1)} ${y.toFixed(1)}`).join(" ");
        const defs = make("defs", {});
        const gradient = make("linearGradient", { id: "chartFill", x1: "0", y1: "0", x2: "0", y2: "1" });
        gradient.append(make("stop", { offset: "0%", "stop-color": "#ffc477", "stop-opacity": ".23" }));
        gradient.append(make("stop", { offset: "100%", "stop-color": "#ffc477", "stop-opacity": "0" }));
        defs.append(gradient);
        svg.append(defs);
        svg.append(make("path", {
          d: `${path} L ${points.at(-1)[0].toFixed(1)} 110 L 20 110 Z`,
          fill: "url(#chartFill)"
        }));
        svg.append(make("path", {
          d: path, fill: "none", stroke: "#ffc477", "stroke-width": "2.5",
          "stroke-linecap": "round", "stroke-linejoin": "round", "vector-effect": "non-scaling-stroke"
        }));
        for (const [index, [x, y]] of points.entries()) {
          if (index % 3 === 0 || index === points.length - 1) {
            svg.append(make("circle", {
              cx: x, cy: y, r: "3.5", fill: "#ffd39a",
              stroke: "#183039", "stroke-width": "2", "vector-effect": "non-scaling-stroke"
            }));
          }
        }
      }

      async function load() {
        try {
          const query = new URLSearchParams({
            latitude: String(lat),
            longitude: String(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 endpoint = date < today ? "/api/om/archive" : "/api/om/forecast";
          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);
          const high = data.daily?.temperature_2m_max?.[dayIndex];
          const low = data.daily?.temperature_2m_min?.[dayIndex];
          const code = data.daily?.weather_code?.[dayIndex];
          const hourly = (data.hourly?.time || [])
            .map((time, index) => ({ time, temperature: data.hourly?.temperature_2m?.[index] }))
            .filter(item => item.time.startsWith(date) && Number.isFinite(item.temperature));

          if (!Number.isFinite(high) || !Number.isFinite(low) || !hourly.length) {
            throw new Error("Incomplete weather data");
          }

          const [description, type] = conditions[code] || ["Weather conditions unavailable", "cloudy"];
          document.getElementById("condition").textContent = description;
          document.getElementById("high").textContent = Math.round(high);
          document.getElementById("low").textContent = `${Math.round(low)}°`;
          document.getElementById("art").classList.add(type);
          if (type === "snowy") document.getElementById("precipitation").textContent = "✳ ✳";
          if (type === "stormy") document.getElementById("precipitation").textContent = "ϟ ϟ";

          const hours = document.getElementById("hours");
          hours.style.gridTemplateColumns = `repeat(${hourly.length}, minmax(0, 1fr))`;
          for (const item of hourly) {
            const cell = document.createElement("div");
            cell.className = "hour";
            const temp = document.createElement("span");
            temp.className = "hour-temp";
            temp.textContent = `${Math.round(item.temperature)}°`;
            const time = document.createElement("span");
            time.className = "hour-time";
            time.textContent = item.time.slice(11, 13);
            cell.append(temp, time);
            hours.append(cell);
          }
          drawChart(hourly);
        } catch (error) {
          document.getElementById("content").hidden = true;
          document.getElementById("error").hidden = false;
        }
      }

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