# План редизайна фронтенда Game Marathon

## Концепция дизайна

**Стиль:** Минималистичный геймерский дизайн
- Темная база с неоновыми акцентами (cyan/purple/pink градиенты)
- Glitch эффекты на заголовках и при hover
- Glassmorphism для карточек (blur + transparency)
- Subtle grain/noise текстура на фоне
- Геометрические паттерны и линии
- Микро-анимации везде

**Цветовая палитра:**
```
Background:    #0a0a0f (почти черный с синим оттенком)
Surface:       #12121a (карточки)
Border:        #1e1e2e (границы)
Primary:       #00f0ff (cyan неон)
Secondary:     #a855f7 (purple)
Accent:        #f0abfc (pink)
Success:       #22c55e
Error:         #ef4444
Text:          #e2e8f0
Text Muted:    #64748b
```

---

## Фаза 1: Базовая инфраструктура

### 1.1 Обновление Tailwind Config
- [ ] Новая цветовая палитра (neon colors)
- [ ] Кастомные анимации:
  - `glitch` - glitch эффект для текста
  - `glow-pulse` - пульсация свечения
  - `float` - плавное парение
  - `slide-in-left/right/up/down` - слайды
  - `scale-in` - появление с масштабом
  - `shimmer` - блик на элементах
- [ ] Кастомные backdrop-blur классы
- [ ] Градиентные утилиты

### 1.2 Глобальные стили (index.css)
- [ ] CSS переменные для цветов
- [ ] Glitch keyframes анимация
- [ ] Noise/grain overlay
- [ ] Glow эффекты (box-shadow неон)
- [ ] Custom scrollbar (неоновый)
- [ ] Selection стили (выделение текста)

### 1.3 Новые UI компоненты
- [ ] `GlitchText` - текст с glitch эффектом
- [ ] `NeonButton` - кнопка с неоновым свечением
- [ ] `GlassCard` - карточка с glassmorphism
- [ ] `AnimatedCounter` - анимированные числа
- [ ] `ProgressBar` - неоновый прогресс бар
- [ ] `Badge` - бейджи со свечением
- [ ] `Skeleton` - скелетоны загрузки
- [ ] `Tooltip` - тултипы
- [ ] `Tabs` - табы с анимацией
- [ ] `Modal` - переработанная модалка

---

## Фаза 2: Layout и навигация

### 2.1 Новый Header
- [ ] Sticky header с blur при скролле
- [ ] Логотип с glitch эффектом при hover
- [ ] Анимированная навигация (underline slide)
- [ ] Notification bell с badge
- [ ] User dropdown с аватаром
- [ ] Mobile hamburger menu с slide-in

### 2.2 Sidebar (новый компонент)
- [ ] Collapsible sidebar для desktop
- [ ] Иконки с tooltip
- [ ] Active state с неоновой подсветкой
- [ ] Quick stats внизу

### 2.3 Footer
- [ ] Минималистичный footer
- [ ] Social links
- [ ] Version info

---

## Фаза 3: Страницы

### 3.1 HomePage (полный редизайн)
```
┌─────────────────────────────────────────────┐
│  HERO SECTION                               │
│  ┌─────────────────────────────────────┐   │
│  │  Animated background (particles/    │   │
│  │  geometric shapes)                  │   │
│  │                                     │   │
│  │  GAME <glitch>MARATHON</glitch>    │   │
│  │                                     │   │
│  │  Tagline with typing effect        │   │
│  │                                     │   │
│  │  [Start Playing] [Watch Demo]      │   │
│  └─────────────────────────────────────┘   │
├─────────────────────────────────────────────┤
│  FEATURES SECTION (3 glass cards)          │
│  ┌───────┐ ┌───────┐ ┌───────┐            │
│  │ Icon  │ │ Icon  │ │ Icon  │  hover:    │
│  │ Title │ │ Title │ │ Title │  lift +    │
│  │ Desc  │ │ Desc  │ │ Desc  │  glow      │
│  └───────┘ └───────┘ └───────┘            │
├─────────────────────────────────────────────┤
│  HOW IT WORKS (timeline style)             │
│  ○───────○───────○───────○                 │
│  1       2       3       4                  │
│  Create  Add     Spin    Win               │
├─────────────────────────────────────────────┤
│  LIVE STATS (animated counters)            │
│  [ 1,234 Marathons ] [ 5,678 Challenges ]  │
├─────────────────────────────────────────────┤
│  CTA SECTION                               │
│  Ready to compete? [Join Now]              │
└─────────────────────────────────────────────┘
```

