|
|
<!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() { |
|
|
|
|
|
const API_KEY = '5d4ae9954b1c58b1a0c1c9f3a0d6a5a'; |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
function getWeatherIcon(weatherId, timestamp, isDay = null) { |
|
|
if (isDay === null) { |
|
|
isDay = isDayTime(timestamp); |
|
|
} |
|
|
|
|
|
|
|
|
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> |
