Free Aquarium Wave Maker Flow Rate & GPH Calculator

Technical Specification: Aquarium Flow Rate & Wave Pattern Simulator

1. Overview

This single-file application is a professional-grade planning tool designed for aquarium hobbyists to calculate and visualize water circulation patterns. It helps users determine if their pumps provide sufficient Gallons Per Hour (GPH) turnover and visualizes hypothetical wave patterns to optimize powerhead placement.

2. Core Features

• Dynamic Flow Calculator: Calculates total system turnover (X times volume) based on user-inputted tank dimensions and pump specifications.
• Canvas-Based Pattern Visualizer: An interactive 2D top-down view where users can place simulated 'powerheads' to see projected flow vectors and intersection zones.
• Stagnant Zone Detection: Highlights areas in the tank layout where flow velocity falls below recommended thresholds.
• Unit Converter: Seamless toggling between Gallons (US/Imperial) and Liters, as well as GPH and LPH (Liters Per Hour).
• Responsive Control Panel: A side-panel interface for precise control of powerhead GPH, angle, and position.

3. UI Layout

• Header: Clean, minimalist navigation with title and simple unit conversion toggle (Imperial/Metric).
• Main Workspace:
  • Left Column (Controls): Input forms for Tank Length, Width, Depth; Add/Remove Wave Maker modules; Global Flow Settings.
  • Center Panel (Canvas): A high-contrast visualization area representing the tank footprint. Interactive elements (wave makers) can be dragged and rotated.
  • Right Column (Results): Real-time summary displaying 'Total Turnover Rate', 'Average Flow per Gallon', and 'Status Warning' (e.g., 'Low Flow', 'Optimal', 'High Flow').

4. Color Palette (Light Mode Only)

• Primary Background: #F8FAFC (Cool White)
• Accent Color (Flow Vectors): #0EA5E9 (Vibrant Sky Blue)
• Warning/Dead Zone Color: #F43F5E (Soft Red)
• Interface Text: #1E293B (Dark Slate)
• Panel Background: #FFFFFF (Solid White with subtle box-shadow)

5. Animations & Micro-interactions

• Smooth Draggable Objects: Powerhead elements use CSS transform and requestAnimationFrame for 60fps movement within the canvas.
• Flow Simulation: Particle system inside the canvas to simulate water movement direction, with speed modulated by pump GPH input.
• Calculated Transitions: Results fields update with a gentle fade-in animation whenever input values change.

6. Technical Implementation Directives

• Single File: All HTML, CSS, and Vanilla JS must be inside one <main.html> file.
• No Persistence: Absolutely no localStorage, sessionStorage, or cookies. The state must be maintained in JavaScript objects.
• Iframe Compatibility: The app must be fully functional inside a null origin iframe. All external resources (fonts/icons) must be fetched via secure, cross-origin compatible CDNs.
• No Popups: Do not use alert() or confirm(). Create a custom div-based modal overlay for error reporting or information display.
• Responsive: The canvas must dynamically resize using ResizeObserver to fit the parent container, maintaining the aspect ratio of the aquarium footprint.