<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>김포 날씨 - 실시간 날씨 정보</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .weather-container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            max-width: 500px;
            width: 100%;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .weather-container::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            animation: shine 3s infinite;
            pointer-events: none;
        }

        @keyframes shine {
            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
            100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
        }

        .location {
            color: white;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .date {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1.1rem;
            margin-bottom: 30px;
        }

        .weather-main {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
            backdrop-filter: blur(5px);
        }

        .temperature {
            font-size: 4rem;
            font-weight: 300;
            color: white;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .weather-description {
            color: white;
            font-size: 1.5rem;
            margin-bottom: 20px;
            text-transform: capitalize;
        }

        .weather-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        .weather-details {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 30px;
        }

        .detail-item {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 20px;
            backdrop-filter: blur(5px);
            transition: transform 0.3s ease;
        }

        .detail-item:hover {
            transform: translateY(-5px);
        }

        .detail-label {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
            margin-bottom: 5px;
        }

        .detail-value {
            color: white;
            font-size: 1.2rem;
            font-weight: 600;
        }

        .loading {
            color: white;
            font-size: 1.2rem;
            text-align: center;
        }

        .error {
            color: #ff6b6b;
            background: rgba(255, 107, 107, 0.1);
            border-radius: 10px;
            padding: 20px;
            margin-top: 20px;
        }

        .refresh-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            padding: 12px 24px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 1rem;
            margin-top: 20px;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
        }

        .refresh-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.05);
        }

        @media (max-width: 480px) {
            .weather-container {
                padding: 20px;
            }
            
            .location {
                font-size: 2rem;
            }
            
            .temperature {
                font-size: 3rem;
            }
            
            .weather-details {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="weather-container">
        <h1 class="location">김포시</h1>
        <div class="date" id="current-date"></div>
        
        <div id="weather-content">
            <div class="loading">날씨 정보를 불러오는 중...</div>
        </div>
        
        <button class="refresh-btn" onclick="loadWeather()">새로고침</button>
    </div>

    <script>
        // 김포시 좌표 (위도: 37.6156, 경도: 126.7158)
        const KIMPO_LAT = 37.6156;
        const KIMPO_LON = 126.7158;
        
        // OpenWeatherMap API 키 (무료 계정으로 사용 가능)
        const API_KEY = 'YOUR_API_KEY'; // 실제 사용시 API 키를 입력하세요
        
        function getWeatherIcon(weatherCode) {
            const icons = {
                '01': '☀️', // 맑음
                '02': '⛅', // 구름 조금
                '03': '☁️', // 구름 많음
                '04': '☁️', // 흐림
                '09': '🌧️', // 소나기
                '10': '🌦️', // 비
                '11': '⛈️', // 천둥번개
                '13': '❄️', // 눈
                '50': '🌫️'  // 안개
            };
            
            const code = weatherCode.toString().substring(0, 2);
            return icons[code] || '🌤️';
        }

        function formatDate() {
            const now = new Date();
            const options = { 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric', 
                weekday: 'long',
                hour: '2-digit',
                minute: '2-digit'
            };
            return now.toLocaleDateString('ko-KR', options);
        }

        function updateDate() {
            document.getElementById('current-date').textContent = formatDate();
        }

        async function loadWeather() {
            const weatherContent = document.getElementById('weather-content');
            
            try {
                // 실제 API 호출 대신 샘플 데이터 사용 (API 키가 필요하므로)
                // 실제 사용시 아래 주석을 해제하고 API 키를 입력하세요
                
                /*
                const response = await fetch(
                    `https://api.openweathermap.org/data/2.5/weather?lat=${KIMPO_LAT}&lon=${KIMPO_LON}&appid=${API_KEY}&units=metric&lang=kr`
                );
                const data = await response.json();
                */
                
                // 샘플 데이터 (실제 API 응답 형태)
                const data = {
                    main: {
                        temp: 22.5,
                        feels_like: 24.1,
                        humidity: 65,
                        pressure: 1013
                    },
                    weather: [{
                        description: '맑음',
                        icon: '01d'
                    }],
                    wind: {
                        speed: 3.2
                    },
                    visibility: 10000
                };

                const weather = data.weather[0];
                const main = data.main;
                
                weatherContent.innerHTML = `
                    <div class="weather-main">
                        <div class="weather-icon">${getWeatherIcon(weather.icon)}</div>
                        <div class="temperature">${Math.round(main.temp)}°C</div>
                        <div class="weather-description">${weather.description}</div>
                    </div>
                    
                    <div class="weather-details">
                        <div class="detail-item">
                            <div class="detail-label">체감 온도</div>
                            <div class="detail-value">${Math.round(main.feels_like)}°C</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">습도</div>
                            <div class="detail-value">${main.humidity}%</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">풍속</div>
                            <div class="detail-value">${data.wind.speed} m/s</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">기압</div>
                            <div class="detail-value">${main.pressure} hPa</div>
                        </div>
                    </div>
                `;
                
            } catch (error) {
                weatherContent.innerHTML = `
                    <div class="error">
                        날씨 정보를 불러오는데 실패했습니다.<br>
                        잠시 후 다시 시도해주세요.
                    </div>
                `;
                console.error('날씨 데이터 로딩 오류:', error);
            }
        }

        // 페이지 로드시 날씨 정보 로드
        document.addEventListener('DOMContentLoaded', function() {
            updateDate();
            loadWeather();
            
            // 매분마다 날짜 업데이트
            setInterval(updateDate, 60000);
        });
    </script>
</body>
</html>
