gpt-5.6-sol @ low · 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;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --text: #f7fbff;
    --muted: rgba(231, 242, 255, 0.65);
    --line: rgba(255, 255, 255, 0.12);
    --glass: rgba(10, 28, 51, 0.54);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    min-width: 900px;
    min-height: 100vh;
    overflow: hidden;
    color: var(--text);
    background:
      radial-gradient(circle at 78% 18%, rgba(255, 191, 103, 0.26), transparent 27%),
      radial-gradient(circle at 18% 88%, rgba(49, 156, 255, 0.24), transparent 30%),
      linear-gradient(135deg, #07172b 0%, #143a62 48%, #285d7a 100%);
  }

  body::before,
  body::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
  }

  body::before {
    width: 360px;
    height: 360px;
    right: -100px;
    top: -120px;
    background: rgba(255, 207, 133, 0.12);
  }

  body::after {
    width: 300px;
    height: 300px;
    left: -120px;
    bottom: -130px;
    background: rgba(80, 182, 255, 0.13);
  }

  main {
    width: 1280px;
    height: 800px;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0 auto;
    padding: 46px 58px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 28px;
  }

  header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

  .eyebrow {
    margin: 0 0 10px;
    color: #9fcbeb;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  h1 {
    margin: 0;
    max-width: 720px;
    overflow: hidden;
    font-size: 43px;
    font-weight: 650;
    letter-spacing: -0.04em;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .date {
    color: var(--muted);
    font-size: 16px;
    letter-spacing: 0.01em;
  }

  .card {
    position: relative;
    overflow: hidden;
    padding: 34px 36px 27px;
    display: grid;
    grid-template-rows: 220px 1fr;
    gap: 24px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(14, 40, 68, 0.65), rgba(7, 25, 46, 0.5));
    box-shadow: 0 28px 70px rgba(0, 9, 24, 0.35), inset 0 1px rgba(255,255,255,.08);
    backdrop-filter: blur(24px);
  }

  .card::before {
    content: "";
    position: absolute;
    width: 460px;
    height: 250px;
    top: -130px;
    right: 80px;
    border-radius: 50%;
    background: rgba(255, 204, 128, 0.08);
    filter: blur(20px);
  }

  .summary {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .condition-row {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .weather-icon {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 32px;
    background: rgba(255,255,255,.06);
    box-shadow: inset 0 1px rgba(255,255,255,.12);
    font-size: 64px;
  }

  .condition {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 590;
    letter-spacing: -0.025em;
  }

  .details {
    color: var(--muted);
    font-size: 14px;
  }

  .temperatures {
    display: flex;
    align-items: center;
    gap: 26px;
    text-align: right;
  }

  .high {
    font-size: 92px;
    font-weight: 260;
    letter-spacing: -0.08em;
    line-height: 1;
  }

  .high sup {
    position: relative;
    top: -38px;
    margin-left: 7px;
    color: #badbf3;
    font-size: 25px;
    font-weight: 500;
    letter-spacing: 0;
  }

  .low-block {
    padding-left: 25px;
    border-left: 1px solid var(--line);
  }

  .label {
    margin-bottom: 6px;
    color: #9fcbeb;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .15em;
    text-transform: uppercase;
  }

  .low {
    font-size: 31px;
    font-weight: 520;
  }

  .hourly {
    min-height: 0;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 18px;
  }

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

  h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 680;
    letter-spacing: .02em;
  }

  .unit {
    color: var(--muted);
    font-size: 12px;
  }

  .hours {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 9px;
  }

  .hour {
    position: relative;
    padding: 16px 8px 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.035);
  }

  .hour::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: var(--height);
    border-radius: 13px 13px 0 0;
    background: linear-gradient(to top, rgba(70, 173, 239, .23), rgba(255, 204, 128, .12));
  }

  .hour-temp, .hour-time {
    position: relative;
    z-index: 1;
  }

  .hour-temp {
    margin-bottom: 10px;
    font-size: 23px;
    font-weight: 570;
    letter-spacing: -.04em;
  }

  .hour-time {
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .08em;
  }

  .state {
    grid-row: 1 / -1;
    display: grid;
    place-items: center;
    text-align: center;
  }

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

  .spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 20px;
    border: 3px solid rgba(255,255,255,.15);
    border-top-color: #bfe2fa;
    border-radius: 50%;
    animation: spin .8s linear infinite;
  }

  .state h2 {
    margin-bottom: 10px;
    font-size: 24px;
  }

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

  .hidden { display: none; }

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

  @media (max-height: 700px) {
    main { padding-top: 25px; padding-bottom: 25px; gap: 18px; }
    .card { grid-template-rows: 180px 1fr; }
    .weather-icon { width: 92px; height: 92px; font-size: 52px; }
    .high { font-size: 76px; }
  }
