507 lines
16 KiB
HTML
507 lines
16 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>
|
||
<meta name="theme-color" content="#3b82f6" />
|
||
<link rel="manifest" href="/manifest.json" />
|
||
<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>"
|
||
/>
|
||
<link rel="stylesheet" href="output.css" />
|
||
<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>
|
||
:root {
|
||
--theme-bg: linear-gradient(to bottom right, #dbeafe, #ffffff, #e0e7ff);
|
||
--theme-text: #1e293b;
|
||
--theme-text-secondary: #64748b;
|
||
--theme-card-bg: #ffffff;
|
||
--theme-border: #e2e8f0;
|
||
--theme-shadow: rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
[data-theme="dark"] {
|
||
--theme-bg: linear-gradient(to bottom right, #1e293b, #0f172a, #1e3a8a);
|
||
--theme-text: #f8fafc;
|
||
--theme-text-secondary: #cbd5e1;
|
||
--theme-card-bg: #1e293b;
|
||
--theme-border: #334155;
|
||
--theme-shadow: rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
body {
|
||
font-family: "Inter", sans-serif;
|
||
background: var(--theme-bg);
|
||
color: var(--theme-text);
|
||
min-height: 100vh;
|
||
transition: background 0.3s ease, color 0.3s ease;
|
||
}
|
||
|
||
/* Динамические элементы с поддержкой темы */
|
||
.dynamic-card {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.dynamic-card.dark-theme {
|
||
background: #1e293b;
|
||
border-color: #334155;
|
||
}
|
||
|
||
.dynamic-card.light-theme {
|
||
background: #ffffff;
|
||
border-color: #e2e8f0;
|
||
}
|
||
|
||
.swiper-slide {
|
||
height: auto;
|
||
}
|
||
.timelapse-container {
|
||
padding-top: 12px;
|
||
padding-bottom: 12px;
|
||
}
|
||
|
||
/* Стили для графиков */
|
||
.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;
|
||
}
|
||
}
|
||
|
||
/* Анимации для переключения темы */
|
||
* {
|
||
transition: background-color 0.3s ease, color 0.3s ease,
|
||
border-color 0.3s ease;
|
||
}
|
||
|
||
/* Стили для переключателя темы */
|
||
.theme-button {
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.theme-button.active {
|
||
background-color: #3b82f6;
|
||
color: white;
|
||
}
|
||
|
||
.theme-button.active i {
|
||
color: white;
|
||
}
|
||
|
||
/* Стили для кнопок темы */
|
||
#theme-light,
|
||
#theme-auto,
|
||
#theme-dark {
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
#theme-light:hover,
|
||
#theme-auto:hover,
|
||
#theme-dark:hover {
|
||
background-color: #f1f5f9;
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.dark #theme-light:hover,
|
||
.dark #theme-auto:hover,
|
||
.dark #theme-dark:hover {
|
||
background-color: #334155;
|
||
}
|
||
|
||
/* Поддержка тем через data-theme атрибут */
|
||
[data-theme="dark"] {
|
||
@apply dark;
|
||
}
|
||
|
||
/* Глобальные стили для темной темы */
|
||
[data-theme="dark"] * {
|
||
transition: background-color 0.3s ease, color 0.3s ease,
|
||
border-color 0.3s ease;
|
||
}
|
||
|
||
/* Плавные переходы для карточек */
|
||
.weather-card {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.weather-card:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* Цветные стили для погодных иконок */
|
||
.weather-icon.sun {
|
||
color: #f59e0b;
|
||
}
|
||
.weather-icon.sun-dark {
|
||
color: #fbbf24;
|
||
}
|
||
.weather-icon.cloud {
|
||
color: #6b7280;
|
||
}
|
||
.weather-icon.cloud-dark {
|
||
color: #9ca3af;
|
||
}
|
||
.weather-icon.rain {
|
||
color: #3b82f6;
|
||
}
|
||
.weather-icon.rain-dark {
|
||
color: #60a5fa;
|
||
}
|
||
.weather-icon.snow {
|
||
color: #06b6d4;
|
||
}
|
||
.weather-icon.snow-dark {
|
||
color: #67e8f9;
|
||
}
|
||
.weather-icon.thunder {
|
||
color: #8b5cf6;
|
||
}
|
||
.weather-icon.thunder-dark {
|
||
color: #a78bfa;
|
||
}
|
||
.weather-icon.fog {
|
||
color: #9ca3af;
|
||
}
|
||
.weather-icon.fog-dark {
|
||
color: #d1d5db;
|
||
opacity: 0.7;
|
||
}
|
||
.weather-icon.wind {
|
||
color: #10b981;
|
||
}
|
||
.weather-icon.wind-dark {
|
||
color: #34d399;
|
||
}
|
||
.weather-icon.drizzle {
|
||
color: #06b6d4;
|
||
}
|
||
.weather-icon.drizzle-dark {
|
||
color: #22d3ee;
|
||
}
|
||
.weather-icon.hail {
|
||
color: #6366f1;
|
||
}
|
||
.weather-icon.hail-dark {
|
||
color: #818cf8;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="min-h-screen">
|
||
<div class="container mx-auto max-w-7xl px-4 py-8">
|
||
<!-- Offline Banner -->
|
||
<div id="offline-banner" class="hidden fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-600 dark:to-orange-600 text-white px-6 py-3 text-center shadow-2xl border-b-4 border-red-700 dark:border-red-800 animate-pulse">
|
||
<div class="flex items-center justify-center gap-3">
|
||
<i data-lucide="wifi-off" class="w-6 h-6 animate-bounce"></i>
|
||
<span class="font-bold text-lg">🚫 Оффлайн режим. Данные могут быть не актуальными.</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 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"
|
||
style="color: var(--theme-text)"
|
||
>
|
||
Погода
|
||
</h1>
|
||
</div>
|
||
<p class="text-lg" style="color: var(--theme-text-secondary)">
|
||
Узнайте погоду в вашем городе
|
||
</p>
|
||
<div
|
||
class="mt-4 flex items-center justify-center gap-2"
|
||
style="color: var(--theme-text)"
|
||
>
|
||
<i data-lucide="calendar" class="w-5 h-5"></i>
|
||
<span class="font-medium" id="current-date">Загрузка...</span>
|
||
</div>
|
||
|
||
<!-- Theme Toggle -->
|
||
<div class="mt-6 flex items-center justify-center gap-4">
|
||
<div
|
||
class="flex items-center gap-2 bg-gray-100 dark:bg-gray-700 rounded-lg p-1"
|
||
>
|
||
<button
|
||
id="theme-light"
|
||
class="p-2 rounded-md transition-all duration-200 dark:text-gray-300"
|
||
title="Светлая тема"
|
||
>
|
||
<i
|
||
data-lucide="sun"
|
||
class="w-5 h-5 text-gray-600 dark:text-gray-300"
|
||
></i>
|
||
</button>
|
||
<button
|
||
id="theme-auto"
|
||
class="p-2 rounded-md transition-all duration-200 dark:text-gray-300"
|
||
title="Системная тема"
|
||
>
|
||
<i
|
||
data-lucide="monitor"
|
||
class="w-5 h-5 text-gray-600 dark:text-gray-300"
|
||
></i>
|
||
</button>
|
||
<button
|
||
id="theme-dark"
|
||
class="p-2 rounded-md transition-all duration-200 dark:text-gray-300"
|
||
title="Темная тема"
|
||
>
|
||
<i
|
||
data-lucide="moon"
|
||
class="w-5 h-5 text-gray-600 dark:text-gray-300"
|
||
></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- City Selector -->
|
||
<div class="weather-card rounded-2xl shadow-xl p-8 mb-12">
|
||
<div class="flex flex-col md:flex-row items-center gap-6">
|
||
<div
|
||
class="flex items-center gap-3"
|
||
style="color: var(--theme-text-secondary)"
|
||
>
|
||
<i data-lucide="map-pin" class="w-5 h-5 text-blue-500"></i>
|
||
<label
|
||
for="city"
|
||
class="font-medium text-lg"
|
||
style="color: var(--theme-text-secondary)"
|
||
>Выберите город:</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 weather-card rounded-2xl shadow-xl p-8 mb-8"
|
||
>
|
||
<div class="text-center">
|
||
<h2
|
||
class="text-2xl font-bold mb-6 flex items-center justify-center gap-2"
|
||
style="color: var(--theme-text)"
|
||
>
|
||
<i data-lucide="thermometer" class="w-6 h-6 text-blue-500"></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-lg"
|
||
id="current-desc"
|
||
style="color: var(--theme-text-secondary)"
|
||
>
|
||
Загрузка...
|
||
</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"
|
||
style="color: var(--theme-text-secondary)"
|
||
>
|
||
Влажность
|
||
</p>
|
||
<p
|
||
class="text-2xl font-semibold"
|
||
id="current-humidity"
|
||
style="color: var(--theme-text)"
|
||
>
|
||
--%
|
||
</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"
|
||
style="color: var(--theme-text-secondary)"
|
||
>
|
||
Ветер
|
||
</p>
|
||
<p
|
||
class="text-2xl font-semibold"
|
||
id="current-wind"
|
||
style="color: var(--theme-text)"
|
||
>
|
||
-- км/ч
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Timelapse Section -->
|
||
<div class="timelapse-weather weather-card rounded-2xl shadow-xl p-8">
|
||
<h2
|
||
class="text-2xl font-bold mb-6 flex items-center gap-2"
|
||
style="color: var(--theme-text)"
|
||
>
|
||
<i data-lucide="clock" class="w-6 h-6 text-blue-500"></i>
|
||
Погода на весь день
|
||
</h2>
|
||
<div class="swiper timelapse-container">
|
||
<div id="timelapse-container" class="swiper-wrapper"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Weekly Weather Section -->
|
||
<div class="weekly-weather weather-card rounded-2xl shadow-xl p-8 mt-8">
|
||
<h2
|
||
class="text-2xl font-bold mb-6 flex items-center gap-2"
|
||
style="color: var(--theme-text)"
|
||
>
|
||
<i data-lucide="calendar-days" class="w-6 h-6 text-blue-500"></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 weather-card rounded-2xl shadow-xl p-8 mt-8">
|
||
<h2
|
||
class="text-2xl font-bold mb-6 flex items-center gap-2"
|
||
style="color: var(--theme-text)"
|
||
>
|
||
<i data-lucide="bar-chart-3" class="w-6 h-6 text-blue-500"></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-sm" style="color: var(--theme-text-secondary)">
|
||
<p class="mb-1">
|
||
Разработано:
|
||
<span class="font-medium" style="color: var(--theme-text)"
|
||
>Fovway</span
|
||
>
|
||
</p>
|
||
<p>
|
||
<i data-lucide="mail" class="w-3 h-3 inline mr-1"></i>
|
||
<a
|
||
href="mailto:admin@fovway.ru"
|
||
class="transition-colors duration-200 text-blue-500 hover:text-blue-600"
|
||
>
|
||
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>
|