Free Freediving Ear Equalization & Boyle's Law Calculator

Application Overview

The Freediving Physics & Volume Visualizer is a single-page web utility that helps divers calculate and visualize the effects of Boyle's Law on lung volume during a descent. It provides an interactive dashboard where users input their target depth and baseline lung volume, receiving an instant, animated representation of how that volume changes under hydrostatic pressure.

Core Features

1. Dynamic Volume Calculator: Inputs for 'Baseline Lung Volume' (liters) and 'Depth' (meters or feet) with real-time conversion.
2. Visual Pressure Simulation: An SVG-based circular indicator representing the lung/air space that physically shrinks in size as the user increases the depth slider.
3. Pressure Coefficient Display: Displays the ATA (Atmospheres Absolute) at the chosen depth to help users understand the pressure load.
4. Equalization 'Danger Zone' Indicator: Color-coded cues (Green -> Yellow -> Red) that warn users where air volume becomes critically low, reinforcing the need for early equalization.

UI & Layout Specification

• Header: Clean, centered text with the app title. No navigation links or complex menus.
• Main Tool Area: A split-view layout. The left side contains simple, large input fields for numeric data. The right side contains the interactive 'Volume Visualizer'.
• Responsive Design: On desktop, the calculator is side-by-side. On mobile, the visualizer stacks above the inputs to maintain high visibility while dragging sliders.
• Aesthetics: A clean, 'light-mode' SaaS aesthetic. Use a palette of crisp white (#FFFFFF), soft light-gray (#F8F9FA), and oceanic accents like deep teal (#008080) and sky blue (#87CEEB). High-quality box shadows (subtle, 0px 4px 12px rgba(0,0,0,0.1)) for cards.

Technical Directives for Developer

1. Architecture: Single index.html file. CSS and JS must be embedded within <style> and <script> tags.
2. Constraints:
   • NO STORAGE: Do not use localStorage, sessionStorage, or cookies. The state must be contained entirely in JS variables.
   • NO POPUPS: Do not use alert(), confirm(), or prompt(). If an error occurs (e.g., negative depth), show an inline error message within a div element.
   • NO EXTERNAL LIBS: Use Vanilla JS/CSS. You may use a CDN for one icon library (e.g., Phosphor Icons or FontAwesome) but no heavy frameworks.
3. Animations: Use CSS transition properties for the volume visualizer (the SVG circle radius) to ensure a smooth, liquid-like shrinking/expanding effect as the depth input changes.
4. Math:
   • Boyle's Law: $P_1V_1 = P_2V_2$ where $P = 1 + (depth / 10)$ for meters.
   • Ensure the UI handles precision to two decimal places.