Tabela planów z przełączaniem okresu

<main class="plans"><header><h1>Porównanie planów</h1><p>Przykładowy cennik.</p></header><fieldset><legend>Okres rozliczenia</legend><label><input type="radio" name="period" value="month" checked> Miesięcznie</label><label><input type="radio" name="period" value="year"> Rocznie</label></fieldset><div class="comparison"><div class="feature"><span>Zakres</span><p>Projekty</p><p>Miejsce na pliki</p><p>Współpraca</p></div><section><h2>Solo</h2><strong><span id="price-solo">29</span> zł<small> / mies.</small></strong><p>10 projektów</p><p>5 GB</p><p>1 osoba</p><button data-plan="Solo">Wybierz Solo</button></section><section class="team"><h2>Zespół</h2><strong><span id="price-team">79</span> zł<small> / mies.</small></strong><p>50 projektów</p><p>25 GB</p><p>5 osób</p><button data-plan="Zespół">Wybierz Zespół</button></section></div><p id="plan-status" class="status" aria-live="polite"></p></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Arial,sans-serif;color:var(--ink,#15202b);background:var(--paper,#fff);line-height:1.5}button,input,select{font:inherit}button{cursor:pointer;min-height:44px}button:disabled{cursor:not-allowed;opacity:.55}button,input,select,a{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid var(--focus,#1368ce);outline-offset:4px}button{border-radius:0}h1,h2,p{margin-top:0}svg{display:block;max-width:100%}[hidden]{display:none!important}.status{min-height:24px;font-size:14px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body{--paper:#f8ede1;--ink:#602b34;--focus:#164e77}.plans{max-width:840px;margin:auto;padding:30px}header h1{font-family:Georgia,serif;font-size:42px;margin-bottom:5px}header p{font-size:14px}fieldset{border:0;padding:0;margin:18px 0 22px;display:flex;gap:20px}legend{font-size:12px;margin-bottom:6px}fieldset label{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px}input{accent-color:#602b34;width:18px;height:18px}.comparison{display:grid;grid-template-columns:.7fr 1fr 1fr;border-top:3px solid #602b34}.comparison section{border-left:1px solid #cab6ab;padding:15px 20px 20px}.comparison h2{font-size:20px;margin:0 0 4px}.comparison strong{font-size:36px;font-weight:600;white-space:nowrap}.comparison small{font-size:13px;font-weight:400}.comparison p{font-size:14px;border-bottom:1px solid #cab6ab;padding:8px 0;margin:0}.feature{padding:106px 15px 0 0}.feature span{display:none}.team{background:#edd5b5}.comparison button{width:100%;background:#602b34;color:#fff;border:0;margin-top:16px;padding:8px}.status{font-size:13px;margin:15px 0 0}@media(max-width:500px){.plans{padding:22px}header h1{font-size:35px}.comparison{grid-template-columns:1fr 1fr}.feature{display:none}.comparison section{padding:16px 12px}.comparison section:first-of-type{border-left:0}.comparison strong{font-size:28px}.comparison small{display:block}.comparison p{font-size:13px}}

(()=>{
let period='month';document.querySelectorAll('[name=period]').forEach(input=>input.addEventListener('change',()=>{period=input.value;document.querySelector('#price-solo').textContent=period==='year'?'24':'29';document.querySelector('#price-team').textContent=period==='year'?'65':'79';document.querySelector('#plan-status').textContent=period==='year'?'Płatność roczna: Solo 288 zł, Zespół 780 zł. Przykładowe kwoty.':'Kwoty są przykładowe. Wybór nie składa zamówienia.';}));document.querySelectorAll('[data-plan]').forEach(button=>button.addEventListener('click',()=>{document.querySelector('#plan-status').textContent='Wybrano plan '+button.dataset.plan+' — '+(period==='year'?'rozliczenie roczne':'rozliczenie miesięczne')+'. To tylko demonstracja.';}));
})();