Okno eksportu miksu w studiu audio

<main class="audio-desk">
  <header><span>STUDIO B / SESJA 18</span><b id="desk-clock">48:12</b></header>
  <section class="track" aria-labelledby="audio-title">
    <div class="track-copy"><p>Miks roboczy / 06</p><h1 id="audio-title">Nocny<br>ogród</h1><dl><div><dt>Ścieżki</dt><dd>24</dd></div><div><dt>Szczyt</dt><dd>−1.2 dB</dd></div><div><dt>Próbkowanie</dt><dd>48 kHz</dd></div></dl></div>
    <svg class="wave" viewBox="0 0 720 180" role="img" aria-label="Przebieg fali dźwiękowej"><path d="M0 92h28l12-34 16 71 18-101 20 132 18-92 15 39 18-72 17 116 21-58 17 18 14-71 20 128 17-111 16 68 18-24 17 37 18-94 18 119 20-73 16 33 17-80 20 124 17-58 14 12 18-70 19 99 18-90 20 61 16-28 18 39 18-81 18 95 17-47 17 9 20-42 17 64 18-54 18 37 17-18 18 21h47"/></svg>
    <div class="transport" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
  </section>
  <div class="desk-actions"><button id="audio-open" type="button">Eksportuj miks</button><p id="audio-state" role="status">Ostatni zapis: przed chwilą</p></div>
</main>
<dialog id="audio-dialog" aria-labelledby="audio-dialog-title" aria-describedby="audio-dialog-desc">
<button class="icon-close" type="button" aria-label="Zamknij okno eksportu">×</button>
  <header><p>Plik wynikowy</p><h2 id="audio-dialog-title" tabindex="-1">Eksport miksu</h2><p id="audio-dialog-desc">Nazwij plik i wybierz parametry zapisu.</p></header>
  <form class="audio-form" id="audio-form">
    <label for="mix-name">Nazwa pliku</label><input id="mix-name" name="mix_name" value="Nocny ogród" required maxlength="40" autocomplete="off">
    <div class="format-row"><label for="mix-format">Format<select id="mix-format" name="format"><option value="wav">WAV</option><option value="flac">FLAC</option><option value="aiff">AIFF</option></select></label><fieldset><legend>Jakość</legend><label><input type="radio" name="quality" value="preview" checked> Odsłuch</label><label><input id="mix-master" type="radio" name="quality" value="master"> Master</label></fieldset></div>
    <div class="export-meter" aria-hidden="true"><i id="mix-meter"></i></div><p id="export-result" class="dialog-result" role="status" aria-live="polite"></p>
    <div class="dialog-actions"><button class="secondary cancel" type="button">Anuluj</button><button id="mix-export" class="primary" type="submit">Eksportuj plik</button></div>
  </form>
</dialog>

