Pilates Reformer Footbar Angle & Knee Joint Stress Tool

Overview

This single-file application is a web-based biomechanics calculator designed for Pilates practitioners and instructors. It helps users determine the optimal footbar setting for a Pilates reformer based on their height, leg length, and specific exercise goals, aimed at reducing knee joint shear stress.

Technical Specification

• Architecture: Single-file HTML5/CSS3/Vanilla JS.
• Storage: No localStorage or sessionStorage. All state held in memory.
• Compatibility: Fully responsive, optimized for mobile devices (used in studios) and desktops.
• Design Aesthetic: High-end SaaS light-mode. Crisp white backgrounds, subtle shadows (using box-shadow), and a color palette of professional blues (#0055FF) and neutral greys (#F8F9FA).

Key Features

1. User Profile Inputs:
   • Height (cm/in toggle).
   • Leg Length (inseam measurement).
   • Experience Level (Beginner/Intermediate/Advanced) to adjust the "risk threshold" of the calculations.
2. Reformer Configuration:
   • Input fields for total footbar positions (e.g., 1-5 or 1-8).
   • Distance of footbar from carriage at neutral setting.
3. Visualizer:
   • A dynamic diagram or indicator that visually displays the calculated knee angle in relation to the reformer carriage.
4. Dynamic Results:
   • Recommended setting (e.g., "Set to Position 3").
   • Stress Rating (Green/Yellow/Red indicator).
   • Safety Tip (e.g., "Decrease angle if you feel pressure in the patellar tendon").

UI/UX Layout

• Header: Simple, clean title with a small info-icon for disclaimer.
• Main Tool Area: A two-column layout on desktop, stacking to one column on mobile. Inputs on the left, real-time results/visualizer on the right.
• Inputs: Clean, rounded input fields with smooth :focus transitions.
• Interactions:
  • Calculations: Real-time updates as inputs change (debounced for performance).
  • Modals: Custom HTML/CSS overlays for "About" and "Safety Disclaimer" rather than alert().
  • Transitions: All state changes involve gentle opacity/transform transitions (e.g., transition: all 0.3s ease-in-out).

Developer Directives

• No Branding: Ensure no fictional logos or names are present. The title should strictly be descriptive.
• Constraint Compliance: You MUST NOT use localStorage. If the user refreshes, the app resets. This is by design for privacy.
• External Resources: Use Google Fonts (e.g., 'Inter' or 'Roboto') via <link> and Tailwind CSS via CDN for styling utility classes. No heavy framework dependencies.
• Responsiveness: Use CSS Grid and Flexbox for a fluid, responsive layout that maintains a minimum width of 320px.