Technical Specification: Universal Astronomy Telescope & Eyepiece Calculator

Overview

A high-precision, client-side, browser-based tool designed to assist amateur astronomers in planning their observations. This application allows users to input their telescope and eyepiece parameters to instantly calculate critical optical metrics like magnification, focal ratio, exit pupil, and true field of view.

Technical Constraints & Compliance

• Architecture: Single-file HTML/CSS/JS. All styles and logic embedded.
• Storage: No localStorage, sessionStorage, or cookies. The application must rely entirely on in-memory variables. State is reset on page refresh.
• Compatibility: Must function inside a sandboxed iframe with no storage access.
• Aesthetic: Clean, professional light-mode SaaS UI. High-contrast typography (sans-serif), generous whitespace, and subtle, rounded card elements.

Feature Set

• Dynamic Inputs: Real-time calculation engine that updates results as the user types.
• Input Fields:
  • Telescope Aperture (mm)
  • Telescope Focal Length (mm)
  • Eyepiece Focal Length (mm)
  • Eyepiece Apparent Field of View (Degrees)
• Output Dashboard:
  • Calculated Magnification (x)
  • Focal Ratio (f/)
  • Exit Pupil (mm)
  • True Field of View (Degrees)
• Responsive Design: Stacked layout on mobile devices; side-by-side or grid layout on desktop viewports.

UI/UX Layout

1. Header: Clean, centered title: "Telescope Optics Calculator". Short subtitle: "Calculate your optical setup parameters instantly."
2. Main Application Container: A central "card" with a soft shadow effect.
   • Input Section: Grid layout with clearly labeled input fields. Focus states must feature a blue border (e.g., #2563eb).
   • Results Section: A distinct, visually highlighted area using a subtle background color (e.g., #f3f4f6). Large, bold text for calculated values.
3. Helper Section: A static "How to interpret results" text block explaining the importance of Exit Pupil and TFOV for common astronomical targets.

Visual Design & Styling

• Color Palette:
  • Background: #ffffff
  • Surface/Card: #f9fafb
  • Accent/Primary: #2563eb (Used for active buttons or borders)
  • Text: #1f2937 (Primary) and #6b7280 (Secondary)
• Animations: Subtle transition effects on input focus and value updates. Use transition: all 0.2s ease-in-out for input field focus state changes.
• Typography: Use a standard, clean web-safe stack (e.g., Inter, system-ui, sans-serif).

Implementation Directives

1. Vanilla JavaScript: Use strictly non-blocking code. Bind listeners to input events for all fields.
2. Calculations:
   • Magnification = Telescope Focal Length / Eyepiece Focal Length
   • Focal Ratio = Telescope Focal Length / Telescope Aperture
   • Exit Pupil = Telescope Aperture / Magnification
   • TFOV = AFOV / Magnification
3. Error Handling: If division by zero is possible (e.g., 0mm input), the UI should display a dash "--" or "N/A" rather than throwing an error or displaying "Infinity".
4. Accessibility: Ensure all inputs have associated <label> tags. Use high-contrast color ratios for all text.