gpt-5.6-luna @ medium · cursor

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, height=800, initial-scale=1">
<title>Weather Card</title>
<style>
  :root {
    --ink: #102a43;
    --muted: #6b8298;
    --line: rgba(16, 42, 67, .11);
    --sky: #eaf6ff;
    --blue: #2d7ff9;
    --blue-dark: #1554bd;
    --sun: #ffb52e;
    --card: rgba(255,255,255,.83);
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    width: 100%;
    min-width: 1280px;
    height: 100%;
    min-height: 800px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: #cceaff;
  }

  body {
    overflow: hidden;
    background:
      radial-gradient(circle at 77% 9%, rgba(255,255,255,.8) 0 9%, transparent 28%),
      linear-gradient(135deg, #d9f3ff 0%, #a9dbff 46%, #e6f5ff 100%);
  }

  .scene {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 48px 64px;
  }

  .cloud {
    position: absolute;
    border-radius: 999px;
    background: rgba(255,255,255,.38);
    filter: blur(1px);
  }
  .cloud:before, .cloud:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
  }
  .cloud.one { width: 220px; height: 42px; top: 72px; left: 90px; }
  .cloud.one:before { width: 74px; height: 74px; left: 42px; bottom: 14px; }
  .cloud.one:after { width: 104px; height: 104px; left: 98px; bottom: 8px; }
  .cloud.two { width: 280px; height: 50px; right: 70px; bottom: 74px; opacity: .45; }
  .cloud.two:before { width: 90px; height: 90px; left: 66px; bottom: 16px; }
  .cloud.two:after { width: 118px; height: 118px; left: 135px; bottom: 6px; }

  .card {
    position: relative;
    z-index: 1;
    width: 1152px;
    height: 704px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 408px 1fr;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 32px;
    background: var(--card);
    box-shadow: 0 26px 70px rgba(33, 95, 139, .2), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(18px);
  }

  .hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 42px 40px 38px;
    color: white;
    background:
      radial-gradient(circle at 32% 18%, rgba(255,255,255,.38), transparent 23%),
      linear-gradient(155deg, #238cf1 0%, #1766d7 57%, #154bab 100%);
  }

  .hero:after {
    content: "";
    position: absolute;
    width: 270px;
    height: 270px;
    right: -112px;
    bottom: -120px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 0 0 24px rgba(255,255,255,.05), 0 0 0 48px rgba(255,255,255,.04);
  }

  .eyebrow, .detail-label, .hours-label {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 10px;
    font-weight: 750;
  }

  .eyebrow { opacity: .72; }

  .place {
    margin-top: 13px;
    font-size: 30px;
    line-height: 1.05;
    font-weight: 760;
    letter-spacing: -.04em;
    overflow-wrap: anywhere;
  }

  .date {
    margin-top: 10px;
    color: rgba(255,255,255,.72);
    font-size: 14px;
  }

  .weather-symbol {
    width: 142px;
    height: 142px;
    margin: 42px auto 15px;
    display: grid;
    place-items: center;
    font-size: 94px;
    line-height: 1;
    filter: drop-shadow(0 10px 12px rgba(4,36,101,.18));
  }

  .condition {
    text-align: center;
    font-size: 22px;
    font-weight: 680;
    letter-spacing: -.02em;
  }

  .temp {
    margin-top: 8px;
    text-align: center;
    font-size: 76px;
    line-height: .98;
    letter-spacing: -.08em;
    font-weight: 780;
  }

  .temp span {
    margin-left: 5px;
    vertical-align: top;
    font-size: 30px;
    letter-spacing: -.04em;
    font-weight: 500;
  }

  .range {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-top: 17px;
    font-size: 14px;
    color: rgba(255,255,255,.78);
  }

  .range strong { color: white; font-weight: 700; }
  .hero-foot {
    display: flex;
    justify-content: space-between;
    align-items: end;
    color: rgba(255,255,255,.62);
    font-size: 11px;
  }

  .content {
    padding: 42px 44px 38px;
    background: rgba(255,255,255,.48);
  }

  .content-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--line);
  }

  h1 {
    margin: 0;
    font-size: 26px;
    letter-spacing: -.045em;
  }

  .subtitle {
    margin-top: 7px;
    color: var(--muted);
    font-size: 13px;
  }

  .status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
  }

  .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #37bd76;
    box-shadow: 0 0 0 4px rgba(55,189,118,.13);
  }

  .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30px 0 18px;
  }

  .section-title h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 760;
    letter-spacing: .02em;
  }

  .section-title span {
    color: var(--muted);
    font-size: 11px;
  }

  .hourly {
    height: 265px;
    padding: 22px 14px 12px;
    border: 1px solid rgba(255,255,255,.88);
    border-radius: 20px;
    background: rgba(255,255,255,.57);
    box-shadow: 0 8px 22px rgba(51,112,153,.06);
  }

  .hours {
    height: 100%;
    display: flex;
    align-items: stretch;
    gap: 7px;
  }

  .hour {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--muted);
    font-size: 10px;
  }

  .hour-time { height: 18px; font-weight: 650; }
  .hour-temp {
    color: var(--ink);
    font-size: 11px;
    font-weight: 750;
  }

  .bar-area {
    position: relative;
    flex: 1;
    width: 100%;
    margin: 7px 0 8px;
    display: flex;
    align-items: end;
    justify-content: center;
  }

  .bar-area:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    border-left: 1px dashed rgba(16,42,67,.1);
  }

  .bar {
    position: relative;
    z-index: 1;
    width: 11px;
    min-height: 8px;
    border-radius: 10px;
    background: linear-gradient(180deg, #59b7ff, #2777ec);
    box-shadow: 0 3px 8px rgba(45,127,249,.22);
  }

  .hour:nth-child(4n) .bar, .hour:nth-child(5n) .bar {
    background: linear-gradient(180deg, #ffca5b, #ff9b32);
    box-shadow: 0 3px 8px rgba(255,166,45,.2);
  }

  .summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 24px;
  }

  .metric {
    min-height: 92px;
    padding: 17px 18px;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 17px;
    background: rgba(255,255,255,.57);
  }

  .detail-label { color: var(--muted); }
  .metric-value {
    margin-top: 11px;
    font-size: 20px;
    font-weight: 760;
    letter-spacing: -.04em;
  }

  .metric-value small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 550;
  }

  .error {
    display: none;
    margin-top: 28px;
    padding: 18px;
    border-radius: 14px;
    color: #a33d36;
    background: #fff0ee;
    font-size: 13px;
  }

  @media (max-width: 900px) {
    html, body { min-width: 0; overflow: auto; }
    .scene { height: auto; padding: 18px; }
    .card { width: 100%; height: auto; min-height: 704px; grid-template-columns: 1fr; }
    .hero { min-height: 550px; }
    .content { min-height: 600px; }
    .hourly { overflow: hidden; }
  }
