gpt-5.6-luna @ none · cursor-xl

<!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 {
    color-scheme: dark;
    --bg: #0b1220;
    --panel: rgba(18, 29, 50, .78);
    --panel-soft: rgba(255,255,255,.07);
    --text: #f4f7fb;
    --muted: #9eabc0;
    --accent: #8ed8ff;
    --accent-2: #d8f5ff;
    --line: rgba(255,255,255,.11);
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    min-width: 1000px;
    min-height: 800px;
    overflow: hidden;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background:
      radial-gradient(circle at 16% 12%, rgba(76, 143, 205, .28), transparent 34%),
      radial-gradient(circle at 86% 84%, rgba(100, 71, 184, .2), transparent 36%),
      linear-gradient(135deg, #0b1324 0%, #111b31 48%, #17132d 100%);
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, black, transparent 90%);
  }
  .shell {
    width: 1110px;
    height: 680px;
    margin: 60px auto;
    position: relative;
  }
  .card {
    height: 100%;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(26, 42, 70, .86), rgba(14, 22, 40, .86));
    box-shadow: 0 28px 80px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
  }
  header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .eyebrow {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 11px;
    font-weight: 700;
  }
  h1 {
    margin: 8px 0 4px;
    font-size: 36px;
    letter-spacing: -.045em;
    line-height: 1;
  }
  .date {
    color: var(--muted);
    font-size: 14px;
  }
  .coordinates {
    color: var(--muted);
    font-size: 12px;
    text-align: right;
    padding-top: 5px;
  }
  .overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 40px;
  }
  .hero {
    min-height: 228px;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 24px 28px;
    border-radius: 23px;
    background: linear-gradient(135deg, rgba(142,216,255,.15), rgba(255,255,255,.035));
    border: 1px solid rgba(142,216,255,.16);
  }
  .weather-icon {
    width: 118px;
    height: 118px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,210,112,.3), rgba(255,210,112,.04) 62%, transparent 63%);
    font-size: 72px;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
  }
  .temp {
    font-size: 82px;
    line-height: .92;
    font-weight: 750;
    letter-spacing: -.08em;
  }
  .temp span { font-size: 34px; vertical-align: top; letter-spacing: -.03em; margin-left: 4px; }
  .condition { margin-top: 12px; font-size: 18px; color: var(--accent-2); font-weight: 600; }
  .range { margin-top: 9px; color: var(--muted); font-size: 14px; }
  .metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .metric {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel-soft);
  }
  .metric-label { color: var(--muted); font-size: 12px; }
  .metric-value { margin-top: 12px; font-size: 28px; font-weight: 700; letter-spacing: -.04em; }
  .metric-value small { font-size: 15px; color: var(--muted); font-weight: 500; }
  .hourly {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }
  .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 17px;
  }
  .section-title h2 { margin: 0; font-size: 16px; letter-spacing: -.02em; }
  .section-title span { color: var(--muted); font-size: 12px; }
  .hours {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
  }
  .hour {
    min-width: 0;
    text-align: center;
    padding: 13px 4px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    border: 1px solid transparent;
  }
  .hour:first-child, .hour:nth-child(7) {
    background: rgba(142,216,255,.1);
    border-color: rgba(142,216,255,.16);
  }
  .hour-time { color: var(--muted); font-size: 11px; }
  .hour-bar {
    height: 48px;
    margin: 9px auto 8px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .bar {
    width: 6px;
    border-radius: 8px;
    background: linear-gradient(to top, #72bdf1, #d6f4ff);
    box-shadow: 0 0 14px rgba(114,189,241,.28);
  }
  .hour-temp { font-size: 13px; font-weight: 650; }
  .loading, .error {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 30px;
    background: rgba(11,18,32,.82);
    color: var(--muted);
    font-size: 16px;
  }
  .error { color: #ffb6b6; text-align: center; padding: 30px; }
  .hidden { display: none; }
</style>
</head>
<body>
<main class="shell">
  <section class="card" id="card">
    <header>
      <div>
        <div class="eyebrow">Daily forecast</div>
        <h1 id="location">Berlin</h1>
        <div class="date" id="date"></div>
      </div>
      <div class="coordinates" id="coordinates"></div>
    </header>
    <div class="overview">
      <div class="hero">
        <div class="weather-icon" id="icon">☀️</div>
        <div>
          <div class="temp" id="current">—<span>°C</span></div>
          <div class="condition" id="condition">Loading weather…</div>
          <div class="range" id="range"></div>
        </div>
      </div>
      <div class="metrics">
        <div class="metric"><div class="metric-label">Maximum</div><div class="metric-value" id="max">—<small> °C</small></div></div>
        <div class="metric"><div class="metric-label">Minimum</div><div class="metric-value" id="min">—<small> °C</small></div></div>
        <div class="metric"><div class="metric-label">Data source</div><div class="metric-value">UTC</div></div>
        <div class="metric"><div class="metric-label">Hourly readings</div><div class="metric-value" id="count">—</div></div>
      </div>
    </div>
    <div class="hourly">
      <div class="section-title"><h2>Hourly temperature</h2><span>24-hour view · °C</span></div>
      <div class="hours" id="hours"></div>
    </div>
    <div class="loading" id="loading">Loading forecast…</div>
    <div class="error hidden" id="error">Weather data could not be loaded.<br><small>Please check the date, location, or try again.</small></div>
  </section>
</main>
<script>
(function () {
  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 today = new Date().toISOString().slice(0, 10);
  const dateValue = params.get("date") || today;
  const requested = new Date(dateValue + "T00:00:00Z");
  const now = new Date();
  const path = requested < new Date(now.toISOString().slice(0, 10) + "T00:00:00Z") ? "/api/om/archive" : "/api/om/forecast";
  const locationEl = document.getElementById("location");
  const dateEl = document.getElementById("date");
  const coordEl = document.getElementById("coordinates");
  locationEl.textContent = name;
  coordEl.textContent = lat.toFixed(2) + "° N · " + lon.toFixed(2) + "° E";
  dateEl.textContent = isNaN(requested) ? dateValue : requested.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric", timeZone: "UTC" });

  const labels = {
    0: ["Clear sky", "☀️"], 1: ["Mainly clear", "🌤️"], 2: ["Partly cloudy", "⛅"], 3: ["Overcast", "☁️"],
    45: ["Fog", "🌫️"], 48: ["Rime fog", "🌫️"], 51: ["Light drizzle", "🌦️"], 53: ["Drizzle", "🌦️"], 55: ["Heavy drizzle", "🌧️"],
    61: ["Light rain", "🌦️"], 63: ["Rain", "🌧️"], 65: ["Heavy rain", "🌧️"], 71: ["Light snow", "🌨️"], 73: ["Snow", "🌨️"], 75: ["Heavy snow", "❄️"],
    80: ["Rain showers", "🌦️"], 81: ["Rain showers", "🌧️"], 82: ["Heavy showers", "⛈️"], 95: ["Thunderstorm", "⛈️"], 96: ["Hail storm", "⛈️"], 99: ["Hail storm", "⛈️"]
  };
  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: dateValue, end_date: dateValue
  });

  fetch(path + "?" + query)
    .then(r => { if (!r.ok) throw new Error("Request failed"); return r.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 temperatures = hourly.temperature_2m || [];
      if (max == null || min == null || !temperatures.length) throw new Error("Incomplete data");
      const info = labels[code] || ["Mixed conditions", "🌡️"];
      document.getElementById("icon").textContent = info[1];
      document.getElementById("condition").textContent = info[0];
      document.getElementById("max").innerHTML = Math.round(max) + "<small> °C</small>";
      document.getElementById("min").innerHTML = Math.round(min) + "<small> °C</small>";
      document.getElementById("range").textContent = "High " + Math.round(max) + "° · Low " + Math.round(min) + "°";
      document.getElementById("count").textContent = temperatures.length;
      const current = temperatures[Math.min(new Date().getUTCHours(), temperatures.length - 1)];
      document.getElementById("current").innerHTML = Math.round(current) + "<span>°C</span>";
      const lo = Math.min(...temperatures), hi = Math.max(...temperatures), spread = hi - lo || 1;
      document.getElementById("hours").innerHTML = temperatures.map((t, i) => {
        const time = hourly.time?.[i]?.slice(11, 16) || String(i).padStart(2, "0") + ":00";
        const height = 12 + ((t - lo) / spread) * 36;
        return '<div class="hour"><div class="hour-time">' + time + '</div><div class="hour-bar"><div class="bar" style="height:' + height + 'px"></div></div><div class="hour-temp">' + Math.round(t) + '°</div></div>';
      }).join("");
      document.getElementById("loading").classList.add("hidden");
    })
    .catch(() => {
      document.getElementById("loading").classList.add("hidden");
      document.getElementById("error").classList.remove("hidden");
    });
})();
</script>
</body>
</html>