Free Bouldering Chalk Volume & Crushing Area Calculator

Application Overview

A high-precision, client-side web utility designed for bouldering enthusiasts to calculate chalk bag capacity and assess the geometry of chalk blocks. This tool provides instant estimations without the need for server-side processing or data persistence.

Core Features

1. Chalk Bag Volume Calculator:
   • Dual-mode input: Cylindrical (radius/height) and Rectangular (length/width/height).
   • Real-time conversion between Liters, Cubic Inches, and Cubic Centimeters.
   • Automatic calculation of bag capacity based on typical chalk densities.
2. Chalk Block Crushing Estimator:
   • Input dimensions of standard magnesium carbonate blocks.
   • Visualizes the total surface area available for friction.
   • Provides an estimation of the resulting volume of powdered chalk based on block size.
3. Unit Conversion Utility:
   • Toggle between Metric (cm/L) and Imperial (in/cu in) instantly.

UI & Design Specifications

• Aesthetic: Clean, minimalist "SaaS" interface. High-contrast typography with a vibrant, professional color palette (Soft White background, Slate Blue action buttons, and Graphite Gray text).
• Layout:
  • Header: Simple navigation between "Bag Capacity" and "Block Crushing" modes.
  • Main Body: Two-column grid on desktop, stacking to a single column on mobile. Inputs on the left, dynamic result cards on the right.
  • Result Cards: Large, readable numbers with subtle drop shadows and rounded corners (border-radius: 12px).
• Animations: Subtle fade-ins for result cards. Smooth transitions for input field focus states. No jarring animations.

Technical Constraints & Directives

• Single File: The entire application must be bundled into one index.html file.
• Vanilla JS: Use pure JavaScript for all logic. No external frameworks (React, Vue, etc.) are allowed.
• Storage: STRICTLY FORBIDDEN. No localStorage, sessionStorage, or cookies. The app must function in a volatile memory state.
• Styling: Use a CDN link for Tailwind CSS (via <script src="https://cdn.tailwindcss.com"></script>) to handle styling and responsiveness.
• Security: Ensure all math functions handle edge cases (e.g., zero values, negative numbers) to prevent UI breakage.
• Iframe Compatibility: The app must render correctly inside a null-origin sandboxed iframe. Ensure no popups, alerts, or external resource blocking occurs.

Color Palette

• Background: #F8FAFC (Light Gray/White)
• Primary Text: #1E293B (Slate Gray)
• Accent/Action: #3B82F6 (Modern Blue)
• Card Background: #FFFFFF (Solid White)
• Borders/Dividers: #E2E8F0 (Light Slate)

Interaction Guidelines

• All calculations should trigger via an "Calculate" button or automatically on input change with a small debounce time.
• Modals (if needed for information) must be constructed with standard <div> elements, not alert() or prompt().