Yoga Block Placement & Height Adjustment Tool

Overview

A clean, web-based utility designed to help yoga practitioners identify the optimal block height and placement for various poses. This tool prioritizes accessibility, safety, and proper alignment through a user-friendly, interactive interface.

Core Features

• Pose Selector: A categorized list of common yoga poses (e.g., Triangle, Half Moon, Pigeon) that require props.
• Dynamic Height Calculator: An input form that adjusts the recommended block height based on user flexibility levels and limb length proportions.
• Visual Prop Guide: Step-by-step illustrations or CSS-based wireframes showing exactly where to place blocks in relation to feet and hands.
• Alignment Tips: A sidebar containing actionable tips on keeping the spine long and shoulders stable while using props.
• No-Storage Logic: The tool operates entirely in memory. Every selection resets to default on page refresh, ensuring privacy and security.

UI Layout

• Header: Simple title and a brief introductory sentence about the benefits of props.
• Main Tool Area:
  • A primary drop-down or button grid to select the pose.
  • A secondary section for user input (flexibility level).
  • A dynamic 'Result' card that updates instantly without page reloads.
• Guidance Section: A dedicated area below the calculator that renders text-based instructions and visual descriptions of placement.

Visual Design & Aesthetics

• Palette: A soothing, premium light-mode palette:
  • Background: #F8FAFC (Soft Cool Gray)
  • Primary: #475569 (Slate Gray for text)
  • Accent: #10B981 (Emerald for success/calm)
  • Card Background: #FFFFFF with soft shadows (0 4px 6px -1px rgba(0, 0, 0, 0.1))
• Typography: Sans-serif, clean, and highly readable (Inter or system-stack).
• Animations:
  • Transitions between pose selection and result display should be a 300ms fade/slide-up animation.
  • Hover effects on buttons should be smooth, subtle scale-ups (scale(1.02)).

Technical Requirements & Constraints

• Single File: All HTML, CSS, and JS must reside in one .html file. CSS should be in <style> tags, JS in <script> tags.
• Frameworks: Only standard CDNs for Tailwind CSS (via script) or FontAwesome (via link). No React, Vue, or build-step dependencies.
• Compatibility: Strictly sandboxed iframe safe. No localStorage, sessionStorage, cookies, or any persistent state mechanisms.
• No Popups: Replace alert() or prompt() with custom <div> based overlays or inline error/success messages.
• Responsiveness: Fluid layout. On mobile, the result card stacks under the controls. On desktop, a side-by-side layout is preferred.