</style>
</head>
<body>
<div class="scene">
  <div class="cloud one"></div>
  <div class="cloud two"></div>

  <main class="card">
    <section class="hero">
      <div>
        <div class="eyebrow">Current conditions</div>
        <div class="place" id="place">Berlin</div>
        <div class="date" id="hero-date">Loading date…</div>
      </div>

      <div>
        <div class="weather-symbol" id="symbol">☀️</div>
        <div class="condition" id="condition">Loading weather…</div>
        <div class="temp"><span id="main-temp">—</span><span>°C</span></div>
        <div class="range">
          <span>High <strong id="high">—</strong>°</span>
          <span>Low <strong id="low">—</strong>°</span>
        </div>
      </div>

      <div class="hero-foot">
        <span>UTC · Celsius</span>
        <span id="coordinates">52.52° N · 13.405° E</span>
      </div>
    </section>

    <section class="content">
      <div class="content-head">
        <div>
          <h1>Day at a glance</h1>
          <div class="subtitle" id="content-date">Hourly temperature outlook</div>
        </div>
        <div class="status"><span class="status-dot"></span><span id="status">Live forecast</span></div>
      </div>

      <div class="section-title">
        <h2>HOURLY TEMPERATURE</h2>
        <span>°C · UTC</span>
      </div>

      <div class="hourly">
        <div class="hours" id="hours"></div>
      </div>

      <div class="summary">
        <div class="metric">
          <div class="detail-label">Maximum</div>
          <div class="metric-value"><span id="max-detail">—</span><small> °C</small></div>
        </div>
        <div class="metric">
          <div class="detail-label">Minimum</div>
          <div class="metric-value"><span id="min-detail">—</span><small> °C</small></div>
        </div>
        <div class="metric">
          <div class="detail-label">Readings</div>
          <div class="metric-value"><span id="reading-detail">—</span><small> hours</small></div>
        </div>
      </div>

      <div class="error" id="error">Weather data could not be loaded. Please try again later.</div>
    </section>
  </main>
