Blueprint CAD — konfiguracja prototypu

<main class="cad-shell"><svg class="cad-grid" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><defs><pattern id="cad-small" width="5" height="5" patternUnits="userSpaceOnUse"><path d="M5 0H0V5" fill="none" stroke="#75cfee" stroke-width=".16"/></pattern><pattern id="cad-large" width="25" height="25" patternUnits="userSpaceOnUse"><rect width="25" height="25" fill="url(#cad-small)"/><path d="M25 0H0V25" fill="none" stroke="#a6e8fa" stroke-width=".3"/></pattern></defs><rect width="100" height="100" fill="url(#cad-large)"/></svg><header class="cad-header"><div><strong>PR-26</strong><span>ARKUSZ KONFIGURACYJNY</span></div><dl><div><dt>Rysunek</dt><dd>A-04</dd></div><div><dt>Wersja</dt><dd>1.7</dd></div><div><dt>Jednostka</dt><dd>mm</dd></div></dl></header><section class="cad-layout"><aside class="cad-preview"><div class="cad-title"><span>Widok izometryczny</span><b>Skala poglądowa</b></div><svg viewBox="0 0 500 390" role="img" aria-label="Techniczny rysunek obudowy prototypu"><g fill="none" stroke="currentColor" stroke-width="3"><path d="m105 140 166-88 135 76-164 92Z"/><path d="m105 140 2 121 135 78V220M406 128l-1 119-163 92"/><path d="m154 166 117-62 85 47-115 64Z" stroke-dasharray="9 7"/><path d="m154 166 1 64 86 50v-65M356 151l-1 63-114 66" stroke-dasharray="9 7"/><path d="M80 140V52M430 128V52M80 72h350M93 62 80 72l13 10M417 62l13 10-13 10"/><path d="M105 286H48M242 363H48M62 286v77M52 299l10-13 10 13M52 350l10 13 10-13"/></g><g fill="currentColor" font-family="monospace" font-size="16"><text x="223" y="62">240</text><text x="35" y="330" transform="rotate(-90 35 330)">120</text><text x="305" y="306">REV 1.7</text></g></svg><output id="cad-live">1:1 / aluminium / konfiguracja robocza</output></aside><form id="cad-form" novalidate><div class="cad-form-title"><h1>Konfiguruj prototyp</h1><span>Tolerancja ±0,2</span></div><div class="field"><label for="cad-project">Nazwa projektu</label><input id="cad-project" name="project" required minlength="2" placeholder="np. Moduł Aster"></div><div class="field"><label for="cad-email">E-mail konstruktora</label><input id="cad-email" name="email" type="email" autocomplete="email" required placeholder="projekt@example.com"></div><div class="field"><label for="cad-scale">Skala modelu</label><select id="cad-scale" name="scale" required><option value="" selected disabled>Wybierz skalę</option><option value="1:1">1:1 — model roboczy</option><option value="1:2">1:2 — model prezentacyjny</option><option value="1:5">1:5 — studium bryły</option></select></div><fieldset><legend>Materiał obudowy</legend><div class="cad-radios"><label><input type="radio" name="material" value="aluminium" required checked><span><b>AL</b> Aluminium</span></label><label><input type="radio" name="material" value="biotworzywo"><span><b>BIO</b> Biotworzywo</span></label><label><input type="radio" name="material" value="sklejka"><span><b>PLY</b> Sklejka</span></label></div></fieldset><div class="cad-actions"><button id="cad-submit" class="primary" type="submit">Zatwierdź rysunek</button><button class="secondary" type="reset">Przywróć</button><button type="button" disabled>Eksport STEP</button></div><p id="cad-status" class="status" role="alert" aria-live="polite"></p></form></section><section id="cad-success" class="cad-success" tabindex="-1" hidden><svg viewBox="0 0 180 120" aria-hidden="true"><path d="M8 61 62 109 171 10" id="cad-check"/></svg><div><span>RYSUNEK ZATWIERDZONY</span><h2 id="cad-project-name">Projekt gotowy.</h2><p id="cad-summary"></p><button id="cad-again" class="secondary" type="button">Nowa konfiguracja</button></div></section></main>

