claude-opus-4-6-thinking @ max · cursor-xl

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

body {
  min-height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: #f0f0f0;
  padding: 40px;
}

.card {
  width: 720px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  padding: 48px;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

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

.location {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.date {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 6px;
  font-weight: 400;
}

.condition-badge {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.condition-icon {
  font-size: 18px;
}

.temps-main {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.temp-high {
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 1;
}

.temp-high .unit {
  font-size: 28px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  vertical-align: super;
  margin-left: 2px;
}

.temp-low {
  font-size: 32px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: -1px;
}

.temp-labels {
  display: flex;
  gap: 24px;
  margin-top: 8px;
}

.temp-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.35);
}

.hourly-section h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 20px;
  font-weight: 500;
}

.hourly-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 140px;
  padding-top: 24px;
  position: relative;
}

.hour-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}

.hour-bar .bar {
  width: 100%;
  max-width: 22px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(99, 179, 237, 0.8) 0%, rgba(66, 133, 244, 0.4) 100%);
  transition: height 0.3s ease;
  min-height: 4px;
}

.hour-bar .temp-val {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  white-space: nowrap;
}

.hour-bar .hour-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: auto;
  padding-top: 8px;
}

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

.error-state .error-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.error-state p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
}
</style>
</head>
<body>
<div class="card" id="card">
  <div class="loading" style="text-align:center;padding:60px 20px;color:rgba(255,255,255,0.5)">Loading weather data&hellip;</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 today = new Date().toISOString().slice(0, 10);
  const date = params.get('date') || today;

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

  function isPast(dateStr) {
    return dateStr < today;
  }

  const endpoint = isPast(date) ? '/api/om/archive' : '/api/om/forecast';
  const url = endpoint + '?' + 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
  }).toString();

  fetch(url)
    .then(function(r) {
      if (!r.ok) throw new Error('HTTP ' + r.status);
      return r.json();
    })
    .then(function(data) {
      var daily = data.daily;
      var hourly = data.hourly;
      if (!daily || !hourly) throw new Error('Invalid data');

      var tMax = daily.temperature_2m_max[0];
      var tMin = daily.temperature_2m_min[0];
      var code = daily.weather_code[0];
      var temps = hourly.temperature_2m;
      var condition = WMO_CODES[code] || ['Unknown', '🌡️'];

      var dateObj = new Date(date + 'T00:00:00Z');
      var formatted = dateObj.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' });

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

      var barsHtml = '';
      for (var i = 0; i < 24; i++) {
        var t = temps[i];
        var pct = ((t - minT) / range) * 80 + 20;
        var label = i === 0 ? '12am' : i < 12 ? i + 'am' : i === 12 ? '12pm' : (i - 12) + 'pm';
        var showLabel = (i % 3 === 0);
        barsHtml += '<div class="hour-bar">'
          + '<span class="temp-val">' + Math.round(t) + '°</span>'
          + '<div class="bar" style="height:' + pct + '%"></div>'
          + '<span class="hour-label">' + (showLabel ? label : '') + '</span>'
          + '</div>';
      }

      document.getElementById('card').innerHTML =
        '<div class="header">'
          + '<div><div class="location">' + escHtml(name) + '</div>'
          + '<div class="date">' + formatted + '</div></div>'
          + '<div class="condition-badge"><span class="condition-icon">' + condition[1] + '</span>' + condition[0] + '</div>'
        + '</div>'
        + '<div class="temps-main">'
          + '<div><span class="temp-high">' + Math.round(tMax) + '<span class="unit">°C</span></span>'
          + '<div class="temp-labels"><span class="temp-label">High</span></div></div>'
          + '<div><span class="temp-low">' + Math.round(tMin) + '°</span>'
          + '<div class="temp-labels"><span class="temp-label">Low</span></div></div>'
        + '</div>'
        + '<div class="hourly-section">'
          + '<h3>Hourly Temperature</h3>'
          + '<div class="hourly-chart">' + barsHtml + '</div>'
        + '</div>';
    })
    .catch(function() {
      document.getElementById('card').innerHTML =
        '<div class="error-state">'
          + '<div class="error-icon">⚠️</div>'
          + '<p>Unable to load weather data. Please try again later.</p>'
        + '</div>';
    });

  function escHtml(s) {
    var d = document.createElement('div');
    d.appendChild(document.createTextNode(s));
    return d.innerHTML;
  }
})();
</script>
</body>
</html>