gpt-5.3-codex @ high · cursor

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Weather Card</title>
  <style>
    :root {
      --bg-1: #0b1020;
      --bg-2: #111a33;
      --bg-3: #1b2a52;
      --glass: rgba(255, 255, 255, 0.14);
      --glass-strong: rgba(255, 255, 255, 0.2);
      --line: rgba(255, 255, 255, 0.22);
      --text: #f4f7ff;
      --muted: #b8c3de;
      --max-color: #ff9c73;
      --min-color: #7bd7ff;
      --error: #ffd5d0;
      --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    }

    * {
      box-sizing: border-box;
    }

    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(1200px 600px at 10% 0%, #294585 0%, transparent 65%),
        radial-gradient(900px 500px at 90% 100%, #233f80 0%, transparent 65%),
        linear-gradient(145deg, var(--bg-1), var(--bg-2) 45%, var(--bg-3));
      overflow: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: -20%;
      background:
        radial-gradient(circle at 70% 30%, rgba(161, 197, 255, 0.25), transparent 38%),
        radial-gradient(circle at 25% 75%, rgba(148, 236, 255, 0.2), transparent 42%);
      filter: blur(20px);
      pointer-events: none;
    }

    .app-shell {
      width: 100%;
      height: 100%;
      min-width: 1280px;
      min-height: 800px;
      display: grid;
      place-items: center;
      padding: 28px;
    }

    .weather-card {
      position: relative;
      width: min(1120px, 100%);
      min-height: 720px;
      border-radius: 28px;
      border: 1px solid var(--line);
      background: linear-gradient(165deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
      backdrop-filter: blur(12px) saturate(130%);
      box-shadow: var(--shadow);
      padding: 30px 34px 28px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      overflow: hidden;
    }

    .weather-card::after {
      content: "";
      position: absolute;
      top: -150px;
      right: -130px;
      width: 360px;
      height: 360px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 68%);
      pointer-events: none;
    }

    .card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 24px;
    }

    .eyebrow {
      margin: 0 0 8px;
      color: var(--muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 12px;
      font-weight: 600;
    }

    .location {
      margin: 0;
      font-size: 44px;
      font-weight: 750;
      line-height: 1.1;
      letter-spacing: -0.02em;
      text-wrap: balance;
      max-width: 620px;
    }

    .date-text {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 17px;
      font-weight: 500;
    }

    .condition-panel {
      min-width: 320px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.07));
      padding: 16px 18px;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .condition-icon {
      width: 64px;
      height: 64px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.12);
      display: grid;
      place-items: center;
      font-size: 34px;
      line-height: 1;
    }

    .condition-label {
      margin: 0 0 4px;
      color: var(--muted);
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 600;
    }

    .condition-text {
      margin: 0;
      font-size: 22px;
      line-height: 1.2;
      font-weight: 650;
    }

    .temps {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .temp-card {
      border-radius: 22px;
      border: 1px solid var(--line);
      padding: 20px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 136px;
      position: relative;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.12);
    }

    .temp-card::after {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0.25;
      pointer-events: none;
    }

    .temp-card.max::after {
      background: radial-gradient(circle at 10% 10%, var(--max-color), transparent 60%);
    }

    .temp-card.min::after {
      background: radial-gradient(circle at 90% 10%, var(--min-color), transparent 60%);
    }

    .temp-title {
      margin: 0 0 8px;
      color: var(--muted);
      font-size: 14px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-weight: 600;
    }

    .temp-value {
      margin: 0;
      font-size: 56px;
      line-height: 1;
      font-weight: 760;
      letter-spacing: -0.03em;
    }

    .temp-pill {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 8px 12px;
      color: #f0f5ff;
      font-size: 13px;
      font-weight: 650;
      background: rgba(255, 255, 255, 0.07);
      z-index: 1;
    }

    .hourly-panel {
      border: 1px solid var(--line);
      border-radius: 22px;
      background: rgba(10, 16, 34, 0.24);
      padding: 16px 16px 14px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      flex: 1;
      min-height: 0;
    }

    .hourly-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 14px;
      padding: 0 4px;
    }

    .hourly-title {
      margin: 0;
      font-size: 20px;
      font-weight: 680;
      letter-spacing: -0.01em;
    }

    .hourly-meta {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 550;
      white-space: nowrap;
    }

    .hourly-list {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 2px 4px 8px;
      min-height: 0;
      scroll-behavior: smooth;
    }

    .hourly-list::-webkit-scrollbar {
      height: 8px;
    }

    .hourly-list::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.08);
      border-radius: 999px;
    }

    .hourly-list::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.25);
      border-radius: 999px;
    }

    .hourly-item {
      min-width: 78px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
      padding: 10px 8px;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 8px;
      align-items: end;
    }

    .hour {
      text-align: center;
      color: #d9e2f8;
      font-size: 12px;
      font-weight: 650;
      letter-spacing: 0.04em;
    }

    .bar-track {
      width: 16px;
      height: 88px;
      margin: 0 auto;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
      display: flex;
      align-items: flex-end;
      overflow: hidden;
    }

    .bar-fill {
      width: 100%;
      height: var(--fill-height, 45%);
      background: linear-gradient(180deg, #8fe8ff, #77b8ff 48%, #9ca8ff 72%, #ff9b73 100%);
      border-radius: 999px;
      box-shadow: 0 0 18px rgba(129, 200, 255, 0.45);
    }

    .hour-temp {
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      color: #f4f8ff;
    }

    .status {
      margin: 0;
      min-height: 22px;
      color: #d8e3fd;
      font-size: 14px;
      font-weight: 520;
      padding: 0 4px;
    }

    .status.error {
      color: var(--error);
    }

    [hidden] {
      display: none !important;
    }

    @media (max-width: 1300px) {
      .app-shell {
        min-width: 100%;
      }
      .location {
        font-size: 40px;
      }
    }
  </style>
</head>
<body>
  <div class="app-shell">
    <main class="weather-card" aria-live="polite">
      <header class="card-top">
        <div>
          <p class="eyebrow">Weather Snapshot</p>
          <h1 id="locationName" class="location">Berlin</h1>
          <p id="dateText" class="date-text"></p>
        </div>
        <div class="condition-panel">
          <div id="conditionIcon" class="condition-icon" aria-hidden="true">⏳</div>
          <div>
            <p class="condition-label">Condition</p>
            <p id="conditionText" class="condition-text">Loading...</p>
          </div>
        </div>
      </header>

      <section class="temps">
        <article class="temp-card max">
          <div>
            <p class="temp-title">Maximum</p>
            <p id="maxTemp" class="temp-value">--°C</p>
          </div>
          <span class="temp-pill">Day High</span>
        </article>
        <article class="temp-card min">
          <div>
            <p class="temp-title">Minimum</p>
            <p id="minTemp" class="temp-value">--°C</p>
          </div>
          <span class="temp-pill">Night Low</span>
        </article>
      </section>

      <section class="hourly-panel">
        <div class="hourly-head">
          <h2 class="hourly-title">Hourly Temperatures (UTC)</h2>
          <p id="hourlyMeta" class="hourly-meta">Awaiting data...</p>
        </div>
        <div id="hourlyList" class="hourly-list"></div>
      </section>

      <p id="status" class="status"></p>
    </main>
  </div>

  <script>
    (function () {
      const defaults = {
        lat: 52.52,
        lon: 13.405,
        name: "Berlin",
        date: todayUtcDate()
      };

      const params = new URLSearchParams(window.location.search);
      const lat = parseCoordinate(params.get("lat"), defaults.lat, -90, 90);
      const lon = parseCoordinate(params.get("lon"), defaults.lon, -180, 180);
      const locationName = (params.get("name") || defaults.name).trim() || defaults.name;
      const requestedDate = normalizeDate(params.get("date")) || defaults.date;

      const locationEl = document.getElementById("locationName");
      const dateEl = document.getElementById("dateText");
      const conditionEl = document.getElementById("conditionText");
      const conditionIconEl = document.getElementById("conditionIcon");
      const maxEl = document.getElementById("maxTemp");
      const minEl = document.getElementById("minTemp");
      const hourlyListEl = document.getElementById("hourlyList");
      const hourlyMetaEl = document.getElementById("hourlyMeta");
      const statusEl = document.getElementById("status");

      locationEl.textContent = locationName;
      dateEl.textContent = formatDateHuman(requestedDate);
      setStatus("Loading weather data...");

      loadWeather(lat, lon, requestedDate).catch(function () {
        conditionEl.textContent = "Unavailable";
        conditionIconEl.textContent = "⚠️";
        maxEl.textContent = "--°C";
        minEl.textContent = "--°C";
        hourlyMetaEl.textContent = "No data";
        hourlyListEl.replaceChildren();
        setStatus("Weather data could not be loaded.", true);
      });

      async function loadWeather(latitude, longitude, date) {
        const endpoint = date < todayUtcDate() ? "/api/om/archive" : "/api/om/forecast";

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

        const response = await fetch(endpoint + "?" + q.toString(), {
          method: "GET",
          headers: { "Accept": "application/json" }
        });

        if (!response.ok) {
          throw new Error("HTTP " + response.status);
        }

        const data = await response.json();
        const maxTemp = pickDailyValue(data.daily, "temperature_2m_max", date);
        const minTemp = pickDailyValue(data.daily, "temperature_2m_min", date);
        const weatherCode = pickDailyValue(data.daily, "weather_code", date);

        const hourly = buildHourly(data.hourly, date);

        if (
          maxTemp === null ||
          minTemp === null ||
          weatherCode === null ||
          hourly.length === 0
        ) {
          throw new Error("Incomplete weather payload");
        }

        const condition = weatherCodeToText(weatherCode);
        const icon = weatherCodeToIcon(weatherCode);

        conditionEl.textContent = condition;
        conditionIconEl.textContent = icon;
        maxEl.textContent = formatTemp(maxTemp);
        minEl.textContent = formatTemp(minTemp);
        hourlyMetaEl.textContent = hourly.length + " hourly points";
        renderHourly(hourly);

        const sourceLabel = endpoint.endsWith("/archive") ? "archive" : "forecast";
        setStatus("Loaded from " + sourceLabel + " endpoint.");
      }

      function renderHourly(hours) {
        hourlyListEl.replaceChildren();

        let min = Infinity;
        let max = -Infinity;
        for (let i = 0; i < hours.length; i++) {
          const t = hours[i].temperature;
          if (t < min) min = t;
          if (t > max) max = t;
        }
        const range = Math.max(max - min, 0.001);

        for (let i = 0; i < hours.length; i++) {
          const item = hours[i];
          const normalized = (item.temperature - min) / range;
          const fillHeight = 24 + normalized * 66;

          const card = document.createElement("article");
          card.className = "hourly-item";

          const hour = document.createElement("div");
          hour.className = "hour";
          hour.textContent = item.time.slice(11, 16);

          const track = document.createElement("div");
          track.className = "bar-track";

          const fill = document.createElement("div");
          fill.className = "bar-fill";
          fill.style.setProperty("--fill-height", fillHeight.toFixed(1) + "%");
          track.appendChild(fill);

          const temp = document.createElement("div");
          temp.className = "hour-temp";
          temp.textContent = formatTemp(item.temperature);

          card.appendChild(hour);
          card.appendChild(track);
          card.appendChild(temp);

          hourlyListEl.appendChild(card);
        }
      }

      function buildHourly(hourlyObj, date) {
        if (
          !hourlyObj ||
          !Array.isArray(hourlyObj.time) ||
          !Array.isArray(hourlyObj.temperature_2m)
        ) {
          return [];
        }

        const out = [];
        for (let i = 0; i < hourlyObj.time.length; i++) {
          const time = hourlyObj.time[i];
          const temperature = hourlyObj.temperature_2m[i];
          if (
            typeof time === "string" &&
            time.slice(0, 10) === date &&
            Number.isFinite(temperature)
          ) {
            out.push({ time: time, temperature: temperature });
          }
        }
        return out;
      }

      function pickDailyValue(dailyObj, key, date) {
        if (!dailyObj || !Array.isArray(dailyObj[key])) return null;

        const values = dailyObj[key];
        if (Array.isArray(dailyObj.time)) {
          const idx = dailyObj.time.indexOf(date);
          if (idx !== -1 && idx < values.length) {
            const value = values[idx];
            return Number.isFinite(value) ? value : null;
          }
        }

        const fallback = values[0];
        return Number.isFinite(fallback) ? fallback : null;
      }

      function parseCoordinate(value, fallback, min, max) {
        const num = Number(value);
        if (Number.isFinite(num) && num >= min && num <= max) {
          return num;
        }
        return fallback;
      }

      function todayUtcDate() {
        return new Date().toISOString().slice(0, 10);
      }

      function normalizeDate(input) {
        if (!input) return null;
        if (!/^\d{4}-\d{2}-\d{2}$/.test(input)) return null;
        const dt = new Date(input + "T00:00:00Z");
        if (Number.isNaN(dt.getTime())) return null;
        const normalized = dt.toISOString().slice(0, 10);
        return normalized === input ? input : null;
      }

      function formatDateHuman(dateStr) {
        const dt = new Date(dateStr + "T00:00:00Z");
        return new Intl.DateTimeFormat("en-US", {
          weekday: "long",
          year: "numeric",
          month: "long",
          day: "numeric",
          timeZone: "UTC"
        }).format(dt);
      }

      function formatTemp(value) {
        return Math.round(value) + "°C";
      }

      function setStatus(message, isError) {
        statusEl.textContent = message;
        statusEl.classList.toggle("error", !!isError);
      }

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

      function weatherCodeToIcon(code) {
        const c = Number(code);
        if (c === 0) return "☀️";
        if (c === 1 || c === 2) return "🌤️";
        if (c === 3) return "☁️";
        if (c === 45 || c === 48) return "🌫️";
        if (c === 51 || c === 53 || c === 55 || c === 56 || c === 57) return "🌦️";
        if (c === 61 || c === 63 || c === 65 || c === 66 || c === 67) return "🌧️";
        if (c === 71 || c === 73 || c === 75 || c === 77 || c === 85 || c === 86) return "❄️";
        if (c === 80 || c === 81 || c === 82) return "🌦️";
        if (c === 95 || c === 96 || c === 99) return "⛈️";
        return "🌡️";
      }
    })();
  </script>
</body>
</html>