Skip to content

Instantly share code, notes, and snippets.

@smoidu

smoidu/exercise.html

Last active March 16, 2026 14:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save smoidu/ce757d3bc2904817795886e9374dff83 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save smoidu/ce757d3bc2904817795886e9374dff83 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
exercise.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise Reference</title>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0f0f0f;
--surface: #181818;
--border: #2a2a2a;
--accent: #c8f064;
--text: #e8e8e8;
--muted: #6a6a6a;
--lift: #4a9eff;
--stretch: #ff8c5a;
}
- { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(–bg);
color: var(–text);
font-family: ‘IBM Plex Sans’, sans-serif;
font-weight: 300;
min-height: 100vh;
padding: 32px 24px 64px;
max-width: 720px;
margin: 0 auto;
}
header {
margin-bottom: 40px;
border-bottom: 1px solid var(–border);
padding-bottom: 24px;
}
header h1 {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 13px;
font-weight: 600;
color: var(–accent);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 8px;
}
header p {
font-size: 12px;
color: var(–muted);
font-family: ‘IBM Plex Mono’, monospace;
letter-spacing: 0.05em;
}
.day-tabs {
display: flex;
gap: 4px;
margin-bottom: 32px;
}
.tab {
flex: 1;
background: var(–surface);
border: 1px solid var(–border);
color: var(–muted);
font-family: ‘IBM Plex Mono’, monospace;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 12px 8px;
cursor: pointer;
transition: all 0.15s ease;
text-align: center;
}
.tab:hover { color: var(–text); border-color: #444; }
.tab.active {
background: var(–accent);
color: #0f0f0f;
border-color: var(–accent);
}
.day-panel { display: none; }
.day-panel.active { display: block; }
.day-header {
margin-bottom: 28px;
}
.day-header h2 {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 20px;
font-weight: 600;
color: var(–text);
margin-bottom: 4px;
}
.day-header .subtitle {
font-size: 12px;
color: var(–muted);
font-family: ‘IBM Plex Mono’, monospace;
letter-spacing: 0.05em;
}
.section-label {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 10px;
}
.section-label.lift { color: var(–lift); }
.section-label.stretch { color: var(–stretch); }
.section-label::after {
content: ‘’;
flex: 1;
height: 1px;
background: var(–border);
}
.section { margin-bottom: 36px; }
.exercise-card {
background: var(–surface);
border: 1px solid var(–border);
margin-bottom: 10px;
overflow: hidden;
transition: border-color 0.15s;
}
.exercise-card:hover { border-color: #3a3a3a; }
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
cursor: pointer;
user-select: none;
}
.card-header-left {
display: flex;
align-items: center;
gap: 14px;
}
.card-num {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 10px;
color: var(–muted);
min-width: 16px;
}
.card-name {
font-size: 14px;
font-weight: 500;
color: var(–text);
}
.card-meta {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 11px;
color: var(–muted);
display: flex;
align-items: center;
gap: 12px;
}
.tag {
padding: 2px 8px;
font-size: 10px;
font-family: ‘IBM Plex Mono’, monospace;
font-weight: 600;
letter-spacing: 0.08em;
border-radius: 2px;
}
.tag-lift { background: rgba(74, 158, 255, 0.12); color: var(–lift); }
.tag-stretch { background: rgba(255, 140, 90, 0.12); color: var(–stretch); }
.chevron {
color: var(–muted);
font-size: 10px;
transition: transform 0.2s;
font-family: ‘IBM Plex Mono’, monospace;
}
.exercise-card.open .chevron { transform: rotate(180deg); }
.card-body {
display: none;
padding: 0 18px 18px 48px;
border-top: 1px solid var(–border);
}
.exercise-card.open .card-body { display: block; }
.prescription {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 12px;
color: var(–accent);
padding: 12px 0 14px;
letter-spacing: 0.05em;
}
.steps {
list-style: none;
counter-reset: steps;
}
.steps li {
counter-increment: steps;
display: flex;
gap: 12px;
font-size: 13px;
line-height: 1.6;
color: #c0c0c0;
margin-bottom: 8px;
}
.steps li::before {
content: counter(steps);
font-family: ‘IBM Plex Mono’, monospace;
font-size: 10px;
color: var(–muted);
min-width: 16px;
padding-top: 3px;
}
.note {
margin-top: 14px;
padding: 10px 14px;
border-left: 2px solid var(–border);
font-size: 12px;
color: var(–muted);
line-height: 1.6;
}
.note strong {
color: var(–text);
font-weight: 500;
}
.timing-grid {
display: flex;
gap: 8px;
margin-top: 12px;
}
.timing-pill {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 10px;
padding: 4px 10px;
border: 1px solid var(–border);
color: var(–muted);
border-radius: 2px;
}
</style>
</head>
<body>
<header>
<h1>Exercise Reference</h1>
<p>Mon / Wed / Thu — 30 min — Post drop-off</p>
</header>
<div class="day-tabs">
<button class="tab active" onclick="showDay('mon', this)">Monday</button>
<button class="tab" onclick="showDay('wed', this)">Wednesday</button>
<button class="tab" onclick="showDay('thu', this)">Thursday</button>
<button class="tab" onclick="showDay('daily', this)">Daily</button>
</div>
<!-- MONDAY -->
<div class="day-panel active" id="mon">
<div class="day-header">
<h2>Upper Body</h2>
<div class="subtitle">Shoulders · Back · Arms + Chest/Shoulder Stretch</div>
</div>
<div class="section">
<div class="section-label lift">Lifting — ~20 min</div>
<div class="note" style="margin-bottom:16px; border-color: var(--lift)"><strong>Tempo:</strong> Lift in 1–2 sec. Lower in 2–3 sec — resist the weight, don't drop it. 1 sec pause at peak contraction. ~4–5 sec per rep total.</div>
```
<!-- Overhead Press -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">01</span>
<span class="card-name">Overhead Press</span>
</div>
<div class="card-meta">
<span class="tag tag-lift">3 × 8</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<div class="prescription">3 sets × 8 reps — rest 60–90 sec between sets</div>
<ol class="steps">
<li>Stand with feet shoulder-width apart. Hold dumbbells or a barbell at shoulder height, palms facing forward.</li>
<li>Brace your core firmly before each rep — imagine someone is about to push you sideways.</li>
<li>Press directly overhead until arms are fully extended. Don't flare your elbows excessively.</li>
<li>Lower back to shoulder height with control. This is where the muscle work happens — don't drop it.</li>
</ol>
<div class="note"><strong>Watch for:</strong> Arching your lower back as you press. If this happens, the weight is too heavy or your core isn't braced. Keep your ribcage down throughout.</div>
</div>
</div>
<!-- Seated Cable Row -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">02</span>
<span class="card-name">Seated Cable Row</span>
</div>
<div class="card-meta">
<span class="tag tag-lift">3 × 10</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<div class="prescription">3 sets × 10 reps — rest 60 sec between sets</div>
<ol class="steps">
<li>Sit at the cable machine with feet flat on the platform, knees slightly bent. Grip the handle with both hands.</li>
<li>Sit tall — neutral spine, not leaning back. This is the starting position every rep returns to.</li>
<li>Pull the handle toward your lower chest/upper stomach, leading with your elbows.</li>
<li>Squeeze your shoulder blades together at the end of the pull — hold 1 second.</li>
<li>Return to start slowly. Don't let your torso rock forward to load the next rep.</li>
</ol>
<div class="note"><strong>Watch for:</strong> Rocking back and forth — this turns it into a back-swinging exercise and removes the benefit. Torso stays close to upright throughout.</div>
</div>
</div>
<!-- Lateral Raises -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">03</span>
<span class="card-name">Lateral Raises <em style="font-size:11px;color:var(--muted);font-style:normal;">superset →</em></span>
</div>
<div class="card-meta">
<span class="tag tag-lift">2 × 12</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<div class="prescription">2 sets × 12 reps — go directly into Tricep Pushdown, then rest 60 sec</div>
<ol class="steps">
<li>Stand holding light dumbbells at your sides, slight bend in elbows.</li>
<li>Raise arms out to the sides until level with your shoulders — no higher.</li>
<li>Lead with your elbows, not your wrists. Think of tipping a jug of water.</li>
<li>Lower slowly — 2–3 seconds down. The descent is half the work for shoulder development.</li>
</ol>
<div class="note"><strong>Weight guidance:</strong> These should be much lighter than you expect — 4–6kg is typical to start. Using too much weight turns this into a shrugging movement, which works the neck instead.</div>
</div>
</div>
<!-- Tricep Pushdown -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">04</span>
<span class="card-name">Tricep Pushdown <em style="font-size:11px;color:var(--muted);font-style:normal;">↩ superset</em></span>
</div>
<div class="card-meta">
<span class="tag tag-lift">2 × 10</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<div class="prescription">2 sets × 10 reps — done immediately after Lateral Raises</div>
<ol class="steps">
<li>Stand at the cable machine, grip the bar or rope attachment at chest height.</li>
<li>Pin your elbows to your sides — they should not move during the exercise.</li>
<li>Push the handle straight down until your arms are fully extended.</li>
<li>Return slowly to start — control the weight, don't let it pull your arms back up.</li>
</ol>
<div class="note"><strong>Elbows:</strong> If your elbows flare out or lift as you push, the weight is too heavy. The elbow position is the whole exercise.</div>
</div>
</div>
```
</div>
<div class="section">
<div class="section-label stretch">Stretching — ~10 min</div>
<div class="note" style="margin-bottom:16px; border-color: var(--stretch)"><strong>Protocol:</strong> 60 seconds each hold, 2 rounds per stretch. Brief reset between rounds. Neck stretch is 30 sec only — longer creates tension rather than releasing it.</div>
```
<!-- Cross-body shoulder -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">S1</span>
<span class="card-name">Cross-Body Shoulder Pull</span>
</div>
<div class="card-meta">
<span class="tag tag-stretch">60s × 2 each side</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<ol class="steps">
<li>Bring one arm straight across your chest at shoulder height.</li>
<li>Use your opposite forearm or hand to press the arm gently closer to your chest.</li>
<li>Keep the arm at shoulder height — don't let it drop. The stretch is in the back of the shoulder.</li>
<li>Hold 60 sec, switch sides, repeat for a second round.</li>
</ol>
</div>
</div>
<!-- Chest opener -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">S2</span>
<span class="card-name">Chest Opener — Hands Clasped Behind Back</span>
</div>
<div class="card-meta">
<span class="tag tag-stretch">60s × 2</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<ol class="steps">
<li>Stand tall, clasp your hands behind your lower back.</li>
<li>Squeeze your shoulder blades together and lift your chest upward.</li>
<li>Optional: gently fold forward at the hips while keeping hands clasped — this deepens the stretch across the chest and front of shoulders.</li>
<li>Hold 60 sec. Repeat for a second round.</li>
</ol>
<div class="note">Counteracts the rounded-shoulder position that builds up from sitting. Worth doing on non-gym days if you've been at a desk.</div>
</div>
</div>
<!-- Neck -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">S3</span>
<span class="card-name">Ear-to-Shoulder Neck Stretch</span>
</div>
<div class="card-meta">
<span class="tag tag-stretch">30s each side</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<ol class="steps">
<li>Sit or stand tall. Let one ear drop slowly toward your shoulder — no forcing it.</li>
<li>For a slightly deeper stretch, place your same-side hand on the side of your head and apply light pressure only — fingertip weight, not a pull.</li>
<li>30 seconds each side. Do not repeat for a second round — neck tissue responds poorly to prolonged static holds.</li>
</ol>
</div>
</div>
<!-- Side lean -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">S4</span>
<span class="card-name">Overhead Side Lean</span>
</div>
<div class="card-meta">
<span class="tag tag-stretch">60s × 2 each side</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<ol class="steps">
<li>Stand with feet hip-width apart. Raise both arms overhead and clasp hands or cross wrists.</li>
<li>Lean slowly to one side, keeping your hips square and both feet planted.</li>
<li>You should feel the stretch along the side of your torso and lat (the large back muscle). Hold 60 sec.</li>
<li>Switch sides. Repeat for a second round each side.</li>
</ol>
</div>
</div>
```
</div>
</div>
<!-- WEDNESDAY -->
<div class="day-panel" id="wed">
<div class="day-header">
<h2>Upper Body B</h2>
<div class="subtitle">Horizontal Push · Biceps · Rear Delt + Chest/Arm Stretch</div>
</div>
<div class="section">
<div class="section-label lift">Lifting — ~20 min</div>
<div class="note" style="margin-bottom:16px; border-color: var(--lift)"><strong>Tempo:</strong> Lift in 1–2 sec. Lower in 2–3 sec — resist the weight, don't drop it. 1 sec pause at peak contraction. ~4–5 sec per rep total.</div>
```
<!-- Dumbbell Bench Press -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">01</span>
<span class="card-name">Dumbbell Bench Press</span>
</div>
<div class="card-meta">
<span class="tag tag-lift">3 × 10</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<div class="prescription">3 sets × 10 reps — rest 60–90 sec between sets</div>
<ol class="steps">
<li>Lie flat on a bench, a dumbbell in each hand resting on your thighs. Use your thighs to help kick the weights up to chest height as you lie back.</li>
<li>Hold the dumbbells at chest level, elbows at roughly 45 degrees from your torso — not flared out wide, not pinned to your sides.</li>
<li>Press both dumbbells upward until your arms are fully extended. They can touch lightly at the top but don't need to.</li>
<li>Lower with control until your elbows are just below the bench level — a full stretch at the bottom is where chest development happens.</li>
</ol>
<div class="note"><strong>Why this complements Monday:</strong> Monday's overhead press is a vertical push. This is a horizontal push — different muscle fiber recruitment across the chest and front shoulder, same pressing muscles trained from a new angle.</div>
</div>
</div>
<!-- Reverse Fly -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">02</span>
<span class="card-name">Reverse Fly <em style="font-size:11px;color:var(--muted);font-style:normal;">superset →</em></span>
</div>
<div class="card-meta">
<span class="tag tag-lift">3 × 12</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<div class="prescription">3 sets × 12 reps — go directly into Dumbbell Curl, then rest 60 sec</div>
<ol class="steps">
<li>Stand with feet hip-width apart, hinge forward at the hips until your torso is roughly parallel to the floor. Hold light dumbbells hanging below your chest.</li>
<li>With a slight bend in your elbows, raise both arms out to the sides — think of opening a pair of wings — until they reach shoulder height.</li>
<li>Squeeze your shoulder blades together at the top. Hold briefly.</li>
<li>Lower with control. Don't use momentum — the weight should be light enough that you can feel the rear shoulder working throughout.</li>
</ol>
<div class="note"><strong>Why this matters:</strong> Monday's lateral raise hits the side of the shoulder. This hits the rear delt — the back of the shoulder — which is chronically underdeveloped in most people and directly relevant to posture and shoulder health.</div>
</div>
</div>
<!-- Dumbbell Curl -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">03</span>
<span class="card-name">Dumbbell Curl <em style="font-size:11px;color:var(--muted);font-style:normal;">↩ superset</em></span>
</div>
<div class="card-meta">
<span class="tag tag-lift">3 × 10</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<div class="prescription">3 sets × 10 reps — done immediately after Reverse Fly</div>
<ol class="steps">
<li>Stand upright, a dumbbell in each hand, palms facing forward, arms hanging at your sides.</li>
<li>Curl both dumbbells upward by bending at the elbow — keep your upper arms stationary and pinned to your sides throughout.</li>
<li>Squeeze your bicep at the top of the movement — the dumbbell should be close to your shoulder.</li>
<li>Lower slowly back to full extension. Resist the weight on the way down — don't drop it.</li>
</ol>
<div class="note"><strong>Upper arms stationary</strong> is the key cue. If your elbows swing forward as you curl, you're using momentum rather than the bicep. Reduce weight if this happens.</div>
</div>
</div>
```
</div>
<div class="section">
<div class="section-label stretch">Stretching — ~10 min</div>
<div class="note" style="margin-bottom:16px; border-color: var(--stretch)"><strong>Protocol:</strong> 60 seconds each hold, 2 rounds. Targets chest, biceps, and forearms — what this session loads. Neck stretch 30 sec only.</div>
```
<!-- Doorway chest stretch -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">S1</span>
<span class="card-name">Doorway Chest Stretch</span>
</div>
<div class="card-meta">
<span class="tag tag-stretch">60s × 2 each side</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<ol class="steps">
<li>Stand in a doorway or at the end of a cable machine. Place one forearm vertically against the frame, elbow at shoulder height.</li>
<li>Step forward with the same-side foot until you feel a stretch across the front of your chest and shoulder.</li>
<li>Keep your torso upright — don't lean forward. The stretch should be across the chest, not the shoulder joint itself.</li>
<li>Hold 60 sec, switch sides. Repeat for a second round.</li>
</ol>
<div class="note">Most effective stretch to do after bench pressing. Also worth doing on non-gym days — any doorframe works.</div>
</div>
</div>
<!-- Overhead tricep stretch -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">S2</span>
<span class="card-name">Overhead Tricep Stretch</span>
</div>
<div class="card-meta">
<span class="tag tag-stretch">60s × 2 each side</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<ol class="steps">
<li>Raise one arm straight overhead, then bend the elbow so your hand drops behind your head.</li>
<li>Use your opposite hand to gently press the elbow further back and down — light pressure only.</li>
<li>You should feel the stretch along the back of the upper arm. Keep your head neutral — don't let it push forward.</li>
<li>Hold 60 sec, switch sides. Repeat for a second round.</li>
</ol>
<div class="note">Triceps cross both the elbow and the shoulder joint, so this stretch is longer than it looks. Relevant after Monday's tricep pushdown work carries over to Wednesday.</div>
</div>
</div>
<!-- Bicep and forearm stretch -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">S3</span>
<span class="card-name">Standing Bicep + Forearm Stretch</span>
</div>
<div class="card-meta">
<span class="tag tag-stretch">60s × 2 each side</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<ol class="steps">
<li>Extend one arm straight out to the side at shoulder height, palm facing up.</li>
<li>Use your opposite hand to gently press the fingers of the extended hand downward — bending the wrist back. You'll feel this in the bicep and forearm simultaneously.</li>
<li>Keep the arm straight and at shoulder height throughout. Don't let the elbow bend.</li>
<li>Hold 60 sec, switch sides. Repeat for a second round.</li>
</ol>
<div class="note">Targets the bicep and the forearm flexors together — both loaded during curls. Also useful if you spend time typing or on your phone.</div>
</div>
</div>
<!-- Chest opener -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">S4</span>
<span class="card-name">Chest Opener — Hands Clasped Behind Back</span>
</div>
<div class="card-meta">
<span class="tag tag-stretch">60s × 2</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<ol class="steps">
<li>Stand tall, clasp your hands behind your lower back.</li>
<li>Squeeze your shoulder blades together and lift your chest upward.</li>
<li>Optional: gently fold forward at the hips while keeping hands clasped — deepens the stretch across the chest and front of shoulders.</li>
<li>Hold 60 sec. Repeat for a second round.</li>
</ol>
<div class="note">Good closing stretch for any upper body session — resets the shoulders into a more open position after pressing work.</div>
</div>
</div>
```
</div>
</div>
<!-- THURSDAY -->
<div class="day-panel" id="thu">
<div class="day-header">
<h2>Lower Body + Core</h2>
<div class="subtitle">Hip Flexors · Posterior Chain + Hip Flexor Release</div>
</div>
<div class="section">
<div class="section-label lift">Lifting — ~20 min</div>
<div class="note" style="margin-bottom:16px; border-color: var(--lift)"><strong>Tempo:</strong> Lift in 1–2 sec. Lower in 2–3 sec — resist the weight, don't drop it. 1 sec pause at peak contraction. ~4–5 sec per rep total.</div>
```
<!-- RDL -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">01</span>
<span class="card-name">Romanian Deadlift</span>
</div>
<div class="card-meta">
<span class="tag tag-lift">3 × 10</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<div class="prescription">3 sets × 10 reps — rest 60–90 sec between sets</div>
<ol class="steps">
<li>Stand holding dumbbells in front of your thighs, feet hip-width apart, slight bend in knees.</li>
<li>Hinge at the hips — push them back as if closing a car door with your backside. The weights slide down your legs.</li>
<li>Keep the weights close to your legs throughout. Your back stays flat — no rounding.</li>
<li>Lower until you feel a strong stretch in your hamstrings — typically mid-shin level, though this varies by flexibility.</li>
<li>Drive your hips forward to return to standing. Squeeze glutes at the top.</li>
</ol>
<div class="note"><strong>Key distinction from a regular deadlift:</strong> the weight doesn't touch the floor. The movement is entirely controlled by your hamstrings and glutes. If you feel it in your lower back, reduce the range of motion.</div>
</div>
</div>
<!-- Goblet squat Thu -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">02</span>
<span class="card-name">Goblet Squat</span>
</div>
<div class="card-meta">
<span class="tag tag-lift">2 × 8</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<div class="prescription">2 sets × 8 reps — rest 60 sec between sets</div>
<ol class="steps">
<li>Hold a single dumbbell vertically at chest height — both hands cupping the top end.</li>
<li>Feet shoulder-width apart, toes turned slightly out.</li>
<li>Sit back and down, chest up, dumbbell close to your body. Lower to comfortable depth.</li>
<li>Drive through heels to stand. Don't let knees cave inward on the way up.</li>
</ol>
<div class="note">Same exercise as Wednesday. Two sessions per week on this movement will build the quad and glute strength that underpins most other lower body work.</div>
</div>
</div>
<!-- Glute Bridge -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">03</span>
<span class="card-name">Glute Bridge</span>
</div>
<div class="card-meta">
<span class="tag tag-lift">2 × 12</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<div class="prescription">2 sets × 12 reps — rest 45 sec between sets</div>
<ol class="steps">
<li>Lie on your back, knees bent, feet flat on the floor hip-width apart.</li>
<li>Press through your heels and raise your hips until your body forms a straight line from knees to shoulders.</li>
<li>Squeeze your glutes firmly at the top — hold for 1 second.</li>
<li>Lower with control. Don't let your hips crash to the floor between reps.</li>
</ol>
<div class="note">Directly relevant to hip flexor tightness: strengthening the glutes and posterior chain counters the imbalance caused by prolonged sitting. This is one of the more functional exercises in this program.</div>
</div>
</div>
```
</div>
<div class="section">
<div class="section-label stretch">Stretching — ~10 min</div>
<div class="note" style="margin-bottom:16px; border-color: var(--stretch)"><strong>Protocol:</strong> 60 seconds each hold, 2 rounds. Hip flexors are primary focus — they are likely the main driver of your leg tightness after long days.</div>
```
<!-- Kneeling lunge -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">S1</span>
<span class="card-name">Kneeling Lunge Hip Flexor Stretch</span>
</div>
<div class="card-meta">
<span class="tag tag-stretch">60s × 2 each side</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<ol class="steps">
<li>Start in a lunge: one knee on the floor (use a folded towel or mat), front foot flat on the floor, front knee at roughly 90 degrees.</li>
<li>Keeping your torso upright, shift your weight forward slowly until you feel a stretch in the front of the back hip.</li>
<li>Don't lean forward — the sensation should be in the hip, not the lower back.</li>
<li>Hold 60 sec, switch sides. Repeat for a second round.</li>
</ol>
<div class="note">This is the highest-priority stretch in this program given your reported tightness. It can also be done at home on any day without equipment — worth adding on non-gym days if tightness is noticeable.</div>
</div>
</div>
<!-- Standing quad -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">S2</span>
<span class="card-name">Standing Quad Pull</span>
</div>
<div class="card-meta">
<span class="tag tag-stretch">60s × 2 each side</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<ol class="steps">
<li>Stand on one leg. Bend the other knee and bring the heel toward your glute.</li>
<li>Hold your ankle with your hand — grip the ankle, not the foot.</li>
<li>Keep your knees together and stand tall. Don't lean forward or arch your back.</li>
<li>Hold 60 sec, switch sides. Repeat for a second round. Use a wall for balance if needed.</li>
</ol>
</div>
</div>
<!-- Seated spinal twist -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">S3</span>
<span class="card-name">Seated Spinal Twist</span>
</div>
<div class="card-meta">
<span class="tag tag-stretch">60s × 2 each side</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<ol class="steps">
<li>Sit on the floor with both legs extended in front of you.</li>
<li>Bend one knee, cross that foot over the opposite leg, and place it flat on the floor beside the knee.</li>
<li>Place your opposite elbow on the outside of the bent knee.</li>
<li>Sit tall and rotate your torso in that direction, looking over your shoulder. The elbow on the knee acts as a lever — use it gently.</li>
<li>Hold 60 sec, switch sides. Repeat for a second round.</li>
</ol>
<div class="note">Works the thoracic spine and outer hip simultaneously. Particularly useful after deadlifts, which load the lumbar spine under compression.</div>
</div>
</div>
<!-- Knees to chest rock -->
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left">
<span class="card-num">S4</span>
<span class="card-name">Lying Knees-to-Chest Rock</span>
</div>
<div class="card-meta">
<span class="tag tag-stretch">60s × 2</span>
<span class="chevron">▼</span>
</div>
</div>
<div class="card-body">
<ol class="steps">
<li>Lie flat on your back. Draw both knees toward your chest, holding behind your knees or your shins.</li>
<li>Slowly rock side to side — gentle, rhythmic motion. Let gravity do the work.</li>
<li>This should feel like a release, not a stretch. If anything feels sharp, stop.</li>
<li>60 sec. Repeat for a second round. Good final exercise for the week — passive and low-effort.</li>
</ol>
<div class="note">End-of-week decompression for the lumbar spine. No technique requirements — just relax into it.</div>
</div>
</div>
```
</div>
</div>
<!-- DAILY -->
<div class="day-panel" id="daily">
<div class="day-header">
<h2>Daily Stretches</h2>
<div class="subtitle">Morning · Evening — ~10 min — targets leg tightness</div>
</div>
<div class="section">
<div class="section-label stretch">Morning — on waking</div>
<div class="note" style="margin-bottom:16px; border-color: var(--stretch)"><strong>Protocol:</strong> Do these before getting up or immediately after. 60 seconds each, one round. Goal is to mobilize, not fully stretch — the body is cold. Gentle is correct here.</div>
```
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left"><span class="card-num">M1</span><span class="card-name">Lying Knees-to-Chest Rock</span></div>
<div class="card-meta"><span class="tag tag-stretch">60s</span><span class="chevron">▼</span></div>
</div>
<div class="card-body">
<ol class="steps">
<li>Still lying in bed or on the floor. Draw both knees toward your chest, holding behind your knees or shins.</li>
<li>Rock gently side to side — slow, rhythmic. Let the lower back release.</li>
<li>This is a mobilization, not a stretch. Don't force anything. Just move.</li>
</ol>
<div class="note">First movement of the day. Decompresses the lumbar spine after a night of stillness — directly relevant to morning leg tightness, which often originates in the lower back and hip flexors rather than the legs themselves.</div>
</div>
</div>
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left"><span class="card-num">M2</span><span class="card-name">Supine Figure-Four</span></div>
<div class="card-meta"><span class="tag tag-stretch">60s each side</span><span class="chevron">▼</span></div>
</div>
<div class="card-body">
<ol class="steps">
<li>Lie on your back, knees bent, feet flat.</li>
<li>Cross one ankle over the opposite knee. Let the crossed knee fall open — gravity only, no forcing.</li>
<li>For more depth: draw the uncrossed thigh gently toward your chest. Stop where you feel resistance.</li>
<li>60 sec each side.</li>
</ol>
<div class="note">Hip external rotators and piriformis are commonly tight after sleep. This is the gentlest way to begin releasing them before standing.</div>
</div>
</div>
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left"><span class="card-num">M3</span><span class="card-name">Standing Doorframe Hip Flexor Stretch</span></div>
<div class="card-meta"><span class="tag tag-stretch">45s each side</span><span class="chevron">▼</span></div>
</div>
<div class="card-body">
<ol class="steps">
<li>Stand in a doorway or next to a wall. Step one foot forward into a short lunge stance — both feet flat on the floor, no kneeling.</li>
<li>Tuck your pelvis slightly (think: flatten your lower back) and shift weight gently forward until you feel the front of the back hip engage.</li>
<li>Hold the doorframe for balance. Keep torso upright.</li>
<li>45 sec each side — slightly shorter than gym version since the body is still warming up.</li>
</ol>
<div class="note">Standing version of the gym kneeling lunge stretch — no mat or floor required. Fits naturally into a doorway en route to the bathroom or kitchen.</div>
</div>
</div>
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left"><span class="card-num">M4</span><span class="card-name">Standing Calf + Hamstring Stretch</span></div>
<div class="card-meta"><span class="tag tag-stretch">45s each side</span><span class="chevron">▼</span></div>
</div>
<div class="card-body">
<ol class="steps">
<li>Stand facing a wall. Place both hands on the wall at chest height.</li>
<li>Step one foot back — heel flat on the floor, leg straight. Lean gently toward the wall until you feel a stretch in the calf of the back leg.</li>
<li>For the hamstring: bend the front knee slightly more and hinge your hips back — the stretch shifts from calf to the back of the thigh.</li>
<li>45 sec each side. Two targets in one position.</li>
</ol>
<div class="note">Calves are commonly overlooked as a source of leg tightness — they connect into the Achilles and plantar fascia and contribute to whole-leg tension. Worth addressing in the morning when tightness is most pronounced.</div>
</div>
</div>
```
</div>
<div class="section">
<div class="section-label stretch">Evening — before bed</div>
<div class="note" style="margin-bottom:16px; border-color: var(--stretch)"><strong>Protocol:</strong> 60–90 seconds each, one round. Body is warmer at end of day — this is when the most tissue change can happen. Move into the stretch slowly and hold.</div>
```
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left"><span class="card-num">E1</span><span class="card-name">Kneeling Hip Flexor Stretch</span></div>
<div class="card-meta"><span class="tag tag-stretch">90s each side</span><span class="chevron">▼</span></div>
</div>
<div class="card-body">
<ol class="steps">
<li>One knee on the floor (use a folded towel), front foot flat, front knee at 90 degrees.</li>
<li>Keeping torso upright, shift weight forward slowly until you feel the stretch in the front of the back hip.</li>
<li>90 seconds each side. Evening is when this stretch is most productive — the hip flexors have been loaded all day and are at peak tightness.</li>
</ol>
<div class="note">The single highest-priority stretch in this program for your reported symptoms. 90 seconds is the target here — research supports longer holds for hip flexor tissue specifically.</div>
</div>
</div>
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left"><span class="card-num">E2</span><span class="card-name">Seated Toe Touch</span></div>
<div class="card-meta"><span class="tag tag-stretch">90s</span><span class="chevron">▼</span></div>
</div>
<div class="card-body">
<ol class="steps">
<li>Sit on the floor, both legs extended in front of you.</li>
<li>Hinge forward from the hips and reach toward your feet. Hold wherever the stretch is felt.</li>
<li>At end of day the hamstrings will be tighter than in the morning — don't force the range. Let gravity do the work over the full 90 seconds.</li>
</ol>
<div class="note">Evening version of the gym stretch. The longer hold here is deliberate — this is when tissue is most responsive to lengthening work.</div>
</div>
</div>
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left"><span class="card-num">E3</span><span class="card-name">Seated Spinal Twist</span></div>
<div class="card-meta"><span class="tag tag-stretch">60s each side</span><span class="chevron">▼</span></div>
</div>
<div class="card-body">
<ol class="steps">
<li>Sit on the floor, both legs extended. Bend one knee, cross that foot to the outside of the opposite knee, place it flat on the floor.</li>
<li>Place your opposite elbow on the outside of the bent knee and rotate your torso, looking over your shoulder.</li>
<li>Sit tall throughout — don't slump. 60 sec each side.</li>
</ol>
<div class="note">Releases thoracic and lumbar rotation — useful after a day of sitting. Also decompresses the spine before lying down to sleep.</div>
</div>
</div>
<div class="exercise-card" onclick="toggleCard(this)">
<div class="card-header">
<div class="card-header-left"><span class="card-num">E4</span><span class="card-name">Lying Knees-to-Chest Rock</span></div>
<div class="card-meta"><span class="tag tag-stretch">90s</span><span class="chevron">▼</span></div>
</div>
<div class="card-body">
<ol class="steps">
<li>Lie on your back. Draw both knees toward your chest, holding behind your knees or shins.</li>
<li>Rock gently side to side — slow and rhythmic. Let everything release.</li>
<li>No technique requirements. Just relax into it for the full 90 seconds.</li>
</ol>
<div class="note">Good final movement before sleep. Mirrors the morning opener — bookending the day with lumbar decompression addresses the tightness cycle at both ends.</div>
</div>
</div>
```
</div>
</div>
<script>
function showDay(day, el) {
document.querySelectorAll('.day-panel').forEach(p => p.classList.remove('active'));
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.getElementById(day).classList.add('active');
el.classList.add('active');
}
function toggleCard(card) {
card.classList.toggle('open');
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment