Hydrostatic Pressure Depth Calculator Technical Specification

Overview

A high-performance, single-file browser tool designed to compute hydrostatic pressure based on fluid column depth. The app provides a clean, professional, and responsive interface for physics students and engineers.

Key Features

• Dynamic Calculation Engine: Instant P = ρgh computation as the user types.
• Fluid Presets: A dropdown menu featuring common liquids (Fresh Water, Seawater, Mercury, Glycerin, Ethanol, etc.) with pre-filled density values.
• Unit Flexibility: Toggle inputs between metric (meters, kg/m³) and imperial (feet, lb/ft³).
• Multiple Output Formats: Simultaneous display of pressure in Pa, kPa, MPa, Bar, PSI, and Atmospheres.
• Custom Gravity Toggle: Ability to adjust gravity (default: Earth's 9.80665 m/s²) for specialized calculations.
• Responsive Design: Mobile-first layout that stacks inputs and outputs elegantly on smaller screens.

UI/UX Layout

1. Header: Clear, minimal title with a one-line functional description.
2. Main Configuration Panel:
   • Left Column (Inputs): Depth field, Fluid Selection dropdown, Custom Density toggle, Gravity input.
   • Right Column (Results): A visual 'Results Card' displaying the calculated pressure in major units, with the primary result highlighted in a large, bold font.
3. Formula Section: A collapsible info block showing the formula used and the definitions of each variable to assist with learning.

Color Palette (Light-Mode Only)

• Primary Blue: #2563eb (Call to Action buttons and active state highlights).
• Background: #f8fafc (Very light blue-gray for the page background).
• Card Background: #ffffff (Pure white for input and result containers).
• Text: #1e293b (Dark slate for high-readability body text).
• Border: #e2e8f0 (Subtle light gray for dividers and inputs).

Developer Directives

• Single File: All HTML, CSS, and Vanilla JavaScript must reside in one .html file.
• No Persistent Storage: Do not use localStorage, sessionStorage, or cookies. Maintain state using a JavaScript object variable (appState) and update the DOM directly.
• No Popups: If user input validation is required, use hidden <div> elements within the UI that toggle visibility, rather than alert() or confirm().
• Transitions: Apply smooth transition: all 0.2s ease-in-out; to all inputs and result containers to ensure a premium feel.
• No External Frameworks: Use standard CSS/Flexbox/Grid. No React, Vue, or heavy libraries. Use lightweight CDNs only if absolutely necessary for icons (e.g., FontAwesome).
• Security: Set sandbox="allow-scripts" on any iframe implementation if applicable, though the single-file nature should be self-contained.