초기 커밋: 5130 레거시 시스템
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경 - DB 연결 하드코딩 → .env 기반으로 변경 - MySQL strict mode DATE 오류 수정
This commit is contained in:
322
account/test.php
Normal file
322
account/test.php
Normal file
@@ -0,0 +1,322 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user