gpt-5.6-terra @ xhigh · 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</title>
  <style>
    :root {
      color-scheme: dark;
      --ink: #f9fbff;
      --muted: #abb9d8;
      --line: rgba(255,255,255,.13);
      --accent: #ffd36c;
      --aqua: #75e4ff;
    }
    * { box-sizing: border-box; }
    body {
      min-width: 980px; min-height: 800px; margin: 0; overflow: hidden;
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 11% 12%, rgba(62,139,226,.28), transparent 28%),
        radial-gradient(circle at 88% 19%, rgba(128,89,214,.21), transparent 26%),
        radial-gradient(circle at 56% 104%, rgba(10,196,211,.17), transparent 38%),
        #07142e;
    }
    body::before {
      position: fixed; z-index: -1; inset: 0; content: ""; opacity: .48;
      background-image:
        linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: linear-gradient(to bottom, black, transparent 78%);
    }
    .orb { position: fixed; z-index: -1; width: 440px; height: 440px; border: 1px solid rgba(152,210,255,.1); border-radius: 50%; }
    .orb.one { top: -238px; right: -70px; box-shadow: 0 0 100px rgba(86,132,255,.17) inset; }
    .orb.two { bottom: -310px; left: 21%; width: 600px; height: 600px; border-color: rgba(79,237,229,.08); }
    main { width: 1108px; margin: 0 auto; padding: 62px 0 44px; }
    .topline {
      display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px;
      color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    }
    .brand { display: flex; align-items: center; gap: 10px; color: #dbe8ff; }
    .brand-mark {
      display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(146,212,255,.45);
      border-radius: 8px; color: var(--aqua); font-size: 15px; box-shadow: 0 0 24px rgba(87,216,255,.15);
    }
    .updated { display: flex; align-items: center; gap: 8px; }
    .status-dot { width: 7px; height: 7px; border-radius: 50%; background: #6cf4bc; box-shadow: 0 0 12px #6cf4bc; }
    .weather-card {
      position: relative; overflow: hidden; min-height: 626px; border: 1px solid var(--line); border-radius: 28px;
      background: linear-gradient(135deg, rgba(26,48,94,.74), rgba(8,21,50,.74));
      box-shadow: 0 28px 76px rgba(0,5,21,.42), inset 0 1px rgba(255,255,255,.07);
      backdrop-filter: blur(18px);
    }
    .weather-card::after {
      position: absolute; top: -235px; right: -95px; width: 520px; height: 520px; border-radius: 50%; content: "";
      background: radial-gradient(circle, rgba(112,186,255,.18), rgba(112,186,255,0) 67%); pointer-events: none;
    }
    .hero { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 385px; min-height: 315px; padding: 42px 48px 34px; }
    .eyebrow { margin: 0 0 9px; color: var(--aqua); font-size: 11px; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
    h1 { max-width: 525px; margin: 0; overflow: hidden; font-size: clamp(36px,4vw,53px); font-weight: 650; letter-spacing: -.045em; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
    .date { margin: 12px 0 0; color: var(--muted); font-size: 16px; font-weight: 500; }
    .temperature-wrap { display: flex; align-items: flex-start; margin-top: 35px; }
    .temperature { font-size: 106px; font-weight: 300; letter-spacing: -.09em; line-height: .72; }
    .degree { margin: -8px 0 0 14px; color: #f6f9ff; font-size: 40px; font-weight: 350; line-height: 1; }
    .condition { margin: 22px 0 0; color: #e6edff; font-size: 18px; font-weight: 550; }
    .weather-art { position: relative; display: grid; width: 290px; height: 246px; margin: 4px auto 0; place-items: center; }
    .sun-glow { position: absolute; width: 194px; height: 194px; border-radius: 50%; background: radial-gradient(circle,rgba(255,206,89,.31),rgba(255,206,89,0) 69%); filter: blur(6px); }
    .weather-icon { position: relative; width: 172px; height: 172px; overflow: visible; filter: drop-shadow(0 16px 23px rgba(0,7,36,.31)); }
    .weather-icon .sun { fill: #ffd66f; }
    .weather-icon .ray { stroke: #ffe397; stroke-linecap: round; stroke-width: 6; }
    .weather-icon .cloud { fill: #dceaff; }
    .weather-icon .cloud-shade { fill: #b8ceee; }
    .weather-icon .rain { stroke: #70dfff; stroke-linecap: round; stroke-width: 7; }
    .weather-icon .bolt { fill: #ffe073; }
    .weather-icon .snow { fill: #dff8ff; }
    .weather-icon .fog { fill: none; stroke: #d4e6ff; stroke-linecap: round; stroke-width: 8; }
    .high-low { position: absolute; right: 48px; bottom: 37px; display: flex; gap: 11px; color: #d7e3fb; font-size: 14px; font-weight: 650; }
    .hi,.lo { padding: 8px 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.06); }
    .hi b { color: var(--accent); } .lo b { color: var(--aqua); }
    .hourly-area { position: relative; z-index: 2; padding: 28px 32px 32px; border-top: 1px solid var(--line); background: rgba(3,13,38,.24); }
    .section-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; margin-bottom: 19px; }
    .section-heading h2 { margin: 0; font-size: 14px; font-weight: 750; letter-spacing: .03em; }
    .section-heading span { color: var(--muted); font-size: 12px; font-weight: 600; }
    .hours { display: grid; grid-template-columns: repeat(8,1fr); gap: 9px; }
    .hour { min-width: 0; padding: 16px 8px 14px; border: 1px solid transparent; border-radius: 15px; text-align: center; }
    .hour.now { border-color: rgba(128,225,255,.31); background: linear-gradient(150deg,rgba(85,197,255,.19),rgba(75,120,226,.07)); box-shadow: inset 0 1px rgba(255,255,255,.11),0 6px 17px rgba(9,62,140,.12); }
    .hour-time { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
    .hour-icon { display: block; height: 26px; margin: 11px auto 8px; color: #bcd8ff; font-size: 21px; line-height: 26px; }
    .hour.now .hour-icon { color: var(--accent); }
    .hour-temp { display: block; color: #f7faff; font-size: 16px; font-weight: 680; letter-spacing: -.035em; }
    .state { display: grid; min-height: 530px; padding: 65px; place-items: center; text-align: center; }
    .state[hidden],.content[hidden] { display: none; }
    .spinner { width: 42px; height: 42px; margin: 0 auto 18px; border: 3px solid rgba(255,255,255,.14); border-top-color: var(--aqua); border-radius: 50%; animation: spin .85s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .error-mark { display: grid; width: 53px; height: 53px; margin: 0 auto 18px; place-items: center; border: 1px solid rgba(255,156,156,.35); border-radius: 50%; color: #ffabab; font-size: 25px; }
    .state h2 { margin: 0 0 8px; font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
    .state p { max-width: 330px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
  </style>
</head>
<body>
  <div class="orb one"></div>
  <div class="orb two"></div>
  <main>
    <div class="topline">
      <div class="brand"><span class="brand-mark">✦</span>Skyline weather</div>
      <div class="updated"><span class="status-dot"></span><span id="source-label">Loading forecast</span></div>
    </div>
    <section class="weather-card" aria-live="polite">
      <div class="state" id="loading-state">
        <div>
          <div class="spinner" aria-hidden="true"></div>
          <h2>Gathering the forecast</h2>
          <p>Connecting to the local weather service.</p>
        </div>
      </div>
      <div class="state" id="error-state" hidden>
        <div>
          <div class="error-mark" aria-hidden="true">!</div>
          <h2>Weather data unavailable</h2>
          <p>We couldn’t load the forecast for this location and date. Please try again in a moment.</p>
        </div>
      </div>
      <div class="content" id="weather-content" hidden>
        <div class="hero">
          <div>
            <p class="eyebrow">Local forecast · UTC</p>
            <h1 id="location">Berlin</h1>
            <p class="date" id="date">—</p>
            <div class="temperature-wrap"><span class="temperature" id="current-temp">—</span><span class="degree">°C</span></div>
            <p class="condition" id="condition">—</p>
          </div>
          <div class="weather-art" aria-hidden="true">
            <div class="sun-glow"></div>
            <svg class="weather-icon" id="weather-icon" viewBox="0 0 180 180"></svg>
          </div>
          <div class="high-low">
            <span class="hi">High <b id="high">—</b></span>
            <span class="lo">Low <b id="low">—</b></span>
          </div>
        </div>
        <div class="hourly-area">
          <div class="section-heading">
            <h2>Hourly temperatures</h2>
            <span>UTC · every 3 hours</span>
          </div>
          <div class="hours" id="hours"></div>
        </div>
      </div>
    </section>
  </main>
  <script>
    (() => {
      const query = new URLSearchParams(window.location.search);
      const utcToday = new Date().toISOString().slice(0, 10);
      const validDate = /^\d{4}-\d{2}-\d{2}$/;
      const requestedDate = validDate.test(query.get("date") || "") ? query.get("date") : utcToday;
      const numberOr = (value, fallback, min, max) => {
        const parsed = Number(value);
        return Number.isFinite(parsed) && parsed >= min && parsed <= max ? parsed : fallback;
      };
      const latitude = numberOr(query.get("lat"), 52.52, -90, 90);
      const longitude = numberOr(query.get("lon"), 13.405, -180, 180);
      const name = (query.get("name") || "Berlin").trim() || "Berlin";
      const isPast = requestedDate < utcToday;

      const icons = {
        clear: `<g class="sun"><circle cx="90" cy="90" r="34"/><path class="ray" d="M90 22v14M90 144v14M22 90h14M144 90h14M42 42l10 10M128 128l10 10M42 138l10-10M128 52l10-10"/></g>`,
        partly: `<g class="sun"><circle cx="72" cy="70" r="27"/><path class="ray" d="M72 25v12M72 103v12M27 70h12M105 70h12M40 38l9 9M95 93l9 9"/></g><path class="cloud-shade" d="M48 131c0-17 14-30 31-30 8-15 29-20 43-8 18-3 34 11 34 28 0 17-13 30-30 30H78c-17 0-30-8-30-20z"/><path class="cloud" d="M39 124c0-15 12-27 28-27 9-18 33-21 47-7 17-3 32 10 32 26 0 15-12 27-27 27H66c-15 0-27-8-27-19z"/>`,
        cloud: `<path class="cloud-shade" d="M33 126c0-19 15-34 34-34 10-20 38-26 56-10 22-4 40 14 40 36 0 20-16 36-36 36H70c-20 0-37-10-37-28z"/><path class="cloud" d="M22 117c0-17 14-31 31-31 10-22 40-26 58-8 20-3 37 13 37 33 0 17-14 31-31 31H59c-20 0-37-10-37-25z"/>`,
        fog: `<path class="fog" d="M38 66h104M25 91h130M39 116h102M55 141h70"/>`,
        rain: `<path class="cloud-shade" d="M34 112c0-18 14-32 32-32 10-20 39-25 56-8 20-4 38 12 38 32 0 18-15 32-33 32H69c-19 0-35-8-35-24z"/><path class="cloud" d="M25 105c0-16 13-29 29-29 10-20 37-23 53-7 19-3 35 11 35 29 0 16-13 29-29 29H59c-19 0-34-8-34-22z"/><path class="rain" d="M61 143l-7 17M91 143l-7 17M121 143l-7 17"/>`,
        snow: `<path class="cloud-shade" d="M34 112c0-18 14-32 32-32 10-20 39-25 56-8 20-4 38 12 38 32 0 18-15 32-33 32H69c-19 0-35-8-35-24z"/><path class="cloud" d="M25 105c0-16 13-29 29-29 10-20 37-23 53-7 19-3 35 11 35 29 0 16-13 29-29 29H59c-19 0-34-8-34-22z"/><g class="snow"><path d="M61 145v22M51 150l20 12M71 150l-20 12M101 145v22M91 150l20 12M111 150l-20 12M141 145v22M131 150l20 12M151 150l-20 12"/></g>`,
        storm: `<path class="cloud-shade" d="M34 112c0-18 14-32 32-32 10-20 39-25 56-8 20-4 38 12 38 32 0 18-15 32-33 32H69c-19 0-35-8-35-24z"/><path class="cloud" d="M25 105c0-16 13-29 29-29 10-20 37-23 53-7 19-3 35 11 35 29 0 16-13 29-29 29H59c-19 0-34-8-34-22z"/><path class="bolt" d="M92 128h23l-14 24h16l-34 37 9-28H76z"/>`
      };

      function conditionFor(code) {
        if (code === 0) return ["Clear sky", "clear", "☀"];
        if ([1, 2].includes(code)) return ["Partly cloudy", "partly", "⛅"];
        if (code === 3) return ["Overcast", "cloud", "☁"];
        if ([45, 48].includes(code)) return ["Foggy", "fog", "≋"];
        if ([51,53,55,56,57,61,63,65,66,67,80,81,82].includes(code)) return ["Rain showers", "rain", "☂"];
        if ([71,73,75,77,85,86].includes(code)) return ["Snow showers", "snow", "❄"];
        if ([95,96,99].includes(code)) return ["Thunderstorms", "storm", "ϟ"];
        return ["Changing skies", "partly", "⛅"];
      }

      const celsius = value => `${Math.round(value)}°`;
      const displayDate = date => new Intl.DateTimeFormat("en-US", {
        weekday: "long", month: "long", day: "numeric", year: "numeric", timeZone: "UTC"
      }).format(new Date(`${date}T00:00:00Z`));

      function hoursFor(hourly) {
        const start = hourly.time.findIndex(time => time.startsWith(requestedDate));
        if (start < 0) return [];
        const nowHour = new Date().toISOString().slice(0, 13);
        return Array.from({ length: 8 }, (_, index) => {
          const timeIndex = start + index * 3;
          return hourly.time[timeIndex] && hourly.temperature_2m[timeIndex] != null ? {
            time: hourly.time[timeIndex],
            temperature: hourly.temperature_2m[timeIndex],
            isNow: hourly.time[timeIndex].slice(0, 13) === nowHour
          } : null;
        }).filter(Boolean);
      }

      function render(data) {
        const daily = data.daily || {};
        const hourly = data.hourly || {};
        const maximum = daily.temperature_2m_max?.[0];
        const minimum = daily.temperature_2m_min?.[0];
        const code = daily.weather_code?.[0];
        const list = hoursFor(hourly);
        if (![maximum, minimum, code].every(value => value !== undefined && value !== null) || !list.length) throw new Error("Incomplete weather response");

        const [label, iconName, tinyIcon] = conditionFor(code);
        const current = list.find(item => item.isNow) || list[Math.floor(list.length / 2)] || list[0];
        document.title = `${name} weather · ${celsius(current.temperature)}C`;
        document.getElementById("location").textContent = name;
        document.getElementById("date").textContent = displayDate(requestedDate);
        document.getElementById("current-temp").textContent = Math.round(current.temperature);
        document.getElementById("condition").textContent = label;
        document.getElementById("high").textContent = celsius(maximum);
        document.getElementById("low").textContent = celsius(minimum);
        document.getElementById("weather-icon").innerHTML = icons[iconName];
        document.getElementById("source-label").textContent = isPast ? "Historical weather" : "Live forecast";

        const timeFormat = new Intl.DateTimeFormat("en-US", { hour: "numeric", hour12: true, timeZone: "UTC" });
        const hours = document.getElementById("hours");
        list.forEach(item => {
          const node = document.createElement("div");
          node.className = `hour ${item.isNow ? "now" : ""}`;
          const time = item.isNow ? "Now" : timeFormat.format(new Date(`${item.time}Z`)).replace(" ", "");
          node.innerHTML = `<span class="hour-time">${time}</span><span class="hour-icon">${tinyIcon}</span><span class="hour-temp">${celsius(item.temperature)}</span>`;
          hours.appendChild(node);
        });
        document.getElementById("loading-state").hidden = true;
        document.getElementById("weather-content").hidden = false;
      }

      async function load() {
        const endpoint = isPast ? "/api/om/archive" : "/api/om/forecast";
        const parameters = 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: requestedDate,
          end_date: requestedDate
        });
        try {
          const response = await fetch(`${endpoint}?${parameters}`);
          if (!response.ok) throw new Error(`Weather service responded ${response.status}`);
          render(await response.json());
        } catch (error) {
          console.error("Weather data could not be loaded:", error);
          document.getElementById("loading-state").hidden = true;
          document.getElementById("error-state").hidden = false;
          document.getElementById("source-label").textContent = "Service unavailable";
        }
      }
      load();
    })();
  </script>
</body>
</html>