claude-sonnet-5-thinking @ low · cursor

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Weather Card</title>
<style>
  :root {
    --bg1: #4a6fd4;
    --bg2: #7ea8e8;
    --card-bg: rgba(255, 255, 255, 0.14);
    --card-border: rgba(255, 255, 255, 0.35);
    --text: #ffffff;
    --text-dim: rgba(255, 255, 255, 0.75);
    --text-faint: rgba(255, 255, 255, 0.55);
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    width: 1280px;
    height: 800px;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    color: var(--text);
    background: linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 55%, #a9cdf0 100%);
    position: relative;
  }

  .bg-decor {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }

  .bg-decor .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
  }

  .bg-decor .c1 { width: 500px; height: 500px; top: -180px; right: -120px; }
  .bg-decor .c2 { width: 340px; height: 340px; bottom: -140px; left: -80px; background: rgba(255,255,255,0.06); }
  .bg-decor .c3 { width: 220px; height: 220px; top: 60%; right: 10%; background: rgba(255,255,255,0.05); }

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

  .card {
    width: 880px;
    height: 620px;
    border-radius: 32px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 30px 60px rgba(20, 40, 90, 0.35), inset 0 1px 0 rgba(255,255,255,0.4);
    padding: 44px 52px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .location {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.15;
  }

  .date {
    margin-top: 6px;
    font-size: 16px;
    color: var(--text-dim);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .coords {
    text-align: right;
    font-size: 13px;
    color: var(--text-faint);
    line-height: 1.6;
    font-weight: 500;
  }

  .main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0 10px;
  }

  .temp-block {
    display: flex;
    align-items: center;
    gap: 26px;
  }

  .weather-icon {
    width: 128px;
    height: 128px;
    flex-shrink: 0;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.2));
  }

  .temp-main {
    font-size: 108px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -2px;
  }

  .temp-main .unit {
    font-size: 48px;
    font-weight: 300;
    vertical-align: super;
    margin-left: 4px;
    color: var(--text-dim);
  }

  .condition-block {
    text-align: right;
  }

  .condition-label {
    font-size: 24px;
    font-weight: 600;
  }

  .minmax {
    margin-top: 10px;
    display: flex;
    gap: 18px;
    justify-content: flex-end;
    font-size: 17px;
    color: var(--text-dim);
    font-weight: 500;
  }

  .minmax span.hi { color: #ffdca8; }
  .minmax span.lo { color: #bfe1ff; }

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

  .hourly-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 2px;
  }

  .hourly-scroll {
    flex: 1;
    overflow: hidden;
    position: relative;
  }

  .hourly-track {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 6px;
    height: 100%;
    align-items: end;
  }

  .hour-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: 100%;
    padding-bottom: 4px;
    border-radius: 10px;
    transition: background 0.15s ease;
  }

  .hour-item:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .hour-temp {
    font-size: 14px;
    font-weight: 600;
  }

  .hour-bar-track {
    width: 6px;
    flex: 1;
    max-height: 130px;
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
  }

  .hour-bar {
    width: 100%;
    border-radius: 4px;
    background: linear-gradient(180deg, #ffe6b0, #ff9f6b);
    min-height: 4px;
  }

  .hour-time {
    font-size: 12px;
    color: var(--text-faint);
    font-weight: 500;
  }

  .status-view {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
  }

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

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

  .status-text {
    font-size: 16px;
    color: var(--text-dim);
    font-weight: 500;
  }

  .error-view {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }

  .error-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 90, 90, 0.25);
    border: 1px solid rgba(255, 120, 120, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
  }

  .error-title {
    font-size: 20px;
    font-weight: 700;
  }

  .error-detail {
    font-size: 14px;
    color: var(--text-dim);
    max-width: 460px;
  }

  .hidden { display: none !important; }
</style>
</head>
<body>

<div class="bg-decor">
  <div class="circle c1"></div>
  <div class="circle c2"></div>
  <div class="circle c3"></div>
</div>

<div class="stage">
  <div class="card" id="card">

    <div class="header-row">
      <div>
        <div class="location" id="location">—</div>
        <div class="date" id="date">—</div>
      </div>
      <div class="coords" id="coords"></div>
    </div>

    <div id="loadingView" class="status-view">
      <div class="spinner"></div>
      <div class="status-text">Loading weather data…</div>
    </div>

    <div id="errorView" class="error-view hidden">
      <div class="error-icon">!</div>
      <div class="error-title">Unable to load weather data</div>
      <div class="error-detail" id="errorDetail">Something went wrong while contacting the weather service.</div>
    </div>

    <div id="contentView" class="hidden" style="display:flex; flex-direction:column; gap:24px; flex:1;">
      <div class="main-row">
        <div class="temp-block">
          <svg class="weather-icon" id="weatherIcon" viewBox="0 0 64 64"></svg>
          <div class="temp-main"><span id="currentTemp">--</span><span class="unit">°C</span></div>
        </div>
        <div class="condition-block">
          <div class="condition-label" id="conditionLabel">—</div>
          <div class="minmax">
            <span class="hi">H: <span id="tempMax">--</span>°</span>
            <span class="lo">L: <span id="tempMin">--</span>°</span>
          </div>
        </div>
      </div>

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

      <div class="hourly-title">Hourly Temperature</div>
      <div class="hourly-scroll">
        <div class="hourly-track" id="hourlyTrack"></div>
      </div>
    </div>

  </div>
