Technical Specification: PSI to Head Feet Converter

Overview

This single-file web application serves as a high-precision, responsive hydraulic utility tool designed for plumbers, HVAC engineers, and pump installers. It performs real-time conversions between pressure (PSI) and elevation head (feet) based on user-defined specific gravity inputs.

Technical Architecture

• Architecture: Single-file HTML5 (Vanilla JS, CSS3, HTML5).
• Sandboxing: The app is strictly state-based. No localStorage, sessionStorage, or cookies are utilized.
• Library Usage: Tailwind CSS (via CDN) for responsive, mobile-first styling. Lucide Icons (via CDN) for professional UI elements.
• Performance: Instant calculation on input events, ensuring zero-latency responsiveness.

Feature List

1. Dual-Direction Conversion: Convert PSI to Head Feet or Head Feet to PSI.
2. Custom Specific Gravity: Default value set to 1.0 (water), with manual override capability for other fluids (e.g., oils, brines).
3. Real-time Feedback: Calculations update instantly as the user types.
4. Copy-to-Clipboard: One-click utility to copy calculated values.
5. Formula Display: A toggle-able section that displays the formula used for the current calculation, providing transparency and educational value.
6. Reset Utility: One-tap button to clear all inputs and reset to default water values.

UI Layout

• Header: Clean, centered title with a brief description.
• Main Content Area: A balanced 2-column layout on desktop (stacking on mobile) containing input forms.
• Result Dashboard: A prominent, high-contrast card showing the converted output with large, legible typography.
• Reference Section: A footer-less section explaining the 2.31 constant used for standard water calculations.

Design System & Aesthetics

• Color Palette: A vibrant, professional light-mode aesthetic.
  • Primary: #2563eb (Royal Blue) for actions.
  • Background: #f8fafc (Slate 50) for the main body.
  • Cards: #ffffff (White) with soft, subtle rgba(0,0,0,0.05) shadows.
  • Text: #1e293b (Slate 800) for primary, #64748b (Slate 500) for labels.
• Animations: Subtle transition-all duration-200 on input states and button hovers. Smooth fade-in for calculation results.
• Responsive Design: Mobile-first design; inputs adapt from full-width on phones to side-by-side on desktop via Tailwind flex/grid classes.

Implementation Directives

• Strict Constraint: Do not utilize localStorage. All calculations must occur within the transient application state.
• Modals: Any alerts or information prompts must be rendered as custom DOM elements (div overlays) rather than using window.alert().
• Clean Code: Use semantic HTML5 elements. Ensure the entire application logic is contained within a single <script> block at the bottom of the body.