gpt-5.6-sol @ low · cursor

<!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>
    * { box-sizing: border-box; }
    :root {
      color-scheme: dark;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    body {
      margin: 0;
      min-width: 960px;
      min-height: 800px;
      color: #f8fbff;
      background:
        radial-gradient(circle at 18% 12%, rgba(118, 196, 255, .28), transparent 30%),
        radial-gradient(circle at 82% 78%, rgba(131, 112, 255, .22), transparent 34%),
        linear-gradient(145deg, #071526 0%, #102a48 52%, #111b38 100%);
      overflow: hidden;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .22;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
    }
    main {
      width: 1120px;
      height: 680px;
      margin: 60px auto;
      padding: 42px 46px 38px;
      position: relative;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 34px;
      background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.055));
      box-shadow: 0 35px 90px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.17);
      backdrop-filter: blur(24px);
      overflow: hidden;
    }
    main::after {
      content: "";
      position: absolute;
      width: 380px;
      height: 380px;
      right: -170px;
      top: -190px;
      border-radius: 50%;
      background: rgba(124, 209, 255, .13);
      filter: blur(2px);
    }
    header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      position: relative;
      z-index: 1;
    }
    .eyebrow {
      margin-bottom: 8px;
      color: #a9c9e4;
      font-size: 12px;
      font-weight: 750;
      letter-spacing: .2em;
      text-transform: uppercase;
    }
    h1 {
      margin: 0;
      max-width: 670px;
      font-size: 45px;
      line-height: 1.05;
      letter-spacing: -.045em;
    }
    .date {
      margin: 9px 0 0;
      color: #bed0df;
      font-size: 16px;
    }
    .unit {
      padding: 9px 14px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 99px;
      color: #dceeff;
      background: rgba(8,24,42,.25);
      font-size: 13px;
      font-weight: 700;
    }
    .summary {
      height: 170px;
      margin-top: 28px;
      display: flex;
      align-items: center;
      position: relative;
      z-index: 1;
    }
    .weather-icon {
      width: 120px;
      color: #ffe9a6;
      font-size: 82px;
      line-height: 1;
      text-align: center;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
    }
    .condition-wrap {
      width: 270px;
      padding-left: 18px;
    }
    .condition {
      font-size: 24px;
      font-weight: 680;
      letter-spacing: -.02em;
    }
    .caption {
      margin-top: 8px;
      color: #a9bfd1;
      font-size: 13px;
      letter-spacing: .03em;
    }
    .temperatures {
      display: flex;
      align-items: center;
      gap: 42px;
      margin-left: auto;
    }
    .temperature {
      min-width: 140px;
    }
    .temp-label {
      color: #a9bfd1;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .temp-value {
      margin-top: 3px;
      font-size: 58px;
      font-weight: 300;
      line-height: 1;
      letter-spacing: -.06em;
    }
    .divider {
      width: 1px;
      height: 68px;
      background: rgba(255,255,255,.16);
    }
    .chart-panel {
      height: 305px;
      padding: 24px 25px 18px;
      position: relative;
      z-index: 1;
      border: 1px solid rgba(255,255,255,.11);
      border-radius: 24px;
      background: rgba(4,18,33,.24);
    }
    .chart-heading {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }
    h2 {
      margin: 0;
      font-size: 16px;
      letter-spacing: -.01em;
    }
    .chart-note {
      color: #8fa8bc;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .13em;
    }
    #chart {
      display: block;
      width: 100%;
      height: 232px;
      margin-top: 8px;
      overflow: visible;
    }
    .grid-line { stroke: rgba(255,255,255,.08); stroke-width: 1; }
    .axis-text { fill: #89a2b7; font-size: 10px; font-family: inherit; }
    .area { fill: url(#areaGradient); }
    .line {
      fill: none;
      stroke: #8fd7ff;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 3px 5px rgba(88,191,255,.26));
    }
    .point { fill: #dff5ff; stroke: #318ec5; stroke-width: 2; }
    .point-label { fill: #eaf8ff; font-size: 10px; font-weight: 700; font-family: inherit; }
    .state {
      height: 510px;
      display: grid;
      place-content: center;
      gap: 16px;
      text-align: center;
    }
    .spinner {
      width: 42px;
      height: 42px;
      margin: auto;
      border: 3px solid rgba(255,255,255,.14);
      border-top-color: #91dcff;
      border-radius: 50%;
      animation: spin .8s linear infinite;
    }
    .state strong { font-size: 20px; }
    .state span { color: #a9bfd1; }
    .error-symbol {
      color: #ffd0c8;
      font-size: 46px;
    }
    .hidden { display: none !important; }
    @keyframes spin { to { transform: rotate(360deg); } }
  </style>
</head>
<body>
  <main>
    <section id="loading" class="state">
      <div class="spinner"></div>
      <strong>Reading the atmosphere</strong>
      <span>Loading hourly weather data…</span>
    </section>

    <section id="error" class="state hidden" role="alert">
      <div class="error-symbol">☁</div>
      <strong>Weather data unavailable</strong>
      <span>We couldn’t load the forecast for this date. Please try again.</span>
    </section>

    <section id="weather" class="hidden">
      <header>
        <div>
          <div class="eyebrow">Weather report</div>
          <h1 id="location"></h1>
          <p id="date" class="date"></p>
        </div>
        <div class="unit">°C · UTC</div>
      </header>

      <div class="summary">
        <div id="weatherIcon" class="weather-icon" aria-hidden="true"></div>
        <div class="condition-wrap">
          <div id="condition" class="condition"></div>
          <div class="caption">Conditions throughout the day</div>
        </div>
        <div class="temperatures">
          <div class="temperature">
            <div class="temp-label">High</div>
            <div id="maximum" class="temp-value"></div>
          </div>
          <div class="divider"></div>
          <div class="temperature">
            <div class="temp-label">Low</div>
            <div id="minimum" class="temp-value"></div>
          </div>
        </div>
      </div>

      <div class="chart-panel">
        <div class="chart-heading">
          <h2>Hourly temperature</h2>
          <span class="chart-note">Midnight to midnight</span>
        </div>
        <svg id="chart" viewBox="0 0 950 232" role="img" aria-label="Hourly temperature chart">
          <defs>
            <linearGradient id="areaGradient" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#7ccfff" stop-opacity=".36"/>
              <stop offset="100%" stop-color="#7ccfff" stop-opacity=".015"/>
            </linearGradient>
          </defs>
          <g id="grid"></g>
          <path id="area" class="area"></path>
          <path id="line" class="line"></path>
          <g id="points"></g>
          <g id="labels"></g>
        </svg>
      </div>
    </section>
  </main>

  <script>
    (() => {
      const params = new URLSearchParams(location.search);
      const latitude = validNumber(params.get("lat"), 52.52);
      const longitude = validNumber(params.get("lon"), 13.405);
      const place = params.get("name")?.trim() || "Berlin";
      const utcToday = new Date().toISOString().slice(0, 10);
      const requestedDate = validDate(params.get("date")) || utcToday;

      function validNumber(value, fallback) {
        const number = Number(value);
        return Number.isFinite(number) ? number : fallback;
      }

      function validDate(value) {
        if (!value || !/^\d{4}-\d{2}-\d{2}$/.test(value)) return "";
        const date = new Date(value + "T00:00:00Z");
        return !Number.isNaN(date.valueOf()) && date.toISOString().slice(0, 10) === value ? value : "";
      }

      function weatherDetails(code) {
        const conditions = {
          0: ["Clear sky", "☀"],
          1: ["Mainly clear", "🌤"],
          2: ["Partly cloudy", "⛅"],
          3: ["Overcast", "☁"],
          45: ["Foggy", "≋"],
          48: ["Rime 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: ["Thunderstorm", "⛈"],
          96: ["Thunderstorm with hail", "⛈"],
          99: ["Severe thunderstorm", "⛈"]
        };
        return conditions[code] || ["Unknown conditions", "☁"];
      }

      function formatDate(dateString) {
        return new Intl.DateTimeFormat("en", {
          weekday: "long",
          month: "long",
          day: "numeric",
          year: "numeric",
          timeZone: "UTC"
        }).format(new Date(dateString + "T12:00:00Z"));
      }

      function drawChart(times, temperatures) {
        const values = temperatures.map(Number);
        const width = 950;
        const height = 232;
        const left = 42;
        const right = 12;
        const top = 25;
        const bottom = 34;
        const plotWidth = width - left - right;
        const plotHeight = height - top - bottom;
        const rawMin = Math.min(...values);
        const rawMax = Math.max(...values);
        const padding = Math.max(2, (rawMax - rawMin) * .2);
        const min = Math.floor(rawMin - padding);
        const max = Math.ceil(rawMax + padding);
        const range = max - min || 1;
        const x = index => left + index * plotWidth / Math.max(values.length - 1, 1);
        const y = value => top + (max - value) * plotHeight / range;
        const coordinates = values.map((value, index) => [x(index), y(value)]);
        const linePath = coordinates.map((point, index) =>
          `${index ? "L" : "M"}${point[0].toFixed(1)},${point[1].toFixed(1)}`
        ).join(" ");
        const areaPath = `${linePath} L${x(values.length - 1)},${top + plotHeight} L${left},${top + plotHeight} Z`;

        document.getElementById("line").setAttribute("d", linePath);
        document.getElementById("area").setAttribute("d", areaPath);

        const grid = document.getElementById("grid");
        for (let i = 0; i < 4; i++) {
          const gridY = top + i * plotHeight / 3;
          const gridValue = Math.round(max - i * range / 3);
          grid.insertAdjacentHTML("beforeend",
            `<line class="grid-line" x1="${left}" y1="${gridY}" x2="${width - right}" y2="${gridY}"></line>
             <text class="axis-text" x="0" y="${gridY + 4}">${gridValue}°</text>`
          );
        }

        const points = document.getElementById("points");
        const labels = document.getElementById("labels");
        values.forEach((value, index) => {
          if (index % 3 !== 0 && index !== values.length - 1) return;
          const hour = times[index].slice(11, 16);
          points.insertAdjacentHTML("beforeend",
            `<circle class="point" cx="${x(index)}" cy="${y(value)}" r="4"></circle>
             <text class="point-label" text-anchor="middle" x="${x(index)}" y="${y(value) - 11}">${Math.round(value)}°</text>`
          );
          labels.insertAdjacentHTML("beforeend",
            `<text class="axis-text" text-anchor="middle" x="${x(index)}" y="${height - 8}">${hour}</text>`
          );
        });
      }

      async function loadWeather() {
        try {
          const endpoint = requestedDate < utcToday ? "/api/om/archive" : "/api/om/forecast";
          const query = new URLSearchParams({
            latitude: String(latitude),
            longitude: String(longitude),
            daily: "temperature_2m_max,temperature_2m_min,weather_code",
            hourly: "temperature_2m",
            timezone: "UTC",
            temperature_unit: "celsius",
            start_date: requestedDate,
            end_date: requestedDate
          });

          const response = await fetch(`${endpoint}?${query}`);
          if (!response.ok) throw new Error(`HTTP ${response.status}`);
          const data = await response.json();

          const maximum = data.daily?.temperature_2m_max?.[0];
          const minimum = data.daily?.temperature_2m_min?.[0];
          const code = data.daily?.weather_code?.[0];
          const times = data.hourly?.time;
          const temperatures = data.hourly?.temperature_2m;

          if (![maximum, minimum, code].every(Number.isFinite) ||
              !Array.isArray(times) || !Array.isArray(temperatures) ||
              !times.length || times.length !== temperatures.length ||
              temperatures.some(value => !Number.isFinite(value))) {
            throw new Error("Incomplete weather response");
          }

          const [condition, icon] = weatherDetails(code);
          document.getElementById("location").textContent = place;
          document.getElementById("date").textContent = formatDate(requestedDate);
          document.getElementById("weatherIcon").textContent = icon;
          document.getElementById("condition").textContent = condition;
          document.getElementById("maximum").textContent = `${Math.round(maximum)}°`;
          document.getElementById("minimum").textContent = `${Math.round(minimum)}°`;
          drawChart(times, temperatures);

          document.getElementById("loading").classList.add("hidden");
          document.getElementById("weather").classList.remove("hidden");
        } catch (error) {
          document.getElementById("loading").classList.add("hidden");
          document.getElementById("error").classList.remove("hidden");
        }
      }

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