Bouldering Finger Tape Calculator & Support Guide

Overview

This application is a specialized utility for rock climbers, providing precise recommendations for finger tape widths and wrap techniques. By inputting finger diameter and the specific nature of the support required (preventative vs. injury recovery), the tool generates actionable instructions and sizing data.

Core Features

• Finger Diameter Calculator: Allows users to input their approximate finger circumference or diameter to scale tape width recommendations.
• Support Needs Toggle: Choose between "Preventative," "A2 Pulley Support," "Skin Protection," and "General Stability."
• Dynamic Instruction Engine: Displays step-by-step text guides and illustrative CSS-based diagrams for applying specific wrap styles (e.g., H-Tape, X-Wrap).
• Tape Width Converter: Provides conversions between standard metric (mm) and imperial (inch) tape sizes.
• Zero-Storage Logic: All calculations are performed in real-time in the browser’s memory. No data is saved, ensuring complete user privacy.

UI Layout

• Header: Clean, minimalist title with a descriptive tagline.
• Main Tool Area: A two-column layout on desktop (split between input controls and instruction panels) that stacks vertically on mobile devices.
• Results Section: A highlighted, prominent card that displays the calculated tape width and the recommended wrap style.
• Instructions: A secondary pane that renders step-by-step guides using clean, card-based steps to guide the user through the physical application process.

Design System & Aesthetics

• Palette: A high-contrast, professional light-mode scheme. Use soft slate greys (#F8FAFC) for backgrounds, crisp white (#FFFFFF) for cards, and primary accent blues (#3B82F6) for interactive elements and call-to-actions.
• Typography: Clean, sans-serif fonts (e.g., Inter or system-default) for maximum readability.
• Animations: Subtle entry animations for result cards. Use CSS transitions (ease-in-out) for toggling between support styles to provide a smooth, "app-like" experience.

Technical Directives for Developers

• Single File Only: Everything (HTML, CSS, JS) must be contained in one index.html file.
• Sandboxed Compatibility: The app will be inside an iframe.
  • Strictly No Storage: Do not use localStorage, sessionStorage, IndexedDB, or cookies.
  • No Popups: Do not use alert(), prompt(), or confirm(). Create custom CSS modals if interaction is needed.
• Responsive Design: Ensure buttons are large enough for mobile taps and text wrapping is handled gracefully across all viewports.
• No External Dependencies (Unless CDN): Vanilla JS is preferred. If icons are needed, use a lightweight CDN like Lucide or FontAwesome via a single <script> tag.
• External Links: All external links (e.g., for further reading) must use target="_blank" and rel="noopener noreferrer".