Radioactive Half-Life Decay Equation Solver

A professional, high-performance, single-file browser application designed to solve radioactive decay equations. The interface is optimized for students, laboratory researchers, and educators who need to calculate variables within the half-life decay formula ($N(t) = N_0 \cdot (1/2)^{t/t_{1/2}}$) without the overhead of heavy software or the privacy risks of server-side data processing.

Technical Specification

1. Core Features

• Variable Solver: Select a target variable (Remaining Amount, Initial Amount, Time Elapsed, or Half-Life) and input the known values.
• Real-time Charting: A dynamic, responsive decay curve generated using Chart.js, visualizing the exponential drop-off based on the calculated inputs.
• Step-by-Step Logic: A 'Show Work' section that breaks down the calculation step-by-step for educational reinforcement.
• Unit Conversion: Support for common time units (seconds, minutes, hours, days, years) with auto-scaling functionality.
• Clipboard Support: One-click functionality to copy results to the system clipboard.

2. UI/UX Layout

• Header: Clean, centered typography stating the tool's purpose with a subtle decorative gradient background.
• Main Tool Area: A two-column grid layout on desktop that stacks vertically on mobile devices.
  • Left Column: Control panel containing dropdown selectors for the 'unknown variable' and numeric input fields with real-time validation.
  • Right Column: Display card featuring the results and a visual canvas for the decay graph.
• Modals: Custom HTML/CSS modal windows for 'About' and 'Help' sections, avoiding window.alert() or window.prompt() for an uninterrupted experience.

3. Visual Aesthetic & Design System

• Color Palette: A professional 'scientific' palette:
  • Primary: #2563eb (Blue)
  • Secondary: #64748b (Slate Gray)
  • Background: #f8fafc (Off-White)
  • Accent: #0f172a (Deep Slate)
• Transitions: Smooth CSS transitions on all buttons and input focus states (e.g., transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);).
• Typography: Sans-serif, human-readable fonts (Inter or System Stack) to ensure clarity of mathematical symbols and exponents.

4. Developer Directives (CRITICAL)

• Single File: All CSS must be in a <style> block, and all JS must be in a <script> block. No external files or build processes.
• CDN Usage: Use Tailwind CSS (via CDN) for styling and Chart.js (via CDN) for graph rendering.
• State Management: Use standard JS variables or object literals to store the app state. Do not use localStorage or sessionStorage as this is prohibited in the sandboxed iframe environment.
• Robustness: Include exhaustive input validation to prevent division by zero or negative time errors. Display friendly, custom error messages within the UI container if invalid data is entered.
• Responsiveness: Ensure the canvas element handles window resizing by adding a resize event listener that updates the Chart.js instance aspect ratio.