PHONETIC ALPHABET - INTERACTIVE APP SOURCE CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UK Phonetic Alphabet Converter</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #000;
            min-height: 100vh;
            margin: 0;
            padding: 0;
        }

        .container {
            background: #000;
            padding: 40px;
            width: 100%;
            min-height: 100vh;
        }

        .subtitle {
            color: #999;
            margin-bottom: 30px;
            font-size: 14px;
        }

        .input-section {
            margin-bottom: 30px;
        }

        label {
            display: block;
            margin-bottom: 10px;
            color: #ccc;
            font-weight: 600;
        }

        textarea {
            width: 100%;
            padding: 15px;
            border: 2px solid #333;
            border-radius: 10px;
            font-size: 16px;
            font-family: inherit;
            resize: vertical;
            transition: border-color 0.3s;
            background: #1a1a1a;
            color: #fff;
        }

        textarea:focus {
            outline: none;
            border-color: #667eea;
        }

        .output-section {
            background: #1a1a1a;
            border-radius: 10px;
            padding: 20px;
            min-height: 150px;
        }

        .output-title {
            color: #ccc;
            font-weight: 600;
            margin-bottom: 15px;
        }

        .phonetic-output {
            color: #fff;
            line-height: 1.8;
            font-size: 16px;
        }

        .phonetic-letter {
            display: inline-block;
            margin: 5px 0;
        }

        .letter-char {
            font-weight: bold;
            color: #667eea;
            margin-right: 5px;
        }

        .letter-word {
            color: #fff;
        }

        .empty-state {
            color: #666;
            font-style: italic;
            text-align: center;
            padding: 40px 20px;
        }

        .reference {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 2px solid #333;
        }

        .reference-title {
            color: #ccc;
            font-weight: 600;
            margin-bottom: 15px;
            font-size: 14px;
        }

        .reference-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 10px;
            font-size: 13px;
        }

        .reference-item {
            color: #999;
        }

        .reference-char {
            font-weight: bold;
            color: #667eea;
        }
    </style>
</head>
<body>
    <div class="container">
        <p class="subtitle">Convert text to the NATO phonetic alphabet</p>

        <div class="input-section">
            <label for="textInput">Enter your text:</label>
            <textarea id="textInput" rows="4" placeholder="Type or paste text here..."></textarea>
        </div>

        <div class="output-section">
            <div class="output-title">Phonetic Output:</div>
            <div id="output" class="phonetic-output">
                <div class="empty-state">Enter text above to see the phonetic conversion</div>
            </div>
        </div>

        <div class="reference">
            <div class="reference-title">NATO PHONETIC ALPHABET REFERENCE</div>
            <div class="reference-grid" id="reference"></div>
        </div>
    </div>

    <script>
        const ukPhonetic = {
            'A': 'Apple', 'B': 'Bravo', 'C': 'Charlie', 'D': 'Delta',
            'E': 'Echo', 'F': 'Freddie', 'G': 'Golf', 'H': 'Hotel',
            'I': 'India', 'J': 'Juliette', 'K': 'Kilo', 'L': 'London',
            'M': 'Monkey', 'N': 'November', 'O': 'Orange', 'P': 'Papa',
            'Q': 'Queen', 'R': 'Robert', 'S': 'Sugar', 'T': 'Tommy',
            'U': 'Uncle', 'V': 'Victor', 'W': 'Whiskey', 'X': 'X-Ray',
            'Y': 'Yellow', 'Z': 'Zulu',
            '0': 'Zero', '1': 'One', '2': 'Two', '3': 'Three',
            '4': 'Four', '5': 'Five', '6': 'Six', '7': 'Seven',
            '8': 'Eight', '9': 'Nine'
        };

        const textInput = document.getElementById('textInput');
        const output = document.getElementById('output');
        const reference = document.getElementById('reference');

        Object.entries(ukPhonetic).forEach(([char, word]) => {
            const item = document.createElement('div');
            item.className = 'reference-item';
            item.innerHTML = `<span class="reference-char">${char}</span> - ${word}`;
            reference.appendChild(item);
        });

        function convertToPhonetic(text) {
            if (!text.trim()) {
                return '<div class="empty-state">Enter text above to see the phonetic conversion</div>';
            }

            const result = [];
            for (let char of text.toUpperCase()) {
                if (ukPhonetic[char]) {
                    result.push(`<span class="phonetic-letter"><span class="letter-char">${char}:</span><span class="letter-word">${ukPhonetic[char]}</span></span>`);
                } else if (char === ' ') {
                    result.push('<span class="phonetic-letter"><span class="letter-word">[space]</span></span>');
                } else if (char === '\n') {
                    result.push('<br>');
                } else {
                    result.push(`<span class="phonetic-letter"><span class="letter-word">${char}</span></span>`);
                }
            }
            return result.join(' ');
        }

        textInput.addEventListener('input', (e) => {
            output.innerHTML = convertToPhonetic(e.target.value);
        });
    </script>
</body>
</html>