</div>

<script>
(() => {
  const params = new URLSearchParams(location.search);
  const lat = Number(params.get("lat") ?? 52.52);
  const lon = Number(params.get("lon") ?? 13.405);
  const name = params.get("name") || "Berlin";

  const utcToday = new Date().toISOString().slice(0, 10);
  const date = /^\d{4}-\d{2}-\d{2}$/.test(params.get("date") || "")
    ? params.get("date")
    : utcToday;

  const weatherMap = {
    0: ["Clear sky", "☀️"],
    1: ["Mainly clear", "🌤️"],
    2: ["Partly cloudy", "⛅"],
    3: ["Overcast", "☁️"],
    45: ["Foggy", "🌫️"],
    48: ["Rime fog", "🌫️"],
    51: ["Light drizzle", "🌦️"],
    53: ["Drizzle", "🌦️"],
    55: ["Dense drizzle", "🌧️"],
    56: ["Freezing drizzle", "🌧️"],
    57: ["Freezing drizzle", "🌧️"],
    61: ["Light rain", "🌧️"],
    63: ["Rain", "🌧️"],
    65: ["Heavy rain", "🌧️"],
    66: ["Freezing rain", "🌧️"],
    67: ["Heavy freezing rain", "🌧️"],
    71: ["Light snow", "🌨️"],
    73: ["Snow", "🌨️"],
    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 $ = id => document.getElementById(id);
  const fmtDate = value => new Intl.DateTimeFormat("en", {
    weekday: "long", month: "long", day: "numeric", year: "numeric",
    timeZone: "UTC"
  }).format(new Date(value + "T12:00:00Z"));

  $("place").textContent = name;
  $("hero-date").textContent = fmtDate(date);
  $("content-date").textContent = fmtDate(date);
  $("coordinates").textContent =
    `${Math.abs(lat).toFixed(2)}° ${lat >= 0 ? "N" : "S"} · ${Math.abs(lon).toFixed(3)}° ${lon >= 0 ? "E" : "W"}`;

  const endpoint = date < utcToday ? "/api/om/archive" : "/api/om/forecast";
  const query = new URLSearchParams({
    latitude: String(lat),
    longitude: String(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 showError = () => {
    $("error").style.display = "block";
    $("status").textContent = "Unavailable";
    document.querySelector(".status-dot").style.background = "#e06b63";
  };

  fetch(`${endpoint}?${query}`)
    .then(response => {
      if (!response.ok) throw new Error("Request failed");
      return response.json();
    })
    .then(data => {
      const daily = data.daily || {};
      const hourly = data.hourly || {};
      const max = daily.temperature_2m_max?.[0];
      const min = daily.temperature_2m_min?.[0];
      const code = daily.weather_code?.[0];
      const [condition, symbol] = weatherMap[code] || ["Variable conditions", "🌤️"];
      const temperatures = hourly.temperature_2m || [];
      const times = hourly.time || [];

      if (max == null || min == null || !temperatures.length) throw new Error("Incomplete data");

      $("condition").textContent = condition;
      $("symbol").textContent = symbol;
      $("high").textContent = Math.round(max);
      $("low").textContent = Math.round(min);
      $("max-detail").textContent = Math.round(max);
      $("min-detail").textContent = Math.round(min);
      $("reading-detail").textContent = temperatures.length;

      const currentHour = new Date().getUTCHours();
      let representative = temperatures[0];
      if (date === utcToday && temperatures[currentHour] != null) representative = temperatures[currentHour];
      $("main-temp").textContent = Math.round(representative);

      const usable = temperatures.map((temp, i) => ({ temp, time: times[i] }))
        .filter(item => Number.isFinite(item.temp));
      const range = Math.max(max - min, 1);
      $("hours").innerHTML = usable.map(({ temp, time }) => {
        const hour = time ? time.slice(11, 13) : "";
        const label = hour === "00" ? "12 AM" :
          hour === "12" ? "12 PM" :
          `${Number(hour) % 12 || 12} ${Number(hour) < 12 ? "AM" : "PM"}`;
        const height = Math.max(10, Math.round(((temp - min) / range) * 82 + 12));
        return `<div class="hour">
          <div class="hour-time">${label}</div>
          <div class="hour-temp">${Math.round(temp)}°</div>
          <div class="bar-area"><div class="bar" style="height:${height}%"></div></div>
        </div>`;
      }).join("");
    })
    .catch(showError);
})();
</script>
</body>
</html>