Technical Specification: Free Astrophotography Exposure Calculator

Overview

This single-file application provides a high-precision tool for photographers to calculate maximum shutter speed to avoid star trailing. It emphasizes a clean, professional, light-mode-only SaaS aesthetic suitable for professional field use and desktop review.

Technical Constraints

• Single File: All CSS, HTML, and JS must be embedded within one .html file.
• Storage: No localStorage, cookies, or IndexedDB. All state is held in JavaScript variables.
• Aesthetic: High-contrast light mode (Whites: #FFFFFF, Grays: #F9FAFB, #F3F4F6, Accents: #2563EB (Primary Blue)).
• Responsive: Fluid layout using Flexbox/Grid. Minimum width: 320px.
• Performance: Native JavaScript only. No heavy frameworks.

UI Layout

1. Header

• Title: "Astrophotography Exposure Calculator"
• Subtitle: "Calculate maximum shutter speed to prevent star trailing."

2. Main Input Section

• Card Layout: A centered, white, shadowed card with a light gray border.
• Input Fields:
  • Sensor Type: A dropdown select (Full-Frame, APS-C (1.5x), APS-C (1.6x), Micro Four Thirds (2.0x)).
  • Focal Length (mm): A numerical range slider and a text input field for precision.
  • Rule Selection: A toggle or radio button group to choose between Rule of 500, 400, or 300 (for high-res sensors).

3. Results Section

• Visual Indicator: A large, prominent display card showing the calculated shutter speed (e.g., "12.5 Seconds").
• Dynamic Advice: A subtle sub-text section that updates dynamically based on the input: "With this setup, keep your shutter open for no longer than 12 seconds to ensure sharp, circular stars."

CSS and Interaction Design

• Typography: Inter or System Sans-Serif font stack for clarity.
• Transitions: Smooth fade-in on card load (0.3s ease-in-out). Inputs should have a subtle box-shadow transition when focused.
• Mobile Optimization: Touch-friendly slider inputs. Labels are placed above inputs to ensure text readability on narrow viewports.
• Alerts: No alert() or prompt(). Validation errors (e.g., negative focal length) will appear as clean, inline red text below the input field.

Implementation Steps

1. State Management: Use an object to store current inputs. Use an event listener on the input container that triggers a calculate() function on every input event.
2. Formula: Result = (RuleConstant) / (FocalLength * CropFactor).
3. Sanitization: Ensure input numbers are validated to prevent Infinity or NaN outputs.
4. Accessibility: Ensure all inputs have associated <label> tags. Use aria-live="polite" on the result container so screen readers announce the calculated time change.