claude-sonnet-4 · 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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

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

        .weather-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 24px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
            padding: 40px;
            width: 100%;
            max-width: 800px;
            min-height: 500px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
        }

        .location {
            font-size: 2.5rem;
            font-weight: 700;
            color: #2d3748;
            margin-bottom: 8px;
        }

        .date {
            font-size: 1.2rem;
            color: #718096;
            font-weight: 500;
        }

        .main-weather {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
            padding: 30px 0;
            border-bottom: 2px solid rgba(113, 128, 150, 0.1);
        }

        .temperature-section {
            text-align: left;
        }

        .temp-range {
            display: flex;
            align-items: baseline;
            gap: 20px;
            margin-bottom: 16px;
        }

        .temp-max {
            font-size: 4rem;
            font-weight: 800;
            color: #2d3748;
            line-height: 1;
        }

        .temp-min {
            font-size: 2.5rem;
            font-weight: 600;
            color: #718096;
            line-height: 1;
        }

        .temp-labels {
            display: flex;
            gap: 20px;
            font-size: 0.9rem;
            color: #a0aec0;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

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

        .weather-icon {
            font-size: 5rem;
            margin-bottom: 16px;
            display: block;
        }

        .condition-text {
            font-size: 1.4rem;
            font-weight: 600;
            color: #4a5568;
            text-transform: capitalize;
        }

        .hourly-section {
            margin-top: 40px;
        }

        .section-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: #2d3748;
            margin-bottom: 24px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

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

        .hour-item {
            background: rgba(102, 126, 234, 0.1);
            border-radius: 16px;
            padding: 16px 8px;
            text-align: center;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .hour-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
        }

        .hour-time {
            font-size: 0.9rem;
            color: #718096;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .hour-temp {
            font-size: 1.4rem;
            font-weight: 700;
            color: #2d3748;
        }

        .error-message {
            text-align: center;
            color: #e53e3e;
            font-size: 1.2rem;
            font-weight: 600;
            padding: 40px;
            background: rgba(254, 226, 226, 0.8);
            border-radius: 16px;
            border: 2px solid rgba(229, 62, 62, 0.2);
        }

        .loading {
            text-align: center;
            color: #4a5568;
            font-size: 1.2rem;
            font-weight: 600;
            padding: 40px;
        }

        .loading::after {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid #e2e8f0;
            border-radius: 50%;
            border-top-color: #667eea;
            animation: spin 1s ease-in-out infinite;
            margin-left: 12px;
        }

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

        .celsius {
            font-size: 0.6em;
            color: #a0aec0;
            font-weight: 500;
        }

        @media (max-width: 768px) {
            .weather-card {
                padding: 30px 20px;
                margin: 10px;
            }
            
            .location {
                font-size: 2rem;
            }
            
            .main-weather {
                flex-direction: column;
                text-align: center;
                gap: 30px;
            }
            
            .weather-condition {
                text-align: center;
            }
            
            .hourly-temps {
                grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
            }
        }
    </style>
</head>
<body>
    <div class="weather-card">
        <div id="content">
            <div class="loading">Loading weather data...</div>
        </div>
    </div>

    <script>
        // Weather code mappings
        const weatherCodes = {
            0: { text: 'Clear sky', icon: '☀️' },
            1: { text: 'Mainly clear', icon: '🌤️' },
            2: { text: 'Partly cloudy', icon: '⛅' },
            3: { text: 'Overcast', icon: '☁️' },
            45: { text: 'Fog', icon: '🌫️' },
            48: { text: 'Depositing rime fog', icon: '🌫️' },
            51: { text: 'Light drizzle', icon: '🌦️' },
            53: { text: 'Moderate drizzle', icon: '🌦️' },
            55: { text: 'Dense drizzle', icon: '🌧️' },
            56: { text: 'Light freezing drizzle', icon: '🌨️' },
            57: { text: 'Dense freezing drizzle', icon: '🌨️' },
            61: { text: 'Slight rain', icon: '🌦️' },
            63: { text: 'Moderate rain', icon: '🌧️' },
            65: { text: 'Heavy rain', icon: '🌧️' },
            66: { text: 'Light freezing rain', icon: '🌨️' },
            67: { text: 'Heavy freezing rain', icon: '🌨️' },
            71: { text: 'Slight snow fall', icon: '❄️' },
            73: { text: 'Moderate snow fall', icon: '🌨️' },
            75: { text: 'Heavy snow fall', icon: '🌨️' },
            77: { text: 'Snow grains', icon: '❄️' },
            80: { text: 'Slight rain showers', icon: '🌦️' },
            81: { text: 'Moderate rain showers', icon: '🌧️' },
            82: { text: 'Violent rain showers', icon: '⛈️' },
            85: { text: 'Slight snow showers', icon: '🌨️' },
            86: { text: 'Heavy snow showers', icon: '🌨️' },
            95: { text: 'Thunderstorm', icon: '⛈️' },
            96: { text: 'Thunderstorm with slight hail', icon: '⛈️' },
            99: { text: '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(dateStr) {
            const date = new Date(dateStr + 'T00:00:00Z');
            return date.toLocaleDateString('en-US', { 
                weekday: 'long', 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric',
                timeZone: 'UTC'
            });
        }

        function getWeatherInfo(code) {
            return weatherCodes[code] || { text: 'Unknown', icon: '❓' };
        }

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

        function showError(message) {
            document.getElementById('content').innerHTML = `
                <div class="error-message">${message}</div>
            `;
        }

        function renderWeatherCard(data, params) {
            const weather = getWeatherInfo(data.daily.weather_code[0]);
            const maxTemp = Math.round(data.daily.temperature_2m_max[0]);
            const minTemp = Math.round(data.daily.temperature_2m_min[0]);
            
            let hourlyHtml = '';
            if (data.hourly && data.hourly.temperature_2m) {
                for (let i = 0; i < data.hourly.temperature_2m.length; i++) {
                    const temp = Math.round(data.hourly.temperature_2m[i]);
                    hourlyHtml += `
                        <div class="hour-item">
                            <div class="hour-time">${i.toString().padStart(2, '0')}:00</div>
                            <div class="hour-temp">${temp}<span class="celsius">°C</span></div>
                        </div>
                    `;
                }
            }

            document.getElementById('content').innerHTML = `
                <div class="header">
                    <div class="location">${params.name}</div>
                    <div class="date">${formatDate(params.date)}</div>
                </div>
                
                <div class="main-weather">
                    <div class="temperature-section">
                        <div class="temp-range">
                            <div class="temp-max">${maxTemp}<span class="celsius">°C</span></div>
                            <div class="temp-min">${minTemp}<span class="celsius">°C</span></div>
                        </div>
                        <div class="temp-labels">
                            <span>High</span>
                            <span>Low</span>
                        </div>
                    </div>
                    
                    <div class="weather-condition">
                        <span class="weather-icon">${weather.icon}</span>
                        <div class="condition-text">${weather.text}</div>
                    </div>
                </div>
                
                <div class="hourly-section">
                    <div class="section-title">Hourly Temperature</div>
                    <div class="hourly-temps">
                        ${hourlyHtml}
                    </div>
                </div>
            `;
        }

        async function loadWeatherData() {
            const params = getUrlParams();
            
            try {
                const isPast = isDateInPast(params.date);
                const apiEndpoint = isPast ? '/api/om/archive' : '/api/om/forecast';
                
                const url = new URL(apiEndpoint, window.location.origin);
                url.searchParams.set('latitude', params.lat);
                url.searchParams.set('longitude', params.lon);
                url.searchParams.set('daily', 'temperature_2m_max,temperature_2m_min,weather_code');
                url.searchParams.set('hourly', 'temperature_2m');
                url.searchParams.set('timezone', 'UTC');
                url.searchParams.set('temperature_unit', 'celsius');
                url.searchParams.set('start_date', params.date);
                url.searchParams.set('end_date', params.date);

                const response = await fetch(url);
                
                if (!response.ok) {
                    throw new Error(`Failed to fetch weather data (${response.status})`);
                }
                
                const data = await response.json();
                
                if (!data.daily || !data.daily.temperature_2m_max || data.daily.temperature_2m_max.length === 0) {
                    throw new Error('No weather data available for this date');
                }
                
                renderWeatherCard(data, params);
                
            } catch (error) {
                console.error('Weather data loading failed:', error);
                showError('Unable to load weather data. Please check your connection and try again.');
            }
        }

        // Start loading weather data when page loads
        document.addEventListener('DOMContentLoaded', loadWeatherData);
    </script>
</body>
</html>