Fovway
096dac61aa
modified: index.html modified: package-lock.json modified: package.json modified: script.js modified: server.js deleted: style.css
201 lines
10 KiB
HTML
201 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Погода</title>
|
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><style>.a{fill:%233b82f6;}.b{fill:%23ffffff;}</style></defs><circle class='a' cx='16' cy='16' r='12'/><circle class='b' cx='16' cy='16' r='8'/><path class='a' d='M16,4V6M16,26V28M28,16H26M6,16H4M22.5,9.5l-1.5,1.5M8.5,22.5l-1.5,1.5M22.5,22.5l-1.5-1.5M8.5,9.5l-1.5-1.5' stroke='%233b82f6' stroke-width='1.5' fill='none'/><ellipse class='a' cx='20' cy='24' rx='8' ry='4' opacity='0.7'/></svg>">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
|
|
<!-- Swiper CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
|
|
<!-- Chart.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; }
|
|
.swiper-slide { height: auto; }
|
|
.timelapse-container { padding-top: 12px; padding-bottom: 12px; }
|
|
.timelapse-item { transition: all 0.3s ease; }
|
|
.timelapse-item:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
|
|
|
|
/* Стили для графиков */
|
|
.chart-container {
|
|
position: relative;
|
|
height: 300px;
|
|
width: 100%;
|
|
}
|
|
|
|
.chart-container canvas {
|
|
max-height: 300px;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.chart-container {
|
|
height: 250px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.chart-container {
|
|
height: 200px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gradient-to-br from-blue-50 via-white to-indigo-50 min-h-screen">
|
|
<div class="container mx-auto max-w-7xl px-4 py-8">
|
|
<!-- Header -->
|
|
<header class="text-center mb-12">
|
|
<div class="flex items-center justify-center gap-3 mb-4">
|
|
<div class="p-3 bg-blue-500 rounded-full">
|
|
<i data-lucide="cloud-sun" class="w-8 h-8 text-white"></i>
|
|
</div>
|
|
<h1 class="text-4xl md:text-5xl font-bold text-gray-800">Погода</h1>
|
|
</div>
|
|
<p class="text-gray-600 text-lg">Узнайте погоду в вашем городе</p>
|
|
<div class="mt-4 flex items-center justify-center gap-2 text-gray-700">
|
|
<i data-lucide="calendar" class="w-5 h-5"></i>
|
|
<span class="font-medium" id="current-date">Загрузка...</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- City Selector -->
|
|
<div class="bg-white rounded-2xl shadow-xl p-8 mb-12 border border-gray-100">
|
|
<div class="flex flex-col md:flex-row items-center gap-6">
|
|
<div class="flex items-center gap-3 text-gray-700">
|
|
<i data-lucide="map-pin" class="w-5 h-5"></i>
|
|
<label for="city" class="font-medium text-lg">Выберите город:</label>
|
|
</div>
|
|
<select id="city" class="flex-1 px-6 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 bg-white text-gray-700 font-medium min-w-[200px]">
|
|
<option value="Moscow">Москва</option>
|
|
<option value="Saint Petersburg">Санкт-Петербург</option>
|
|
<option value="Novosibirsk">Новосибирск</option>
|
|
<option value="Yekaterinburg">Екатеринбург</option>
|
|
<option value="Nizhny Novgorod">Нижний Новгород</option>
|
|
<option value="Kazan">Казань</option>
|
|
<option value="Chelyabinsk">Челябинск</option>
|
|
<option value="Omsk">Омск</option>
|
|
<option value="Samara">Самара</option>
|
|
<option value="Rostov-on-Don">Ростов-на-Дону</option>
|
|
</select>
|
|
<button id="get-weather" class="px-8 py-3 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-xl transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl flex items-center gap-2">
|
|
<i data-lucide="search" class="w-5 h-5"></i>
|
|
Выбрать
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Weather Info -->
|
|
<div class="weather-info">
|
|
<!-- Current Weather Section -->
|
|
<div id="current-weather" class="hidden bg-white rounded-2xl shadow-xl p-8 mb-8 border border-gray-100">
|
|
<div class="text-center">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center justify-center gap-2">
|
|
<i data-lucide="thermometer" class="w-6 h-6"></i>
|
|
Текущая погода
|
|
</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="text-center">
|
|
<div class="flex items-center justify-center gap-2 mb-2">
|
|
<i data-lucide="thermometer" class="w-5 h-5 text-blue-500"></i>
|
|
<p class="text-4xl font-bold text-blue-500" id="current-temp">--°C</p>
|
|
</div>
|
|
<p class="text-gray-600" id="current-desc">Загрузка...</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="flex items-center justify-center gap-2 mb-2">
|
|
<i data-lucide="droplets" class="w-5 h-5 text-blue-500"></i>
|
|
<div>
|
|
<p class="text-lg text-gray-600">Влажность</p>
|
|
<p class="text-2xl font-semibold text-gray-800" id="current-humidity">--%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="flex items-center justify-center gap-2 mb-2">
|
|
<i data-lucide="wind" class="w-5 h-5 text-blue-500"></i>
|
|
<div>
|
|
<p class="text-lg text-gray-600">Ветер</p>
|
|
<p class="text-2xl font-semibold text-gray-800" id="current-wind">-- км/ч</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Timelapse Section -->
|
|
<div class="timelapse-weather bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-2">
|
|
<i data-lucide="clock" class="w-6 h-6"></i>
|
|
Погода на весь день
|
|
</h2>
|
|
<div class="swiper timelapse-container">
|
|
<div id="timelapse-container" class="swiper-wrapper"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Weekly Weather Section -->
|
|
<div class="weekly-weather bg-white rounded-2xl shadow-xl p-8 border border-gray-100 mt-8">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-2">
|
|
<i data-lucide="calendar-days" class="w-6 h-6"></i>
|
|
Погода на неделю
|
|
</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-7 gap-4" id="weekly-container">
|
|
<!-- Карточки недельного прогноза будут добавлены сюда -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Section -->
|
|
<div class="charts-section bg-white rounded-2xl shadow-xl p-8 border border-gray-100 mt-8">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-2">
|
|
<i data-lucide="bar-chart-3" class="w-6 h-6"></i>
|
|
Графики погоды
|
|
</h2>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<!-- Temperature Chart -->
|
|
<div class="chart-container">
|
|
<h3 class="text-lg font-semibold text-gray-700 mb-4 flex items-center gap-2">
|
|
<i data-lucide="thermometer" class="w-5 h-5 text-blue-500"></i>
|
|
Температура (°C)
|
|
</h3>
|
|
<canvas id="temperatureChart"></canvas>
|
|
</div>
|
|
|
|
<!-- Precipitation Chart -->
|
|
<div class="chart-container">
|
|
<h3 class="text-lg font-semibold text-gray-700 mb-4 flex items-center gap-2">
|
|
<i data-lucide="cloud-rain" class="w-5 h-5 text-blue-500"></i>
|
|
Осадки (мм)
|
|
</h3>
|
|
<canvas id="precipitationChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="mt-8 mb-8 text-center">
|
|
<div class="text-gray-500 text-sm">
|
|
<p class="mb-1">Разработано: <span class="font-medium">Fovway</span></p>
|
|
<p>
|
|
<i data-lucide="mail" class="w-3 h-3 inline mr-1"></i>
|
|
<a href="mailto:admin@fovway.ru" class="hover:text-blue-500 transition-colors duration-200">
|
|
admin@fovway.ru
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="script.js"></script>
|
|
<!-- Swiper JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
</body>
|
|
</html> |