Okno ustawień prywatności

<main class="privacy-console">
  <header><div><span>PRYWATNOŚĆ / USTAWIENIA</span><h1>Ustawienia<br>prywatności</h1></div><b>STATUS: AKTYWNY</b></header>
  <section class="policy"><p>Możesz zmienić zgodę na pomiar i wiadomości. Ustawienie niezbędne pozostaje aktywne.</p><dl><div><dt>Niezbędne</dt><dd>Zawsze</dd></div><div><dt>Pomiar</dt><dd id="measure-state">Aktywny</dd></div><div><dt>Wiadomości</dt><dd id="message-state">Wyłączone</dd></div></dl><button id="privacy-open" type="button">Zmień ustawienia</button></section>
  <p id="privacy-state" role="status">Ostatni zapis: dzisiaj, 09:40</p>
</main>
<dialog id="privacy-dialog" aria-labelledby="privacy-title" aria-describedby="privacy-desc">
  <header><button class="privacy-close" type="button" aria-label="Zamknij ustawienia prywatności">×</button><h2 id="privacy-title" tabindex="-1">Rejestr zgód</h2><p id="privacy-desc">Wybierz, jakie dane mogą być używane po zapisaniu ustawień.</p></header>
  <div class="consent-table">
    <label><span><b>Niezbędne</b><small>Sesja, bezpieczeństwo i zapis wyboru</small></span><input type="checkbox" name="essential" checked disabled><i>Wymagane</i></label>
    <label><span><b>Statystyki użycia</b><small>Anonimowe informacje o działaniu strony</small></span><input id="privacy-measure" type="checkbox" name="measure" checked><i>Opcjonalne</i></label>
    <label><span><b>Wiadomości</b><small>Powiadomienia o nowych publikacjach</small></span><input id="privacy-messages" type="checkbox" name="messages"><i>Opcjonalne</i></label>
  </div>
  <div class="privacy-foot"><div><strong id="privacy-stamp" hidden>ZAPISANO</strong><p id="privacy-summary" role="status" aria-live="polite">Włączone ustawienia: 2 z 3.</p></div><div class="privacy-actions"><button class="secondary privacy-close" type="button">Anuluj</button><button id="privacy-save" type="button">Zapisz ustawienia</button></div></div>
</dialog>

