Skip to content

Instantly share code, notes, and snippets.

@adrianlzt

adrianlzt/index.html

Created July 11, 2025 08:33
Show Gist options
  • Save adrianlzt/772d4548cdf5aea6baff2e6c9fe2009e to your computer and use it in GitHub Desktop.
Save adrianlzt/772d4548cdf5aea6baff2e6c9fe2009e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. adrianlzt created this gist Jul 11, 2025.
    61 changes: 61 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,61 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shoulder Mobility Assessment Calculator</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    </head>
    <body>
    <div class="container">
    <h1>Shoulder Mobility Assessment</h1>
    <p class="intro">Enter your measured angles from the assessment tests below to receive a personalized analysis of your shoulder's limiting factors. All angles should be in degrees (°).</p>

    <form id="assessmentForm">
    <!-- Section 1: Overall Assessment -->
    <h2>Section 1: Overall Flexibility & Strength</h2>
    <div class="input-group">
    <label for="passiveAngle">Passive Shoulder Flexion Angle (Lying Down)</label>
    <input type="number" id="passiveAngle" placeholder="e.g., 180" required>
    </div>
    <div class="input-group">
    <label for="activeAngle">Active Shoulder Flexion Angle (Kneeling)</label>
    <input type="number" id="activeAngle" placeholder="e.g., 165" required>
    </div>

    <!-- Section 2: Isolation Tests -->
    <h2>Section 2: Isolating Specific Muscles</h2>
    <div class="input-group">
    <label for="latStanding">Lat Length Test (Standing, Back to Wall)</label>
    <input type="number" id="latStanding" placeholder="e.g., 175" required>
    </div>
    <div class="input-group">
    <label for="latSeated">Lat Length Test (Seated, Rounded Back)</label>
    <input type="number" id="latSeated" placeholder="e.g., 150" required>
    </div>
    <div class="input-group">
    <label for="pecMajorAngle">Pec Major Length Test (Angle past shoulders)</label>
    <input type="number" id="pecMajorAngle" placeholder="e.g., 35" required>
    </div>
    <div class="input-group">
    <label for="externalRotationAngle">External Rotation Test (Angle past vertical)</label>
    <input type="number" id="externalRotationAngle" placeholder="e.g., 40" required>
    </div>

    <button type="submit">Analyze My Results</button>
    </form>

    <div id="reportOutput">
    <!-- Diagnosis will be injected here by JavaScript -->
    </div>

    <footer>
    <p><strong>Disclaimer:</strong> This tool is for informational purposes only and is not a substitute for professional medical advice, diagnosis, or treatment. Consult with a qualified healthcare professional before beginning any new fitness program.</p>
    </footer>
    </div>
    <script src="script.js"></script>
    </body>
    </html>
    80 changes: 80 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,80 @@
    document.getElementById('assessmentForm').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent the form from reloading the page

    // Get values from the form and convert to numbers
    const passiveAngle = parseFloat(document.getElementById('passiveAngle').value);
    const activeAngle = parseFloat(document.getElementById('activeAngle').value);
    const latStanding = parseFloat(document.getElementById('latStanding').value);
    const latSeated = parseFloat(document.getElementById('latSeated').value);
    const pecMajorAngle = parseFloat(document.getElementById('pecMajorAngle').value);
    const externalRotationAngle = parseFloat(document.getElementById('externalRotationAngle').value);

    let reportHTML = '<h3>Your Personalized Diagnosis</h3>';
    let limitingFactors = [];

    // --- Analysis Logic ---

    // 1. Active vs. Passive (Strength vs. Flexibility)
    const flexionDifference = passiveAngle - activeAngle;
    let flexionReport = `<div class="report-section"><h4>Strength vs. Flexibility</h4>`;
    if (flexionDifference > 15) {
    flexionReport += `<p>Your passive range (${passiveAngle}°) is significantly greater than your active range (${activeAngle}°). This points to a <span class="limitation-positive">Motor Control or Strength Deficit</span>. You have the flexibility but lack the strength to use it.</p>`;
    limitingFactors.push('Motor Control/Strength');
    } else {
    flexionReport += `<p>Your active and passive ranges are similar. Any limitation is likely due to tissue tightness. <span class="limitation-negative">This is a good result.</span></p>`;
    }
    flexionReport += `</div>`;
    reportHTML += flexionReport;


    // 2. Lat Length Test
    const latDifference = latStanding - latSeated;
    let latReport = `<div class="report-section"><h4>Latissimus Dorsi (Lats)</h4>`;
    if (latDifference > 15) {
    latReport += `<p>Your range of motion dropped significantly from ${latStanding}° (standing) to ${latSeated}° (seated/rounded). This strongly indicates that <span class="limitation-positive">Tight Lats</span> are a primary limiting factor.</p>`;
    limitingFactors.push('Tight Lats');
    } else {
    latReport += `<p>Your range of motion was stable between the two positions. Your lats are likely not a significant restriction. <span class="limitation-negative">This is a good result.</span></p>`;
    }
    latReport += `</div>`;
    reportHTML += latReport;

    // 3. Pec Major Length Test
    let pecReport = `<div class="report-section"><h4>Pectoralis Major (Pecs)</h4>`;
    if (pecMajorAngle < 45) {
    pecReport += `<p>Your arms only reached ${pecMajorAngle}° past your shoulders (goal is 45°). This indicates <span class="limitation-positive">Tight Pec Major</span> muscles, which can pull the shoulders forward.</p>`;
    limitingFactors.push('Tight Pec Major');
    } else {
    pecReport += `<p>You achieved ${pecMajorAngle}° of extension, meeting the goal of 45°. Your pec major length is excellent. <span class="limitation-negative">This is a great result.</span></p>`;
    }
    pecReport += `</div>`;
    reportHTML += pecReport;

    // 4. External Rotation Test
    let externalRotationReport = `<div class="report-section"><h4>Internal Rotators (Subscapularis & Teres Major)</h4>`;
    if (externalRotationAngle < 45) {
    externalRotationReport += `<p>Your external rotation was ${externalRotationAngle}° past vertical (goal is 45°). This indicates <span class="limitation-positive">Tight Internal Rotators</span>, a very common issue that restricts overhead mobility.</p>`;
    limitingFactors.push('Tight Internal Rotators');
    } else {
    externalRotationReport += `<p>You achieved ${externalRotationAngle}° of external rotation, meeting the goal of 45°. Your internal rotator length is excellent. <span class="limitation-negative">This is a great result.</span></p>`;
    }
    externalRotationReport += `</div>`;
    reportHTML += externalRotationReport;

    // --- Final Summary ---
    let summaryReport = `<div class="report-section"><h3>Summary & Recommendations</h3>`;
    if (limitingFactors.length === 0) {
    summaryReport += `<p><span class="limitation-negative">Excellent work!</span> Based on your results, you have well-balanced shoulder mobility with no significant limitations detected. Focus on maintaining this balance with a well-rounded program.</p>`;
    } else {
    summaryReport += `<p>Your primary areas for improvement appear to be: <span class="limitation-positive">${limitingFactors.join(', ')}</span>.</p>`;
    summaryReport += `<p>To improve your shoulder health, prioritize stretches and mobility drills that target these specific muscles.</p>`;
    }
    summaryReport += `</div>`;
    reportHTML += summaryReport;


    // Display the final report on the page
    const reportOutput = document.getElementById('reportOutput');
    reportOutput.innerHTML = reportHTML;
    reportOutput.scrollIntoView({ behavior: 'smooth' }); // Automatically scroll to the results
    });
    115 changes: 115 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,115 @@
    body {
    font-family: 'Roboto', sans-serif;
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    }

    .container {
    max-width: 700px;
    margin: 0 auto;
    background: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    h1 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 10px;
    }

    h2 {
    color: #34495e;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
    margin-top: 30px;
    }

    .intro {
    text-align: center;
    color: #555;
    margin-bottom: 30px;
    }

    .input-group {
    margin-bottom: 20px;
    }

    label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #444;
    }

    input[type="number"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Important for padding and width */
    font-size: 16px;
    }

    button {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 20px;
    }

    button:hover {
    background-color: #2980b9;
    }

    #reportOutput {
    margin-top: 30px;
    padding: 20px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    }

    #reportOutput h3 {
    margin-top: 0;
    color: #2c3e50;
    }

    .report-section {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ccc;
    }
    .report-section:last-child {
    border-bottom: none;
    }

    .limitation-positive {
    color: #c0392b; /* Red for identified limitations */
    font-weight: 700;
    }

    .limitation-negative {
    color: #27ae60; /* Green for good results */
    font-weight: 700;
    }


    footer {
    margin-top: 30px;
    text-align: center;
    font-size: 12px;
    color: #777;
    }