${hour}:00 ${isCurrent ? "(сейчас)" : ""}
${Math.round(item.temp_c)}°C
${getBeautifulRussianName(item.condition.text)}
💧 ${ item.precip_mm } мм
☔ ${ item.chance_of_rain }%
${isToday ? "Сегодня" : dayOfWeek}
${dayNumber} ${month}
${Math.round(day.day.maxtemp_c)}°
${Math.round(day.day.mintemp_c)}°
${getBeautifulRussianName(day.day.condition.text)}
`; weeklyContainer.appendChild(card); }); // Пересоздаем иконки для недельного прогноза setTimeout(() => { lucide.createIcons(); }, 100); } // Функция создания графика температуры function createTemperatureChart(hourlyData) { const ctx = document.getElementById("temperatureChart").getContext("2d"); const colors = getThemeColors(); const isDark = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark"); // Подготавливаем данные const labels = hourlyData.map((item) => { const hour = new Date(item.time).getHours(); return `${hour}:00`; }); const temperatures = hourlyData.map((item) => Math.round(item.temp_c)); // Уничтожаем предыдущий график если он существует if (temperatureChart) { temperatureChart.destroy(); } // Создаем новый график temperatureChart = new Chart(ctx, { type: "line", data: { labels: labels, datasets: [ { label: "Температура (°C)", data: temperatures, borderColor: "#3b82f6", backgroundColor: "rgba(59, 130, 246, 0.1)", borderWidth: 3, fill: true, tension: 0.4, pointBackgroundColor: "#3b82f6", pointBorderColor: "#ffffff", pointBorderWidth: 2, pointRadius: 4, pointHoverRadius: 6, pointHoverBackgroundColor: "#2563eb", pointHoverBorderColor: "#ffffff", pointHoverBorderWidth: 2, }, ], }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false, }, tooltip: { backgroundColor: colors.backgroundColor, titleColor: colors.titleColor, bodyColor: colors.bodyColor, cornerRadius: 8, displayColors: false, callbacks: { title: function (context) { return `Время: ${context[0].label}`; }, label: function (context) { return `Температура: ${context.parsed.y}°C`; }, }, }, }, scales: { x: { grid: { display: false, }, ticks: { color: colors.textColor, font: { size: 12, color: colors.textColor, }, }, }, y: { grid: { color: colors.gridColor, lineWidth: 1, }, ticks: { color: colors.textColor, font: { size: 12, color: colors.textColor, }, callback: function (value) { return value + "°C"; }, }, }, }, animation: { duration: 2000, easing: "easeInOutQuart", }, interaction: { intersect: false, mode: "index", }, }, }); } // Функция для получения цветов в зависимости от темы function getThemeColors() { const isDark = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark"); return { textColor: isDark ? "#d1d5db" : "#ffffff", gridColor: isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)", backgroundColor: isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.8)", titleColor: isDark ? "#ffffff" : "#ffffff", bodyColor: isDark ? "#ffffff" : "#ffffff", }; } // Функции для работы с темами function initializeTheme() { const savedTheme = localStorage.getItem("theme") || "auto"; setTheme(savedTheme); updateThemeButtons(savedTheme); // Если выбрана авто-тема, проверяем системную тему при загрузке if (savedTheme === "auto") { const prefersDark = window.matchMedia( "(prefers-color-scheme: dark)" ).matches; updateThemeButtons(prefersDark ? "dark" : "light"); } // Добавляем обработчики событий для кнопок темы if (themeButtons.light) { themeButtons.light.addEventListener("click", () => { setTheme("light"); updateThemeButtons("light"); }); } if (themeButtons.auto) { themeButtons.auto.addEventListener("click", () => { setTheme("auto"); updateThemeButtons("auto"); }); } if (themeButtons.dark) { themeButtons.dark.addEventListener("click", () => { setTheme("dark"); updateThemeButtons("dark"); }); } } function setTheme(theme) { const html = document.documentElement; // Удаляем предыдущие настройки темы html.removeAttribute("data-theme"); html.classList.remove("dark"); document.body.classList.remove("dark"); if (theme === "dark") { html.setAttribute("data-theme", "dark"); html.classList.add("dark"); document.body.classList.add("dark"); } else if (theme === "auto") { // Определяем системную тему const prefersDark = window.matchMedia( "(prefers-color-scheme: dark)" ).matches; if (prefersDark) { html.setAttribute("data-theme", "dark"); html.classList.add("dark"); document.body.classList.add("dark"); } else { html.setAttribute("data-theme", "light"); } } else { // Светлая тема html.setAttribute("data-theme", "light"); } // Сохраняем выбранную тему localStorage.setItem("theme", theme); // Обновляем иконки после смены темы setTimeout(() => { if (typeof lucide !== "undefined") { lucide.createIcons(); } }, 100); // Принудительно перестраиваем Swiper если он существует if (window.weatherSwiper) { setTimeout(() => { window.weatherSwiper.update(); window.weatherSwiper.updateSlides(); }, 150); } // Обновляем графики если они существуют if (temperatureChart) { temperatureChart.destroy(); createTemperatureChart(window.currentHourlyData || []); } if (precipitationChart) { precipitationChart.destroy(); createPrecipitationChart(window.currentHourlyData || []); } } function updateThemeButtons(activeTheme) { Object.keys(themeButtons).forEach((theme) => { if (themeButtons[theme]) { if (theme === activeTheme) { themeButtons[theme].classList.add("active"); } else { themeButtons[theme].classList.remove("active"); } } }); } // Слушаем изменения системной темы function watchSystemTheme() { const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); mediaQuery.addEventListener("change", (e) => { const currentTheme = localStorage.getItem("theme"); if (currentTheme === "auto") { setTheme("auto"); } }); } // Функция создания графика осадков function createPrecipitationChart(hourlyData) { const ctx = document.getElementById("precipitationChart").getContext("2d"); const colors = getThemeColors(); // Подготавливаем данные const labels = hourlyData.map((item) => { const hour = new Date(item.time).getHours(); return `${hour}:00`; }); const precipitations = hourlyData.map((item) => item.precip_mm); const chances = hourlyData.map((item) => item.chance_of_rain); // Уничтожаем предыдущий график если он существует if (precipitationChart) { precipitationChart.destroy(); } // Создаем новый график precipitationChart = new Chart(ctx, { type: "bar", data: { labels: labels, datasets: [ { label: "Осадки (мм)", data: precipitations, backgroundColor: "rgba(59, 130, 246, 0.6)", borderColor: "#3b82f6", borderWidth: 1, borderRadius: 4, borderSkipped: false, barThickness: "flex", maxBarThickness: 30, }, { label: "Вероятность (%)", data: chances, type: "line", borderColor: "#ef4444", backgroundColor: "rgba(239, 68, 68, 0.1)", borderWidth: 2, fill: false, tension: 0.4, pointBackgroundColor: "#ef4444", pointBorderColor: "#ffffff", pointBorderWidth: 2, pointRadius: 3, pointHoverRadius: 5, pointHoverBackgroundColor: "#dc2626", pointHoverBorderColor: "#ffffff", pointHoverBorderWidth: 2, yAxisID: "y1", }, ], }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false, }, tooltip: { backgroundColor: colors.backgroundColor, titleColor: colors.titleColor, bodyColor: colors.bodyColor, cornerRadius: 8, displayColors: true, callbacks: { title: function (context) { return `Время: ${context[0].label}`; }, label: function (context) { if (context.datasetIndex === 0) { return `Осадки: ${context.parsed.y} мм`; } else { return `Вероятность: ${context.parsed.y}%`; } }, }, }, }, scales: { x: { grid: { display: false, }, ticks: { color: colors.textColor, font: { size: 12, color: colors.textColor, }, }, }, y: { type: "linear", display: true, position: "left", grid: { color: colors.gridColor, lineWidth: 1, }, ticks: { color: colors.textColor, font: { size: 12, color: colors.textColor, }, callback: function (value) { return value + " мм"; }, }, title: { display: true, text: "Осадки (мм)", color: "#3b82f6", font: { size: 14, weight: "bold", }, }, }, y1: { type: "linear", display: true, position: "right", grid: { drawOnChartArea: false, }, ticks: { color: "#ef4444", font: { size: 12, color: "#ef4444", }, callback: function (value) { return value + "%"; }, }, title: { display: true, text: "Вероятность (%)", color: "#ef4444", font: { size: 14, weight: "bold", }, }, }, }, animation: { duration: 2000, easing: "easeInOutQuart", delay: function (context) { return context.dataIndex * 100; }, }, interaction: { intersect: false, mode: "index", }, }, }); }