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

Use actual labeled Gray's Anatomy diagrams (PNG) with all muscle names visible

Browse Source
This commit is contained in:
Ash
2026-04-20 18:45:04 +00:00
parent 6ca6d870a3
commit eb39ff9ea9
3 changed files with 19 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workout/muscles-anterior-labeled.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 856 KiB

workout/muscles-posterior-labeled.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 698 KiB

workout/template-with-anatomy.html
+19 -22
View File
@@ -4,7 +4,7 @@
<base href="/ash/"> <base href="/ash/">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Workout Card Template with Anatomy — Ash Pages</title> <title>Workout Card with Labeled Anatomy — Ash Pages</title>
<style> <style>
* { box-sizing: border-box; margin: 0; padding: 0; } * { box-sizing: border-box; margin: 0; padding: 0; }
body { body {
@@ -83,6 +83,7 @@
text-align: center; text-align: center;
position: relative; position: relative;
transition: all 0.3s ease; transition: all 0.3s ease;
border: 2px solid transparent;
} }
.diagram-container h3 { .diagram-container h3 {
font-size: 0.85rem; font-size: 0.85rem;
@@ -91,21 +92,21 @@
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
.diagram-container object,
.diagram-container img { .diagram-container img {
width: 100%; width: 100%;
height: auto; height: auto;
max-height: 500px; max-height: 550px;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
transition: filter 0.3s; transition: filter 0.3s, transform 0.3s;
border-radius: 4px;
} }
.diagram-container.highlighted { .diagram-container.highlighted {
box-shadow: 0 0 20px rgba(249, 115, 22, 0.4); box-shadow: 0 0 25px rgba(249, 115, 22, 0.5);
border-color: rgba(249, 115, 22, 0.6); border-color: rgba(249, 115, 22, 0.8);
transform: scale(1.02);
} }
.diagram-container.highlighted object,
.diagram-container.highlighted img { .diagram-container.highlighted img {
filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.6)) brightness(1.1); filter: drop-shadow(0 0 15px rgba(249, 115, 22, 0.7)) brightness(1.15) contrast(1.1);
} }
.muscle-label { .muscle-label {
font-size: 0.75rem; font-size: 0.75rem;
@@ -137,7 +138,7 @@
} }
.muscle-tag.active { .muscle-tag.active {
border-color: currentColor; border-color: currentColor;
box-shadow: 0 0 10px currentColor; box-shadow: 0 0 12px currentColor;
transform: scale(1.1); transform: scale(1.1);
} }
.muscle-tag.deltoid { background: rgba(100, 181, 246, 0.25); color: #64b5f6; } .muscle-tag.deltoid { background: rgba(100, 181, 246, 0.25); color: #64b5f6; }
@@ -184,30 +185,26 @@
<body> <body>
<div class="container"> <div class="container">
<p class="breadcrumb"><a href="../">Ash Pages</a> / <a href="workout/">Workouts</a> /</p> <p class="breadcrumb"><a href="../">Ash Pages</a> / <a href="workout/">Workouts</a> /</p>
<h1>💪 Day A — Template with Anatomy</h1> <h1>💪 Day A — with Labeled Anatomy</h1>
<div class="date-header">[Date]</div> <div class="date-header">[Date]</div>
<div class="day-badge">Day A — Upper/Lower Focus</div> <div class="day-badge">Day A — Upper/Lower Focus</div>
<!-- Anatomy Reference Section --> <!-- Anatomy Reference Section -->
<div class="section anatomy-section"> <div class="section anatomy-section">
<div class="anatomy-header"> <div class="anatomy-header">
<div class="anatomy-title">📚 Muscle Anatomy Reference</div> <div class="anatomy-title">📚 Muscle Anatomy Reference (Gray's Anatomy)</div>
<div class="anatomy-hint">Click muscle names below to highlight diagrams</div> <div class="anatomy-hint">Click muscle names below to locate on diagrams</div>
</div> </div>
<div class="anatomy-diagrams"> <div class="anatomy-diagrams">
<div class="diagram-container" id="diagram-anterior"> <div class="diagram-container" id="diagram-anterior">
<h3>Anterior (Front)</h3> <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.png" alt="Labeled anterior muscle diagram from Gray's Anatomy">
<img src="workout/muscles-anterior-labeled.svg" alt="Anterior muscle diagram" style="width:100%; max-height:500px;"> <div class="muscle-label">Source: Gray's Anatomy (1918), public domain. Labels: Deltoid, Pectoralis major, Biceps brachii, Rectus abdominis, Quadriceps, etc.</div>
</object>
<div class="muscle-label">Major muscles: Deltoid, Pectoralis major, Biceps brachii, Rectus abdominis, Quadriceps</div>
</div> </div>
<div class="diagram-container" id="diagram-posterior"> <div class="diagram-container" id="diagram-posterior">
<h3>Posterior (Back)</h3> <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.png" alt="Labeled posterior muscle diagram from Gray's Anatomy">
<img src="workout/muscles-posterior-labeled.svg" alt="Posterior muscle diagram" style="width:100%; max-height:500px;"> <div class="muscle-label">Source: Gray's Anatomy (1918), public domain. Labels: Trapezius, Latissimus dorsi, Triceps, Erector spinae, Hamstrings, Gastrocnemius, etc.</div>
</object>
<div class="muscle-label">Major muscles: Trapezius, Latissimus dorsi, Triceps, Erector spinae, Hamstrings, Gastrocnemius</div>
</div> </div>
</div> </div>
</div> </div>
@@ -395,13 +392,13 @@
block: 'center' block: 'center'
}); });
// Remove highlight after 2.5 seconds // Remove highlight after 3 seconds (longer to actually find the label)
setTimeout(() => { setTimeout(() => {
document.querySelectorAll('.diagram-container').forEach(container => { document.querySelectorAll('.diagram-container').forEach(container => {
container.classList.remove('highlighted'); container.classList.remove('highlighted');
}); });
this.classList.remove('active'); this.classList.remove('active');
}, 2500); }, 3000);
}); });
}); });
</script> </script>