cursor-grok-4.6 @ high · cursor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=1280, height=800, initial-scale=1" />
  <title>Weather</title>
  <style>
    :root {
      --bg0: #0c1018;
      --bg1: #1a2436;
      --bg2: #3d4a3a;
      --ink: #f4efe4;
      --muted: rgba(244, 239, 228, 0.58);
      --faint: rgba(244, 239, 228, 0.14);
      --accent: #e2c48a;
      --accent-soft: rgba(226, 196, 138, 0.22);
      --line: rgba(244, 239, 228, 0.16);
      --danger: #f0c7b0;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      width: 1280px;
      height: 800px;
      overflow: hidden;
      background: var(--bg0);
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    .stage {
      position: relative;
      width: 1280px;
      height: 800px;
      overflow: hidden;
    }

    .wash {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 90% 70% at 78% 18%, var(--bg2) 0%, transparent 58%),
        radial-gradient(ellipse 70% 80% at 8% 92%, var(--bg1) 0%, transparent 55%),
        linear-gradient(165deg, var(--bg0) 0%, var(--bg1) 48%, var(--bg0) 100%);
      transition: background 700ms ease;
    }

    .wash::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
      opacity: 0.55;
      pointer-events: none;
      mix-blend-mode: overlay;
    }

    .frame {
      position: relative;
      z-index: 1;
      height: 800px;
      padding: 48px 64px 40px;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 8px;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding-bottom: 22px;
      border-bottom: 1px solid var(--line);
    }

    .loc {
      font-size: 13px;
      letter-spacing: 0.42em;
      text-transform: uppercase;
      font-weight: 600;
    }

    .date {
      font-family: Georgia, "Iowan Old Style", Palatino, serif;
      font-style: italic;
      font-size: 18px;
      color: var(--muted);
      letter-spacing: 0.02em;
    }

    .hero {
      display: grid;
      grid-template-columns: 1fr 340px;
      align-items: center;
      min-height: 0;
    }

    .temps {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-top: 8px;
    }

    .hero-temp {
      font-size: 168px;
      font-weight: 200;
      line-height: 0.86;
      letter-spacing: -0.045em;
      font-variant-numeric: tabular-nums;
    }

    .hero-temp sup {
      font-size: 42px;
      font-weight: 300;
      letter-spacing: 0;
      position: relative;
      top: -0.72em;
      margin-left: 6px;
      color: var(--accent);
    }

    .condition {
      margin-top: 18px;
      font-size: 26px;
      font-weight: 400;
      letter-spacing: 0.04em;
      color: var(--ink);
    }

    .range {
      display: flex;
      gap: 36px;
      margin-top: 28px;
    }

    .stat {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .stat-label {
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600;
    }

    .stat-value {
      font-size: 28px;
      font-weight: 300;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
    }

    .glyph {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: var(--ink);
    }

    .glyph svg {
      width: 268px;
      height: 268px;
      overflow: visible;
    }

    .hourly {
      border-top: 1px solid var(--line);
      padding-top: 22px;
    }

    .hourly-label {
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600;
      margin-bottom: 10px;
    }

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

    .chart-wrap svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .dot {
      position: absolute;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--ink);
      opacity: 0.4;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .dot.extreme {
      width: 9px;
      height: 9px;
      background: var(--accent);
      opacity: 1;
      box-shadow: 0 0 12px var(--accent);
    }

    .ticks {
      display: grid;
      margin-top: 8px;
    }

    .tick {
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    .tick .t {
      font-size: 13px;
      font-weight: 500;
      color: var(--ink);
    }

    .tick .h {
      margin-top: 4px;
      font-size: 10px;
      letter-spacing: 0.06em;
      color: var(--muted);
    }

    .tick.is-extreme .t { color: var(--accent); }

    .status {
      display: flex;
      align-items: center;
      min-height: 420px;
      font-size: 28px;
      font-weight: 300;
      letter-spacing: 0.02em;
      color: var(--muted);
    }

    .status.error { color: var(--danger); }

    .fade-up {
      animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .d1 { animation-delay: 0.05s; }
    .d2 { animation-delay: 0.16s; }
    .d3 { animation-delay: 0.28s; }

    @keyframes rise {
      from { opacity: 0; transform: translateY(14px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes draw {
      to { stroke-dashoffset: 0; }
    }

    @keyframes fillin {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes spin-slow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .sun-rays {
      transform-origin: 32px 32px;
      animation: spin-slow 48s linear infinite;
    }
  </style>
</head>
<body>
  <div class="stage">
    <div class="wash" id="wash"></div>
    <div class="frame" id="app"></div>
  </div>
  <script>
    (function () {
      const params = new URLSearchParams(window.location.search);
      const lat = params.get("lat") || "52.52";
      const lon = params.get("lon") || "13.405";
      const name = params.get("name") || "Berlin";
      const todayUtc = new Date().toISOString().slice(0, 10);
      const date = params.get("date") || todayUtc;
      const app = document.getElementById("app");

      const WMO = {
        0: "Clear sky",
        1: "Mainly clear",
        2: "Partly cloudy",
        3: "Overcast",
        45: "Fog",
        48: "Rime fog",
        51: "Light drizzle",
        53: "Drizzle",
        55: "Dense drizzle",
        56: "Freezing drizzle",
        57: "Dense freezing drizzle",
        61: "Slight rain",
        63: "Rain",
        65: "Heavy rain",
        66: "Freezing rain",
        67: "Heavy freezing rain",
        71: "Slight snow",
        73: "Snow",
        75: "Heavy snow",
        77: "Snow grains",
        80: "Rain showers",
        81: "Rain showers",
        82: "Violent rain showers",
        85: "Snow showers",
        86: "Heavy snow showers",
        95: "Thunderstorm",
        96: "Thunderstorm with hail",
        99: "Heavy hailstorm"
      };

      function esc(s) {
        return String(s).replace(/[&<>"']/g, function (c) {
          return ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c];
        });
      }

      function groupOf(code) {
        if (code === 0) return "clear";
        if (code <= 2) return "fair";
        if (code === 3) return "overcast";
        if (code === 45 || code === 48) return "fog";
        if (code >= 51 && code <= 57) return "drizzle";
        if ((code >= 61 && code <= 67) || (code >= 80 && code <= 82)) return "rain";
        if ((code >= 71 && code <= 77) || code === 85 || code === 86) return "snow";
        if (code >= 95) return "storm";
        return "overcast";
      }

      const THEMES = {
        clear:   { bg0: "#140f0a", bg1: "#3a2a18", bg2: "#c47832", accent: "#f0c57a" },
        fair:    { bg0: "#10141c", bg1: "#243044", bg2: "#d4a05a", accent: "#e8c48a" },
        overcast:{ bg0: "#12151a", bg1: "#2a3340", bg2: "#6d7c8d", accent: "#c5d0dc" },
        fog:     { bg0: "#161412", bg1: "#3a3834", bg2: "#8a8478", accent: "#ddd4c4" },
        drizzle: { bg0: "#0e1418", bg1: "#1c3038", bg2: "#4d7a86", accent: "#9fd0d8" },
        rain:    { bg0: "#0b1016", bg1: "#163044", bg2: "#2f6f8e", accent: "#8ec8e6" },
        snow:    { bg0: "#12161c", bg1: "#2c3a4c", bg2: "#8aa0b8", accent: "#e8f2fa" },
        storm:   { bg0: "#0a0a12", bg1: "#1c1630", bg2: "#6b4aa0", accent: "#d4b8ff" }
      };

      function applyTheme(group) {
        const t = THEMES[group] || THEMES.overcast;
        const r = document.documentElement.style;
        r.setProperty("--bg0", t.bg0);
        r.setProperty("--bg1", t.bg1);
        r.setProperty("--bg2", t.bg2);
        r.setProperty("--accent", t.accent);
      }

      function iconSvg(group) {
        const stroke = "currentColor";
        const common = 'fill="none" stroke="' + stroke + '" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"';
        const icons = {
          clear: '<g class="sun-rays">' +
            '<line x1="32" y1="6" x2="32" y2="13"/>' +
            '<line x1="32" y1="51" x2="32" y2="58"/>' +
            '<line x1="6" y1="32" x2="13" y2="32"/>' +
            '<line x1="51" y1="32" x2="58" y2="32"/>' +
            '<line x1="13.5" y1="13.5" x2="18.4" y2="18.4"/>' +
            '<line x1="45.6" y1="45.6" x2="50.5" y2="50.5"/>' +
            '<line x1="13.5" y1="50.5" x2="18.4" y2="45.6"/>' +
            '<line x1="45.6" y1="18.4" x2="50.5" y2="13.5"/>' +
            '</g>' +
            '<circle cx="32" cy="32" r="12" fill="var(--accent-soft)" stroke="var(--accent)" stroke-width="1.8"/>',
          fair: '<circle cx="26" cy="26" r="9" fill="var(--accent-soft)" stroke="var(--accent)" stroke-width="1.7"/>' +
            '<path d="M18 44.5h22.5a8 8 0 0 0 1.2-15.9 11.2 11.2 0 0 0-21.2 3.4A7.3 7.3 0 0 0 18 44.5z" ' + common + '/>',
          overcast: '<path d="M16 42.5h28a9 9 0 0 0 1.4-17.9 12.5 12.5 0 0 0-23.8 3.6A8.2 8.2 0 0 0 16 42.5z" ' + common + '/>' +
            '<path d="M20 31.5a11 11 0 0 1 20.2-3" ' + common + '/>',
          fog: '<path d="M18 28h26M14 34h32M18 40h26M16 46h22" ' + common + '/>',
          drizzle: '<path d="M16 30.5h26a8.2 8.2 0 0 0 1.2-16.3 11.4 11.4 0 0 0-21.6 3.2A7.4 7.4 0 0 0 16 30.5z" ' + common + '/>' +
            '<path d="M24 38v4M32 37v5M40 38v4" ' + common + '/>',
          rain: '<path d="M16 29h26a8.2 8.2 0 0 0 1.2-16.3 11.4 11.4 0 0 0-21.6 3.2A7.4 7.4 0 0 0 16 29z" ' + common + '/>' +
            '<path d="M22 36l-3 8M30 35l-3 9M38 36l-3 8M46 35l-2.5 7" ' + common + '/>',
          snow: '<path d="M16 28h26a8.2 8.2 0 0 0 1.2-16.3 11.4 11.4 0 0 0-21.6 3.2A7.4 7.4 0 0 0 16 28z" ' + common + '/>' +
            '<g ' + common + '>' +
            '<path d="M24 36v8M20.5 40h7"/><path d="M22 37.5l4 5M26 37.5l-4 5"/>' +
            '<path d="M36 35v8M32.5 39h7"/><path d="M34 36.5l4 5M38 36.5l-4 5"/>' +
            '</g>',
          storm: '<path d="M15 30h24.5a8 8 0 0 0 1.1-15.9 11.2 11.2 0 0 0-21.2 3.2A7.2 7.2 0 0 0 15 30z" ' + common + '/>' +
            '<path d="M34 30l-10 12h8l-4 12 14-16h-8l6-8z" fill="var(--accent)" stroke="var(--accent)" stroke-width="1.2" stroke-linejoin="round"/>'
        };
        return '<svg viewBox="0 0 64 64" aria-hidden="true">' + (icons[group] || icons.overcast) + '</svg>';
      }

      function formatDate(iso) {
        const p = iso.split("-").map(Number);
        if (p.length !== 3 || p.some(isNaN)) return iso;
        const d = new Date(Date.UTC(p[0], p[1] - 1, p[2]));
        const months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
        const days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
        return days[d.getUTCDay()] + ", " + p[2] + " " + months[p[1] - 1] + " " + p[0];
      }

      function headerHtml() {
        return '<header class="fade-up">' +
          '<div class="loc">' + esc(name) + '</div>' +
          '<div class="date">' + esc(formatDate(date)) + '</div>' +
          '</header>';
      }

      function smoothPath(pts) {
        if (!pts.length) return "";
        if (pts.length === 1) return "M " + pts[0].x + " " + pts[0].y;
        var d = "M " + pts[0].x + " " + pts[0].y;
        for (var i = 0; i < pts.length - 1; i++) {
          var p0 = pts[i === 0 ? 0 : i - 1];
          var p1 = pts[i];
          var p2 = pts[i + 1];
          var p3 = pts[i + 2] || p2;
          var c1x = p1.x + (p2.x - p0.x) / 6;
          var c1y = p1.y + (p2.y - p0.y) / 6;
          var c2x = p2.x - (p3.x - p1.x) / 6;
          var c2y = p2.y - (p3.y - p1.y) / 6;
          d += " C " + c1x + " " + c1y + ", " + c2x + " " + c2y + ", " + p2.x + " " + p2.y;
        }
        return d;
      }

      function renderError() {
        app.innerHTML = headerHtml() +
          '<div class="status error">Weather data could not be loaded.</div>' +
          '<div></div>';
      }

      function render(data) {
        var daily = data.daily || {};
        var hourly = data.hourly || {};
        var maxT = daily.temperature_2m_max && daily.temperature_2m_max[0];
        var minT = daily.temperature_2m_min && daily.temperature_2m_min[0];
        var code = daily.weather_code && daily.weather_code[0];
        var times = hourly.time || [];
        var temps = hourly.temperature_2m || [];

        if (maxT == null || minT == null || code == null || !times.length || !temps.length) {
          renderError();
          return;
        }

        code = Math.round(Number(code));
        var group = groupOf(code);
        applyTheme(group);

        var hours = [];
        for (var i = 0; i < times.length; i++) {
          if (String(times[i]).indexOf(date) === 0 && temps[i] != null && !isNaN(Number(temps[i]))) {
            hours.push({ hour: String(times[i]).slice(11, 13), temp: Number(temps[i]) });
          }
        }
        if (!hours.length) {
          renderError();
          return;
        }

        var hi = Math.round(Number(maxT));
        var lo = Math.round(Number(minT));
        var condition = WMO[code] || "Unknown conditions";

        var vals = hours.map(function (h) { return h.temp; });
        var loH = Math.min.apply(null, vals);
        var hiH = Math.max.apply(null, vals);
        var span = hiH - loH || 1;

        var pts = hours.map(function (h, idx) {
          return {
            x: idx + 0.5,
            y: 12 + (1 - (h.temp - loH) / span) * 88,
            temp: h.temp,
            hour: h.hour
          };
        });

        var line = smoothPath(pts);
        var area = line + " L " + pts[pts.length - 1].x + " 132 L " + pts[0].x + " 132 Z";
        var n = hours.length;
        var maxIdx = vals.indexOf(hiH);
        var minIdx = vals.indexOf(loH);

        var dots = pts.map(function (p, idx) {
          var extreme = idx === maxIdx || idx === minIdx;
          var left = ((idx + 0.5) / n) * 100;
          var top = (p.y / 132) * 100;
          return '<span class="dot' + (extreme ? " extreme" : "") + '" style="left:' + left + '%;top:' + top + '%"></span>';
        }).join("");

        var ticks = hours.map(function (h, idx) {
          var extreme = idx === maxIdx || idx === minIdx;
          return '<div class="tick' + (extreme ? " is-extreme" : "") + '">' +
            '<div class="t">' + Math.round(h.temp) + "°</div>" +
            '<div class="h">' + h.hour + "</div>" +
            "</div>";
        }).join("");

        app.innerHTML =
          headerHtml() +
          '<div class="hero">' +
            '<div class="temps fade-up d1">' +
              '<div class="hero-temp">' + hi + "<sup>°C</sup></div>" +
              '<div class="condition">' + esc(condition) + "</div>" +
              '<div class="range">' +
                '<div class="stat"><div class="stat-label">Maximum</div><div class="stat-value">' + hi + "°C</div></div>" +
                '<div class="stat"><div class="stat-label">Minimum</div><div class="stat-value">' + lo + "°C</div></div>" +
              "</div>" +
            "</div>" +
            '<div class="glyph fade-up d2">' + iconSvg(group) + "</div>" +
          "</div>" +
          '<section class="hourly fade-up d3">' +
            '<div class="hourly-label">Hourly temperature · °C · UTC</div>' +
            '<div class="chart-wrap">' +
              '<svg viewBox="0 0 ' + n + ' 132" preserveAspectRatio="none" aria-hidden="true">' +
                '<defs>' +
                  '<linearGradient id="area" x1="0" y1="0" x2="0" y2="1">' +
                    '<stop offset="0%" stop-color="var(--accent)" stop-opacity="0.35"/>' +
                    '<stop offset="100%" stop-color="var(--accent)" stop-opacity="0"/>' +
                  "</linearGradient>" +
                "</defs>" +
                '<path d="' + area + '" fill="url(#area)" style="animation: fillin 1.1s ease both"/>' +
                '<path d="' + line + '" fill="none" stroke="var(--accent)" stroke-width="2.4" vector-effect="non-scaling-stroke" pathLength="1" style="stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.35s ease forwards"/>' +
              "</svg>" +
              dots +
            "</div>" +
            '<div class="ticks" style="grid-template-columns:repeat(' + n + ',1fr)">' + ticks + "</div>" +
          "</section>";
      }

      app.innerHTML = headerHtml() + '<div class="status">Loading weather…</div><div></div>';

      var endpoint = date < todayUtc ? "/api/om/archive" : "/api/om/forecast";
      var qs = 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: date,
        end_date: date
      });

      fetch(endpoint + "?" + qs.toString())
        .then(function (res) {
          if (!res.ok) throw new Error("status");
          return res.json();
        })
        .then(render)
        .catch(renderError);
    })();
  </script>
</body>
</html>