claude-opus-4-6-thinking @ high · 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; }

  html, body {
    width: 1280px;
    height: 800px;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
  }

  .card {
    width: 520px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 28px;
    padding: 40px 44px 36px;
    color: #fff;
    box-shadow: 0 8px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.1);
    position: relative;
    overflow: hidden;
  }

  .card::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -30%;
    width: 160%;
    height: 160%;
    background: radial-gradient(circle at 30% 20%, rgba(56,189,248,0.12) 0%, transparent 55%);
    pointer-events: none;
  }

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

  .location {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.2;
  }

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

  .condition-icon {
    font-size: 54px;
    line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
  }

  .temps {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 6px;
    position: relative;
  }

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

  .temp-max .unit {
    font-size: 28px;
    vertical-align: super;
    letter-spacing: 0;
    font-weight: 400;
    opacity: 0.6;
  }

  .temp-min-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 6px;
  }

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

  .temp-min {
    font-size: 28px;
    font-weight: 300;
    color: rgba(255,255,255,0.7);
    letter-spacing: -1px;
  }

  .condition-text {
    font-size: 15px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 32px;
    font-weight: 400;
  }

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

  .hourly-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.35);
    margin-bottom: 16px;
    font-weight: 600;
  }

  .hourly-scroll {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
  }

  .hourly-scroll::-webkit-scrollbar { height: 4px; }
  .hourly-scroll::-webkit-scrollbar-track { background: transparent; }
  .hourly-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

  .hour-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 46px;
    padding: 10px 4px;
    border-radius: 14px;
    transition: background 0.2s;
    flex-shrink: 0;
  }

  .hour-col:hover {
    background: rgba(255,255,255,0.07);
  }

  .hour-col.now {
    background: rgba(56,189,248,0.15);
    border: 1px solid rgba(56,189,248,0.25);
  }

  .hour-time {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 10px;
    font-weight: 500;
  }

  .hour-bar-wrap {
    width: 4px;
    height: 60px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    position: relative;
    margin-bottom: 10px;
    overflow: hidden;
  }

  .hour-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 2px;
    background: linear-gradient(to top, #38bdf8, #818cf8);
    transition: height 0.4s ease;
  }

  .hour-temp {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
  }

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

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

  .error-state .error-msg {
    font-size: 16px;
    color: rgba(255,255,255,0.6);
    line-height: 1.5;
  }

  .loading-state {
    text-align: center;
    padding: 80px 20px;
    position: relative;
  }

  .spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: rgba(56,189,248,0.7);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 18px;
  }

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

  .loading-text {
    font-size: 14px;
    color: rgba(255,255,255,0.4);
  }
</style>
</head>
<body>
<div class="card" id="card">
  <div class="loading-state" id="loading">
    <div class="spinner"></div>
    <div class="loading-text">Loading weather data…</div>
  </div>
</div>

<script>
(function() {
  var params = new URLSearchParams(window.location.search);
  var lat = parseFloat(params.get('lat')) || 52.52;
  var lon = parseFloat(params.get('lon')) || 13.405;
  var name = params.get('name') || 'Berlin';
  var dateParam = params.get('date');

  var today = new Date();
  var todayStr = today.getUTCFullYear() + '-' +
    String(today.getUTCMonth() + 1).padStart(2, '0') + '-' +
    String(today.getUTCDate()).padStart(2, '0');
  var date = dateParam && /^\d{4}-\d{2}-\d{2}$/.test(dateParam) ? dateParam : todayStr;

  var isFuture = date >= todayStr;
  var base = isFuture ? '/api/om/forecast' : '/api/om/archive';

  var url = base +
    '?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;

  var WMO = {
    0: ['Clear sky', '☀️'],
    1: ['Mainly clear', '🌤️'],
    2: ['Partly cloudy', '⛅'],
    3: ['Overcast', '☁️'],
    45: ['Fog', '🌫️'],
    48: ['Rime fog', '🌫️'],
    51: ['Light drizzle', '🌦️'],
    53: ['Moderate drizzle', '🌦️'],
    55: ['Dense drizzle', '🌧️'],
    56: ['Freezing drizzle', '🌧️'],
    57: ['Dense 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: ['Thunderstorm with heavy hail', '⛈️']
  };

  function formatDate(d) {
    var parts = d.split('-');
    var dt = new Date(Date.UTC(+parts[0], +parts[1] - 1, +parts[2]));
    var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    var months = ['January','February','March','April','May','June',
                  'July','August','September','October','November','December'];
    return days[dt.getUTCDay()] + ', ' + months[dt.getUTCMonth()] + ' ' + dt.getUTCDate() + ', ' + dt.getUTCFullYear();
  }

  function render(data) {
    var daily = data.daily;
    var hourly = data.hourly;
    var tMax = Math.round(daily.temperature_2m_max[0]);
    var tMin = Math.round(daily.temperature_2m_min[0]);
    var code = daily.weather_code[0];
    var cond = WMO[code] || ['Unknown', '❓'];

    var hours = hourly.temperature_2m;
    var allTemps = hours.slice();
    var minH = Math.min.apply(null, allTemps);
    var maxH = Math.max.apply(null, allTemps);
    var range = maxH - minH || 1;

    var hourlyHTML = '';
    for (var i = 0; i < 24; i++) {
      var t = Math.round(hours[i]);
      var pct = ((hours[i] - minH) / range) * 100;
      var barH = 10 + (pct / 100) * 50;
      var label = String(i).padStart(2, '0') + ':00';
      hourlyHTML +=
        '<div class="hour-col">' +
          '<span class="hour-time">' + label + '</span>' +
          '<div class="hour-bar-wrap"><div class="hour-bar" style="height:' + barH + 'px"></div></div>' +
          '<span class="hour-temp">' + t + '°</span>' +
        '</div>';
    }

    var card = document.getElementById('card');
    card.innerHTML =
      '<div class="header">' +
        '<div>' +
          '<div class="location">' + escapeHtml(name) + '</div>' +
          '<div class="date">' + formatDate(date) + '</div>' +
        '</div>' +
        '<div class="condition-icon">' + cond[1] + '</div>' +
      '</div>' +
      '<div class="temps">' +
        '<div class="temp-max">' + tMax + '<span class="unit">°C</span></div>' +
        '<div class="temp-min-block">' +
          '<span class="temp-min-label">Low</span>' +
          '<span class="temp-min">' + tMin + '°</span>' +
        '</div>' +
      '</div>' +
      '<div class="condition-text">' + cond[0] + '</div>' +
      '<div class="divider"></div>' +
      '<div class="hourly-label">Hourly Temperature</div>' +
      '<div class="hourly-scroll">' + hourlyHTML + '</div>';
  }

  function showError(msg) {
    var card = document.getElementById('card');
    card.innerHTML =
      '<div class="error-state">' +
        '<div class="error-icon">⚠️</div>' +
        '<div class="error-msg">' + escapeHtml(msg) + '</div>' +
      '</div>';
  }

  function escapeHtml(s) {
    var d = document.createElement('div');
    d.appendChild(document.createTextNode(s));
    return d.innerHTML;
  }

  fetch(url)
    .then(function(r) {
      if (!r.ok) throw new Error('Unable to load weather data (HTTP ' + r.status + ')');
      return r.json();
    })
    .then(function(data) {
      if (!data.daily || !data.hourly) throw new Error('Unexpected response format');
      render(data);
    })
    .catch(function(e) {
      showError(e.message || 'Could not load weather data. Please try again later.');
    });
})();
</script>
</body>
</html>