gpt-5.6-sol @ high · cursor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Daily Weather</title>
  <style>
    * { box-sizing: border-box; }

    :root {
      color-scheme: dark;
      --text: #f7fbff;
      --muted: #a9bad0;
      --panel: rgba(10, 24, 43, 0.78);
      --border: rgba(255, 255, 255, 0.11);
      --accent: #79d5ff;
      --warm: #ffc56e;
    }

    body {
      margin: 0;
      min-width: 1000px;
      min-height: 100vh;
      overflow: hidden;
      display: grid;
      place-items: center;
      color: var(--text);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 12% 18%, rgba(59, 160, 255, 0.32), transparent 28%),
        radial-gradient(circle at 86% 12%, rgba(111, 84, 255, 0.22), transparent 26%),
        linear-gradient(145deg, #06111f 0%, #0a1c32 48%, #101934 100%);
    }

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

    body::before {
      width: 420px;
      height: 420px;
      right: -150px;
      bottom: -190px;
      background: rgba(45, 198, 255, 0.13);
    }

    body::after {
      width: 280px;
      height: 280px;
      left: -110px;
      bottom: 40px;
      background: rgba(125, 98, 255, 0.12);
    }

    .card {
      width: min(1160px, calc(100vw - 80px));
      height: min(700px, calc(100vh - 80px));
      min-height: 620px;
      padding: 30px 34px 28px;
      overflow: hidden;
      position: relative;
      border: 1px solid var(--border);
      border-radius: 30px;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.06), transparent 42%),
        var(--panel);
      box-shadow: 0 30px 80px rgba(0, 5, 18, 0.48);
      backdrop-filter: blur(24px);
    }

    .card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      background: linear-gradient(120deg, rgba(121, 213, 255, 0.08), transparent 50%);
    }

    header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      height: 76px;
    }

    .eyebrow {
      margin-bottom: 6px;
      color: var(--accent);
      font-size: 11px;
      font-weight: 750;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      max-width: 720px;
      overflow: hidden;
      font-size: 32px;
      font-weight: 650;
      letter-spacing: -0.035em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

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

    .utc-badge {
      padding: 9px 13px;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: #c8d7e8;
      background: rgba(255,255,255,0.045);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.11em;
    }

    .loading,
    .error {
      height: calc(100% - 76px);
      display: grid;
      place-items: center;
      text-align: center;
    }

    .loading-box,
    .error-box {
      max-width: 480px;
      padding: 36px;
    }

    .spinner {
      width: 42px;
      height: 42px;
      margin: 0 auto 18px;
      border: 3px solid rgba(255,255,255,0.12);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.9s linear infinite;
    }

    .status-title {
      margin: 0 0 8px;
      font-size: 21px;
      font-weight: 650;
    }

    .status-copy {
      margin: 0;
      color: var(--muted);
      line-height: 1.6;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    .content[hidden],
    .loading[hidden],
    .error[hidden] { display: none; }

    .overview {
      height: 290px;
      display: grid;
      grid-template-columns: 360px 1fr;
      gap: 28px;
      padding-top: 14px;
    }

    .summary {
      display: grid;
      grid-template-columns: 1fr 128px;
      align-items: center;
      padding: 20px 22px;
      border: 1px solid var(--border);
      border-radius: 24px;
      background: rgba(255,255,255,0.04);
    }

    .condition {
      margin-bottom: 8px;
      color: #dfeaf5;
      font-size: 16px;
      font-weight: 600;
    }

    .temperature {
      margin-left: -3px;
      font-size: 72px;
      font-weight: 540;
      line-height: 0.95;
      letter-spacing: -0.065em;
    }

    .temperature sup {
      margin-left: 3px;
      color: var(--accent);
      font-size: 25px;
      font-weight: 650;
      vertical-align: top;
      letter-spacing: 0;
    }

    .range {
      display: flex;
      gap: 18px;
      margin-top: 20px;
      color: var(--muted);
      font-size: 13px;
    }

    .range strong {
      display: block;
      margin-top: 4px;
      color: var(--text);
      font-size: 19px;
      font-weight: 620;
    }

    .weather-icon {
      width: 120px;
      height: 120px;
      display: grid;
      place-items: center;
      filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.2));
    }

    .chart-panel {
      min-width: 0;
      padding: 18px 20px 12px;
      border: 1px solid var(--border);
      border-radius: 24px;
      background: rgba(3, 13, 27, 0.25);
    }

    .panel-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .panel-heading h2 {
      margin: 0;
      font-size: 14px;
      font-weight: 650;
      letter-spacing: 0.01em;
    }

    .panel-heading span {
      color: var(--muted);
      font-size: 11px;
    }

    #chart {
      width: 100%;
      height: 225px;
      display: block;
      overflow: visible;
    }

    .hourly-section {
      padding-top: 20px;
    }

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

    .hourly-title h2 {
      margin: 0;
      font-size: 15px;
      font-weight: 650;
    }

    .hourly-title span {
      color: var(--muted);
      font-size: 11px;
    }

    .hours {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 8px;
    }

    .hour {
      min-width: 0;
      height: 82px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,255,255,0.075);
      border-radius: 14px;
      background: rgba(255,255,255,0.035);
    }

    .hour-time {
      margin-bottom: 8px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 650;
      letter-spacing: 0.04em;
    }

    .hour-temp {
      font-size: 16px;
      font-weight: 650;
    }

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

    @media (max-height: 700px) {
      .card { transform: scale(0.9); }
    }
  </style>
