Yoga Strap Length & Reach Extension Calculator

Overview

A clean, professional, and accessible web-based calculator designed to help yoga practitioners determine the ideal strap length for various poses. By inputting body measurements (arm span, torso width), users can get precise recommendations on how much "effective length" their yoga strap should have to support specific asanas.

Technical Constraints & Compliance

• Architecture: Single-file HTML (HTML5, Tailwind CSS, Vanilla JavaScript).
• Storage: STRICTLY IN-MEMORY. No localStorage, sessionStorage, cookies, or indexedDB.
• Aesthetic: High-end light mode design. Use a palette of Soft Sage (#8A9A5B), Off-White (#F9F7F2), and Charcoal (#333333). No dark mode.
• Compatibility: Designed for sandboxed iframe environments.
• Responsiveness: Fully fluid layout using Tailwind's grid system, optimized for mobile, tablet, and desktop viewports.

UI Layout

1. Header Section

• Clean title: "Yoga Strap Alignment Calculator".
• Subtitle: "Find the perfect strap configuration for your reach and tension needs."

2. Main Input Area

• Personal Metrics: Two number-input fields (Arm Span, Torso Width) with unit toggles (cm/in).
• Pose Selector: A searchable dropdown allowing users to select specific poses (e.g., Cow Face Pose, Seated Forward Bend, Reclining Hand-to-Big-Toe).
• Visualization: An SVG-based dynamic illustration area that updates based on the selected pose, showing the "strap loop" concept relative to the body.

3. Result Section

• Output Card: A prominent display area showing the "Recommended Strap Length" in large, clear typography.
• Adjustment Slider: A slider allowing users to toggle between "Gentle Tension" and "Deep Reach" configurations, dynamically updating the calculated length.

Features

• Instant Calculation: Real-time updates as inputs change, providing immediate feedback.
• In-Memory History: A session-only list of "Calculated Settings" that persists only until the page is refreshed, preventing data leakage.
• Clear Instructional Tooltips: Small '?' icon hover/click states explaining how to measure each part of the body accurately.
• Accessibility: High contrast ratios, clear focus states for keyboard navigation, and descriptive ARIA labels.

Design Language

• Typography: Use a clean, geometric sans-serif font (e.g., Inter or Geist).
• Micro-interactions:
  • Soft fade-in for result panels when calculations are complete.
  • Smooth transition for slider inputs.
  • Subtle box-shadows on cards to create a "floating" UI effect.
• Color Palette:
  • Primary: Sage Green (#8A9A5B) for call-to-actions.
  • Background: Off-White (#F9F7F2).
  • Text: Dark Charcoal (#333333).
  • Borders/Dividers: Soft Gray (#E5E7EB).