claude-sonnet-4-5 · cursor

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

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 800px;
            padding: 40px;
        }

        .weather-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 24px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            padding: 48px;
            max-width: 900px;
            width: 100%;
            backdrop-filter: blur(10px);
        }

        .header {
            border-bottom: 2px solid #e5e7eb;
            padding-bottom: 24px;
            margin-bottom: 32px;
        }

        .location {
            font-size: 36px;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 8px;
        }

        .date {
            font-size: 18px;
            color: #6b7280;
            font-weight: 500;
        }

        .main-weather {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 40px;
        }

        .temperature-display {
            display: flex;
            align-items: baseline;
            gap: 16px;
        }

        .temp-large {
            font-size: 72px;
            font-weight: 700;
            color: #1f2937;
            line-height: 1;
        }

        .temp-range {
            font-size: 24px;
            color: #6b7280;
            font-weight: 500;
        }

        .weather-icon {
            font-size: 64px;
            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
        }

        .weather-condition {
            font-size: 28px;
            color: #374151;
            font-weight: 600;
            text-align: right;
            margin-top: 12px;
        }

        .hourly-section {
            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
            border-radius: 16px;
            padding: 24px;
        }

        .hourly-title {
            font-size: 20px;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 20px;
        }

        .hourly-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
            gap: 12px;
        }

        .hourly-item {
            background: white;
            border-radius: 12px;
            padding: 16px 12px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .hourly-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .hourly-time {
            font-size: 14px;
            color: #6b7280;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .hourly-temp {
            font-size: 20px;
            color: #1f2937;
            font-weight: 700;
        }

        .error-message {
            background: #fee2e2;
            border: 2px solid #ef4444;
            border-radius: 12px;
            padding: 24px;
            color: #991b1b;
            font-size: 18px;
            font-weight: 600;
            text-align: center;
        }

        .loading {
            text-align: center;
            font-size: 24px;
            color: #6b7280;
            padding: 40px;
        }
    </style>
</head>
<body>
    <div class="weather-card">
        <div class="loading">Loading weather data...</div>
    </div>

    <script>
        const weatherCodes = {
            0: { description: 'Clear sky', icon: '☀️' },
            1: { description: 'Mainly clear', icon: '🌤️' },
            2: { description: 'Partly cloudy', icon: '⛅' },
            3: { description: 'Overcast', icon: '☁️' },
            45: { description: 'Foggy', icon: '🌫️' },
            48: { description: 'Depositing rime fog', icon: '🌫️' },
            51: { description: 'Light drizzle', icon: '🌦️' },
            53: { description: 'Moderate drizzle', icon: '🌦️' },
            55: { description: 'Dense drizzle', icon: '🌦️' },
            56: { description: 'Light freezing drizzle', icon: '🌧️' },
            57: { description: 'Dense freezing drizzle', icon: '🌧️' },
            61: { description: 'Slight rain', icon: '🌧️' },
            63: { description: 'Moderate rain', icon: '🌧️' },
            65: { description: 'Heavy rain', icon: '🌧️' },
            66: { description: 'Light freezing rain', icon: '🌧️' },
            67: { description: 'Heavy freezing rain', icon: '🌧️' },
            71: { description: 'Slight snow', icon: '🌨️' },
            73: { description: 'Moderate snow', icon: '🌨️' },
            75: { description: 'Heavy snow', icon: '🌨️' },
            77: { description: 'Snow grains', icon: '🌨️' },
            80: { description: 'Slight rain showers', icon: '🌦️' },
            81: { description: 'Moderate rain showers', icon: '🌦️' },
            82: { description: 'Violent rain showers', icon: '🌦️' },
            85: { description: 'Slight snow showers', icon: '🌨️' },
            86: { description: 'Heavy snow showers', icon: '🌨️' },
            95: { description: 'Thunderstorm', icon: '⛈️' },
            96: { description: 'Thunderstorm with slight hail', icon: '⛈️' },
            99: { description: 'Thunderstorm with heavy hail', icon: '⛈️' }
        };

        function getUrlParams() {
            const params = new URLSearchParams(window.location.search);
            const today = new Date().toISOString().split('T')[0];
            return {
                lat: parseFloat(params.get('lat') || '52.52'),
                lon: parseFloat(params.get('lon') || '13.405'),
                name: params.get('name') || 'Berlin',
                date: params.get('date') || today
            };
        }

        function formatDate(dateString) {
            const date = new Date(dateString + 'T00:00:00Z');
            return date.toLocaleDateString('en-US', { 
                weekday: 'long', 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric',
                timeZone: 'UTC'
            });
        }

        function formatHour(hour) {
            return `${hour.toString().padStart(2, '0')}:00`;
        }

        function isPastDate(dateString) {
            const today = new Date().toISOString().split('T')[0];
            return dateString < today;
        }

        async function fetchWeatherData(params) {
            const isPast = isPastDate(params.date);
            const endpoint = isPast ? '/api/om/archive' : '/api/om/forecast';
            
            const url = `${endpoint}?latitude=${params.lat}&longitude=${params.lon}&daily=temperature_2m_max,temperature_2m_min,weather_code&hourly=temperature_2m&timezone=UTC&temperature_unit=celsius&start_date=${params.date}&end_date=${params.date}`;
            
            const response = await fetch(url);
            if (!response.ok) {
                throw new Error(`Failed to fetch weather data: ${response.status}`);
            }
            return response.json();
        }

        function renderWeather(data, params) {
            const weatherCode = data.daily.weather_code[0];
            const weatherInfo = weatherCodes[weatherCode] || { description: 'Unknown', icon: '❓' };
            const maxTemp = Math.round(data.daily.temperature_2m_max[0]);
            const minTemp = Math.round(data.daily.temperature_2m_min[0]);
            
            const hourlyTemps = data.hourly.temperature_2m.map((temp, index) => ({
                hour: index,
                temp: Math.round(temp)
            }));

            const html = `
                <div class="header">
                    <div class="location">${params.name}</div>
                    <div class="date">${formatDate(params.date)}</div>
                </div>
                <div class="main-weather">
                    <div class="temperature-display">
                        <div class="temp-large">${maxTemp}°</div>
                        <div class="temp-range">${minTemp}°</div>
                    </div>
                    <div>
                        <div class="weather-icon">${weatherInfo.icon}</div>
                        <div class="weather-condition">${weatherInfo.description}</div>
                    </div>
                </div>
                <div class="hourly-section">
                    <div class="hourly-title">Hourly Temperature</div>
                    <div class="hourly-grid">
                        ${hourlyTemps.map(item => `
                            <div class="hourly-item">
                                <div class="hourly-time">${formatHour(item.hour)}</div>
                                <div class="hourly-temp">${item.temp}°</div>
                            </div>
                        `).join('')}
                    </div>
                </div>
            `;

            document.querySelector('.weather-card').innerHTML = html;
        }

        function renderError(message) {
            document.querySelector('.weather-card').innerHTML = `
                <div class="error-message">
                    ${message}
                </div>
            `;
        }

        async function init() {
            try {
                const params = getUrlParams();
                const data = await fetchWeatherData(params);
                renderWeather(data, params);
            } catch (error) {
                renderError('Unable to load weather data. Please try again later.');
                console.error('Weather data error:', error);
            }
        }

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