gpt-5.6-luna @ high · cursor-xl

<!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: #091525;
      --bg-soft: #10243a;
      --card: rgba(21, 45, 67, .72);
      --card-light: rgba(255, 255, 255, .08);
      --line: rgba(255, 255, 255, .12);
      --text: #f3f8fc;
      --muted: #9fb4c6;
      --accent: #ffbf69;
      --accent-2: #75d5dd;
      --danger: #ff9d8e;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      min-width: 1100px;
      min-height: 100%;
      color: var(--text);
      background: var(--bg);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body {
      min-height: 800px;
      overflow-x: auto;
      background:
        radial-gradient(circle at 10% 0%, rgba(67, 128, 163, .28), transparent 32%),
        radial-gradient(circle at 90% 8%, rgba(255, 184, 106, .15), transparent 25%),
        linear-gradient(135deg, #081321 0%, #0d2034 52%, #122b42 100%);
    }

    .shell {
      width: 1150px;
      min-height: 800px;
      margin: 0 auto;
      padding: 42px 0 34px;
      position: relative;
    }

    .shell::before {
      content: "";
      position: absolute;
      inset: 0 -120px;
      pointer-events: none;
      opacity: .22;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(to bottom, black, transparent 85%);
    }

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

    header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 24px;
    }

    .eyebrow {
      margin: 0 0 9px;
      color: var(--accent-2);
      font-size: 11px;
      font-weight: 750;
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      font-size: 31px;
      font-weight: 680;
      letter-spacing: -.045em;
      line-height: 1.08;
    }

    .header-date {
      color: var(--muted);
      font-size: 13px;
      text-align: right;
      line-height: 1.65;
    }

    .weather-card {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 27px;
      background: linear-gradient(145deg, rgba(24, 53, 77, .88), rgba(12, 31, 49, .82));
      box-shadow: 0 28px 80px rgba(0, 0, 0, .24), inset 0 1px rgba(255,255,255,.08);
    }

    .hero {
      min-height: 300px;
      padding: 33px 39px 31px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 38px;
      position: relative;
      border-bottom: 1px solid var(--line);
    }

    .hero::after {
      content: "";
      position: absolute;
      width: 370px;
      height: 370px;
      right: -75px;
      top: -215px;
      border-radius: 50%;
      background: rgba(255, 195, 111, .1);
      filter: blur(4px);
    }

    .hero-left, .hero-right { position: relative; z-index: 1; }

    .date-label {
      color: var(--muted);
      font-size: 15px;
      letter-spacing: .01em;
    }

    .hero-weather {
      display: flex;
      align-items: center;
      gap: 28px;
      margin-top: 35px;
    }

    .weather-icon {
      width: 104px;
      height: 104px;
      display: grid;
      place-items: center;
      border-radius: 27px;
      background: linear-gradient(145deg, rgba(255, 196, 105, .2), rgba(117, 213, 221, .1));
      box-shadow: inset 0 1px rgba(255,255,255,.1);
    }

    .weather-icon svg {
      width: 72px;
      height: 72px;
    }

    .temperature {
      margin: 0;
      font-size: 83px;
      font-weight: 260;
      letter-spacing: -.085em;
      line-height: .9;
    }

    .temperature sup {
      top: -.55em;
      position: relative;
      margin-left: 6px;
      color: var(--accent);
      font-size: 25px;
      font-weight: 600;
      letter-spacing: 0;
    }

    .condition {
      margin: 14px 0 0;
      color: #d9e8f0;
      font-size: 17px;
      font-weight: 540;
    }

    .coordinates {
      margin-top: 19px;
      color: var(--muted);
      font-size: 12px;
      letter-spacing: .03em;
    }

    .hero-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .range-panel {
      width: 390px;
      padding: 25px 27px;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 20px;
      background: rgba(4, 17, 29, .22);
    }

    .panel-title {
      margin: 0 0 21px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 750;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .range-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 13px 0;
      border-top: 1px solid var(--line);
    }

    .range-row:first-of-type { border-top: 0; padding-top: 0; }

    .range-label {
      display: flex;
      align-items: center;
      gap: 11px;
      color: #c6d7e3;
      font-size: 14px;
    }

    .range-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 13px rgba(255, 191, 105, .6);
    }

    .range-dot.low {
      background: var(--accent-2);
      box-shadow: 0 0 13px rgba(117, 213, 221, .55);
    }

    .range-value {
      font-size: 22px;
      font-weight: 580;
      letter-spacing: -.035em;
    }

    .range-value small {
      color: var(--muted);
      font-size: 13px;
      font-weight: 450;
    }

    .hourly {
      padding: 26px 39px 31px;
    }

    .hourly-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 19px;
    }

    .hourly-heading h2 {
      margin: 0;
      font-size: 16px;
      font-weight: 650;
      letter-spacing: -.01em;
    }

    .hourly-heading span {
      color: var(--muted);
      font-size: 12px;
    }

    .hourly-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 8px;
    }

    .hour {
      min-height: 83px;
      padding: 11px 5px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      border: 1px solid rgba(255,255,255,.085);
      border-radius: 13px;
      background: rgba(255,255,255,.045);
    }

    .hour:first-child {
      border-color: rgba(117, 213, 221, .42);
      background: linear-gradient(180deg, rgba(117, 213, 221, .14), rgba(255,255,255,.045));
    }

    .hour-time {
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
    }

    .hour-temp {
      color: #edf7fb;
      font-size: 17px;
      font-weight: 650;
      letter-spacing: -.03em;
    }

    .hour-bar {
      width: 25px;
      height: 3px;
      border-radius: 99px;
      background: linear-gradient(90deg, var(--accent-2), var(--accent));
      opacity: .8;
    }

    .state {
      min-height: 460px;
      display: grid;
      place-items: center;
      padding: 60px;
      text-align: center;
    }

    .state-inner { max-width: 420px; }

    .state-icon {
      width: 68px;
      height: 68px;
      margin: 0 auto 23px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 20px;
      color: var(--accent-2);
      font-size: 28px;
      background: var(--card-light);
    }

    .state h2 {
      margin: 0 0 10px;
      font-size: 22px;
    }

    .state p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
    }

    .error .state-icon { color: var(--danger); }
    .error h2 { color: #ffe1dc; }

    .loading-bar {
      width: 170px;
      height: 4px;
      margin: 25px auto 0;
      overflow: hidden;
      border-radius: 9px;
      background: rgba(255,255,255,.1);
    }

    .loading-bar::after {
      content: "";
      display: block;
      width: 55%;
      height: 100%;
      border-radius: inherit;
      background: var(--accent-2);
      animation: load 1.2s ease-in-out infinite;
    }

    @keyframes load {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(280%); }
    }
  </style>