### 3.2 Login/Register Pages
- [ ] Centered card с glassmorphism
- [ ] Animated background (subtle)
- [ ] Form inputs с glow при focus
- [ ] Password strength indicator
- [ ] Social login buttons (future)
- [ ] Smooth transitions между login/register

### 3.3 MarathonsPage (Dashboard)
```
┌─────────────────────────────────────────────┐
│  Header: "My Marathons" + Create button    │
├─────────────────────────────────────────────┤
│  Quick Stats Bar                           │
│  [Active: 2] [Completed: 5] [Total Wins: 3]│
├─────────────────────────────────────────────┤
│  Filters/Tabs: All | Active | Completed    │
├─────────────────────────────────────────────┤
│  Marathon Cards Grid (2-3 columns)         │
│  ┌──────────────────┐ ┌──────────────────┐ │
│  │ Cover image/     │ │                  │ │
│  │ gradient         │ │                  │ │
│  │ ────────────     │ │                  │ │
│  │ Title            │ │                  │ │
│  │ Status badge     │ │                  │ │
│  │ Participants     │ │                  │ │
│  │ Progress bar     │ │                  │ │
│  └──────────────────┘ └──────────────────┘ │
├─────────────────────────────────────────────┤
│  Join by Code (expandable section)         │
└─────────────────────────────────────────────┘
```

### 3.4 MarathonPage (Detail)
```
┌─────────────────────────────────────────────┐
│  Hero Banner                               │
│  ┌─────────────────────────────────────┐   │
│  │ Background gradient + pattern       │   │
│  │ Marathon Title (large)              │   │
│  │ Status | Dates | Participants       │   │
│  │ [Play] [Leaderboard] [Settings]     │   │
│  └─────────────────────────────────────┘   │
├─────────────────────────────────────────────┤
│  Event Banner (if active) - animated      │
├────────────────────┬────────────────────────┤
│  Main Content      │  Sidebar              │
│  ┌──────────────┐  │  ┌──────────────────┐ │
│  │ Your Stats   │  │  │ Activity Feed   │ │
│  │ Points/Streak│  │  │ (scrollable)    │ │
│  └──────────────┘  │  │                  │ │
│  ┌──────────────┐  │  │                  │ │
│  │ Quick Actions│  │  │                  │ │
│  └──────────────┘  │  │                  │ │
│  ┌──────────────┐  │  │                  │ │
│  │ Games List   │  │  │                  │ │
│  │ (collapsible)│  │  │                  │ │
│  └──────────────┘  │  └──────────────────┘ │
└────────────────────┴────────────────────────┘
```

### 3.5 PlayPage (Game Screen) - ГЛАВНАЯ СТРАНИЦА
```
┌─────────────────────────────────────────────┐
│  Top Bar: Points | Streak | Event Timer    │
├─────────────────────────────────────────────┤
│  ┌─────────────────────────────────────┐   │
│  │         SPIN WHEEL                  │   │
│  │    (redesigned, neon style)         │   │
│  │         ┌─────────┐                 │   │
│  │         │  WHEEL  │                 │   │
│  │         │         │                 │   │
│  │         └─────────┘                 │   │
│  │         [SPIN BUTTON]               │   │
│  └─────────────────────────────────────┘   │
├─────────────────────────────────────────────┤
│  Active Challenge Card (если есть)         │
│  ┌─────────────────────────────────────┐   │
│  │ Game: [Title] | Difficulty: [★★★]  │   │
│  │ ─────────────────────────────────── │   │
│  │ Challenge Title                     │   │
│  │ Description...                      │   │
│  │ ─────────────────────────────────── │   │
│  │ Points: 100 | Time: ~2h             │   │
│  │ ─────────────────────────────────── │   │
│  │ Proof Upload Area                   │   │
│  │ [File] [URL] [Comment]              │   │
│  │ ─────────────────────────────────── │   │
│  │ [Complete ✓] [Skip ✗]              │   │
│  └─────────────────────────────────────┘   │
├─────────────────────────────────────────────┤
│  Mini Leaderboard (top 3 + you)            │
└─────────────────────────────────────────────┘
```

### 3.6 LeaderboardPage
- [ ] Animated podium для top 3
- [ ] Table с hover эффектами
- [ ] Highlight для текущего пользователя
- [ ] Streak fire animation
- [ ] Sorting/filtering

