User Profile & Onboarding
Personalized Setup
- •Input name, age, weight (kg/lbs), height (cm/ft), and gender with smooth animations
- •Activity level slider with icons (sedentary to athlete)
- •Goal selection: weight loss, maintenance, or muscle gain
- •Dietary preferences: vegetarian, vegan, keto, etc.
- •Real-time BMI gauge with color-coded health indicators
Core Features
Calorie & Macro Calculator
- •Mifflin-St Jeor formula for accurate BMR and TDEE
- •Adjustable deficit/surplus slider (-20% to +20%)
- •Interactive pie chart for 50/30/20 macro split
- •Animated water intake tracker with wave effect
Meal Planner
- •50+ meal options across breakfast, lunch, dinner, snacks
- •Hover reveals nutrition facts and dietary tags
- •Swap meals with flip animation
- •Adjust portion sizes with +/- buttons
- •Fixed bottom bar shows daily totals
Workout Planner
- •30+ workouts tailored to beginner, intermediate, advanced
- •Exercise cards with GIFs, reps, duration, and calorie burn
- •Confetti on exercise completion
- •Circular progress tracker
- •Generate new routine with animation
Progress Dashboard
- •Daily motivational quote from 50+ options
- •Chart.js visualizations: bar, doughnut, line charts
- •Streak badges and achievement system
- •Animated daily completion summary
Visual & UX Enhancements
- •Glassmorphism cards with blur and gradient
- •GSAP-powered animations and 3D tilt effects
- •Dark/light mode toggle with smooth transition
- •Micro-interactions: ripples, hovers, confetti
- •PWA support for offline use and installability
Technology Stack
Frontend & UI
- •HTML5 & CSS3: Semantic, responsive layout
- •Vanilla JavaScript: Modular, clean, no frameworks
- •GSAP: Smooth animations and micro-interactions
- •Chart.js: Interactive data visualizations
Data & Storage
- •Local Storage: Persistent user data
- •JSON Data: Meals, workouts, quotes
Performance & Accessibility
- •60fps Animations: Optimized with requestAnimationFrame
- •ARIA & Keyboard Nav: Fully accessible
- •PWA Ready: Installable, offline-first
