gpt-5.5 @ low · 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 {
    color-scheme: dark;
    --bg1: #0f172a;
    --bg2: #1e1b4b;
    --card: rgba(255, 255, 255, 0.14);
    --card-strong: rgba(255, 255, 255, 0.22);
    --text: #f8fafc;
    --muted: rgba(248, 250, 252, 0.72);
    --soft: rgba(248, 250, 252, 0.12);
    --line: rgba(255, 255, 255, 0.18);
    --warm: #fbbf24;
    --cool: #38bdf8;
  }

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    min-height: 100vh;
    width: 100vw;
    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 18% 20%, rgba(56, 189, 248, 0.30), transparent 30%),
      radial-gradient(circle at 78% 18%, rgba(251, 191, 36, 0.25), transparent 28%),
      radial-gradient(circle at 68% 80%, rgba(168, 85, 247, 0.30), transparent 34%),
      linear-gradient(135deg, var(--bg1), var(--bg2) 58%, #111827);
  }

  .stage {
    width: 1280px;
    height: 800px;
    position: relative;
    display: grid;
    place-items: center;
    padding: 64px;
  }

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

  .orb.sun {
    width: 180px;
    height: 180px;
    right: 120px;
    top: 86px;
    background: radial-gradient(circle at 32% 32%, #fff7ad, #facc15 46%, #f97316);
    box-shadow: 0 0 90px rgba(251, 191, 36, 0.50);
  }

  .orb.moon {
    width: 94px;
    height: 94px;
    left: 146px;
    bottom: 130px;
    background: radial-gradient(circle at 35% 30%, #ffffff, #cbd5e1 58%, #94a3b8);
    opacity: 0.24;
  }

  .cloud {
    position: absolute;
    width: 260px;
    height: 92px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(14px);
  }

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

  .cloud:before {
    width: 112px;
    height: 112px;
    left: 38px;
    top: -48px;
  }

  .cloud:after {
    width: 140px;
    height: 140px;
    right: 34px;
    top: -72px;
  }

  .cloud.one {
    top: 170px;
    left: 86px;
    transform: scale(0.86);
  }

  .cloud.two {
    right: 86px;
    bottom: 118px;
    transform: scale(0.72);
    opacity: 0.55;
  }

  .card {
    position: relative;
    z-index: 2;
    width: 930px;
    min-height: 600px;
    border: 1px solid var(--line);
    border-radius: 42px;
    padding: 40px;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.08)),
      rgba(15, 23, 42, 0.30);
    box-shadow:
      0 30px 90px rgba(0, 0, 0, 0.36),
      inset 0 1px 0 rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(26px) saturate(135%);
  }

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

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

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

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

  .condition-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.11);
    color: var(--text);
    font-weight: 750;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }

  .icon {
    font-size: 30px;
    line-height: 1;
  }

  .temp-row {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 22px;
    margin-top: 42px;
  }

  .temp-panel {
    border: 1px solid var(--line);
    border-radius: 32px;
    padding: 28px;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }

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

  .temp-value {
    margin-top: 10px;
    font-size: 86px;
    line-height: 0.95;
    font-weight: 850;
    letter-spacing: -0.07em;
  }

  .temp-value small {
    font-size: 36px;
    letter-spacing: -0.02em;
    color: var(--muted);
  }

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

  .mini {
    min-height: 100%;
    border-radius: 26px;
    padding: 24px;
  }

  .mini.max {
    background: linear-gradient(150deg, rgba(251, 191, 36, 0.24), rgba(255, 255, 255, 0.08));
  }

  .mini.min {
    background: linear-gradient(150deg, rgba(56, 189, 248, 0.25), rgba(255, 255, 255, 0.08));
  }

  .mini .temp-value {
    font-size: 56px;
  }

  .hourly {
    margin-top: 24px;
    border: 1px solid var(--line);
    border-radius: 32px;
    padding: 24px 24px 22px;
    background: rgba(2, 6, 23, 0.18);
  }

  .section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .section-title h2 {
    margin: 0;
    font-size: 20px;
    letter-spacing: -0.02em;
  }

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

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

  .hour {
    min-width: 0;
    text-align: center;
  }

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

  .bar {
    width: 100%;
    min-height: 8px;
    border-radius: 999px 999px 8px 8px;
    background: linear-gradient(180deg, #fde68a, #fb923c 54%, #38bdf8);
    box-shadow: 0 8px 22px rgba(251, 146, 60, 0.22);
  }

  .hour-temp {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 800;
    color: rgba(248, 250, 252, 0.88);
  }

  .hour-time {
    margin-top: 5px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(248, 250, 252, 0.46);
  }

  .loading,
  .error {
    min-height: 520px;
    display: grid;
    place-items: center;
    text-align: center;
  }

  .message {
    max-width: 560px;
  }

  .message .icon {
    font-size: 70px;
    margin-bottom: 20px;
  }

  .message h1 {
    max-width: none;
    font-size: 48px;
  }

  .message p {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 20px;
    line-height: 1.5;
  }
</style>
</head>
<body>
  <main class="stage">
    <div class="orb sun"></div>
    <div class="orb moon"></div>
    <div class="cloud one"></div>
    <div class="cloud two"></div>
    <section id="app" class="card" aria-live="polite">
      <div class="loading">
        <div class="message">
          <div class="icon">☁️</div>
          <h1>Loading weather</h1>
          <p>Fetching the forecast for your selected location and date.</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") || "52.52");
  var lon = parseFloat(params.get("lon") || "13.405");
  var name = params.get("name") || "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 app = document.getElementById("app");

  var weather = {
    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 hail", "⛈️"],
    99: ["Thunderstorm with heavy hail", "⛈️"]
  };

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

  function roundTemp(value) {
    return Number.isFinite(value) ? Math.round(value) : null;
  }

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

  function setError() {
    app.innerHTML =
      '<div class="error">' +
        '<div class="message">' +
          '<div class="icon">⚠️</div>' +
          '<h1>Weather data could not be loaded</h1>' +
          '<p>Please check the location, date, or try again in a moment.</p>' +
        '</div>' +
      '</div>';
  }

  function buildUrl() {
    var requested = new Date(date + "T00:00:00Z");
    var today = new Date(todayUtc + "T00:00:00Z");
    var path = requested < today ? "/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
    });
    return path + "?" + query.toString();
  }

  function render(data) {
    if (!data || !data.daily || !data.hourly) throw new Error("Malformed weather response");

    var max = roundTemp(data.daily.temperature_2m_max && data.daily.temperature_2m_max[0]);
    var min = roundTemp(data.daily.temperature_2m_min && data.daily.temperature_2m_min[0]);
    var code = data.daily.weather_code && data.daily.weather_code[0];
    var condition = weather[code] || ["Unknown conditions", "🌡️"];

    var times = data.hourly.time || [];
    var temps = data.hourly.temperature_2m || [];
    var hourly = times.map(function (time, index) {
      return { time: time, temp: temps[index] };
    }).filter(function (item) {
      return item.time && item.time.slice(0, 10) === date && Number.isFinite(item.temp);
    });

    if (max === null || min === null || !hourly.length) throw new Error("Incomplete weather response");

    var range = Math.max(1, Math.max.apply(null, hourly.map(function (h) { return h.temp; })) - Math.min.apply(null, hourly.map(function (h) { return h.temp; })));
    var low = Math.min.apply(null, hourly.map(function (h) { return h.temp; }));

    var bars = hourly.map(function (item) {
      var height = 22 + ((item.temp - low) / range) * 90;
      var hour = item.time.slice(11, 13);
      return (
        '<div class="hour">' +
          '<div class="bar-wrap"><div class="bar" style="height:' + height.toFixed(1) + 'px"></div></div>' +
          '<div class="hour-temp">' + Math.round(item.temp) + '°</div>' +
          '<div class="hour-time">' + hour + '</div>' +
        '</div>'
      );
    }).join("");

    app.innerHTML =
      '<div class="top">' +
        '<div>' +
          '<p class="eyebrow">Weather outlook</p>' +
          '<h1>' + escapeHtml(name) + '</h1>' +
          '<div class="date">' + escapeHtml(formatDate(date)) + '</div>' +
        '</div>' +
        '<div class="condition-pill"><span class="icon">' + condition[1] + '</span><span>' + escapeHtml(condition[0]) + '</span></div>' +
      '</div>' +
      '<div class="temp-row">' +
        '<div class="temp-panel">' +
          '<div class="temp-label">Daily range</div>' +
          '<div class="temp-value">' + max + '<small>°C</small></div>' +
          '<div style="margin-top:16px;color:var(--muted);font-size:18px;font-weight:650">High for the day, with a low of ' + min + '°C.</div>' +
        '</div>' +
        '<div class="split">' +
          '<div class="temp-panel mini max">' +
            '<div class="temp-label">Maximum</div>' +
            '<div class="temp-value">' + max + '<small>°</small></div>' +
          '</div>' +
          '<div class="temp-panel mini min">' +
            '<div class="temp-label">Minimum</div>' +
            '<div class="temp-value">' + min + '<small>°</small></div>' +
          '</div>' +
        '</div>' +
      '</div>' +
      '<div class="hourly">' +
        '<div class="section-title">' +
          '<h2>Hourly temperatures</h2>' +
          '<span>UTC · Celsius</span>' +
        '</div>' +
        '<div class="bars">' + bars + '</div>' +
      '</div>';
  }

  fetch(buildUrl())
    .then(function (response) {
      if (!response.ok) throw new Error("Weather request failed");
      return response.json();
    })
    .then(render)
    .catch(setError);
})();
</script>
</body>
</html>