claude-sonnet-4 · cursor

<!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;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

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

        .location {
            font-size: 28px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 8px;
        }

        .date {
            font-size: 16px;
            color: #718096;
            margin-bottom: 32px;
            font-weight: 500;
        }

        .weather-icon {
            font-size: 80px;
            margin-bottom: 24px;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
        }

        .condition {
            font-size: 22px;
            color: #4a5568;
            margin-bottom: 32px;
            font-weight: 500;
        }

        .temperature-range {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-bottom: 40px;
        }

        .temp-item {
            text-align: center;
        }

        .temp-label {
            font-size: 14px;
            color: #718096;
            margin-bottom: 8px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .temp-value {
            font-size: 36px;
            font-weight: 700;
            color: #2d3748;
        }

        .max-temp {
            color: #e53e3e;
        }

        .min-temp {
            color: #3182ce;
        }

        .hourly-section {
            margin-top: 40px;
            padding-top: 32px;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }

        .hourly-title {
            font-size: 18px;
            color: #4a5568;
            margin-bottom: 24px;
            font-weight: 600;
        }

        .hourly-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
            gap: 16px;
            max-height: 200px;
            overflow-y: auto;
        }

        .hourly-item {
            background: rgba(255, 255, 255, 0.6);
            border-radius: 12px;
            padding: 12px 8px;
            text-align: center;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .hour-label {
            font-size: 12px;
            color: #718096;
            margin-bottom: 4px;
            font-weight: 500;
        }

        .hour-temp {
            font-size: 16px;
            font-weight: 600;
            color: #2d3748;
        }

        .error {
            color: #e53e3e;
            font-size: 18px;
            font-weight: 500;
            text-align: center;
            padding: 40px;
            background: rgba(254, 226, 226, 0.8);
            border-radius: 12px;
            border: 1px solid rgba(254, 178, 178, 0.5);
        }

        .loading {
            color: #4a5568;
            font-size: 18px;
            text-align: center;
            padding: 40px;
        }

        .loading::after {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-left: 10px;
            border: 2px solid #cbd5e0;
            border-top: 2px solid #4a5568;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="weather-card" id="weatherCard">
        <div class="loading">Loading weather data...</div>
    </div>

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

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

        // Format date for display
        function formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleDateString('en-US', { 
                weekday: 'long', 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric' 
            });
        }

        // Determine if date is in the past
        function isPastDate(dateString) {
            const inputDate = new Date(dateString);
            const today = new Date();
            today.setHours(0, 0, 0, 0);
            inputDate.setHours(0, 0, 0, 0);
            return inputDate < today;
        }

        // Fetch weather data
        async function fetchWeatherData(params) {
            const { lat, lon, date } = params;
            const isPast = isPastDate(date);
            const endpoint = isPast ? '/api/om/archive' : '/api/om/forecast';
            
            const url = new URL(endpoint, window.location.origin);
            url.searchParams.append('latitude', lat);
            url.searchParams.append('longitude', lon);
            url.searchParams.append('daily', 'temperature_2m_max,temperature_2m_min,weather_code');
            url.searchParams.append('hourly', 'temperature_2m');
            url.searchParams.append('timezone', 'UTC');
            url.searchParams.append('temperature_unit', 'celsius');
            url.searchParams.append('start_date', date);
            url.searchParams.append('end_date', date);

            const response = await fetch(url);
            if (!response.ok) {
                throw new Error(`Weather API error: ${response.status}`);
            }
            
            return await response.json();
        }

        // Render weather card
        function renderWeatherCard(params, data) {
            const { name, date } = params;
            const daily = data.daily;
            const hourly = data.hourly;

            if (!daily || !daily.temperature_2m_max || !daily.temperature_2m_max[0] === undefined) {
                throw new Error('Invalid weather data received');
            }

            const maxTemp = Math.round(daily.temperature_2m_max[0]);
            const minTemp = Math.round(daily.temperature_2m_min[0]);
            const weatherCode = daily.weather_code[0];
            const condition = weatherConditions[weatherCode] || { name: 'Unknown', icon: '❓' };

            const card = document.getElementById('weatherCard');
            card.innerHTML = `
                <div class="location">${name}</div>
                <div class="date">${formatDate(date)}</div>
                <div class="weather-icon">${condition.icon}</div>
                <div class="condition">${condition.name}</div>
                <div class="temperature-range">
                    <div class="temp-item">
                        <div class="temp-label">High</div>
                        <div class="temp-value max-temp">${maxTemp}°</div>
                    </div>
                    <div class="temp-item">
                        <div class="temp-label">Low</div>
                        <div class="temp-value min-temp">${minTemp}°</div>
                    </div>
                </div>
                <div class="hourly-section">
                    <div class="hourly-title">Hourly Temperature</div>
                    <div class="hourly-grid">
                        ${hourly.time.map((time, index) => {
                            const hour = new Date(time).getUTCHours();
                            const temp = Math.round(hourly.temperature_2m[index]);
                            return `
                                <div class="hourly-item">
                                    <div class="hour-label">${hour.toString().padStart(2, '0')}:00</div>
                                    <div class="hour-temp">${temp}°</div>
                                </div>
                            `;
                        }).join('')}
                    </div>
                </div>
            `;
        }

        // Show error message
        function showError(message) {
            const card = document.getElementById('weatherCard');
            card.innerHTML = `<div class="error">Unable to load weather data: ${message}</div>`;
        }

        // Initialize the weather card
        async function init() {
            try {
                const params = getUrlParams();
                const data = await fetchWeatherData(params);
                renderWeatherCard(params, data);
            } catch (error) {
                console.error('Weather card error:', error);
                showError(error.message);
            }
        }

        // Start the application
        init();
    </script>
</body>
</html>