docs(phase-06): Add UI/UX design specifications from real Gravl app
This commit is contained in:
@@ -0,0 +1,143 @@
|
|||||||
|
# Phase 06 — UI/UX Design Specifications
|
||||||
|
|
||||||
|
Based on real Gravl app screenshots provided by user.
|
||||||
|
|
||||||
|
## 🎨 Design System
|
||||||
|
|
||||||
|
### Colors
|
||||||
|
- **Background:** Dark navy/charcoal (#0a0a1f, #1a1a2e)
|
||||||
|
- **Primary Accent:** Neon yellow (#FFFF00 or #CCFF00)
|
||||||
|
- **Success/Recovery:** Bright green (#00FF41)
|
||||||
|
- **Cards:** Dark with subtle borders (#2a2a3e)
|
||||||
|
- **Text:** Light gray/white
|
||||||
|
|
||||||
|
### Components
|
||||||
|
|
||||||
|
### 1️⃣ Home Dashboard (WorkoutPage)
|
||||||
|
```
|
||||||
|
┌─ Gym Profile Header
|
||||||
|
├─ Upcoming Workouts Section
|
||||||
|
│ ├─ Progress Counter: "0 of 3 completed this week"
|
||||||
|
│ └─ Workout Card (Large)
|
||||||
|
│ ├─ Background Image
|
||||||
|
│ ├─ Workout Type Badge (PULL, PUSH, etc.) - yellow
|
||||||
|
│ ├─ Workout Title + Duration + Exercises
|
||||||
|
│ ├─ Recovery Badge (Green circle with %)
|
||||||
|
│ └─ "NEXT WORKOUT" Button (Neon yellow)
|
||||||
|
│
|
||||||
|
├─ "Feeling like something different?" Section
|
||||||
|
│ ├─ Custom (Purple icon)
|
||||||
|
│ ├─ Cardio (Green icon)
|
||||||
|
│ └─ Manual (Blue icon)
|
||||||
|
│
|
||||||
|
├─ Analytics Snapshot
|
||||||
|
│ ├─ Strength Score Card (Novice 89/100)
|
||||||
|
│ └─ Trends (4 mini cards: Workouts, Volume, Calories, Sets)
|
||||||
|
│
|
||||||
|
└─ Challenge Banner (bottom)
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2️⃣ Library Page
|
||||||
|
```
|
||||||
|
┌─ Search Bar
|
||||||
|
├─ Gravl Splits Section
|
||||||
|
│ ├─ Split Card 1 (Image + "PUSH PULL LEGS")
|
||||||
|
│ ├─ Split Card 2 (Image + "UPPER LOWER FULL")
|
||||||
|
│ └─ View All
|
||||||
|
│
|
||||||
|
├─ "Exercises by Muscle" Grid
|
||||||
|
│ ├─ Chest (4/45)
|
||||||
|
│ ├─ Shoulders (7/52)
|
||||||
|
│ ├─ Triceps (2/33)
|
||||||
|
│ └─ [More muscles...]
|
||||||
|
│
|
||||||
|
├─ Weights Section
|
||||||
|
│ ├─ Exercise Row (Image + Name + Muscle Group)
|
||||||
|
│ ├─ Arnold Press (Shoulders)
|
||||||
|
│ ├─ Back Squat (Quads)
|
||||||
|
│ └─ [More exercises...]
|
||||||
|
│
|
||||||
|
├─ Bodyweight Section
|
||||||
|
├─ Cardio Section
|
||||||
|
└─ [More categories...]
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3️⃣ Profile Page
|
||||||
|
```
|
||||||
|
┌─ Header
|
||||||
|
│ ├─ Avatar + Name
|
||||||
|
│ ├─ Workout count
|
||||||
|
│ └─ Settings icon
|
||||||
|
│
|
||||||
|
├─ Grid Cards (2x2)
|
||||||
|
│ ├─ Friends (0 Friends / View profiles)
|
||||||
|
│ ├─ Customer Support
|
||||||
|
│ ├─ Streak (0 / 3 days)
|
||||||
|
│ └─ Measurements (100kg)
|
||||||
|
│
|
||||||
|
├─ Updates Card
|
||||||
|
├─ Heatmap (Workout Calendar)
|
||||||
|
│ ├─ Days of week (Mon-Sun)
|
||||||
|
│ ├─ Months (Jan-Mar, etc.)
|
||||||
|
│ ├─ Color intensity = volume
|
||||||
|
│ └─ Volume slider (Less ← → More)
|
||||||
|
│
|
||||||
|
├─ Badges Section
|
||||||
|
│ ├─ Badge 1 (25 Exercises)
|
||||||
|
│ ├─ Badge 2 (10,000 Kg Volume)
|
||||||
|
│ └─ Badge 3 (First Cardio Workout)
|
||||||
|
│
|
||||||
|
└─ [More stats...]
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🔧 Component Requirements for Phase 06
|
||||||
|
|
||||||
|
### Task 06-01: Workout Swap System
|
||||||
|
- **SwapWorkoutModal** — "Feeling like something different?"
|
||||||
|
- 3 quick-swap options: Custom, Cardio, Manual
|
||||||
|
- Shows available workouts for swap
|
||||||
|
- Confirm/cancel buttons
|
||||||
|
|
||||||
|
### Task 06-02: Recovery Tracking
|
||||||
|
- **RecoveryBadge** — Green circle with % recovery
|
||||||
|
- Display on workout cards
|
||||||
|
- Update based on muscle group last activity
|
||||||
|
|
||||||
|
### Task 06-03: Smart Recommendations
|
||||||
|
- **RecommendationPanel** — Suggest swaps based on recovery
|
||||||
|
- "You're well-recovered for X"
|
||||||
|
- Show 2-3 suggested workouts
|
||||||
|
- One-tap "Use this" button
|
||||||
|
|
||||||
|
### Task 06-04: Analytics Dashboard
|
||||||
|
- **StrengthScoreCard** — Novice/Intermediate/Advanced level
|
||||||
|
- **TrendsGrid** — 4 mini charts (Workouts, Volume, Calories, Sets)
|
||||||
|
- **WorkoutHeatmap** — Calendar with color intensity
|
||||||
|
|
||||||
|
### Task 06-05: UI Polish
|
||||||
|
- **WorkoutCard** — Improve styling to match design
|
||||||
|
- **LibraryExerciseRow** — Add muscle group icons
|
||||||
|
- **ProfileBadges** — Implement achievement system
|
||||||
|
|
||||||
|
## 🎨 Styling Notes
|
||||||
|
|
||||||
|
- **Cards:** Rounded corners (border-radius: 12-16px)
|
||||||
|
- **Buttons:** Rounded pill-style for primary actions
|
||||||
|
- **Icons:** Muscle group icons + activity type icons
|
||||||
|
- **Images:** Overlay text on images (black gradient background)
|
||||||
|
- **Spacing:** Consistent padding (16px standard)
|
||||||
|
- **Typography:** Bold headers, light body text
|
||||||
|
- **Animations:** Smooth transitions on interactions
|
||||||
|
|
||||||
|
## 📱 Responsive Design
|
||||||
|
|
||||||
|
- **Mobile-first** approach
|
||||||
|
- Bottom navigation (Home, Feed, Library, Profile)
|
||||||
|
- Full-width cards on small screens
|
||||||
|
- 2-column grid on tablets (where applicable)
|
||||||
|
- Stacked layout for profile cards
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Status:** Design specifications ready for implementation
|
||||||
|
**Next:** Frontend-dev agent implements components
|
||||||
Reference in New Issue
Block a user