gpt-5.6-terra @ low · cursor

<!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 {
    --ink: #eff6ff;
    --muted: #a7b9d4;
    --line: rgba(255,255,255,.13);
    --panel: rgba(13, 27, 57, .72);
    --accent: #ffc85b;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    min-width: 960px;
    min-height: 800px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background:
      radial-gradient(circle at 17% 14%, rgba(96, 176, 255, .28), transparent 30%),
      radial-gradient(circle at 84% 82%, rgba(151, 91, 255, .24), transparent 32%),
      linear-gradient(135deg, #102a55 0%, #152d57 44%, #172344 100%);
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .orb {
    position: fixed;
    width: 430px; height: 430px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.07);
    top: -190px; right: -105px;
    box-shadow: 0 0 0 42px rgba(255,255,255,.025), 0 0 0 86px rgba(255,255,255,.018);
  }
  main {
    width: 1060px;
    min-height: 610px;
    padding: 42px 46px 32px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 30px;
    background: linear-gradient(125deg, rgba(29, 54, 97, .88), rgba(14, 27, 58, .77));
    box-shadow: 0 28px 90px rgba(3, 10, 29, .42), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(20px);
  }
  .topline, .meta, .summary, .hours-head { display: flex; align-items: center; }
  .topline { justify-content: space-between; }
  .eyebrow {
    margin: 0 0 7px;
    color: #b7cae7;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  h1 { margin: 0; font-size: 35px; line-height: 1.05; letter-spacing: -.045em; }
  .date {
    padding: 10px 15px;
    border: 1px solid var(--line);
    border-radius: 100px;
    color: #d8e5f7;
    font-size: 14px;
    background: rgba(255,255,255,.055);
  }
  .summary {
    min-height: 246px;
    margin: 26px 0 20px;
    padding: 25px 30px;
    justify-content: space-between;
    border-radius: 22px;
    background: linear-gradient(110deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
    border: 1px solid rgba(255,255,255,.11);
  }
  .condition { display: flex; align-items: center; gap: 23px; }
  .weather-icon {
    width: 124px; height: 124px;
    flex: 0 0 auto;
    color: var(--accent);
    filter: drop-shadow(0 9px 13px rgba(255, 190, 54, .2));
  }
  .condition-name { margin: 0 0 5px; font-size: 23px; font-weight: 650; letter-spacing: -.025em; }
  .condition-detail { margin: 0; color: var(--muted); font-size: 14px; }
  .temperature {
    font-size: 117px;
    font-weight: 250;
    line-height: .83;
    letter-spacing: -.09em;
  }
  .degree { font-size: .45em; vertical-align: top; margin-left: 6px; font-weight: 350; }
  .range {
    display: grid;
    grid-template-columns: auto auto;
    gap: 13px 30px;
    padding-left: 38px;
    border-left: 1px solid var(--line);
  }
  .range span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
  .range strong { display: block; margin-top: 5px; font-size: 24px; font-weight: 550; letter-spacing: -.04em; }
  .hours-head { justify-content: space-between; margin: 2px 3px 15px; }
  .hours-head h2 { margin: 0; font-size: 14px; letter-spacing: .01em; }
  .hours-head span { color: var(--muted); font-size: 12px; }
  .hourly {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
  }
  .hour {
    min-height: 126px;
    padding: 13px 7px 11px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid transparent;
    background: rgba(255,255,255,.035);
  }
  .hour.now { background: rgba(255, 202, 85, .16); border-color: rgba(255, 211, 107, .35); }
  .hour time { display: block; color: var(--muted); font-size: 11px; }
  .hour b { display: block; margin-top: 29px; font-size: 17px; font-weight: 600; letter-spacing: -.04em; }
  .bar { width: 3px; margin: 10px auto 0; border-radius: 99px; background: #78baff; opacity: .85; }
  .error {
    display: grid;
    place-items: center;
    height: 390px;
    text-align: center;
    color: #e6efff;
    font-size: 19px;
  }
  .error small { display: block; margin-top: 9px; color: var(--muted); font-size: 14px; }
  .loading { opacity: .72; }
</style>
</head>
<body>
<div class="orb"></div>
<main id="card" class="loading" aria-live="polite">
  <div class="topline">
    <div>
      <p class="eyebrow">Daily weather</p>
      <h1 id="location">Berlin</h1>
    </div>
    <div class="date" id="date">Loading date…</div>
  </div>
  <section class="summary">
    <div class="condition">
      <svg class="weather-icon" id="icon" viewBox="0 0 128 128" aria-hidden="true"></svg>
      <div>
        <p class="condition-name" id="condition">Loading weather…</p>
        <p class="condition-detail">Temperature in Celsius</p>
      </div>
    </div>
    <div class="temperature"><span id="current">—</span><span class="degree">°</span></div>
    <div class="range">
      <div><span>High</span><strong id="max">—°</strong></div>
      <div><span>Low</span><strong id="min">—°</strong></div>
    </div>
  </section>
  <div class="hours-head">
    <h2>Hourly temperature</h2>
    <span>UTC</span>
  </div>
  <section class="hourly" id="hourly"></section>
</main>
<script>
(() => {
  const qs = new URLSearchParams(location.search);
  const utcToday = new Date().toISOString().slice(0, 10);
  const validDate = /^\d{4}-\d{2}-\d{2}$/.test(qs.get("date") || "") && !isNaN(Date.parse(qs.get("date") + "T00:00:00Z"));
  const date = validDate ? qs.get("date") : utcToday;
  const lat = Number(qs.get("lat"));
  const lon = Number(qs.get("lon"));
  const latitude = Number.isFinite(lat) && lat >= -90 && lat <= 90 ? lat : 52.52;
  const longitude = Number.isFinite(lon) && lon >= -180 && lon <= 180 ? lon : 13.405;
  const name = (qs.get("name") || "Berlin").trim() || "Berlin";
  const $ = id => document.getElementById(id);

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

  const symbols = {
    sunny: '<circle cx="64" cy="64" r="21" fill="none" stroke="currentColor" stroke-width="6"/><g stroke="currentColor" stroke-width="6" stroke-linecap="round"><path d="M64 15v11M64 102v11M15 64h11M102 64h11M29 29l8 8M91 91l8 8M99 29l-8 8M37 91l-8 8"/></g>',
    cloudy: '<path d="M39 94h54c15 0 25-10 25-23 0-14-11-25-25-25-3 0-6 1-8 2C81 34 69 26 55 26c-17 0-31 13-32 30-12 2-21 12-21 25 0 16 13 29 29 29h8" fill="rgba(255,255,255,.2)" stroke="currentColor" stroke-width="6" stroke-linejoin="round"/>',
    rain: '<path d="M31 80h63c16 0 27-10 27-24 0-15-12-27-27-27-3 0-5 0-8 1C81 19 70 14 57 14 39 14 25 27 24 45 11 48 4 58 4 69c0 16 12 27 27 27" fill="rgba(255,255,255,.18)" stroke="currentColor" stroke-width="6"/><g stroke="#7fd5ff" stroke-width="6" stroke-linecap="round"><path d="M39 94l-4 15M64 94l-4 15M89 94l-4 15"/></g>',
    snow: '<path d="M31 77h63c16 0 27-10 27-24 0-15-12-27-27-27-3 0-5 0-8 1C81 19 70 14 57 14 39 14 25 27 24 45 11 48 4 58 4 69c0 16 12 27 27 27" fill="rgba(255,255,255,.18)" stroke="currentColor" stroke-width="6"/><g fill="#e9f7ff"><circle cx="40" cy="101" r="5"/><circle cx="65" cy="105" r="5"/><circle cx="89" cy="101" r="5"/></g>',
    storm: '<path d="M31 78h63c16 0 27-10 27-24 0-15-12-27-27-27-3 0-5 0-8 1C81 20 70 15 57 15 39 15 25 28 24 46 11 49 4 59 4 70c0 16 12 27 27 27" fill="rgba(255,255,255,.18)" stroke="currentColor" stroke-width="6"/><path d="M68 77L50 103h16l-8 17 28-33H69z" fill="#ffd251"/>'
  };
  function weather(code) {
    if (code === 0) return ["Clear sky", "sunny"];
    if ([1, 2].includes(code)) return ["Partly cloudy", "sunny"];
    if (code === 3 || [45, 48].includes(code)) return [code === 3 ? "Overcast" : "Foggy", "cloudy"];
    if ([71, 73, 75, 77, 85, 86].includes(code)) return ["Snow showers", "snow"];
    if ([95, 96, 99].includes(code)) return ["Thunderstorms", "storm"];
    return ["Rain showers", "rain"];
  }
  function temp(value) { return Math.round(value) + "°"; }

  const params = new URLSearchParams({
    latitude, longitude,
    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 < utcToday ? "/api/om/archive" : "/api/om/forecast";

  fetch(endpoint + "?" + params)
    .then(r => { if (!r.ok) throw new Error("Request failed"); return r.json(); })
    .then(data => {
      const daily = data.daily;
      const max = daily?.temperature_2m_max?.[0], min = daily?.temperature_2m_min?.[0], code = daily?.weather_code?.[0];
      const times = data.hourly?.time, temps = data.hourly?.temperature_2m;
      if (![max, min, code].every(Number.isFinite) || !Array.isArray(times) || !Array.isArray(temps)) throw new Error("Incomplete data");
      const [label, icon] = weather(code);
      $("condition").textContent = label;
      $("icon").innerHTML = symbols[icon];
      $("max").textContent = temp(max);
      $("min").textContent = temp(min);
      const nowHour = new Date().toISOString().slice(11, 13);
      $("current").textContent = Math.round(temps[Number(nowHour)] ?? (max + min) / 2);
      const hourly = $("hourly");
      const indices = [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22];
      const values = indices.map(i => temps[i]).filter(Number.isFinite);
      const lowest = Math.min(...values), highest = Math.max(...values);
      indices.forEach(i => {
        if (!Number.isFinite(temps[i])) return;
        const hour = document.createElement("div");
        hour.className = "hour" + (String(i).padStart(2, "0") === nowHour && date === utcToday ? " now" : "");
        const h = 16 + ((temps[i] - lowest) / Math.max(1, highest - lowest)) * 26;
        hour.innerHTML = `<time>${String(i).padStart(2, "0")}:00</time><b>${temp(temps[i])}</b><i class="bar" style="height:${h}px"></i>`;
        hourly.appendChild(hour);
      });
      $("card").classList.remove("loading");
    })
    .catch(() => {
      $("card").innerHTML = '<div class="error">Weather data could not be loaded.<small>Please try again shortly.</small></div>';
    });
})();
</script>
</body>
</html>