gpt-5.6-sol @ medium · cursor-xl

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather</title>
<style>
  :root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #f8fbff;
    background:
      radial-gradient(circle at 18% 15%, rgba(88, 168, 255, .34), transparent 35%),
      radial-gradient(circle at 84% 82%, rgba(122, 92, 255, .28), transparent 36%),
      linear-gradient(145deg, #081326 0%, #10294a 52%, #111a38 100%);
  }

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

  body::before {
    width: 420px;
    height: 420px;
    top: -210px;
    right: -80px;
    background: rgba(255, 255, 255, .08);
  }

  body::after {
    width: 280px;
    height: 280px;
    left: -95px;
    bottom: -150px;
    border: 1px solid rgba(255, 255, 255, .12);
  }

  .card {
    position: relative;
    width: min(1100px, calc(100vw - 80px));
    min-height: 630px;
    padding: 42px 46px 38px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .19);
    border-radius: 34px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.17), rgba(255,255,255,.055)),
      rgba(7, 20, 42, .5);
    box-shadow:
      0 35px 90px rgba(0, 0, 0, .38),
      inset 0 1px 0 rgba(255, 255, 255, .22);
    backdrop-filter: blur(24px);
  }

  .card::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    top: -220px;
    left: 40%;
    border-radius: 50%;
    background: rgba(120, 202, 255, .18);
    filter: blur(24px);
  }

  header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
  }

  .eyebrow {
    margin-bottom: 10px;
    color: #8fcfff;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .2em;
    text-transform: uppercase;
  }

  h1 {
    max-width: 680px;
    margin: 0;
    overflow: hidden;
    font-size: clamp(38px, 4.2vw, 62px);
    font-weight: 680;
    letter-spacing: -.055em;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .date {
    margin-top: 15px;
    color: rgba(239, 247, 255, .67);
    font-size: 16px;
    letter-spacing: .01em;
  }

  .utc {
    flex: 0 0 auto;
    margin-top: 3px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    color: rgba(239, 247, 255, .63);
    background: rgba(255, 255, 255, .07);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
  }

  .summary {
    position: relative;
    display: grid;
    grid-template-columns: 1.35fr .72fr .72fr;
    gap: 14px;
    margin-top: 34px;
  }

  .panel {
    min-height: 154px;
    padding: 24px 26px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    background: rgba(255, 255, 255, .065);
  }

  .condition-panel {
    display: flex;
    align-items: center;
    gap: 22px;
  }

  .weather-icon {
    display: grid;
    flex: 0 0 92px;
    width: 92px;
    height: 92px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(132,207,255,.25), rgba(116,103,255,.16));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    font-size: 51px;
    text-shadow: 0 10px 26px rgba(0,0,0,.25);
  }

  .label {
    color: rgba(230, 242, 255, .57);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .condition {
    margin-top: 8px;
    font-size: 25px;
    font-weight: 650;
    letter-spacing: -.02em;
  }

  .temp-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .temperature {
    font-size: 47px;
    font-weight: 650;
    letter-spacing: -.06em;
    line-height: 1;
  }

  .temperature span {
    margin-left: 3px;
    color: rgba(231, 244, 255, .55);
    font-size: 21px;
    font-weight: 500;
    vertical-align: top;
  }

  .chart-panel {
    position: relative;
    margin-top: 14px;
    padding: 23px 25px 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 25px;
    background: rgba(3, 13, 30, .24);
  }

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

  .range {
    color: rgba(226, 240, 255, .49);
    font-size: 12px;
  }

  .chart-wrap {
    position: relative;
    height: 190px;
  }

  svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .grid-line {
    stroke: rgba(255,255,255,.075);
    stroke-width: 1;
    stroke-dasharray: 4 7;
  }

  .area { fill: url(#areaGradient); }

  .line {
    fill: none;
    stroke: url(#lineGradient);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 5px 8px rgba(66, 181, 255, .25));
  }

  .dot {
    fill: #dff5ff;
    stroke: #4ebcff;
    stroke-width: 2;
  }

  .hour-labels {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin: 0 3px;
    color: rgba(224, 239, 255, .46);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .05em;
  }

  .hour-labels span { text-align: center; }
  .hour-labels span:first-child { text-align: left; }
  .hour-labels span:last-child { text-align: right; }

  .loading,
  .error {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 40px;
    border-radius: inherit;
    text-align: center;
    background: rgba(7, 18, 38, .92);
    backdrop-filter: blur(18px);
  }

  .loading-box { width: min(360px, 80%); }

  .spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 20px;
    border: 3px solid rgba(255,255,255,.13);
    border-top-color: #65c8ff;
    border-radius: 50%;
    animation: spin .8s linear infinite;
  }

  .loading-title,
  .error-title {
    font-size: 22px;
    font-weight: 650;
  }

  .loading-copy,
  .error-copy {
    margin-top: 8px;
    color: rgba(231, 243, 255, .58);
    font-size: 14px;
    line-height: 1.55;
  }

  .error { display: none; }
  .error-icon { margin-bottom: 16px; font-size: 44px; }

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

  @media (max-width: 760px) {
    body { overflow: auto; }
    .card {
      width: calc(100vw - 28px);
      margin: 14px;
      padding: 30px 22px;
    }
    .summary { grid-template-columns: 1fr 1fr; }
    .condition-panel { grid-column: 1 / -1; }
    .utc { display: none; }
  }
</style>
</head>
<body>
<main class="card" aria-live="polite">
  <div class="loading" id="loading">
    <div class="loading-box">
      <div class="spinner"></div>
      <div class="loading-title">Reading the atmosphere</div>
      <div class="loading-copy">Gathering the day’s temperature profile…</div>
    </div>
  </div>

  <div class="error" id="error">
    <div>
      <div class="error-icon">☁️</div>
      <div class="error-title">Weather data could not be loaded</div>
      <div class="error-copy" id="error-copy">Please check the location and try again.</div>
    </div>
  </div>

  <header>
    <div>
      <div class="eyebrow">Daily weather</div>
      <h1 id="location">Berlin</h1>
      <div class="date" id="date"></div>
    </div>
    <div class="utc">UTC · CELSIUS</div>
  </header>

  <section class="summary">
    <div class="panel condition-panel">
      <div class="weather-icon" id="weather-icon">☀️</div>
      <div>
        <div class="label">Conditions</div>
        <div class="condition" id="condition">Clear sky</div>
      </div>
    </div>
    <div class="panel temp-panel">
      <div class="label">Day high</div>
      <div class="temperature"><b id="high">—</b><span>°C</span></div>
    </div>
    <div class="panel temp-panel">
      <div class="label">Night low</div>
      <div class="temperature"><b id="low">—</b><span>°C</span></div>
    </div>
  </section>

  <section class="chart-panel">
    <div class="chart-head">
      <div class="label">Hourly temperature</div>
      <div class="range" id="range"></div>
    </div>
    <div class="chart-wrap">
      <svg id="chart" viewBox="0 0 950 190" preserveAspectRatio="none" role="img" aria-label="Hourly temperature chart">
        <defs>
          <linearGradient id="lineGradient" x1="0" x2="1">
            <stop offset="0" stop-color="#62d4ff"/>
            <stop offset=".55" stop-color="#8bb9ff"/>
            <stop offset="1" stop-color="#b59bff"/>
          </linearGradient>
          <linearGradient id="areaGradient" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stop-color="#6bcaff" stop-opacity=".27"/>
            <stop offset="1" stop-color="#876fff" stop-opacity="0"/>
          </linearGradient>
        </defs>
        <g id="grid"></g>
        <path class="area" id="area"></path>
        <path class="line" id="line"></path>
        <g id="dots"></g>
      </svg>
    </div>
    <div class="hour-labels">
      <span>00:00</span><span>04:00</span><span>08:00</span><span>12:00</span>
      <span>16:00</span><span>20:00</span><span>23:00</span>
    </div>
  </section>
</main>

<script>
(() => {
  "use strict";

  const params = new URLSearchParams(location.search);
  const today = new Date().toISOString().slice(0, 10);
  const lat = parseFinite(params.get("lat"), 52.52);
  const lon = parseFinite(params.get("lon"), 13.405);
  const name = (params.get("name") || "Berlin").trim() || "Berlin";
  const requestedDate = validDate(params.get("date")) ? params.get("date") : today;

  const weatherCodes = {
    0: ["Clear sky", "☀️"],
    1: ["Mainly clear", "🌤️"],
    2: ["Partly cloudy", "⛅"],
    3: ["Overcast", "☁️"],
    45: ["Foggy", "🌫️"],
    48: ["Rime fog", "🌫️"],
    51: ["Light drizzle", "🌦️"],
    53: ["Drizzle", "🌦️"],
    55: ["Heavy drizzle", "🌧️"],
    56: ["Freezing drizzle", "🌧️"],
    57: ["Heavy freezing drizzle", "🌧️"],
    61: ["Light rain", "🌦️"],
    63: ["Rain", "🌧️"],
    65: ["Heavy rain", "🌧️"],
    66: ["Freezing rain", "🌧️"],
    67: ["Heavy freezing rain", "🌧️"],
    71: ["Light snow", "🌨️"],
    73: ["Snow", "❄️"],
    75: ["Heavy snow", "❄️"],
    77: ["Snow grains", "🌨️"],
    80: ["Light showers", "🌦️"],
    81: ["Rain showers", "🌧️"],
    82: ["Heavy showers", "🌧️"],
    85: ["Snow showers", "🌨️"],
    86: ["Heavy snow showers", "❄️"],
    95: ["Thunderstorm", "⛈️"],
    96: ["Thunderstorm with hail", "⛈️"],
    99: ["Severe hailstorm", "⛈️"]
  };

  document.getElementById("location").textContent = name;
  document.getElementById("date").textContent = formatDate(requestedDate);

  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: requestedDate,
    end_date: requestedDate
  });

  const endpoint = requestedDate < today ? "/api/om/archive" : "/api/om/forecast";

  fetch(endpoint + "?" + query.toString(), { headers: { "Accept": "application/json" } })
    .then(response => {
      if (!response.ok) throw new Error("The weather service returned an error.");
      return response.json();
    })
    .then(render)
    .catch(error => showError(error.message));

  function render(data) {
    const high = Number(data?.daily?.temperature_2m_max?.[0]);
    const low = Number(data?.daily?.temperature_2m_min?.[0]);
    const code = Number(data?.daily?.weather_code?.[0]);
    const times = data?.hourly?.time;
    const values = data?.hourly?.temperature_2m;

    if (!Number.isFinite(high) || !Number.isFinite(low) ||
        !Array.isArray(times) || !Array.isArray(values)) {
      throw new Error("No complete weather record is available for this date.");
    }

    const hourly = values
      .map((value, index) => ({ time: times[index], value: Number(value) }))
      .filter(item => item.time?.slice(0, 10) === requestedDate && Number.isFinite(item.value));

    if (!hourly.length) {
      throw new Error("No hourly temperatures are available for this date.");
    }

    const condition = weatherCodes[code] || ["Unknown conditions", "🌡️"];
    document.getElementById("high").textContent = formatTemp(high);
    document.getElementById("low").textContent = formatTemp(low);
    document.getElementById("condition").textContent = condition[0];
    document.getElementById("weather-icon").textContent = condition[1];

    drawChart(hourly.map(item => item.value));
    document.getElementById("loading").style.display = "none";
  }

  function drawChart(values) {
    const width = 950, height = 190, top = 22, bottom = 19;
    let min = Math.min(...values), max = Math.max(...values);
    const padding = Math.max(2, (max - min) * .24);
    min -= padding;
    max += padding;

    const points = values.map((value, i) => {
      const x = values.length === 1 ? width / 2 : i * width / (values.length - 1);
      const y = top + (max - value) / (max - min || 1) * (height - top - bottom);
      return [x, y];
    });

    const path = smoothPath(points);
    document.getElementById("line").setAttribute("d", path);
    document.getElementById("area").setAttribute(
      "d", path + ` L ${points.at(-1)[0]} ${height} L ${points[0][0]} ${height} Z`
    );

    const grid = document.getElementById("grid");
    [top, (top + height - bottom) / 2, height - bottom].forEach(y => {
      const line = svg("line", { x1: 0, y1: y, x2: width, y2: y, class: "grid-line" });
      grid.appendChild(line);
    });

    const dots = document.getElementById("dots");
    points.forEach((point, index) => {
      if (index % 4 === 0 || index === points.length - 1) {
        dots.appendChild(svg("circle", {
          cx: point[0], cy: point[1], r: 3.6, class: "dot"
        }));
      }
    });

    document.getElementById("range").textContent =
      `${formatTemp(Math.min(...values))}° to ${formatTemp(Math.max(...values))}°`;
  }

  function smoothPath(points) {
    if (points.length < 2) return `M ${points[0][0]} ${points[0][1]}`;
    let d = `M ${points[0][0]} ${points[0][1]}`;
    for (let i = 1; i < points.length; i++) {
      const previous = points[i - 1];
      const current = points[i];
      const midX = (previous[0] + current[0]) / 2;
      d += ` C ${midX} ${previous[1]}, ${midX} ${current[1]}, ${current[0]} ${current[1]}`;
    }
    return d;
  }

  function svg(tag, attributes) {
    const node = document.createElementNS("http://www.w3.org/2000/svg", tag);
    Object.entries(attributes).forEach(([key, value]) => node.setAttribute(key, value));
    return node;
  }

  function parseFinite(value, fallback) {
    const number = Number(value);
    return value !== null && Number.isFinite(number) ? number : fallback;
  }

  function validDate(value) {
    if (!/^\d{4}-\d{2}-\d{2}$/.test(value || "")) return false;
    const date = new Date(value + "T00:00:00Z");
    return !Number.isNaN(date.getTime()) && date.toISOString().slice(0, 10) === value;
  }

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

  function formatTemp(value) {
    return Number(value).toLocaleString(undefined, { maximumFractionDigits: 1 });
  }

  function showError(message) {
    document.getElementById("loading").style.display = "none";
    document.getElementById("error-copy").textContent =
      message || "Please check the location and try again.";
    document.getElementById("error").style.display = "grid";
  }
})();
</script>
</body>
</html>