gpt-5.5 @ none · 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 {
    --ink: #f7fbff;
    --muted: rgba(247, 251, 255, 0.72);
    --soft: rgba(255, 255, 255, 0.14);
    --softer: rgba(255, 255, 255, 0.08);
    --line: rgba(255, 255, 255, 0.2);
    --shadow: rgba(8, 18, 40, 0.36);
    --hot: #ffd166;
    --cold: #9be7ff;
  }

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    min-width: 1280px;
    min-height: 800px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    overflow: hidden;
    background:
      radial-gradient(circle at 18% 12%, rgba(255, 215, 147, 0.5), transparent 24%),
      radial-gradient(circle at 82% 18%, rgba(111, 202, 255, 0.36), transparent 28%),
      linear-gradient(135deg, #10295d 0%, #224a86 42%, #7d80bc 100%);
  }

  body::before,
  body::after {
    content: "";
    position: fixed;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(2px);
  }

  body::before {
    width: 620px;
    height: 620px;
    left: -170px;
    bottom: -260px;
    background: rgba(255, 255, 255, 0.11);
  }

  body::after {
    width: 430px;
    height: 430px;
    right: -120px;
    top: 120px;
    background: rgba(255, 255, 255, 0.09);
  }

  .stage {
    width: 1280px;
    height: 800px;
    padding: 70px 86px;
    display: grid;
    place-items: center;
  }

  .card {
    position: relative;
    width: 1108px;
    height: 660px;
    padding: 44px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 44px;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08)),
      rgba(15, 36, 78, 0.3);
    box-shadow: 0 38px 110px var(--shadow);
    overflow: hidden;
    backdrop-filter: blur(28px);
  }

  .card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(120deg, rgba(255, 255, 255, 0.24), transparent 36%),
      radial-gradient(circle at 72% 28%, rgba(255, 255, 255, 0.16), transparent 34%);
    pointer-events: none;
  }

  .content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 34px;
  }

  .top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
  }

  .eyebrow {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 15px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  h1 {
    margin: 0;
    max-width: 610px;
    font-size: 60px;
    line-height: 0.96;
    letter-spacing: -0.055em;
    text-wrap: balance;
  }

  .date-pill {
    padding: 15px 20px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    white-space: nowrap;
  }

  .main {
    display: grid;
    grid-template-columns: 430px 1fr;
    gap: 42px;
    align-items: stretch;
  }

  .hero {
    position: relative;
    padding: 34px;
    border-radius: 34px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
    border: 1px solid var(--line);
    overflow: hidden;
  }

  .hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -90px;
    bottom: -110px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
  }

  .icon {
    width: 132px;
    height: 132px;
    margin-bottom: 28px;
    display: grid;
    place-items: center;
    font-size: 86px;
    text-shadow: 0 16px 38px rgba(0, 0, 0, 0.2);
  }

  .condition {
    margin: 0 0 34px;
    font-size: 34px;
    line-height: 1.04;
    letter-spacing: -0.035em;
  }

  .temps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .temp-box {
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
  }

  .temp-label {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .temp-value {
    margin: 0;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.045em;
    font-weight: 760;
  }

  .temp-value.max {
    color: var(--hot);
  }

  .temp-value.min {
    color: var(--cold);
  }

  .panel {
    padding: 30px 30px 26px;
    border-radius: 34px;
    background: rgba(10, 25, 56, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.18);
    min-width: 0;
  }

  .panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 26px;
  }

  .panel-title {
    margin: 0;
    font-size: 22px;
    letter-spacing: -0.025em;
  }

  .panel-note {
    color: var(--muted);
    font-size: 14px;
  }

  .hourly {
    height: 282px;
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    align-items: end;
    gap: 7px;
    padding-top: 12px;
  }

  .hour {
    min-width: 0;
    display: grid;
    grid-template-rows: 1fr auto auto;
    justify-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.78);
  }

  .bar-wrap {
    height: 190px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .bar {
    width: 100%;
    max-width: 18px;
    min-height: 10px;
    border-radius: 999px 999px 8px 8px;
    background: linear-gradient(180deg, #fff0b8 0%, #7bd7ff 100%);
    box-shadow: 0 8px 22px rgba(66, 190, 255, 0.28);
  }

  .hour-temp {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }

  .hour-time {
    color: rgba(255, 255, 255, 0.52);
    font-size: 11px;
  }

  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255, 255, 255, 0.58);
    font-size: 14px;
  }

  .status {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    padding: 80px;
    text-align: center;
    background: rgba(14, 33, 71, 0.46);
    backdrop-filter: blur(20px);
  }

  .status[hidden] {
    display: none;
  }

  .status-box {
    max-width: 520px;
  }

  .spinner {
    width: 54px;
    height: 54px;
    margin: 0 auto 22px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 255, 255, 0.86);
    animation: spin 0.9s linear infinite;
  }

  .status h2 {
    margin: 0 0 10px;
    font-size: 34px;
    letter-spacing: -0.04em;
  }

  .status p {
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.5;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>
</head>
<body>
  <main class="stage">
    <section class="card" aria-live="polite">
      <div class="content">
        <header class="top">
          <div>
            <p class="eyebrow">Daily Forecast</p>
            <h1 id="location">Berlin</h1>
          </div>
          <div class="date-pill" id="date">Today</div>
        </header>

        <div class="main">
          <section class="hero">
            <div class="icon" id="icon" aria-hidden="true">☀️</div>
            <p class="condition" id="condition">Loading weather</p>
            <div class="temps">
              <div class="temp-box">
                <p class="temp-label">High</p>
                <p class="temp-value max" id="maxTemp">--°</p>
              </div>
              <div class="temp-box">
                <p class="temp-label">Low</p>
                <p class="temp-value min" id="minTemp">--°</p>
              </div>
            </div>
          </section>

          <section class="panel">
            <div class="panel-head">
              <h2 class="panel-title">Hourly Temperature</h2>
              <span class="panel-note">UTC, Celsius</span>
            </div>
            <div class="hourly" id="hourly"></div>
          </section>
        </div>

        <footer class="footer">
          <span>Open-Meteo compatible same-origin data</span>
          <span id="coords">52.520, 13.405</span>
        </footer>
      </div>

      <div class="status" id="status">
        <div class="status-box">
          <div class="spinner" id="spinner"></div>
          <h2 id="statusTitle">Loading weather</h2>
          <p id="statusText">Fetching the selected day's forecast.</p>
        </div>
      </div>
    </section>
  </main>

<script>
(function () {
  "use strict";

  var params = new URLSearchParams(window.location.search);
  var todayUtc = new Date().toISOString().slice(0, 10);
  var lat = parseFloat(params.get("lat"));
  var lon = parseFloat(params.get("lon"));
  var name = (params.get("name") || "Berlin").trim() || "Berlin";
  var date = params.get("date") || todayUtc;

  if (!Number.isFinite(lat)) lat = 52.52;
  if (!Number.isFinite(lon)) lon = 13.405;
  if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) date = todayUtc;

  var weatherCodes = {
    0: ["Clear sky", "☀️"],
    1: ["Mainly clear", "🌤️"],
    2: ["Partly cloudy", "⛅"],
    3: ["Overcast", "☁️"],
    45: ["Fog", "🌫️"],
    48: ["Depositing rime fog", "🌫️"],
    51: ["Light drizzle", "🌦️"],
    53: ["Moderate drizzle", "🌦️"],
    55: ["Dense drizzle", "🌧️"],
    56: ["Light freezing drizzle", "🌧️"],
    57: ["Dense freezing drizzle", "🌧️"],
    61: ["Slight rain", "🌧️"],
    63: ["Moderate rain", "🌧️"],
    65: ["Heavy rain", "🌧️"],
    66: ["Light freezing rain", "🌧️"],
    67: ["Heavy freezing rain", "🌧️"],
    71: ["Slight snow", "🌨️"],
    73: ["Moderate snow", "🌨️"],
    75: ["Heavy snow", "❄️"],
    77: ["Snow grains", "❄️"],
    80: ["Slight rain showers", "🌦️"],
    81: ["Moderate rain showers", "🌧️"],
    82: ["Violent rain showers", "⛈️"],
    85: ["Slight snow showers", "🌨️"],
    86: ["Heavy snow showers", "❄️"],
    95: ["Thunderstorm", "⛈️"],
    96: ["Thunderstorm with slight hail", "⛈️"],
    99: ["Thunderstorm with heavy hail", "⛈️"]
  };

  var el = {
    location: document.getElementById("location"),
    date: document.getElementById("date"),
    condition: document.getElementById("condition"),
    icon: document.getElementById("icon"),
    maxTemp: document.getElementById("maxTemp"),
    minTemp: document.getElementById("minTemp"),
    hourly: document.getElementById("hourly"),
    coords: document.getElementById("coords"),
    status: document.getElementById("status"),
    spinner: document.getElementById("spinner"),
    statusTitle: document.getElementById("statusTitle"),
    statusText: document.getElementById("statusText")
  };

  el.location.textContent = name;
  el.date.textContent = formatDate(date);
  el.coords.textContent = lat.toFixed(3) + ", " + lon.toFixed(3);

  loadWeather();

  async function loadWeather() {
    try {
      var endpoint = date < todayUtc ? "/api/om/archive" : "/api/om/forecast";
      var 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
      });

      var response = await fetch(endpoint + "?" + query.toString(), { cache: "no-store" });
      if (!response.ok) throw new Error("Weather service returned " + response.status);

      var data = await response.json();
      var daily = data && data.daily;
      var hourly = data && data.hourly;
      var max = daily && daily.temperature_2m_max && daily.temperature_2m_max[0];
      var min = daily && daily.temperature_2m_min && daily.temperature_2m_min[0];
      var code = daily && daily.weather_code && daily.weather_code[0];
      var times = hourly && hourly.time;
      var temps = hourly && hourly.temperature_2m;

      if (!Number.isFinite(max) || !Number.isFinite(min) || !Array.isArray(times) || !Array.isArray(temps)) {
        throw new Error("Weather response was incomplete");
      }

      var hourlyForDate = times.map(function (time, index) {
        return { time: time, temp: temps[index] };
      }).filter(function (item) {
        return typeof item.time === "string" && item.time.slice(0, 10) === date && Number.isFinite(item.temp);
      });

      if (!hourlyForDate.length) throw new Error("No hourly temperatures were available for this date");

      renderWeather(max, min, code, hourlyForDate);
      hideStatus();
    } catch (error) {
      showError();
    }
  }

  function renderWeather(max, min, code, hourlyItems) {
    var condition = weatherCodes[code] || ["Unknown conditions", "🌡️"];
    el.condition.textContent = condition[0];
    el.icon.textContent = condition[1];
    el.maxTemp.textContent = roundTemp(max);
    el.minTemp.textContent = roundTemp(min);

    var values = hourlyItems.map(function (item) { return item.temp; });
    var low = Math.min.apply(null, values);
    var high = Math.max.apply(null, values);
    var spread = Math.max(1, high - low);

    el.hourly.innerHTML = "";
    hourlyItems.forEach(function (item) {
      var hour = item.time.slice(11, 13);
      var height = 22 + ((item.temp - low) / spread) * 168;

      var node = document.createElement("div");
      node.className = "hour";
      node.title = hour + ":00 UTC, " + roundTemp(item.temp);

      var wrap = document.createElement("div");
      wrap.className = "bar-wrap";

      var bar = document.createElement("div");
      bar.className = "bar";
      bar.style.height = height.toFixed(1) + "px";

      var temp = document.createElement("div");
      temp.className = "hour-temp";
      temp.textContent = roundTemp(item.temp);

      var time = document.createElement("div");
      time.className = "hour-time";
      time.textContent = Number(hour) % 3 === 0 ? hour : "";

      wrap.appendChild(bar);
      node.appendChild(wrap);
      node.appendChild(temp);
      node.appendChild(time);
      el.hourly.appendChild(node);
    });
  }

  function showError() {
    el.spinner.hidden = true;
    el.status.hidden = false;
    el.statusTitle.textContent = "Weather data could not be loaded";
    el.statusText.textContent = "Please check the location, date, or API availability and try again.";
  }

  function hideStatus() {
    el.status.hidden = true;
  }

  function roundTemp(value) {
    return Math.round(value) + "°C";
  }

  function formatDate(value) {
    var parts = value.split("-").map(Number);
    var utcDate = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2]));
    return new Intl.DateTimeFormat("en", {
      weekday: "long",
      month: "long",
      day: "numeric",
      year: "numeric",
      timeZone: "UTC"
    }).format(utcDate);
  }
})();
</script>
</body>
</html>