</head>
<body>
  <div class="shell">
    <header>
      <div>
        <p class="eyebrow">Local forecast · UTC</p>
        <h1 id="location">Berlin</h1>
      </div>
      <div class="header-date" id="headerDate">Loading forecast…</div>
    </header>

    <main>
      <section class="weather-card" id="content">
        <div class="state">
          <div class="state-inner">
            <div class="state-icon">◌</div>
            <h2>Loading weather</h2>
            <p>Retrieving the latest forecast for this location.</p>
            <div class="loading-bar"></div>
          </div>
        </div>
      </section>
    </main>
  </div>

  <script>
    (() => {
      const params = new URLSearchParams(window.location.search);
      const fallbackToday = new Date().toISOString().slice(0, 10);
      const fallbackName = "Berlin";

      const latValue = Number(params.get("lat"));
      const lonValue = Number(params.get("lon"));
      const latitude = Number.isFinite(latValue) ? latValue : 52.52;
      const longitude = Number.isFinite(lonValue) ? lonValue : 13.405;
      const name = params.get("name") || fallbackName;
      const candidateDate = params.get("date") || fallbackToday;
      const date = isValidDate(candidateDate) ? candidateDate : fallbackToday;

      const locationEl = document.getElementById("location");
      const headerDateEl = document.getElementById("headerDate");
      const contentEl = document.getElementById("content");

      locationEl.textContent = name;
      headerDateEl.textContent = formatDate(date);

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

      function formatDate(value, withYear = true) {
        const parsed = new Date(value + "T00:00:00Z");
        return new Intl.DateTimeFormat("en-US", {
          weekday: "long",
          month: "long",
          day: "numeric",
          ...(withYear ? { year: "numeric" } : {}),
          timeZone: "UTC"
        }).format(parsed);
      }

      function formatHour(value) {
        const parsed = new Date(value);
        if (Number.isNaN(parsed.getTime())) return value.slice(11, 16);
        return new Intl.DateTimeFormat("en-US", {
          hour: "numeric",
          timeZone: "UTC"
        }).format(parsed);
      }

      function formatTemp(value) {
        return value === null || value === undefined || Number.isNaN(Number(value))
          ? "—"
          : `${Math.round(Number(value))}°`;
      }

      function conditionFor(code) {
        const value = Number(code);
        if (value === 0) return "Clear sky";
        if ([1, 2].includes(value)) return "Partly cloudy";
        if (value === 3) return "Overcast";
        if ([45, 48].includes(value)) return "Foggy";
        if ([51, 53, 55, 56, 57].includes(value)) return "Drizzle";
        if ([61, 63, 65, 66, 67].includes(value)) return "Rain";
        if ([71, 73, 75, 77].includes(value)) return "Snow";
        if ([80, 81, 82].includes(value)) return "Rain showers";
        if ([85, 86].includes(value)) return "Snow showers";
        if ([95, 96, 99].includes(value)) return "Thunderstorms";
        return "Variable conditions";
      }

      function iconFor(code) {
        const value = Number(code);
        if (value === 0) {
          return `<svg viewBox="0 0 80 80" fill="none" aria-hidden="true">
            <circle cx="40" cy="40" r="14" fill="#FFBF69"/>
            <g stroke="#FFBF69" stroke-width="4" stroke-linecap="round">
              <path d="M40 8v8M40 64v8M8 40h8M64 40h8M17.4 17.4l5.7 5.7M56.9 56.9l5.7 5.7M62.6 17.4l-5.7 5.7M23.1 56.9l-5.7 5.7"/>
            </g>
          </svg>`;
        }
        if ([1, 2, 3, 45, 48].includes(value)) {
          return `<svg viewBox="0 0 80 80" fill="none" aria-hidden="true">
            <circle cx="29" cy="28" r="12" fill="#FFBF69"/>
            <path d="M20 57h39c7.2 0 11-4.4 11-9.8S66.4 37 60 37c-1.2 0-2.4.2-3.5.5C53.7 29.5 46.2 24 37.6 24c-10.6 0-19.2 8.1-20 18.5C11.5 43.5 8 47.1 8 51.7 8 54.7 12.2 57 20 57Z" fill="#B8D1DD"/>
          </svg>`;
        }
        if ([71, 73, 75, 77, 85, 86].includes(value)) {
          return `<svg viewBox="0 0 80 80" fill="none" aria-hidden="true">
            <path d="M20 45h39c7.2 0 11-4.4 11-9.8S66.4 25 60 25c-1.2 0-2.4.2-3.5.5C53.7 17.5 46.2 12 37.6 12c-10.6 0-19.2 8.1-20 18.5C11.5 31.5 8 35.1 8 39.7 8 42.7 12.2 45 20 45Z" fill="#B8D1DD"/>
            <g fill="#75D5DD"><circle cx="24" cy="58" r="3"/><circle cx="40" cy="66" r="3"/><circle cx="56" cy="58" r="3"/></g>
          </svg>`;
        }
        if ([95, 96, 99].includes(value)) {
          return `<svg viewBox="0 0 80 80" fill="none" aria-hidden="true">
            <path d="M20 46h39c7.2 0 11-4.4 11-9.8S66.4 26 60 26c-1.2 0-2.4.2-3.5.5C53.7 18.5 46.2 13 37.6 13c-10.6 0-19.2 8.1-20 18.5C11.5 32.5 8 36.1 8 40.7 8 43.7 12.2 46 20 46Z" fill="#8EAAB9"/>
            <path d="m42 42-9 17h10l-5 13 17-21H45l7-9H42Z" fill="#FFBF69"/>
          </svg>`;
        }
        if ([51, 53, 55, 56, 57, 61, 63, 65, 66, 67, 80, 81, 82].includes(value)) {
          return `<svg viewBox="0 0 80 80" fill="none" aria-hidden="true">
            <path d="M20 43h39c7.2 0 11-4.4 11-9.8S66.4 23 60 23c-1.2 0-2.4.2-3.5.5C53.7 15.5 46.2 10 37.6 10c-10.6 0-19.2 8.1-20 18.5C11.5 29.5 8 33.1 8 37.7 8 40.7 12.2 43 20 43Z" fill="#9DB8C6"/>
            <g stroke="#75D5DD" stroke-width="4" stroke-linecap="round"><path d="m25 54-4 10M41 54l-4 10M57 54l-4 10"/></g>
          </svg>`;
        }
        return `<svg viewBox="0 0 80 80" fill="none" aria-hidden="true">
          <path d="M20 48h39c7.2 0 11-4.4 11-9.8S66.4 28 60 28c-1.2 0-2.4.2-3.5.5C53.7 20.5 46.2 15 37.6 15c-10.6 0-19.2 8.1-20 18.5C11.5 33.5 8 37.1 8 41.7 8 44.7 12.2 48 20 48Z" fill="#9DB8C6"/>
          <path d="M16 59h48M24 68h32" stroke="#75D5DD" stroke-width="4" stroke-linecap="round"/>
        </svg>`;
      }

      function showError(message) {
        contentEl.innerHTML = `
          <div class="state error">
            <div class="state-inner">
              <div class="state-icon">!</div>
              <h2>Weather unavailable</h2>
              <p>${message || "The weather data could not be loaded. Please try again later."}</p>
            </div>
          </div>`;
      }

      function render(data) {
        const daily = data.daily || {};
        const hourly = data.hourly || {};
        const max = daily.temperature_2m_max?.[0];
        const min = daily.temperature_2m_min?.[0];
        const code = daily.weather_code?.[0];
        const times = hourly.time || [];
        const temperatures = hourly.temperature_2m || [];

        if (!daily.temperature_2m_max || !daily.temperature_2m_min ||
            code === undefined || !times.length || !temperatures.length) {
          throw new Error("The weather response was incomplete.");
        }

        const hours = times.map((time, index) => `
          <div class="hour">
            <span class="hour-time">${formatHour(time)}</span>
            <span class="hour-temp">${formatTemp(temperatures[index])}</span>
            <span class="hour-bar"></span>
          </div>`).join("");

        contentEl.innerHTML = `
          <div class="hero">
            <div class="hero-left">
              <div class="date-label">${formatDate(date)}</div>
              <div class="hero-weather">
                <div class="weather-icon">${iconFor(code)}</div>
                <div>
                  <p class="temperature">${formatTemp(max)}<sup>MAX</sup></p>
                  <p class="condition">${conditionFor(code)}</p>
                </div>
              </div>
              <div class="coordinates">${latitude.toFixed(3)}° N &nbsp;·&nbsp; ${longitude.toFixed(3)}° E</div>
            </div>
            <div class="hero-right">
              <div class="range-panel">
                <p class="panel-title">Daily temperature range</p>
                <div class="range-row">
                  <span class="range-label"><i class="range-dot"></i>High</span>
                  <span class="range-value">${formatTemp(max)} <small>Celsius</small></span>
                </div>
                <div class="range-row">
                  <span class="range-label"><i class="range-dot low"></i>Low</span>
                  <span class="range-value">${formatTemp(min)} <small>Celsius</small></span>
                </div>
              </div>
            </div>
          </div>
          <div class="hourly">
            <div class="hourly-heading">
              <h2>Hourly temperature</h2>
              <span>24-hour outlook · °C</span>
            </div>
            <div class="hourly-grid">${hours}</div>
          </div>`;
      }

      async function loadWeather() {
        try {
          const today = new Date().toISOString().slice(0, 10);
          const endpoint = date < today ? "/api/om/archive" : "/api/om/forecast";
          const query = new URLSearchParams({
            latitude: latitude.toString(),
            longitude: longitude.toString(),
            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.toString()}`, {
            headers: { "Accept": "application/json" }
          });

          if (!response.ok) throw new Error(`Request failed with status ${response.status}.`);
          render(await response.json());
        } catch (error) {
          showError("The data could not be loaded for this date. Please check the location or try again.");
        }
      }

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