gpt-5.5 @ medium · cursor

<!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 {
      --bg-1: #0b1020;
      --bg-2: #14284b;
      --card: rgba(255, 255, 255, 0.14);
      --card-strong: rgba(255, 255, 255, 0.22);
      --text: #f7fbff;
      --muted: rgba(247, 251, 255, 0.72);
      --line: rgba(255, 255, 255, 0.2);
      --accent: #ffd166;
      --accent-2: #78d8ff;
      --danger: #ff8b8b;
      --shadow: rgba(0, 0, 0, 0.35);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 20% 15%, rgba(120, 216, 255, 0.34), transparent 32%),
        radial-gradient(circle at 80% 20%, rgba(255, 209, 102, 0.24), transparent 30%),
        linear-gradient(135deg, var(--bg-1), var(--bg-2) 55%, #0f1936);
      overflow: hidden;
    }

    .page {
      width: 1280px;
      height: 800px;
      max-width: 100vw;
      max-height: 100vh;
      margin: 0 auto;
      padding: 54px 66px;
      position: relative;
      display: grid;
      place-items: center;
    }

    .orb {
      position: absolute;
      border-radius: 999px;
      filter: blur(2px);
      opacity: 0.75;
      pointer-events: none;
    }

    .orb.one {
      width: 240px;
      height: 240px;
      right: 92px;
      top: 52px;
      background: radial-gradient(circle, rgba(255, 209, 102, 0.5), rgba(255, 209, 102, 0));
    }

    .orb.two {
      width: 340px;
      height: 340px;
      left: 16px;
      bottom: -98px;
      background: radial-gradient(circle, rgba(120, 216, 255, 0.3), rgba(120, 216, 255, 0));
    }

    .card {
      width: 1080px;
      min-height: 650px;
      padding: 42px;
      border: 1px solid var(--line);
      border-radius: 42px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07)),
        rgba(255, 255, 255, 0.08);
      box-shadow: 0 32px 90px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(24px);
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 34px;
      position: relative;
      overflow: hidden;
    }

    .card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 75%);
      pointer-events: none;
    }

    .top,
    .main,
    .hourly {
      position: relative;
      z-index: 1;
    }

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

    .eyebrow {
      margin: 0 0 10px;
      color: var(--accent-2);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      font-size: 58px;
      line-height: 0.95;
      letter-spacing: -0.055em;
      max-width: 620px;
      text-wrap: balance;
    }

    .date-pill {
      padding: 14px 18px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.13);
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: 16px;
      font-weight: 650;
      white-space: nowrap;
    }

    .main {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      align-items: center;
      gap: 46px;
    }

    .temperature-panel {
      min-height: 290px;
      padding: 30px;
      border-radius: 34px;
      background: linear-gradient(155deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
      border: 1px solid var(--line);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .condition-row {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .weather-icon {
      width: 94px;
      height: 94px;
      display: grid;
      place-items: center;
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid var(--line);
      font-size: 54px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.16);
    }

    .condition {
      margin: 0;
      font-size: 30px;
      line-height: 1.05;
      font-weight: 780;
      letter-spacing: -0.03em;
    }

    .condition-sub {
      margin: 7px 0 0;
      color: var(--muted);
      font-size: 15px;
      font-weight: 600;
    }

    .temps {
      display: flex;
      align-items: flex-end;
      gap: 28px;
    }

    .temp-max {
      font-size: 118px;
      line-height: 0.82;
      letter-spacing: -0.075em;
      font-weight: 850;
    }

    .temp-min {
      margin-bottom: 8px;
      padding-left: 24px;
      border-left: 1px solid var(--line);
    }

    .label {
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .value {
      margin-top: 5px;
      font-size: 34px;
      font-weight: 780;
      letter-spacing: -0.04em;
    }

    .stats-panel {
      display: grid;
      gap: 18px;
    }

    .stat {
      padding: 22px 24px;
      border-radius: 28px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .stat strong {
      font-size: 27px;
      letter-spacing: -0.035em;
    }

    .stat span {
      color: var(--muted);
      font-weight: 650;
    }

    .hourly {
      padding: 24px;
      border-radius: 32px;
      border: 1px solid var(--line);
      background: rgba(8, 14, 30, 0.28);
    }

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

    .hourly h2 {
      margin: 0;
      font-size: 19px;
      letter-spacing: -0.02em;
    }

    .hourly-note {
      color: var(--muted);
      font-size: 13px;
      font-weight: 650;
    }

    .bars {
      height: 142px;
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      align-items: end;
      gap: 8px;
    }

    .bar-wrap {
      min-width: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: end;
      align-items: center;
      gap: 7px;
    }

    .bar-value {
      font-size: 11px;
      font-weight: 800;
      color: rgba(247, 251, 255, 0.86);
      white-space: nowrap;
    }

    .bar {
      width: 100%;
      min-height: 8px;
      border-radius: 999px 999px 7px 7px;
      background: linear-gradient(to top, var(--accent-2), var(--accent));
      box-shadow: 0 8px 18px rgba(120, 216, 255, 0.2);
    }

    .bar-time {
      font-size: 10px;
      color: rgba(247, 251, 255, 0.55);
      font-weight: 700;
    }

    .loading,
    .error {
      min-height: 650px;
      display: grid;
      place-items: center;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .message-box {
      max-width: 560px;
      padding: 34px;
      border: 1px solid var(--line);
      border-radius: 32px;
      background: rgba(255, 255, 255, 0.1);
    }

    .message-box h1 {
      max-width: none;
      font-size: 42px;
      margin-bottom: 12px;
    }

    .message-box p {
      margin: 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.55;
    }

    .error .message-box h1 {
      color: var(--danger);
    }

    @media (max-width: 900px) {
      body {
        overflow: auto;
      }

      .page {
        width: auto;
        height: auto;
        min-height: 100vh;
        padding: 24px;
      }

      .card {
        width: 100%;
        min-height: auto;
        padding: 26px;
      }

      .top,
      .main {
        grid-template-columns: 1fr;
        display: grid;
      }

      .date-pill {
        justify-self: start;
      }

      h1 {
        font-size: 42px;
      }

      .temp-max {
        font-size: 84px;
      }

      .bars {
        overflow-x: auto;
        grid-template-columns: repeat(24, 34px);
        padding-bottom: 8px;
      }
    }
  </style>
</head>
<body>
  <main class="page">
    <div class="orb one"></div>
    <div class="orb two"></div>
    <section class="card" id="app">
      <div class="loading">
        <div class="message-box">
          <h1>Loading weather</h1>
          <p>Fetching the requested day from the local weather API.</p>
        </div>
      </div>
    </section>
  </main>

  <script>
    (function () {
      var app = document.getElementById("app");

      function utcToday() {
        return new Date().toISOString().slice(0, 10);
      }

      function getParams() {
        var params = new URLSearchParams(window.location.search);
        var lat = Number(params.get("lat"));
        var lon = Number(params.get("lon"));
        var name = params.get("name") || "Berlin";
        var date = params.get("date") || utcToday();

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

        return { lat: lat, lon: lon, name: name, date: date };
      }

      function isPastDate(date) {
        return date < utcToday();
      }

      function formatDate(date) {
        var parsed = new Date(date + "T00:00:00Z");
        return new Intl.DateTimeFormat("en", {
          weekday: "long",
          month: "long",
          day: "numeric",
          year: "numeric",
          timeZone: "UTC"
        }).format(parsed);
      }

      function temp(value) {
        if (value === null || value === undefined || Number.isNaN(Number(value))) return "--";
        return Math.round(Number(value)) + "°";
      }

      function conditionForCode(code) {
        var map = {
          0: ["Clear sky", "☀"],
          1: ["Mainly clear", "🌤"],
          2: ["Partly cloudy", "⛅"],
          3: ["Overcast", "☁"],
          45: ["Fog", "🌫"],
          48: ["Rime fog", "🌫"],
          51: ["Light drizzle", "🌦"],
          53: ["Moderate drizzle", "🌦"],
          55: ["Dense drizzle", "🌧"],
          56: ["Freezing drizzle", "🌧"],
          57: ["Freezing drizzle", "🌧"],
          61: ["Slight rain", "🌧"],
          63: ["Rain", "🌧"],
          65: ["Heavy rain", "🌧"],
          66: ["Freezing rain", "🌧"],
          67: ["Freezing rain", "🌧"],
          71: ["Light snow", "🌨"],
          73: ["Snow", "🌨"],
          75: ["Heavy snow", "❄"],
          77: ["Snow grains", "❄"],
          80: ["Rain showers", "🌦"],
          81: ["Rain showers", "🌦"],
          82: ["Violent showers", "⛈"],
          85: ["Snow showers", "🌨"],
          86: ["Snow showers", "🌨"],
          95: ["Thunderstorm", "⛈"],
          96: ["Thunderstorm with hail", "⛈"],
          99: ["Thunderstorm with hail", "⛈"]
        };
        return map[Number(code)] || ["Unknown conditions", "◌"];
      }

      function buildUrl(params) {
        var endpoint = isPastDate(params.date) ? "/api/om/archive" : "/api/om/forecast";
        var search = new URLSearchParams({
          latitude: String(params.lat),
          longitude: String(params.lon),
          daily: "temperature_2m_max,temperature_2m_min,weather_code",
          hourly: "temperature_2m",
          timezone: "UTC",
          temperature_unit: "celsius",
          start_date: params.date,
          end_date: params.date
        });
        return endpoint + "?" + search.toString();
      }

      function normalizeHourly(data, date) {
        var times = data && data.hourly && Array.isArray(data.hourly.time) ? data.hourly.time : [];
        var temps = data && data.hourly && Array.isArray(data.hourly.temperature_2m) ? data.hourly.temperature_2m : [];

        return times.map(function (time, index) {
          return { time: time, value: temps[index] };
        }).filter(function (item) {
          return typeof item.time === "string" && item.time.slice(0, 10) === date && item.value !== null && item.value !== undefined;
        });
      }

      function render(params, data) {
        var daily = data.daily || {};
        var max = daily.temperature_2m_max && daily.temperature_2m_max[0];
        var min = daily.temperature_2m_min && daily.temperature_2m_min[0];
        var code = daily.weather_code && daily.weather_code[0];
        var condition = conditionForCode(code);
        var hourly = normalizeHourly(data, params.date);

        if (max === undefined || min === undefined || code === undefined || hourly.length === 0) {
          throw new Error("Incomplete weather data");
        }

        var values = hourly.map(function (item) { return Number(item.value); }).filter(Number.isFinite);
        var low = Math.min.apply(null, values);
        var high = Math.max.apply(null, values);
        var span = Math.max(1, high - low);

        app.innerHTML = [
          '<div class="top">',
            '<div>',
              '<p class="eyebrow">Weather outlook</p>',
              '<h1>' + escapeHtml(params.name) + '</h1>',
            '</div>',
            '<div class="date-pill">' + escapeHtml(formatDate(params.date)) + '</div>',
          '</div>',
          '<div class="main">',
            '<div class="temperature-panel">',
              '<div class="condition-row">',
                '<div class="weather-icon" aria-hidden="true">' + condition[1] + '</div>',
                '<div>',
                  '<p class="condition">' + escapeHtml(condition[0]) + '</p>',
                  '<p class="condition-sub">UTC forecast for the selected date</p>',
                '</div>',
              '</div>',
              '<div class="temps">',
                '<div class="temp-max">' + temp(max) + '</div>',
                '<div class="temp-min">',
                  '<div class="label">Day high</div>',
                  '<div class="value">' + temp(max) + 'C</div>',
                  '<div class="label" style="margin-top:14px">Night low</div>',
                  '<div class="value">' + temp(min) + 'C</div>',
                '</div>',
              '</div>',
            '</div>',
            '<div class="stats-panel">',
              '<div class="stat"><span>Latitude</span><strong>' + params.lat.toFixed(3) + '</strong></div>',
              '<div class="stat"><span>Longitude</span><strong>' + params.lon.toFixed(3) + '</strong></div>',
              '<div class="stat"><span>Hourly range</span><strong>' + temp(low) + 'C to ' + temp(high) + 'C</strong></div>',
            '</div>',
          '</div>',
          '<div class="hourly">',
            '<div class="hourly-head">',
              '<h2>Hourly temperatures</h2>',
              '<div class="hourly-note">Celsius, UTC</div>',
            '</div>',
            '<div class="bars">',
              hourly.map(function (item) {
                var value = Number(item.value);
                var height = 18 + ((value - low) / span) * 92;
                var hour = item.time.slice(11, 13);
                return [
                  '<div class="bar-wrap">',
                    '<div class="bar-value">' + temp(value) + '</div>',
                    '<div class="bar" style="height:' + height.toFixed(1) + 'px"></div>',
                    '<div class="bar-time">' + hour + '</div>',
                  '</div>'
                ].join("");
              }).join(""),
            '</div>',
          '</div>'
        ].join("");
      }

      function renderError() {
        app.innerHTML = [
          '<div class="error">',
            '<div class="message-box">',
              '<h1>Weather unavailable</h1>',
              '<p>The data could not be loaded for this location and date. Please check the query parameters or try again later.</p>',
            '</div>',
          '</div>'
        ].join("");
      }

      function escapeHtml(value) {
        return String(value).replace(/[&<>"']/g, function (char) {
          return {
            "&": "&amp;",
            "<": "&lt;",
            ">": "&gt;",
            '"': "&quot;",
            "'": "&#39;"
          }[char];
        });
      }

      var params = getParams();

      fetch(buildUrl(params))
        .then(function (response) {
          if (!response.ok) throw new Error("Request failed");
          return response.json();
        })
        .then(function (data) {
          render(params, data);
        })
        .catch(function () {
          renderError();
        });
    })();
  </script>
</body>
</html>