# Документация сайта бегового клуба "Бегущий Башкир"

## 📋 Обзор проекта

**Сайт:** [begushiybashkir.ru](https://begushiybashkir.ru)
**Технологический стек:** Vue 3, Vue Router, Pinia, Vite
**Тип проекта:** SPA (Single Page Application) для бегового клуба

---

## 🏗️ Архитектура проекта

### Структура каталогов
```
src/
├── assets/           # Статические ресурсы
│   ├── logo/        # Логотипы
│   └── main.css     # Глобальные стили
├── components/       # Vue компоненты
├── pages/           # Страницы приложения
├── stores/          # Состояние приложения (Pinia)
└── router/          # Маршрутизация
public/
├── images/          # Изображения для галереи
└── favicon.ico      # Иконка сайта
```

---

## 🌐 Основные страницы

### 1. Главная страница (`Home.vue`)
- **Назначение:** Приветствие, представление клуба, призыв к действию
- **Особенности:** Слайдер, статистика клуба, преимущества, события
- **SEO:** Оптимизирована для поисковых систем

### 2. О клубе (`About.vue`)
- **Назначение:** Подробная информация о клубе
- **Контент:** Философия, тренер, локации, контакты
- **Особенности:** Информация о тренере Аминеве Загире

### 3. Галерея (`Gallery.vue`)
- **Назначение:** Фотографии мероприятий и тренировок
- **Функционал:** Слайдер, лайтбокс, фильтрация
- **Особенности:** Адаптивная сетка изображений

### 4. Достижения (`Achievements.vue`)
- **Назначение:** Демонстрация успехов участников
- **Функционал:** Фильтрация, поиск, статистика
- **Контент:** Личные и командные достижения

### 5. Статистика (`DetailedStats.vue`)
- **Назначение:** Персональная статистика участников
- **Функционал:** Графики, фильтры, экспорт данных
- **Данные:** Пробег, темп, история тренировок

### 6. События (`Events.vue`)
- **Назначение:** Расписание мероприятий
- **Функционал:** Регистрация, управление участием
- **Типы событий:** Тренировки, забеги, семинары

---

## 🔐 Система аутентификации

### Компоненты:
- `Login.vue` - Вход в систему
- `Register.vue` - Регистрация
- `Logout.vue` - Выход
- `ForgotPassword.vue` - Восстановление пароля

### Хранилище:
- `auth.js` - Управление состоянием авторизации
- **Функции:** login, logout, register, refreshToken

---

## 🎨 Дизайн и стили

### Основные принципы:
1. **Цветовая палитра:**
   - Основной: #2e8b57 (зеленый)
   - Акцентный: #ffd700 (золотой)
   - Фон: #f8fff8 (светло-зеленый)

2. **Типографика:**
   - Заголовки: жирный шрифт
   - Основной текст: читабельный контраст
   - Стили для русского и башкирского языков

3. **Адаптивность:**
   - Mobile-first подход
   - Breakpoints: 360px, 480px, 768px, 1024px
   - Гибкие контейнеры и сетки

---

## 🛠️ Функциональные компоненты

### `NavigationMenu.vue`
- Навигационное меню
- Адаптивный дизайн
- Учет состояния авторизации

### `EventCard.vue`
- Карточка события
- Интерактивные элементы
- Состояния регистрации

### `RegistrationCard.vue`
- Карточка регистрации
- Управление участием
- Статусы подтверждения

---

## 📊 Управление состоянием (Pinia)

### Сторы:
1. **`auth.js`** - Авторизация
2. **`stats.js`** - Статистика пользователя
3. **`event.js`** - События и регистрации

### Особенности:
- Persistence через localStorage
- Автоматическое обновление токенов
- Централизованная обработка ошибок

---

## 🚀 Маршрутизация (Vue Router)

### Основные маршруты:
```javascript
[
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/gallery', component: Gallery },
  { path: '/achievements', component: Achievements },
  { path: '/stats', component: DetailedStats },
  { path: '/events', component: Events },
  { path: '/login', component: Login },
  { path: '/register', component: Register },
  { path: '/profile', component: Profile }
]
```

### Защищенные маршруты:
- Требуют авторизации
- Автоматический редирект на логин

---

## 📱 Адаптивный дизайн

### Подходы:
1. **CSS Grid и Flexbox** - для компоновки
2. **Относительные единицы** - rem, em, vw, vh
3. **Медиа-запросы** - для разных устройств
4. **Mobile-first** - базовая версия для мобильных

### Особые случаи:
- Ландшафтная ориентация
- Малые экраны (до 360px)
- Планшеты (768-1024px)

---

## 🖼️ Оптимизация изображений

### Стратегии:
1. **Ленивая загрузка** - для галереи
2. **Предзагрузка** - для слайдера
3. **Адаптивные изображения** - разные размеры для разных устройств
4. **Оптимизация форматов** - WebP где поддерживается

---

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

### Оптимизации:
1. **Code splitting** - разделение кода по маршрутам
2. **Tree shaking** - удаление неиспользуемого кода
3. **Кэширование** - статических ресурсов
4. **Минификация** - CSS и JavaScript

---

## 🔍 SEO оптимизация

### Мета-теги:
- Динамические заголовки
- Оптимизированные описания
- Ключевые слова
- Open Graph для соцсетей

### Технические аспекты:
- Чистые URL
- Навигационная структура
- Скорость загрузки
- Мобильная адаптация

---

## 📝 Контент

### Языки:
1. **Русский** - основной язык
2. **Башкирский** - для подвала сайта
3. **Иконки** - визуальная коммуникация

### Контент-стратегия:
- Регулярное обновление событий
- Добавление новых достижений
- Обновление галереи
- Актуальная статистика

---

## 🔧 Разработка

### Команды:
```bash
npm install      # Установка зависимостей
npm run dev      # Запуск dev сервера
npm run build    # Сборка для production
npm run lint     # Проверка кода
```

### Конфигурация:
- ESLint - для качества кода
- Vite - для сборки
- Vue 3 Composition API
- Hot Module Replacement

---

## 📄 Файлы конфигурации

### Основные:
- `vite.config.js` - настройка Vite
- `package.json` - зависимости и скрипты
- `index.html` - главный HTML файл
- `README.md` - документация проекта

---

## 🚨 Обработка ошибок

### Стратегии:
1. **Глобальный перехват** - для API запросов
2. **Пользовательские уведомления** - дружелюбные сообщения
3. **Резервные состояния** - для отсутствующих данных
4. **Кнопки повтора** - для повторных попыток

---

## 🔄 Интеграции

### Планируемые:
1. **Календарь событий** - синхронизация
2. **Платежная система** - для платных мероприятий
3. **Социальные сети** - автоматическая публикация
4. **Email рассылка** - для участников

---

## 📈 Аналитика

### Метрики:
1. **Посещаемость** - популярные страницы
2. **Конверсии** - регистрации и участие
3. **Вовлеченность** - время на сайте
4. **Устройства** - мобильные vs десктоп

---

## 🛡️ Безопасность

### Меры:
1. **HTTPS** - шифрование трафика
2. **Валидация данных** - на клиенте и сервере
3. **Защита от XSS** - экранирование вывода
4. **Rate limiting** - для API запросов

---

## 📚 Дальнейшее развитие

### Планы:
1. **PWA** - прогрессивное веб-приложение
2. **Push-уведомления** - для событий
3. **Офлайн-режим** - кэширование данных
4. **Интернационализация** - полная поддержка башкирского
5. **Мобильное приложение** - на React Native

---

## 🎯 Целевая аудитория

### Основные группы:
1. **Новички** - желающие начать бегать
2. **Любители** - регулярно занимающиеся
3. **Профессионалы** - участвующие в соревнованиях
4. **Болельщики** - интересующиеся клубом

---

## 📞 Поддержка

### Каналы связи:
1. **Телефон:** +7 (927) 30-93-095
2. **Email:** zog1r@mail.ru
3. **Telegram:** @begushiybashkir
4. **Instagram:** @begushiybashkir

---

## 📋 Чеклист развертывания

### Обновление контента:
- [ ] Проверить актуальность событий
- [ ] Обновить достижения
- [ ] Добавить новые фото в галерею
- [ ] Проверить контактную информацию

### Техническая проверка:
- [ ] Тестирование на мобильных устройствах
- [ ] Проверка скорости загрузки
- [ ] Валидация HTML/CSS
- [ ] Проверка ссылок

### SEO оптимизация:
- [ ] Обновить мета-теги
- [ ] Проверить заголовки
- [ ] Оптимизировать изображения
- [ ] Проверить sitemap

---

## 🏆 Особенности проекта

### Уникальные черты:
1. **Двуязычность** - русский и башкирский
2. **Сообщество** - ориентация на взаимодействие
3. **Тренерский подход** - акцент на профессиональное руководство
4. **Природа** - тренировки на свежем воздухе

---

*Документация будет дополняться по мере развития проекта. Последнее обновление: декабрь 2025