*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:#d7d9d4;color:#171a18;font:16px/1.45 Arial,sans-serif}.privacy-console{width:min(100%,930px);min-height:100vh;margin:auto;padding:28px}.privacy-console>header{display:flex;justify-content:space-between;align-items:flex-start;border:3px solid #171a18;padding:24px;background:#eceee9}.privacy-console header span{font:11px "Courier New",monospace;letter-spacing:.12em}.privacy-console h1{margin:9px 0 0;font-size:clamp(48px,8vw,88px);line-height:.8;letter-spacing:-.07em}.privacy-console>header>b{padding:7px 9px;background:#c8ff42;font:12px "Courier New",monospace}.policy{margin-top:18px;border:3px solid #171a18;padding:25px;background:#eceee9}.policy>span{font:11px "Courier New",monospace;letter-spacing:.12em}.policy>p{max-width:60ch;margin:14px 0 24px}.policy dl{margin:0 0 24px;border-top:2px solid #171a18}.policy dl div{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid #8b8e88;padding:11px 0}.policy dd{margin:0;font-weight:800}.privacy-console>p{margin:12px 0;font-size:12px}button{min-height:46px;padding:10px 16px;border:2px solid #171a18;border-radius:0;background:#171a18;color:#f2f4ee;font:800 14px Arial,sans-serif;cursor:pointer}button:hover{background:#c8ff42;color:#171a18}button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:4px solid #3157d5;outline-offset:3px}dialog{position:fixed;inset:auto 0 0;width:min(900px,100%);max-height:calc(100dvh - 18px);margin:0 auto;padding:0;border:3px solid #171a18;border-bottom:0;background:#eceee9;color:#171a18;overflow:auto}dialog::backdrop{background:rgba(28,31,29,.77)}dialog>header{position:relative;padding:24px 26px 19px;border-bottom:3px solid #171a18}.privacy-close[aria-label]{position:absolute;right:12px;top:12px;width:46px;padding:0;background:transparent;color:#171a18;font-size:27px}.privacy-close[aria-label]:hover{background:#c8ff42}dialog>header>span{font:11px "Courier New",monospace;letter-spacing:.12em}dialog h2{margin:18px 0 5px;font-size:clamp(38px,7vw,62px);line-height:.88;letter-spacing:-.06em}dialog header p{margin:12px 0 0;max-width:58ch}.consent-table label{position:relative;display:grid;grid-template-columns:1fr 44px 98px;align-items:center;gap:15px;min-height:82px;padding:13px 25px;border-bottom:1px solid #8b8e88;cursor:pointer}.consent-table label:has(input:focus-visible){outline:4px solid #3157d5;outline-offset:-4px}.consent-table span b{display:block}.consent-table span small{display:block;margin-top:3px;color:#50544f}.consent-table input{width:24px;height:24px;margin:0;accent-color:#171a18}.consent-table i{font:normal 11px "Courier New",monospace;text-transform:uppercase}.consent-table input:disabled{opacity:1}.privacy-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;padding:20px 25px 24px}.privacy-foot p{margin:7px 0 0;font-size:13px}.privacy-foot strong{display:inline-block;padding:4px 8px;border:3px solid #171a18;background:#c8ff42;transform:rotate(-3deg);font:900 13px "Courier New",monospace}#privacy-stamp[hidden]{display:none}.privacy-actions{display:flex;gap:8px}.privacy-actions .secondary{background:transparent;color:#171a18}@media(max-width:600px){.privacy-console{padding:14px}.privacy-console>header{display:block;padding:18px}.privacy-console>header>b{display:inline-block;margin-top:22px}.policy{padding:18px}dialog{width:100%;max-width:none;max-height:calc(100dvh - 10px);margin:0}.consent-table label{grid-template-columns:1fr 32px;padding:13px 18px}.consent-table i{grid-column:1/-1}.privacy-foot{align-items:stretch;flex-direction:column;padding:18px}.privacy-actions button{flex:1}}@media(max-width:380px){.privacy-console h1{font-size:48px}.privacy-actions{flex-direction:column}.privacy-actions button{width:100%}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

$(function(){const dialog=$('#privacy-dialog')[0],$dialog=$(dialog),opener=$('#privacy-open')[0];let downOutside=false,savedMeasure=true,savedMessages=false;const outside=e=>{const r=dialog.getBoundingClientRect();return e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom};const trap=event=>{if(event.key!=='Tab')return;const items=[...dialog.querySelectorAll('button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[href],[tabindex]:not([tabindex="-1"])')].filter(item=>item.getClientRects().length),first=items[0],last=items[items.length-1],current=document.activeElement;if(!first){event.preventDefault();dialog.focus()}else if(event.shiftKey&&(current===first||!items.includes(current))){event.preventDefault();last.focus()}else if(!event.shiftKey&&current===last){event.preventDefault();first.focus()}};function update(){const count=1+Number($('#privacy-measure').prop('checked'))+Number($('#privacy-messages').prop('checked'));$('#privacy-summary').text('Włączone ustawienia: '+count+' z 3.');return count}function restore(){ $('#privacy-measure').prop('checked',savedMeasure);$('#privacy-messages').prop('checked',savedMessages);update()}$('#privacy-open').on('click',function(){restore();$('#privacy-stamp').prop('hidden',true);dialog.showModal();$('#privacy-title').trigger('focus')});$('#privacy-measure,#privacy-messages').on('change',update);$('.privacy-close').on('click',()=>dialog.close('cancel'));$('#privacy-save').on('click',function(){savedMeasure=$('#privacy-measure').prop('checked');savedMessages=$('#privacy-messages').prop('checked');const count=update();$('#privacy-stamp').prop('hidden',false);$('#measure-state').text(savedMeasure?'Aktywny':'Wyłączony');$('#message-state').text(savedMessages?'Aktywne':'Wyłączone');$('#privacy-state').text('Ustawienia zapisane. Włączone: '+count+' z 3.')});$dialog.on('keydown',trap).on('cancel',function(event){event.preventDefault();dialog.close('cancel')}).on('close',function(){restore();opener.focus()}).on('pointerdown',event=>{downOutside=outside(event)}).on('pointerup',event=>{if(downOutside&&outside(event))dialog.close('backdrop');downOutside=false}).on('pointercancel',()=>{downOutside=false})});