Karta próbki biologicznej

<main class="bio-registry">
  <section class="specimen-panel" aria-labelledby="bio-title">
    <header><span class="series">Archiwum szklarni / 24</span><b id="specimen-code">OR-001</b></header>
    <div class="leaf-sheet" aria-hidden="true">
      <svg viewBox="0 0 320 340"><path class="stem" d="M156 304C151 221 168 143 218 55"/><path class="leaf" d="M165 196C82 193 55 133 66 76c70 3 113 42 99 120Z"/><path class="leaf leaf-small" d="M171 146c14-67 63-89 111-78-7 61-49 93-111 78Z"/><path class="vein" d="M72 84c39 40 63 67 91 108M178 140c38-20 63-43 96-65"/></svg>
      <span class="cell cell-a"></span><span class="cell cell-b"></span><span class="cell cell-c"></span>
    </div>
    <div class="specimen-meta"><span>STREFA</span><strong id="specimen-zone">Oranżeria A</strong><span>WARUNKI</span><strong id="specimen-climate">Wilgotny</strong></div>
  </section>
  <form id="bio-form" novalidate>
    <div class="form-heading"><span>Rejestr żywych okazów</span><h1 id="bio-title">Nowa próbka</h1><p>Oznacz roślinę przed przeniesieniem do kolekcji.</p></div>
    <div class="field-pair">
      <label>Kod próbki<input id="bio-code" name="code" required pattern="[A-Z]{2}-[0-9]{3}" value="OR-001" aria-describedby="code-hint"></label>
      <label>Strefa<select id="bio-zone" name="zone" required><option>Oranżeria A</option><option>Sektor paproci</option><option>Komora nasienna</option></select></label>
    </div>
    <small id="code-hint">Dwie wielkie litery, łącznik i trzy cyfry.</small>
    <label>Krótka obserwacja<input id="bio-note" name="note" required minlength="3" maxlength="64" placeholder="Np. młody liść"></label>
    <fieldset><legend>Warunki stanowiska</legend><label><input type="radio" name="climate" value="Wilgotny" checked><span>Wilgotny</span></label><label><input type="radio" name="climate" value="Suchy"><span>Suchy</span></label><label><input type="radio" name="climate" value="Mgła"><span>Mgła</span></label></fieldset>
    <div class="actions"><button class="primary" type="submit">Wpisz do rejestru</button><button class="secondary" type="reset">Wyczyść</button><button type="button" disabled>Synchronizacja wyłączona</button></div>
    <p id="bio-status" class="status" role="status" aria-live="polite"></p>
  </form>
</main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:22px;background:#d9e2d2;color:#102a22;font:16px/1.45 Arial,sans-serif;display:grid;place-items:center}.bio-registry{width:min(100%,960px);display:grid;grid-template-columns:minmax(290px,.82fr) minmax(390px,1.18fr);border:2px solid #102a22;background:#f1f0df}.specimen-panel{background:#123b2d;color:#f1f0df;padding:22px;display:grid;grid-template-rows:auto 1fr auto;min-height:520px}.specimen-panel header{display:flex;justify-content:space-between;gap:16px;align-items:start;border-bottom:1px solid #aac758;padding-bottom:14px}.series{font-size:12px;max-width:130px}.specimen-panel header b{font:700 27px/1 'Arial Narrow',Arial,sans-serif;letter-spacing:.08em}.leaf-sheet{position:relative;display:grid;place-items:center;overflow:hidden}.leaf-sheet svg{width:min(100%,315px);height:310px}.stem,.vein{fill:none;stroke:#d9e7a0;stroke-width:4}.vein{stroke-width:2}.leaf{fill:#aac758;stroke:#0a271d;stroke-width:3}.leaf-small{fill:#9bb6ee}.cell{position:absolute;width:36px;height:36px;border:1px solid #f1f0df;transform:rotate(45deg)}.cell-a{top:35px;left:10px}.cell-b{right:18px;bottom:68px;width:24px;height:24px}.cell-c{left:38px;bottom:34px;width:15px;height:15px;background:#d77970}.specimen-meta{display:grid;grid-template-columns:auto 1fr;gap:5px 15px;border-top:1px solid #aac758;padding-top:14px}.specimen-meta span{font-size:11px;letter-spacing:.1em}.specimen-meta strong{font-weight:500;text-align:right}form{padding:34px 38px;background:#f1f0df;position:relative}.form-heading{border-left:9px solid #aac758;padding-left:16px;margin-bottom:26px}.form-heading span{font-size:12px;color:#436052}.form-heading h1{margin:2px 0 5px;font:700 clamp(34px,5vw,55px)/.95 'Arial Narrow',Arial,sans-serif;letter-spacing:-.03em}.form-heading p{margin:0;max-width:42ch}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}label{display:block;font-weight:700;font-size:13px}input,select,button{font:inherit}input:not([type=radio]),select{display:block;width:100%;min-height:46px;margin-top:6px;padding:9px 11px;border:1px solid #466458;border-bottom-width:3px;border-radius:0;background:#fffef3;color:#102a22}small{display:block;margin:5px 0 16px;color:#4c6359}fieldset{border:0;border-top:1px solid #8da093;margin:19px 0 20px;padding:15px 0 0}legend{padding-right:12px;font-weight:700}fieldset label{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-right:18px;font-weight:500}input[type=radio]{width:21px;height:21px;accent-color:#123b2d}.actions{display:flex;flex-wrap:wrap;gap:8px}.actions button{min-height:44px;padding:9px 14px;border:2px solid #123b2d;border-radius:0;background:#f1f0df;color:#123b2d;font-weight:700;cursor:pointer}.actions .primary{background:#123b2d;color:#fff}.actions button:disabled{border-color:#9aa79f;color:#75837b;cursor:not-allowed}.status{min-height:25px;margin:14px 0 0;font-weight:700;color:#315a1f}.is-saved .leaf{fill:#d77970}button:hover:not(:disabled){background:#aac758;color:#102a22}input:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid #d24f45;outline-offset:3px}@media(max-width:700px){body{padding:12px}.bio-registry{grid-template-columns:1fr}.specimen-panel{min-height:330px}.leaf-sheet{height:180px}.leaf-sheet svg{height:200px}.specimen-meta{display:none}form{padding:26px 22px}}@media(max-width:380px){body{padding:0}.bio-registry{border-left:0;border-right:0}.specimen-panel{padding:17px}.field-pair{grid-template-columns:1fr}form{padding:23px 17px}.actions button{width:100%}fieldset label{margin-right:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

$(()=>{const $form=$('#bio-form'),$panel=$('.specimen-panel'),$status=$('#bio-status');function sync(){const code=$('#bio-code').val().trim()||'—';$('#specimen-code').text(code);$('#specimen-zone').text($('#bio-zone').val());$('#specimen-climate').text($('input[name="climate"]:checked').val()||'—');$panel.removeClass('is-saved');}$form.on('input change',sync);$form.on('submit',function(event){event.preventDefault();if(!this.checkValidity()){$status.text('Uzupełnij kod i obserwację.');this.reportValidity();return;}$panel.addClass('is-saved');$status.text('Próbka '+$('#bio-code').val().trim()+' została wpisana do rejestru.');});$form.on('reset',()=>setTimeout(()=>{$status.text('Formularz jest pusty.');sync();},0));sync();;const activate=event=>{event.preventDefault();$form.triggerHandler('submit')};$form.find('.primary').on('click',activate);$form.on('keydown','input:not([type=radio]):not([type=range])',event=>{if(event.key==='Enter')activate(event)})});