<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Workout Planner</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Chosen Palette: Calm Harmony -->
<!-- Application Structure Plan: A tab-based SPA for intuitive navigation. The structure includes: 'Welcome' for initial guidance and key stats, separate tabs for 'Workout A' and 'Workout B' to focus the user on the day's tasks, and a 'Progression' tab for tips and a visual progress chart. This task-oriented design is chosen for usability, allowing a user at the gym to quickly access daily routines without scrolling through irrelevant information. Interactive cards for exercises prevent information overload, revealing details on demand. -->
<!-- Visualization & Content Choices:
- Report Info: User's stats and "Important Considerations". Goal: Inform & Motivate. Viz/Method: Key stat icons (Unicode) and an interactive checklist (HTML/JS). Justification: Makes pre-workout prep actionable and digestible.
- Report Info: Workout A & B exercises/instructions. Goal: Guide. Viz/Method: Interactive cards (HTML/Tailwind/JS) with checkboxes. Interaction: Click to expand details, check off sets. Justification: Organizes workout flow, adds engaging tracking.
- Report Info: Progression plan. Goal: Visualize future success. Viz/Method: Line chart (Chart.js/Canvas) with sample data. Interaction: None (static visual). Justification: Provides a clear, motivating visual goal for strength gains.
- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<style>
.tab-btn.active {
border-color: #0d9488;
color: #0d9488;
background-color: #f0fdfa;
}
.exercise-card-content {
transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
max-height: 0;
opacity: 0;
overflow: hidden;
}
.exercise-card.open .exercise-card-content {
max-height: 500px;
opacity: 1;
}
.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
height: 300px;
max-height: 400px;
}
@media (min-width: 768px) {
.chart-container {
height: 350px;
}
}
</style>
</head>
<body class="bg-slate-50 text-slate-700 font-sans">
<div class="container mx-auto p-4 md:p-8 max-w-4xl">
<header class="text-center mb-8">
<h1 class="text-3xl md:text-4xl font-bold text-teal-700">Your Fitness Journey</h1>
<p class="text-slate-500 mt-2">A personalized plan to get you started and build confidence.</p>
</header>
<nav class="flex justify-center border-b border-slate-200 mb-8">
<button data-tab="welcome" class="tab-btn active text-sm md:text-base font-medium p-4 border-b-2 border-transparent hover:text-teal-600">Welcome</button>
<button data-tab="workout-a" class="tab-btn text-sm md:text-base font-medium p-4 border-b-2 border-transparent hover:text-teal-600">Workout A</button>
<button data-tab="workout-b" class="tab-btn text-sm md:text-base font-medium p-4 border-b-2 border-transparent hover:text-teal-600">Workout B</button>
<button data-tab="progress" class="tab-btn text-sm md:text-base font-medium p-4 border-b-2 border-transparent hover:text-teal-600">Progression</button>
</nav>
<main>
<div id="welcome" class="tab-content">
<div class="bg-white p-6 rounded-lg shadow-sm">
<h2 class="text-2xl font-bold text-teal-700 mb-4">Getting Started</h2>
<p class="mb-6">This plan is designed to be approachable and effective, helping you feel confident in the gym. It focuses on bodyweight exercises, free weights, and cardio to help you lose weight and build strength without using intimidating machines. Remember, consistency is more important than intensity when you're starting out.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 text-center">
<div class="bg-teal-50 p-4 rounded-lg">
<span class="text-3xl">👤</span>
<p class="font-bold mt-1">Age: 33</p>
</div>
<div class="bg-teal-50 p-4 rounded-lg">
<span class="text-3xl">📏</span>
<p class="font-bold mt-1">Height: 5'7"</p>
</div>
<div class="bg-teal-50 p-4 rounded-lg">
<span class="text-3xl">⚖️</span>
<p class="font-bold mt-1">Weight: 170 lbs</p>
</div>
</div>
<h3 class="text-xl font-bold text-teal-700 mb-4">Before Every Workout</h3>
<p class="mb-4">Review this checklist before you begin each session to ensure you are prepared, safe, and get the most out of your workout.</p>
<ul class="space-y-3">
<li class="flex items-start"><span class="text-teal-500 font-bold mr-3">✓</span><div><strong class="text-slate-800">Warm-Up:</strong> Perform 5-10 minutes of light cardio (brisk walk, light cycling) and dynamic stretches (arm circles, leg swings).</div></li>
<li class="flex items-start"><span class="text-teal-500 font-bold mr-3">✓</span><div><strong class="text-slate-800">Focus on Form:</strong> It's better to do fewer reps with perfect form than many with bad form. Quality over quantity!</div></li>
<li class="flex items-start"><span class="text-teal-500 font-bold mr-3">✓</span><div><strong class="text-slate-800">Listen to Your Body:</strong> If something causes sharp pain, stop. Don't push through pain. Rest is part of the process.</div></li>
<li class="flex items-start"><span class="text-teal-500 font-bold mr-3">✓</span><div><strong class="text-slate-800">Stay Hydrated:</strong> Drink water before, during, and after your workout.</div></li>
<li class="flex items-start"><span class="text-teal-500 font-bold mr-3">✓</span><div><strong class="text-slate-800">Cool-Down:</strong> After your workout, do 5-10 minutes of static stretches, holding each for 20-30 seconds.</div></li>
</ul>
</div>
</div>
<div id="workout-a" class="tab-content hidden">
<div class="bg-white p-6 rounded-lg shadow-sm mb-6">
<h2 class="text-2xl font-bold text-teal-700 mb-2">Workout A: Lower Body & Core</h2>
<p class="mb-4">This routine focuses on building a strong foundation in your legs and core. Finish with incline walking on the treadmill to boost your cardiovascular health and calorie burn. Your suggested schedule is Monday and Friday.</p>
</div>
<div class="space-y-4">
<div class="exercise-card bg-white rounded-lg shadow-sm overflow-hidden">
<button class="w-full text-left p-4 flex justify-between items-center">
<h3 class="text-lg font-bold">1. Goblet Squat <span class="text-sm font-normal text-slate-500 ml-2">(3 Sets / 10-15 Reps)</span></h3>
<span class="arrow text-teal-600 text-2xl font-light transform">▸</span>
</button>
<div class="exercise-card-content px-4 pb-4">
<p class="mb-2"><strong>How to:</strong> Stand with feet shoulder-width apart, holding one dumbbell vertically against your chest. Keeping your chest up, lower your hips as if sitting in a chair. Go as deep as is comfortable, then push through your heels to return to the start.</p>
<p class="text-sm text-teal-800 bg-teal-50 p-2 rounded"><strong>Torso Benefit:</strong> Engages your core to maintain balance and an upright posture.</p>
</div>
</div>
<div class="exercise-card bg-white rounded-lg shadow-sm overflow-hidden">
<button class="w-full text-left p-4 flex justify-between items-center">
<h3 class="text-lg font-bold">2. Walking Lunges <span class="text-sm font-normal text-slate-500 ml-2">(3 Sets / 10-12 Reps per leg)</span></h3>
<span class="arrow text-teal-600 text-2xl font-light transform">▸</span>
</button>
<div class="exercise-card-content px-4 pb-4">
<p class="mb-2"><strong>How to:</strong> Step forward with one leg, lowering your hips until both knees are at a 90-degree angle. Ensure your front knee is over your ankle. Push off your back foot to step into the next lunge with the opposite leg. For a challenge, hold dumbbells.</p>
<p class="text-sm text-teal-800 bg-teal-50 p-2 rounded"><strong>Torso Benefit:</strong> Requires core stability to maintain balance and control.</p>
</div>
</div>
<div class="exercise-card bg-white rounded-lg shadow-sm overflow-hidden">
<button class="w-full text-left p-4 flex justify-between items-center">
<h3 class="text-lg font-bold">3. Glute Bridge <span class="text-sm font-normal text-slate-500 ml-2">(3 Sets / 12-15 Reps)</span></h3>
<span class="arrow text-teal-600 text-2xl font-light transform">▸</span>
</button>
<div class="exercise-card-content px-4 pb-4">
<p class="mb-2"><strong>How to:</strong> Lie on your back with knees bent and feet flat on the floor. Lift your hips off the floor until your body forms a straight line from shoulders to knees, squeezing your glutes at the top. Slowly lower back down.</p>
<p class="text-sm text-teal-800 bg-teal-50 p-2 rounded"><strong>Torso Benefit:</strong> Strengthens the glutes and lower back, contributing to core stability.</p>
</div>
</div>
<div class="exercise-card bg-white rounded-lg shadow-sm overflow-hidden">
<button class="w-full text-left p-4 flex justify-between items-center">
<h3 class="text-lg font-bold">4. Side Plank <span class="text-sm font-normal text-slate-500 ml-2">(3 Sets / 20-45 Sec per side)</span></h3>
<span class="arrow text-teal-600 text-2xl font-light transform">▸</span>
</button>
<div class="exercise-card-content px-4 pb-4">
<p class="mb-2"><strong>How to:</strong> Lie on your side, propped up on your forearm with your elbow under your shoulder. Lift your hips, forming a straight line from head to heels. Hold, then repeat on the other side.</p>
<p class="text-sm text-teal-800 bg-teal-50 p-2 rounded"><strong>Torso Benefit:</strong> Excellent for strengthening the oblique muscles (sides of your torso).</p>
</div>
</div>
<div class="exercise-card bg-white rounded-lg shadow-sm overflow-hidden">
<button class="w-full text-left p-4 flex justify-between items-center">
<h3 class="text-lg font-bold">5. Cardio: Treadmill <span class="text-sm font-normal text-slate-500 ml-2">(25-30 Mins)</span></h3>
<span class="arrow text-teal-600 text-2xl font-light transform">▸</span>
</button>
<div class="exercise-card-content px-4 pb-4">
<p class="mb-2"><strong>Intensity:</strong> Brisk walk at an incline of 3-6%. You should be able to talk, but feel your heart rate is elevated. Incline walking is a fantastic low-impact way to burn calories and engage your leg muscles.</p>
</div>
</div>
</div>
</div>
<div id="workout-b" class="tab-content hidden">
<div class="bg-white p-6 rounded-lg shadow-sm mb-6">
<h2 class="text-2xl font-bold text-teal-700 mb-2">Workout B: Upper Body & Core</h2>
<p class="mb-4">This session targets your chest, back, shoulders, and abs. The stationary bike provides a great low-impact cardio finish. Your suggested schedule is Wednesday and Sunday.</p>
</div>
<div class="space-y-4">
<div class="exercise-card bg-white rounded-lg shadow-sm overflow-hidden">
<button class="w-full text-left p-4 flex justify-between items-center">
<h3 class="text-lg font-bold">1. Push-ups <span class="text-sm font-normal text-slate-500 ml-2">(3 Sets / AMRAP)</span></h3>
<span class="arrow text-teal-600 text-2xl font-light transform">▸</span>
</button>
<div class="exercise-card-content px-4 pb-4">
<p class="mb-2"><strong>How to:</strong> Start in a plank position. Lower your chest to the floor, keeping your body straight. Push back up. If this is too hard, perform them on your knees or with your hands on an elevated surface (like a bench).</p>
<p class="text-sm text-teal-800 bg-teal-50 p-2 rounded"><strong>Torso Benefit:</strong> Engages your core to maintain a straight body line, working the entire front of your torso.</p>
</div>
</div>
<div class="exercise-card bg-white rounded-lg shadow-sm overflow-hidden">
<button class="w-full text-left p-4 flex justify-between items-center">
<h3 class="text-lg font-bold">2. Dumbbell Row <span class="text-sm font-normal text-slate-500 ml-2">(3 Sets / 10-15 Reps per arm)</span></h3>
<span class="arrow text-teal-600 text-2xl font-light transform">▸</span>
</button>
<div class="exercise-card-content px-4 pb-4">
<p class="mb-2"><strong>How to:</strong> Place one knee and hand on a bench. Keep your back flat. Holding a dumbbell in the opposite hand, pull it up towards your chest, squeezing your shoulder blade. Lower slowly. Complete reps and switch sides.</p>
<p class="text-sm text-teal-800 bg-teal-50 p-2 rounded"><strong>Torso Benefit:</strong> Strengthens back muscles, which are crucial for posture and stability.</p>
</div>
</div>
<div class="exercise-card bg-white rounded-lg shadow-sm overflow-hidden">
<button class="w-full text-left p-4 flex justify-between items-center">
<h3 class="text-lg font-bold">3. Dumbbell Overhead Press <span class="text-sm font-normal text-slate-500 ml-2">(3 Sets / 10-15 Reps)</span></h3>
<span class="arrow text-teal-600 text-2xl font-light transform">▸</span>
</button>
<div class="exercise-card-content px-4 pb-4">
<p class="mb-2"><strong>How to:</strong> Sit or stand, holding dumbbells at shoulder height, palms forward. Press them straight overhead until arms are fully extended. Lower slowly back to the start.</p>
<p class="text-sm text-teal-800 bg-teal-50 p-2 rounded"><strong>Torso Benefit:</strong> Strengthens shoulders while your core works to stabilize your torso.</p>
</div>
</div>
<div class="exercise-card bg-white rounded-lg shadow-sm overflow-hidden">
<button class="w-full text-left p-4 flex justify-between items-center">
<h3 class="text-lg font-bold">4. Russian Twists <span class="text-sm font-normal text-slate-500 ml-2">(3 Sets / 15-20 Reps per side)</span></h3>
<span class="arrow text-teal-600 text-2xl font-light transform">▸</span>
</button>
<div class="exercise-card-content px-4 pb-4">
<p class="mb-2"><strong>How to:</strong> Sit on the floor, lean back slightly with knees bent. Clasp hands together (or hold a light dumbbell) and twist your torso from side to side, touching the floor beside your hip on each side.</p>
<p class="text-sm text-teal-800 bg-teal-50 p-2 rounded"><strong>Torso Benefit:</strong> Directly targets the oblique muscles for a stronger core.</p>
</div>
</div>
<div class="exercise-card bg-white rounded-lg shadow-sm overflow-hidden">
<button class="w-full text-left p-4 flex justify-between items-center">
<h3 class="text-lg font-bold">5. Cardio: Stationary Bike <span class="text-sm font-normal text-slate-500 ml-2">(25-30 Mins)</span></h3>
<span class="arrow text-teal-600 text-2xl font-light transform">▸</span>
</button>
<div class="exercise-card-content px-4 pb-4">
<p class="mb-2"><strong>Intensity:</strong> Maintain a steady, moderate pace. You should feel challenged but able to sustain the effort. Vary the resistance to keep it engaging. This is a great low-impact cardio option.</p>
</div>
</div>
</div>
</div>
<div id="progress" class="tab-content hidden">
<div class="bg-white p-6 rounded-lg shadow-sm">
<h2 class="text-2xl font-bold text-teal-700 mb-4">How to Progress & Get Stronger</h2>
<p class="mb-6">As you get more comfortable and stronger, you need to continue challenging your body to see results. This is called progressive overload. Here’s how to do it:</p>
<ul class="space-y-3 list-disc list-inside mb-8">
<li><strong>Increase Reps:</strong> Once you can comfortably complete all sets, try adding 1-2 more repetitions per set.</li>
<li><strong>Add Sets:</strong> After increasing reps, you can add a fourth set to an exercise for more volume.</li>
<li><strong>Increase Weight:</strong> When the current dumbbell weight feels too easy, move up to the next available weight.</li>
<li><strong>Increase Cardio:</strong> Gradually add a few minutes to your cardio sessions or increase the incline/resistance.</li>
<li><strong>Reduce Rest Time:</strong> As you get fitter, shorten your rest between sets from 90 seconds to 60 seconds.</li>
</ul>
<h3 class="text-xl font-bold text-teal-700 mb-4 text-center">Visualizing Your Progress</h3>
<p class="text-center mb-4">Tracking your lifts is a great way to stay motivated. This chart shows an example of how your Goblet Squat weight could increase over 8 weeks. Aim for this kind of steady improvement!</p>
<div class="chart-container">
<canvas id="progressChart"></canvas>
</div>
</div>
</div>
</main>
</div>
<script>
const tabs = document.querySelectorAll('.tab-btn');
const contents = document.querySelectorAll('.tab-content');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const targetId = tab.dataset.tab;
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
contents.forEach(content => {
if (content.id === targetId) {
content.classList.remove('hidden');
} else {
content.classList.add('hidden');
}
});
});
});
const exerciseCards = document.querySelectorAll('.exercise-card');
exerciseCards.forEach(card => {
const button = card.querySelector('button');
const arrow = card.querySelector('.arrow');
button.addEventListener('click', () => {
const isOpen = card.classList.contains('open');
exerciseCards.forEach(c => c.classList.remove('open')); // Close all others
if (!isOpen) {
card.classList.add('open');
}
});
});
const chartCtx = document.getElementById('progressChart').getContext('2d');
const progressChart = new Chart(chartCtx, {
type: 'line',
data: {
labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],
datasets: [{
label: 'Goblet Squat Weight (lbs)',
data: [20, 25, 25, 30, 30, 35, 35, 40],
borderColor: '#0d9488',
backgroundColor: 'rgba(13, 148, 136, 0.1)',
fill: true,
tension: 0.3
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: false,
title: {
display: true,
text: 'Weight (lbs)'
}
},
x: {
title: {
display: true,
text: 'Time'
}
}
},
plugins: {
legend: {
display: true,
position: 'top',
},
tooltip: {
enabled: true
}
}
}
});
</script>
</body>
</html>