*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;min-width:320px;min-height:100vh;background:#101116;color:#f5f3ee;font:16px/1.45 Arial,sans-serif}.audio-desk{width:min(100%,1120px);min-height:100vh;margin:auto;padding:24px}.audio-desk>header{display:flex;justify-content:space-between;border-bottom:1px solid #696774;padding:10px 0 16px;font:12px "Courier New",monospace;letter-spacing:.12em}.audio-desk>header b{color:#c8b1ff}.track{position:relative;min-height:420px;padding:42px 0 28px;border-bottom:1px solid #696774;overflow:hidden}.track-copy{position:relative;z-index:2;width:min(390px,100%)}.track-copy>p{margin:0 0 14px;color:#c8b1ff;font:12px "Courier New",monospace;letter-spacing:.12em}.track h1{margin:0;font-size:clamp(62px,10vw,124px);font-weight:900;letter-spacing:-.075em;line-height:.75}.track dl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:48px 0 0}.track dl div{border-top:3px solid #c8b1ff;padding-top:8px}.track dt{color:#acaab4;font-size:11px}.track dd{margin:2px 0 0;font:700 14px "Courier New",monospace}.wave{position:absolute;left:34%;right:0;top:84px;width:72%;height:190px;overflow:visible}.wave path{fill:none;stroke:#c8b1ff;stroke-width:4;vector-effect:non-scaling-stroke}.transport{position:absolute;right:0;bottom:35px;display:flex;align-items:flex-end;gap:11px;height:86px}.transport i{width:9px;height:38px;background:#f5f3ee}.transport i:nth-child(2),.transport i:nth-child(5){height:78px;background:#c8b1ff}.transport i:nth-child(3){height:58px}.transport i:nth-child(6){height:64px}.transport i:nth-child(7){height:25px}.transport i:nth-child(8){height:51px}.desk-actions{display:flex;align-items:center;gap:18px;padding-top:24px}.desk-actions p{margin:0;color:#acaab4;font-size:13px}button,input,select{font:inherit;border-radius:0}button{min-height:46px;padding:10px 17px;border:2px solid #c8b1ff;background:transparent;color:#f5f3ee;font-weight:800;cursor:pointer}#audio-open{background:#c8b1ff;color:#15121c}button:hover{background:#f5f3ee;color:#15121c;border-color:#f5f3ee}button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:4px solid #ffd43b;outline-offset:3px}dialog{width:min(680px,calc(100% - 28px));padding:0;border:2px solid #c8b1ff;background:#171820;color:#f5f3ee;max-height:calc(100dvh - 28px);overflow:auto}dialog::backdrop{background:rgba(4,4,8,.82)}dialog[open]{animation:audio-in .24s ease-out}.dialog-index{position:absolute;left:18px;top:15px;color:#c8b1ff;font:11px "Courier New",monospace;letter-spacing:.14em}.icon-close{position:absolute;right:10px;top:10px;width:46px;padding:0;border:0;font-size:28px;z-index:2}dialog>header{padding:55px 34px 22px;border-bottom:1px solid #696774}dialog>header>p:first-child{margin:0 0 5px;color:#c8b1ff;font:11px "Courier New",monospace;letter-spacing:.13em}dialog h2{margin:0 0 7px;font-size:clamp(34px,7vw,58px);line-height:1;letter-spacing:-.045em}dialog>header p:last-child{margin:0;color:#c7c5cd}.audio-form{padding:26px 34px 32px}.audio-form>label,.format-row>label,legend{font-size:13px;font-weight:800}input,select{width:100%;min-height:48px;margin-top:7px;padding:10px 11px;border:1px solid #777484;background:#0e0f14;color:#f5f3ee}input::placeholder{color:#b8b5bf}.format-row{display:grid;grid-template-columns:1fr 1.35fr;gap:22px;margin-top:20px}fieldset{margin:0;padding:8px 12px 4px;border:1px solid #777484}legend{padding:0 7px}fieldset label{display:inline-flex;align-items:center;min-height:44px;margin-right:13px;gap:7px}fieldset input{width:21px;min-height:0;height:21px;margin:0;accent-color:#c8b1ff}.export-meter{height:12px;margin-top:22px;border:1px solid #777484;padding:2px}.export-meter i{display:block;width:0;height:100%;background:#c8b1ff;transition:width .35s ease}.dialog-result{min-height:24px;margin:10px 0;color:#e2d8ff;font-weight:700}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:15px}.primary{background:#c8b1ff;color:#15121c}.secondary{border-color:#777484}@keyframes audio-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@media(max-width:620px){.audio-desk{padding:16px}.track{min-height:470px}.wave{left:5%;top:240px;width:100%}.track dl{margin-top:32px}.transport{display:none}.desk-actions{align-items:flex-start;flex-direction:column}.audio-form,dialog>header{padding-left:20px;padding-right:20px}.format-row{grid-template-columns:1fr}.dialog-actions button{flex:1}}@media(max-width:380px){.track{min-height:520px}.track h1{font-size:60px}.track dl{grid-template-columns:1fr}.track dl div{display:flex;justify-content:space-between}.wave{top:305px;height:150px}.dialog-actions{flex-direction:column}.dialog-actions button{width:100%}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

$(function(){const dialog=$('#audio-dialog')[0],$dialog=$(dialog),opener=$('#audio-open')[0];let downOutside=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()}};$('#audio-open').on('click',function(){$('#export-result').text('');$('#mix-meter').css('width','0');dialog.showModal();$('#audio-dialog-title').trigger('focus')});$('.icon-close,.cancel').on('click',()=>dialog.close('cancel'));const exportMix=()=>{const input=$('#mix-name')[0];if(!input.checkValidity()){input.reportValidity();input.focus();return}const slug=input.value.trim().toLocaleLowerCase('pl').normalize('NFD').replace(/[\u0300-\u036f]/g,'').replace(/[^a-z0-9]+/g,'-').replace(/^-|-$/g,'')||'mix';const ext=$('#mix-format').val();$('#mix-meter').css('width','100%');$('#export-result').text('Gotowy: '+slug+'.'+ext);$('#audio-state').text('Eksport gotowy do odsłuchu')};$('#audio-form').on('submit',function(event){event.preventDefault();exportMix()});$('#mix-export').on('click',function(event){event.preventDefault();exportMix()});$('#mix-name').on('keydown',function(event){if(event.key==='Enter'&&!event.isComposing){event.preventDefault();exportMix()}});$dialog.on('keydown',trap).on('cancel',function(event){event.preventDefault();dialog.close('cancel')}).on('close',()=>opener.focus()).on('pointerdown',event=>{downOutside=outside(event)}).on('pointerup',event=>{if(downOutside&&outside(event))dialog.close('backdrop');downOutside=false}).on('pointercancel',()=>{downOutside=false})});