gpt-5.5 @ low · 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: #10243f;
    --bg-2: #1d5f8f;
    --card: rgba(255, 255, 255, 0.16);
    --card-strong: rgba(255, 255, 255, 0.24);
    --text: #f7fbff;
    --muted: rgba(247, 251, 255, 0.72);
    --line: rgba(255, 255, 255, 0.22);
    --shadow: rgba(3, 13, 29, 0.38);
  }

  * {
    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 18% 18%, rgba(255, 218, 132, 0.34), transparent 24%),
      radial-gradient(circle at 83% 14%, rgba(143, 220, 255, 0.34), transparent 28%),
      linear-gradient(135deg, var(--bg-1), var(--bg-2) 54%, #77b8c8);
    overflow: hidden;
  }

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

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

  .orb.sun {
    width: 172px;
    height: 172px;
    left: 112px;
    top: 82px;
    background: radial-gradient(circle, #fff4b7 0 29%, #ffd263 30% 58%, rgba(255, 188, 65, 0) 70%);
    box-shadow: 0 0 90px rgba(255, 215, 112, 0.6);
  }

  .orb.cloud-a {
    width: 360px;
    height: 116px;
    right: 66px;
    top: 96px;
    background: rgba(255, 255, 255, 0.13);
    filter: blur(18px);
  }

  .orb.cloud-b {
    width: 310px;
    height: 100px;
    left: 92px;
    bottom: 98px;
    background: rgba(255, 255, 255, 0.1);
    filter: blur(20px);
  }

  .card {
    position: relative;
    width: 890px;
    min-height: 570px;
    padding: 42px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 38px;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.1)),
      rgba(255, 255, 255, 0.08);
    box-shadow: 0 34px 90px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(28px);
    overflow: hidden;
  }

  .card::before {
    content: "";
    position: absolute;
    inset: -120px -100px auto auto;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 68%);
  }

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

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

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

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

  .condition-pill {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 230px;
    justify-content: center;
    padding: 16px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.17);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    font-weight: 750;
    font-size: 18px;
  }

  .icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    font-size: 30px;
  }

  .main {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 28px;
    margin-top: 48px;
  }

  .temp-panel {
    padding: 30px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid var(--line);
  }

  .current-label {
    color: var(--muted);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .temp-range {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-top: 14px;
  }

  .max {
    font-size: 104px;
    line-height: 0.9;
    font-weight: 820;
    letter-spacing: -0.08em;
  }

  .unit {
    font-size: 34px;
    line-height: 1.2;
    color: var(--muted);
    font-weight: 700;
    padding-bottom: 8px;
  }

  .min {
    margin-top: 22px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 12px 16px;
    border-radius: 18px;
    background: rgba(7, 24, 48, 0.18);
    color: rgba(255, 255, 255, 0.9);
    font-size: 20px;
    font-weight: 750;
  }

  .min span {
    color: var(--muted);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.11em;
  }

  .hourly-panel {
    padding: 26px 24px 24px;
    border-radius: 30px;
    background: rgba(6, 22, 43, 0.19);
    border: 1px solid var(--line);
  }

  .panel-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, 0.86);
    font-weight: 760;
    font-size: 18px;
  }

  .panel-title span {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .bars {
    height: 214px;
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 7px;
    align-items: end;
    padding: 2px 2px 0;
  }

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

  .bar {
    min-height: 8px;
    border-radius: 999px 999px 6px 6px;
    background: linear-gradient(180deg, #fff2a6, #ffb35d 48%, #76d7ff);
    box-shadow: 0 8px 18px rgba(2, 12, 26, 0.18);
  }

  .hour {
    color: rgba(255, 255, 255, 0.56);
    font-size: 10px;
    text-align: center;
    font-weight: 700;
  }

  .status {
    position: relative;
    margin-top: 28px;
    min-height: 24px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 600;
  }

  .error {
    display: none;
    position: relative;
    margin-top: 38px;
    padding: 24px 26px;
    border-radius: 24px;
    background: rgba(94, 18, 31, 0.28);
    border: 1px solid rgba(255, 178, 189, 0.36);
    color: #fff1f3;
    font-size: 20px;
    line-height: 1.45;
    font-weight: 650;
  }

  .loading .main,
  .loading .condition-pill {
    opacity: 0.42;
  }

  .failed .main,
  .failed .condition-pill {
    display: none;
  }

  .failed .error {
    display: block;
  }
</style>
</head>
<body>
  <main class="stage">
    <div class="orb sun"></div>
    <div class="orb cloud-a"></div>
    <div class="orb cloud-b"></div>

    <section class="card loading" id="card" aria-live="polite">
      <div class="top">
        <div>
          <p class="eyebrow">Weather forecast</p>
          <h1 id="location">Berlin</h1>
          <div class="date" id="dateLabel">Loading date...</div>
        </div>
        <div class="condition-pill">
          <div class="icon" id="conditionIcon">...</div>
          <div id="conditionText">Loading</div>
        </div>
      </div>

      <div class="main">
        <div class="temp-panel">
          <div class="current-label">Daily high</div>
          <div class="temp-range">
            <div class="max" id="maxTemp">--</div>
            <div class="unit">°C</div>
          </div>
          <div class="min"><span>Low</span><strong id="minTemp">-- °C</strong></div>
        </div>

        <div class="hourly-panel">
          <div class="panel-title">
            <div>Hourly temperature</div>
            <span>UTC</span>
          </div>
          <div class="bars" id="bars"></div>
        </div>
      </div>

      <div class="status" id="status">Loading weather data...</div>
      <div class="error">Weather data could not be loaded for this location and date. Please check the URL parameters or try again later.</div>
    </section>
  </main>

<script>
(function () {
  const params = new URLSearchParams(window.location.search);
  const todayUtc = new Date().toISOString().slice(0, 10);
  const lat = Number(params.get("lat") || "52.52");
  const lon = Number(params.get("lon") || "13.405");
  const name = params.get("name") || "Berlin";
  const date = /^\d{4}-\d{2}-\d{2}$/.test(params.get("date") || "") ? params.get("date") : todayUtc;

  const card = document.getElementById("card");
  const locationEl = document.getElementById("location");
  const dateLabel = document.getElementById("dateLabel");
  const conditionIcon = document.getElementById("conditionIcon");
  const conditionText = document.getElementById("conditionText");
  const maxTemp = document.getElementById("maxTemp");
  const minTemp = document.getElementById("minTemp");
  const bars = document.getElementById("bars");
  const status = document.getElementById("status");

  locationEl.textContent = name;
  dateLabel.textContent = formatDate(date);

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

  function weatherInfo(code) {
    const map = {
      0: ["Clear sky", "☀"],
      1: ["Mainly clear", "🌤"],
      2: ["Partly cloudy", "⛅"],
      3: ["Overcast", "☁"],
      45: ["Fog", "🌫"],
      48: ["Depositing rime fog", "🌫"],
      51: ["Light drizzle", "🌦"],
      53: ["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: ["Slight 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[code] || ["Unknown conditions", "◌"];
  }

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

  function fail() {
    card.classList.remove("loading");
    card.classList.add("failed");
    status.textContent = "";
  }

  async function load() {
    if (!Number.isFinite(lat) || !Number.isFinite(lon)) {
      fail();
      return;
    }

    const endpoint = date < todayUtc ? "/api/om/archive" : "/api/om/forecast";
    const 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
    });

    try {
      const response = await fetch(endpoint + "?" + query.toString(), { cache: "no-store" });
      if (!response.ok) throw new Error("Weather request failed");

      const data = await response.json();
      const daily = data.daily || {};
      const hourly = data.hourly || {};
      const high = daily.temperature_2m_max && daily.temperature_2m_max[0];
      const low = daily.temperature_2m_min && daily.temperature_2m_min[0];
      const code = daily.weather_code && daily.weather_code[0];
      const times = hourly.time || [];
      const temps = hourly.temperature_2m || [];

      const dayTemps = times
        .map((time, index) => ({ time, temp: temps[index] }))
        .filter(item => item.time && item.time.slice(0, 10) === date && Number.isFinite(item.temp));

      if (!Number.isFinite(high) || !Number.isFinite(low) || !Number.isFinite(code) || dayTemps.length === 0) {
        throw new Error("Incomplete weather data");
      }

      const info = weatherInfo(code);
      maxTemp.textContent = roundTemp(high);
      minTemp.textContent = roundTemp(low) + " °C";
      conditionText.textContent = info[0];
      conditionIcon.textContent = info[1];

      renderBars(dayTemps);
      status.textContent = "Showing same-origin Open-Meteo compatible data.";
      card.classList.remove("loading");
    } catch (error) {
      fail();
    }
  }

  function renderBars(items) {
    bars.innerHTML = "";
    const values = items.map(item => item.temp);
    const min = Math.min.apply(null, values);
    const max = Math.max.apply(null, values);
    const span = Math.max(1, max - min);

    items.slice(0, 24).forEach(item => {
      const hour = item.time.slice(11, 13);
      const height = 22 + ((item.temp - min) / span) * 78;
      const wrap = document.createElement("div");
      wrap.className = "bar-wrap";
      wrap.title = hour + ":00, " + Math.round(item.temp) + " °C";

      const bar = document.createElement("div");
      bar.className = "bar";
      bar.style.height = height + "%";

      const label = document.createElement("div");
      label.className = "hour";
      label.textContent = Number(hour) % 3 === 0 ? hour : "";

      wrap.appendChild(bar);
      wrap.appendChild(label);
      bars.appendChild(wrap);
    });
  }

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