</div>

<script>
(function () {
  var params = new URLSearchParams(window.location.search);

  function todayUTC() {
    var d = new Date();
    return d.getUTCFullYear() + '-' + String(d.getUTCMonth() + 1).padStart(2, '0') + '-' + String(d.getUTCDate()).padStart(2, '0');
  }

  var lat = parseFloat(params.get('lat'));
  var lon = parseFloat(params.get('lon'));
  if (isNaN(lat)) lat = 52.52;
  if (isNaN(lon)) lon = 13.405;
  var name = params.get('name') || 'Berlin';
  var dateStr = params.get('date') || todayUTC();

  document.getElementById('location').textContent = name;
  document.getElementById('coords').innerHTML =
    Math.abs(lat).toFixed(2) + '°' + (lat >= 0 ? 'N' : 'S') + '<br>' +
    Math.abs(lon).toFixed(2) + '°' + (lon >= 0 ? 'E' : 'W');

  function formatDateLabel(str) {
    var parts = str.split('-').map(Number);
    var d = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2]));
    var weekday = d.toLocaleDateString('en-US', { weekday: 'long', timeZone: 'UTC' });
    var month = d.toLocaleDateString('en-US', { month: 'long', timeZone: 'UTC' });
    return weekday + ', ' + month + ' ' + d.getUTCDate() + ', ' + d.getUTCFullYear();
  }
  document.getElementById('date').textContent = formatDateLabel(dateStr);

  var WMO = {
    0: ['Clear sky', 'sun'],
    1: ['Mainly clear', 'sun'],
    2: ['Partly cloudy', 'cloud-sun'],
    3: ['Overcast', 'cloud'],
    45: ['Fog', 'fog'],
    48: ['Freezing fog', 'fog'],
    51: ['Light drizzle', 'rain'],
    53: ['Drizzle', 'rain'],
    55: ['Dense drizzle', 'rain'],
    56: ['Light freezing drizzle', 'rain'],
    57: ['Freezing drizzle', 'rain'],
    61: ['Light rain', 'rain'],
    63: ['Rain', 'rain'],
    65: ['Heavy rain', 'rain'],
    66: ['Light freezing rain', 'rain'],
    67: ['Freezing rain', 'rain'],
    71: ['Light snow', 'snow'],
    73: ['Snow', 'snow'],
    75: ['Heavy snow', 'snow'],
    77: ['Snow grains', 'snow'],
    80: ['Light showers', 'rain'],
    81: ['Showers', 'rain'],
    82: ['Violent showers', 'rain'],
    85: ['Light snow showers', 'snow'],
    86: ['Snow showers', 'snow'],
    95: ['Thunderstorm', 'storm'],
    96: ['Thunderstorm w/ hail', 'storm'],
    99: ['Thunderstorm w/ hail', 'storm']
  };

  function weatherInfo(code) {
    return WMO[code] || ['Unknown', 'cloud'];
  }

  var ICONS = {
    sun: '<circle cx="32" cy="32" r="13" fill="#FFD65C"/>' +
      [0,45,90,135,180,225,270,315].map(function(a){
        var rad = a * Math.PI/180, x1=32+16*Math.cos(rad), y1=32+16*Math.sin(rad), x2=32+25*Math.cos(rad), y2=32+25*Math.sin(rad);
        return '<line x1="'+x1+'" y1="'+y1+'" x2="'+x2+'" y2="'+y2+'" stroke="#FFD65C" stroke-width="3.2" stroke-linecap="round"/>';
      }).join(''),
    'cloud-sun': '<circle cx="24" cy="24" r="10" fill="#FFD65C"/>' +
      [0,60,120,180,240,300].map(function(a){
        var rad = a*Math.PI/180, x1=24+13*Math.cos(rad), y1=24+13*Math.sin(rad), x2=24+19*Math.cos(rad), y2=24+19*Math.sin(rad);
        return '<line x1="'+x1+'" y1="'+y1+'" x2="'+x2+'" y2="'+y2+'" stroke="#FFD65C" stroke-width="2.6" stroke-linecap="round"/>';
      }).join('') +
      '<ellipse cx="36" cy="40" rx="18" ry="12" fill="#F2F6FC"/><ellipse cx="26" cy="42" rx="12" ry="9" fill="#F2F6FC"/>',
    cloud: '<ellipse cx="34" cy="38" rx="20" ry="13" fill="#F2F6FC"/><ellipse cx="22" cy="40" rx="13" ry="10" fill="#F2F6FC"/><ellipse cx="44" cy="42" rx="11" ry="8" fill="#E4EAF3"/>',
    fog: '<ellipse cx="32" cy="26" rx="18" ry="11" fill="#E4EAF3"/>' +
      [18,26,34,42].map(function(y){ return '<line x1="12" y1="'+y+'" x2="52" y2="'+y+'" stroke="#F2F6FC" stroke-width="4" stroke-linecap="round"/>'; }).join(''),
    rain: '<ellipse cx="32" cy="26" rx="19" ry="12" fill="#DCE6F2"/>' +
      [20,30,40].map(function(x){ return '<line x1="'+x+'" y1="40" x2="'+(x-5)+'" y2="54" stroke="#7EB8F0" stroke-width="3.4" stroke-linecap="round"/>'; }).join(''),
    snow: '<ellipse cx="32" cy="26" rx="19" ry="12" fill="#E7EEF7"/>' +
      [20,32,44].map(function(x){ return '<circle cx="'+x+'" cy="46" r="3" fill="#FFFFFF"/>'; }).join(''),
    storm: '<ellipse cx="32" cy="24" rx="19" ry="11" fill="#C9D3E0"/><polygon points="32,32 24,48 31,48 27,60 42,40 34,40 38,32" fill="#FFD65C"/>'
  };

  function setIcon(kind) {
    var svg = document.getElementById('weatherIcon');
    svg.innerHTML = ICONS[kind] || ICONS.cloud;
  }

  function show(view) {
    document.getElementById('loadingView').classList.add('hidden');
    document.getElementById('errorView').classList.add('hidden');
    document.getElementById('contentView').classList.add('hidden');
    document.getElementById(view).classList.remove('hidden');
  }

  function showError(msg) {
    document.getElementById('errorDetail').textContent = msg;
    show('errorView');
  }

  var isFuture = dateStr >= todayUTC();
  var base = isFuture ? '/api/om/forecast' : '/api/om/archive';

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

  fetch(url)
    .then(function (res) {
      if (!res.ok) throw new Error('Request failed with status ' + res.status);
      return res.json();
    })
    .then(function (data) {
      if (!data || !data.daily || !data.hourly) {
        throw new Error('Response did not contain expected weather data.');
      }

      var tMax = data.daily.temperature_2m_max && data.daily.temperature_2m_max[0];
      var tMin = data.daily.temperature_2m_min && data.daily.temperature_2m_min[0];
      var wCode = data.daily.weather_code && data.daily.weather_code[0];
      var hourlyTimes = data.hourly.time || [];
      var hourlyTemps = data.hourly.temperature_2m || [];

      if (tMax == null || tMin == null || hourlyTimes.length === 0) {
        throw new Error('Weather data was incomplete for the requested date.');
      }

      var info = weatherInfo(wCode);
      document.getElementById('conditionLabel').textContent = info[0];
      setIcon(info[1]);

      document.getElementById('tempMax').textContent = Math.round(tMax);
      document.getElementById('tempMin').textContent = Math.round(tMin);

      var midIdx = Math.min(12, hourlyTemps.length - 1);
      document.getElementById('currentTemp').textContent = Math.round(hourlyTemps[midIdx]);

      var track = document.getElementById('hourlyTrack');
      var frag = document.createDocumentFragment();
      var validTemps = hourlyTemps.filter(function (t) { return t != null; });
      var maxT = Math.max.apply(null, validTemps);
      var minT = Math.min.apply(null, validTemps);
      var range = Math.max(1, maxT - minT);

      hourlyTemps.forEach(function (t, i) {
        if (t == null) return;
        var pct = ((t - minT) / range) * 100;
        var barHeight = 20 + pct * 1.1;
        var timeLabel = hourlyTimes[i] ? hourlyTimes[i].slice(11, 16) : '';

        var item = document.createElement('div');
        item.className = 'hour-item';
        item.innerHTML =
          '<div class="hour-temp">' + Math.round(t) + '°</div>' +
          '<div class="hour-bar-track"><div class="hour-bar" style="height:' + barHeight + 'px;"></div></div>' +
          '<div class="hour-time">' + timeLabel + '</div>';
        frag.appendChild(item);
      });
      track.appendChild(frag);

      show('contentView');
    })
    .catch(function (err) {
      showError(err && err.message ? err.message : 'Unknown error while loading weather data.');
    });
})();
</script>

</body>
</html>