390 lines
18 KiB
Markdown
390 lines
18 KiB
Markdown
# План редизайна фронтенда 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 для переиспользования логики
|