Bouldering Campus Board Rung Spacing Calculator

Overview

This single-file application is a specialized utility designed for climbers to calculate the ideal vertical distance between rungs on a campus board based on personal anthropometric data. It transforms raw physical measurements into actionable, safe, and effective training dimensions.

Detailed Feature List

• Anthropometric Input Engine: Captures user height, arm span, and current climbing grade.
• Ape Index Analysis: Automatically calculates the user's Ape Index and adjusts recommendations accordingly.
• Adaptive Spacing Logic: Calculates suggested spacing for 'Basic,' 'Intermediate,' and 'Advanced' training intensities.
• Interactive Visualizer: A responsive SVG visualizer that dynamically renders a campus board preview based on the calculated values.
• Constraint Awareness: Includes a toggle to switch between metric (cm) and imperial (in) units.
• Print-Friendly Mode: A dedicated CSS print stylesheet that cleans the UI into a simple table/list format for easy workshop reference.

UI Layout

• Header: Clean, minimalist title with an icon and a brief subtitle describing the tool's utility.
• Main Tool Area (Two-Column Grid):
  • Left Column (Inputs): Input fields for height, arm span, and preferred difficulty level. Includes clear, labeled ranges and helper text.
  • Right Column (Output): Real-time calculation results displayed in large, readable typography, accompanied by the SVG board visualizer.
• Visualizer: An interactive SVG strip showing the spacing ratios. Hovering over a gap shows the specific distance.

Color Palette (Light Mode Only)

• Background: #FFFFFF (White) for the main container, #F1F5F9 (Slate 100) for the page background to create depth.
• Primary Accent: #2563EB (Blue 600) used for calculation highlights and the primary button.
• Text: #1E293B (Slate 800) for primary text, #64748B (Slate 500) for labels/helper text.
• Status/Highlights: #059669 (Emerald 600) for success states, #DC2626 (Red 600) for safety warnings.

Animations & Transitions

• Smooth Re-calculation: When input values change, the SVG visualizer updates using CSS transitions (ease-in-out) to smoothly slide rungs to their new positions.
• Input Focus: Smooth shadow/border color transitions when a user selects an input field.
• Hover Effects: Soft scaling on interaction buttons.

Developer Directives

• Strict Single File: All CSS, HTML, and JS must reside in one .html file.
• No Persistence: Do not use localStorage or sessionStorage. All state must be managed via JavaScript object variables.
• Sandboxed Compatibility: Ensure no reliance on external APIs or tracking scripts. All dependencies (e.g., FontAwesome, Tailwind) should be loaded via CDN links. Avoid all alert(), confirm(), or prompt() calls; create custom modal components if needed.
• Responsive Design: Use a mobile-first approach. At narrow widths, the two-column grid should stack vertically. Ensure font sizes remain legible on mobile devices.