gpt-5.6-terra @ medium · 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: #f7f4ff;
    --muted: #bdb7cf;
    --glass: rgba(25, 20, 51, .76);
    --line: rgba(255, 255, 255, .13);
    --violet: #9c7cff;
    --sun: #ffd568;
    --cold: #70d7ff;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    min-height: 800px;
    display: grid;
    place-items: center;
    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% 18%, rgba(104, 91, 235, .52), transparent 30%),
      radial-gradient(circle at 84% 82%, rgba(16, 165, 207, .28), transparent 32%),
      linear-gradient(135deg, #16112f 0%, #29204d 52%, #102d50 100%);
  }
  .orb {
    position: fixed; border-radius: 50%; filter: blur(1px); opacity: .5; pointer-events: none;
  }
  .orb.one { width: 330px; height: 330px; top: -100px; right: 100px; background: #755ded; }
  .orb.two { width: 190px; height: 190px; bottom: -55px; left: 100px; background: #40c6e9; }
  main {
    width: 920px;
    min-height: 584px;
    padding: 38px 42px 34px;
    position: relative;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 30px;
    background: var(--glass);
    box-shadow: 0 32px 80px rgba(4, 2, 19, .42), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(20px);
  }
  .top {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding-bottom: 30px; border-bottom: 1px solid var(--line);
  }
  .eyebrow {
    margin: 0 0 8px; font-size: 11px; letter-spacing: .16em; font-weight: 800;
    color: #cfc4ff; text-transform: uppercase;
  }
  h1 { margin: 0; font-size: 34px; letter-spacing: -.045em; line-height: 1.05; }
  .date { margin: 9px 0 0; color: var(--muted); font-size: 14px; }
  .badge {
    display: flex; align-items: center; gap: 8px; padding: 9px 12px;
    border: 1px solid var(--line); border-radius: 999px; color: #ddd7ec; font-size: 12px;
  }
  .dot { width: 7px; height: 7px; border-radius: 50%; background: #8df5bc; box-shadow: 0 0 12px #8df5bc; }
  .overview {
    display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px;
    align-items: center; padding: 31px 0 27px;
  }
  .condition {
    display: flex; align-items: center; gap: 21px;
  }
  .weather-icon {
    width: 92px; height: 92px; flex: 0 0 auto; filter: drop-shadow(0 7px 16px rgba(255, 204, 83, .25));
  }
  .condition-name { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
  .condition-sub { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
  .temps {
    display: flex; align-items: baseline; justify-content: flex-end; gap: 18px;
  }
  .high { font-size: 76px; line-height: .8; font-weight: 300; letter-spacing: -.08em; }
  .degree { font-size: .42em; vertical-align: top; margin-left: 3px; color: var(--sun); }
  .low { color: var(--muted); font-size: 15px; }
  .low strong { color: var(--cold); font-size: 27px; font-weight: 500; letter-spacing: -.04em; }
  .hourly-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 15px;
  }
  h2 { margin: 0; font-size: 14px; letter-spacing: -.01em; }
  .range { color: var(--muted); font-size: 12px; }
  .chart-wrap {
    height: 192px; padding: 16px 13px 8px; border: 1px solid var(--line);
    border-radius: 18px; background: rgba(7, 5, 24, .19); overflow: hidden;
  }
  #chart { width: 100%; height: 100%; display: block; overflow: visible; }
  .footer {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 20px; color: #a9a1bd; font-size: 11px;
  }
  .footer strong { color: #d8d3e5; font-weight: 600; }
  #error {
    display: none; min-height: 385px; place-items: center; text-align: center;
    color: var(--muted); font-size: 16px;
  }
  #error b { display: block; margin-bottom: 8px; color: var(--ink); font-size: 22px; }
  .loading .card-content { opacity: .35; }
  .loading .badge .dot { background: var(--sun); box-shadow: 0 0 12px var(--sun); }
</style>
</head>
<body class="loading">
<div class="orb one"></div><div class="orb two"></div>
<main>
  <div class="card-content">
    <header class="top">
      <div>
        <p class="eyebrow">Daily forecast</p>
        <h1 id="location">Berlin</h1>
        <p class="date" id="date">Loading weather…</p>
      </div>
      <div class="badge"><span class="dot"></span><span id="status">Updating</span></div>
    </header>

    <section class="overview">
      <div class="condition">
        <svg class="weather-icon" id="weatherIcon" viewBox="0 0 100 100" aria-hidden="true"></svg>
        <div>
          <p class="condition-name" id="condition">Loading</p>
          <p class="condition-sub" id="summary">Fetching local conditions</p>
        </div>
      </div>
      <div class="temps">
        <div class="high" id="high">—<span class="degree">°</span></div>
        <div class="low">Low<br><strong id="low">—°</strong></div>
      </div>
    </section>

    <section>
      <div class="hourly-header">
        <h2>Hourly temperatures</h2>
        <span class="range" id="range">—</span>
      </div>
      <div class="chart-wrap"><svg id="chart" viewBox="0 0 800 168" preserveAspectRatio="none" aria-label="Hourly temperature chart"></svg></div>
    </section>

    <footer class="footer">
      <span>Temperature in <strong>Celsius</strong></span>
      <span>Open-Meteo weather data</span>
    </footer>
  </div>
  <div id="error"><div><b>Weather unavailable</b><span>We couldn't load weather data for this date. Please try again shortly.</span></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 requestedDate = /^\d{4}-\d{2}-\d{2}$/.test(params.get("date") || "") ? params.get("date") : today;
  const $ = id => document.getElementById(id);
  $("location").textContent = name;

  const conditions = {
    0: ["Clear sky", "clear"],
    1: ["Mainly clear", "partly"],
    2: ["Partly cloudy", "partly"],
    3: ["Overcast", "cloud"],
    45: ["Foggy", "fog"], 48: ["Rime fog", "fog"],
    51: ["Light drizzle", "rain"], 53: ["Drizzle", "rain"], 55: ["Heavy drizzle", "rain"],
    56: ["Freezing drizzle", "rain"], 57: ["Heavy freezing drizzle", "rain"],
    61: ["Slight rain", "rain"], 63: ["Rain", "rain"], 65: ["Heavy rain", "rain"],
    66: ["Freezing rain", "rain"], 67: ["Heavy freezing rain", "rain"],
    71: ["Light snowfall", "snow"], 73: ["Snowfall", "snow"], 75: ["Heavy snowfall", "snow"],
    77: ["Snow grains", "snow"], 80: ["Rain showers", "rain"], 81: ["Rain showers", "rain"],
    82: ["Violent rain showers", "rain"], 85: ["Snow showers", "snow"], 86: ["Heavy snow showers", "snow"],
    95: ["Thunderstorm", "storm"], 96: ["Thunderstorm with hail", "storm"], 99: ["Heavy thunderstorm", "storm"]
  };
  const icons = {
    clear: `<circle cx="50" cy="50" r="17" fill="#FFD568"/><g stroke="#FFD568" stroke-width="5" stroke-linecap="round"><path d="M50 13v9M50 78v9M13 50h9M78 50h9M24 24l6 6M70 70l6 6M76 24l-6 6M30 70l-6 6"/></g>`,
    partly: `<circle cx="44" cy="39" r="15" fill="#FFD568"/><path d="M28 70h47a13 13 0 0 0 0-26 20 20 0 0 0-37-5A15 15 0 0 0 28 70Z" fill="#E9E7F8"/>`,
    cloud: `<path d="M19 70h59a15 15 0 0 0 0-30 22 22 0 0 0-42-6A18 18 0 0 0 19 70Z" fill="#E9E7F8"/>`,
    fog: `<path d="M20 47h60M14 61h72M25 75h50" stroke="#DAD7EB" stroke-width="6" stroke-linecap="round"/>`,
    rain: `<path d="M18 59h62a14 14 0 0 0-2-28 22 22 0 0 0-41 8A14 14 0 0 0 18 59Z" fill="#E9E7F8"/><g stroke="#70D7FF" stroke-width="5" stroke-linecap="round"><path d="m33 69-4 12M52 69l-4 12M70 69l-4 12"/></g>`,
    snow: `<path d="M18 57h62a14 14 0 0 0-2-28 22 22 0 0 0-41 8A14 14 0 0 0 18 57Z" fill="#E9E7F8"/><g fill="#70D7FF"><circle cx="34" cy="74" r="4"/><circle cx="52" cy="80" r="4"/><circle cx="70" cy="74" r="4"/></g>`,
    storm: `<path d="M18 57h62a14 14 0 0 0-2-28 22 22 0 0 0-41 8A14 14 0 0 0 18 57Z" fill="#B8B1D6"/><path d="m53 60-13 20h12l-5 13 18-24H53Z" fill="#FFD568"/>`
  };

  function formatDate(value) {
    return new Intl.DateTimeFormat("en", { weekday: "long", month: "long", day: "numeric", year: "numeric", timeZone: "UTC" })
      .format(new Date(value + "T12:00:00Z"));
  }
  function degree(value) { return `${Math.round(value)}°`; }

  function chart(values) {
    const svg = $("chart"), width = 800, height = 168, top = 22, bottom = 38;
    const valid = values.map(Number).filter(Number.isFinite);
    const min = Math.floor(Math.min(...valid) - 2), max = Math.ceil(Math.max(...valid) + 2);
    const y = v => top + (max - v) / (max - min || 1) * (height - top - bottom);
    const x = i => 16 + i * (width - 32) / Math.max(values.length - 1, 1);
    const points = values.map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(" ");
    const area = `M ${x(0)} ${height-bottom} L ${points.replace(/ /g, " L ")} L ${x(values.length-1)} ${height-bottom} Z`;
    const ticks = [0, 6, 12, 18, 23].filter(i => i < values.length);
    svg.innerHTML = `
      <defs><linearGradient id="fill" x1="0" x2="0" y1="0" y2="1"><stop stop-color="#9C7CFF" stop-opacity=".38"/><stop offset="1" stop-color="#9C7CFF" stop-opacity="0"/></linearGradient></defs>
      <line x1="0" x2="800" y1="${y((min+max)/2)}" y2="${y((min+max)/2)}" stroke="rgba(255,255,255,.10)" stroke-dasharray="4 7"/>
      <path d="${area}" fill="url(#fill)"/><polyline points="${points}" fill="none" stroke="#C7B8FF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
      ${ticks.map(i => `<circle cx="${x(i)}" cy="${y(values[i])}" r="4" fill="#F7F4FF" stroke="#9C7CFF" stroke-width="2"/><text x="${x(i)}" y="${height-10}" fill="#AFA8C2" font-size="11" text-anchor="middle">${String(i).padStart(2,"0")}:00</text>`).join("")}
      <text x="4" y="${top}" fill="#AFA8C2" font-size="10">${max}°</text><text x="4" y="${height-bottom}" fill="#AFA8C2" font-size="10">${min}°</text>`;
  }

  async function load() {
    const api = requestedDate < today ? "/api/om/archive" : "/api/om/forecast";
    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: requestedDate, end_date: requestedDate
    });
    try {
      const response = await fetch(`${api}?${query}`);
      if (!response.ok) throw new Error("Request failed");
      const data = await response.json();
      const max = data.daily?.temperature_2m_max?.[0];
      const min = data.daily?.temperature_2m_min?.[0];
      const code = data.daily?.weather_code?.[0];
      const hourly = data.hourly?.temperature_2m;
      if (![max, min, code].every(Number.isFinite) || !Array.isArray(hourly) || !hourly.length) throw new Error("Incomplete data");

      const [label, icon] = conditions[code] || ["Unknown conditions", "cloud"];
      $("date").textContent = formatDate(requestedDate);
      $("condition").textContent = label;
      $("summary").textContent = `High ${degree(max)} · Low ${degree(min)}`;
      $("weatherIcon").innerHTML = icons[icon];
      $("high").innerHTML = `${Math.round(max)}<span class="degree">°</span>`;
      $("low").textContent = degree(min);
      $("range").textContent = `${degree(min)} to ${degree(max)}`;
      $("status").textContent = "Current data";
      chart(hourly);
      document.body.classList.remove("loading");
    } catch (error) {
      document.body.classList.remove("loading");
      $(".card-content").style.display = "none";
      $("error").style.display = "grid";
    }
  }
  load();
})();
</script>
</body>
</html>