gemini-3.1-pro · cursor

<!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>
  :root {
    --bg-start: #0f172a;
    --bg-end: #1e293b;
    --card-bg: rgba(255, 255, 255, 0.06);
    --card-border: rgba(255, 255, 255, 0.1);
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
  }

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: radial-gradient(circle at top right, var(--bg-end), var(--bg-start));
    color: var(--text-main);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100vw;
    overflow: hidden;
  }

  .bg-blob-1 {
    position: absolute;
    top: -20%;
    left: -10%;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56,189,248,0.1) 0%, rgba(15,23,42,0) 70%);
    z-index: -1;
  }

  .bg-blob-2 {
    position: absolute;
    bottom: -20%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,0.1) 0%, rgba(15,23,42,0) 70%);
    z-index: -1;
  }

  #app {
    width: 100%;
    max-width: 800px;
    padding: 24px;
    z-index: 1;
  }

  .card {
    background: var(--card-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--card-border);
    border-radius: 32px;
    padding: 48px;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 48px;
    animation: fadeIn 0.6s ease-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
  }

  .header {
    text-align: center;
  }

  .location {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }

  .date {
    font-size: 1.25rem;
    color: var(--text-muted);
    font-weight: 500;
  }

  .main-weather {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
  }

  .icon-large {
    width: 140px;
    height: 140px;
    color: #ffffff;
    filter: drop-shadow(0 8px 16px rgba(255, 255, 255, 0.15));
  }

  .icon-large svg {
    width: 100%;
    height: 100%;
  }

  .temp-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .condition {
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }

  .high-low {
    font-size: 1.5rem;
    color: #cbd5e1;
    display: flex;
    gap: 24px;
    font-weight: 500;
  }

  .high {
    color: #ffffff;
  }

  .low {
    color: var(--text-muted);
  }

  .hourly-container {
    position: relative;
    margin: 0 -16px;
    padding: 0 16px;
  }

  .hourly {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 8px 4px 24px 4px;
  }

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

  .hourly::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
  }

  .hourly::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
  }

  .hourly::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
  }

  .hour-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 80px;
    padding: 20px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, background 0.2s;
    animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

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

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

  .hour-time {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 500;
  }

  .hour-temp {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
  }

  .error-message {
    text-align: center;
    color: #fca5a5;
    padding: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .error-title {
    font-size: 1.5rem;
    font-weight: 600;
  }

  .error-desc {
    font-size: 1rem;
    opacity: 0.8;
  }

  .loading {
    text-align: center;
    color: var(--text-muted);
    font-size: 1.5rem;
    padding: 64px;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    font-weight: 500;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
  }
</style>
</head>
<body>
  <div class="bg-blob-1"></div>
  <div class="bg-blob-2"></div>
  <div id="app">
    <div class="loading">Loading weather data...</div>
  </div>

  <script>
    async function fetchWeather() {
      const app = document.getElementById('app');
      try {
        const urlParams = new URLSearchParams(window.location.search);
        const lat = urlParams.get('lat') || '52.52';
        const lon = urlParams.get('lon') || '13.405';
        const name = urlParams.get('name') || 'Berlin';

        const now = new Date();
        const todayUTC = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()));
        const todayStr = todayUTC.toISOString().split('T')[0];

        const date = urlParams.get('date') || todayStr;

        const isPast = date < todayStr;
        const endpoint = isPast ? '/api/om/archive' : '/api/om/forecast';

        const apiUrl = `${endpoint}?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 response = await fetch(apiUrl);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();

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

        const maxTemp = data.daily.temperature_2m_max[0];
        const minTemp = data.daily.temperature_2m_min[0];
        const weatherCode = data.daily.weather_code[0];
        
        const hourlyTimes = data.hourly.time;
        const hourlyTemps = data.hourly.temperature_2m;

        const weatherInfo = getWeatherInfo(weatherCode);

        let dateObj = new Date(date);
        const parts = date.split('-');
        if (parts.length === 3) {
          dateObj = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2]));
        }
        const dateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
        const formattedDate = dateObj.toLocaleDateString('en-US', dateOptions);

        let hourlyHtml = '';
        for (let i = 0; i < hourlyTimes.length; i++) {
          const timeStr = hourlyTimes[i].split('T')[1];
          const temp = hourlyTemps[i];
          if (temp !== null) {
            hourlyHtml += `
              <div class="hour-item" style="animation-delay: ${i * 0.02}s">
                <div class="hour-time">${timeStr}</div>
                <div class="hour-temp">${Math.round(temp)}&deg;</div>
              </div>
            `;
          }
        }

        const maxTempStr = maxTemp !== null ? `${Math.round(maxTemp)}&deg;` : '--';
        const minTempStr = minTemp !== null ? `${Math.round(minTemp)}&deg;` : '--';

        app.innerHTML = `
          <div class="card">
            <div class="header">
              <div class="location">${escapeHtml(name)}</div>
              <div class="date">${formattedDate}</div>
            </div>
            <div class="main-weather">
              <div class="icon-large">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  ${icons[weatherInfo.icon]}
                </svg>
              </div>
              <div class="temp-info">
                <div class="condition">${weatherInfo.text}</div>
                <div class="high-low">
                  <span class="high">H: ${maxTempStr}</span>
                  <span class="low">L: ${minTempStr}</span>
                </div>
              </div>
            </div>
            <div class="hourly-container">
              <div class="hourly">
                ${hourlyHtml}
              </div>
            </div>
          </div>
        `;
      } catch (error) {
        console.error('Failed to load weather data:', error);
        app.innerHTML = `
          <div class="card">
            <div class="error-message">
              <svg viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom: 8px; opacity: 0.9;">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="8" x2="12" y2="12"></line>
                <line x1="12" y1="16" x2="12.01" y2="16"></line>
              </svg>
              <div class="error-title">Failed to load weather data</div>
              <div class="error-desc">Please check your connection or try again later.</div>
            </div>
          </div>
        `;
      }
    }

    function escapeHtml(unsafe) {
        return unsafe
             .replace(/&/g, "&amp;")
             .replace(/</g, "&lt;")
             .replace(/>/g, "&gt;")
             .replace(/"/g, "&quot;")
             .replace(/'/g, "&#039;");
    }

    const icons = {
      'clear': '<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>',
      'partly-cloudy': '<path d="M12 2v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="M20 12h2"/><path d="m19.07 4.93-1.41 1.41"/><path d="M15.947 12.65a4 4 0 0 0-5.925-4.128"/><path d="M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z"/>',
      'cloudy': '<path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/>',
      'fog': '<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M16 17H7"/><path d="M17 21H9"/>',
      'drizzle': '<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M8 19v2"/><path d="M8 13v2"/><path d="M16 19v2"/><path d="M16 13v2"/><path d="M12 21v2"/><path d="M12 15v2"/>',
      'rain': '<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M16 14v6"/><path d="M8 14v6"/><path d="M12 16v6"/>',
      'snow': '<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M8 15h.01"/><path d="M8 19h.01"/><path d="M12 17h.01"/><path d="M12 21h.01"/><path d="M16 15h.01"/><path d="M16 19h.01"/>',
      'thunderstorm': '<path d="M19 16.9A5 5 0 0 0 18 7h-1.26a8 8 0 1 0-11.62 9"/><path d="m13 11-4 5h4l-2 5"/>',
      'unknown': '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>'
    };

    function getWeatherInfo(code) {
      const codes = {
        0: { text: 'Clear sky', icon: 'clear' },
        1: { text: 'Mainly clear', icon: 'partly-cloudy' },
        2: { text: 'Partly cloudy', icon: 'partly-cloudy' },
        3: { text: 'Overcast', icon: 'cloudy' },
        45: { text: 'Fog', icon: 'fog' },
        48: { text: 'Depositing rime fog', icon: 'fog' },
        51: { text: 'Light drizzle', icon: 'drizzle' },
        53: { text: 'Moderate drizzle', icon: 'drizzle' },
        55: { text: 'Dense drizzle', icon: 'drizzle' },
        56: { text: 'Light freezing drizzle', icon: 'drizzle' },
        57: { text: 'Dense freezing drizzle', icon: 'drizzle' },
        61: { text: 'Slight rain', icon: 'rain' },
        63: { text: 'Moderate rain', icon: 'rain' },
        65: { text: 'Heavy rain', icon: 'rain' },
        66: { text: 'Light freezing rain', icon: 'rain' },
        67: { text: 'Heavy freezing rain', icon: 'rain' },
        71: { text: 'Slight snow fall', icon: 'snow' },
        73: { text: 'Moderate snow fall', icon: 'snow' },
        75: { text: 'Heavy snow fall', icon: 'snow' },
        77: { text: 'Snow grains', icon: 'snow' },
        80: { text: 'Slight rain showers', icon: 'rain' },
        81: { text: 'Moderate rain showers', icon: 'rain' },
        82: { text: 'Violent rain showers', icon: 'rain' },
        85: { text: 'Slight snow showers', icon: 'snow' },
        86: { text: 'Heavy snow showers', icon: 'snow' },
        95: { text: 'Thunderstorm', icon: 'thunderstorm' },
        96: { text: 'Thunderstorm with slight hail', icon: 'thunderstorm' },
        99: { text: 'Thunderstorm with heavy hail', icon: 'thunderstorm' }
      };
      return codes[code] || { text: 'Unknown', icon: 'unknown' };
    }

    fetchWeather();
  </script>
</body>
</html>