composer-2.5 · cursor-xl

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=1280, height=800">
  <title>Weather Card</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg-deep: #0c1222;
      --bg-mid: #162035;
      --card-bg: rgba(255, 255, 255, 0.07);
      --card-border: rgba(255, 255, 255, 0.12);
      --text-primary: #f4f7fb;
      --text-secondary: rgba(244, 247, 251, 0.65);
      --text-muted: rgba(244, 247, 251, 0.4);
      --accent: #5eb8ff;
      --accent-warm: #ffb347;
      --accent-cold: #7ec8ff;
      --shadow: 0 32px 64px rgba(0, 0, 0, 0.45);
      --radius: 28px;
    }

    html, body {
      width: 1280px;
      height: 800px;
      overflow: hidden;
      font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: var(--text-primary);
      background: var(--bg-deep);
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .sky {
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(94, 184, 255, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 80%, rgba(255, 140, 80, 0.1) 0%, transparent 55%),
        linear-gradient(165deg, var(--bg-deep) 0%, var(--bg-mid) 50%, #0e1a2e 100%);
      transition: background 1.2s ease;
      z-index: 0;
    }

    .sky.clear {
      background:
        radial-gradient(ellipse 90% 70% at 50% -10%, rgba(255, 210, 100, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 80% 90%, rgba(94, 184, 255, 0.12) 0%, transparent 50%),
        linear-gradient(165deg, #0a1628 0%, #142240 50%, #0c1a30 100%);
    }

    .sky.cloudy {
      background:
        radial-gradient(ellipse 70% 50% at 50% 20%, rgba(180, 195, 220, 0.12) 0%, transparent 60%),
        linear-gradient(165deg, #101828 0%, #1a2540 50%, #121c30 100%);
    }

    .sky.rain {
      background:
        radial-gradient(ellipse 80% 60% at 30% 0%, rgba(80, 120, 180, 0.2) 0%, transparent 55%),
        linear-gradient(165deg, #0a1220 0%, #152035 50%, #0d1525 100%);
    }

    .sky.snow {
      background:
        radial-gradient(ellipse 70% 55% at 60% 10%, rgba(200, 220, 255, 0.15) 0%, transparent 55%),
        linear-gradient(165deg, #0e1525 0%, #1a2840 50%, #101828 100%);
    }

    .sky.fog {
      background:
        radial-gradient(ellipse 100% 80% at 50% 50%, rgba(160, 175, 195, 0.1) 0%, transparent 70%),
        linear-gradient(165deg, #141c28 0%, #1e2838 50%, #161e2c 100%);
    }

    .sky.storm {
      background:
        radial-gradient(ellipse 60% 40% at 70% 20%, rgba(120, 80, 200, 0.15) 0%, transparent 55%),
        linear-gradient(165deg, #080e18 0%, #121a2a 50%, #0a1018 100%);
    }

    .card {
      position: relative;
      z-index: 1;
      width: 720px;
      padding: 48px 52px 44px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: var(--radius);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      box-shadow: var(--shadow);
    }

    .card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: var(--radius);
      background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%);
      pointer-events: none;
    }

    .header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 36px;
    }

    .location-block { flex: 1; }

    .location-name {
      font-size: 32px;
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin-bottom: 6px;
    }

    .date-label {
      font-size: 15px;
      font-weight: 500;
      color: var(--text-secondary);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .weather-icon-wrap {
      width: 88px;
      height: 88px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .weather-icon-wrap svg {
      width: 80px;
      height: 80px;
      filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
    }

    .condition {
      font-size: 20px;
      font-weight: 500;
      color: var(--text-secondary);
      margin-bottom: 28px;
      letter-spacing: -0.01em;
    }

    .temps {
      display: flex;
      align-items: baseline;
      gap: 32px;
      margin-bottom: 40px;
    }

    .temp-main {
      display: flex;
      align-items: flex-start;
      gap: 2px;
    }

    .temp-max {
      font-size: 72px;
      font-weight: 200;
      letter-spacing: -0.04em;
      line-height: 1;
      background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,0.75));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .temp-unit {
      font-size: 28px;
      font-weight: 300;
      color: var(--text-secondary);
      margin-top: 10px;
    }

    .temp-range {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-top: 8px;
    }

    .temp-range-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 16px;
      font-weight: 500;
      color: var(--text-secondary);
    }

    .temp-range-item .label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      width: 28px;
    }

    .temp-range-item .value {
      font-variant-numeric: tabular-nums;
      min-width: 48px;
    }

    .temp-range-item.high .value { color: var(--accent-warm); }
    .temp-range-item.low .value { color: var(--accent-cold); }

    .divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--card-border), transparent);
      margin-bottom: 32px;
    }

    .hourly-section { }

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

    .hourly-chart {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 4px;
      height: 140px;
      position: relative;
    }

    .hourly-bar-group {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
      justify-content: flex-end;
      min-width: 0;
    }

    .hourly-temp {
      font-size: 11px;
      font-weight: 500;
      color: var(--text-secondary);
      margin-bottom: 6px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .hourly-bar-track {
      width: 100%;
      max-width: 28px;
      flex: 1;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .hourly-bar {
      width: 8px;
      border-radius: 4px 4px 2px 2px;
      background: linear-gradient(180deg, var(--accent) 0%, rgba(94, 184, 255, 0.35) 100%);
      min-height: 4px;
      transition: height 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
    }

    .hourly-hour {
      font-size: 10px;
      font-weight: 500;
      color: var(--text-muted);
      margin-top: 8px;
      font-variant-numeric: tabular-nums;
    }

    .error-state {
      text-align: center;
      padding: 60px 40px;
    }

    .error-state h2 {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 12px;
      color: #ff8a8a;
    }

    .error-state p {
      font-size: 15px;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    .loading {
      text-align: center;
      padding: 80px 40px;
    }

    .loading-spinner {
      width: 40px;
      height: 40px;
      border: 2px solid rgba(255,255,255,0.1);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin: 0 auto 20px;
    }

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

    .loading p {
      font-size: 14px;
      color: var(--text-muted);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .coords {
      position: fixed;
      bottom: 24px;
      right: 32px;
      font-size: 11px;
      color: var(--text-muted);
      font-variant-numeric: tabular-nums;
      z-index: 2;
      letter-spacing: 0.02em;
    }
  </style>
</head>
<body>
  <div class="sky" id="sky"></div>
  <div class="card" id="card">
    <div class="loading" id="loading">
      <div class="loading-spinner"></div>
      <p>Loading weather data</p>
    </div>
  </div>
  <div class="coords" id="coords"></div>

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

    function getParams() {
      const p = new URLSearchParams(location.search);
      const today = new Date().toISOString().slice(0, 10);
      return {
        lat: parseFloat(p.get("lat")) || 52.52,
        lon: parseFloat(p.get("lon")) || 13.405,
        name: p.get("name") || "Berlin",
        date: p.get("date") || today
      };
    }

    function todayUTC() {
      return new Date().toISOString().slice(0, 10);
    }

    function formatDate(iso) {
      const [y, m, d] = iso.split("-").map(Number);
      const dt = new Date(Date.UTC(y, m - 1, d));
      return dt.toLocaleDateString("en-US", {
        weekday: "long",
        year: "numeric",
        month: "long",
        day: "numeric",
        timeZone: "UTC"
      });
    }

    function weatherInfo(code) {
      return WMO[code] || { label: "Unknown", mood: "cloudy" };
    }

    function iconSVG(code) {
      const c = weatherInfo(code).mood;
      const sun = `<circle cx="40" cy="40" r="16" fill="#FFD166" opacity="0.95"/>
        <g stroke="#FFD166" stroke-width="2.5" stroke-linecap="round" opacity="0.8">
          <line x1="40" y1="14" x2="40" y2="20"/><line x1="40" y1="60" x2="40" y2="66"/>
          <line x1="14" y1="40" x2="20" y2="40"/><line x1="60" y1="40" x2="66" y2="40"/>
          <line x1="21.6" y1="21.6" x2="26.1" y2="26.1"/><line x1="53.9" y1="53.9" x2="58.4" y2="58.4"/>
          <line x1="21.6" y1="58.4" x2="26.1" y2="53.9"/><line x1="53.9" y1="26.1" x2="58.4" y2="21.6"/>
        </g>`;
      const cloud = `<ellipse cx="38" cy="48" rx="22" ry="14" fill="rgba(200,210,230,0.85)"/>
        <ellipse cx="52" cy="44" rx="18" ry="13" fill="rgba(220,228,240,0.9)"/>
        <ellipse cx="28" cy="46" rx="14" ry="11" fill="rgba(210,218,235,0.8)"/>`;
      const rain = cloud + `<g stroke="#6BA4D4" stroke-width="2" stroke-linecap="round" opacity="0.7">
        <line x1="30" y1="62" x2="27" y2="72"/><line x1="40" y1="64" x2="37" y2="74"/>
        <line x1="50" y1="62" x2="47" y2="72"/><line x1="58" y1="64" x2="55" y2="74"/>
      </g>`;
      const snow = cloud + `<g fill="#C8E0FF" opacity="0.85">
        <circle cx="30" cy="68" r="2.5"/><circle cx="42" cy="72" r="2.5"/>
        <circle cx="54" cy="68" r="2.5"/><circle cx="48" cy="76" r="2"/>
      </g>`;
      const fog = `<g opacity="0.75">
        <line x1="16" y1="36" x2="64" y2="36" stroke="rgba(200,210,225,0.7)" stroke-width="3" stroke-linecap="round"/>
        <line x1="20" y1="46" x2="60" y2="46" stroke="rgba(200,210,225,0.55)" stroke-width="3" stroke-linecap="round"/>
        <line x1="18" y1="56" x2="62" y2="56" stroke="rgba(200,210,225,0.4)" stroke-width="3" stroke-linecap="round"/>
      </g>`;
      const storm = cloud + `<polygon points="44,58 36,72 42,72 38,84 52,68 46,68 50,58" fill="#FFD166" opacity="0.9"/>`;

      let inner;
      if (c === "clear") inner = sun;
      else if (c === "cloudy") inner = sun.replace(/opacity="0.95"/, 'opacity="0.5"') + cloud;
      else if (c === "rain") inner = rain;
      else if (c === "snow") inner = snow;
      else if (c === "fog") inner = fog;
      else if (c === "storm") inner = storm;
      else inner = cloud;

      return `<svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">${inner}</svg>`;
    }

    function round1(n) {
      return Math.round(n * 10) / 10;
    }

    function buildURL(params) {
      const q = new URLSearchParams({
        latitude: params.lat,
        longitude: params.lon,
        daily: "temperature_2m_max,temperature_2m_min,weather_code",
        hourly: "temperature_2m",
        timezone: "UTC",
        temperature_unit: "celsius",
        start_date: params.date,
        end_date: params.date
      });
      const endpoint = params.date < todayUTC() ? "/api/om/archive" : "/api/om/forecast";
      return endpoint + "?" + q.toString();
    }

    function filterHourly(data, date) {
      const times = data.hourly.time;
      const temps = data.hourly.temperature_2m;
      const result = [];
      for (let i = 0; i < times.length; i++) {
        if (times[i].startsWith(date)) {
          result.push({ hour: times[i].slice(11, 13), temp: temps[i] });
        }
      }
      return result;
    }

    function renderError(msg) {
      document.getElementById("card").innerHTML = `
        <div class="error-state">
          <h2>Unable to load weather data</h2>
          <p>${msg}</p>
        </div>`;
    }

    function render(data, params) {
      const code = data.daily.weather_code[0];
      const tMax = data.daily.temperature_2m_max[0];
      const tMin = data.daily.temperature_2m_min[0];
      const info = weatherInfo(code);
      const hourly = filterHourly(data, params.date);

      document.getElementById("sky").className = "sky " + info.mood;
      const latDir = params.lat >= 0 ? "N" : "S";
      const lonDir = params.lon >= 0 ? "E" : "W";
      document.getElementById("coords").textContent =
        `${round1(Math.abs(params.lat))}°${latDir}, ${round1(Math.abs(params.lon))}°${lonDir}`;

      const temps = hourly.map(h => h.temp).filter(t => t != null);
      const hMin = Math.min(...temps);
      const hMax = Math.max(...temps);
      const range = hMax - hMin || 1;

      const bars = hourly.map(h => {
        const pct = h.temp != null ? ((h.temp - hMin) / range) * 100 : 0;
        const hLabel = parseInt(h.hour, 10);
        const displayHour = hLabel === 0 ? "12a" : hLabel < 12 ? hLabel + "a" : hLabel === 12 ? "12p" : (hLabel - 12) + "p";
        return `<div class="hourly-bar-group">
          <div class="hourly-temp">${h.temp != null ? Math.round(h.temp) + "°" : "—"}</div>
          <div class="hourly-bar-track">
            <div class="hourly-bar" style="height: ${Math.max(pct, 8)}%"></div>
          </div>
          <div class="hourly-hour">${displayHour}</div>
        </div>`;
      }).join("");

      document.getElementById("card").innerHTML = `
        <div class="header">
          <div class="location-block">
            <div class="location-name">${escapeHTML(params.name)}</div>
            <div class="date-label">${formatDate(params.date)}</div>
          </div>
          <div class="weather-icon-wrap">${iconSVG(code)}</div>
        </div>
        <div class="condition">${escapeHTML(info.label)}</div>
        <div class="temps">
          <div class="temp-main">
            <span class="temp-max">${Math.round(tMax)}</span>
            <span class="temp-unit">°C</span>
          </div>
          <div class="temp-range">
            <div class="temp-range-item high">
              <span class="label">High</span>
              <span class="value">${round1(tMax)}°</span>
            </div>
            <div class="temp-range-item low">
              <span class="label">Low</span>
              <span class="value">${round1(tMin)}°</span>
            </div>
          </div>
        </div>
        <div class="divider"></div>
        <div class="hourly-section">
          <div class="hourly-title">Hourly Temperature</div>
          <div class="hourly-chart">${bars}</div>
        </div>`;
    }

    function escapeHTML(s) {
      const d = document.createElement("div");
      d.textContent = s;
      return d.innerHTML;
    }

    async function init() {
      const params = getParams();

      if (!/^\d{4}-\d{2}-\d{2}$/.test(params.date)) {
        renderError("Invalid date format. Use YYYY-MM-DD.");
        return;
      }

      try {
        const url = buildURL(params);
        const res = await fetch(url);
        if (!res.ok) throw new Error(`Server responded with ${res.status}`);
        const data = await res.json();

        if (!data.daily || !data.hourly ||
            data.daily.temperature_2m_max?.[0] == null ||
            data.daily.temperature_2m_min?.[0] == null) {
          throw new Error("Incomplete data received from the weather service.");
        }

        render(data, params);
      } catch (e) {
        renderError(e.message || "An unexpected error occurred while fetching weather data.");
      }
    }

    init();
  </script>
</body>
</html>