Spaces:

joung
/

s-s

Running

s-s

File size: 25,464 Bytes

72d5180

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>날씨예보 - 실시간 일기예보 서비스</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
        
        body {
            font-family: 'Noto Sans KR', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        .weather-card {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
            transition: all 0.3s ease;
        }
        
        .weather-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.25);
        }
        
        .search-input:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
        }
        
        .temperature {
            font-size: 4rem;
            font-weight: 300;
            background: linear-gradient(to right, #3b82f6, #10b981);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .hourly-forecast::-webkit-scrollbar {
            height: 6px;
        }
        
        .hourly-forecast::-webkit-scrollbar-thumb {
            background: rgba(59, 130, 246, 0.5);
            border-radius: 3px;
        }
        
        .loading-spinner {
            border-top-color: #3b82f6;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .sunny-bg {
            background: linear-gradient(to bottom right, #FFD700, #FF8C00);
        }
        
        .cloudy-bg {
            background: linear-gradient(to bottom right, #B0C4DE, #778899);
        }
        
        .rainy-bg {
            background: linear-gradient(to bottom right, #4682B4, #1E90FF);
        }
        
        .snowy-bg {
            background: linear-gradient(to bottom right, #E6E6FA, #ADD8E6);
        }
        
        .thunder-bg {
            background: linear-gradient(to bottom right, #4B0082, #9932CC);
        }
    </style>
</head>
<body class="text-gray-800">
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <!-- 헤더 -->
        <header class="flex flex-col md:flex-row justify-between items-center mb-8">
            <div class="flex items-center mb-4 md:mb-0">
                <i class="fas fa-cloud-sun text-4xl text-blue-500 mr-3"></i>
                <h1 class="text-3xl font-bold bg-gradient-to-r from-blue-500 to-green-500 bg-clip-text text-transparent">날씨예보</h1>
            </div>
            
            <!-- 검색창 -->
            <div class="relative w-full md:w-64">
                <input 
                    type="text" 
                    id="search-input" 
                    placeholder="도시 검색 (예: 서울, 부산)" 
                    class="w-full px-4 py-2 pr-10 rounded-full border border-gray-300 focus:border-blue-400 search-input"
                >
                <button id="search-btn" class="absolute right-3 top-2 text-gray-500 hover:text-blue-500">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </header>
        
        <!-- 로딩 스피너 -->
        <div id="loading" class="hidden flex justify-center items-center py-20">
            <div class="loading-spinner h-12 w-12 border-4 border-blue-200 rounded-full"></div>
        </div>
        
        <!-- 메인 날씨 정보 -->
        <div id="weather-container" class="hidden">
            <!-- 현재 날씨 -->
            <div id="current-weather" class="weather-card p-6 mb-6">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="mb-4 md:mb-0">
                        <div class="flex items-center">
                            <h2 id="location" class="text-2xl font-bold mr-2">서울특별시</h2>
                            <span id="country" class="text-gray-600">대한민국</span>
                        </div>
                        <p id="date-time" class="text-gray-600">2023년 7월 15일 오후 3:00</p>
                        <div class="flex items-center mt-2">
                            <div id="weather-icon" class="text-5xl mr-3">
                                <i class="fas fa-sun text-yellow-400"></i>
                            </div>
                            <p id="weather-description" class="text-lg">맑음</p>
                        </div>
                    </div>
                    
                    <div class="text-center">
                        <div class="temperature" id="current-temp">24°C</div>
                        <div class="flex justify-center space-x-4 mt-2">
                            <div>
                                <p class="text-gray-600">최고</p>
                                <p id="max-temp" class="font-medium">28°C</p>
                            </div>
                            <div>
                                <p class="text-gray-600">최저</p>
                                <p id="min-temp" class="font-medium">18°C</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-2 gap-4 mt-4 md:mt-0">
                        <div class="flex items-center">
                            <i class="fas fa-wind text-blue-400 mr-2"></i>
                            <div>
                                <p class="text-gray-600">바람</p>
                                <p id="wind-speed" class="font-medium">5 km/h</p>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-tint text-blue-400 mr-2"></i>
                            <div>
                                <p class="text-gray-600">습도</p>
                                <p id="humidity" class="font-medium">65%</p>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-compress-arrows-alt text-blue-400 mr-2"></i>
                            <div>
                                <p class="text-gray-600">기압</p>
                                <p id="pressure" class="font-medium">1012 hPa</p>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-eye text-blue-400 mr-2"></i>
                            <div>
                                <p class="text-gray-600">가시거리</p>
                                <p id="visibility" class="font-medium">10 km</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 시간별 예보 -->
            <div class="mb-6">
                <h3 class="text-xl font-bold mb-3 flex items-center">
                    <i class="fas fa-clock text-blue-500 mr-2"></i>
                    시간별 예보
                </h3>
                <div id="hourly-forecast" class="hourly-forecast flex overflow-x-auto pb-2 space-x-4">
                    <!-- 시간별 예보 카드들이 여기에 추가됩니다 -->
                </div>
            </div>
            
            <!-- 주간 예보 -->
            <div>
                <h3 class="text-xl font-bold mb-3 flex items-center">
                    <i class="fas fa-calendar-alt text-blue-500 mr-2"></i>
                    5일간의 일기예보
                </h3>
                <div id="daily-forecast" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
                    <!-- 주간 예보 카드들이 여기에 추가됩니다 -->
                </div>
            </div>
        </div>
        
        <!-- 초기 메시지 -->
        <div id="initial-message" class="text-center py-20">
            <i class="fas fa-cloud-sun text-6xl text-blue-300 mb-4"></i>
            <h2 class="text-2xl font-bold text-gray-700 mb-2">날씨 정보를 확인하세요</h2>
            <p class="text-gray-600 mb-6">검색창에 도시 이름을 입력하면 실시간 날씨 정보를 확인할 수 있습니다.</p>
            <button id="use-current-location" class="px-6 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 transition">
                <i class="fas fa-location-arrow mr-2"></i>현재 위치 사용
            </button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // API 키 (실제 프로젝트에서는 서버 사이드에서 처리하는 것이 좋습니다)
            const API_KEY = '5d4ae9954b1c58b1a0c1c9f3a0d6a5a';
            
            // DOM 요소
            const searchInput = document.getElementById('search-input');
            const searchBtn = document.getElementById('search-btn');
            const useCurrentLocationBtn = document.getElementById('use-current-location');
            const weatherContainer = document.getElementById('weather-container');
            const loading = document.getElementById('loading');
            const initialMessage = document.getElementById('initial-message');
            
            // 기본으로 서울 날씨 표시
            fetchWeather('Seoul');
            
            // 검색 버튼 클릭 이벤트
            searchBtn.addEventListener('click', () => {
                const city = searchInput.value.trim();
                if (city) {
                    fetchWeather(city);
                }
            });
            
            // 엔터 키 이벤트
            searchInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    const city = searchInput.value.trim();
                    if (city) {
                        fetchWeather(city);
                    }
                }
            });
            
            // 현재 위치 사용 버튼
            useCurrentLocationBtn.addEventListener('click', () => {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(
                        (position) => {
                            const { latitude, longitude } = position.coords;
                            fetchWeatherByCoords(latitude, longitude);
                        },
                        (error) => {
                            alert('위치 정보를 가져오는데 실패했습니다. 수동으로 도시를 입력해주세요.');
                            console.error(error);
                        }
                    );
                } else {
                    alert('이 브라우저는 위치 정보 기능을 지원하지 않습니다.');
                }
            });
            
            // 날씨 정보 가져오기
            function fetchWeather(city) {
                loading.classList.remove('hidden');
                weatherContainer.classList.add('hidden');
                initialMessage.classList.add('hidden');
                
                fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=kr`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('도시를 찾을 수 없습니다');
                        }
                        return response.json();
                    })
                    .then(data => {
                        displayCurrentWeather(data);
                        return fetch(`https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${API_KEY}&units=metric&lang=kr`);
                    })
                    .then(response => response.json())
                    .then(data => {
                        displayForecast(data);
                        loading.classList.add('hidden');
                        weatherContainer.classList.remove('hidden');
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert(error.message);
                        loading.classList.add('hidden');
                        initialMessage.classList.remove('hidden');
                    });
            }
            
            // 좌표로 날씨 정보 가져오기
            function fetchWeatherByCoords(lat, lon) {
                loading.classList.remove('hidden');
                weatherContainer.classList.add('hidden');
                initialMessage.classList.add('hidden');
                
                fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric&lang=kr`)
                    .then(response => response.json())
                    .then(data => {
                        displayCurrentWeather(data);
                        return fetch(`https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric&lang=kr`);
                    })
                    .then(response => response.json())
                    .then(data => {
                        displayForecast(data);
                        loading.classList.add('hidden');
                        weatherContainer.classList.remove('hidden');
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('날씨 정보를 가져오는데 실패했습니다');
                        loading.classList.add('hidden');
                        initialMessage.classList.remove('hidden');
                    });
            }
            
            // 현재 날씨 표시
            function displayCurrentWeather(data) {
                const location = document.getElementById('location');
                const country = document.getElementById('country');
                const dateTime = document.getElementById('date-time');
                const weatherIcon = document.getElementById('weather-icon');
                const weatherDescription = document.getElementById('weather-description');
                const currentTemp = document.getElementById('current-temp');
                const maxTemp = document.getElementById('max-temp');
                const minTemp = document.getElementById('min-temp');
                const windSpeed = document.getElementById('wind-speed');
                const humidity = document.getElementById('humidity');
                const pressure = document.getElementById('pressure');
                const visibility = document.getElementById('visibility');
                
                // 위치 정보
                location.textContent = data.name;
                country.textContent = data.sys.country;
                
                // 날짜 및 시간
                const now = new Date();
                const options = { 
                    year: 'numeric', 
                    month: 'long', 
                    day: 'numeric', 
                    hour: '2-digit', 
                    minute: '2-digit',
                    hour12: true
                };
                dateTime.textContent = now.toLocaleDateString('ko-KR', options);
                
                // 날씨 정보
                const weather = data.weather[0];
                weatherDescription.textContent = weather.description;
                currentTemp.textContent = `${Math.round(data.main.temp)}°C`;
                maxTemp.textContent = `${Math.round(data.main.temp_max)}°C`;
                minTemp.textContent = `${Math.round(data.main.temp_min)}°C`;
                windSpeed.textContent = `${Math.round(data.wind.speed * 3.6)} km/h`;
                humidity.textContent = `${data.main.humidity}%`;
                pressure.textContent = `${data.main.pressure} hPa`;
                visibility.textContent = `${data.visibility / 1000} km`;
                
                // 날씨 아이콘 설정
                setWeatherIcon(weatherIcon, weather.id, data.dt);
                
                // 배경 색상 변경
                setBackgroundByWeather(weather.id);
            }
            
            // 예보 정보 표시
            function displayForecast(data) {
                const hourlyForecast = document.getElementById('hourly-forecast');
                const dailyForecast = document.getElementById('daily-forecast');
                
                // 시간별 예보 (다음 12시간)
                hourlyForecast.innerHTML = '';
                for (let i = 0; i < 12; i++) {
                    const forecast = data.list[i];
                    const date = new Date(forecast.dt * 1000);
                    const hour = date.getHours();
                    
                    const card = document.createElement('div');
                    card.className = 'weather-card flex-shrink-0 p-4 text-center min-w-[80px]';
                    card.innerHTML = `
                        <p class="font-medium">${hour}시</p>
                        <div class="my-2 text-2xl">
                            ${getWeatherIcon(forecast.weather[0].id, forecast.dt)}
                        </div>
                        <p class="font-bold">${Math.round(forecast.main.temp)}°C</p>
                        <p class="text-sm text-gray-600">${forecast.weather[0].description}</p>
                    `;
                    hourlyForecast.appendChild(card);
                }
                
                // 일별 예보 (5일)
                dailyForecast.innerHTML = '';
                const dailyData = {};
                
                // 같은 날짜의 데이터 그룹화
                data.list.forEach(forecast => {
                    const date = new Date(forecast.dt * 1000);
                    const dateStr = date.toLocaleDateString('ko-KR', { weekday: 'long', month: 'short', day: 'numeric' });
                    
                    if (!dailyData[dateStr]) {
                        dailyData[dateStr] = {
                            temps: [],
                            weather: [],
                            dt: forecast.dt
                        };
                    }
                    
                    dailyData[dateStr].temps.push(forecast.main.temp);
                    dailyData[dateStr].weather.push(forecast.weather[0]);
                });
                
                // 각 날짜별로 카드 생성
                let count = 0;
                for (const [date, info] of Object.entries(dailyData)) {
                    if (count >= 5) break;
                    
                    // 가장 빈번한 날씨 상태 찾기
                    const weatherCount = {};
                    info.weather.forEach(w => {
                        const key = w.id;
                        weatherCount[key] = (weatherCount[key] || 0) + 1;
                    });
                    
                    const mostFrequentWeatherId = parseInt(Object.keys(weatherCount).reduce((a, b) => 
                        weatherCount[a] > weatherCount[b] ? a : b
                    ));
                    
                    const mostFrequentWeather = info.weather.find(w => w.id === mostFrequentWeatherId);
                    
                    // 최고/최저 기온 계산
                    const maxTemp = Math.round(Math.max(...info.temps));
                    const minTemp = Math.round(Math.min(...info.temps));
                    
                    const card = document.createElement('div');
                    card.className = 'weather-card p-4';
                    card.innerHTML = `
                        <p class="font-bold text-lg mb-2">${date.split(' ')[0]} ${date.split(' ')[1]} ${date.split(' ')[2]}</p>
                        <div class="flex items-center justify-between">
                            <div class="text-4xl">
                                ${getWeatherIcon(mostFrequentWeather.id, info.dt)}
                            </div>
                            <div class="text-right">
                                <p class="font-medium">${mostFrequentWeather.description}</p>
                                <p class="text-2xl font-bold">${Math.round((maxTemp + minTemp) / 2)}°C</p>
                                <p class="text-sm text-gray-600">${maxTemp}° / ${minTemp}°</p>
                            </div>
                        </div>
                    `;
                    dailyForecast.appendChild(card);
                    count++;
                }
            }
            
            // 날씨 아이콘 설정
            function setWeatherIcon(element, weatherId, timestamp) {
                const isDay = isDayTime(timestamp);
                element.innerHTML = getWeatherIcon(weatherId, timestamp, isDay);
            }
            
            // 날씨 ID에 따른 아이콘 반환
            function getWeatherIcon(weatherId, timestamp, isDay = null) {
                if (isDay === null) {
                    isDay = isDayTime(timestamp);
                }
                
                // 날씨 코드에 따른 아이콘 설정 (OpenWeatherMap 기준)
                if (weatherId >= 200 && weatherId < 300) {
                    return '<i class="fas fa-bolt text-purple-400"></i>'; // 번개
                } else if (weatherId >= 300 && weatherId < 400) {
                    return '<i class="fas fa-cloud-rain text-blue-400"></i>'; // 이슬비
                } else if (weatherId >= 500 && weatherId < 600) {
                    return '<i class="fas fa-umbrella text-blue-500"></i>'; // 비
                } else if (weatherId >= 600 && weatherId < 700) {
                    return '<i class="far fa-snowflake text-blue-200"></i>'; // 눈
                } else if (weatherId >= 700 && weatherId < 800) {
                    return '<i class="fas fa-smog text-gray-400"></i>'; // 안개 등
                } else if (weatherId === 800) {
                    return isDay 
                        ? '<i class="fas fa-sun text-yellow-400"></i>' 
                        : '<i class="fas fa-moon text-blue-200"></i>';
                } else if (weatherId === 801) {
                    return isDay 
                        ? '<i class="fas fa-cloud-sun text-yellow-300"></i>' 
                        : '<i class="fas fa-cloud-moon text-blue-200"></i>';
                } else if (weatherId > 801 && weatherId < 805) {
                    return '<i class="fas fa-cloud text-gray-300"></i>';
                } else {
                    return '<i class="fas fa-question-circle text-gray-400"></i>';
                }
            }
            
            // 배경 색상 설정
            function setBackgroundByWeather(weatherId) {
                const body = document.body;
                
                // 기존 클래스 제거
                body.classList.remove(
                    'sunny-bg', 'cloudy-bg', 'rainy-bg', 
                    'snowy-bg', 'thunder-bg'
                );
                
                // 날씨에 따른 배경 클래스 추가
                if (weatherId >= 200 && weatherId < 300) {
                    body.classList.add('thunder-bg');
                } else if ((weatherId >= 300 && weatherId < 600) || weatherId === 701) {
                    body.classList.add('rainy-bg');
                } else if (weatherId >= 600 && weatherId < 700) {
                    body.classList.add('snowy-bg');
                } else if (weatherId === 800) {
                    body.classList.add('sunny-bg');
                } else {
                    body.classList.add('cloudy-bg');
                }
            }
            
            // 낮/밤 확인
            function isDayTime(timestamp) {
                const date = new Date(timestamp * 1000);
                const hours = date.getHours();
                return hours >= 6 && hours < 18;
            }
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=joung/s-s" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>