|
|
|
| <section class="zt-calc"> |
| <div class="zt-calc__wrap"> |
| <div> |
|
<p class="zt-calc__kicker">RUNTIME CALCULATOR</p>
|
|
<h2>How long will it run your gear?</h2>
|
|
<p class="zt-calc__sub">Slide to your combined load. Typical numbers: cellular router 5–15W, ATA 3–6W, PoE camera 4–8W, switch 5–10W.</p>
|
| </div> |
| <div class="zt-calc__card"> |
|
<label for="ztw">Combined load: <strong id="ztwv">7 W</strong></label>
|
| <input type="range" id="ztw" min="3" max="42" value="7" step="1"> |
|
<div class="zt-calc__res"><span id="zth">8.2</span> hours <small>estimated runtime</small></div>
|
|
<p class="zt-calc__note">64Wh LiFePO4 battery · ~90% DC efficiency</p>
|
| </div> |
| </div> |
| </section> |
| <style> |
| .zt-calc{background:#f5f7f8;padding:56px 0} |
| .zt-calc__wrap{max-width:1080px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center} |
| .zt-calc h2{font-size:clamp(24px,3vw,34px);margin:6px 0 10px;color:#101418} |
| .zt-calc__kicker{color:#4a9c35;font-weight:700;letter-spacing:.1em;font-size:13px} |
| .zt-calc__sub{color:#6b7681} |
| .zt-calc__card{background:#0d1512;color:#fff;border-radius:14px;padding:30px} |
| .zt-calc__card label{font-size:14px;color:#c4d2cb;display:block;margin-bottom:8px} |
| .zt-calc__card input{width:100%;accent-color:#62bb46} |
| .zt-calc__res{font-size:34px;font-weight:800;color:#7ed957;margin-top:14px} |
| .zt-calc__res small{font-size:15px;color:#9fb3a8;font-weight:500} |
| .zt-calc__note{color:#9fb3a8;font-size:13px;margin-top:8px} |
| @media(max-width:860px){.zt-calc__wrap{grid-template-columns:1fr}} |
| </style> |
| <script> |
| (function(){ |
| var r=document.getElementById('ztw'),v=document.getElementById('ztwv'),o=document.getElementById('zth'); |
| function u(){var w=parseFloat(r.value);v.textContent=w+' W';var h=64*0.9/w;o.textContent=h>=10?Math.round(h):h.toFixed(1);} |
| r.addEventListener('input',u);u(); |
| })(); |
| </script> |
