Free Sun Path Sunrise and Sunset Azimuth Angle Calculator

Application Specification: Sun Path & Solar Position Calculator

Overview

A high-performance, single-file browser utility designed to calculate the sun's position, sunrise, sunset, and solar azimuth/elevation angles for any location on Earth. Targeted at photographers, architects, solar installers, and outdoor enthusiasts, the app provides data-driven solar insights.

Core Features

1. Geo-Location Engine: Automatic detection of latitude/longitude with a manual override input for precise location control.
2. Date Picker: Select any date throughout the year to view the solar arc for that specific day.
3. Real-Time Dashboard: Display of Current Time, Sunrise, Sunset, Solar Noon, and Golden Hour start/end times.
4. Azimuth & Elevation Visualizer: Dynamic gauges showing the current azimuth (degrees) and elevation of the sun.
5. Dynamic Solar Arc Chart: A simple CSS/SVG-based visualization representing the sun's path across the sky from sunrise to sunset.

UI/UX Design (Light Mode Aesthetic)

• Color Palette:
  • Primary Background: #FFFFFF (White)
  • Surface/Cards: #F9FAFB (Soft Gray)
  • Accent Colors: #F59E0B (Sunset Orange), #3B82F6 (Sky Blue), #111827 (Charcoal Text).
• Layout:
  • Header: Clean, minimalist title with a subtle shadow.
  • Main Configuration: A card-based area containing a location search input and a date selector.
  • Result Grid: A responsive grid containing four main data cards: 'Sun Position', 'Solar Times', 'Day Length', and 'Sun Path Visual'.
• Interactions: Smooth CSS transitions (0.3s ease-in-out) on button hovers and card transitions. No alerts or popups; use custom modal overlays for warnings (e.g., location permission denied).

Technical Requirements

• Single-File Architecture: All logic must be contained in a single .html file. CSS and JS can be embedded <style> and <script> blocks.
• Math Logic: Integrate a lightweight, vanilla JavaScript library (like suncalc via CDN) or implement the standard solar position algorithms (Spencer Formula) manually to ensure zero dependency bloating.
• Sandbox Compliance:
  • ABSOLUTELY NO usage of localStorage, sessionStorage, or cookies.
  • NO alert(), confirm(), or prompt(). Replace with custom UI modals.
  • Use https CDNs only for external resources (e.g., FontAwesome for icons, Google Fonts).
• Performance: Optimize for sub-500ms initial load time. The tool must be responsive, stacking columns on mobile devices and expanding to a 2x2 grid on desktops.

Implementation Steps for Developer

1. Setup: Use a clean HTML5 boilerplate with Tailwind CSS from CDN for styling.
2. State Management: Use a simple JS object appState = { lat: null, lng: null, date: new Date() } to track data in memory.
3. UI Logic: Create a 'Location' input that updates the appState and triggers a re-calculation function whenever changed.
4. Formatting: Implement helper functions to format dates and degrees into human-readable strings.
5. Responsiveness: Ensure the SVG solar arc chart is responsive using viewBox attributes to maintain aspect ratio on smaller screens.