claude-sonnet-5 @ high · cursor-xl

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, height=800">
<title>Weather</title>
<style>
  :root{
    --glass: rgba(255,255,255,0.14);
    --glass-strong: rgba(255,255,255,0.22);
    --glass-border: rgba(255,255,255,0.35);
    --text: #ffffff;
    --text-dim: rgba(255,255,255,0.72);
    --text-dimmer: rgba(255,255,255,0.5);
  }

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

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

  body{
    display:flex;
    align-items:center;
    justify-content:center;
    position: relative;
    background: linear-gradient(135deg, #4facfe 0%, #2563eb 45%, #1e3a8a 100%);
    background-size: 200% 200%;
    animation: gradientShift 18s ease infinite;
    transition: background 0.6s ease;
  }

  body.cat-clear{ background: linear-gradient(135deg, #56ccf2 0%, #4facfe 45%, #2f80ed 100%); }
  body.cat-clouds{ background: linear-gradient(135deg, #8e9eab 0%, #6b7d92 45%, #48566b 100%); }
  body.cat-fog{ background: linear-gradient(135deg, #a8b6c1 0%, #8b9aa8 45%, #64727f 100%); }
  body.cat-rain{ background: linear-gradient(135deg, #536976 0%, #3b5468 45%, #263544 100%); }
  body.cat-snow{ background: linear-gradient(135deg, #83a4d4 0%, #6a92c4 45%, #3f5b82 100%); }
  body.cat-storm{ background: linear-gradient(135deg, #4b4b5e 0%, #33334a 45%, #17172b 100%); }

  @keyframes gradientShift{
    0%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
    100%{ background-position: 0% 50%; }
  }

  .backdrop-glow{
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 18% 15%, rgba(255,255,255,0.22), transparent 40%),
      radial-gradient(circle at 85% 85%, rgba(255,255,255,0.10), transparent 45%);
    pointer-events:none;
  }

  .app{
    position:relative;
    width: 1280px;
    height: 800px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .state{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    color:var(--text);
  }

  .hidden{ display:none !important; }

  .spinner{
    width:46px;
    height:46px;
    border-radius:50%;
    border:4px solid rgba(255,255,255,0.25);
    border-top-color: rgba(255,255,255,0.95);
    animation: spin 0.9s linear infinite;
  }

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

  .state p{
    font-size:15px;
    letter-spacing:0.02em;
    color: var(--text-dim);
  }

  .error-state{
    max-width: 480px;
    text-align:center;
  }
  .error-icon{
    font-size:52px;
    line-height:1;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
  }
  .error-title{
    font-size:22px;
    font-weight:700;
    margin-top:4px;
  }
  .error-detail{
    font-size:13px;
    color: var(--text-dimmer);
    margin-top:2px;
    word-break: break-word;
  }

  .card{
    width: 1120px;
    height: 700px;
    border-radius: 32px;
    background: linear-gradient(160deg, var(--glass-strong), var(--glass));
    border: 1px solid var(--glass-border);
    box-shadow: 0 30px 80px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    padding: 48px 56px;
    display:flex;
    flex-direction:column;
    gap: 30px;
    position:relative;
    overflow:hidden;
  }

  .card::before{
    content:"";
    position:absolute;
    top:-120px; right:-120px;
    width:320px; height:320px;
    background: radial-gradient(circle, rgba(255,255,255,0.30), transparent 70%);
    pointer-events:none;
  }

  .card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    position:relative;
    z-index:1;
  }

  .location-name{
    font-size:34px;
    font-weight:700;
    letter-spacing:-0.01em;
  }

  .date-label{
    margin-top:6px;
    font-size:16px;
    color: var(--text-dim);
    font-weight:500;
  }

  .condition-badge{
    display:flex;
    align-items:center;
    gap:10px;
    background: rgba(255,255,255,0.16);
    border:1px solid var(--glass-border);
    border-radius:999px;
    padding: 10px 20px;
    font-size:15px;
    font-weight:600;
    white-space:nowrap;
  }
  .condition-badge .emoji{ font-size:20px; }

  .card-main{
    display:flex;
    align-items:center;
    gap:40px;
    position:relative;
    z-index:1;
  }

  .icon-large{
    font-size:120px;
    line-height:1;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,0.25));
  }

  .temps{
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .current-range{
    display:flex;
    align-items:baseline;
    gap:14px;
  }

  .current-range .max{
    font-size:96px;
    font-weight:700;
    letter-spacing:-0.02em;
  }
  .current-range .sep{
    font-size:40px;
    color: var(--text-dimmer);
    font-weight:300;
  }
  .current-range .min{
    font-size:48px;
    font-weight:500;
    color: var(--text-dim);
  }

  .range-caption{
    display:flex;
    gap:22px;
    font-size:14px;
    color: var(--text-dim);
  }
  .range-caption span b{
    color: var(--text);
    font-weight:700;
  }
  .range-caption .dot-max{ color:#ffd166; }
  .range-caption .dot-min{ color:#8ecdf7; }

  .divider{
    height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  }

  .hourly-section{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:16px;
    min-height:0;
    position:relative;
    z-index:1;
  }

  .hourly-title{
    font-size:15px;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color: var(--text-dim);
  }

  .hourly-row{
    flex:1;
    display:flex;
    align-items:stretch;
    gap:4px;
  }

  .hour-col{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    padding-top:4px;
    border-radius:10px;
    transition: background 0.15s ease;
  }
  .hour-col:hover{
    background: rgba(255,255,255,0.10);
  }

  .hour-temp{
    font-size:12px;
    font-weight:600;
    color: var(--text);
    white-space:nowrap;
  }

  .hour-bar-track{
    width:9px;
    flex:1;
    max-height:160px;
    background: rgba(255,255,255,0.14);
    border-radius:5px;
    position:relative;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
  }

  .hour-bar-fill{
    width:100%;
    border-radius:5px;
    background: linear-gradient(180deg, #ffe29a, #ff9a56);
    box-shadow: 0 0 10px rgba(255,180,90,0.5);
  }

  .hour-time{
    font-size:10.5px;
    color: var(--text-dimmer);
    font-weight:600;
    white-space:nowrap;
  }

  ::selection{ background: rgba(255,255,255,0.35); }
</style>
</head>
<body>
  <div class="backdrop-glow"></div>
  <div class="app">
    <div id="loading" class="state">
      <div class="spinner"></div>
      <p>Loading weather…</p>
    </div>

    <div id="error" class="state error-state hidden">
      <div class="error-icon">⚠️</div>
      <div class="error-title">Unable to load weather data</div>
      <div class="error-detail" id="errorDetail"></div>
    </div>

    <div id="card" class="card hidden">
      <div class="card-header">
        <div>
          <div class="location-name" id="locationName">—</div>
          <div class="date-label" id="dateLabel">—</div>
        </div>
        <div class="condition-badge">
          <span class="emoji" id="badgeEmoji">—</span>
          <span id="badgeLabel">—</span>
        </div>
      </div>

      <div class="card-main">
        <div class="icon-large" id="iconLarge">—</div>
        <div class="temps">
          <div class="current-range">
            <span class="max" id="maxTemp">—</span>
            <span class="sep">/</span>
            <span class="min" id="minTemp">—</span>
          </div>
          <div class="range-caption">
            <span class="dot-max">● High</span>
            <span class="dot-min">● Low</span>
          </div>
        </div>
      </div>

      <div class="divider"></div>

      <div class="hourly-section">
        <div class="hourly-title">Hourly Temperature</div>
        <div class="hourly-row" id="hourlyRow"></div>
      </div>
    </div>
  </div>

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

  var WEATHER_CODES = {
    0:  { label: "Clear sky",            emoji: "☀️",  category: "clear" },
    1:  { label: "Mainly clear",         emoji: "🌤️", category: "clear" },
    2:  { label: "Partly cloudy",        emoji: "⛅",  category: "clouds" },
    3:  { label: "Overcast",             emoji: "☁️",  category: "clouds" },
    45: { label: "Fog",                  emoji: "🌫️", category: "fog" },
    48: { label: "Rime fog",             emoji: "🌫️", category: "fog" },
    51: { label: "Light drizzle",        emoji: "🌦️", category: "rain" },
    53: { label: "Drizzle",              emoji: "🌦️", category: "rain" },
    55: { label: "Dense drizzle",        emoji: "🌧️", category: "rain" },
    56: { label: "Freezing drizzle",     emoji: "🌧️", category: "rain" },
    57: { label: "Dense freezing drizzle", emoji: "🌧️", category: "rain" },
    61: { label: "Slight rain",          emoji: "🌦️", category: "rain" },
    63: { label: "Rain",                 emoji: "🌧️", category: "rain" },
    65: { label: "Heavy rain",           emoji: "🌧️", category: "rain" },
    66: { label: "Freezing rain",        emoji: "🌧️", category: "rain" },
    67: { label: "Heavy freezing rain",  emoji: "🌧️", category: "rain" },
    71: { label: "Slight snow",          emoji: "🌨️", category: "snow" },
    73: { label: "Snow fall",            emoji: "❄️",  category: "snow" },
    75: { label: "Heavy snow fall",      emoji: "❄️",  category: "snow" },
    77: { label: "Snow grains",          emoji: "🌨️", category: "snow" },
    80: { label: "Slight rain showers",  emoji: "🌦️", category: "rain" },
    81: { label: "Rain showers",         emoji: "🌧️", category: "rain" },
    82: { label: "Violent rain showers", emoji: "⛈️",  category: "rain" },
    85: { label: "Slight snow showers",  emoji: "🌨️", category: "snow" },
    86: { label: "Heavy snow showers",   emoji: "❄️",  category: "snow" },
    95: { label: "Thunderstorm",         emoji: "⛈️",  category: "storm" },
    96: { label: "Thunderstorm w/ hail", emoji: "⛈️",  category: "storm" },
    99: { label: "Thunderstorm w/ heavy hail", emoji: "⛈️", category: "storm" }
  };

  function getWeatherInfo(code){
    return WEATHER_CODES[code] || { label: "Unknown", emoji: "❔", category: "clouds" };
  }

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

  function getParams(){
    var qp = new URLSearchParams(window.location.search);
    var lat = parseFloat(qp.get("lat"));
    var lon = parseFloat(qp.get("lon"));
    var name = qp.get("name");
    var date = qp.get("date");

    if (isNaN(lat)) lat = 52.52;
    if (isNaN(lon)) lon = 13.405;
    if (!name) name = "Berlin";
    if (!date || !/^\d{4}-\d{2}-\d{2}$/.test(date)) date = todayUTC();

    return { lat: lat, lon: lon, name: name, date: date };
  }

  function formatDateLabel(dateStr){
    var d = new Date(dateStr + "T00:00:00Z");
    return d.toLocaleDateString("en-US", {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
      timeZone: "UTC"
    });
  }

  function formatHour(isoTime){
    var h = parseInt(isoTime.slice(11, 13), 10);
    if (h === 0) return "12a";
    if (h === 12) return "12p";
    return h > 12 ? (h - 12) + "p" : h + "a";
  }

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

  function showState(id){
    ["loading", "error", "card"].forEach(function(s){
      document.getElementById(s).classList.toggle("hidden", s !== id);
    });
  }

  function setBodyCategory(category){
    var body = document.body;
    ["cat-clear","cat-clouds","cat-fog","cat-rain","cat-snow","cat-storm"].forEach(function(c){
      body.classList.remove(c);
    });
    body.classList.add("cat-" + category);
  }

  function renderHourly(times, temps){
    var row = document.getElementById("hourlyRow");
    row.innerHTML = "";

    if (!times || !times.length){
      return;
    }

    var min = Math.min.apply(null, temps);
    var max = Math.max.apply(null, temps);
    var range = (max - min) || 1;

    for (var i = 0; i < times.length; i++){
      var t = temps[i];
      var pct = Math.max(0.06, (t - min) / range);

      var col = document.createElement("div");
      col.className = "hour-col";
      col.title = formatHour(times[i]) + " — " + roundTemp(t) + "°C";

      var tempEl = document.createElement("div");
      tempEl.className = "hour-temp";
      tempEl.textContent = Math.round(t) + "°";

      var track = document.createElement("div");
      track.className = "hour-bar-track";
      var fill = document.createElement("div");
      fill.className = "hour-bar-fill";
      fill.style.height = (pct * 100) + "%";
      track.appendChild(fill);

      var timeEl = document.createElement("div");
      timeEl.className = "hour-time";
      timeEl.textContent = formatHour(times[i]);

      col.appendChild(tempEl);
      col.appendChild(track);
      col.appendChild(timeEl);
      row.appendChild(col);
    }
  }

  function render(params, data){
    var daily = data.daily;
    var hourly = data.hourly;

    if (!daily || !daily.temperature_2m_max || !daily.temperature_2m_max.length ||
        !daily.temperature_2m_min || !daily.weather_code ||
        !hourly || !hourly.time || !hourly.temperature_2m){
      throw new Error("Response missing expected daily/hourly fields.");
    }

    var maxT = daily.temperature_2m_max[0];
    var minT = daily.temperature_2m_min[0];
    var code = daily.weather_code[0];
    var info = getWeatherInfo(code);

    setBodyCategory(info.category);

    document.getElementById("locationName").textContent = params.name;
    document.getElementById("dateLabel").textContent = formatDateLabel(params.date);
    document.getElementById("badgeEmoji").textContent = info.emoji;
    document.getElementById("badgeLabel").textContent = info.label;
    document.getElementById("iconLarge").textContent = info.emoji;
    document.getElementById("maxTemp").textContent = Math.round(maxT) + "°";
    document.getElementById("minTemp").textContent = Math.round(minT) + "°";

    renderHourly(hourly.time, hourly.temperature_2m);

    showState("card");
  }

  function main(){
    var params = getParams();
    var useArchive = params.date < todayUTC();
    var base = useArchive ? "/api/om/archive" : "/api/om/forecast";

    var url = base +
      "?latitude=" + encodeURIComponent(params.lat) +
      "&longitude=" + encodeURIComponent(params.lon) +
      "&daily=temperature_2m_max,temperature_2m_min,weather_code" +
      "&hourly=temperature_2m" +
      "&timezone=UTC" +
      "&temperature_unit=celsius" +
      "&start_date=" + encodeURIComponent(params.date) +
      "&end_date=" + encodeURIComponent(params.date);

    showState("loading");

    fetch(url)
      .then(function(res){
        if (!res.ok){
          throw new Error("Request failed with status " + res.status);
        }
        return res.json();
      })
      .then(function(data){
        render(params, data);
      })
      .catch(function(err){
        document.getElementById("errorDetail").textContent = (err && err.message) ? err.message : String(err);
        showState("error");
      });
  }

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