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