gpt-5.6-terra @ high · 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: #f5f7ff;
    --muted: #b9c3d9;
    --glass: rgba(16, 26, 59, .78);
    --line: rgba(255,255,255,.15);
    --accent: #ffcb66;
    --cyan: #7de7ff;
  }
  * { 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 77% 14%, rgba(114, 190, 255, .3), transparent 25%),
      radial-gradient(circle at 21% 88%, rgba(105, 80, 229, .42), transparent 30%),
      linear-gradient(135deg, #071126 0%, #172b63 51%, #582f75 100%);
  }
  .orb { position: fixed; border-radius: 50%; pointer-events: none; filter: blur(1px); }
  .orb.one { width: 240px; height: 240px; top: -92px; right: 154px; background: rgba(254, 217, 120, .12); }
  .orb.two { width: 390px; height: 390px; bottom: -235px; left: -100px; background: rgba(88, 194, 255, .13); }
  main {
    height: 800px;
    display: grid;
    place-items: center;
    padding: 52px;
  }
  .card {
    width: 1110px;
    min-height: 618px;
    border: 1px solid var(--line);
    border-radius: 32px;
    background: var(--glass);
    box-shadow: 0 32px 80px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.12);
    backdrop-filter: blur(20px);
    overflow: hidden;
  }
  .top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 40px 48px 34px;
    border-bottom: 1px solid var(--line);
  }
  .eyebrow {
    margin: 0 0 9px;
    color: var(--cyan);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .15em;
    text-transform: uppercase;
  }
  h1 { margin: 0; font-size: 40px; line-height: 1.08; letter-spacing: -.04em; }
  .date { margin: 11px 0 0; color: var(--muted); font-size: 16px; }
  .today-chip {
    display: flex; gap: 9px; align-items: center;
    padding: 11px 15px; border: 1px solid var(--line); border-radius: 999px;
    color: #dbe5ff; font-size: 13px; font-weight: 650;
    background: rgba(255,255,255,.07);
  }
  .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #77e5ad; box-shadow: 0 0 12px #77e5ad; }
  .overview {
    display: grid;
    grid-template-columns: 1.25fr .75fr .75fr;
    gap: 24px;
    padding: 35px 48px 31px;
  }
  .condition { display: flex; align-items: center; gap: 20px; }
  .icon {
    width: 92px; height: 92px; display: grid; place-items: center; flex: none;
    border-radius: 25px; font-size: 52px;
    background: linear-gradient(145deg, rgba(255,203,102,.23), rgba(255,255,255,.06));
    border: 1px solid rgba(255,222,147,.25);
    box-shadow: inset 0 1px rgba(255,255,255,.2);
  }
  .condition h2 { margin: 0; font-size: 27px; letter-spacing: -.035em; }
  .condition p { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
  .metric {
    padding-left: 28px;
    border-left: 1px solid var(--line);
    display: flex; flex-direction: column; justify-content: center;
  }
  .metric span, .chart-head p { color: var(--muted); font-size: 13px; font-weight: 650; }
  .metric strong { margin-top: 3px; font-size: 47px; line-height: 1; letter-spacing: -.055em; }
  .metric strong small { font-size: 21px; letter-spacing: 0; color: #cdd6e7; }
  .chart-wrap {
    margin: 0 28px 28px;
    padding: 23px 20px 17px;
    border-radius: 20px;
    background: rgba(4, 12, 35, .31);
    border: 1px solid rgba(255,255,255,.09);
  }
  .chart-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 6px 10px; }
  .chart-head h3 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
  .chart-head p { margin: 0; }
  #chart { display: block; width: 100%; height: 180px; overflow: visible; }
  .labels { display: flex; justify-content: space-between; color: #8996b4; font-size: 11px; padding: 0 7px; margin-top: 1px; }
  .loading, .error {
    min-height: 420px; display: grid; place-items: center; text-align: center;
    color: var(--muted); font-size: 17px; padding: 40px;
  }
  .loading::before {
    content: ""; display: block; width: 30px; height: 30px; margin: auto auto 15px;
    border: 3px solid rgba(255,255,255,.18); border-top-color: var(--cyan); border-radius: 50%;
    animation: spin .8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .error strong { display: block; color: var(--ink); font-size: 22px; margin-bottom: 10px; }
</style>
</head>
<body>
<div class="orb one"></div><div class="orb two"></div>
<main>
  <article class="card" aria-live="polite" aria-label="Daily weather">
    <div id="content" class="loading">Loading weather data…</div>
  </article>
</main>
<script>
(() => {
  const params = new URLSearchParams(location.search);
  const utcToday = 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").trim();
  const requested = /^\d{4}-\d{2}-\d{2}$/.test(params.get("date") || "") ? params.get("date") : utcToday;
  const codes = {
    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:["Heavy showers","⛈️"],
    85:["Snow showers","🌨️"], 86:["Heavy snow showers","❄️"], 95:["Thunderstorm","⛈️"],
    96:["Thunderstorm with hail","⛈️"], 99:["Thunderstorm with hail","⛈️"]
  };
  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: requested, end_date: requested
  });
  const endpoint = requested < utcToday ? "/api/om/archive" : "/api/om/forecast";

  function fmtDate(value) {
    return new Intl.DateTimeFormat("en-US", { weekday:"long", month:"long", day:"numeric", year:"numeric", timeZone:"UTC" })
      .format(new Date(value + "T12:00:00Z"));
  }
  function temp(value) { return `${Math.round(value)}°`; }
  function chart(points) {
    const values = points.map(p => p.v);
    const min = Math.floor(Math.min(...values) - 2), max = Math.ceil(Math.max(...values) + 2);
    const w = 990, h = 180, padX = 12, padY = 16;
    const x = i => padX + i * ((w - padX * 2) / (points.length - 1));
    const y = v => h - padY - ((v - min) / (max - min || 1)) * (h - padY * 2);
    const line = points.map((p,i) => `${i ? "L" : "M"} ${x(i).toFixed(1)} ${y(p.v).toFixed(1)}`).join(" ");
    const area = `${line} L ${x(points.length-1)} ${h-padY} L ${x(0)} ${h-padY} Z`;
    const grids = [0.2, .5, .8].map(r => `<line x1="${padX}" x2="${w-padX}" y1="${(padY+(h-padY*2)*r).toFixed(1)}" y2="${(padY+(h-padY*2)*r).toFixed(1)}" stroke="rgba(255,255,255,.10)" stroke-dasharray="3 5"/>`).join("");
    const dots = points.map((p,i) => `<circle cx="${x(i)}" cy="${y(p.v)}" r="3.4" fill="#dffaff" stroke="#41cfea" stroke-width="2"><title>${p.hour}:00 — ${temp(p.v)}C</title></circle>`).join("");
    return `<svg id="chart" viewBox="0 0 ${w} ${h}" preserveAspectRatio="none" aria-label="Hourly temperature chart">${grids}<defs><linearGradient id="fill" x1="0" y1="0" x2="0" y2="1"><stop stop-color="#53d9fb" stop-opacity=".36"/><stop offset="1" stop-color="#53d9fb" stop-opacity="0"/></linearGradient></defs><path d="${area}" fill="url(#fill)"/><path d="${line}" fill="none" stroke="#74e6ff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>${dots}</svg>`;
  }
  function render(data) {
    const daily = data.daily || {}, hourly = data.hourly || {};
    const high = daily.temperature_2m_max?.[0], low = daily.temperature_2m_min?.[0], code = daily.weather_code?.[0];
    const condition = codes[code] || ["Weather conditions","🌡️"];
    const hourlyPoints = (hourly.time || []).map((t, i) => ({ hour: t.slice(11,13), v: hourly.temperature_2m?.[i] })).filter(p => Number.isFinite(p.v));
    if (!Number.isFinite(high) || !Number.isFinite(low) || !hourlyPoints.length) throw new Error("Incomplete weather data");
    const labels = ["00:00","04:00","08:00","12:00","16:00","20:00","23:00"];
    document.getElementById("content").className = "";
    document.getElementById("content").innerHTML = `
      <header class="top">
        <div><p class="eyebrow">Local weather</p><h1>${escapeHTML(name)}</h1><p class="date">${fmtDate(requested)}</p></div>
        <div class="today-chip"><i class="status-dot"></i> UTC forecast</div>
      </header>
      <section class="overview">
        <div class="condition"><div class="icon" aria-hidden="true">${condition[1]}</div><div><h2>${condition[0]}</h2><p>Conditions for the day</p></div></div>
        <div class="metric"><span>High</span><strong>${temp(high)}<small>C</small></strong></div>
        <div class="metric"><span>Low</span><strong>${temp(low)}<small>C</small></strong></div>
      </section>
      <section class="chart-wrap">
        <div class="chart-head"><h3>Hourly temperature</h3><p>°C · UTC</p></div>
        ${chart(hourlyPoints)}
        <div class="labels">${labels.map(x => `<span>${x}</span>`).join("")}</div>
      </section>`;
  }
  function escapeHTML(s) {
    const d = document.createElement("div"); d.textContent = s; return d.innerHTML;
  }
  fetch(`${endpoint}?${query}`)
    .then(r => { if (!r.ok) throw new Error(`Request failed (${r.status})`); return r.json(); })
    .then(render)
    .catch(() => {
      const el = document.getElementById("content");
      el.className = "error";
      el.innerHTML = "<div><strong>Weather data couldn’t be loaded.</strong>Please check your connection and try again.</div>";
    });
})();
</script>
</body>
</html>