Voice Recorder Card

<div class='vr'><b>New Audio</b><small id='vrd'></small><div class='w' id='vrw'></div><div class='f'><span id='vrt'>00:00:00</span><button id='vrb' aria-label='Pause'><i></i><i></i></button></div></div>

.vr{width:190px;margin:auto;padding:16px 16px 14px;background:#161616;border-radius:26px;color:#fff;font-family:Inter,Arial,sans-serif;box-shadow:0 12px 32px rgba(0,0,0,.28)}.vr b{display:block;font-size:14px}.vr small{display:block;margin-top:2px;font-size:11px;color:#8a8a8a}.vr .w{display:flex;align-items:center;gap:3px;height:56px;margin:12px 0}.vr .w i{flex:1;min-width:2px;border-radius:2px;background:#ff3b45;height:20%;transition:height .12s}.vr .f{display:flex;justify-content:space-between;align-items:center}.vr .f span{font:12px ui-monospace,Menlo,monospace;color:#ddd}.vr button{display:flex;gap:4px;align-items:center;justify-content:center;width:38px;height:38px;border:0;border-radius:50%;background:#ff3b45;cursor:pointer;transition:transform .12s}.vr button:active{transform:scale(.92)}.vr button i{width:3.5px;height:13px;border-radius:2px;background:#fff}.vr button.p i{width:0;height:0;border-radius:0;background:none;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.vr button.p i+i{display:none}

const w=document.getElementById('vrw'),t=document.getElementById('vrt'),b=document.getElementById('vrb');document.getElementById('vrd').textContent=new Date().toLocaleDateString(undefined,{day:'numeric',month:'numeric',year:'2-digit'});for(let i=0;i<16;i++)w.appendChild(document.createElement('i'));let run=true,s=0;const bars=[...w.children];setInterval(()=>{if(!run)return;bars.forEach(x=>x.style.height=(12+Math.random()*88)+'%')},140);setInterval(()=>{if(!run)return;s++;const p=n=>String(n).padStart(2,'0');t.textContent=p(Math.floor(s/3600))+':'+p(Math.floor(s%3600/60))+':'+p(s%60)},1000);b.addEventListener('click',()=>{run=!run;b.classList.toggle('p',!run);b.setAttribute('aria-label',run?'Pause':'Record');if(!run)bars.forEach(x=>x.style.height='14%')});