claude-sonnet-4-5-thinking · cursor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1280, height=800">
    <title>Weather Card</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            width: 1280px;
            height: 800px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .weather-card {
            width: 900px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 32px;
            padding: 60px;
            box-shadow: 0 30px 90px rgba(0, 0, 0, 0.3);
            animation: fadeIn 0.6s ease-out;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .location {
            font-size: 42px;
            font-weight: 700;
            color: #1a202c;
            margin-bottom: 8px;
        }
        
        .date {
            font-size: 18px;
            color: #718096;
            margin-bottom: 40px;
            font-weight: 500;
        }
        
        .main-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 50px;
            padding-bottom: 40px;
            border-bottom: 2px solid #e2e8f0;
        }
        
        .temperature {
            display: flex;
            align-items: baseline;
            gap: 20px;
        }
        
        .temp-main {
            font-size: 96px;
            font-weight: 300;
            color: #2d3748;
            line-height: 1;
        }
        
        .temp-range {
            display: flex;
            flex-direction: column;
            gap: 8px;
            font-size: 24px;
            color: #4a5568;
        }
        
        .temp-high::before {
            content: '↑ ';
            color: #f56565;
        }
        
        .temp-low::before {
            content: '↓ ';
            color: #4299e1;
        }
        
        .weather-icon {
            font-size: 120px;
            line-height: 1;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
        }
        
        .condition {
            font-size: 28px;
            color: #2d3748;
            margin-top: 12px;
            font-weight: 600;
        }
        
        .hourly-section {
            margin-top: 40px;
        }
        
        .hourly-title {
            font-size: 20px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 24px;
        }
        
        .hourly-temps {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 12px;
        }
        
        .hour-item {
            text-align: center;
            padding: 16px 8px;
            background: linear-gradient(135deg, #667eea20 0%, #764ba220 100%);
            border-radius: 16px;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .hour-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
        }
        
        .hour-time {
            font-size: 14px;
            color: #718096;
            margin-bottom: 8px;
            font-weight: 600;
        }
        
        .hour-temp {
            font-size: 22px;
            font-weight: 700;
            color: #2d3748;
        }
        
        .error {
            color: #e53e3e;
            font-size: 24px;
            text-align: center;
            padding: 40px;
            font-weight: 600;
        }
        
        .loading {
            text-align: center;
            font-size: 24px;
            color: #4a5568;
            padding: 40px;
        }
    </style>
</head>
<body>
    <div class="weather-card">
        <div class="loading">Loading weather data...</div>
    </div>
    
    <script>
        const params = new URLSearchParams(window.location.search);
        const lat = parseFloat(params.get('lat')) || 52.52;
        const lon = parseFloat(params.get('lon')) || 13.405;
        const locationName = params.get('name') || 'Berlin';
        const requestedDate = params.get('date') || new Date().toISOString().split('T')[0];
        
        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: 'Foggy', icon: '🌫️' },
            51: { description: 'Light drizzle', icon: '🌦️' },
            53: { description: 'Drizzle', icon: '🌦️' },
            55: { description: 'Heavy drizzle', icon: '🌧️' },
            61: { description: 'Light rain', icon: '🌧️' },
            63: { description: 'Rain', icon: '🌧️' },
            65: { description: 'Heavy rain', icon: '⛈️' },
            71: { description: 'Light snow', icon: '🌨️' },
            73: { description: 'Snow', icon: '❄️' },
            75: { description: 'Heavy snow', icon: '❄️' },
            77: { description: 'Snow grains', icon: '❄️' },
            80: { description: 'Light showers', icon: '🌦️' },
            81: { description: 'Showers', icon: '🌧️' },
            82: { description: 'Heavy showers', icon: '⛈️' },
            85: { description: 'Light snow showers', icon: '🌨️' },
            86: { description: 'Snow showers', icon: '❄️' },
            95: { description: 'Thunderstorm', icon: '⛈️' },
            96: { description: 'Thunderstorm with hail', icon: '⛈️' },
            99: { description: 'Thunderstorm with hail', icon: '⛈️' }
        };
        
        function getWeatherInfo(code) {
            return weatherCodes[code] || { description: 'Unknown', icon: '🌍' };
        }
        
        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 isDateInPast(dateStr) {
            const today = new Date().toISOString().split('T')[0];
            return dateStr < today;
        }
        
        async function fetchWeatherData() {
            try {
                const apiPath = isDateInPast(requestedDate) ? '/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', requestedDate);
                url.searchParams.set('end_date', requestedDate);
                
                const response = await fetch(url);
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const data = await response.json();
                displayWeather(data);
            } catch (error) {
                displayError(`Unable to load weather data: ${error.message}`);
            }
        }
        
        function displayWeather(data) {
            if (!data.daily || !data.hourly) {
                displayError('Invalid weather data received');
                return;
            }
            
            const tempMax = Math.round(data.daily.temperature_2m_max[0]);
            const tempMin = Math.round(data.daily.temperature_2m_min[0]);
            const tempAvg = Math.round((tempMax + tempMin) / 2);
            const weatherCode = data.daily.weather_code[0];
            const weatherInfo = getWeatherInfo(weatherCode);
            
            const dateObj = new Date(requestedDate + 'T00:00:00Z');
            const hourlyTemps = [];
            
            for (let i = 0; i < 24; i++) {
                const hourDate = new Date(data.hourly.time[i]);
                if (hourDate.getUTCDate() === dateObj.getUTCDate()) {
                    hourlyTemps.push({
                        hour: hourDate.getUTCHours(),
                        temp: Math.round(data.hourly.temperature_2m[i])
                    });
                }
            }
            
            const card = document.querySelector('.weather-card');
            card.innerHTML = `
                <div class="location">${locationName}</div>
                <div class="date">${formatDate(requestedDate)}</div>
                
                <div class="main-info">
                    <div class="temperature">
                        <div class="temp-main">${tempAvg}°</div>
                        <div class="temp-range">
                            <div class="temp-high">${tempMax}°C</div>
                            <div class="temp-low">${tempMin}°C</div>
                        </div>
                    </div>
                    <div style="text-align: right;">
                        <div class="weather-icon">${weatherInfo.icon}</div>
                        <div class="condition">${weatherInfo.description}</div>
                    </div>
                </div>
                
                <div class="hourly-section">
                    <div class="hourly-title">Hourly Temperature</div>
                    <div class="hourly-temps">
                        ${hourlyTemps.slice(0, 12).map(hour => `
                            <div class="hour-item">
                                <div class="hour-time">${hour.hour.toString().padStart(2, '0')}:00</div>
                                <div class="hour-temp">${hour.temp}°</div>
                            </div>
                        `).join('')}
                    </div>
                    ${hourlyTemps.length > 12 ? `
                        <div class="hourly-temps" style="margin-top: 12px;">
                            ${hourlyTemps.slice(12, 24).map(hour => `
                                <div class="hour-item">
                                    <div class="hour-time">${hour.hour.toString().padStart(2, '0')}:00</div>
                                    <div class="hour-temp">${hour.temp}°</div>
                                </div>
                            `).join('')}
                        </div>
                    ` : ''}
                </div>
            `;
        }
        
        function displayError(message) {
            const card = document.querySelector('.weather-card');
            card.innerHTML = `<div class="error">${message}</div>`;
        }
        
        fetchWeatherData();
    </script>
</body>
</html>