adrianlzt · July 11, 2025 08:33
diff --git a/index.html b/index.html
 <!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>
diff --git a/script.js b/script.js
 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
 });
diff --git a/style.css b/style.css
 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;
 }
	<!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>
	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
	});
	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;
	}