</head>
<body>
  <main class="card">
    <header>
      <div>
        <div class="eyebrow">Daily weather</div>
        <h1 id="location">Berlin</h1>
        <div class="date" id="display-date"></div>
      </div>
      <div class="utc-badge">UTC</div>
    </header>

    <section class="loading" id="loading" aria-live="polite">
      <div class="loading-box">
        <div class="spinner"></div>
        <p class="status-title">Loading the forecast</p>
        <p class="status-copy">Collecting temperature and conditions for this date.</p>
      </div>
    </section>

    <section class="error" id="error" hidden aria-live="assertive">
      <div class="error-box">
        <p class="status-title">Weather data could not be loaded</p>
        <p class="status-copy" id="error-copy">Please check the date or try again later.</p>
      </div>
    </section>

    <div class="content" id="content" hidden>
      <section class="overview">
        <div class="summary">
          <div>
            <div class="condition" id="condition"></div>
            <div class="temperature"><span id="main-temp"></span><sup>°C</sup></div>
            <div class="range">
              <div>High<strong id="maximum"></strong></div>
              <div>Low<strong id="minimum"></strong></div>
            </div>
          </div>
          <div class="weather-icon" id="weather-icon"></div>
        </div>

        <div class="chart-panel">
          <div class="panel-heading">
            <h2>Temperature curve</h2>
            <span>00:00–23:00</span>
          </div>
          <svg id="chart" viewBox="0 0 650 225" preserveAspectRatio="none" aria-label="Hourly temperature chart"></svg>
        </div>
      </section>

      <section class="hourly-section">
        <div class="hourly-title">
          <h2>Hourly temperatures</h2>
          <span>All times in UTC</span>
        </div>
        <div class="hours" id="hours"></div>
      </section>
    </div>
  </main>

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

      document.getElementById("location").textContent = locationName;
      document.getElementById("display-date").textContent = formatDate(requestedDate);

      function validCoordinate(value, min, max, fallback) {
        const number = Number(value);
        return Number.isFinite(number) && number >= min && number <= max ? number : fallback;
      }

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

      function conditionFor(code) {
        const conditions = {
          0: ["Clear sky", "clear"],
          1: ["Mainly clear", "clear"],
          2: ["Partly cloudy", "cloud"],
          3: ["Overcast", "cloud"],
          45: ["Fog", "fog"],
          48: ["Rime fog", "fog"],
          51: ["Light drizzle", "rain"],
          53: ["Drizzle", "rain"],
          55: ["Heavy drizzle", "rain"],
          56: ["Freezing drizzle", "rain"],
          57: ["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: ["Rain showers", "rain"],
          82: ["Heavy showers", "rain"],
          85: ["Snow showers", "snow"],
          86: ["Heavy snow showers", "snow"],
          95: ["Thunderstorm", "storm"],
          96: ["Thunderstorm with hail", "storm"],
          99: ["Severe thunderstorm", "storm"]
        };
        return conditions[code] || ["Unknown conditions", "cloud"];
      }

      function icon(type) {
        const sun = '<circle cx="55" cy="48" r="22" fill="#FFD36A"/><g stroke="#FFD36A" stroke-width="4" stroke-linecap="round"><path d="M55 13v9M55 74v9M20 48h9M81 48h9M30 23l7 7M73 66l7 7M80 23l-7 7M37 66l-7 7"/></g>';
        const cloud = '<path d="M30 76h58c13 0 22-8 22-19s-9-19-21-19c-4-14-17-23-32-20-11 2-19 10-22 20-12 0-21 8-21 19s7 19 16 19Z" fill="#DCEBFA"/><path d="M34 76h54c13 0 22-8 22-19 0-3-1-6-2-8-10 12-24 19-42 20-15 1-27-3-38-9-4-2-8-1-13 0 2 10 7 16 19 16Z" fill="#AFC7DD" opacity=".65"/>';
        const drops = '<g stroke="#65CFFF" stroke-width="5" stroke-linecap="round"><path d="M38 88l-5 10M62 88l-5 10M86 88l-5 10"/></g>';
        const snow = '<g fill="#CFF3FF" font-size="22" font-family="sans-serif"><text x="27" y="104">✦</text><text x="54" y="104">✦</text><text x="81" y="104">✦</text></g>';
        const fog = '<g stroke="#BBD1E5" stroke-width="5" stroke-linecap="round"><path d="M20 47h80M12 64h82M26 81h82"/></g>';
        const storm = cloud + drops + '<path d="M63 77 47 96h13l-5 18 22-26H64Z" fill="#FFD15C"/>';
        const body = type === "clear" ? sun :
          type === "rain" ? sun.replace(/<g stroke[\s\S]*<\/g>/, "") + cloud + drops :
          type === "snow" ? cloud + snow :
          type === "fog" ? fog :
          type === "storm" ? storm :
          sun.replace(/<g stroke[\s\S]*<\/g>/, "") + cloud;
        return '<svg viewBox="0 0 120 120" width="120" height="120" aria-hidden="true">' + body + '</svg>';
      }

      function renderChart(values) {
        const svg = document.getElementById("chart");
        const valid = values.filter(Number.isFinite);
        if (!valid.length) throw new Error("No hourly temperatures returned.");

        const width = 650;
        const height = 225;
        const left = 14;
        const right = 12;
        const top = 24;
        const bottom = 32;
        const min = Math.floor(Math.min(...valid) - 1);
        const max = Math.ceil(Math.max(...valid) + 1);
        const range = Math.max(max - min, 1);
        const x = index => left + index * ((width - left - right) / Math.max(values.length - 1, 1));
        const y = value => top + (max - value) * ((height - top - bottom) / range);

        const points = values
          .map((value, index) => Number.isFinite(value) ? `${x(index).toFixed(1)},${y(value).toFixed(1)}` : null)
          .filter(Boolean);

        const linePath = points.map((point, index) => (index ? "L" : "M") + point).join(" ");
        const areaPath = linePath + ` L${x(values.length - 1)},${height - bottom} L${left},${height - bottom} Z`;
        const guides = [0, 0.5, 1].map(fraction => {
          const gy = top + fraction * (height - top - bottom);
          const label = Math.round(max - fraction * range);
          return `<line x1="${left}" y1="${gy}" x2="${width-right}" y2="${gy}" stroke="rgba(255,255,255,.08)" stroke-dasharray="3 7"/>
                  <text x="${left}" y="${gy-7}" fill="#8296ad" font-size="10">${label}°</text>`;
        }).join("");
        const labels = [0, 6, 12, 18, 23].filter(i => i < values.length).map(i =>
          `<text x="${x(i)}" y="${height-8}" fill="#8296ad" font-size="10" text-anchor="${i === 0 ? "start" : i === values.length - 1 ? "end" : "middle"}">${String(i).padStart(2, "0")}:00</text>`
        ).join("");

        svg.innerHTML = `
          <defs>
            <linearGradient id="area" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#79d5ff" stop-opacity=".35"/>
              <stop offset="100%" stop-color="#79d5ff" stop-opacity=".015"/>
            </linearGradient>
            <filter id="glow"><feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
          </defs>
          ${guides}
          <path d="${areaPath}" fill="url(#area)"/>
          <path d="${linePath}" fill="none" stroke="#79d5ff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/>
          ${labels}`;
      }

      function renderHours(times, values) {
        const container = document.getElementById("hours");
        container.replaceChildren();
        values.forEach((temperature, index) => {
          const item = document.createElement("div");
          item.className = "hour";

          const time = document.createElement("div");
          time.className = "hour-time";
          const timeValue = times[index] || "";
          time.textContent = timeValue.includes("T") ? timeValue.split("T")[1].slice(0, 5) : `${String(index).padStart(2, "0")}:00`;

          const temp = document.createElement("div");
          temp.className = "hour-temp";
          temp.textContent = Number.isFinite(temperature) ? `${Math.round(temperature)}°` : "—";

          item.append(time, temp);
          container.appendChild(item);
        });
      }

      async function loadWeather() {
        try {
          const endpoint = requestedDate < today ? "/api/om/archive" : "/api/om/forecast";
          const query = new URLSearchParams({
            latitude: String(latitude),
            longitude: String(longitude),
            daily: "temperature_2m_max,temperature_2m_min,weather_code",
            hourly: "temperature_2m",
            timezone: "UTC",
            temperature_unit: "celsius",
            start_date: requestedDate,
            end_date: requestedDate
          });

          const response = await fetch(`${endpoint}?${query}`);
          if (!response.ok) throw new Error(`Request failed with status ${response.status}.`);

          const data = await response.json();
          const dailyIndex = data.daily?.time?.indexOf(requestedDate);
          if (dailyIndex == null || dailyIndex < 0) throw new Error("No daily weather was returned for this date.");

          const maximum = Number(data.daily.temperature_2m_max?.[dailyIndex]);
          const minimum = Number(data.daily.temperature_2m_min?.[dailyIndex]);
          const code = Number(data.daily.weather_code?.[dailyIndex]);
          if (!Number.isFinite(maximum) || !Number.isFinite(minimum)) {
            throw new Error("Temperature data is unavailable for this date.");
          }

          const hourlyPairs = (data.hourly?.time || [])
            .map((time, index) => [time, Number(data.hourly?.temperature_2m?.[index])])
            .filter(([time]) => typeof time === "string" && time.startsWith(requestedDate + "T"));

          if (!hourlyPairs.length) throw new Error("No hourly temperatures were returned.");

          const times = hourlyPairs.map(pair => pair[0]);
          const temperatures = hourlyPairs.map(pair => pair[1]);
          const [condition, iconType] = conditionFor(code);

          document.getElementById("condition").textContent = condition;
          document.getElementById("main-temp").textContent = Math.round(maximum);
          document.getElementById("maximum").textContent = `${Math.round(maximum)} °C`;
          document.getElementById("minimum").textContent = `${Math.round(minimum)} °C`;
          document.getElementById("weather-icon").innerHTML = icon(iconType);

          renderChart(temperatures);
          renderHours(times, temperatures);

          document.getElementById("loading").hidden = true;
          document.getElementById("content").hidden = false;
        } catch (error) {
          document.getElementById("loading").hidden = true;
          document.getElementById("error").hidden = false;
          document.getElementById("error-copy").textContent =
            error instanceof Error ? error.message : "Please check the date or try again later.";
        }
      }

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