Kalibracja na monochromatycznym LCD

<main class='meter' data-state='idle'>
  <header><span>UNIT K-18</span><h1>Kalibracja urządzenia</h1><b aria-hidden='true'>CAL</b></header>
  <div class='meter-grid'>
    <section class='lcd' aria-label='Wyświetlacz kalibratora'>
      <div class='lcd-top'><span>SENSOR</span><i id='lcd-led'></i></div>
      <output id='lcd-reading'>00.0</output>
      <p id='lcd-mode'>TRYB: OCZEKIWANIE</p>
      <div class='ticks' aria-hidden='true'><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
    </section>
    <form id='lcd-form' novalidate>
      <div class='two'>
        <div class='field'><label for='lcd-serial'>Numer urządzenia</label><input id='lcd-serial' name='serial' required minlength='4' autocomplete='off' placeholder='np. MX-204' aria-describedby='lcd-serial-error'><span class='error' id='lcd-serial-error'></span></div>
        <div class='field'><label for='lcd-target'>Wartość docelowa</label><input id='lcd-target' name='target' type='number' required min='1' max='100' inputmode='decimal' value='50' aria-describedby='lcd-target-error'><span class='error' id='lcd-target-error'></span></div>
      </div>
      <div class='field'><label for='lcd-sensor'>Kanał pomiaru</label><select id='lcd-sensor' name='sensor' required aria-describedby='lcd-sensor-error'><option value=''>Wybierz kanał</option><option value='temperature'>Temperatura</option><option value='pressure'>Ciśnienie</option><option value='humidity'>Wilgotność</option></select><span class='error' id='lcd-sensor-error'></span></div>
      <fieldset aria-describedby='lcd-mode-error'><legend>Metoda kalibracji</legend><label><input type='radio' name='lcd-method' value='auto'> Automatyczna</label><label><input id='lcd-manual' type='radio' name='lcd-method' value='manual'> Ręczna</label><label><input type='radio' name='lcd-method' value='reference'> Wzorcowa</label><span class='error' id='lcd-mode-error'></span></fieldset>
      <label class='range' for='lcd-gain'>Wzmocnienie <output id='lcd-gain-value'>4</output><input id='lcd-gain' name='gain' type='range' min='1' max='8' value='4'></label>
      <div class='actions'><button class='primary' id='lcd-run' type='submit'>Uruchom kalibrację</button><button type='reset'>Reset</button><button type='button' disabled>Pomiar trwa</button></div>
      <p class='status' id='lcd-status' role='status' aria-live='polite'>Wprowadź parametry pomiaru.</p>
    </form>
  </div>
</main>

