Add static pages and styles
This commit is contained in:
348
REDESIGN_PLAN.md
348
REDESIGN_PLAN.md
@@ -22,353 +22,7 @@ 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
|
||||
|
||||
---
|
||||
```А ты
|
||||
|
||||
## Референсы для вдохновления
|
||||
|
||||
|
||||
Reference in New Issue
Block a user