Bouldering Finger Tape and Wrap Calculator

Overview

A clean, professional, and mobile-responsive browser-based utility that helps rock climbers and boulderers determine the optimal tape width and select the correct wrapping technique (e.g., H-Tape, X-Tape, Buddy Tape) for their specific needs. This tool focuses on providing immediate, actionable data to prevent injuries and optimize climbing performance.

Technical Implementation Constraints

• Architecture: Single-file HTML/CSS/JS. All logic must reside in a single <script> block or <style> block.
• Storage: STRICTLY FORBIDDEN. Do not use localStorage, sessionStorage, or cookies. Maintain all input data in volatile variables.
• Aesthetic: High-contrast Light Mode. Use soft grays (#F8FAFC), crisp white containers (#FFFFFF), and professional blue/green accents.
• Responsiveness: Fluid grid layout that switches from a side-by-side view on desktop to a stacked view on mobile devices.

Features

1. Finger Circumference Input: Interactive range slider or manual input for finger circumference (mm/in).
2. Support Goal Selection: A dropdown or card-based picker to define the goal (e.g., "A2 Pulley Support", "General Stability", "Skin Protection").
3. Recommendation Engine: Calculates the exact tape width (in mm) based on finger size and desired support type.
4. Interactive Technique Guide: A visual step-by-step guide using SVG animations or high-quality CSS transitions that demonstrates how to apply the chosen wrap (e.g., H-Tape vs. X-Tape).
5. Material Estimator: Estimates how much tape length is required for the specific wrap to prevent waste.

UI Layout

• Header: Minimalistic title section with a clear value proposition description.
• Main Tool Area: Split into two distinct zones:
  • Left Panel (Inputs): Clean, modern input fields with floating labels.
  • Right Panel (Results): A prominent results card that updates in real-time as inputs change.
• Technique Library: A section below the calculator showing visual icons for different wrap types.

Design Tokens (Light Mode)

• Primary Blue: #2563EB (Buttons and active states)
• Background: #F1F5F9 (Main body)
• Container: #FFFFFF (White cards with subtle, non-intrusive 0 4px 6px -1px rgba(0,0,0,0.1) shadows)
• Typography: Sans-serif stack (system-ui, -apple-system, sans-serif) for maximum readability.
• Text Colors: Primary text #1E293B, Secondary text #64748B.

Development Guidelines

• Use Tailwind CSS via CDN for styling to ensure rapid development and consistent aesthetics.
• Use Lucide Icons via CDN for visual cues.
• All animations must be CSS transitions (e.g., transition: all 0.3s ease-in-out) for smooth interaction when switching tape types.
• Strictly avoid browser-native prompts. Use custom-built HTML modals if confirmation or alert dialogues are needed.