Technical Specification: Doppler Effect Frequency Simulator

Overview

A high-performance, browser-based physics utility designed to calculate the observed frequency ($f_o$) of a sound source given user-defined movement parameters. The application focuses on clarity, precision, and educational value.

Core Architecture & Constraints

• Single File: All HTML, CSS, and JavaScript must reside in a single file.
• No Persistent Storage: No localStorage or indexedDB usage. State must be handled entirely in-memory.
• Iframe Compatibility: The app will operate in a sandboxed iframe. No popups (alert, prompt) allowed; use CSS-based modals.
• Performance: Calculations must be performed in real-time as inputs change.

UI/UX Design

• Aesthetic: Clean, professional "SaaS" aesthetic. Light mode only (no dark mode toggle).
• Palette:
  • Background: #FFFFFF (White)
  • Cards/Containers: #F8FAFC (Slate 50)
  • Borders: #E2E8F0 (Slate 200)
  • Primary Brand/Action: #3B82F6 (Blue 500)
  • Text: #1E293B (Slate 800)
• Responsiveness: Fluid grid layout. On mobile, inputs stack vertically. On desktop, inputs sit on the left (side-panel) and the live visualization occupies the center-right.

Feature List

1. Real-time Input Handling: Immediate recalculation upon field change (input event listener).
2. Parameter Controls:
   • Source Frequency ($f_s$) in Hz.
   • Speed of Sound ($v$) with preset toggle for air (approx 343 m/s) at room temperature.
   • Observer Velocity ($v_o$) with direction toggle (towards/away).
   • Source Velocity ($v_s$) with direction toggle (towards/away).
3. Unit Conversion: Support for m/s, km/h, and mph.
4. Dynamic Visualization: A Canvas-based element drawing concentric waves (wavefronts) that compress/expand based on the velocity inputs, demonstrating the concept visually.
5. Instant Result Card: A prominent, large-font result box showing the "Observed Frequency" ($f_o$).

Developer Directives

• Animations: Use CSS transition: all 0.3s ease-out for UI state changes. The wave visualization should utilize requestAnimationFrame for smooth rendering.
• Form Validation: Use HTML5 constraints for numeric inputs. Prevent values that would result in division by zero or physically impossible states (e.g., $v_s$ > $v$ unless specifically handled).
• Typography: Use a clean sans-serif system font stack (e.g., system-ui, -apple-system, BlinkMacSystemFont).
• External Resources: Use a CDN for Tailwind CSS (via Tailwind play or standard CDN link) to handle layout and spacing rapidly.