Technical Specification: Earthquake Energy Release Calculator

Overview

This single-file application provides a high-precision, interactive tool for calculating the energy release of seismic events. It translates Richter magnitude input into scientific units (Joules, Ergs) and real-world comparisons (TNT equivalent).

Core Features

• Live Magnitude Input: A dual-input interface featuring a precise numerical slider (0.0 to 10.0) and a number field that keeps calculations synchronized.
• Scientific Conversions: Real-time display of energy in:
  • Joules (J)
  • Ergs (erg)
  • Megatons of TNT equivalent
• Impact Visualizer: A dynamic comparison chart or scale that shows the user the intensity relative to well-known events (e.g., standard lightning bolt, Hiroshima bomb, major historical earthquakes).
• Educational Context: Inline tooltips explaining the math (log10) and context for why energy scales exponentially.

UI/UX Layout

• Header: Clean, centered title with a minimal navigational element for "About the Math".
• Main Tool Area:
  • Input Card: A centered, white-background card with a soft shadow. Features a large, accessible magnitude slider.
  • Results Grid: A responsive grid showing three primary cards (Joules, Ergs, TNT). Each card uses a subtle border and high-contrast typography for readability.
• Responsiveness: Single-column layout on mobile, transitioning to a three-column grid on desktop.

Design & Aesthetics (Light Mode Only)

• Palette:
  • Background: #F8FAFC (Cool Gray 50)
  • Primary Accent: #2563EB (Blue 600) for active UI elements.
  • Card Background: #FFFFFF
  • Text: #1E293B (Slate 800) for headings, #475569 (Slate 600) for body.
• Typography: Sans-serif, human-readable (Inter or system-stack).
• Animations:
  • Results update with a gentle fade-in transition (CSS transition 200ms).
  • Number counters use a smooth ticker effect when values change.
  • Input slider provides immediate haptic-style visual feedback.

Development Directives

• Architecture: One single .html file. CSS and JS must be embedded in <style> and <script> tags.
• Performance: Use requestAnimationFrame for smooth UI updates during slider movement.
• State Management:
  • CRITICAL: No localStorage or sessionStorage. All application state must be managed via standard JavaScript objects/variables (let state = {}).
  • Calculation functions must be pure, taking magnitude as input and returning energy values.
• Security/Sandbox:
  • No alert(), confirm(), or prompt(). Create a custom <div> modal component if user feedback is required.
  • All external links must use target="_blank" rel="noopener noreferrer".
  • Ensure code is compatible with sandboxed iframes (no cookie/storage access).