Weather/README.md

# Weather App v1.0.0

Приложение для просмотра погоды с интерактивным интерфейсом и поддержкой тем.

## Описание

Это веб-приложение отображает текущую погоду, почасовой и недельный прогноз с использованием API WeatherAPI.com. Современный адаптивный интерфейс построен на Tailwind CSS с поддержкой светлой и темной тем.

## Функциональность

- **Текущая погода**: температура, влажность, скорость ветра, описание условий
- **Таймлапс**: почасовой прогноз погоды на день с визуализацией
- **Недельный прогноз**: погода на 7 дней вперед
- **Интерактивные графики**: температура и осадки с помощью Chart.js
- **Адаптивный дизайн**: корректное отображение на всех устройствах
- **Выбор городов**: поиск городов через API WeatherAPI.com
- **Система тем**: светлая, темная и автоматическая (по системным настройкам)
- **Анимации**: плавные переходы и hover-эффекты
- **PWA (Progressive Web App)**: установка как нативное приложение, оффлайн режим с кэшированием данных
- **Оффлайн поддержка**: отображение погодных данных при отсутствии интернета
- **Мобильная версия**: возможность сборки в APK для Android через Capacitor или PWABuilder

## Технологии

### Backend

- **Node.js** v8 (устаревшая версия, рекомендуется обновить до LTS 18+)
- **Express.js** v4.17.1 - веб-сервер
- **Service Worker** - кэширование и оффлайн поддержка

### Frontend

- **HTML5** - семантическая разметка
- **JavaScript** (Vanilla) - клиентская логика
- **Tailwind CSS** v3.4.16 - утилитарный CSS фреймворк
- **PostCSS** v8.5.6 - обработка CSS
- **Autoprefixer** v10.4.21 - вендорные префиксы
- **Capacitor** v7.4.3 - фреймворк для мобильной разработки
- **Sharp** v0.34.4 - обработка изображений и иконок

### Библиотеки и CDN

- **Lucide Icons** - современные SVG иконки
- **Swiper.js** v11 - слайдер для таймлапса
- **Chart.js** - построение графиков
- **Google Fonts** (Inter) - шрифты

### Стилизация

- CSS переменные для тематизации
- Плавные анимации переходов
- Цветовые схемы для разных погодных условий

## Установка и запуск

### Системные требования

- **Node.js** v8 (⚠️ устаревшая версия, рекомендуется использовать актуальную LTS версию Node.js 18+)
- **npm** для управления пакетами

### Установка

1. **Клонируйте репозиторий:**

   ```bash
   git clone <repository-url>
   cd weather-app
   ```

2. **Установите зависимости:**

   ```bash
   npm install
   ```

3. **Соберите CSS (если необходимо):**

   ```bash
   npm run build-css
   ```

4. **Запустите сервер:**

   ```bash
   npm start
   ```

5. **Откройте браузер:**
   Перейдите по адресу http://localhost:3000

6. **Установка как PWA (опционально):**
   В браузере нажмите "Установить приложение" или добавьте на домашний экран для полноэкранного режима.

### Доступные скрипты

- `npm start` - запуск сервера разработки
- `npm run build-css` - сборка Tailwind CSS из `input.css` в `output.css`
- `npm run watch-css` - автоматическая пересборка CSS при изменениях

## PWA и мобильная версия

### Progressive Web App (PWA)

Приложение поддерживает установку как PWA на устройствах с современными браузерами:

- **Кэширование**: приложение кэширует статические ресурсы и данные API для оффлайн доступа
- **Service Worker**: обеспечивает работу приложения в оффлайн режиме
- **Манифест**: позволяет установить приложение на домашний экран мобильных устройств

### Сборка мобильного приложения

Приложение можно собрать в нативное мобильное приложение для Android:

#### Используя Capacitor

1. **Установите Capacitor CLI** (если не установлен):

   ```bash
   npm install -g @capacitor/cli
   ```

2. **Добавьте платформы:**

   ```bash
   npx cap add android
   ```

3. **Соберите веб-ресурсы:**

   ```bash
   npm run build-css
   ```

4. **Синхронизируйте с Capacitor:**

   ```bash
   npx cap sync android
   ```

5. **Откройте в Android Studio:**

   ```bash
   npx cap open android
   ```

6. **Соберите APK** в Android Studio или через командную строку.

Подробные инструкции см. в файле `APK_instructions_Capacitor.md`.

#### Используя PWABuilder

Онлайн-сервис PWABuilder позволяет конвертировать PWA в мобильное приложение без установки дополнительного ПО.

Подробные инструкции см. в файле `APK_instructions_PWABuilder.md`.

## API и внешние сервисы

- **WeatherAPI.com** - источник данных о погоде
- **Google Fonts API** - загрузка шрифтов Inter
- **Yandex Metrika** - аналитика и отслеживание событий
- **CDN сервисы** для библиотек JavaScript (jsDelivr, unpkg)

## Разработчик

Разработано: **Fovway**

Контакты:

- Email: [admin@fovway.ru](mailto:admin@fovway.ru)

## Рекомендации

### Обновление Node.js

Текущая конфигурация требует Node.js v8, но рекомендуется использовать актуальную LTS версию (18+) для повышения безопасности и производительности.

### Настройка API ключа

Для полноценной работы приложения необходимо:

1. Зарегистрироваться на [WeatherAPI.com](https://weatherapi.com)
2. Получить бесплатный API ключ
3. Добавить ключ в script.js (const API_KEY = "API_KEY_HERE";)

### Производительность

- Приложение использует CDN для внешних библиотек, что обеспечивает быструю загрузку
- CSS собирается с помощью Tailwind CSS для оптимального размера файлов
- Используйте `npm run watch-css` во время разработки для автоматической пересборки стилей

## Лицензия

MIT