18 KiB
18 KiB
План редизайна фронтенда 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- карточка с glassmorphismAnimatedCounter- анимированные числа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 дня)
- Tailwind config + colors
- Global CSS + animations
- Base UI components (Button, Card, Input)
- GlitchText component
- Updated Layout/Header
Sprint 2: Core Pages (3-4 дня)
- HomePage с hero
- Login/Register
- MarathonsPage dashboard
- Profile page
Sprint 3: Game Flow (3-4 дня)
- MarathonPage detail
- SpinWheel redesign
- PlayPage
- LeaderboardPage
Sprint 4: Polish (2-3 дня)
- LobbyPage
- Event components
- Activity feed
- Animations & transitions
Sprint 5: Finalization (1-2 дня)
- Mobile testing
- Performance optimization
- Bug fixes
- 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 для переиспользования логики