claude-sonnet-4-5 · 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: 100vh;
            padding: 40px;
        }

        .weather-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 24px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            padding: 48px;
            max-width: 900px;
            width: 100%;
        }

        .header {
            margin-bottom: 40px;
        }

        .location {
            font-size: 42px;
            font-weight: 700;
            color: #1a202c;
            margin-bottom: 8px;
        }

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

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

        .temperature-section {
            flex: 1;
        }

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

        .temp-max {
            font-size: 72px;
            font-weight: 700;
            line-height: 1;
        }

        .temp-min {
            font-size: 48px;
            font-weight: 400;
            opacity: 0.8;
        }

        .temp-unit {
            font-size: 32px;
            font-weight: 300;
            opacity: 0.9;
        }

        .weather-condition {
            font-size: 24px;
            font-weight: 500;
            opacity: 0.95;
        }

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

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

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

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

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

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

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

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

        .error {
            color: #e53e3e;
            font-size: 18px;
            text-align: center;
            padding: 32px;
            background: #fff5f5;
            border-radius: 12px;
            border: 2px solid #fc8181;
        }

        .loading {
            text-align: center;
            font-size: 20px;
            color: #4a5568;
            padding: 32px;
        }
    </style>
</head>
<body>
    <div class="weather-card">
        <div class="loading" id="loading">Loading weather data...</div>
        <div id="content" style="display: none;"></div>
    </div>

    <script>
        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: 'Depositing rime fog', icon: '🌫️' },
            51: { description: 'Light drizzle', icon: '🌦️' },
            53: { description: 'Moderate drizzle', icon: '🌦️' },
            55: { description: 'Dense drizzle', icon: '🌧️' },
            56: { description: 'Light freezing drizzle', icon: '🌧️' },
            57: { description: 'Dense freezing drizzle', icon: '🌧️' },
            61: { description: 'Slight rain', icon: '🌧️' },
            63: { description: 'Moderate rain', icon: '🌧️' },
            65: { description: 'Heavy rain', icon: '⛈️' },
            66: { description: 'Light freezing rain', icon: '🌧️' },
            67: { description: 'Heavy freezing rain', icon: '🌧️' },
            71: { description: 'Slight snow', icon: '🌨️' },
            73: { description: 'Moderate snow', icon: '🌨️' },
            75: { description: 'Heavy snow', icon: '❄️' },
            77: { description: 'Snow grains', icon: '❄️' },
            80: { description: 'Slight rain showers', icon: '🌦️' },
            81: { description: 'Moderate rain showers', icon: '🌧️' },
            82: { description: 'Violent rain showers', icon: '⛈️' },
            85: { description: 'Slight snow showers', icon: '🌨️' },
            86: { description: 'Heavy snow showers', icon: '❄️' },
            95: { description: 'Thunderstorm', icon: '⛈️' },
            96: { description: 'Thunderstorm with slight hail', icon: '⛈️' },
            99: { description: 'Thunderstorm with heavy hail', icon: '⛈️' }
        };

        function getQueryParams() {
            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');
            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
            return date.toLocaleDateString('en-US', options);
        }

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

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

        function renderWeather(data, params) {
            const daily = data.daily;
            const hourly = data.hourly;

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

            const dateObj = new Date(params.date + 'T00:00:00Z');
            const hourlyTemps = [];
            
            for (let i = 0; i < hourly.time.length; i++) {
                const hourDate = new Date(hourly.time[i]);
                if (hourDate.toISOString().split('T')[0] === params.date) {
                    hourlyTemps.push({
                        hour: hourDate.getUTCHours(),
                        temp: hourly.temperature_2m[i]
                    });
                }
            }

            const html = `
                <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">
                            <span class="temp-max">${Math.round(tempMax)}</span>
                            <span class="temp-min">${Math.round(tempMin)}</span>
                            <span class="temp-unit">°C</span>
                        </div>
                        <div class="weather-condition">${weatherInfo.description}</div>
                    </div>
                    <div class="weather-icon">${weatherInfo.icon}</div>
                </div>
                <div class="hourly-section">
                    <div class="hourly-title">Hourly Temperature</div>
                    <div class="hourly-temps">
                        ${hourlyTemps.map(h => `
                            <div class="hour-item">
                                <div class="hour-time">${h.hour.toString().padStart(2, '0')}:00</div>
                                <div class="hour-temp">${Math.round(h.temp)}°</div>
                            </div>
                        `).join('')}
                    </div>
                </div>
            `;

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

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

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

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