gpt-5.6-terra @ high · 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;
    --ink: #f7f9ff;
    --muted: #b6c1d7;
    --line: rgba(255,255,255,.13);
    --panel: rgba(14, 29, 58, .52);
    --accent: #ffcb6b;
    --blue: #6fbcff;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    min-width: 1000px;
    min-height: 800px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background:
      radial-gradient(circle at 76% 13%, rgba(103, 174, 255, .3), transparent 27%),
      radial-gradient(circle at 20% 90%, rgba(90, 93, 205, .28), transparent 35%),
      linear-gradient(135deg, #0b1730 0%, #142a58 54%, #314c83 100%);
    overflow: hidden;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    opacity: .23;
    background-image: radial-gradient(rgba(255,255,255,.7) 1px, transparent 1px);
    background-size: 31px 31px;
    mask-image: linear-gradient(to bottom, black, transparent 75%);
    pointer-events: none;
  }
  main {
    width: 1160px;
    margin: 68px auto 0;
    position: relative;
  }
  .card {
    min-height: 642px;
    padding: 42px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 30px;
    background: linear-gradient(120deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
    box-shadow: 0 28px 80px rgba(1, 8, 27, .45), inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
  }
  .topline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 1;
  }
  .eyebrow {
    margin: 0 0 8px;
    color: #c9dbf7;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .15em;
    text-transform: uppercase;
  }
  h1 {
    margin: 0;
    font-size: 37px;
    line-height: 1.08;
    letter-spacing: -.045em;
  }
  .date {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 15px;
  }
  .source {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #ccdaef;
    background: rgba(7,18,42,.2);
    font-size: 12px;
    font-weight: 650;
  }
  .summary {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 28px;
    align-items: center;
    min-height: 250px;
    margin-top: 15px;
  }
  .temperature {
    display: flex;
    align-items: flex-start;
    letter-spacing: -.08em;
  }
  .temperature strong {
    font-size: 150px;
    line-height: .84;
    font-weight: 670;
  }
  .temperature span {
    margin: 13px 0 0 11px;
    color: var(--accent);
    font-size: 35px;
    letter-spacing: -.03em;
  }
  .condition {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 21px;
    color: #fff;
    font-size: 21px;
    font-weight: 650;
  }
  .condition-icon {
    width: 42px;
    height: 42px;
    flex: none;
  }
  .range {
    display: flex;
    gap: 11px;
    margin-top: 25px;
  }
  .pill {
    min-width: 110px;
    padding: 12px 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(7, 19, 44, .22);
  }
  .pill label {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .pill b {
    display: block;
    margin-top: 4px;
    font-size: 21px;
    letter-spacing: -.04em;
  }
  .chart-panel {
    height: 205px;
    padding: 19px 20px 15px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(11,31,69,.44), rgba(255,255,255,.045));
  }
  .chart-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
    color: #d6e4fa;
    font-size: 12px;
    font-weight: 700;
  }
  .chart-head span:last-child { color: var(--muted); font-weight: 500; }
  #chart { display: block; width: 100%; height: 155px; overflow: visible; }
  .hourly {
    position: relative;
    z-index: 1;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }
  .hourly-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 15px;
  }
  .hourly h2 {
    margin: 0;
    font-size: 16px;
    letter-spacing: -.02em;
  }
  .hourly-header span {
    color: var(--muted);
    font-size: 12px;
  }
  .hours {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
  }
  .hour {
    min-width: 0;
    padding: 11px 5px 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 13px;
    text-align: center;
    background: rgba(7,20,46,.18);
  }
  .hour time {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
  }
  .hour b {
    display: block;
    margin-top: 7px;
    font-size: 15px;
    letter-spacing: -.04em;
  }
  .hour:nth-child(n+13) { display: none; }
  .loading, .error {
    display: grid;
    place-items: center;
    min-height: 535px;
    text-align: center;
  }
  .loading p, .error p { color: var(--muted); }
  .loader {
    width: 35px;
    height: 35px;
    margin: 0 auto 17px;
    border: 3px solid rgba(255,255,255,.18);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;
  }
  .error-box {
    max-width: 410px;
    padding: 27px;
    border: 1px solid rgba(255,190,190,.24);
    border-radius: 20px;
    background: rgba(88, 25, 52, .28);
  }
  .error h2 { margin: 0; font-size: 23px; }
  .error p { margin: 10px 0 0; }
  @keyframes spin { to { transform: rotate(360deg); } }
</style>
</head>
<body>
<main>
  <section class="card" id="app" aria-live="polite">
    <div class="loading">
      <div>
        <div class="loader"></div>
        <p>Gathering the forecast…</p>
      </div>
    </div>
  </section>
