gpt-5.5 @ extra-high · 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 {
    --bg-a: #102033;
    --bg-b: #1e5c86;
    --card: rgba(255, 255, 255, 0.16);
    --card-strong: rgba(255, 255, 255, 0.24);
    --text: #f8fbff;
    --muted: rgba(248, 251, 255, 0.72);
    --line: rgba(255, 255, 255, 0.24);
    --hot: #ffbf6b;
    --cold: #8bd8ff;
    --accent: #d9f2ff;
    --shadow: rgba(0, 0, 0, 0.28);
  }

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
      radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.24), transparent 28%),
      radial-gradient(circle at 82% 12%, rgba(255, 207, 133, 0.28), transparent 24%),
      linear-gradient(135deg, var(--bg-a), var(--bg-b));
    overflow: hidden;
  }

  body[data-condition="rain"] {
    --bg-a: #162333;
    --bg-b: #496579;
    --accent: #cdeaff;
  }

  body[data-condition="snow"] {
    --bg-a: #53687c;
    --bg-b: #9fb8cc;
    --accent: #ffffff;
  }

  body[data-condition="clear"] {
    --bg-a: #235b95;
    --bg-b: #f1a95e;
    --accent: #fff3ca;
  }

  body[data-condition="storm"] {
    --bg-a: #151724;
    --bg-b: #47416d;
    --accent: #ffe783;
  }

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

  .orb {
    position: absolute;
    width: 250px;
    height: 250px;
    top: 72px;
    right: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 32%, #fff9d5 0 13%, var(--accent) 14% 48%, rgba(255, 255, 255, 0.05) 49% 70%, transparent 71%);
    filter: blur(0.2px);
    opacity: 0.95;
  }

  .cloud {
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    filter: blur(1px);
  }

  .cloud.one {
    width: 390px;
    height: 98px;
    left: 76px;
    top: 128px;
  }

  .cloud.two {
    width: 270px;
    height: 74px;
    right: 88px;
    bottom: 96px;
    opacity: 0.6;
  }

  .cloud::before,
  .cloud::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
  }

  .cloud::before {
    width: 146px;
    height: 146px;
    left: 58px;
    bottom: 28px;
  }

  .cloud::after {
    width: 182px;
    height: 182px;
    right: 46px;
    bottom: 12px;
  }

  .card {
    position: relative;
    z-index: 1;
    width: 980px;
    min-height: 590px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 42px;
    padding: 42px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08)),
      var(--card);
    box-shadow: 0 32px 90px var(--shadow);
    backdrop-filter: blur(24px) saturate(130%);
  }

  .card::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 41px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.25), transparent 38%);
    pointer-events: none;
  }

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

  .eyebrow {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

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

  .date {
    margin-top: 18px;
    color: var(--muted);
    font-size: 20px;
    font-weight: 500;
  }

  .condition {
    min-width: 250px;
    text-align: right;
  }

  .weather-mark {
    width: 128px;
    height: 128px;
    margin: -6px 0 16px auto;
    border-radius: 38px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }

  .weather-mark svg {
    width: 86px;
    height: 86px;
    overflow: visible;
  }

  .condition-name {
    font-size: 27px;
    font-weight: 750;
    letter-spacing: -0.03em;
  }

  .coords {
    margin-top: 8px;
    color: var(--muted);
    font-size: 14px;
  }

  .metrics {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr;
    gap: 18px;
    margin-top: 52px;
  }

  .metric {
    min-height: 154px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.12);
  }

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

  .metric-value {
    margin-top: 20px;
    font-size: 64px;
    line-height: 0.9;
    font-weight: 760;
    letter-spacing: -0.07em;
  }

  .metric-value small {
    font-size: 28px;
    letter-spacing: -0.04em;
  }

  .range-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .range-track {
    position: relative;
    height: 12px;
    margin-top: 28px;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cold), rgba(255, 255, 255, 0.82), var(--hot));
  }

  .range-note {
    margin-top: 18px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.45;
  }

  .hourly {
    position: relative;
    margin-top: 24px;
    padding: 26px 24px 22px;
    border: 1px solid var(--line);
    border-radius: 32px;
    background: rgba(7, 16, 28, 0.18);
  }

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

  .hourly-title {
    margin: 0;
    font-size: 18px;
    font-weight: 760;
    letter-spacing: -0.02em;
  }

  .hourly-sub {
    color: var(--muted);
    font-size: 14px;
  }

  .bars {
    height: 154px;
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 7px;
    align-items: end;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  .bar-wrap {
    position: relative;
    height: 124px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .bar {
    width: 100%;
    min-height: 6px;
    border-radius: 999px 999px 8px 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(139, 216, 255, 0.72));
    box-shadow: 0 6px 20px rgba(11, 31, 50, 0.12);
  }

  .bar.hot {
    background: linear-gradient(180deg, #fff3c4, var(--hot));
  }

  .hour-label {
    position: absolute;
    bottom: -22px;
    color: rgba(248, 251, 255, 0.58);
    font-size: 10px;
    font-weight: 700;
  }

  .temp-tip {
    position: absolute;
    top: -17px;
    color: rgba(248, 251, 255, 0.86);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }

  .status {
    min-height: 590px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 56px;
  }

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

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

  .hidden {
    display: none;
  }

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

    .scene {
      width: 100%;
      height: auto;
      min-height: 100vh;
      padding: 22px;
    }

    .card {
      width: 100%;
      padding: 26px;
      border-radius: 30px;
    }

    .top,
    .metrics {
      grid-template-columns: 1fr;
      flex-direction: column;
    }

    .condition {
      text-align: left;
    }

    .weather-mark {
      margin-left: 0;
    }

    h1 {
      font-size: 42px;
    }
  }
</style>
</head>
<body>
<div class="scene">
  <div class="orb" aria-hidden="true"></div>
  <div class="cloud one" aria-hidden="true"></div>
  <div class="cloud two" aria-hidden="true"></div>

  <main class="card" aria-live="polite">
    <section id="loading" class="status">
      <div>
        <p class="eyebrow">Weather card</p>
        <h2>Loading weather data</h2>
        <p>Fetching the requested day in UTC.</p>
      </div>
    </section>

    <section id="error" class="status hidden">
      <div>
        <p class="eyebrow">Weather card</p>
        <h2>Weather data could not be loaded</h2>
        <p>Please check the location, date, and API availability.</p>
      </div>
    </section>

    <section id="content" class="hidden">
      <div class="top">
        <div>
          <p class="eyebrow">Selected forecast</p>
          <h1 id="location">Berlin</h1>
          <div id="date" class="date"></div>
        </div>

        <div class="condition">
          <div class="weather-mark" id="icon" aria-hidden="true"></div>
          <div id="condition" class="condition-name"></div>
          <div id="coords" class="coords"></div>
        </div>
      </div>

      <div class="metrics">
        <article class="metric">
          <div class="metric-label">Maximum</div>
          <div class="metric-value"><span id="maxTemp"></span><small>°C</small></div>
        </article>

        <article class="metric">
          <div class="metric-label">Minimum</div>
          <div class="metric-value"><span id="minTemp"></span><small>°C</small></div>
        </article>

        <article class="metric range-card">
          <div>
            <div class="metric-label">Daily range</div>
            <div class="range-track"></div>
            <div id="rangeNote" class="range-note"></div>
          </div>
        </article>
      </div>

      <section class="hourly">
        <div class="hourly-head">
          <h2 class="hourly-title">Hourly temperatures</h2>
          <div id="hourlySub" class="hourly-sub"></div>
        </div>
        <div id="bars" class="bars" aria-label="Hourly temperatures for the selected date"></div>
      </section>
    </section>
  </main>
</div>

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

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

  var icons = {
    clear: '<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="24" fill="#fff1a8"/><g stroke="#fff1a8" stroke-width="7" stroke-linecap="round"><path d="M50 8v12M50 80v12M8 50h12M80 50h12M20 20l9 9M71 71l9 9M80 20l-9 9M29 71l-9 9"/></g></svg>',
    cloud: '<svg viewBox="0 0 100 100"><path d="M25 70h47a18 18 0 0 0 2-36 27 27 0 0 0-51 10A13 13 0 0 0 25 70Z" fill="rgba(255,255,255,.9)"/><circle cx="32" cy="37" r="18" fill="#fff1a8" opacity=".65"/></svg>',
    rain: '<svg viewBox="0 0 100 100"><path d="M24 58h50a17 17 0 0 0 0-34 25 25 0 0 0-48 9 13 13 0 0 0-2 25Z" fill="rgba(255,255,255,.9)"/><g stroke="#9fe1ff" stroke-width="7" stroke-linecap="round"><path d="M30 74l-6 13M50 74l-6 13M70 74l-6 13"/></g></svg>',
    snow: '<svg viewBox="0 0 100 100"><path d="M24 55h50a17 17 0 0 0 0-34 25 25 0 0 0-48 9 13 13 0 0 0-2 25Z" fill="rgba(255,255,255,.92)"/><g fill="#ffffff"><circle cx="30" cy="76" r="4"/><circle cx="50" cy="84" r="4"/><circle cx="70" cy="76" r="4"/></g></svg>',
    storm: '<svg viewBox="0 0 100 100"><path d="M24 56h50a17 17 0 0 0 0-34 25 25 0 0 0-48 9 13 13 0 0 0-2 25Z" fill="rgba(255,255,255,.86)"/><path d="M52 52 38 78h14l-5 18 20-29H53l7-15Z" fill="#ffe783"/></svg>'
  };

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

  function validDate(value) {
    if (!/^\d{4}-\d{2}-\d{2}$/.test(value || "")) return false;
    var d = new Date(value + "T00:00:00Z");
    return !isNaN(d.getTime()) && d.toISOString().slice(0, 10) === value;
  }

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

  function formatCoord(value, positive, negative) {
    return Math.abs(value).toFixed(3) + "°" + (value >= 0 ? positive : negative);
  }

  function rounded(value) {
    if (value === null || value === undefined || isNaN(Number(value))) return "N/A";
    return Math.round(Number(value)).toString();
  }

  function showError() {
    document.getElementById("loading").classList.add("hidden");
    document.getElementById("content").classList.add("hidden");
    document.getElementById("error").classList.remove("hidden");
  }

  function showContent() {
    document.getElementById("loading").classList.add("hidden");
    document.getElementById("error").classList.add("hidden");
    document.getElementById("content").classList.remove("hidden");
  }

  function buildUrl(path, lat, lon, date) {
    var params = 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
    });
    return path + "?" + params.toString();
  }

  function dailyIndex(data, date) {
    if (!data.daily || !Array.isArray(data.daily.time)) return 0;
    var found = data.daily.time.indexOf(date);
    return found >= 0 ? found : 0;
  }

  function hourlyRows(data, date) {
    if (!data.hourly || !Array.isArray(data.hourly.time) || !Array.isArray(data.hourly.temperature_2m)) return [];
    return data.hourly.time.map(function (time, index) {
      return {
        time: time,
        temp: data.hourly.temperature_2m[index]
      };
    }).filter(function (row) {
      return typeof row.time === "string" && row.time.slice(0, 10) === date && row.temp !== null && row.temp !== undefined;
    });
  }

  function renderBars(rows) {
    var bars = document.getElementById("bars");
    bars.textContent = "";

    if (!rows.length) {
      bars.style.display = "block";
      bars.textContent = "No hourly temperature values were returned for this date.";
      return;
    }

    bars.style.display = "grid";
    var temps = rows.map(function (row) { return Number(row.temp); }).filter(function (n) { return !isNaN(n); });
    var min = Math.min.apply(null, temps);
    var max = Math.max.apply(null, temps);
    var spread = Math.max(1, max - min);

    rows.forEach(function (row) {
      var temp = Number(row.temp);
      var hour = row.time.slice(11, 13);
      var height = 18 + ((temp - min) / spread) * 98;
      var wrap = document.createElement("div");
      var bar = document.createElement("div");
      var label = document.createElement("div");
      var tip = document.createElement("div");

      wrap.className = "bar-wrap";
      bar.className = "bar" + (temp >= (min + spread * 0.62) ? " hot" : "");
      bar.style.height = height.toFixed(0) + "px";
      label.className = "hour-label";
      label.textContent = Number(hour) % 6 === 0 ? hour : "";
      tip.className = "temp-tip";
      tip.textContent = Math.round(temp) + "°";

      wrap.title = hour + ":00 UTC, " + temp.toFixed(1) + "°C";
      wrap.appendChild(tip);
      wrap.appendChild(bar);
      wrap.appendChild(label);
      bars.appendChild(wrap);
    });
  }

  async function load() {
    try {
      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").trim() || "Berlin";
      var today = utcToday();
      var date = params.get("date") || today;

      if (!isFinite(lat)) lat = 52.52;
      if (!isFinite(lon)) lon = 13.405;
      if (!validDate(date)) date = today;

      var path = date < today ? "/api/om/archive" : "/api/om/forecast";
      var response = await fetch(buildUrl(path, lat, lon, date), { cache: "no-store" });
      if (!response.ok) throw new Error("Weather request failed");

      var data = await response.json();
      var index = dailyIndex(data, date);
      var daily = data.daily || {};
      var maxTemp = daily.temperature_2m_max && daily.temperature_2m_max[index];
      var minTemp = daily.temperature_2m_min && daily.temperature_2m_min[index];
      var code = daily.weather_code && daily.weather_code[index];

      if (maxTemp === undefined || minTemp === undefined || code === undefined) {
        throw new Error("Weather data incomplete");
      }

      var mapped = weatherCodes[code] || ["Unknown conditions", "cloud"];
      var rows = hourlyRows(data, date);

      document.body.dataset.condition = mapped[1];
      document.getElementById("location").textContent = name;
      document.getElementById("date").textContent = formatDate(date);
      document.getElementById("condition").textContent = mapped[0];
      document.getElementById("coords").textContent = formatCoord(lat, "N", "S") + "  " + formatCoord(lon, "E", "W");
      document.getElementById("maxTemp").textContent = rounded(maxTemp);
      document.getElementById("minTemp").textContent = rounded(minTemp);
      document.getElementById("rangeNote").textContent = "A " + Math.abs(Number(maxTemp) - Number(minTemp)).toFixed(1) + "°C spread across the UTC day.";
      document.getElementById("hourlySub").textContent = rows.length ? "UTC, " + rows.length + " readings" : "No readings";
      document.getElementById("icon").innerHTML = icons[mapped[1]] || icons.cloud;

      renderBars(rows);
      showContent();
    } catch (error) {
      showError();
    }
  }

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