claude-sonnet-4-5-thinking · cursor-xl

<!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, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            justify-content: center;
            align-items: 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;
            width: 100%;
            max-width: 900px;
            backdrop-filter: blur(10px);
        }

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

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

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

        .main-weather {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin: 40px 0;
            padding: 32px;
            background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
            border-radius: 16px;
        }

        .weather-icon {
            font-size: 96px;
            line-height: 1;
        }

        .temperature-display {
            text-align: center;
        }

        .current-temp {
            font-size: 72px;
            font-weight: 700;
            color: #2d3748;
            line-height: 1;
        }

        .temp-range {
            font-size: 20px;
            color: #718096;
            margin-top: 12px;
        }

        .temp-high {
            color: #e53e3e;
        }

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

        .condition {
            text-align: center;
        }

        .condition-text {
            font-size: 28px;
            font-weight: 600;
            color: #4a5568;
        }

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

        .hourly-title {
            font-size: 20px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 20px;
        }

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

        .hourly-item {
            text-align: center;
            padding: 16px 8px;
            background: #f7fafc;
            border-radius: 12px;
            transition: transform 0.2s, box-shadow 0.2s;
        }

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

        .hourly-time {
            font-size: 14px;
            color: #718096;
            font-weight: 500;
            margin-bottom: 8px;
        }

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

        .error {
            text-align: center;
            color: #e53e3e;
            font-size: 20px;
            padding: 40px;
        }

        .loading {
            text-align: center;
            color: #4a5568;
            font-size: 20px;
            padding: 40px;
        }
    </style>
</head>
<body>
    <div class="weather-card">
        <div class="loading" id="loading">Loading weather data...</div>
        <div id="content" style="display: none;">
            <div class="header">
                <div class="location" id="location"></div>
                <div class="date" id="date"></div>
            </div>
            <div class="main-weather">
                <div class="weather-icon" id="weatherIcon"></div>
                <div class="temperature-display">
                    <div class="current-temp" id="currentTemp"></div>
                    <div class="temp-range">
                        <span class="temp-high" id="tempMax"></span> / <span class="temp-low" id="tempMin"></span>
                    </div>
                </div>
                <div class="condition">
                    <div class="condition-text" id="condition"></div>
                </div>
            </div>
            <div class="hourly-section">
                <div class="hourly-title">Hourly Temperature</div>
                <div class="hourly-grid" id="hourlyGrid"></div>
            </div>
        </div>
        <div class="error" id="error" style="display: none;"></div>
    </div>

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

        function getQueryParams() {
            const params = new URLSearchParams(window.location.search);
            const today = new Date();
            const todayStr = today.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') || todayStr
            };
        }

        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 isPastDate(dateStr) {
            const date = new Date(dateStr + 'T00:00:00Z');
            const today = new Date();
            today.setUTCHours(0, 0, 0, 0);
            return date < today;
        }

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

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

        function displayWeather(data, params) {
            document.getElementById('location').textContent = params.name;
            document.getElementById('date').textContent = formatDate(params.date);

            const tempMax = Math.round(data.daily.temperature_2m_max[0]);
            const tempMin = Math.round(data.daily.temperature_2m_min[0]);
            const weatherCode = data.daily.weather_code[0];
            const weatherInfo = getWeatherInfo(weatherCode);

            document.getElementById('weatherIcon').textContent = weatherInfo.icon;
            document.getElementById('currentTemp').textContent = `${tempMax}°`;
            document.getElementById('tempMax').textContent = `${tempMax}°`;
            document.getElementById('tempMin').textContent = `${tempMin}°`;
            document.getElementById('condition').textContent = weatherInfo.text;

            const hourlyGrid = document.getElementById('hourlyGrid');
            hourlyGrid.innerHTML = '';

            const datePrefix = params.date;
            for (let i = 0; i < data.hourly.time.length; i++) {
                if (data.hourly.time[i].startsWith(datePrefix)) {
                    const hour = new Date(data.hourly.time[i]).getUTCHours();
                    const temp = Math.round(data.hourly.temperature_2m[i]);
                    
                    const item = document.createElement('div');
                    item.className = 'hourly-item';
                    item.innerHTML = `
                        <div class="hourly-time">${hour.toString().padStart(2, '0')}:00</div>
                        <div class="hourly-temp">${temp}°</div>
                    `;
                    hourlyGrid.appendChild(item);
                }
            }

            document.getElementById('loading').style.display = 'none';
            document.getElementById('content').style.display = 'block';
        }

        function showError(message) {
            document.getElementById('loading').style.display = 'none';
            document.getElementById('error').textContent = `Unable to load weather data: ${message}`;
            document.getElementById('error').style.display = 'block';
        }

        async function init() {
            try {
                const params = getQueryParams();
                const data = await fetchWeatherData(params.lat, params.lon, params.date);
                displayWeather(data, params);
            } catch (error) {
                showError(error.message);
            }
        }

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