Fovway
2d947941b5
modified: README.md modified: index.html new file: input.css new file: output.css modified: package-lock.json modified: package.json new file: postcss.config.js modified: script.js new file: tailwind.config.js
128 lines
5.1 KiB
Markdown
128 lines
5.1 KiB
Markdown
# Weather App v1.0.0
|
||
|
||
Приложение для просмотра погоды с интерактивным интерфейсом и поддержкой тем.
|
||
|
||
## Описание
|
||
|
||
Это веб-приложение отображает текущую погоду, почасовой и недельный прогноз с использованием API WeatherAPI.com. Современный адаптивный интерфейс построен на Tailwind CSS с поддержкой светлой и темной тем.
|
||
|
||
## Функциональность
|
||
|
||
- **Текущая погода**: температура, влажность, скорость ветра, описание условий
|
||
- **Таймлапс**: почасовой прогноз погоды на день с визуализацией
|
||
- **Недельный прогноз**: погода на 7 дней вперед
|
||
- **Интерактивные графики**: температура и осадки с помощью Chart.js
|
||
- **Адаптивный дизайн**: корректное отображение на всех устройствах
|
||
- **Выбор городов**: предустановленный список российских городов
|
||
- **Система тем**: светлая, темная и автоматическая (по системным настройкам)
|
||
- **Анимации**: плавные переходы и hover-эффекты
|
||
|
||
## Технологии
|
||
|
||
### Backend
|
||
|
||
- **Node.js** v8+ (устаревшая версия, рекомендуется обновить до LTS)
|
||
- **Express.js** v4.17.1 - веб-сервер
|
||
|
||
### Frontend
|
||
|
||
- **HTML5** - семантическая разметка
|
||
- **JavaScript** (Vanilla) - клиентская логика
|
||
- **Tailwind CSS** v3.4.16 - утилитарный CSS фреймворк
|
||
- **PostCSS** v8.5.6 - обработка CSS
|
||
- **Autoprefixer** v10.4.21 - вендорные префиксы
|
||
|
||
### Библиотеки и 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
|
||
|
||
### Доступные скрипты
|
||
|
||
- `npm start` - запуск сервера разработки
|
||
- `npm run build-css` - сборка Tailwind CSS из `input.css` в `output.css`
|
||
- `npm run watch-css` - автоматическая пересборка CSS при изменениях
|
||
|
||
## API и внешние сервисы
|
||
|
||
- **WeatherAPI.com** - источник данных о погоде
|
||
- **Google Fonts API** - загрузка шрифтов Inter
|
||
- **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. Добавить ключ в переменные окружения или конфигурацию сервера(server.js - const API_KEY = "API_KEY_HERE";)
|
||
|
||
### Производительность
|
||
|
||
- Приложение использует CDN для внешних библиотек, что обеспечивает быструю загрузку
|
||
- CSS собирается с помощью Tailwind CSS для оптимального размера файлов
|
||
- Используйте `npm run watch-css` во время разработки для автоматической пересборки стилей
|
||
|
||
## Лицензия
|
||
|
||
MIT
|