gemini-3.6-flash @ low · cursor-xl

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

    body {
      width: 1280px;
      height: 800px;
      margin: 0 auto;
      overflow: hidden;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      background: #0d1117;
      color: #f0f6fc;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .background-glow {
      position: absolute;
      width: 700px;
      height: 700px;
      border-radius: 50%;
      filter: blur(120px);
      opacity: 0.18;
      pointer-events: none;
      transition: background 1s ease;
      background: radial-gradient(circle, #38bdf8, #818cf8);
    }

    .card {
      width: 900px;
      height: 560px;
      background: rgba(22, 27, 34, 0.65);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 32px;
      padding: 44px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
      position: relative;
      z-index: 1;
    }

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

    .location-info h1 {
      font-size: 42px;
      font-weight: 700;
      letter-spacing: -0.5px;
      color: #ffffff;
      margin-bottom: 6px;
    }

    .location-info .date {
      font-size: 16px;
      color: #8b949e;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .location-info .coords {
      font-size: 13px;
      color: #484f58;
      margin-top: 4px;
    }

    .condition-badge {
      display: flex;
      align-items: center;
      gap: 16px;
      background: rgba(255, 255, 255, 0.05);
      padding: 12px 24px;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .condition-icon {
      width: 48px;
      height: 48px;
    }

    .condition-text {
      font-size: 18px;
      font-weight: 600;
      color: #e6edf3;
      text-transform: capitalize;
    }

    .main-metrics {
      display: flex;
      align-items: baseline;
      gap: 40px;
      margin: 20px 0;
    }

    .temp-range-container {
      display: flex;
      gap: 32px;
      align-items: center;
    }

    .temp-pill {
      display: flex;
      flex-direction: column;
    }

    .temp-pill .label {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: #8b949e;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .temp-pill .val {
      font-size: 56px;
      font-weight: 700;
      letter-spacing: -1px;
      line-height: 1;
    }

    .temp-max .val {
      color: #ff7b72;
    }

    .temp-min .val {
      color: #79c0ff;
    }

    .temp-divider {
      width: 1px;
      height: 48px;
      background: rgba(255, 255, 255, 0.1);
    }

    .hourly-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .section-title {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: #8b949e;
      font-weight: 600;
    }

    .hourly-container {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: none;
    }

    .hourly-container::-webkit-scrollbar {
      display: none;
    }

    .hourly-card {
      min-width: 68px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 16px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      transition: all 0.2s ease;
    }

    .hourly-card:hover {
      background: rgba(255, 255, 255, 0.08);
      transform: translateY(-2px);
    }

    .hourly-time {
      font-size: 13px;
      color: #8b949e;
      font-weight: 500;
    }

    .hourly-temp {
      font-size: 16px;
      font-weight: 600;
      color: #f0f6fc;
    }

    /* Loading & Error States */
    .state-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      gap: 16px;
      text-align: center;
    }

    .spinner {
      width: 48px;
      height: 48px;
      border: 4px solid rgba(255, 255, 255, 0.1);
      border-left-color: #38bdf8;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

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

    .error-icon {
      width: 56px;
      height: 56px;
      color: #ff7b72;
    }

    .error-title {
      font-size: 20px;
      font-weight: 600;
      color: #f0f6fc;
    }

    .error-msg {
      font-size: 14px;
      color: #8b949e;
      max-width: 360px;
      line-height: 1.5;
    }

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

  <div class="background-glow" id="bgGlow"></div>

  <div class="card">
    <!-- Loading State -->
    <div class="state-container" id="loadingState">
      <div class="spinner"></div>
      <div style="color: #8b949e; font-size: 15px; font-weight: 500;">Fetching weather data...</div>
    </div>

    <!-- Error State -->
    <div class="state-container hidden" id="errorState">
      <svg class="error-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
      </svg>
      <div class="error-title">Unable to Load Weather Data</div>
      <div class="error-msg" id="errorMessage">The weather information for this location and date could not be retrieved. Please check your settings or try again later.</div>
    </div>

    <!-- Content State -->
    <div id="contentState" class="hidden" style="display: flex; flex-direction: column; justify-content: space-between; height: 100%;">
      <div class="header">
        <div class="location-info">
          <h1 id="locName">Berlin</h1>
          <div class="date" id="dateStr">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
            <span id="displayDate">2026-08-14</span>
          </div>
          <div class="coords" id="displayCoords">Lat: 52.52, Lon: 13.41</div>
        </div>
        <div class="condition-badge">
          <svg class="condition-icon" id="condIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"></svg>
          <span class="condition-text" id="condText">Clear Sky</span>
        </div>
      </div>

      <div class="main-metrics">
        <div class="temp-range-container">
          <div class="temp-pill temp-max">
            <span class="label">High</span>
            <span class="val" id="tempMax">--°</span>
          </div>
          <div class="temp-divider"></div>
          <div class="temp-pill temp-min">
            <span class="label">Low</span>
            <span class="val" id="tempMin">--°</span>
          </div>
        </div>
      </div>

      <div class="hourly-section">
        <div class="section-title">Hourly Temperature (UTC)</div>
        <div class="hourly-container" id="hourlyList"></div>
      </div>
    </div>
  </div>

  <script>
    const weatherCodes = {
      0: { name: 'Clear Sky', glow: 'radial-gradient(circle, #f59e0b, #ef4444)', icon: '<circle cx="12" cy="12" r="5" stroke="#f59e0b" stroke-width="2"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke="#f59e0b" stroke-width="2"/>' },
      1: { name: 'Mainly Clear', glow: 'radial-gradient(circle, #38bdf8, #f59e0b)', icon: '<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2" stroke="#f59e0b" stroke-width="2"/><path d="M16 16a4 4 0 00-7.78-1.3A5 5 0 105 19h11a4 4 0 000-8z" stroke="#38bdf8" stroke-width="2"/>' },
      2: { name: 'Partly Cloudy', glow: 'radial-gradient(circle, #38bdf8, #6366f1)', icon: '<path d="M16 16a4 4 0 00-7.78-1.3A5 5 0 105 19h11a4 4 0 000-8z" stroke="#94a3b8" stroke-width="2"/><circle cx="8" cy="8" r="3" stroke="#f59e0b" stroke-width="2"/>' },
      3: { name: 'Overcast', glow: 'radial-gradient(circle, #64748b, #475569)', icon: '<path d="M16 16a4 4 0 00-7.78-1.3A5 5 0 105 19h11a4 4 0 000-8z" stroke="#94a3b8" stroke-width="2"/>' },
      45: { name: 'Fog', glow: 'radial-gradient(circle, #94a3b8, #475569)', icon: '<path d="M4 8h16M3 12h18M5 16h14" stroke="#94a3b8" stroke-width="2" stroke-linecap="round"/>' },
      48: { name: 'Depositing Rime Fog', glow: 'radial-gradient(circle, #94a3b8, #38bdf8)', icon: '<path d="M4 8h16M3 12h18M5 16h14" stroke="#94a3b8" stroke-width="2" stroke-linecap="round"/>' },
      51: { name: 'Light Drizzle', glow: 'radial-gradient(circle, #0284c7, #1e3a8a)', icon: '<path d="M16 13a4 4 0 00-7.78-1.3A5 5 0 105 16h11a4 4 0 000-8z" stroke="#38bdf8" stroke-width="2"/><path d="M8 19v2M12 19v2M16 19v2" stroke="#38bdf8" stroke-width="2" stroke-linecap="round"/>' },
      53: { name: 'Moderate Drizzle', glow: 'radial-gradient(circle, #0284c7, #1e3a8a)', icon: '<path d="M16 13a4 4 0 00-7.78-1.3A5 5 0 105 16h11a4 4 0 000-8z" stroke="#38bdf8" stroke-width="2"/><path d="M8 19v2M12 19v2M16 19v2" stroke="#38bdf8" stroke-width="2" stroke-linecap="round"/>' },
      55: { name: 'Dense Drizzle', glow: 'radial-gradient(circle, #0284c7, #1e3a8a)', icon: '<path d="M16 13a4 4 0 00-7.78-1.3A5 5 0 105 16h11a4 4 0 000-8z" stroke="#38bdf8" stroke-width="2"/><path d="M8 19v2M12 19v2M16 19v2" stroke="#38bdf8" stroke-width="2" stroke-linecap="round"/>' },
      61: { name: 'Slight Rain', glow: 'radial-gradient(circle, #0284c7, #1e3a8a)', icon: '<path d="M16 13a4 4 0 00-7.78-1.3A5 5 0 105 16h11a4 4 0 000-8z" stroke="#38bdf8" stroke-width="2"/><path d="M10 19l-2 3M14 19l-2 3" stroke="#38bdf8" stroke-width="2" stroke-linecap="round"/>' },
      63: { name: 'Moderate Rain', glow: 'radial-gradient(circle, #2563eb, #1e1b4b)', icon: '<path d="M16 13a4 4 0 00-7.78-1.3A5 5 0 105 16h11a4 4 0 000-8z" stroke="#60a5fa" stroke-width="2"/><path d="M8 19l-2 3M12 19l-2 3M16 19l-2 3" stroke="#60a5fa" stroke-width="2" stroke-linecap="round"/>' },
      65: { name: 'Heavy Rain', glow: 'radial-gradient(circle, #2563eb, #1e1b4b)', icon: '<path d="M16 13a4 4 0 00-7.78-1.3A5 5 0 105 16h11a4 4 0 000-8z" stroke="#60a5fa" stroke-width="2"/><path d="M8 19l-2 3M12 19l-2 3M16 19l-2 3" stroke="#60a5fa" stroke-width="2" stroke-linecap="round"/>' },
      71: { name: 'Slight Snow', glow: 'radial-gradient(circle, #818cf8, #312e81)', icon: '<path d="M16 13a4 4 0 00-7.78-1.3A5 5 0 105 16h11a4 4 0 000-8z" stroke="#a5b4fc" stroke-width="2"/><path d="M8 20h.01M12 20h.01M16 20h.01" stroke="#a5b4fc" stroke-width="3" stroke-linecap="round"/>' },
      73: { name: 'Moderate Snow', glow: 'radial-gradient(circle, #818cf8, #312e81)', icon: '<path d="M16 13a4 4 0 00-7.78-1.3A5 5 0 105 16h11a4 4 0 000-8z" stroke="#a5b4fc" stroke-width="2"/><path d="M8 20h.01M12 20h.01M16 20h.01" stroke="#a5b4fc" stroke-width="3" stroke-linecap="round"/>' },
      75: { name: 'Heavy Snow', glow: 'radial-gradient(circle, #818cf8, #312e81)', icon: '<path d="M16 13a4 4 0 00-7.78-1.3A5 5 0 105 16h11a4 4 0 000-8z" stroke="#a5b4fc" stroke-width="2"/><path d="M8 20h.01M12 20h.01M16 20h.01" stroke="#a5b4fc" stroke-width="3" stroke-linecap="round"/>' },
      95: { name: 'Thunderstorm', glow: 'radial-gradient(circle, #7c3aed, #2e1065)', icon: '<path d="M16 13a4 4 0 00-7.78-1.3A5 5 0 105 16h11a4 4 0 000-8z" stroke="#c084fc" stroke-width="2"/><path d="M13 16l-3 4h4l-2 4" stroke="#facc15" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>' }
    };

    function getTodayUTC() {
      const now = new Date();
      return now.toISOString().split('T')[0];
    }

    function parseQueryParams() {
      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 date = params.get('date') || getTodayUTC();
      return { lat, lon, name, date };
    }

    function formatDateDisplay(dateStr) {
      try {
        const [y, m, d] = dateStr.split('-').map(Number);
        const dateObj = new Date(Date.UTC(y, m - 1, d));
        return dateObj.toLocaleDateString('en-US', {
          weekday: 'long',
          year: 'numeric',
          month: 'short',
          day: 'numeric',
          timeZone: 'UTC'
        });
      } catch (e) {
        return dateStr;
      }
    }

    async function init() {
      const { lat, lon, name, date } = parseQueryParams();
      
      const todayStr = getTodayUTC();
      const isPast = date < todayStr;
      const apiEndpoint = isPast ? '/api/om/archive' : '/api/om/forecast';

      const url = `${apiEndpoint}?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(date)}&end_date=${encodeURIComponent(date)}`;

      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error ${response.status}`);
        }
        const data = await response.json();

        if (!data || !data.daily || !data.hourly) {
          throw new Error('Invalid data structure received.');
        }

        renderWeather(data, name, date, lat, lon);
      } catch (err) {
        showError(err.message);
      }
    }

    function renderWeather(data, name, date, lat, lon) {
      document.getElementById('loadingState').classList.add('hidden');
      document.getElementById('contentState').classList.remove('hidden');

      document.getElementById('locName').textContent = name;
      document.getElementById('displayDate').textContent = formatDateDisplay(date);
      document.getElementById('displayCoords').textContent = `Lat: ${parseFloat(lat).toFixed(2)}, Lon: ${parseFloat(lon).toFixed(2)}`;

      const maxTemp = Math.round(data.daily.temperature_2m_max[0]);
      const minTemp = Math.round(data.daily.temperature_2m_min[0]);
      const code = data.daily.weather_code ? data.daily.weather_code[0] : 0;

      document.getElementById('tempMax').textContent = `${maxTemp}°`;
      document.getElementById('tempMin').textContent = `${minTemp}°`;

      const cond = weatherCodes[code] || { name: 'Unknown', glow: 'radial-gradient(circle, #38bdf8, #818cf8)', icon: '<circle cx="12" cy="12" r="8" stroke="#94a3b8" stroke-width="2"/>' };
      document.getElementById('condText').textContent = cond.name;
      document.getElementById('condIcon').innerHTML = cond.icon;
      document.getElementById('bgGlow').style.background = cond.glow;

      const hourlyList = document.getElementById('hourlyList');
      hourlyList.innerHTML = '';

      const times = data.hourly.time || [];
      const temps = data.hourly.temperature_2m || [];

      times.forEach((tStr, index) => {
        const hourTime = tStr.includes('T') ? tStr.split('T')[1].substring(0, 5) : `${String(index).padStart(2, '0')}:00`;
        const tempVal = Math.round(temps[index]);

        const item = document.createElement('div');
        item.className = 'hourly-card';
        item.innerHTML = `
          <div class="hourly-time">${hourTime}</div>
          <div class="hourly-temp">${tempVal}°</div>
        `;
        hourlyList.appendChild(item);
      });
    }

    function showError(msg) {
      document.getElementById('loadingState').classList.add('hidden');
      document.getElementById('contentState').classList.add('hidden');
      document.getElementById('errorState').classList.remove('hidden');
      if (msg) {
        document.getElementById('errorMessage').textContent = `Failed to load weather data (${msg}). Please verify parameters or API availability.`;
      }
    }

    window.addEventListener('DOMContentLoaded', init);
  </script>
</body>
</html>