gpt-5.4-mini @ 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 {
      color-scheme: dark;
      --bg1: #07111f;
      --bg2: #0b1d33;
      --card: rgba(12, 20, 36, 0.72);
      --card-border: rgba(255, 255, 255, 0.12);
      --text: #f3f7ff;
      --muted: rgba(243, 247, 255, 0.72);
      --soft: rgba(243, 247, 255, 0.14);
      --accent: #8ad6ff;
      --accent2: #7c9cff;
      --good: #9ef0c1;
      --warn: #ffd38a;
      --shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
    }

    * { box-sizing: border-box; }

    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 20% 20%, rgba(138, 214, 255, 0.16), transparent 28%),
        radial-gradient(circle at 80% 10%, rgba(124, 156, 255, 0.14), transparent 22%),
        radial-gradient(circle at 70% 90%, rgba(158, 240, 193, 0.08), transparent 26%),
        linear-gradient(160deg, var(--bg1), var(--bg2) 55%, #060d18);
      color: var(--text);
      overflow: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: radial-gradient(circle at center, black 54%, transparent 100%);
      pointer-events: none;
      opacity: 0.35;
    }

    .frame {
      width: 100vw;
      height: 100vh;
      display: grid;
      place-items: center;
      padding: 36px;
    }

    .card {
      width: min(1020px, calc(100vw - 72px));
      min-height: 560px;
      border-radius: 32px;
      background: linear-gradient(180deg, rgba(18, 28, 48, 0.86), rgba(10, 17, 30, 0.78));
      border: 1px solid var(--card-border);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.05);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      overflow: hidden;
      position: relative;
    }

    .card::after {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(135deg, rgba(138,214,255,0.28), transparent 24%, transparent 76%, rgba(124,156,255,0.18));
      mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
      -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
      padding: 1px;
      opacity: 0.65;
    }

    .inner {
      position: relative;
      z-index: 1;
      padding: 34px;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 24px;
      height: 100%;
    }

    .hero {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 20px;
      min-width: 0;
    }

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

    .location {
      font-size: 52px;
      line-height: 0.98;
      letter-spacing: -0.04em;
      margin: 0;
      font-weight: 750;
      text-wrap: balance;
    }

    .date {
      margin-top: 10px;
      font-size: 18px;
      color: var(--muted);
      letter-spacing: 0.01em;
    }

    .status {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      color: var(--muted);
      white-space: nowrap;
      font-size: 14px;
      letter-spacing: 0.02em;
    }

    .status .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: linear-gradient(180deg, var(--good), #45d39b);
      box-shadow: 0 0 20px rgba(158, 240, 193, 0.7);
      flex: none;
    }

    .main-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      align-items: stretch;
    }

    .metric {
      padding: 22px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
      border: 1px solid rgba(255,255,255,0.09);
      min-width: 0;
    }

    .metric-label {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--muted);
      margin-bottom: 12px;
    }

    .metric-value {
      display: flex;
      align-items: baseline;
      gap: 10px;
      line-height: 1;
      font-weight: 760;
      letter-spacing: -0.05em;
    }

    .metric-value .number {
      font-size: 72px;
    }

    .metric-value .unit {
      font-size: 20px;
      color: var(--muted);
      font-weight: 650;
    }

    .condition {
      padding: 22px;
      border-radius: 24px;
      background:
        radial-gradient(circle at top right, rgba(138,214,255,0.16), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
      border: 1px solid rgba(255,255,255,0.09);
    }

    .condition-label {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--muted);
      margin-bottom: 12px;
    }

    .condition-text {
      font-size: 28px;
      line-height: 1.12;
      font-weight: 700;
      letter-spacing: -0.03em;
      margin: 0;
    }

    .aside {
      display: flex;
      flex-direction: column;
      gap: 18px;
      min-width: 0;
    }

    .panel {
      padding: 22px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
      border: 1px solid rgba(255,255,255,0.09);
    }

    .panel-title {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--muted);
      margin-bottom: 14px;
    }

    .hours {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .hour {
      padding: 14px 12px;
      border-radius: 18px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      min-width: 0;
    }

    .hour-time {
      font-size: 12px;
      color: var(--muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .hour-temp {
      font-size: 28px;
      font-weight: 760;
      letter-spacing: -0.04em;
    }

    .hour-temp span {
      font-size: 14px;
      color: var(--muted);
      font-weight: 650;
    }

    .footer-note {
      margin-top: auto;
      font-size: 14px;
      line-height: 1.5;
      color: var(--muted);
    }

    .error {
      display: none;
      padding: 28px;
      border-radius: 24px;
      background: rgba(255, 99, 99, 0.08);
      border: 1px solid rgba(255, 99, 99, 0.18);
      color: #ffd8d8;
      font-size: 18px;
      line-height: 1.5;
    }

    .loading {
      display: grid;
      place-items: center;
      min-height: 100%;
      color: var(--muted);
      font-size: 18px;
      letter-spacing: 0.02em;
    }

    @media (max-width: 1100px) {
      .inner { grid-template-columns: 1fr; }
      .card { width: min(1020px, calc(100vw - 32px)); }
    }
  </style>
</head>
<body>
  <div class="frame">
    <main class="card">
      <div class="inner" id="app">
        <div class="loading" id="loading">Loading weather…</div>
      </div>
    </main>
  </div>

  <script>
    (function () {
      const params = new URLSearchParams(window.location.search);
      const lat = Number(params.get("lat") ?? 52.52);
      const lon = Number(params.get("lon") ?? 13.405);
      const name = params.get("name") || "Berlin";
      const requestedDate = params.get("date") || new Date().toISOString().slice(0, 10);

      const app = document.getElementById("app");
      const loading = document.getElementById("loading");

      const 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 fall",
        73: "Moderate snow fall",
        75: "Heavy snow fall",
        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"
      };

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

      function formatHour(iso) {
        const d = new Date(iso);
        return new Intl.DateTimeFormat(undefined, {
          hour: "numeric",
          minute: "2-digit",
          hour12: false,
          timeZone: "UTC"
        }).format(d).replace(/^24:/, "00:");
      }

      function buildUrl(base) {
        const url = new URL(base, window.location.origin);
        url.searchParams.set("latitude", String(lat));
        url.searchParams.set("longitude", String(lon));
        url.searchParams.set("daily", "temperature_2m_max,temperature_2m_min,weather_code");
        url.searchParams.set("hourly", "temperature_2m");
        url.searchParams.set("timezone", "UTC");
        url.searchParams.set("temperature_unit", "celsius");
        url.searchParams.set("start_date", requestedDate);
        url.searchParams.set("end_date", requestedDate);
        return url.toString();
      }

      async function load() {
        const isPast = requestedDate < new Date().toISOString().slice(0, 10);
        const endpoints = isPast ? ["/api/om/archive", "/api/om/forecast"] : ["/api/om/forecast", "/api/om/archive"];

        let data = null;
        for (const endpoint of endpoints) {
          try {
            const res = await fetch(buildUrl(endpoint), { credentials: "same-origin" });
            if (!res.ok) continue;
            const json = await res.json();
            if (json && json.daily && json.hourly) {
              data = json;
              break;
            }
          } catch (_) {}
        }

        if (!data) {
          throw new Error("Unable to load weather data.");
        }

        const daily = data.daily;
        const hourly = data.hourly;
        const dayIndex = daily.time.indexOf(requestedDate);
        if (dayIndex === -1) {
          throw new Error("Requested date not found in weather data.");
        }

        const max = daily.temperature_2m_max[dayIndex];
        const min = daily.temperature_2m_min[dayIndex];
        const code = daily.weather_code?.[dayIndex];
        const condition = weatherCodes[code] || "Unknown conditions";

        const dayTemps = [];
        for (let i = 0; i < hourly.time.length; i++) {
          if (hourly.time[i].slice(0, 10) === requestedDate) {
            dayTemps.push({ time: hourly.time[i], temp: hourly.temperature_2m[i] });
          }
        }

        if (!dayTemps.length) {
          throw new Error("No hourly temperatures were returned for the requested date.");
        }

        app.innerHTML = `
          <section class="hero">
            <div class="topline">
              <div>
                <h1 class="location">${escapeHtml(name)}</h1>
                <div class="date">${escapeHtml(formatDate(requestedDate))}</div>
              </div>
              <div class="status"><span class="dot"></span>UTC weather snapshot</div>
            </div>

            <div class="main-metrics">
              <div class="metric">
                <div class="metric-label">Maximum</div>
                <div class="metric-value"><span class="number">${formatValue(max)}</span><span class="unit">°C</span></div>
              </div>
              <div class="metric">
                <div class="metric-label">Minimum</div>
                <div class="metric-value"><span class="number">${formatValue(min)}</span><span class="unit">°C</span></div>
              </div>
            </div>

            <div class="condition">
              <div class="condition-label">Condition</div>
              <p class="condition-text">${escapeHtml(condition)}</p>
            </div>
          </section>

          <aside class="aside">
            <div class="panel">
              <div class="panel-title">Hourly temperatures</div>
              <div class="hours">
                ${dayTemps.slice(0, 12).map(entry => `
                  <div class="hour">
                    <div class="hour-time">${escapeHtml(formatHour(entry.time))}</div>
                    <div class="hour-temp">${formatValue(entry.temp)}<span>°C</span></div>
                  </div>
                `).join("")}
              </div>
            </div>
            <div class="panel">
              <div class="panel-title">Overview</div>
              <div class="footer-note">
                Location: ${escapeHtml(name)}<br>
                Coordinates: ${formatCoord(lat)}, ${formatCoord(lon)}<br>
                Date: ${escapeHtml(requestedDate)}<br>
                Temperatures shown in Celsius.
              </div>
            </div>
          </aside>
        `;
      }

      function formatValue(n) {
        const num = Number(n);
        return Number.isFinite(num) ? num.toFixed(1).replace(/\.0$/, "") : "—";
      }

      function formatCoord(n) {
        return Number.isFinite(n) ? n.toFixed(3).replace(/\.?0+$/, "") : "—";
      }

      function escapeHtml(value) {
        return String(value)
          .replaceAll("&", "&amp;")
          .replaceAll("<", "&lt;")
          .replaceAll(">", "&gt;")
          .replaceAll('"', "&quot;")
          .replaceAll("'", "&#39;");
      }

      load().catch(() => {
        app.innerHTML = '<div class="error">The weather data could not be loaded.</div>';
      });
    })();
  </script>
</body>
</html>