ash-bot/ash-pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add labeled anatomical muscle diagrams (Wikimedia Commons, public domain) and updated template with real anatomy reference

Browse Source
This commit is contained in:
Ash
2026-04-20 18:31:23 +00:00
parent fe9bfb3920
commit 41b45de67a
3 changed files with 2154 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workout/muscles-anterior-labeled.svg
+1122
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 3.7 MiB

workout/muscles-posterior-labeled.svg
+686
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 3.2 MiB

workout/template-with-anatomy.html
+346
View File
@@ -0,0 +1,346 @@
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/ash/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Workout Card Template with Anatomy — Ash Pages</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #0f0f0f;
color: #e0e0e0;
min-height: 100vh;
display: flex;
justify-content: center;
padding: 40px 20px;
}
.container { max-width: 1200px; width: 100%; }
h1 { font-size: 1.8rem; margin-bottom: 4px; color: #f97316; }
.breadcrumb { color: #666; margin-bottom: 24px; font-size: 0.85rem; }
.breadcrumb a { color: #888; text-decoration: none; }
.breadcrumb a:hover { color: #f97316; }
.date-header { color: #888; font-size: 0.9rem; margin-bottom: 16px; }
.day-badge { display: inline-block; background: rgba(249, 115, 22, 0.2); color: #f97316; padding: 4px 12px; border-radius: 16px; font-size: 0.85rem; font-weight: 500; margin-bottom: 24px; }
.section { margin-bottom: 32px; }
h2 { font-size: 1.2rem; color: #f97316; margin-bottom: 16px; }
.table {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
overflow: hidden;
margin-bottom: 16px;
}
.table table { width: 100%; border-collapse: collapse; }
.table th { background: rgba(255,255,255,0.08); padding: 12px 16px; text-align: left; font-weight: 500; font-size: 0.85rem; color: #888; }
.table td { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.95rem; }
.exercise-name { font-weight: 500; }
.reps { color: #666; font-size: 0.9rem; }
.weight { color: #666; font-size: 0.9rem; }
.video-link { color: #4a9eff; text-decoration: none; font-size: 0.85rem; }
.video-link:hover { color: #6bb3ff; }
.form-note { color: #666; font-size: 0.85rem; font-style: italic; }
.note { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 16px; margin-top: 16px; color: #888; font-size: 0.85rem; }
.back-link { display: inline-block; color: #f97316; text-decoration: none; font-size: 0.85rem; margin-top: 32px; }
.back-link:hover { color: #ff8c42; }
/* Anatomy Diagram Section */
.anatomy-section {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 20px;
margin-bottom: 24px;
}
.anatomy-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.anatomy-title {
font-size: 1rem;
color: #f97316;
font-weight: 600;
}
.anatomy-diagrams {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: start;
}
.diagram-container {
background: rgba(0,0,0,0.3);
border-radius: 8px;
padding: 12px;
text-align: center;
}
.diagram-container h3 {
font-size: 0.85rem;
color: #888;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.diagram-container svg {
width: 100%;
height: auto;
max-height: 500px;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
.muscle-label {
font-size: 0.75rem;
color: #aaa;
margin-top: 8px;
font-style: italic;
}
/* Exercise muscle tags */
.exercise-muscles {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 6px;
}
.muscle-tag {
font-size: 0.7rem;
padding: 2px 8px;
border-radius: 10px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.muscle-tag:hover {
transform: scale(1.05);
filter: brightness(1.2);
}
.muscle-tag.deltoid { background: rgba(100, 181, 246, 0.25); color: #64b5f6; }
.muscle-tag.pectoralis { background: rgba(229, 115, 115, 0.25); color: #e57373; }
.muscle-tag.trapezius { background: rgba(129, 199, 132, 0.25); color: #81c784; }
.muscle-tag.latissimus { background: rgba(129, 199, 132, 0.25); color: #81c784; }
.muscle-tag.triceps { background: rgba(255, 183, 77, 0.25); color: #ffb74d; }
.muscle-tag.biceps { background: rgba(255, 183, 77, 0.25); color: #ffb74d; }
.muscle-tag.rectus-abdominis { background: rgba(161, 136, 127, 0.25); color: #a1887f; }
.muscle-tag.obliques { background: rgba(161, 136, 127, 0.25); color: #a1887f; }
.muscle-tag.quadriceps { background: rgba(144, 164, 174, 0.25); color: #90a4ae; }
.muscle-tag.hamstrings { background: rgba(144, 164, 174, 0.25); color: #90a4ae; }
.muscle-tag.glutes { background: rgba(144, 164, 174, 0.25); color: #90a4ae; }
.muscle-tag.gastrocnemius { background: rgba(144, 164, 174, 0.25); color: #90a4ae; }
.muscle-tag.serratus { background: rgba(229, 115, 115, 0.25); color: #e57373; }
.muscle-tag.rhomboids { background: rgba(129, 199, 132, 0.25); color: #81c784; }
.muscle-tag.erector-spinae { background: rgba(161, 136, 127, 0.25); color: #a1887f; }
@media (max-width: 768px) {
.anatomy-diagrams {
grid-template-columns: 1fr;
}
}
@media (min-width: 1200px) {
body { padding: 60px 40px; }
.container { max-width: 1400px; }
h1 { font-size: 2.8rem; }
h2 { font-size: 1.8rem; }
.date-header { font-size: 1.2rem; margin-bottom: 20px; }
.day-badge { font-size: 1.1rem; padding: 6px 18px; margin-bottom: 32px; }
.table th { padding: 16px 24px; font-size: 1.1rem; }
.table td { padding: 16px 24px; font-size: 1.3rem; }
.exercise-name { font-size: 1.4rem; }
.reps { font-size: 1.2rem; }
.weight { font-size: 1.2rem; }
.video-link { font-size: 1.1rem; }
.form-note { font-size: 1.1rem; }
.note { padding: 20px 24px; font-size: 1.1rem; }
.section { margin-bottom: 48px; }
}
</style>
</head>
<body>
<div class="container">
<p class="breadcrumb"><a href="../">Ash Pages</a> / <a href="workout/">Workouts</a> /</p>
<h1>💪 Day A — Template with Anatomy</h1>
<div class="date-header">[Date]</div>
<div class="day-badge">Day A — Upper/Lower Focus</div>
<!-- Anatomy Reference Section -->
<div class="section anatomy-section">
<div class="anatomy-header">
<div class="anatomy-title">📚 Muscle Anatomy Reference</div>
<div style="font-size: 0.8rem; color: #666;">Click muscle names below to locate on diagram</div>
</div>
<div class="anatomy-diagrams">
<div class="diagram-container">
<h3>Anterior (Front)</h3>
<object data="workout/muscles-anterior-labeled.svg" type="image/svg+xml" style="width:100%; max-height:500px;">
<img src="workout/muscles-anterior-labeled.svg" alt="Anterior muscle diagram" style="width:100%; max-height:500px;">
</object>
<div class="muscle-label">Major muscles: Deltoid, Pectoralis major, Biceps brachii, Rectus abdominis, Quadriceps</div>
</div>
<div class="diagram-container">
<h3>Posterior (Back)</h3>
<object data="workout/muscles-posterior-labeled.svg" type="image/svg+xml" style="width:100%; max-height:500px;">
<img src="workout/muscles-posterior-labeled.svg" alt="Posterior muscle diagram" style="width:100%; max-height:500px;">
</object>
<div class="muscle-label">Major muscles: Trapezius, Latissimus dorsi, Triceps, Erector spinae, Hamstrings, Gastrocnemius</div>
</div>
</div>
</div>
<div class="section">
<h2>Warmup</h2>
<div class="note">5 min treadmill walk + arm circles + hip circles</div>
</div>
<div class="section">
<h2>Main Workout</h2>
<div class="table">
<table>
<thead><tr><th>#</th><th>Exercise</th><th>Reps</th><th>Weight</th><th>Target Muscles</th><th>Form Video</th></tr></thead>
<tbody>
<tr>
<td>1</td>
<td class="exercise-name">KB Swings (two-arm)</td>
<td class="reps">10</td>
<td class="weight">20 lb KB</td>
<td>
<div class="exercise-muscles">
<span class="muscle-tag glutes" data-muscle="glutes">Glutes</span>
<span class="muscle-tag hamstrings" data-muscle="hamstrings">Hamstrings</span>
<span class="muscle-tag erector-spinae" data-muscle="erector-spinae">Erector Spinae</span>
</div>
</td>
<td><a class="video-link" href="https://www.youtube.com/watch?v=bDCeXbMJVNs" target="_blank">Video</a></td>
</tr>
<tr>
<td>2</td>
<td class="exercise-name">Bench DB Press</td>
<td class="reps">15</td>
<td class="weight">10 lb pair</td>
<td>
<div class="exercise-muscles">
<span class="muscle-tag pectoralis" data-muscle="pectoralis">Pectoralis Major</span>
<span class="muscle-tag deltoid" data-muscle="deltoid">Anterior Deltoid</span>
<span class="muscle-tag triceps" data-muscle="triceps">Triceps</span>
</div>
</td>
<td><a class="video-link" href="https://www.youtube.com/watch?v=FSYrZjBikqs" target="_blank">Video</a></td>
</tr>
<tr>
<td>3</td>
<td class="exercise-name">Goblet Squats</td>
<td class="reps">15</td>
<td class="weight">20 lb KB</td>
<td>
<div class="exercise-muscles">
<span class="muscle-tag quadriceps" data-muscle="quadriceps">Quadriceps</span>
<span class="muscle-tag glutes" data-muscle="glutes">Glutes</span>
<span class="muscle-tag rectus-abdominis" data-muscle="rectus-abdominis">Rectus Abdominis</span>
</div>
</td>
<td><a class="video-link" href="https://www.youtube.com/watch?v=aNDUbH_Uv4g" target="_blank">Video</a></td>
</tr>
<tr>
<td>4</td>
<td class="exercise-name">Overhead DB Press</td>
<td class="reps">10</td>
<td class="weight">10 lb pair</td>
<td>
<div class="exercise-muscles">
<span class="muscle-tag deltoid" data-muscle="deltoid">Deltoids</span>
<span class="muscle-tag triceps" data-muscle="triceps">Triceps</span>
<span class="muscle-tag trapezius" data-muscle="trapezius">Upper Trapezius</span>
</div>
</td>
<td><a class="video-link" href="https://www.youtube.com/watch?v=M2rwvNhTOu0" target="_blank">Video</a></td>
</tr>
<tr>
<td>5</td>
<td class="exercise-name">One-arm Rows</td>
<td class="reps">10/side</td>
<td class="weight">12 lb</td>
<td>
<div class="exercise-muscles">
<span class="muscle-tag latissimus" data-muscle="latissimus">Latissimus Dorsi</span>
<span class="muscle-tag rhomboids" data-muscle="rhomboids">Rhomboids</span>
<span class="muscle-tag biceps" data-muscle="biceps">Biceps</span>
</div>
</td>
<td><a class="video-link" href="https://www.youtube.com/watch?v=KRN38chlkds" target="_blank">Video</a></td>
</tr>
<tr>
<td>6</td>
<td class="exercise-name">DB Lunges</td>
<td class="reps">6/leg</td>
<td class="weight">10 lb pair</td>
<td>
<div class="exercise-muscles">
<span class="muscle-tag quadriceps" data-muscle="quadriceps">Quadriceps</span>
<span class="muscle-tag glutes" data-muscle="glutes">Glutes</span>
<span class="muscle-tag hamstrings" data-muscle="hamstrings">Hamstrings</span>
</div>
</td>
<td class="form-note">bodyweight to start, add DBs week 2+</td>
</tr>
</tbody>
</table>
</div>
<div class="note"><strong>Structure:</strong> 3 rounds, 60-90s rest between rounds</div>
</div>
<div class="section">
<h2>Core Finisher</h2>
<div class="table">
<table>
<thead><tr><th>#</th><th>Exercise</th><th>Reps/Time</th><th>Weight</th><th>Target Muscles</th><th>Form Video</th></tr></thead>
<tbody>
<tr>
<td>1</td>
<td class="exercise-name">Dead Bugs</td>
<td class="reps">10/side</td>
<td class="weight">bodyweight</td>
<td>
<div class="exercise-muscles">
<span class="muscle-tag rectus-abdominis" data-muscle="rectus-abdominis">Rectus Abdominis</span>
<span class="muscle-tag obliques" data-muscle="obliques">Obliques</span>
</div>
</td>
<td><a class="video-link" href="https://www.youtube.com/watch?v=g_BYB0R-4Ws" target="_blank">Video</a></td>
</tr>
<tr>
<td>2</td>
<td class="exercise-name">Russian Twists</td>
<td class="reps">20 total</td>
<td class="weight">10 lb DB</td>
<td>
<div class="exercise-muscles">
<span class="muscle-tag obliques" data-muscle="obliques">Obliques</span>
<span class="muscle-tag rectus-abdominis" data-muscle="rectus-abdominis">Rectus Abdominis</span>
</div>
</td>
<td><a class="video-link" href="https://www.youtube.com/watch?v=8ZLc_7ckCqU" target="_blank">Video</a></td>
</tr>
<tr>
<td>3</td>
<td class="exercise-name">Plank</td>
<td class="reps">30-60s</td>
<td class="weight">bodyweight</td>
<td>
<div class="exercise-muscles">
<span class="muscle-tag rectus-abdominis" data-muscle="rectus-abdominis">Rectus Abdominis</span>
<span class="muscle-tag obliques" data-muscle="obliques">Obliques</span>
<span class="muscle-tag erector-spinae" data-muscle="erector-spinae">Erector Spinae</span>
</div>
</td>
<td><a class="video-link" href="https://www.youtube.com/watch?v=pSHjTRCQxIw" target="_blank">Video</a></td>
</tr>
</tbody>
</table>
</div>
<div class="note"><strong>Structure:</strong> 2-3 rounds, minimal rest</div>
</div>
<a href="index.html" class="back-link">← Back to all workouts</a>
</div>
</body>
</html>