gemini-3.1-pro · 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</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
      color: #ffffff;
      box-sizing: border-box;
      overflow: hidden;
    }
    
    .card-wrapper {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 32px;
      padding: 40px;
      width: 100%;
      max-width: 500px;
      box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.25);
      border: 1px solid rgba(255, 255, 255, 0.2);
      display: flex;
      flex-direction: column;
      text-align: center;
      animation: fadeIn 0.6s ease-out forwards;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .header {
      margin-bottom: 24px;
    }

    h1 {
      margin: 0;
      font-size: 2.8rem;
      font-weight: 700;
      letter-spacing: -0.5px;
    }

    .date {
      font-size: 1.1rem;
      opacity: 0.8;
      margin-top: 8px;
      font-weight: 500;
    }

    .main-weather {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 24px;
    }

    .icon {
      font-size: 6rem;
      line-height: 1.2;
      filter: drop-shadow(0 8px 16px rgba(0,0,0,0.2));
      margin-bottom: 8px;
    }

    .condition {
      font-size: 1.6rem;
      font-weight: 600;
      letter-spacing: 0.5px;
    }

    .temps {
      display: flex;
      justify-content: center;
      gap: 24px;
      font-size: 1.4rem;
      font-weight: 600;
      margin-bottom: 32px;
    }

    .max::before { content: 'H: '; opacity: 0.7; font-size: 1.1rem; }
    .min::before { content: 'L: '; opacity: 0.7; font-size: 1.1rem; }

    .hourly-container {
      background: rgba(0, 0, 0, 0.2);
      padding: 24px;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .hourly-title {
      text-align: left;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 20px;
      opacity: 0.7;
      font-weight: 700;
    }

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

    .hourly-scroll::-webkit-scrollbar {
      height: 6px;
    }

    .hourly-scroll::-webkit-scrollbar-track {
      background: transparent;
    }

    .hourly-scroll::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.4);
      border-radius: 10px;
    }

    .hour-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      min-width: 40px;
    }

    .hour-time {
      font-size: 0.9rem;
      opacity: 0.8;
      font-weight: 500;
    }

    .hour-bar-container {
      height: 60px;
      width: 6px;
      background: rgba(255,255,255,0.1);
      border-radius: 3px;
      position: relative;
    }

    .hour-bar {
      position: absolute;
      bottom: 0;
      width: 100%;
      background: #ffffff;
      border-radius: 3px;
      box-shadow: 0 0 8px rgba(255,255,255,0.5);
    }

    .hour-temp {
      font-size: 1.1rem;
      font-weight: 600;
    }

    #error {
      display: none;
      background: rgba(255, 59, 48, 0.2);
      border: 1px solid rgba(255, 59, 48, 0.5);
      color: #ffffff;
      padding: 20px;
      border-radius: 16px;
      font-weight: 600;
      font-size: 1.2rem;
    }

    #loading {
      font-size: 1.4rem;
      font-weight: 500;
      opacity: 0.8;
    }

    #content {
      display: none;
      flex-direction: column;
    }
  </style>
</head>
<body>
  <div class="card-wrapper">
    <div id="loading">Loading weather...</div>
    <div id="error">Data could not be loaded.</div>
    <div id="content">
      <div class="header">
        <h1 id="locationName"></h1>
        <div class="date" id="currentDate"></div>
      </div>
      
      <div class="main-weather">
        <div class="icon" id="weatherIcon"></div>
        <div class="condition" id="weatherCondition"></div>
      </div>
      
      <div class="temps">
        <span class="max" id="tempMax"></span>
        <span class="min" id="tempMin"></span>
      </div>
      
      <div class="hourly-container">
        <div class="hourly-title">Hourly Forecast</div>
        <div class="hourly-scroll" id="hourlyScroll"></div>
      </div>
    </div>
  </div>

  <script>
    const weatherCodes = {
      0: { label: 'Clear Sky', icon: '☀️' },
      1: { label: 'Mainly Clear', icon: '🌤️' },
      2: { label: 'Partly Cloudy', icon: '⛅' },
      3: { label: 'Overcast', icon: '☁️' },
      45: { label: 'Fog', icon: '🌫️' },
      48: { label: 'Depositing Rime Fog', icon: '🌫️' },
      51: { label: 'Light Drizzle', icon: '🌦️' },
      53: { label: 'Moderate Drizzle', icon: '🌦️' },
      55: { label: 'Dense Drizzle', icon: '🌧️' },
      56: { label: 'Light Freezing Drizzle', icon: '🌧️' },
      57: { label: 'Dense Freezing Drizzle', icon: '🌧️' },
      61: { label: 'Slight Rain', icon: '🌧️' },
      63: { label: 'Moderate Rain', icon: '🌧️' },
      65: { label: 'Heavy Rain', icon: '🌧️' },
      66: { label: 'Light Freezing Rain', icon: '🌧️❄️' },
      67: { label: 'Heavy Freezing Rain', icon: '🌧️❄️' },
      71: { label: 'Slight Snow Fall', icon: '❄️' },
      73: { label: 'Moderate Snow Fall', icon: '❄️' },
      75: { label: 'Heavy Snow Fall', icon: '❄️' },
      77: { label: 'Snow Grains', icon: '❄️' },
      80: { label: 'Slight Rain Showers', icon: '🌦️' },
      81: { label: 'Moderate Rain Showers', icon: '🌧️' },
      82: { label: 'Violent Rain Showers', icon: '⛈️' },
      85: { label: 'Slight Snow Showers', icon: '❄️' },
      86: { label: 'Heavy Snow Showers', icon: '❄️' },
      95: { label: 'Thunderstorm', icon: '⛈️' },
      96: { label: 'Thunderstorm (Slight Hail)', icon: '⛈️❄️' },
      99: { label: 'Thunderstorm (Heavy Hail)', icon: '⛈️❄️' }
    };

    async function loadWeather() {
      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 todayDate = new Date().toISOString().split('T')[0];
      const date = params.get('date') || todayDate;
      
      const endpoint = date < todayDate ? '/api/om/archive' : '/api/om/forecast';
      
      const queryParams = 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
      });
      
      const url = `${endpoint}?${queryParams.toString()}`;

      try {
        const res = await fetch(url);
        if (!res.ok) throw new Error(`API responded with status: ${res.status}`);
        const data = await res.json();
        
        if (!data.daily || !data.hourly || !data.daily.temperature_2m_max || data.daily.temperature_2m_max.length === 0) {
          throw new Error('Invalid or empty data returned from API');
        }
        
        document.getElementById('locationName').textContent = name;
        
        const dateObj = new Date(date);
        const dateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
        document.getElementById('currentDate').textContent = dateObj.toLocaleDateString('en-US', dateOptions);
        
        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[0];
        
        document.getElementById('tempMax').textContent = `${maxTemp}°`;
        document.getElementById('tempMin').textContent = `${minTemp}°`;
        
        const weather = weatherCodes[code] || { label: 'Unknown', icon: '❓' };
        document.getElementById('weatherIcon').textContent = weather.icon;
        document.getElementById('weatherCondition').textContent = weather.label;
        
        const hourlyTemps = data.hourly.temperature_2m.slice(0, 24);
        const hourlyTimes = data.hourly.time.slice(0, 24);
        
        const hMax = Math.max(...hourlyTemps.filter(t => t !== null));
        const hMin = Math.min(...hourlyTemps.filter(t => t !== null));
        const range = hMax - hMin || 1; 
        
        const scrollContainer = document.getElementById('hourlyScroll');
        scrollContainer.innerHTML = '';
        
        hourlyTemps.forEach((temp, i) => {
          if (temp === null) return;
          
          const timeString = hourlyTimes[i].split('T')[1]; 
          
          const percent = ((temp - hMin) / range) * 85 + 15; 
          
          const item = document.createElement('div');
          item.className = 'hour-item';
          
          const timeEl = document.createElement('span');
          timeEl.className = 'hour-time';
          timeEl.textContent = timeString;
          
          const barContainer = document.createElement('div');
          barContainer.className = 'hour-bar-container';
          
          const bar = document.createElement('div');
          bar.className = 'hour-bar';
          bar.style.height = `${Math.min(100, Math.max(15, percent))}%`;
          
          barContainer.appendChild(bar);
          
          const tempEl = document.createElement('span');
          tempEl.className = 'hour-temp';
          tempEl.textContent = `${Math.round(temp)}°`;
          
          item.appendChild(timeEl);
          item.appendChild(barContainer);
          item.appendChild(tempEl);
          
          scrollContainer.appendChild(item);
        });
        
        document.getElementById('loading').style.display = 'none';
        document.getElementById('content').style.display = 'flex';
      } catch (err) {
        console.error(err);
        document.getElementById('loading').style.display = 'none';
        const errorEl = document.getElementById('error');
        errorEl.style.display = 'block';
        errorEl.textContent = 'Data could not be loaded.';
      }
    }

    window.onload = loadWeather;
  </script>
</body>
</html>