Technical Specification: Drone 180-Degree Rule & ND Filter Calculator

Overview

A clean, professional, single-file browser tool designed for drone photographers to calculate their required shutter speed and ND filter strength in seconds. The application prioritizes speed and clarity, allowing users to make adjustments in the field without unnecessary friction.

Core Features

• Target Shutter Calculator: Automatically computes the 180-degree shutter speed based on the user-selected frame rate (e.g., 24fps -> 1/50s, 60fps -> 1/120s).
• Exposure Offset Logic: Allows the user to input the 'current' exposure shutter speed (what the camera wants to use to expose the scene) and compares it to the 'target' shutter speed to calculate the necessary ND stop reduction.
• ND Filter Recommendation: Provides a clear, actionable recommendation (e.g., "Use ND16") based on the calculated light reduction.
• In-Memory State Engine: All calculations are performed via JavaScript logic without the use of cookies, local storage, or server-side calls.

UI/UX Layout

• Header: Clean, minimalist title with a short descriptive tagline.
• Main Input Section:
  • Left Column: Frame rate selector (dropdown or cards) and Aperture/ISO reference inputs.
  • Right Column: Ambient exposure reference (slider or numerical input for current shutter speed).
• Result Section: A dedicated 'Results' card that dynamically updates. It highlights the target shutter speed in a bold, primary accent color and the recommended ND filter in a high-contrast chip element.
• Responsive Constraints:
  • Desktop: Side-by-side split view of inputs and results.
  • Mobile: Stacked layout for easy one-handed operation.

Design Standards

• Palette:
  • Background: #FFFFFF
  • Card Surface: #F8FAFC
  • Text: #1E293B
  • Primary Accent (Buttons/Result Highlights): #2563EB (vibrant professional blue)
  • Borders: #E2E8F0
• Aesthetic: Modern, "SaaS" aesthetic. Large touch-friendly input fields, rounded corners (8px-12px), and soft, diffuse shadows (box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1)).
• Animations:
  • Transitions on input focus: Smoothly shift border colors.
  • Results update: Use a subtle fade-in or slide-up animation when the calculation triggers.

Technical Implementation Directives

• Architecture: Single HTML file including CSS within <style> and JS within <script> tags.
• Environment: Must function perfectly inside a null-origin sandboxed iframe.
• Dependencies: TailWind CSS CDN for layout; standard web fonts (Inter or system-sans-serif).
• State Management: Use reactive JS functions to update the DOM elements whenever input values change. Do not save state. Reset state on refresh.
• Compatibility: Ensure high contrast for outdoor, bright daylight visibility (given the context of the user base being outdoors). Avoid any dark-mode scripts or media queries that force black backgrounds.