gpt-5.6-terra @ none · 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;
    --ink: #eff6ff;
    --muted: #a8b7cf;
    --line: rgba(205, 225, 255, .16);
    --card: rgba(10, 25, 52, .78);
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    min-height: 800px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
      radial-gradient(circle at 18% 18%, rgba(111, 192, 255, .24), transparent 30%),
      radial-gradient(circle at 83% 74%, rgba(111, 115, 255, .22), transparent 32%),
      linear-gradient(135deg, #07152e, #101d4c 52%, #1d1551);
    color: var(--ink);
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .glow {
    position: fixed;
    width: 540px;
    height: 540px;
    border-radius: 50%;
    border: 1px solid rgba(195, 225, 255, .06);
    top: -230px;
    right: -90px;
    box-shadow: 0 0 0 65px rgba(195, 225, 255, .025), 0 0 0 130px rgba(195, 225, 255, .018);
    pointer-events: none;
  }
  main {
    width: min(1120px, calc(100vw - 100px));
    min-height: 610px;
    padding: 42px;
    background: var(--card);
    border: 1px solid rgba(220, 235, 255, .18);
    border-radius: 32px;
    box-shadow: 0 34px 100px rgba(0, 0, 0, .36), inset 0 1px rgba(255,255,255,.08);
    backdrop-filter: blur(24px);
  }
  header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--line);
  }
  .eyebrow {
    margin: 0 0 10px;
    color: #86caff;
    letter-spacing: .14em;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
  }
  h1 { margin: 0; font-size: 42px; letter-spacing: -.055em; line-height: 1; }
  #date { margin: 12px 0 0; color: var(--muted); font-size: 15px; }
  .weather-icon {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    font-size: 42px;
    background: linear-gradient(145deg, rgba(141, 212, 255, .25), rgba(111, 121, 255, .12));
    border: 1px solid rgba(193, 230, 255, .2);
  }
  .summary {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 42px;
    padding: 38px 0;
  }
  .temperature {
    display: flex;
    align-items: flex-start;
    gap: 22px;
  }
  .temperature strong {
    font-size: 112px;
    line-height: .78;
    letter-spacing: -.1em;
    font-weight: 650;
  }
  .temperature sup { font-size: 34px; letter-spacing: 0; vertical-align: top; }
  .condition { padding-top: 6px; }
  .condition h2 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.03em; }
  .condition p { margin: 0; color: var(--muted); font-size: 14px; max-width: 180px; line-height: 1.45; }
  .range {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    align-self: center;
  }
  .stat {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255,255,255,.035);
  }
  .stat span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .11em;
    margin-bottom: 10px;
  }
  .stat strong { font-size: 34px; letter-spacing: -.055em; }
  .hourly {
    padding-top: 27px;
    border-top: 1px solid var(--line);
  }
  .hourly-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 19px;
  }
  .hourly h3 { margin: 0; font-size: 16px; letter-spacing: -.02em; }
  .hourly small { color: var(--muted); }
  .hours {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
    min-height: 132px;
    align-items: end;
  }
  .hour {
    min-width: 0;
    display: grid;
    gap: 8px;
    text-align: center;
    color: var(--muted);
    font-size: 11px;
  }
  .bar-zone { height: 69px; display: flex; align-items: end; }
  .bar {
    width: 100%;
    min-height: 7px;
    border-radius: 99px;
    background: linear-gradient(180deg, #8dd8ff, #658cff);
    box-shadow: 0 4px 14px rgba(102, 151, 255, .35);
  }
  .hour b { color: var(--ink); font-size: 12px; font-weight: 600; }
  .status {
    min-height: 525px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--muted);
    font-size: 16px;
  }
  .status strong { color: var(--ink); display: block; margin-bottom: 8px; font-size: 22px; }
  @media (max-width: 850px) {
    body { min-height: 100vh; }
    main { width: calc(100vw - 32px); padding: 26px; }
    .summary { grid-template-columns: 1fr; gap: 25px; }
    .temperature strong { font-size: 84px; }
  }
</style>
</head>
<body>
<div class="glow"></div>
<main id="card">
  <div class="status"><div><strong>Loading forecast</strong>Retrieving your weather data…</div></div>
</main>
<script>
(() => {
  const params = new URLSearchParams(location.search);
  const today = new Date().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";
  const date = /^\d{4}-\d{2}-\d{2}$/.test(params.get("date") || "") ? params.get("date") : today;
  const card = document.getElementById("card");

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

  const fmtDate = new Intl.DateTimeFormat(undefined, { weekday: "long", month: "long", day: "numeric", year: "numeric", timeZone: "UTC" }).format(new Date(date + "T12:00:00Z"));
  const fmt = n => `${Math.round(n)}°`;
  const endpoint = date < today ? "/api/om/archive" : "/api/om/forecast";
  const qs = new URLSearchParams({
    latitude: lat, longitude: lon,
    daily: "temperature_2m_max,temperature_2m_min,weather_code",
    hourly: "temperature_2m",
    timezone: "UTC", temperature_unit: "celsius",
    start_date: date, end_date: date
  });

  fetch(`${endpoint}?${qs}`)
    .then(r => {
      if (!r.ok) throw new Error("Weather service unavailable");
      return r.json();
    })
    .then(data => {
      const daily = data.daily;
      const hourly = data.hourly;
      if (!daily || !hourly || !Array.isArray(hourly.temperature_2m)) throw new Error("Incomplete weather data");
      const code = daily.weather_code?.[0];
      const [condition, icon] = weather[code] || ["Unknown conditions", "🌡️"];
      const temps = hourly.temperature_2m;
      const selected = temps.map((temp, i) => ({ temp, time: hourly.time?.[i] || `${String(i).padStart(2, "0")}:00` }))
        .filter((_, i) => i % 2 === 0)
        .slice(0, 12);
      const values = selected.map(x => x.temp).filter(Number.isFinite);
      const low = Math.min(...values), high = Math.max(...values), spread = Math.max(high - low, 1);

      card.innerHTML = `
        <header>
          <div>
            <p class="eyebrow">Daily weather</p>
            <h1>${escapeHtml(name)}</h1>
            <p id="date">${fmtDate}</p>
          </div>
          <div class="weather-icon" aria-label="${escapeHtml(condition)}">${icon}</div>
        </header>
        <section class="summary">
          <div class="temperature">
            <strong>${fmt(daily.temperature_2m_max?.[0])}<sup>C</sup></strong>
            <div class="condition"><h2>${escapeHtml(condition)}</h2><p>High temperature for today.</p></div>
          </div>
          <div class="range">
            <div class="stat"><span>Maximum</span><strong>${fmt(daily.temperature_2m_max?.[0])}</strong></div>
            <div class="stat"><span>Minimum</span><strong>${fmt(daily.temperature_2m_min?.[0])}</strong></div>
          </div>
        </section>
        <section class="hourly">
          <div class="hourly-head"><h3>Hourly temperature</h3><small>UTC · Celsius</small></div>
          <div class="hours">${selected.map(({temp, time}) => {
            const height = Number.isFinite(temp) ? 12 + ((temp - low) / spread) * 56 : 7;
            return `<div class="hour"><span>${time.slice(11, 16)}</span><div class="bar-zone"><i class="bar" style="height:${height}px"></i></div><b>${fmt(temp)}</b></div>`;
          }).join("")}</div>
        </section>`;
    })
    .catch(() => {
      card.innerHTML = `<div class="status"><div><strong>Unable to load weather</strong>Please check your connection and try again.</div></div>`;
    });

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