*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;min-width:320px;min-height:100vh;background:#064579;color:#eafaff;font-family:"Lucida Console",Monaco,monospace;line-height:1.45}.cad-shell{position:relative;isolation:isolate;width:min(1180px,100%);min-height:100vh;margin:auto;padding:26px 30px;overflow:hidden}.cad-grid{position:absolute;z-index:-1;inset:0;width:100%;height:100%;opacity:.26}.cad-header{display:flex;justify-content:space-between;align-items:stretch;gap:24px;border:2px solid #a6e8fa;background:#064579}.cad-header>div{display:flex;align-items:center;gap:18px;padding:12px 16px}.cad-header strong{font-size:29px}.cad-header span{font-size:13px}.cad-header dl{display:grid;grid-template-columns:repeat(3,1fr);margin:0}.cad-header dl div{min-width:92px;padding:8px 12px;border-left:2px solid #a6e8fa}.cad-header dt{font-size:10px}.cad-header dd{margin:3px 0 0;font-weight:700}.cad-layout{display:grid;grid-template-columns:1.12fr .88fr;gap:28px;margin-top:28px}.cad-preview,.cad-layout form{border:2px solid #a6e8fa;background:#064579}.cad-preview{position:relative;min-width:0;padding:18px}.cad-title{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dashed #a6e8fa;padding-bottom:9px;font-size:12px}.cad-preview svg{width:100%;max-height:530px;color:#eafaff}.cad-preview output{display:block;border-top:1px dashed #a6e8fa;padding-top:10px;color:#ffe36e;font-size:13px}.cad-layout form{padding:22px}.cad-form-title{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:5px double #a6e8fa;margin-bottom:20px;padding-bottom:14px}.cad-form-title h1{margin:0;font:700 clamp(28px,4vw,43px)/1 Arial,sans-serif;letter-spacing:-.04em}.cad-form-title span{font-size:11px;white-space:nowrap}.field{margin-bottom:17px}label,legend{font-size:13px;font-weight:700}label{display:block;margin-bottom:6px}input,select,button{font:inherit;border-radius:0}input,select{width:100%;min-height:50px;padding:10px 11px;border:1px solid #a6e8fa;background:#073963;color:#fff}input::placeholder{color:#a9d5e5}select{cursor:pointer}fieldset{margin:20px 0;padding:0;border:0}legend{margin-bottom:8px}.cad-radios{display:grid;gap:7px}.cad-radios label{display:flex;align-items:center;min-height:50px;margin:0;padding:6px 9px;border:1px dashed #a6e8fa;cursor:pointer}.cad-radios input{width:21px;height:21px;min-height:0;margin:0 10px 0 0;accent-color:#ffe36e}.cad-radios b{display:inline-block;min-width:42px;color:#ffe36e}.cad-actions{display:flex;flex-wrap:wrap;gap:8px;border-top:1px dashed #a6e8fa;padding-top:18px}button{min-height:48px;padding:10px 14px;border:2px solid #a6e8fa;background:#064579;color:#eafaff;font-weight:700;cursor:pointer}button.primary{background:#eafaff;color:#064579}button:not(:disabled):hover{background:#ffe36e;color:#06355b;border-color:#ffe36e}button.secondary{border-style:dashed}button:disabled{cursor:not-allowed;color:#82a9ba;border-color:#6790a2}.status{min-height:24px;margin:12px 0 0;color:#ffe36e;font-weight:700}.cad-success{display:grid;grid-template-columns:200px 1fr;align-items:center;gap:30px;margin-top:28px;padding:28px;border:3px double #a6e8fa;background:#064579}.cad-success svg{width:180px;overflow:visible}.cad-success path{fill:none;stroke:#ffe36e;stroke-width:13;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:250;stroke-dashoffset:0;animation:cad-draw .65s ease-out}.cad-success span{font-size:12px;color:#ffe36e}.cad-success h2{margin:8px 0;font:700 clamp(33px,5vw,58px)/1 Arial,sans-serif;letter-spacing:-.04em}.cad-success p{margin:0 0 18px}input:focus-visible,select:focus-visible,button:focus-visible,.cad-success:focus-visible{outline:4px solid #ffe36e;outline-offset:4px}[aria-invalid=true]{border:3px solid #ff9f83;background:#123855}[hidden]{display:none!important}@keyframes cad-draw{from{stroke-dashoffset:250}to{stroke-dashoffset:0}}@media(max-width:820px){.cad-layout{grid-template-columns:1fr}.cad-preview svg{max-height:360px}.cad-header{display:block}.cad-header dl{border-top:2px solid #a6e8fa}.cad-header dl div:first-child{border-left:0}}@media(max-width:500px){.cad-shell{padding:12px}.cad-header>div{display:block}.cad-header strong,.cad-header span{display:block}.cad-header dl div{min-width:0;padding:7px;font-size:12px}.cad-layout{gap:14px;margin-top:14px}.cad-preview{padding:12px}.cad-title{display:block}.cad-title b{display:block;margin-top:4px}.cad-layout form{padding:16px}.cad-form-title{display:block}.cad-form-title span{display:block;margin-top:8px}.cad-actions button{width:100%}.cad-success{grid-template-columns:1fr;padding:20px}.cad-success svg{width:130px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

$(function(){const $form=$('#cad-form');const form=$form[0];const $status=$('#cad-status');const $success=$('#cad-success');function selection(){const scale=$('#cad-scale').val()||'bez skali';const material=$form.find('input[name=material]:checked').val()||'bez materiału';$('#cad-live').text(scale+' / '+material+' / konfiguracja robocza')}function clearErrors(){$form.find('[aria-invalid=true]').attr('aria-invalid','false').removeAttr('aria-describedby');$status.text('')}function validate(){clearErrors();const invalid=form.querySelector(':invalid');if(!invalid)return true;$(invalid).attr({'aria-invalid':'true','aria-describedby':'cad-status'}).trigger('focus');$status.text('Brakuje danych oznaczonych na arkuszu.');return false}$form.on('change','select,input[type=radio]',selection);$form.on('submit',function(event){event.preventDefault();if(!validate())return;const project=String($('#cad-project').val()).trim();const scale=$('#cad-scale').val();const material=$form.find('input[name=material]:checked').val();$('#cad-project-name').text(project+' / REV 1.7');$('#cad-summary').text('Skala '+scale+', obudowa: '+material+'. Specyfikacja została zamknięta.');$('.cad-layout').prop('hidden',true);$success.prop('hidden',false).trigger('focus')});$form.on('input change','input,select',function(){$(this).attr('aria-invalid','false').removeAttr('aria-describedby');$status.text('')});$form.on('reset',function(){window.setTimeout(function(){clearErrors();selection()},0)});$('#cad-again').on('click',function(){form.reset();$success.prop('hidden',true);$('.cad-layout').prop('hidden',false);window.setTimeout(function(){$('#cad-project').trigger('focus')},0)});selection();const activate=event=>{event.preventDefault();$form.triggerHandler('submit')};$('#cad-submit').on('click',activate);$form.on('keydown','input:not([type=radio]):not([type=range])',event=>{if(event.key==='Enter')activate(event)})});