gpt-5.6-sol @ none · 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 {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #07111f;
    color: #f7fbff;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    min-width: 100vw;
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
      radial-gradient(circle at 18% 10%, rgba(94, 170, 255, .28), transparent 34%),
      radial-gradient(circle at 86% 82%, rgba(103, 76, 255, .20), transparent 36%),
      linear-gradient(145deg, #0a192c 0%, #07101d 55%, #101229 100%);
  }

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

  body::before {
    width: 300px;
    height: 300px;
    left: -95px;
    bottom: -115px;
    background: rgba(36, 138, 255, .12);
  }

  body::after {
    width: 210px;
    height: 210px;
    right: -50px;
    top: -55px;
    background: rgba(127, 111, 255, .13);
  }

  .card {
    width: min(1080px, calc(100vw - 96px));
    height: min(650px, calc(100vh - 92px));
    padding: 42px 46px 34px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 34px;
    position: relative;
    overflow: hidden;
    background:
      linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.045) 45%, rgba(255,255,255,.075));
    box-shadow:
      0 36px 90px rgba(0,0,0,.42),
      inset 0 1px 0 rgba(255,255,255,.16);
    backdrop-filter: blur(24px);
  }

  .card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,.08), transparent 35%);
    pointer-events: none;
  }

  header,
  .summary,
  .hourly { position: relative; z-index: 1; }

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

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

  h1 {
    margin: 0;
    max-width: 650px;
    font-size: clamp(32px, 4vw, 53px);
    line-height: 1;
    letter-spacing: -.045em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  time {
    display: block;
    margin-top: 13px;
    color: #b8c9da;
    font-size: 16px;
  }

  .badge {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 15px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: #cde4f8;
    background: rgba(9,22,38,.34);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .badge i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #70dbff;
    box-shadow: 0 0 13px #70dbff;
  }

  .summary {
    min-height: 235px;
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    align-items: center;
    gap: 36px;
  }

  .condition-wrap {
    display: flex;
    align-items: center;
    gap: 25px;
  }

  .weather-icon {
    width: 106px;
    height: 106px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(123,195,255,.24), rgba(111,99,255,.11));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 18px 35px rgba(0,0,0,.14);
    font-size: 58px;
  }

  .condition {
    margin: 0 0 7px;
    color: #eaf6ff;
    font-size: 28px;
    font-weight: 650;
    letter-spacing: -.025em;
  }

  .description {
    margin: 0;
    color: #8fa7bd;
    font-size: 14px;
  }

  .range {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 28px;
  }

  .temperature {
    min-width: 110px;
  }

  .temperature + .temperature {
    padding-left: 28px;
    border-left: 1px solid rgba(255,255,255,.13);
  }

  .temperature span {
    display: block;
    margin-bottom: 8px;
    color: #829bb2;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .15em;
    text-transform: uppercase;
  }

  .temperature strong {
    font-size: 50px;
    line-height: 1;
    letter-spacing: -.06em;
    font-weight: 580;
  }

  .temperature.low strong { color: #9fcfff; }

  .hourly {
    border-top: 1px solid rgba(255,255,255,.11);
    padding-top: 25px;
  }

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

  .hourly-head h2 {
    margin: 0;
    font-size: 15px;
    letter-spacing: -.01em;
  }

  .hourly-head span {
    color: #6f8da8;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .13em;
    text-transform: uppercase;
  }

  .timeline {
    height: 150px;
    display: grid;
    grid-template-columns: repeat(24, minmax(30px, 1fr));
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .timeline::-webkit-scrollbar { display: none; }

  .hour {
    min-width: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hour time {
    margin: 0 0 8px;
    color: #738da5;
    font-size: 9px;
    font-weight: 700;
  }

  .track {
    height: 84px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .bar {
    width: min(17px, 70%);
    min-height: 6px;
    border-radius: 7px 7px 3px 3px;
    background: linear-gradient(180deg, #94dcff, #5b76ff);
    box-shadow: 0 0 15px rgba(95,145,255,.16);
  }

  .hour strong {
    margin-top: 8px;
    color: #cfdeec;
    font-size: 10px;
    font-weight: 650;
  }

  .state {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    padding: 50px;
    text-align: center;
    background: rgba(7,17,31,.55);
    backdrop-filter: blur(14px);
  }

  .state-box {
    max-width: 430px;
  }

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

  .state h2 {
    margin: 0 0 9px;
    font-size: 23px;
  }

  .state p {
    margin: 0;
    color: #91a9bd;
    line-height: 1.6;
  }

  .state[hidden] { display: none; }

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

  @media (max-width: 800px) {
    body { overflow: auto; }
    .card {
      width: calc(100vw - 28px);
      height: auto;
      min-height: calc(100vh - 28px);
      margin: 14px;
      padding: 28px 24px;
    }
    .summary { grid-template-columns: 1fr; gap: 15px; padding: 35px 0; }
    .range { justify-content: flex-start; }
    .badge { display: none; }
    .timeline { grid-template-columns: repeat(24, 38px); }
  }
</style>
</head>
<body>
<main class="card" aria-live="polite">
  <header>
    <div>
      <p class="eyebrow">Daily forecast</p>
      <h1 id="location">Berlin</h1>
      <time id="date" datetime=""></time>
    </div>
    <div class="badge"><i></i> UTC weather</div>
  </header>

  <section class="summary">
    <div class="condition-wrap">
      <div class="weather-icon" id="icon" aria-hidden="true">☀️</div>
      <div>
        <p class="condition" id="condition">Clear sky</p>
        <p class="description">Conditions for the selected day</p>
      </div>
    </div>
    <div class="range">
      <div class="temperature high">
        <span>High</span>
        <strong id="high">—</strong>
      </div>
      <div class="temperature low">
        <span>Low</span>
        <strong id="low">—</strong>
      </div>
    </div>
  </section>

  <section class="hourly">
    <div class="hourly-head">
      <h2>Hourly temperature</h2>
      <span>Celsius · UTC</span>
    </div>
    <div class="timeline" id="timeline"></div>
  </section>

  <div class="state" id="state">
    <div class="state-box">
      <div class="spinner" id="spinner"></div>
      <h2 id="state-title">Loading weather</h2>
      <p id="state-message">Retrieving the selected day's forecast…</p>
    </div>
  </div>
</main>

<script>
(() => {
  const params = new URLSearchParams(location.search);
  const todayUTC = new Date().toISOString().slice(0, 10);
  const numberParam = (key, fallback, min, max) => {
    const raw = params.get(key);
    const value = raw === null ? fallback : Number(raw);
    return Number.isFinite(value) && value >= min && value <= max ? value : fallback;
  };

  const lat = numberParam("lat", 52.52, -90, 90);
  const lon = numberParam("lon", 13.405, -180, 180);
  const name = (params.get("name") || "Berlin").trim().slice(0, 100) || "Berlin";
  const requested = params.get("date");
  const validDate = /^\d{4}-\d{2}-\d{2}$/.test(requested || "") &&
    !Number.isNaN(Date.parse(requested + "T00:00:00Z"));
  const date = validDate ? requested : todayUTC;

  const weather = {
    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: ["Dense 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 hailstorm", "⛈️"]
  };

  const el = id => document.getElementById(id);
  el("location").textContent = name;
  el("date").dateTime = date;
  el("date").textContent = new Intl.DateTimeFormat("en", {
    weekday: "long", year: "numeric", month: "long", day: "numeric", timeZone: "UTC"
  }).format(new Date(date + "T12:00:00Z"));

  const endpoint = date < todayUTC ? "/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: date,
    end_date: date
  });

  const fail = message => {
    el("spinner").hidden = true;
    el("state-title").textContent = "Weather unavailable";
    el("state-message").textContent = message || "The weather data could not be loaded. Please try again.";
  };

  fetch(endpoint + "?" + query)
    .then(response => {
      if (!response.ok) throw new Error("Request failed");
      return response.json();
    })
    .then(data => {
      const dailyIndex = data.daily?.time?.indexOf(date) ?? -1;
      const high = data.daily?.temperature_2m_max?.[dailyIndex];
      const low = data.daily?.temperature_2m_min?.[dailyIndex];
      const code = data.daily?.weather_code?.[dailyIndex];
      const times = data.hourly?.time || [];
      const temps = data.hourly?.temperature_2m || [];
      const points = times.map((time, index) => ({ time, temp: temps[index] }))
        .filter(point => point.time.startsWith(date) && Number.isFinite(point.temp));

      if (!Number.isFinite(high) || !Number.isFinite(low) || !points.length) {
        throw new Error("Incomplete weather data");
      }

      const info = weather[code] || ["Unknown conditions", "🌡️"];
      el("condition").textContent = info[0];
      el("icon").textContent = info[1];
      el("high").textContent = Math.round(high) + "°";
      el("low").textContent = Math.round(low) + "°";

      const values = points.map(point => point.temp);
      const min = Math.min(...values);
      const max = Math.max(...values);
      const span = Math.max(max - min, 1);
      const timeline = el("timeline");

      points.forEach(point => {
        const hour = document.createElement("div");
        hour.className = "hour";
        const label = point.time.slice(11, 16);
        const height = 22 + ((point.temp - min) / span) * 62;
        hour.innerHTML =
          `<time datetime="${point.time}">${label}</time>` +
          `<div class="track"><div class="bar" style="height:${height}px"></div></div>` +
          `<strong>${Math.round(point.temp)}°</strong>`;
        timeline.appendChild(hour);
      });

      el("state").hidden = true;
    })
    .catch(() => fail("The weather data could not be loaded. Please check the selected date and try again."));
})();
</script>
</body>
</html>