Kraj wybierany przez wyszukiwanie

<main class="country"><section><svg class="globe" viewBox="0 0 180 180" aria-hidden="true"><circle cx="90" cy="90" r="80" fill="#e9efff" stroke="#334e8e" stroke-width="2"/><ellipse cx="90" cy="90" rx="37" ry="80" fill="none" stroke="#334e8e" stroke-width="2"/><ellipse cx="90" cy="90" rx="80" ry="30" fill="none" stroke="#334e8e" stroke-width="2"/><path d="M10 90h160M90 10v160" stroke="#334e8e" stroke-width="2"/><circle cx="124" cy="62" r="10" fill="#a64157"/></svg><h1>Wybierz<br>kraj.</h1></section><form id="country-form"><label for="country-input">Kraj</label><input id="country-input" list="countries" value="Polska" autocomplete="off" required maxlength="50" aria-describedby="country-hint"><datalist id="countries"><option value="Polska"><option value="Norwegia"><option value="Japonia"><option value="Portugalia"><option value="Kanada"><option value="Brazylia"><option value="Niemcy"><option value="Włochy"></datalist><p id="country-hint" class="note">Zacznij pisać nazwę i wybierz jedną z 8 podpowiedzi.</p><div class="passport"><span>Wybrany kierunek</span><b id="country-code">PL</b><p id="country-detail">Polska / Europa</p></div><button type="button" data-demo-submit>Potwierdź kraj</button><p id="status" class="status" role="status"></p></form></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;font:16px/1.45 system-ui,sans-serif;display:grid;align-content:center;color:#17212e;background:#f5f7fb}main{width:min(100%,850px);margin:auto}h1,h2,p{margin:0 0 16px}h1{font-size:clamp(26px,4vw,42px);line-height:1.1}h2{font-size:21px}label{display:block;font-weight:600;margin-bottom:6px}input,select,textarea,button{font:inherit;max-width:100%}input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=color]),select,textarea{width:100%;padding:10px 12px;background:#fff;color:#17212e;border:1px solid #748091;min-height:44px;border-radius:0}textarea{resize:vertical}button{min-height:44px;padding:10px 18px;border:1px solid currentColor;background:#17212e;color:white;cursor:pointer;border-radius:0}button:hover{filter:brightness(1.15)}button:disabled{cursor:default;opacity:.55}button.secondary{background:transparent;color:inherit}input[type=radio],input[type=checkbox]{width:20px;height:20px;vertical-align:middle;accent-color:var(--accent,#3155c7)}input[type=range]{width:100%;accent-color:var(--accent,#3155c7);min-height:32px}input[type=color]{width:100%;min-height:52px;cursor:pointer;background:transparent;border:1px solid currentColor}fieldset{border:0;padding:0;margin:0}legend{font-weight:600;margin-bottom:12px}output{display:block}small,.note{font-size:13px}p.note{margin:10px 0 0}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent,#3155c7);outline-offset:3px}[hidden]{display:none!important}.field{margin-bottom:16px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.status{min-height:24px;margin-top:14px;font-weight:600;overflow-wrap:anywhere}.muted{color:#4b5868}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:560px){body{padding:18px}.two{grid-template-columns:1fr}h1{font-size:29px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body{background:#eef2fc;--accent:#334e8e;color:#253d70}.country{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.country h1{font-family:Georgia,serif;font-weight:400}.globe{width:170px;margin-bottom:18px}.passport{margin:24px 0;padding:18px;border:1px dashed #6179a9;background:#fff}.passport span{font-size:14px}.passport b{display:block;font:64px/1.2 Georgia,serif}.passport p{margin:0}.country button{background:#334e8e}@media(max-width:560px){.country{grid-template-columns:1fr;gap:20px}.globe{width:90px;float:right;margin:0 0 10px 10px}.country h1{font-size:29px}.passport{margin:18px 0}}

(()=>{const q=s=>document.querySelector(s);const all=s=>[...document.querySelectorAll(s)];const countries={'polska':['PL','Europa'],'norwegia':['NO','Europa'],'japonia':['JP','Azja'],'portugalia':['PT','Europa'],'kanada':['CA','Ameryka Północna'],'brazylia':['BR','Ameryka Południowa'],'niemcy':['DE','Europa'],'włochy':['IT','Europa']};const update=()=>{const name=q('#country-input').value.trim();const country=countries[name.toLocaleLowerCase('pl')];q('#country-input').setCustomValidity(country?'':'Wybierz kraj dostępny na liście.');q('#country-code').textContent=country?country[0]:'?';q('#country-detail').textContent=country?name+' / '+country[1]:'Wybierz kraj z listy';q('#status').textContent='';return country};q('#country-input').oninput=update;q('#country-form').onsubmit=e=>{e.preventDefault();const country=update();if(!q('#country-input').reportValidity())return;q('#status').textContent='Potwierdzono kraj: '+q('#country-input').value+' ('+country[0]+').';};update();all('form').forEach(form=>{const submit=form.querySelector('[data-demo-submit]');if(!submit)return;submit.addEventListener('click',()=>form.dispatchEvent(new Event('submit',{cancelable:true})));form.addEventListener('keydown',event=>{if(event.key==='Enter'&&!event.defaultPrevented&&event.target.matches('input:not([type=radio]):not([type=checkbox])')){event.preventDefault();submit.click();}})});})();