Karta demonstracyjna z maskowaniem

<main class="payment"><section class="card-scene" aria-label="Demonstracyjna karta"><div class="demo-card"><span>Karta demonstracyjna</span><svg viewBox="0 0 50 35" class="chip" aria-hidden="true"><rect x="1" y="1" width="48" height="33" fill="#d6bf74" stroke="#284754"/><path d="M16 1v33M34 1v33M1 11h48M1 23h48" stroke="#284754"/></svg><b id="card-preview">4111 1111 1111 1111</b><div><span id="name-preview">ANNA PRZYKŁADOWA</span><span id="expiry-preview">09/29</span></div></div><p class="note">Wyłącznie fikcyjne dane. Nie wpisuj numeru prawdziwej karty.</p></section><form id="card-form"><h1>Podgląd karty</h1><div class="field"><label for="card-name">Fikcyjne imię i nazwisko</label><input id="card-name" value="Anna Przykładowa" maxlength="40" required></div><div class="field"><label for="card-number">Numer testowy</label><input id="card-number" value="4111 1111 1111 1111" maxlength="19" inputmode="numeric" autocomplete="off" required aria-describedby="card-note"><small id="card-note">Przykładowy numer: 4111 1111 1111 1111</small></div><div class="two"><div><label for="expiry">Ważność (MM/RR)</label><input id="expiry" value="09/29" maxlength="5" inputmode="numeric" pattern="(0[1-9]|1[0-2])/[0-9]{2}" required></div><div><label for="cvv">Kod testowy</label><input id="cvv" value="123" maxlength="3" inputmode="numeric" pattern="[0-9]{3}" required></div></div><button type="button" data-demo-submit>Sprawdź dane testowe</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:#dcf0ee;--accent:#176b72;color:#17434d}.payment{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center}.card-scene{perspective:900px}.demo-card{background:#17434d;color:#e0f3ef;padding:26px;transform:rotateY(8deg) rotateZ(-3deg);border:1px solid #337b84;aspect-ratio:1.58;display:flex;flex-direction:column;justify-content:space-between}.demo-card>span{font-size:14px}.demo-card b{font:clamp(15px,2.5vw,22px)/1.4 ui-monospace,monospace;letter-spacing:1px;white-space:nowrap}.demo-card>div{display:flex;justify-content:space-between;gap:10px;font-size:11px}.chip{width:43px;max-height:36px}.payment form h1{font-size:29px}.payment button{background:#176b72;margin-top:18px}.payment .field{margin-bottom:12px}.payment .note{margin:22px 0}.payment .two{gap:12px}@media(max-width:560px){.payment{grid-template-columns:1fr;gap:12px}.demo-card{max-width:370px;margin:auto}.payment .two{grid-template-columns:1fr 1fr}}

(()=>{const q=s=>document.querySelector(s);const all=s=>[...document.querySelectorAll(s)];const update=()=>{const d=q('#card-number').value.replace(/\D/g,'').slice(0,16);q('#card-number').value=d.replace(/(.{4})/g,'$1 ').trim();q('#card-preview').textContent=(d||'••••••••••••••••').replace(/(.{4})/g,'$1 ').trim();q('#name-preview').textContent=q('#card-name').value.toUpperCase()||'IMIĘ I NAZWISKO';q('#expiry-preview').textContent=q('#expiry').value||'MM/RR';q('#status').textContent=''};all('#card-form input').forEach(e=>e.addEventListener('input',update));q('#card-form').onsubmit=e=>{e.preventDefault();if(!q('#card-form').reportValidity())return;const digits=q('#card-number').value.replace(/\D/g,'');let sum=0;[...digits].reverse().forEach((c,i)=>{let n=Number(c);if(i%2)n=n*2>9?n*2-9:n*2;sum+=n});q('#status').textContent=digits.length===16&&sum%10===0?'Dane testowe poprawne. Płatność nie została wykonana.':'Numer testowy nie przeszedł sprawdzania cyfr kontrolnych.';};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();}})});})();