</main>

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

  const weather = {
    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: ["Slight rain", "🌦️"],
    63: ["Rain", "🌧️"],
    65: ["Heavy rain", "🌧️"],
    66: ["Freezing rain", "🌧️"],
    67: ["Heavy freezing rain", "🌧️"],
    71: ["Light snow", "🌨️"],
    73: ["Snowfall", "🌨️"],
    75: ["Heavy snowfall", "❄️"],
    77: ["Snow grains", "❄️"],
    80: ["Rain showers", "🌦️"],
    81: ["Rain showers", "🌧️"],
    82: ["Violent showers", "⛈️"],
    85: ["Snow showers", "🌨️"],
    86: ["Heavy snow showers", "❄️"],
    95: ["Thunderstorm", "⛈️"],
    96: ["Thunderstorm with hail", "⛈️"],
    99: ["Severe thunderstorm", "⛈️"]
  };

  function degree(value) {
    return `${Math.round(value)}°`;
  }

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

  function renderChart(temperatures) {
    const values = temperatures.filter(Number.isFinite);
    if (!values.length) return "";
    const width = 500, height = 155, padX = 7, padY = 18;
    const min = Math.min(...values), max = Math.max(...values);
    const range = max - min || 1;
    const point = (value, index) => {
      const x = padX + index * ((width - padX * 2) / Math.max(temperatures.length - 1, 1));
      const y = height - padY - ((value - min) / range) * (height - padY * 2);
      return [x, y];
    };
    const points = temperatures.map(point);
    const line = points.map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(" ");
    const area = `M ${points[0][0]},${height - padY} L ${points.map(([x,y]) => `${x},${y}`).join(" L ")} L ${points.at(-1)[0]},${height - padY} Z`;
    const marks = [0, 6, 12, 18, 23].filter(i => i < temperatures.length).map(i => {
      const [x, y] = points[i];
      return `<g><circle cx="${x}" cy="${y}" r="3.5" fill="#ffcf73"/><text x="${x}" y="${height - 1}" text-anchor="middle" fill="#b6c1d7" font-size="10">${String(i).padStart(2, "0")}</text></g>`;
    }).join("");
    return `<svg id="chart" viewBox="0 0 ${width} ${height}" preserveAspectRatio="none" aria-label="Hourly temperature chart">
      <defs><linearGradient id="fill" x1="0" x2="0" y1="0" y2="1"><stop stop-color="#7ebfff" stop-opacity=".4"/><stop offset="1" stop-color="#7ebfff" stop-opacity="0"/></linearGradient></defs>
      <line x1="0" y1="40" x2="${width}" y2="40" stroke="rgba(255,255,255,.1)"/><line x1="0" y1="88" x2="${width}" y2="88" stroke="rgba(255,255,255,.1)"/>
      <path d="${area}" fill="url(#fill)"/><polyline points="${line}" fill="none" stroke="#9bd3ff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
      ${marks}
    </svg>`;
  }

  function error() {
    app.innerHTML = `<div class="error"><div class="error-box"><h2>Weather data is unavailable</h2><p>We couldn’t load conditions for this date. Please try again shortly.</p></div></div>`;
  }

  async function load() {
    try {
      const endpoint = requestedDate < today ? "/api/om/archive" : "/api/om/forecast";
      const query = new URLSearchParams({
        latitude: lat, longitude: 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 response = await fetch(`${endpoint}?${query}`);
      if (!response.ok) throw new Error("Request failed");
      const data = await response.json();

      const max = data.daily?.temperature_2m_max?.[0];
      const min = data.daily?.temperature_2m_min?.[0];
      const code = data.daily?.weather_code?.[0];
      const hours = (data.hourly?.time || [])
        .map((time, i) => ({ time, temperature: data.hourly.temperature_2m?.[i] }))
        .filter(item => item.time.startsWith(requestedDate) && Number.isFinite(item.temperature));

      if (![max, min].every(Number.isFinite) || !hours.length) throw new Error("Incomplete data");

      const [condition, icon] = weather[code] || ["Unknown conditions", "☁️"];
      app.innerHTML = `
        <div class="topline">
          <div>
            <p class="eyebrow">Local forecast · UTC</p>
            <h1 id="location"></h1>
            <p class="date">${displayDate(requestedDate)}</p>
          </div>
          <span class="source">Open-Meteo data</span>
        </div>
        <div class="summary">
          <div>
            <div class="temperature"><strong>${degree(max)}</strong><span>C</span></div>
            <div class="condition"><span class="condition-icon" aria-hidden="true">${icon}</span><span>${condition}</span></div>
            <div class="range">
              <div class="pill"><label>High</label><b>${degree(max)}C</b></div>
              <div class="pill"><label>Low</label><b>${degree(min)}C</b></div>
            </div>
          </div>
          <div class="chart-panel">
            <div class="chart-head"><span>Temperature curve</span><span>${degree(min)}C — ${degree(max)}C</span></div>
            ${renderChart(hours.map(h => h.temperature))}
          </div>
        </div>
        <div class="hourly">
          <div class="hourly-header"><h2>Hourly temperatures</h2><span>First 12 hours shown</span></div>
          <div class="hours">${hours.map((hour, index) => `
            <div class="hour" title="${hour.time.slice(11,16)} UTC">
              <time>${index === 0 ? "Now" : hour.time.slice(11,16)}</time>
              <b>${degree(hour.temperature)}</b>
            </div>`).join("")}</div>
        </div>`;
      document.getElementById("location").textContent = name;
    } catch (_) {
      error();
    }
  }

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