SYGNAŁ — tłumacz alfabetu Morse’a

<main><header><span>Stacja nadawcza</span><h1>Sygnał</h1><div class="signal" aria-hidden="true"><i></i><i></i><i></i><b></b><b></b><b></b><i></i><i></i><i></i></div></header><div class="mode" role="group" aria-label="Kierunek tłumaczenia"><button type="button" data-mode="encode" aria-pressed="true">Tekst → Morse</button><button type="button" data-mode="decode" aria-pressed="false">Morse → tekst</button></div><section><label id="message-label" for="message">Wiadomość</label><textarea id="message" rows="3" maxlength="300" spellcheck="false">SOS</textarea><div class="result-head"><label for="morse-result">Odebrany sygnał</label><button type="button" id="swap">Odwróć kierunek</button></div><textarea id="morse-result" rows="4" readonly spellcheck="false"></textarea><p id="morse-status" class="status" role="status"></p></section><footer>Spacje oddzielają litery, znak / oddziela słowa. Polskie litery tracą znaki diakrytyczne.</footer></main>

*{box-sizing:border-box}body{margin:0;font:16px/1.5 Arial,sans-serif}h1,h2,h3,p{margin:0}button,input,textarea,select{font:inherit;border-radius:0}button{cursor:pointer;min-height:44px}input,select{min-height:44px}button:disabled{cursor:default;opacity:.5}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--focus,#1457d9);outline-offset:3px}label{display:block}textarea{resize:vertical;width:100%;max-width:100%}main{min-height:100vh}button:active:not(:disabled){filter:brightness(.9)}[hidden]{display:none!important}.status{min-height:1.5em;font-size:14px}footer{font-size:12px;margin-top:24px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}input,textarea,select{color:inherit}h1{line-height:1.05;letter-spacing:-.04em}button{transition:background-color .15s,color .15s}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body{background:#f2b84e;color:#282922;--focus:#123d8a}main{max-width:900px;margin:auto;padding:35px 5%}header{position:relative;border-bottom:3px solid #282922;padding-bottom:24px}header>span{font:13px monospace}h1{font:900 80px/1 Arial,sans-serif;letter-spacing:-6px;margin-top:12px}.signal{display:flex;gap:7px;position:absolute;right:0;bottom:28px;align-items:center}.signal i{width:9px;height:9px;background:#282922;border-radius:50%}.signal b{width:23px;height:9px;background:#282922}.mode{display:flex;margin:24px 0;gap:8px;flex-wrap:wrap}button{border:1px solid #282922;background:transparent;color:inherit;padding:8px 15px}.mode button[aria-pressed="true"]{background:#282922;color:#f2b84e}label{font:13px monospace;margin-bottom:8px}textarea{border:2px solid #282922;background:#ffedbb;padding:18px;font:22px/1.5 monospace}.result-head{display:flex;justify-content:space-between;align-items:center;margin:20px 0 8px;gap:10px}.result-head label{margin:0}#morse-result{background:#282922;color:#ffdf91;font-size:28px}#morse-status{margin-top:12px;font-weight:700}@media(max-width:600px){main{padding:25px 16px}h1{font-size:64px}.signal{position:static;margin-top:18px}.result-head{align-items:start;flex-direction:column}#morse-result{font-size:22px}}

const morseTable={A:'.-',B:'-...',C:'-.-.',D:'-..',E:'.',F:'..-.',G:'--.',H:'....',I:'..',J:'.---',K:'-.-',L:'.-..',M:'--',N:'-.',O:'---',P:'.--.',Q:'--.-',R:'.-.',S:'...',T:'-',U:'..-',V:'...-',W:'.--',X:'-..-',Y:'-.--',Z:'--..','0':'-----','1':'.----','2':'..---','3':'...--','4':'....-','5':'.....','6':'-....','7':'--...','8':'---..','9':'----.','.':'.-.-.-',',':'--..--','?':'..--..','!':'-.-.--','@':'.--.-.','-':'-....-'};
function translateMorse(text,mode){if(text.length>300)throw new Error('Maksymalnie 300 znaków.');if(mode==='decode'){const reverse=Object.fromEntries(Object.entries(morseTable).map(([k,v])=>[v,k]));return text.trim().split(/\s*\/\s*/).map(word=>word.trim()?word.trim().split(/\s+/).map(code=>{if(!reverse[code])throw new Error('Nieznany znak: '+code);return reverse[code];}).join(''):'').join(' ');}const clean=text.toUpperCase().replace(/Ł/g,'L').normalize('NFD').replace(/[̀-ͯ]/g,'');return clean.trim().split(/\s+/).map(word=>Array.from(word).map(c=>{if(!morseTable[c])throw new Error('Nieobsługiwany znak: '+c);return morseTable[c];}).join(' ')).join(' / ');}
$(function(){let mode='encode';function run(){try{const out=$('#message').val().trim()?translateMorse($('#message').val(),mode):'';$('#morse-result').val(out);$('#morse-status').text(out?'Wiadomość przetłumaczona.':'Wpisz wiadomość.');$('#message').attr('aria-invalid','false');}catch(e){$('#morse-result').val('');$('#morse-status').text(e.message);$('#message').attr('aria-invalid','true');}}function choose(next,swap){if(swap&&$('#morse-result').val())$('#message').val($('#morse-result').val());else $('#message').val(next==='encode'?'SOS':'... --- ...');mode=next;$('[data-mode]').attr('aria-pressed','false');$('[data-mode="'+mode+'"]').attr('aria-pressed','true');$('#message-label').text(mode==='encode'?'Wiadomość':'Kod Morse’a');run();}$('[data-mode]').on('click',function(){choose(this.dataset.mode,false);});$('#swap').on('click',function(){choose(mode==='encode'?'decode':'encode',true);});$('#message').on('input',run);run();});