John Doe

Workouts

Calories

1,240

Minutes

Today's Workout

Full Body Workout

45 min • 12 exercises

Full Body Workout

Push-ups

3 sets × 12 reps

Squats

3 sets × 15 reps

Plank

3 sets × 30 sec

Lunges

3 sets × 10 reps

:root { --primary-color: #6C63FF; --secondary-color: #FF6584; --background-color: #F8F9FA; --card-color: #FFFFFF; --text-color: #333333; --text-light: #777777; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background-color: var(--background-color); color: var(--text-color); } .app-container { max-width: 414px; margin: 0 auto; min-height: 100vh; background-color: var(--background-color); position: relative; overflow: hidden; } .screen { display: none; padding: 20px; padding-bottom: 80px; } .screen.active { display: block; } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .user-info { display: flex; align-items: center; gap: 12px; } .profile-pic { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .greeting { font-size: 14px; color: var(--text-light); } .username { font-size: 18px; font-weight: 600; } .notification-btn { background: none; border: none; position: relative; cursor: pointer; } .notification-badge { position: absolute; top: -5px; right: -5px; background-color: var(--secondary-color); color: white; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; } .stats-container { display: flex; justify-content: space-between; margin-bottom: 30px; } .stat-card { background-color: var(--card-color); border-radius: 12px; padding: 15px; width: 30%; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } .stat-card h3 { font-size: 14px; color: var(--text-light); margin-bottom: 5px; } .stat-card p { font-size: 18px; font-weight: 600; } .workout-plan { margin-bottom: 30px; } .workout-plan h2 { font-size: 20px; margin-bottom: 15px; } .workout-card { background-color: var(--card-color); border-radius: 12px; padding: 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } .workout-info h3 { font-size: 18px; margin-bottom: 5px; } .workout-info p { font-size: 14px; color: var(--text-light); } .start-btn { background-color: var(--primary-color); color: white; border: none; border-radius: 8px; padding: 10px 20px; font-weight: 500; cursor: pointer; transition: background-color 0.3s; } .start-btn:hover { background-color: #5a52e0; } .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background-color: var(--card-color); display: flex; justify-content: space-around; padding: 15px 0; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); } .nav-btn { background: none; border: none; cursor: pointer; } .nav-btn svg { stroke: var(--text-light); } .nav-btn.active svg { stroke: var(--primary-color); } /* Workout Screen Styles */ .workout-screen header { margin-bottom: 20px; } .back-btn { background: none; border: none; cursor: pointer; } .exercise-list { display: flex; flex-direction: column; gap: 15px; } .exercise-card { background-color: var(--card-color); border-radius: 12px; padding: 15px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } .exercise-info h3 { font-size: 16px; margin-bottom: 5px; } .exercise-info p { font-size: 14px; color: var(--text-light); } .exercise-status { display: flex; gap: 5px; } .status-dot { width: 12px; height: 12px; border-radius: 50%; background-color: #E0E0E0; } .status-dot.active { background-color: var(--primary-color); } .start-workout-btn { position: fixed; bottom: 80px; left: 20px; right: 20px; background-color: var(--primary-color); color: white; border: none; border-radius: 8px; padding: 15px; font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color 0.3s; } .start-workout-btn:hover { background-color: #5a52e0; } document.addEventListener('DOMContentLoaded', function() { // Navigation between screens const homeScreen = document.querySelector('.home-screen'); const workoutScreen = document.querySelector('.workout-screen'); const startBtn = document.querySelector('.start-btn'); const backBtn = document.querySelector('.back-btn'); startBtn.addEventListener('click', function() { homeScreen.classList.remove('active'); workoutScreen.classList.add('active'); }); backBtn.addEventListener('click', function() { workoutScreen.classList.remove('active'); homeScreen.classList.add('active'); }); // Bottom navigation const navButtons = document.querySelectorAll('.nav-btn'); navButtons.forEach(button => { button.addEventListener('click', function() { navButtons.forEach(btn => btn.classList.remove('active')); this.classList.add('active'); }); }); // Exercise status dots const statusDots = document.querySelectorAll('.status-dot'); statusDots.forEach(dot => { dot.addEventListener('click', function() { this.classList.toggle('active'); }); }); });