Text to NATO Phonetic Alphabet Converter

Overview

A high-performance, single-file browser utility designed to convert plain text into the standard NATO (International Radiotelephony Spelling Alphabet) format. This tool prioritizes instant visual feedback and ease of use for radio operators, aviation personnel, and emergency responders.

Key Features

• Real-Time Conversion: The phonetic output updates instantly as the user types, removing the need for a 'Submit' button.
• Smart Punctuation & Numbers: Automatically maps digits and common symbols (e.g., '1' to 'One', '?' to 'Question Mark').
• One-Click Copy: A prominent 'Copy to Clipboard' button with a success animation.
• Clean Typography: Uses high-legibility sans-serif fonts to distinguish between complex phonetic terms.
• Clipboard Syncing: Provides a clear, copy-ready format that pastes easily into chat applications or radio logs.

UI/UX Specification

• Layout: Centered, 'SaaS-style' card layout with a maximum width of 800px. High whitespace usage for a professional look.
• Colors:
  • Background: #F9FAFB (Cool Gray 50)
  • Cards: #FFFFFF (White) with soft drop shadows (box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1)).
  • Primary Accent: #2563EB (Vibrant Blue) for primary buttons.
  • Text: #111827 (Gray 900) for headers, #4B5563 (Gray 600) for body text.
• Responsiveness: Fluid containers that stack vertically on mobile (under 640px) and align horizontally on tablets/desktops.
• Animations: Subtle, ease-in-out transitions for buttons and tooltips. No aggressive movements.

Technical Implementation Constraints

• Single File Only: The entire application (HTML, CSS, JS) must be contained within one HTML file. Do not use external files or folders.
• No Persistent Storage: Do not use localStorage, sessionStorage, or cookies. The application state must exist only in memory.
• Iframe Compatibility: Since this runs in a sandboxed iframe, avoid alert(), confirm(), or prompt(). Use custom HTML/CSS modals for notifications like "Copied to Clipboard".
• Light Mode Enforcement: Strictly light mode. Do not include toggle buttons for dark mode.
• External Libraries: Only reliable CDN links (e.g., Tailwind CSS via CDN, Google Fonts) are permitted. Do not bundle heavy frameworks like React or Vue.