Opt-in and preferences

<div class="consent"><div class="switches"><button id="email">EMAIL <i></i></button><button id="push">PUSH <i></i></button></div><div class="routes"><span id="eroute">EMAIL OPEN</span><span id="proute">PUSH CLOSED</span></div></div>

.consent{width:min(88%,520px);font:900 clamp(10px,max(1.7vmin,1vw),15px)/1.1 sans-serif}.switches{display:flex;gap:clamp(7px,2vmin,16px)}.switches button{flex:1;display:flex;align-items:center;justify-content:space-between;gap:4px;padding:clamp(10px,2.5vmin,19px);border:2px solid var(--fg);background:var(--surface);color:var(--fg);font:inherit;cursor:pointer}.switches i{display:block;width:clamp(26px,6vmin,46px);height:clamp(15px,3vmin,25px);border-radius:20px;background:var(--line);position:relative}.switches i:after{content:'';position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);border-radius:50%;background:var(--bg);transition:.3s}.switches button.on i{background:var(--accent)}.switches button.on i:after{left:50%}.routes{display:flex;gap:clamp(7px,2vmin,16px);margin-top:clamp(14px,4vmin,32px)}.routes span{flex:1;border:2px dashed var(--line);padding:clamp(9px,2vmin,17px);text-align:center;color:var(--muted)}.routes span.open{border:2px solid var(--accent);color:var(--accent)}

let email=true,push=false;function show(){document.querySelector('#email').classList.toggle('on',email);document.querySelector('#push').classList.toggle('on',push);document.querySelector('#eroute').textContent='EMAIL '+(email?'OPEN':'CLOSED');document.querySelector('#proute').textContent='PUSH '+(push?'OPEN':'CLOSED');document.querySelector('#eroute').classList.toggle('open',email);document.querySelector('#proute').classList.toggle('open',push)}document.querySelector('#email').addEventListener('click',()=>{clearInterval(timer);email=!email;show()});document.querySelector('#push').addEventListener('click',()=>{clearInterval(timer);push=!push;show()});show();const timer=setInterval(()=>{email=!email;push=!push;show()},2300);