gpt-5.6-terra @ none · cursor

<!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: #f8fbff;
    --muted: #b9c5d8;
    --panel: rgba(13, 26, 50, .72);
    --line: rgba(255,255,255,.13);
    --accent: #ffd36b;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    min-width: 1280px;
    min-height: 800px;
    overflow: hidden;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background:
      radial-gradient(circle at 16% 12%, rgba(76, 158, 255, .38), transparent 28%),
      radial-gradient(circle at 83% 75%, rgba(112, 78, 227, .32), transparent 31%),
      linear-gradient(135deg, #071426 0%, #10254b 48%, #19113d 100%);
  }
  .scene {
    position: relative;
    width: 1280px;
    height: 800px;
    display: grid;
    place-items: center;
    isolation: isolate;
  }
  .scene::before, .scene::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    opacity: .55;
    z-index: -1;
  }
  .scene::before {
    width: 560px; height: 560px;
    right: -120px; top: -210px;
    background: radial-gradient(circle, rgba(103, 181, 255, .35), rgba(103,181,255,0) 68%);
  }
  .scene::after {
    width: 430px; height: 430px;
    left: -170px; bottom: -160px;
    background: radial-gradient(circle, rgba(101, 87, 226, .28), rgba(101,87,226,0) 70%);
  }
  .card {
    width: 930px;
    min-height: 570px;
    padding: 44px 48px 38px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 32px;
    background: linear-gradient(145deg, rgba(32, 57, 94, .86), var(--panel));
    box-shadow: 0 30px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.1);
    backdrop-filter: blur(20px);
  }
  .top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 36px;
  }
  .eyebrow {
    color: #9fc7ff;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  h1 {
    margin: 8px 0 3px;
    font-size: 40px;
    line-height: 1.08;
    letter-spacing: -.045em;
  }
  .date {
    color: var(--muted);
    font-size: 16px;
  }
  .condition {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.08);
    white-space: nowrap;
    font-weight: 650;
  }
  .icon {
    width: 24px; height: 24px;
    display: inline-grid;
    place-items: center;
    font-size: 22px;
  }
  .hero {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 34px;
    align-items: center;
    padding: 27px 0 33px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .temperature {
    display: flex;
    align-items: flex-start;
    letter-spacing: -.07em;
  }
  .temperature strong {
    font-size: 124px;
    font-weight: 700;
    line-height: .78;
  }
  .temperature span {
    margin: 4px 0 0 8px;
    color: var(--accent);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
  }
  .range {
    display: flex;
    gap: 13px;
    margin-top: 25px;
  }
  .range div {
    min-width: 116px;
    padding: 12px 14px;
    border-left: 2px solid rgba(255,255,255,.28);
    background: linear-gradient(90deg, rgba(255,255,255,.08), transparent);
  }
  .range b, .range small { display: block; }
  .range b { font-size: 21px; letter-spacing: -.03em; }
  .range small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .summary {
    color: #dce8fa;
    font-size: 18px;
    line-height: 1.55;
  }
  .summary b { color: #fff; }
  .hourly-title {
    margin: 28px 0 15px;
    color: #b9c5d8;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .hours {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
  }
  .hour {
    min-height: 101px;
    padding: 12px 8px 10px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    text-align: center;
    background: rgba(4, 13, 30, .2);
  }
  .hour .time {
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
  }
  .hour .bar {
    width: 4px;
    height: 30px;
    margin: 7px auto;
    border-radius: 99px;
    background: linear-gradient(#ffdf7c, #6bb9ff);
    opacity: .9;
  }
  .hour .value {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.035em;
  }
  .state {
    min-height: 480px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--muted);
    font-size: 18px;
  }
  .state b { color: var(--ink); }
</style>
</head>
<body>
<main class="scene">
  <section class="card" id="card" aria-live="polite">
    <div class="state">Loading weather data…</div>
  </section>
</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 codeMap = {
    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:["Snowfall","🌨️"], 75:["Heavy snow","❄️"],
    77:["Snow grains","❄️"], 80:["Rain showers","🌦️"], 81:["Rain showers","🌧️"], 82:["Heavy showers","⛈️"],
    85:["Snow showers","🌨️"], 86:["Heavy snow showers","❄️"], 95:["Thunderstorm","⛈️"],
    96:["Thunderstorm with hail","⛈️"], 99:["Severe thunderstorm","⛈️"]
  };
  const formatDate = d => new Intl.DateTimeFormat("en", {
    weekday:"long", month:"long", day:"numeric", year:"numeric", timeZone:"UTC"
  }).format(new Date(d + "T12:00:00Z"));
  const temp = n => `${Math.round(n)}°`;
  const query = 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
  });
  const endpoint = date < today ? "/api/om/archive" : "/api/om/forecast";

  fetch(`${endpoint}?${query}`)
    .then(r => {
      if (!r.ok) throw new Error("Weather service unavailable");
      return r.json();
    })
    .then(data => {
      const max = data?.daily?.temperature_2m_max?.[0];
      const min = data?.daily?.temperature_2m_min?.[0];
      const weatherCode = data?.daily?.weather_code?.[0];
      const times = data?.hourly?.time || [];
      const temperatures = data?.hourly?.temperature_2m || [];
      if (![max, min, weatherCode].every(v => v !== undefined) || !times.length) throw new Error("Incomplete weather data");
      const [condition, icon] = codeMap[weatherCode] || ["Unknown conditions", "🌡️"];
      const current = temperatures[Math.min(12, temperatures.length - 1)];
      const hours = times.map((time, i) => ({
        time: time.slice(11, 16),
        value: temperatures[i]
      }));
      const picks = [0, 3, 6, 9, 12, 15, 18, 21].map(i => hours[Math.min(i, hours.length - 1)]);
      card.innerHTML = `
        <header class="top">
          <div>
            <div class="eyebrow">Daily weather</div>
            <h1>${escapeHtml(name)}</h1>
            <div class="date">${formatDate(date)}</div>
          </div>
          <div class="condition"><span class="icon">${icon}</span><span>${condition}</span></div>
        </header>
        <section class="hero">
          <div>
            <div class="temperature"><strong>${temp(current)}</strong><span>C</span></div>
            <div class="range">
              <div><b>${temp(max)}</b><small>High</small></div>
              <div><b>${temp(min)}</b><small>Low</small></div>
            </div>
          </div>
          <p class="summary"><b>${condition}.</b> Temperatures range from ${temp(min)} to ${temp(max)} today. Explore the hourly outlook below to see how the day unfolds.</p>
        </section>
        <div class="hourly-title">Hourly temperature · UTC</div>
        <section class="hours">${picks.map((h, i) => `
          <article class="hour">
            <div class="time">${h.time}</div>
            <div class="bar" style="height:${18 + Math.max(0, Math.min(32, Math.round((h.value - min) / Math.max(1, max - min) * 32)))}px"></div>
            <div class="value">${temp(h.value)}</div>
          </article>`).join("")}
        </section>`;
    })
    .catch(() => {
      card.innerHTML = `<div class="state"><div><b>Weather data could not be loaded.</b><br>Please try again shortly.</div></div>`;
    });

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