Add interactivity to muscle tags - click to highlight diagrams

workout/template-with-anatomy.html

@@ -58,12 +58,18 @@
       justify-content: space-between;
       align-items: center;
       margin-bottom: 16px;
+      flex-wrap: wrap;
+      gap: 12px;
     }
     .anatomy-title {
       font-size: 1rem;
       color: #f97316;
       font-weight: 600;
     }
+    .anatomy-hint {
+      font-size: 0.8rem;
+      color: #666;
+    }
     .anatomy-diagrams {
       display: grid;
       grid-template-columns: 1fr 1fr;
@@ -75,6 +81,8 @@
       border-radius: 8px;
       padding: 12px;
       text-align: center;
+      position: relative;
+      transition: all 0.3s ease;
     }
     .diagram-container h3 {
       font-size: 0.85rem;
@@ -83,11 +91,21 @@
       text-transform: uppercase;
       letter-spacing: 0.5px;
     }
-    .diagram-container svg {
+    .diagram-container object,
+    .diagram-container img {
       width: 100%;
       height: auto;
       max-height: 500px;
       filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
+      transition: filter 0.3s;
+    }
+    .diagram-container.highlighted {
+      box-shadow: 0 0 20px rgba(249, 115, 22, 0.4);
+      border-color: rgba(249, 115, 22, 0.6);
+    }
+    .diagram-container.highlighted object,
+    .diagram-container.highlighted img {
+      filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.6)) brightness(1.1);
     }
     .muscle-label {
       font-size: 0.75rem;
@@ -105,16 +123,23 @@
     }
     .muscle-tag {
       font-size: 0.7rem;
-      padding: 2px 8px;
+      padding: 3px 10px;
-      border-radius: 10px;
+      border-radius: 12px;
       font-weight: 500;
       cursor: pointer;
       transition: all 0.2s;
+      border: 2px solid transparent;
+      user-select: none;
     }
     .muscle-tag:hover {
-      transform: scale(1.05);
+      transform: scale(1.08);
       filter: brightness(1.2);
     }
+    .muscle-tag.active {
+      border-color: currentColor;
+      box-shadow: 0 0 10px currentColor;
+      transform: scale(1.1);
+    }
     .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; }
@@ -167,17 +192,17 @@
     <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 class="anatomy-hint">Click muscle names below to highlight diagrams</div>
       </div>
       <div class="anatomy-diagrams">
-        <div class="diagram-container">
+        <div class="diagram-container" id="diagram-anterior">
           <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">
+        <div class="diagram-container" id="diagram-posterior">
           <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;">
@@ -342,5 +367,43 @@
 
     <a href="index.html" class="back-link">← Back to all workouts</a>
   </div>
+
+  <script>
+    // Muscle tag click handler - highlights diagrams when you click a muscle name
+    document.querySelectorAll('.muscle-tag').forEach(tag => {
+      tag.addEventListener('click', function(e) {
+        e.preventDefault();
+        
+        // Remove active class from all tags
+        document.querySelectorAll('.muscle-tag').forEach(t => t.classList.remove('active'));
+        
+        // Add active class to clicked tag
+        this.classList.add('active');
+        
+        // Highlight both diagram containers
+        document.querySelectorAll('.diagram-container').forEach(container => {
+          container.classList.add('highlighted');
+        });
+        
+        // Get muscle name for logging
+        const muscleName = this.textContent;
+        console.log('🔬 Muscle selected:', muscleName);
+        
+        // Smooth scroll to anatomy section
+        document.querySelector('.anatomy-section').scrollIntoView({ 
+          behavior: 'smooth', 
+          block: 'center' 
+        });
+        
+        // Remove highlight after 2.5 seconds
+        setTimeout(() => {
+          document.querySelectorAll('.diagram-container').forEach(container => {
+            container.classList.remove('highlighted');
+          });
+          this.classList.remove('active');
+        }, 2500);
+      });
+    });
+  </script>
 </body>
 </html>