</style>
</head>
<body>
<main>
  <header>
    <div>
      <p class="eyebrow">Daily weather</p>
      <h1 id="location">Berlin</h1>
    </div>
    <div class="date" id="date"></div>
  </header>

  <section class="card">
    <div class="state" id="loading">
      <div class="state-inner">
        <div class="spinner"></div>
        <h2>Loading forecast</h2>
        <p>Gathering the weather for your selected date.</p>
      </div>
    </div>

    <div class="state hidden" id="error">
      <div class="state-inner">
        <div class="weather-icon" style="margin:0 auto 22px">!</div>
        <h2>Weather unavailable</h2>
        <p>The weather data could not be loaded. Please check the location, date, and try again.</p>
      </div>
    </div>

    <div class="summary hidden" id="summary">
      <div class="condition-row">
        <div class="weather-icon" id="icon"></div>
        <div>
          <div class="condition" id="condition"></div>
          <div class="details" id="coordinates"></div>
        </div>
      </div>
      <div class="temperatures">
        <div class="high"><span id="max"></span><sup>°C</sup></div>
        <div class="low-block">
          <div class="label">Low</div>
          <div class="low" id="min"></div>
        </div>
      </div>
    </div>

    <div class="hourly hidden" id="hourly">
      <div class="hourly-heading">
        <h2>Hourly temperature</h2>
        <span class="unit">UTC · Celsius</span>
      </div>
      <div class="hours" id="hours"></div>
    </div>
  </section>
</main>

<script>
(() => {
  const params = new URLSearchParams(location.search);
  const now = new Date();
  const today = now.toISOString().slice(0, 10);
  const lat = Number(params.get("lat") ?? 52.52);
  const lon = Number(params.get("lon") ?? 13.405);
  const name = (params.get("name") || "Berlin").trim() || "Berlin";
  const requestedDate = params.get("date") || today;

  const validDate = /^\d{4}-\d{2}-\d{2}$/.test(requestedDate) &&
    !Number.isNaN(Date.parse(requestedDate + "T00:00:00Z"));
  const validCoords = Number.isFinite(lat) && Number.isFinite(lon) &&
    lat >= -90 && lat <= 90 && lon >= -180 && lon <= 180;

  document.getElementById("location").textContent = name;
  document.getElementById("date").textContent = validDate
    ? new Intl.DateTimeFormat("en-US", {
        weekday: "long", month: "long", day: "numeric", year: "numeric",
        timeZone: "UTC"
      }).format(new Date(requestedDate + "T12:00:00Z"))
    : requestedDate;

  const weatherCodes = {
    0: ["Clear sky", "☀"],
    1: ["Mainly clear", "🌤"],
    2: ["Partly cloudy", "⛅"],
    3: ["Overcast", "☁"],
    45: ["Fog", "🌫"], 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", "⛈"]
  };

  const showError = () => {
    document.getElementById("loading").classList.add("hidden");
    document.getElementById("summary").classList.add("hidden");
    document.getElementById("hourly").classList.add("hidden");
    document.getElementById("error").classList.remove("hidden");
  };

  if (!validDate || !validCoords) {
    showError();
    return;
  }

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

  fetch(endpoint + "?" + query)
    .then(response => {
      if (!response.ok) throw new Error("Request failed");
      return response.json();
    })
    .then(data => {
      const max = data.daily?.temperature_2m_max?.[0];
      const min = 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 (![max, min].every(Number.isFinite) || !Array.isArray(times) ||
          !Array.isArray(temperatures) || temperatures.length === 0) {
        throw new Error("Incomplete data");
      }

      const condition = weatherCodes[code] || ["Weather conditions", "◌"];
      document.getElementById("condition").textContent = condition[0];
      document.getElementById("icon").textContent = condition[1];
      document.getElementById("max").textContent = Math.round(max);
      document.getElementById("min").textContent = Math.round(min) + "°";
      document.getElementById("coordinates").textContent =
        `${Math.abs(lat).toFixed(2)}°${lat >= 0 ? "N" : "S"}  ·  ${Math.abs(lon).toFixed(2)}°${lon >= 0 ? "E" : "W"}`;

      const readings = temperatures.map(Number).filter(Number.isFinite);
      const rangeMin = Math.min(...readings);
      const rangeMax = Math.max(...readings);
      const spread = Math.max(1, rangeMax - rangeMin);
      const selected = [];

      for (let hour = 0; hour < 24; hour += 3) {
        const index = times.findIndex(t => t.slice(0, 13) === `${requestedDate}T${String(hour).padStart(2, "0")}`);
        if (index >= 0 && Number.isFinite(Number(temperatures[index]))) {
          selected.push({ hour, temp: Number(temperatures[index]) });
        }
      }

      if (!selected.length) throw new Error("No hourly data");

      document.getElementById("hours").innerHTML = selected.map(({ hour, temp }) => {
        const height = 32 + ((temp - rangeMin) / spread) * 56;
        const label = hour === 0 ? "12 AM" : hour < 12 ? `${hour} AM` : hour === 12 ? "12 PM" : `${hour - 12} PM`;
        return `<div class="hour" style="--height:${height}%">
          <div class="hour-temp">${Math.round(temp)}°</div>
          <div class="hour-time">${label}</div>
        </div>`;
      }).join("");

      document.getElementById("loading").classList.add("hidden");
      document.getElementById("summary").classList.remove("hidden");
      document.getElementById("hourly").classList.remove("hidden");
    })
    .catch(showError);
})();
</script>
</body>
</html>