claude-sonnet-4-thinking · 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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1280px;
            height: 800px;
            overflow: hidden;
        }

        .weather-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 24px;
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
            width: 600px;
            max-width: 90vw;
            animation: slideIn 0.8s ease-out;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

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

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

        .date {
            font-size: 1.2rem;
            color: #636e72;
            margin-bottom: 32px;
            text-align: center;
        }

        .main-weather {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 32px;
            padding: 24px;
            background: linear-gradient(135deg, #fdcb6e 0%, #e84393 100%);
            border-radius: 16px;
            color: white;
        }

        .weather-icon {
            font-size: 4rem;
            margin-right: 20px;
        }

        .temperature-info {
            flex: 1;
        }

        .main-temp {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 8px;
        }

        .temp-range {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .weather-condition {
            font-size: 1.3rem;
            font-weight: 500;
            text-align: right;
        }

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

        .hourly-title {
            font-size: 1.4rem;
            font-weight: 600;
            color: #2d3436;
            margin-bottom: 16px;
        }

        .hourly-container {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            padding: 16px;
            background: #f8f9fa;
            border-radius: 12px;
        }

        .hourly-item {
            flex-shrink: 0;
            text-align: center;
            padding: 12px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            min-width: 60px;
            transition: transform 0.2s ease;
        }

        .hourly-item:hover {
            transform: translateY(-2px);
        }

        .hour {
            font-size: 0.9rem;
            color: #636e72;
            margin-bottom: 4px;
        }

        .hourly-temp {
            font-size: 1.1rem;
            font-weight: 600;
            color: #2d3436;
        }

        .error {
            text-align: center;
            color: #e74c3c;
            font-size: 1.2rem;
            padding: 20px;
            background: #fff5f5;
            border-radius: 8px;
            border: 1px solid #fecaca;
        }

        .loading {
            text-align: center;
            color: #636e72;
            font-size: 1.2rem;
        }

        .spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #74b9ff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 8px;
        }

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

    <script>
        // Parse URL parameters
        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
            };
        }

        // Weather code to icon and description mapping
        function getWeatherInfo(code) {
            const weatherMap = {
                0: { icon: '☀️', desc: 'Clear sky' },
                1: { icon: '🌤️', desc: 'Mainly clear' },
                2: { icon: '⛅', desc: 'Partly cloudy' },
                3: { icon: '☁️', desc: 'Overcast' },
                45: { icon: '🌫️', desc: 'Fog' },
                48: { icon: '🌫️', desc: 'Depositing rime fog' },
                51: { icon: '🌦️', desc: 'Light drizzle' },
                53: { icon: '🌦️', desc: 'Moderate drizzle' },
                55: { icon: '🌦️', desc: 'Dense drizzle' },
                56: { icon: '🌦️', desc: 'Light freezing drizzle' },
                57: { icon: '🌦️', desc: 'Dense freezing drizzle' },
                61: { icon: '🌧️', desc: 'Slight rain' },
                63: { icon: '🌧️', desc: 'Moderate rain' },
                65: { icon: '🌧️', desc: 'Heavy rain' },
                66: { icon: '🌧️', desc: 'Light freezing rain' },
                67: { icon: '🌧️', desc: 'Heavy freezing rain' },
                71: { icon: '❄️', desc: 'Slight snow fall' },
                73: { icon: '❄️', desc: 'Moderate snow fall' },
                75: { icon: '❄️', desc: 'Heavy snow fall' },
                77: { icon: '❄️', desc: 'Snow grains' },
                80: { icon: '🌦️', desc: 'Slight rain showers' },
                81: { icon: '🌦️', desc: 'Moderate rain showers' },
                82: { icon: '🌦️', desc: 'Violent rain showers' },
                85: { icon: '🌨️', desc: 'Slight snow showers' },
                86: { icon: '🌨️', desc: 'Heavy snow showers' },
                95: { icon: '⛈️', desc: 'Thunderstorm' },
                96: { icon: '⛈️', desc: 'Thunderstorm with slight hail' },
                99: { icon: '⛈️', desc: 'Thunderstorm with heavy hail' }
            };
            
            return weatherMap[code] || { icon: '❓', desc: 'Unknown' };
        }

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

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

        // Fetch weather data
        async function fetchWeatherData(params) {
            const { lat, lon, date } = params;
            const apiPath = isPastDate(date) ? '/api/om/archive' : '/api/om/forecast';
            
            const url = new URL(apiPath, window.location.origin);
            url.searchParams.set('latitude', lat);
            url.searchParams.set('longitude', 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', date);
            url.searchParams.set('end_date', date);

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

        // Render weather card
        function renderWeatherCard(params, data) {
            const { name, date } = params;
            const daily = data.daily;
            const hourly = data.hourly;
            
            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 weatherInfo = getWeatherInfo(weatherCode);
            
            // Filter hourly data for the specific date
            const targetDate = date;
            const hourlyTemps = [];
            
            for (let i = 0; i < hourly.time.length; i++) {
                if (hourly.time[i].startsWith(targetDate)) {
                    const hour = new Date(hourly.time[i]).getUTCHours();
                    hourlyTemps.push({
                        hour: hour,
                        temp: Math.round(hourly.temperature_2m[i])
                    });
                }
            }

            const content = `
                <div class="location">${name}</div>
                <div class="date">${formatDate(date)}</div>
                
                <div class="main-weather">
                    <div class="weather-icon">${weatherInfo.icon}</div>
                    <div class="temperature-info">
                        <div class="main-temp">${maxTemp}°C</div>
                        <div class="temp-range">${minTemp}°C - ${maxTemp}°C</div>
                    </div>
                    <div class="weather-condition">${weatherInfo.desc}</div>
                </div>

                <div class="hourly-section">
                    <div class="hourly-title">Hourly Temperature</div>
                    <div class="hourly-container">
                        ${hourlyTemps.map(item => `
                            <div class="hourly-item">
                                <div class="hour">${String(item.hour).padStart(2, '0')}:00</div>
                                <div class="hourly-temp">${item.temp}°C</div>
                            </div>
                        `).join('')}
                    </div>
                </div>
            `;
            
            document.getElementById('content').innerHTML = content;
        }

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

        // Main initialization
        async function init() {
            try {
                const params = getUrlParams();
                const data = await fetchWeatherData(params);
                renderWeatherCard(params, data);
            } catch (error) {
                console.error('Weather data fetch failed:', error);
                showError(error.message);
            }
        }

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