gpt-5.6-terra @ medium · 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: #aebbd1;
    --line: rgba(220, 234, 255, .14);
    --cyan: #7be7ff;
    --blue: #6997ff;
    --card: rgba(18, 32, 60, .82);
  }

  * { 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% 15%, rgba(81, 154, 255, .34), transparent 29%),
      radial-gradient(circle at 84% 78%, rgba(69, 226, 244, .16), transparent 29%),
      linear-gradient(135deg, #071226 0%, #101d39 52%, #071124 100%);
  }

  .orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(1px);
    opacity: .7;
    pointer-events: none;
  }
  .orb.one { width: 330px; height: 330px; top: -135px; right: 112px; background: rgba(111, 137, 255, .18); }
  .orb.two { width: 220px; height: 220px; bottom: -90px; left: 105px; background: rgba(76, 225, 240, .12); }

  main {
    width: 920px;
    min-height: 590px;
    position: relative;
    padding: 42px 46px 36px;
    border: 1px solid rgba(231, 241, 255, .19);
    border-radius: 30px;
    overflow: hidden;
    background: linear-gradient(125deg, rgba(38, 61, 106, .85), var(--card) 52%, rgba(12, 26, 53, .92));
    box-shadow: 0 32px 90px rgba(0, 0, 0, .38), inset 0 1px rgba(255,255,255,.09);
    backdrop-filter: blur(18px);
  }

  main::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(116deg, rgba(255,255,255,.08), transparent 28%, transparent 72%, rgba(121, 228, 255, .05));
  }

  .content { position: relative; z-index: 1; }
  header { display: flex; align-items: flex-start; justify-content: space-between; }
  .eyebrow {
    margin: 0 0 8px;
    color: var(--cyan);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  h1 { margin: 0; font-size: 39px; line-height: 1.05; letter-spacing: -.045em; }
  .date {
    margin-top: 5px;
    color: var(--muted);
    text-align: right;
    font-size: 14px;
    font-weight: 550;
  }

  .summary {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    margin: 35px 0 30px;
  }
  .temperature {
    display: flex;
    align-items: center;
    letter-spacing: -.075em;
    font-size: 118px;
    font-weight: 250;
    line-height: .8;
  }
  .temperature small { align-self: flex-start; margin: 11px 0 0 9px; font-size: 31px; font-weight: 500; letter-spacing: -.03em; }
  .condition { margin: 16px 0 0 7px; color: #dce8fc; font-size: 17px; font-weight: 580; }
  .icon-wrap { display: grid; place-items: center; width: 170px; height: 130px; }
  .weather-icon { width: 117px; height: 117px; filter: drop-shadow(0 10px 14px rgba(0,0,0,.14)); }

  .range {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
  }
  .range div {
    min-width: 91px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(4, 13, 33, .20);
  }
  .range span { display: block; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
  .range strong { display: block; margin-top: 5px; font-size: 20px; font-weight: 620; }

  .hourly {
    border-top: 1px solid var(--line);
    padding-top: 21px;
  }
  .hourly-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
  .hourly h2 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
  .hourly p { margin: 0; color: var(--muted); font-size: 12px; }
  .chart { position: relative; height: 155px; }
  .chart svg { position: absolute; inset: 0 0 24px; width: 100%; height: calc(100% - 24px); overflow: visible; }
  .hours {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    height: 100%;
    align-items: end;
  }
  .hour {
    position: relative;
    height: 100%;
    min-width: 0;
    border-left: 1px solid rgba(233, 241, 255, .07);
  }
  .hour:first-child { border-left: 0; }
  .point {
    position: absolute;
    left: -4px;
    width: 8px;
    height: 8px;
    border: 2px solid #d5f7ff;
    border-radius: 50%;
    background: #3fccea;
    box-shadow: 0 0 0 4px rgba(100, 223, 255, .12);
  }
  .temp-label {
    position: absolute;
    left: 0;
    transform: translateX(-50%);
    color: #ecf8ff;
    font-size: 12px;
    font-weight: 680;
    white-space: nowrap;
  }
  .time {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateX(-50%);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
  }
  .hour:first-child .temp-label, .hour:first-child .time { transform: none; }
  .hour:last-child .temp-label, .hour:last-child .time { transform: translateX(-100%); }

  .status {
    min-height: 470px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--muted);
    font-size: 16px;
  }
  .status span { display: block; margin-top: 12px; color: #e4edff; font-size: 22px; font-weight: 600; }
</style>
</head>
<body>
<div class="orb one"></div><div class="orb two"></div>
<main>
  <div class="content" id="app">
    <div class="status">Loading weather<span>Please wait</span></div>
  </div>
</main>

<script>
(() => {
  const app = document.getElementById("app");
  const query = new URLSearchParams(location.search);
  const today = new Date().toISOString().slice(0, 10);
  const validDate = /^\d{4}-\d{2}-\d{2}$/;
  const date = validDate.test(query.get("date") || "") ? query.get("date") : today;
  const lat = Number(query.get("lat") ?? 52.52);
  const lon = Number(query.get("lon") ?? 13.405);
  const name = (query.get("name") || "Berlin").trim() || "Berlin";

  const conditions = {
    0: ["Clear sky", "sun"],
    1: ["Mainly clear", "sun-cloud"],
    2: ["Partly cloudy", "sun-cloud"],
    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: ["Freezing drizzle", "rain"],
    61: ["Light 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 showers", "rain"], 85: ["Snow showers", "snow"], 86: ["Heavy snow showers", "snow"],
    95: ["Thunderstorm", "storm"], 96: ["Thunderstorm with hail", "storm"], 99: ["Thunderstorm with hail", "storm"]
  };

  const icon = type => {
    const common = 'fill="none" stroke-linecap="round" stroke-linejoin="round"';
    if (type === "sun") return `<svg class="weather-icon" viewBox="0 0 120 120" ${common}><circle cx="60" cy="60" r="22" fill="#ffd66b" stroke="#ffe9a8" stroke-width="3"/><g stroke="#ffe29a" stroke-width="4"><path d="M60 12v12M60 96v12M12 60h12M96 60h12M26 26l9 9M85 85l9 9M94 26l-9 9M35 85l-9 9"/></g></svg>`;
    if (type === "storm") return `<svg class="weather-icon" viewBox="0 0 120 120" ${common}><path d="M31 76h57a20 20 0 0 0 1-40A30 30 0 0 0 33 47a15 15 0 0 0-2 29Z" fill="#9bb7df" stroke="#d9efff" stroke-width="3"/><path d="m60 71-10 20h11l-4 17 16-24H61l7-13Z" fill="#ffe066" stroke="#ffeab1" stroke-width="2"/></svg>`;
    if (type === "rain") return `<svg class="weather-icon" viewBox="0 0 120 120" ${common}><path d="M28 72h62a19 19 0 0 0 0-38 30 30 0 0 0-57 11A14 14 0 0 0 28 72Z" fill="#91b5e4" stroke="#d9efff" stroke-width="3"/><g stroke="#75e5ff" stroke-width="4"><path d="m41 82-4 12M61 82l-4 12M81 82l-4 12"/></g></svg>`;
    if (type === "snow") return `<svg class="weather-icon" viewBox="0 0 120 120" ${common}><path d="M28 70h62a19 19 0 0 0 0-38 30 30 0 0 0-57 11A14 14 0 0 0 28 70Z" fill="#a9c5e9" stroke="#ecf8ff" stroke-width="3"/><g stroke="#dff8ff" stroke-width="3"><path d="M41 81v13m-6-9 12 6m0-6-12 6M61 81v13m-6-9 12 6m0-6-12 6M81 81v13m-6-9 12 6m0-6-12 6"/></g></svg>`;
    if (type === "fog") return `<svg class="weather-icon" viewBox="0 0 120 120" ${common}><path d="M34 59h51a17 17 0 0 0 0-34 27 27 0 0 0-50 13A13 13 0 0 0 34 59Z" fill="#9bb4d4" stroke="#d9efff" stroke-width="3"/><g stroke="#c9e2f7" stroke-width="4"><path d="M24 71h72M32 84h56M24 97h72"/></g></svg>`;
    if (type === "cloud") return `<svg class="weather-icon" viewBox="0 0 120 120" ${common}><path d="M25 79h66a21 21 0 0 0 0-42 31 31 0 0 0-59 11A16 16 0 0 0 25 79Z" fill="#9cb9df" stroke="#e0f1ff" stroke-width="3"/></svg>`;
    return `<svg class="weather-icon" viewBox="0 0 120 120" ${common}><circle cx="45" cy="45" r="20" fill="#ffda75" stroke="#ffebaa" stroke-width="3"/><path d="M45 13v10M13 45h10M22 22l7 7M68 22l-7 7"/><path d="M37 84h55a18 18 0 0 0 0-36 28 28 0 0 0-51 12A14 14 0 0 0 37 84Z" fill="#a8c1e5" stroke="#e2f3ff" stroke-width="3"/></svg>`;
  };

  const params = new URLSearchParams({
    latitude: String(Number.isFinite(lat) ? lat : 52.52),
    longitude: String(Number.isFinite(lon) ? lon : 13.405),
    daily: "temperature_2m_max,temperature_2m_min,weather_code",
    hourly: "temperature_2m",
    timezone: "UTC",
    temperature_unit: "celsius",
    start_date: date,
    end_date: date
  });

  async function load() {
    try {
      const endpoint = date < today ? "/api/om/archive" : "/api/om/forecast";
      const response = await fetch(`${endpoint}?${params}`);
      if (!response.ok) throw new Error("Weather service unavailable");
      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 times = data?.hourly?.time || [];
      const temps = data?.hourly?.temperature_2m || [];
      if (![max, min, code].every(Number.isFinite) || !times.length) throw new Error("Incomplete weather data");
      render(max, min, code, times, temps);
    } catch (_) {
      app.innerHTML = `<div class="status">Weather data could not be loaded.<span>Please try again later.</span></div>`;
    }
  }

  function render(max, min, code, times, temps) {
    const condition = conditions[code] || ["Unknown conditions", "cloud"];
    const samples = [];
    for (let i = 0; i < times.length; i += 3) samples.push({ time: times[i], temp: temps[i] });
    if (samples.length > 8) samples.splice(8);
    const values = samples.map(x => Number(x.temp)).filter(Number.isFinite);
    const low = Math.min(...values), high = Math.max(...values), spread = Math.max(high - low, 3);
    const points = samples.map((item, i) => {
      const y = 75 - ((Number(item.temp) - low) / spread) * 52;
      const labelY = Math.max(2, y - 22);
      const hour = item.time.slice(11, 13) + ":00";
      return `<div class="hour"><span class="temp-label" style="top:${labelY}%">${Math.round(item.temp)}°</span><span class="point" style="top:${y}%"></span><span class="time">${hour}</span></div>`;
    }).join("");
    const polyline = samples.map((item, i) => {
      const x = samples.length === 1 ? 0 : (i / (samples.length - 1)) * 100;
      const y = 75 - ((Number(item.temp) - low) / spread) * 52;
      return `${x},${y}`;
    }).join(" ");

    app.innerHTML = `
      <div class="content">
        <header>
          <div><p class="eyebrow">Weather overview</p><h1>${escape(name)}</h1></div>
          <div class="date">${new Intl.DateTimeFormat("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric", timeZone: "UTC" }).format(new Date(date + "T12:00:00Z"))}</div>
        </header>
        <section class="summary">
          <div><div class="temperature">${Math.round(max)}<small>°C</small></div><p class="condition">${condition[0]}</p></div>
          <div>
            <div class="icon-wrap">${icon(condition[1])}</div>
            <div class="range"><div><span>High</span><strong>${Math.round(max)}°</strong></div><div><span>Low</span><strong>${Math.round(min)}°</strong></div></div>
          </div>
        </section>
        <section class="hourly">
          <div class="hourly-head"><h2>Hourly temperature</h2><p>UTC · Celsius</p></div>
          <div class="chart"><svg viewBox="0 0 100 100" preserveAspectRatio="none"><defs><linearGradient id="line" x1="0" x2="1"><stop stop-color="#81ecff"/><stop offset="1" stop-color="#8fa1ff"/></linearGradient></defs><polyline points="${polyline}" fill="none" stroke="url(#line)" stroke-width="1.3" vector-effect="non-scaling-stroke"/></svg><div class="hours">${points}</div></div>
        </section>
      </div>`;
  }

  function escape(value) {
    const div = document.createElement("div");
    div.textContent = value;
    return div.innerHTML;
  }

  load();
})();
</script>
</body>
</html>