Freediving Depth & Lung Volume Simulator

Overview

This single-file application is an interactive educational tool designed to help freedivers visualize the effects of Boyle's Law on their lung volume and equalization capability during descent. The app uses a responsive, clean, and clinical aesthetic to provide accurate, real-time calculations without external dependencies.

Core Features

• Dynamic Depth Slider: Adjust depth from 0 to 100 meters (or feet) with real-time updates.
• Customizable Lung Capacity: Users can input their starting lung volume (e.g., 6.0 Liters) to personalize calculations.
• Boyle's Law Visualizer: A real-time graphic representation (SVG) showing the lungs compressing as depth increases.
• Equalization Zone Warning: An indicator that displays 'Optimal', 'Caution', or 'Critical' zones based on depth and remaining air volume.
• Live Data Table: A dynamic list showing pressure (ATA), volume (Liters), and volume percentage relative to the surface at 5-meter increments.

UI Layout

• Header: Simple, centered title ("Freediving Depth & Volume Calculator").
• Main Tool Area:
  • Left Column: Control panel with slider for depth and number input for starting lung volume.
  • Right Column: Large, graphical visualization of the lung volume change.
• Results Section: A table beneath the main tool that updates automatically when inputs change.

Aesthetic & Design (Light Mode Only)

• Color Palette: Professional, clean, and calm.
  • Primary: Deep Ocean Blue (#005f73)
  • Secondary: Clear Teal (#0a9396)
  • Background: Crisp White (#ffffff)
  • Surface/Card: Light Gray (#f8f9fa)
  • Text: Dark Charcoal (#212529)
• Typography: Sans-serif fonts (e.g., Inter, system-ui) for legibility.
• Animations:
  • Smooth CSS transitions on the lung graphic as the slider moves.
  • Fade-in effects for results table rows to ensure the interface feels snappy.
  • Subtle shadow effects on cards to create depth without visual clutter.

Developer Directives (Strict)

• Architecture: Must be a single .html file. CSS and JavaScript must be embedded within <style> and <script> tags.
• Constraints:
  • No Storage: Do not use localStorage, sessionStorage, or cookies. Keep all state in volatile JS variables.
  • No Popups: Use CSS-hidden divs to show alerts or messages. Do not use alert(), prompt(), or confirm().
  • No Frameworks: Use Vanilla JS only. Do not pull in React, Vue, or Angular.
  • External Libraries: You may use CDN links for Tailwind CSS (via script/link tag) or icon libraries (e.g., Lucide or FontAwesome) if required for icons.
• Responsiveness: Ensure the layout shifts from side-by-side to stacked on mobile screens (viewport < 768px). Use CSS Flexbox or Grid.
• Accessibility: Ensure all inputs have associated <label> tags and the visualizer has aria labels where appropriate for screen readers.