### 3.7 ProfilePage
```
┌─────────────────────────────────────────────┐
│  Profile Header                            │
│  ┌─────────────────────────────────────┐   │
│  │ Avatar (large, glow border)         │   │
│  │ Nickname [Edit]                     │   │
│  │ Member since: Date                  │   │
│  └─────────────────────────────────────┘   │
├─────────────────────────────────────────────┤
│  Stats Cards (animated counters)           │
│  [Marathons] [Wins] [Challenges] [Points]  │
├─────────────────────────────────────────────┤
│  Achievements Section (future)             │
├─────────────────────────────────────────────┤
│  Telegram Connection Card                  │
├─────────────────────────────────────────────┤
│  Security Section (password change)        │
└─────────────────────────────────────────────┘
```

### 3.8 LobbyPage
- [ ] Step-by-step wizard UI
- [ ] Game cards grid с preview
- [ ] Challenge preview с difficulty badges
- [ ] AI generation progress animation
- [ ] Launch countdown

---

## Фаза 4: Специальные компоненты

### 4.1 SpinWheel (полный редизайн)
- [ ] 3D perspective эффект
- [ ] Неоновые сегменты с названиями игр
- [ ] Particle effects при кручении
- [ ] Glow trail за указателем
- [ ] Sound effects (optional)
- [ ] Confetti при выигрыше

### 4.2 EventBanner (переработка)
- [ ] Pulsating glow border
- [ ] Countdown timer с flip animation
- [ ] Event-specific icons/colors
- [ ] Dismiss animation

### 4.3 ActivityFeed (переработка)
- [ ] Timeline style
- [ ] Avatar circles
- [ ] Type-specific icons
- [ ] Hover для деталей
- [ ] New items animation (slide-in)

### 4.4 Challenge Cards
- [ ] Difficulty stars/badges
- [ ] Progress indicator
- [ ] Expandable details
- [ ] Proof preview thumbnail

---

## Фаза 5: Анимации и эффекты

### 5.1 Page Transitions
- [ ] Framer Motion page transitions
- [ ] Fade + slide between routes
- [ ] Loading skeleton screens

### 5.2 Micro-interactions
- [ ] Button press effects
- [ ] Input focus glow
- [ ] Success checkmark animation
- [ ] Error shake animation
- [ ] Loading spinners (custom)

### 5.3 Background Effects
- [ ] Animated gradient mesh
- [ ] Floating particles (optional)
- [ ] Grid pattern overlay
- [ ] Noise texture

### 5.4 Special Effects
- [ ] Glitch text на заголовках
- [ ] Neon glow на важных элементах
- [ ] Shimmer effect на loading
- [ ] Confetti на achievements

---

## Фаза 6: Responsive и Polish

### 6.1 Mobile Optimization
- [ ] Touch-friendly targets
- [ ] Swipe gestures
- [ ] Bottom navigation (mobile)
- [ ] Collapsible sections

### 6.2 Accessibility
- [ ] Keyboard navigation
- [ ] Focus indicators
- [ ] Screen reader support
- [ ] Reduced motion option

### 6.3 Performance
- [ ] Lazy loading images
- [ ] Code splitting
- [ ] Animation optimization
- [ ] Bundle size check

---

## Порядок реализации

### Sprint 1: Фундамент (2-3 дня)
1. Tailwind config + colors
2. Global CSS + animations
3. Base UI components (Button, Card, Input)
4. GlitchText component
5. Updated Layout/Header

### Sprint 2: Core Pages (3-4 дня)
1. HomePage с hero
2. Login/Register
3. MarathonsPage dashboard
4. Profile page

### Sprint 3: Game Flow (3-4 дня)
1. MarathonPage detail
2. SpinWheel redesign
3. PlayPage
4. LeaderboardPage

### Sprint 4: Polish (2-3 дня)
1. LobbyPage
2. Event components
3. Activity feed
4. Animations & transitions

### Sprint 5: Finalization (1-2 дня)
1. Mobile testing
2. Performance optimization
3. Bug fixes
4. Final polish

---

## Референсы для вдохновления

- Cyberpunk 2077 UI
- Discord dark theme
- Valorant game UI
- Steam profile pages
- Twitch streaming UI
- Epic Games Store

---

## Технические заметки

**Framer Motion:** Использовать для page transitions и сложных анимаций
**CSS:** Использовать для простых transitions и hover эффектов
**Tailwind:** Основной инструмент для стилей
**Custom Hooks:** useAnimation, useGlitch для переиспользования логики