*{box-sizing:border-box}html,body{margin:0;min-width:280px}body{min-height:100vh;padding:clamp(12px,3vw,26px);background:#2b2d25;color:#1e2419;font:16px/1.45 'Courier New',monospace}.meter{width:min(100%,940px);margin:auto;background:#b8a66b;border:3px solid #171a14;box-shadow:9px 9px 0 #11130f}.meter>header{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:18px;padding:14px 20px;border-bottom:3px solid #171a14}.meter header span{font-weight:700}.meter header h1{margin:0;font-size:clamp(24px,4vw,39px);line-height:1;letter-spacing:-.06em}.meter header b{font-size:24px;border:2px solid;padding:3px 7px}.meter-grid{display:grid;grid-template-columns:minmax(255px,.85fr) minmax(0,1.35fr);gap:20px;padding:20px}.lcd{align-self:start;background:#c9d59b;border:8px solid #3b3d31;box-shadow:inset 0 0 0 2px #77805b;padding:18px;color:#26301d;position:relative;overflow:hidden}.lcd::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#26301d12 3px 4px)}.lcd-top{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid;padding-bottom:8px;font-weight:700}.lcd-top i{width:15px;height:15px;background:#5f6847;border:2px solid #26301d}.lcd output{display:block;text-align:right;font-size:clamp(54px,9vw,92px);line-height:1;padding:30px 0 12px;letter-spacing:-.1em;font-weight:700}.lcd p{margin:0;font-weight:700}.ticks{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-top:18px}.ticks i{height:9px;background:#26301d}.ticks i:nth-child(n+6){opacity:.25}form{min-width:0}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{margin-bottom:12px}label,legend{font-weight:700}label{display:block;margin-bottom:5px}input:not([type=radio]):not([type=range]),select{width:100%;min-height:44px;border:2px solid #282b23;border-radius:0;background:#e4d99f;color:#1e2419;padding:8px 10px;font:700 16px 'Courier New',monospace}input::placeholder{color:#4e542f}button,input,select{font:inherit}button{min-height:44px;border:2px solid #1e2419;border-radius:0;background:#d5c47f;color:#1e2419;padding:8px 13px;font-weight:700;cursor:pointer}button.primary{background:#1e2419;color:#d7e2ad}button:disabled{cursor:not-allowed;opacity:.48}button:focus-visible,input:focus-visible,select:focus-visible{outline:4px solid #f2f0ca;outline-offset:2px}fieldset{margin:0 0 12px;padding:8px 11px;border:2px solid #282b23}fieldset label{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin:0 14px 2px 0}input[type=radio]{width:22px;height:22px;accent-color:#26301d}.range{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 12px;margin-bottom:12px}.range input{grid-column:1/-1;width:100%;min-height:44px;accent-color:#26301d}.error{display:block;min-height:17px;font-size:12px;color:#691f16}[aria-invalid=true]{border-color:#8c2619!important}.actions{display:flex;flex-wrap:wrap;gap:8px}.status{min-height:24px;margin:10px 0 0;font-weight:700}.meter[data-state=calibrated] #lcd-led{background:#26301d;animation:lcd-pulse .8s steps(2,end) 2}@keyframes lcd-pulse{50%{opacity:.25}}@media(max-width:660px){body{padding:8px}.meter-grid{grid-template-columns:1fr;padding:14px}.lcd output{padding:14px 0 8px}.two{grid-template-columns:1fr}.meter>header{grid-template-columns:1fr auto}.meter header span{grid-column:1/-1}.actions button{flex:1 1 130px}}@media(max-width:340px){.meter-grid{padding:10px;gap:12px}.meter>header{padding:12px}.meter header b{font-size:18px}.actions{display:grid}.actions button{width:100%}fieldset label{display:flex;margin-right:0}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

(()=>{const form=$('#lcd-form'),meter=$('.meter'),status=$('#lcd-status');const errors={serial:'Podaj co najmniej 4 znaki.',target:'Wpisz wartość od 1 do 100.',sensor:'Wybierz kanał pomiaru.'};function mark(el,message){$(el).attr('aria-invalid','true');$('#'+el.id+'-error').text(message)}function clear(el){$(el).removeAttr('aria-invalid');if(el.id)$('#'+el.id+'-error').text('')}form.on('input change','input,select',function(){clear(this);if(this.name==='lcd-method')$('#lcd-mode-error').text('')});$('#lcd-gain').on('input',function(){$('#lcd-gain-value').text(this.value)});$('#lcd-target').on('input',function(){$('#lcd-reading').text(String(Number(this.value||0).toFixed(1)).padStart(4,'0'))});form.on('submit',function(event){event.preventDefault();form.find('[aria-invalid]').removeAttr('aria-invalid');form.find('.error').text('');let first=null,serial=$('#lcd-serial')[0],target=$('#lcd-target')[0],sensor=$('#lcd-sensor')[0];if(serial.value.trim().length<4){mark(serial,errors.serial);first=first||serial}if(!target.validity.valid){mark(target,errors.target);first=first||target}if(!sensor.value){mark(sensor,errors.sensor);first=first||sensor}const method=form.find('[name=lcd-method]:checked');if(!method.length){$('#lcd-mode-error').text('Wybierz metodę kalibracji.');first=first||form.find('[name=lcd-method]')[0]}if(first){meter.attr('data-state','error');status.text('Kalibracja zatrzymana. Popraw parametry.');first.focus();return}meter.attr('data-state','calibrated');$('#lcd-reading').text(Number(target.value).toFixed(1));$('#lcd-mode').text('TRYB: '+method.parent().text().trim().toUpperCase());status.text('Kalibracja gotowa dla '+serial.value.trim()+'.')});form.on('reset',()=>setTimeout(()=>{form.find('[aria-invalid]').removeAttr('aria-invalid');form.find('.error').text('');meter.attr('data-state','idle');$('#lcd-reading').text('00.0');$('#lcd-mode').text('TRYB: OCZEKIWANIE');$('#lcd-gain-value').text('4');status.text('Przywrócono parametry początkowe.')},0));const activate=event=>{event.preventDefault();form.triggerHandler('submit')};$('#lcd-run').on('click',activate);form.on('keydown','input:not([type=radio]):not([type=range])',event=>{if(event.key==='Enter')activate(event)})})();