gpt-5.5 @ extra-high · cursor-xl

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Weather Card</title>
  <style>
    :root {
      color-scheme: dark;
      --bg-a: #09111f;
      --bg-b: #122a44;
      --glass: rgba(255,255,255,.12);
      --glass-strong: rgba(255,255,255,.18);
      --text: #f7fbff;
      --muted: rgba(247,251,255,.72);
      --soft: rgba(247,251,255,.46);
      --line: rgba(255,255,255,.18);
      --warm: #ffd18a;
      --cool: #8ed7ff;
      --accent: #7dd3fc;
      --danger: #fecaca;
    }

    * { box-sizing: border-box; }

    html, body {
      width: 100%;
      min-height: 100%;
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 18% 18%, rgba(125, 211, 252, .28), transparent 32%),
        radial-gradient(circle at 82% 16%, rgba(253, 186, 116, .22), transparent 28%),
        radial-gradient(circle at 55% 90%, rgba(167, 139, 250, .20), transparent 34%),
        linear-gradient(135deg, var(--bg-a), var(--bg-b));
      color: var(--text);
      overflow-x: hidden;
    }

    body {
      min-height: 800px;
      display: grid;
      place-items: center;
      padding: 48px;
    }

    .scene {
      width: min(1120px, calc(100vw - 96px));
      position: relative;
    }

    .orb {
      position: absolute;
      width: 270px;
      height: 270px;
      right: 40px;
      top: -70px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #fff8d6 0 10%, #ffd68a 24%, rgba(255,180,86,.46) 45%, transparent 70%);
      filter: blur(.2px);
      opacity: .85;
      pointer-events: none;
    }

    .card {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 440px;
      gap: 30px;
      min-height: 650px;
      padding: 34px;
      border: 1px solid var(--line);
      border-radius: 38px;
      background:
        linear-gradient(140deg, rgba(255,255,255,.20), rgba(255,255,255,.08) 44%, rgba(255,255,255,.13)),
        rgba(8, 18, 32, .46);
      box-shadow:
        0 40px 100px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.24);
      backdrop-filter: blur(28px) saturate(140%);
      overflow: hidden;
    }

    .card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent),
        radial-gradient(circle at 8% 12%, rgba(255,255,255,.18), transparent 24%);
      opacity: .75;
      pointer-events: none;
    }

    .main, .side {
      position: relative;
      z-index: 1;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 13px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      color: var(--muted);
      font-size: 13px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #67e8f9;
      box-shadow: 0 0 18px #67e8f9;
    }

    h1 {
      max-width: 600px;
      margin: 46px 0 8px;
      font-size: clamp(58px, 7vw, 92px);
      line-height: .92;
      letter-spacing: -.075em;
      font-weight: 750;
    }

    .date {
      margin: 0;
      color: var(--muted);
      font-size: 21px;
      letter-spacing: -.02em;
    }

    .hero {
      display: flex;
      align-items: flex-end;
      gap: 28px;
      margin-top: 72px;
    }

    .icon-wrap {
      width: 150px;
      height: 150px;
      display: grid;
      place-items: center;
      border-radius: 40px;
      background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,.36), transparent 42%),
        linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 20px 52px rgba(0,0,0,.24);
    }

    .weather-icon {
      font-size: 82px;
      filter: drop-shadow(0 18px 28px rgba(0,0,0,.32));
    }

    .condition {
      margin: 0 0 12px;
      color: var(--muted);
      font-size: 22px;
      font-weight: 550;
      letter-spacing: -.02em;
    }

    .temps {
      display: flex;
      gap: 14px;
      align-items: center;
    }

    .temp-pill {
      min-width: 142px;
      padding: 17px 18px;
      border-radius: 24px;
      background: rgba(255,255,255,.11);
      border: 1px solid rgba(255,255,255,.16);
    }

    .temp-pill .label {
      display: block;
      margin-bottom: 5px;
      color: var(--soft);
      font-size: 12px;
      letter-spacing: .10em;
      text-transform: uppercase;
    }

    .temp-pill .value {
      font-size: 34px;
      font-weight: 720;
      letter-spacing: -.05em;
    }

    .temp-pill.high .value { color: var(--warm); }
    .temp-pill.low .value { color: var(--cool); }

    .side {
      display: flex;
      flex-direction: column;
      border-radius: 30px;
      background: rgba(4, 12, 24, .30);
      border: 1px solid rgba(255,255,255,.14);
      overflow: hidden;
    }

    .side-head {
      padding: 26px 26px 20px;
      border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .side-title {
      margin: 0;
      font-size: 24px;
      letter-spacing: -.04em;
    }

    .side-subtitle {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 14px;
    }

    .chart {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(24, minmax(10px, 1fr));
      align-items: end;
      gap: 7px;
      padding: 32px 24px 24px;
      min-height: 438px;
    }

    .hour {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      height: 100%;
      min-height: 320px;
    }

    .bar {
      width: 100%;
      min-height: 14px;
      border-radius: 999px 999px 8px 8px;
      background:
        linear-gradient(180deg, rgba(255,209,138,.98), rgba(125,211,252,.88)),
        rgba(255,255,255,.20);
      box-shadow: 0 10px 22px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.28);
    }

    .hour-temp {
      position: absolute;
      bottom: calc(var(--bar-height) + 13px);
      color: rgba(255,255,255,.90);
      font-size: 11px;
      font-weight: 650;
      white-space: nowrap;
      opacity: 0;
      transform: translateY(5px);
      transition: .18s ease;
    }

    .hour:hover .hour-temp {
      opacity: 1;
      transform: translateY(0);
    }

    .hour-label {
      margin-top: 11px;
      color: var(--soft);
      font-size: 11px;
      transform: rotate(-45deg);
      transform-origin: center top;
    }

    .status {
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      min-height: 582px;
      text-align: center;
      padding: 60px;
      grid-column: 1 / -1;
    }

    .status-box {
      max-width: 560px;
      padding: 34px;
      border-radius: 30px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.10);
    }

    .status h2 {
      margin: 0 0 10px;
      font-size: 34px;
      letter-spacing: -.05em;
    }

    .status p {
      margin: 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.55;
    }

    .loader {
      width: 54px;
      height: 54px;
      margin: 0 auto 22px;
      border-radius: 50%;
      border: 3px solid rgba(255,255,255,.18);
      border-top-color: var(--accent);
      animation: spin 1s linear infinite;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    @media (max-width: 980px) {
      body { padding: 28px; }
      .scene { width: 100%; }
      .card { grid-template-columns: 1fr; }
      .side { min-height: 520px; }
    }
  </style>
</head>
<body>
  <main class="scene">
    <div class="orb" aria-hidden="true"></div>
    <section class="card" id="card" aria-live="polite">
      <div class="status">
        <div class="status-box">
          <div class="loader" aria-hidden="true"></div>
          <h2>Loading weather</h2>
          <p>Fetching the forecast for the selected day.</p>
        </div>
      </div>
    </section>
  </main>

  <script>
    (function () {
      const card = document.getElementById("card");
      const params = new URLSearchParams(window.location.search);
      const todayUtc = new Date().toISOString().slice(0, 10);

      const requested = {
        lat: numberOrDefault(params.get("lat"), 52.52),
        lon: numberOrDefault(params.get("lon"), 13.405),
        name: (params.get("name") || "Berlin").trim() || "Berlin",
        date: validDate(params.get("date")) ? params.get("date") : todayUtc
      };

      loadWeather(requested).then(renderWeather).catch(function () {
        renderError(requested);
      });

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

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

      function isPastDate(value) {
        return value < todayUtc;
      }

      function weatherMeta(code) {
        const map = {
          0: ["Clear sky", "☀️"],
          1: ["Mainly clear", "🌤️"],
          2: ["Partly cloudy", "⛅"],
          3: ["Overcast", "☁️"],
          45: ["Fog", "🌫️"],
          48: ["Rime fog", "🌫️"],
          51: ["Light drizzle", "🌦️"],
          53: ["Drizzle", "🌦️"],
          55: ["Dense drizzle", "🌧️"],
          56: ["Freezing drizzle", "🌧️"],
          57: ["Freezing drizzle", "🌧️"],
          61: ["Slight rain", "🌧️"],
          63: ["Rain", "🌧️"],
          65: ["Heavy rain", "🌧️"],
          66: ["Freezing rain", "🌧️"],
          67: ["Freezing rain", "🌧️"],
          71: ["Slight snow", "🌨️"],
          73: ["Snow", "🌨️"],
          75: ["Heavy snow", "❄️"],
          77: ["Snow grains", "❄️"],
          80: ["Rain showers", "🌦️"],
          81: ["Rain showers", "🌧️"],
          82: ["Violent showers", "⛈️"],
          85: ["Snow showers", "🌨️"],
          86: ["Heavy snow showers", "❄️"],
          95: ["Thunderstorm", "⛈️"],
          96: ["Thunderstorm with hail", "⛈️"],
          99: ["Thunderstorm with hail", "⛈️"]
        };
        return map[code] || ["Unknown conditions", "🌡️"];
      }

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

      function formatTemp(value) {
        return Number.isFinite(value) ? Math.round(value) + "°C" : "—";
      }

      async function loadWeather(config) {
        const path = isPastDate(config.date) ? "/api/om/archive" : "/api/om/forecast";
        const url = new URL(path, window.location.origin);

        url.search = new URLSearchParams({
          latitude: String(config.lat),
          longitude: String(config.lon),
          daily: "temperature_2m_max,temperature_2m_min,weather_code",
          hourly: "temperature_2m",
          timezone: "UTC",
          temperature_unit: "celsius",
          start_date: config.date,
          end_date: config.date
        }).toString();

        const response = await fetch(url.toString(), { headers: { "Accept": "application/json" } });
        if (!response.ok) throw new Error("Weather request failed");

        const data = await response.json();
        const dailyIndex = (data.daily && data.daily.time || []).indexOf(config.date);
        const times = data.hourly && Array.isArray(data.hourly.time) ? data.hourly.time : [];
        const temps = data.hourly && Array.isArray(data.hourly.temperature_2m) ? data.hourly.temperature_2m : [];

        if (dailyIndex < 0 || !times.length || !temps.length) throw new Error("Weather data missing");

        const hourly = times.map(function (time, i) {
          return { time: time, temp: temps[i] };
        }).filter(function (item) {
          return item.time && item.time.slice(0, 10) === config.date && Number.isFinite(item.temp);
        });

        if (!hourly.length) throw new Error("Hourly data missing");

        return {
          config: config,
          max: data.daily.temperature_2m_max[dailyIndex],
          min: data.daily.temperature_2m_min[dailyIndex],
          code: data.daily.weather_code[dailyIndex],
          hourly: hourly
        };
      }

      function renderWeather(result) {
        const meta = weatherMeta(result.code);
        const temps = result.hourly.map(function (h) { return h.temp; });
        const low = Math.min.apply(null, temps);
        const high = Math.max.apply(null, temps);
        const spread = Math.max(1, high - low);

        card.innerHTML = [
          '<section class="main">',
            '<div class="eyebrow"><span class="dot"></span><span>Weather card</span></div>',
            '<h1>' + escapeHtml(result.config.name) + '</h1>',
            '<p class="date">' + escapeHtml(formatDate(result.config.date)) + '</p>',
            '<div class="hero">',
              '<div class="icon-wrap"><div class="weather-icon" aria-hidden="true">' + meta[1] + '</div></div>',
              '<div>',
                '<p class="condition">' + escapeHtml(meta[0]) + '</p>',
                '<div class="temps">',
                  '<div class="temp-pill high"><span class="label">Maximum</span><span class="value">' + formatTemp(result.max) + '</span></div>',
                  '<div class="temp-pill low"><span class="label">Minimum</span><span class="value">' + formatTemp(result.min) + '</span></div>',
                '</div>',
              '</div>',
            '</div>',
          '</section>',
          '<aside class="side">',
            '<div class="side-head">',
              '<h2 class="side-title">Hourly Temperatures</h2>',
              '<p class="side-subtitle">UTC, Celsius</p>',
            '</div>',
            '<div class="chart">',
              result.hourly.map(function (hour) {
                const height = 18 + ((hour.temp - low) / spread) * 82;
                const label = hour.time.slice(11, 13);
                return '<div class="hour" style="--bar-height:' + height.toFixed(2) + '%">' +
                  '<span class="hour-temp">' + formatTemp(hour.temp) + '</span>' +
                  '<div class="bar" style="height:' + height.toFixed(2) + '%"></div>' +
                  '<span class="hour-label">' + label + ':00</span>' +
                '</div>';
              }).join(""),
            '</div>',
          '</aside>'
        ].join("");
      }

      function renderError(config) {
        card.innerHTML = [
          '<div class="status">',
            '<div class="status-box">',
              '<h2>Weather data cannot be loaded</h2>',
              '<p>The page could not load weather data for ' + escapeHtml(config.name) + ' on ' + escapeHtml(formatDate(config.date)) + '. Please check the date, coordinates, or try again later.</p>',
            '</div>',
          '</div>'
        ].join("");
      }

      function escapeHtml(value) {
        return String(value).replace(/[&<>"']/g, function (ch) {
          return ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[ch];
        });
      }
    })();
  </script>
</body>
</html>