gpt-5.6-luna @ high · cursor

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Weather</title>
  <style>
    :root {
      color-scheme: dark;
      --bg: #07111f;
      --panel: rgba(17, 32, 54, 0.78);
      --panel-soft: rgba(255, 255, 255, 0.07);
      --line: rgba(255, 255, 255, 0.12);
      --text: #f4f8ff;
      --muted: #9cacbf;
      --accent: #79c9ff;
      --warm: #ffc878;
      --cold: #a6d7ff;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      min-width: 1100px;
      min-height: 800px;
    }

    body {
      display: grid;
      place-items: center;
      overflow: hidden;
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 16% 12%, rgba(66, 141, 203, 0.34), transparent 32%),
        radial-gradient(circle at 88% 86%, rgba(42, 76, 146, 0.32), transparent 34%),
        linear-gradient(135deg, #081522 0%, #0b1a2e 48%, #101a34 100%);
    }

    body::before,
    body::after {
      position: fixed;
      content: "";
      width: 460px;
      height: 460px;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(2px);
      opacity: .32;
    }

    body::before {
      top: -250px;
      right: 8%;
      background: radial-gradient(circle, rgba(129, 218, 255, .4), transparent 68%);
    }

    body::after {
      bottom: -300px;
      left: 4%;
      background: radial-gradient(circle, rgba(129, 121, 255, .34), transparent 68%);
    }

    .shell {
      width: 1152px;
      height: 672px;
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 30px;
      background: var(--panel);
      box-shadow:
        0 32px 90px rgba(0, 0, 0, .34),
        inset 0 1px 0 rgba(255, 255, 255, .09);
      backdrop-filter: blur(22px);
    }

    .shell::before {
      position: absolute;
      inset: 0;
      content: "";
      pointer-events: none;
      background: linear-gradient(120deg, rgba(255,255,255,.06), transparent 30%, transparent 72%, rgba(255,255,255,.025));
    }

    .content {
      height: 100%;
      display: grid;
      grid-template-columns: 43% 57%;
      position: relative;
    }

    .overview {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 42px 46px;
      border-right: 1px solid var(--line);
      background:
        radial-gradient(circle at 15% 90%, rgba(93, 181, 243, .16), transparent 38%),
        linear-gradient(155deg, rgba(27, 58, 91, .55), rgba(9, 23, 42, .25));
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #dbeeff;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(150, 220, 255, .42);
      border-radius: 11px;
      color: var(--accent);
      background: rgba(108, 194, 255, .13);
      box-shadow: 0 0 24px rgba(95, 194, 255, .12);
    }

    .brand-mark svg { width: 19px; height: 19px; }

    .place-block { margin-top: 44px; }

    .place {
      margin: 0;
      max-width: 390px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 38px;
      font-weight: 720;
      letter-spacing: -.045em;
    }

    .date {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 15px;
      font-weight: 500;
      letter-spacing: .01em;
    }

    .hero-weather {
      display: flex;
      align-items: center;
      gap: 22px;
      margin-top: 38px;
    }

    .hero-icon {
      width: 112px;
      height: 112px;
      display: grid;
      place-items: center;
      color: var(--warm);
      filter: drop-shadow(0 10px 22px rgba(255, 194, 113, .18));
    }

    .hero-icon svg { width: 100%; height: 100%; }

    .temperature {
      margin: 0;
      font-size: 92px;
      font-weight: 260;
      letter-spacing: -.09em;
      line-height: .9;
    }

    .temperature sup {
      position: relative;
      top: -29px;
      margin-left: 6px;
      color: var(--accent);
      font-size: 26px;
      font-weight: 500;
      letter-spacing: 0;
    }

    .condition {
      margin: 15px 0 0;
      color: #e3edf9;
      font-size: 20px;
      font-weight: 560;
    }

    .range {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: 12px;
      color: var(--muted);
      font-size: 14px;
    }

    .range strong {
      color: var(--text);
      font-weight: 650;
    }

    .range-divider {
      width: 1px;
      height: 15px;
      background: var(--line);
    }

    .footnote {
      display: flex;
      justify-content: space-between;
      align-items: end;
      color: var(--muted);
      font-size: 12px;
    }

    .source {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .source::before {
      width: 7px;
      height: 7px;
      content: "";
      border-radius: 50%;
      background: #63d7a0;
      box-shadow: 0 0 12px #63d7a0;
    }

    .coordinates {
      font-variant-numeric: tabular-nums;
      opacity: .75;
    }

    .details {
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 42px 44px 40px;
    }

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

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

    .utc-label {
      color: #8295aa;
      font-size: 12px;
      letter-spacing: .04em;
    }

    .chart {
      width: 100%;
      height: 132px;
      display: block;
      overflow: visible;
      margin: 2px 0 21px;
    }

    .chart-grid {
      stroke: rgba(255,255,255,.09);
      stroke-width: 1;
    }

    .chart-area {
      fill: url(#area);
    }

    .chart-line {
      fill: none;
      stroke: #80d3ff;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .chart-dot {
      fill: #10263d;
      stroke: #a8e5ff;
      stroke-width: 2;
    }

    .hourly {
      min-height: 0;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 10px;
    }

    .hour {
      min-height: 102px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      border: 1px solid rgba(255, 255, 255, .075);
      border-radius: 16px;
      background: rgba(255,255,255,.045);
      transition: background .2s ease, transform .2s ease;
    }

    .hour:hover {
      transform: translateY(-2px);
      background: rgba(255,255,255,.085);
    }

    .hour-time {
      color: var(--muted);
      font-size: 12px;
      font-variant-numeric: tabular-nums;
    }

    .hour-temp {
      font-size: 19px;
      font-weight: 650;
      letter-spacing: -.03em;
      font-variant-numeric: tabular-nums;
    }

    .hour-temp span {
      color: var(--accent);
      font-size: 12px;
      font-weight: 500;
    }

    .loading,
    .error {
      height: 100%;
      display: grid;
      place-items: center;
      padding: 60px;
      text-align: center;
    }

    .loading-inner,
    .error-inner {
      display: grid;
      justify-items: center;
      gap: 16px;
    }

    .spinner {
      width: 38px;
      height: 38px;
      border: 3px solid rgba(255,255,255,.16);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin .8s linear infinite;
    }

    .error-icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      color: #ffc078;
      background: rgba(255,192,120,.12);
    }

    .error-title {
      margin: 0;
      font-size: 20px;
    }

    .error-copy {
      max-width: 380px;
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
    }

    @keyframes spin { to { transform: rotate(360deg); } }
  </style>
</head>
<body>
  <main class="shell" id="app" aria-live="polite">
    <div class="loading">
      <div class="loading-inner">
        <div class="spinner" aria-hidden="true"></div>
        <div>Loading weather data…</div>
      </div>
    </div>
  </main>

  <script>
    (() => {
      const params = new URLSearchParams(window.location.search);
      const today = new Date().toISOString().slice(0, 10);
      const rawDate = params.get("date") || today;
      const date = /^\d{4}-\d{2}-\d{2}$/.test(rawDate) ? rawDate : today;
      const latitude = Number.parseFloat(params.get("lat"));
      const longitude = Number.parseFloat(params.get("lon"));
      const lat = Number.isFinite(latitude) ? latitude : 52.52;
      const lon = Number.isFinite(longitude) ? longitude : 13.405;
      const locationName = (params.get("name") || "Berlin").trim() || "Berlin";
      const app = document.getElementById("app");

      const weather = {
        0: ["Clear sky", "sun"],
        1: ["Mainly clear", "sun"],
        2: ["Partly cloudy", "partly"],
        3: ["Overcast", "cloud"],
        45: ["Foggy", "fog"],
        48: ["Rime fog", "fog"],
        51: ["Light drizzle", "rain"],
        53: ["Drizzle", "rain"],
        55: ["Heavy drizzle", "rain"],
        56: ["Freezing drizzle", "rain"],
        57: ["Heavy freezing drizzle", "rain"],
        61: ["Light rain", "rain"],
        63: ["Rain", "rain"],
        65: ["Heavy rain", "rain"],
        66: ["Freezing rain", "rain"],
        67: ["Heavy freezing rain", "rain"],
        71: ["Light snow", "snow"],
        73: ["Snow", "snow"],
        75: ["Heavy snow", "snow"],
        77: ["Snow grains", "snow"],
        80: ["Light showers", "rain"],
        81: ["Showers", "rain"],
        82: ["Heavy showers", "rain"],
        85: ["Snow showers", "snow"],
        86: ["Heavy snow showers", "snow"],
        95: ["Thunderstorms", "storm"],
        96: ["Thunderstorms", "storm"],
        99: ["Severe thunderstorms", "storm"]
      };

      const icon = (kind, small = false) => {
        const size = small ? 'width="22" height="22"' : 'viewBox="0 0 120 120"';
        const stroke = small ? 2.4 : 3;
        const common = `fill="none" stroke="currentColor" stroke-width="${stroke}" stroke-linecap="round" stroke-linejoin="round"`;
        if (kind === "sun") return `<svg ${size} ${common}><circle cx="60" cy="60" r="19"/><path d="M60 12v13M60 95v13M12 60h13M95 60h13M26 26l9 9M85 85l9 9M94 26l-9 9M35 85l-9 9"/></svg>`;
        if (kind === "partly") return `<svg ${size} ${common}><circle cx="72" cy="41" r="15"/><path d="M72 14v8M72 60v8M45 41h8M91 41h8M53 22l6 6M91 22l-6 6"/><path d="M35 90h49a16 16 0 0 0 0-32 22 22 0 0 0-42 8 12 12 0 0 0-7 24Z" fill="currentColor" fill-opacity=".18"/></svg>`;
        if (kind === "cloud") return `<svg ${size} ${common}><path d="M28 91h61a18 18 0 0 0 0-36 27 27 0 0 0-52 9 14 14 0 0 0-9 27Z" fill="currentColor" fill-opacity=".18"/></svg>`;
        if (kind === "fog") return `<svg ${size} ${common}><path d="M27 52h57a18 18 0 0 0 0-36 26 26 0 0 0-50 9 13 13 0 0 0-7 27Z" fill="currentColor" fill-opacity=".16"/><path d="M24 72h72M32 87h56"/></svg>`;
        if (kind === "snow") return `<svg ${size} ${common}><path d="M28 61h58a17 17 0 0 0 0-34 25 25 0 0 0-48 8 13 13 0 0 0-10 26Z" fill="currentColor" fill-opacity=".16"/><path d="M39 78v16M32 82l14 8M46 82l-14 8M67 78v16M60 82l14 8M74 82l-14 8"/></svg>`;
        if (kind === "storm") return `<svg ${size} ${common}><path d="M28 61h58a17 17 0 0 0 0-34 25 25 0 0 0-48 8 13 13 0 0 0-10 26Z" fill="currentColor" fill-opacity=".16"/><path d="m63 67-13 22h12l-5 18 18-27H63Z" fill="currentColor"/></svg>`;
        return `<svg ${size} ${common}><path d="M28 61h58a17 17 0 0 0 0-34 25 25 0 0 0-48 8 13 13 0 0 0-10 26Z" fill="currentColor" fill-opacity=".16"/><path d="M42 77v19M67 77v19M35 83l14 8M49 83l-14 8M60 83l14 8M74 83l-14 8"/></svg>`;
      };

      const formatDate = value => new Intl.DateTimeFormat("en-US", {
        weekday: "long",
        month: "long",
        day: "numeric",
        year: "numeric",
        timeZone: "UTC"
      }).format(new Date(`${value}T00:00:00Z`));

      const temp = value => Number.isFinite(Number(value)) ? `${Math.round(Number(value))}°` : "—";

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

      const renderError = () => {
        app.innerHTML = `
          <div class="error">
            <div class="error-inner">
              <div class="error-icon">${icon("storm", true)}</div>
              <h1 class="error-title">Weather unavailable</h1>
              <p class="error-copy">We couldn't load weather data for this location and date. Please check the details and try again.</p>
            </div>
          </div>`;
      };

      const renderChart = values => {
        if (!values.length) return "";
        const width = 660;
        const height = 118;
        const padX = 12;
        const padY = 16;
        const min = Math.min(...values);
        const max = Math.max(...values);
        const spread = Math.max(max - min, 4);
        const points = values.map((value, index) => {
          const x = padX + index * ((width - padX * 2) / Math.max(values.length - 1, 1));
          const y = height - padY - ((value - (min - spread * .15)) / (spread * 1.3)) * (height - padY * 2);
          return `${x.toFixed(1)},${Math.max(padY, Math.min(height - padY, y)).toFixed(1)}`;
        }).join(" ");
        const area = `${padX},${height - padY} ${points} ${width - padX},${height - padY}`;
        const grid = [25, 59, 93].map(y => `<line class="chart-grid" x1="0" x2="${width}" y1="${y}" y2="${y}"/>`).join("");
        return `<svg class="chart" viewBox="0 0 ${width} ${height}" preserveAspectRatio="none" aria-label="Hourly temperature trend" role="img">
          <defs><linearGradient id="area" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#75d0ff" stop-opacity=".28"/><stop offset="1" stop-color="#75d0ff" stop-opacity="0"/></linearGradient></defs>
          ${grid}
          <polygon class="chart-area" points="${area}"/>
          <polyline class="chart-line" points="${points}"/>
          ${points.split(" ").filter((_, i) => i === 0 || i === values.length - 1).map(point => `<circle class="chart-dot" cx="${point.split(",")[0]}" cy="${point.split(",")[1]}" r="4"/>`).join("")}
        </svg>`;
      };

      const render = data => {
        const daily = data.daily || {};
        const hourly = data.hourly || {};
        const dailyIndex = Array.isArray(daily.time) ? Math.max(0, daily.time.indexOf(date)) : 0;
        const code = Number(daily.weather_code?.[dailyIndex]);
        const condition = weather[code] || ["Variable conditions", "cloud"];
        const max = Number(daily.temperature_2m_max?.[dailyIndex]);
        const min = Number(daily.temperature_2m_min?.[dailyIndex]);
        const hourlyTimes = Array.isArray(hourly.time) ? hourly.time : [];
        const hourlyTemps = Array.isArray(hourly.temperature_2m) ? hourly.temperature_2m : [];
        const readings = hourlyTimes.map((time, index) => ({
          time,
          value: Number(hourlyTemps[index])
        })).filter(item => item.time.startsWith(date) && Number.isFinite(item.value));

        document.title = `${locationName} Weather`;
        app.innerHTML = `
          <div class="content">
            <section class="overview">
              <div>
                <div class="brand">
                  <span class="brand-mark">${icon("sun", true)}</span>
                  <span>Daily forecast</span>
                </div>
                <div class="place-block">
                  <h1 class="place">${escapeHtml(locationName)}</h1>
                  <p class="date">${formatDate(date)}</p>
                </div>
                <div class="hero-weather">
                  <div class="hero-icon">${icon(condition[1])}</div>
                  <div>
                    <p class="temperature">${temp(max)}<sup>MAX</sup></p>
                    <p class="condition">${condition[0]}</p>
                    <div class="range">
                      <span>Low <strong>${temp(min)}</strong></span>
                      <span class="range-divider"></span>
                      <span>High <strong>${temp(max)}</strong></span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="footnote">
                <span class="source">Open-Meteo data</span>
                <span class="coordinates">${lat.toFixed(2)}°, ${lon.toFixed(2)}°</span>
              </div>
            </section>
            <section class="details">
              <div class="details-head">
                <p class="section-label">Hourly temperature</p>
                <span class="utc-label">All times in UTC</span>
              </div>
              ${renderChart(readings.map(item => item.value))}
              <div class="hourly">
                ${readings.length ? readings.map(item => {
                  const hour = new Date(item.time).getUTCHours().toString().padStart(2, "0") + ":00";
                  return `<div class="hour">
                    <span class="hour-time">${hour}</span>
                    <span class="hour-temp">${Math.round(item.value)}<span>°C</span></span>
                  </div>`;
                }).join("") : `<div class="error-copy">No hourly readings are available for this date.</div>`}
              </div>
            </section>
          </div>`;
      };

      const load = async () => {
        try {
          const endpoint = date < today ? "/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
          });
          const response = await fetch(`${endpoint}?${query.toString()}`, {
            headers: { "Accept": "application/json" }
          });
          if (!response.ok) throw new Error("Weather request failed");
          const data = await response.json();
          if (!data.daily || !data.hourly) throw new Error("Incomplete weather response");
          render(data);
        } catch {
          renderError();
        }
      };

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