Elements

<div class='fc' style='--c:#14b8a6'><span class='ic'>ᛒ</span><div class='rg'></div><b>On</b><div class='bl'><i class='e l'></i><i class='e r'></i><u></u></div></div>

<style>
.fc{position:relative;width:200px;height:200px;margin:auto;background:#000;border-radius:30px;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.3)}.fc .ic{position:absolute;right:16px;top:12px;font-size:14px;color:var(--c)}.fc .rg{position:absolute;left:50%;top:26px;width:112px;height:112px;margin-left:-56px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:50%;animation:pu 3s ease-in-out infinite}.fc b{position:absolute;left:0;right:0;top:66px;text-align:center;font-size:17px;font-weight:600}.bl{position:absolute;left:50%;bottom:-62px;width:150px;height:150px;margin-left:-75px;border-radius:50%;background:var(--c);animation:fl 4s ease-in-out infinite}.e{position:absolute;top:34px;width:6px;height:6px;border-radius:50%;background:#fff;animation:bk 4s infinite}.e.l{left:56px}.e.r{right:56px}.bl u{position:absolute;left:50%;top:44px;width:20px;height:9px;margin-left:-10px;border-bottom:2.500px solid #fff;border-radius:0 0 20px 20px}@keyframes pu{50%{transform:scale(1.06);opacity:.6}}@keyframes fl{50%{transform:translateY(-6px)}}@keyframes bk{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}@media(prefers-reduced-motion:reduce){.fc *{animation:none!important}}
</style>

<div class='bt'><svg class='ic' width='18' height='10' viewBox='0 0 20 10' fill='none' stroke='#a3e635' stroke-width='1.2'><rect x='.6' y='.6' width='16' height='8.800' rx='2'/><rect x='2.200' y='2.200' width='8' height='5.600' fill='#a3e635' stroke='none'/><path d='M18.500 3.500v3'/></svg><svg class='rg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='44' fill='none' stroke='#2a2f1c' stroke-width='3'/><circle cx='50' cy='50' r='44' fill='none' stroke='#a3e635' stroke-width='3' stroke-linecap='round' stroke-dasharray='268 277' transform='rotate(-90 50 50)'/></svg><div class='n'><b>97</b><span>%</span></div><small>Charged</small><div class='bl'><i class='e l'></i><i class='e r'></i><u></u></div></div>

<style>
.bt{position:relative;width:200px;height:200px;margin:auto;background:#000;border-radius:30px;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.3)}.ic{position:absolute;right:14px;top:14px}.rg{position:absolute;left:50%;top:22px;width:130px;height:130px;margin-left:-65px}.n{position:absolute;left:0;right:0;top:64px;text-align:center}.n b{font-size:28px;font-weight:500}.n span{font-size:14px;color:#aaa}.bt small{position:absolute;left:0;right:0;top:100px;text-align:center;font-size:10px;color:#777}.bl{position:absolute;left:50%;bottom:-70px;width:150px;height:150px;margin-left:-75px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c2f542,#a3e635 60%,#84cc16)}.e{position:absolute;top:36px;width:6px;height:6px;border-radius:50%;background:#111;animation:bk 4s infinite}.e.l{left:58px}.e.r{right:58px}.bl u{position:absolute;left:50%;top:46px;width:22px;height:10px;margin-left:-11px;border-bottom:2.5px solid #111;border-radius:0 0 22px 22px}@keyframes bk{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
</style>

<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>

<style>
.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}
</style>

<script>
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%')});
</script>

<div class='ck'><small>CLOCK</small><svg id='cks' viewBox='0 0 100 100'></svg><div class='t' id='ckt'></div></div>

<style>
.ck{width:170px;margin:auto;padding:16px 14px 14px;background:#fff;border-radius:28px;box-shadow:0 10px 30px rgba(0,0,0,.1);text-align:center;font-family:Inter,Arial,sans-serif}.ck small{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;color:#9a9a9a}.ck svg{display:block;width:110px;height:110px;margin:10px auto 8px}.ck .t{font:11px ui-monospace,Menlo,monospace;letter-spacing:.06em;color:#444}
</style>

<script>
const S='http://www.w3.org/2000/svg';const sv=document.getElementById('cks');let g='<circle cx="50" cy="50" r="47" fill="#fff" stroke="#eee"/>';for(let i=0;i<60;i++){const a=i*6*Math.PI/180,m=i%5===0,r1=m?40:43,r2=46;g+='<line x1="'+(50+Math.sin(a)*r1)+'" y1="'+(50-Math.cos(a)*r1)+'" x2="'+(50+Math.sin(a)*r2)+'" y2="'+(50-Math.cos(a)*r2)+'" stroke="'+(m?'#bbb':'#e6e6e6')+'" stroke-width="'+(m?1.2:.6)+'"/>'}const R=['XII','I','II','III','IIII','V','VI','VII','VIII','IX','X','XI'];for(let n=0;n<12;n++){const a=n*30*Math.PI/180;g+='<text x="'+(50+Math.sin(a)*33)+'" y="'+(50-Math.cos(a)*33+1.6)+'" text-anchor="middle" font-size="4.6" font-family="Georgia,serif" fill="#555">'+R[n]+'</text>'}g+='<line id="h" x1="50" y1="50" x2="50" y2="26" stroke="#111" stroke-width="3" stroke-linecap="round"/><line id="m" x1="50" y1="50" x2="50" y2="15" stroke="#111" stroke-width="2" stroke-linecap="round"/><line id="s" x1="50" y1="58" x2="50" y2="13" stroke="#ef4444" stroke-width=".9" stroke-linecap="round"/><circle cx="50" cy="50" r="2.4" fill="#111"/>';sv.innerHTML=g;const H=sv.querySelector('#h'),M=sv.querySelector('#m'),Sx=sv.querySelector('#s'),T=document.getElementById('ckt');const tick=()=>{const d=new Date(),s=d.getSeconds()+d.getMilliseconds()/1000,m=d.getMinutes()+s/60,h=d.getHours()%12+m/60;H.setAttribute('transform','rotate('+h*30+' 50 50)');M.setAttribute('transform','rotate('+m*6+' 50 50)');Sx.setAttribute('transform','rotate('+s*6+' 50 50)');T.textContent=d.toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'}).toUpperCase();requestAnimationFrame(tick)};tick();
</script>

<div class='ck'><small>CLOCK</small><svg id='cks' viewBox='0 0 100 100'></svg><div class='t' id='ckt'></div></div>

<style>
.ck{width:170px;margin:auto;padding:16px 14px 14px;background:#fff;border-radius:28px;box-shadow:0 10px 30px rgba(0,0,0,.1);text-align:center;font-family:Inter,Arial,sans-serif}.ck small{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;color:#9a9a9a}.ck svg{display:block;width:110px;height:110px;margin:10px auto 8px}.ck .t{font:11px ui-monospace,Menlo,monospace;letter-spacing:.06em;color:#444}
</style>

<script>
const S='http://www.w3.org/2000/svg';const sv=document.getElementById('cks');let g='<circle cx="50" cy="50" r="47" fill="#fff" stroke="#eee"/>';for(let i=0;i<60;i++){const a=i*6*Math.PI/180,m=i%5===0,r1=m?40:43,r2=46;g+='<line x1="'+(50+Math.sin(a)*r1)+'" y1="'+(50-Math.cos(a)*r1)+'" x2="'+(50+Math.sin(a)*r2)+'" y2="'+(50-Math.cos(a)*r2)+'" stroke="'+(m?'#bbb':'#e6e6e6')+'" stroke-width="'+(m?1.2:.6)+'"/>'}for(const n of [12,3,6,9]){const a=n*30*Math.PI/180;g+='<text x="'+(50+Math.sin(a)*33)+'" y="'+(50-Math.cos(a)*33+2.5)+'" text-anchor="middle" font-size="7" font-family="ui-monospace,monospace" fill="#444">'+n+'</text>'}g+='<line id="h" x1="50" y1="50" x2="50" y2="26" stroke="#111" stroke-width="3" stroke-linecap="round"/><line id="m" x1="50" y1="50" x2="50" y2="15" stroke="#111" stroke-width="2" stroke-linecap="round"/><line id="s" x1="50" y1="58" x2="50" y2="13" stroke="#ef4444" stroke-width=".9" stroke-linecap="round"/><circle cx="50" cy="50" r="2.4" fill="#111"/>';sv.innerHTML=g;const H=sv.querySelector('#h'),M=sv.querySelector('#m'),Sx=sv.querySelector('#s'),T=document.getElementById('ckt');const tick=()=>{const d=new Date(),s=d.getSeconds()+d.getMilliseconds()/1000,m=d.getMinutes()+s/60,h=d.getHours()%12+m/60;H.setAttribute('transform','rotate('+h*30+' 50 50)');M.setAttribute('transform','rotate('+m*6+' 50 50)');Sx.setAttribute('transform','rotate('+s*6+' 50 50)');T.textContent=d.toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'}).toUpperCase();requestAnimationFrame(tick)};tick();
</script>

<div class='ck'><small>CLOCK</small><svg id='cks' viewBox='0 0 100 100'></svg><div class='t' id='ckt'></div></div>

<style>
.ck{width:170px;margin:auto;padding:16px 14px 14px;background:#fff;border-radius:28px;box-shadow:0 10px 30px rgba(0,0,0,.1);text-align:center;font-family:Inter,Arial,sans-serif}.ck small{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;color:#9a9a9a}.ck svg{display:block;width:110px;height:110px;margin:10px auto 8px}.ck .t{font:11px ui-monospace,Menlo,monospace;letter-spacing:.06em;color:#444}
</style>

<script>
const S='http://www.w3.org/2000/svg';const sv=document.getElementById('cks');let g='<circle cx="50" cy="50" r="47" fill="#fff" stroke="#eee"/>';for(let i=0;i<60;i++){const a=i*6*Math.PI/180,m=i%5===0,r1=m?40:43,r2=46;g+='<line x1="'+(50+Math.sin(a)*r1)+'" y1="'+(50-Math.cos(a)*r1)+'" x2="'+(50+Math.sin(a)*r2)+'" y2="'+(50-Math.cos(a)*r2)+'" stroke="'+(m?'#bbb':'#e6e6e6')+'" stroke-width="'+(m?1.2:.6)+'"/>'}g+='<line id="h" x1="50" y1="50" x2="50" y2="26" stroke="#111" stroke-width="3" stroke-linecap="round"/><line id="m" x1="50" y1="50" x2="50" y2="15" stroke="#111" stroke-width="2" stroke-linecap="round"/><line id="s" x1="50" y1="58" x2="50" y2="13" stroke="#ef4444" stroke-width=".9" stroke-linecap="round"/><circle cx="50" cy="50" r="2.4" fill="#111"/>';sv.innerHTML=g;const H=sv.querySelector('#h'),M=sv.querySelector('#m'),Sx=sv.querySelector('#s'),T=document.getElementById('ckt');const tick=()=>{const d=new Date(),s=d.getSeconds()+d.getMilliseconds()/1000,m=d.getMinutes()+s/60,h=d.getHours()%12+m/60;H.setAttribute('transform','rotate('+h*30+' 50 50)');M.setAttribute('transform','rotate('+m*6+' 50 50)');Sx.setAttribute('transform','rotate('+s*6+' 50 50)');T.textContent=d.toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'}).toUpperCase();requestAnimationFrame(tick)};tick();
</script>

<div class='bk'><div class='bk-t'><span class='bk-i'><svg width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='#fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15.5' rx='2.5'/><path d='M3.5 10h17M8 3v4M16 3v4'/></svg></span><div><b>Book a slot</b><small>30 min · Video call</small></div></div><div class='bk-m'><b id='bkm'></b><span><button id='bkp' aria-label='Previous week'>‹</button><button id='bkn' aria-label='Next week'>›</button></span></div><div class='bk-d' id='bkd'></div><p id='bkl'></p><div class='bk-s' id='bks'></div></div>

<style>
.bk{width:min(330px,94%);margin:auto;background:#fff;border-radius:20px;box-shadow:0 4px 24px rgba(0,0,0,.08);font-family:Inter,Arial,sans-serif;color:#111;overflow:hidden}.bk-t{display:flex;gap:12px;align-items:center;padding:16px 20px;border-bottom:1px solid #f0f0f0}.bk-i{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#6366f1,#8b5cf6)}.bk-t b{display:block;font-size:15px;font-weight:600}.bk-t small{display:block;font-size:12.5px;color:#737373}.bk-m{display:flex;justify-content:space-between;align-items:center;padding:14px 20px 8px}.bk-m b{font-size:14.5px;font-weight:600}.bk-m button{width:26px;height:26px;border:0;border-radius:8px;background:none;font-size:20px;line-height:1;color:#555;cursor:pointer}.bk-m button:hover{background:#f4f4f4}.bk-d{display:grid;grid-template-columns:repeat(7,1fr);padding:0 14px;text-align:center}.bk-d button{display:flex;flex-direction:column;align-items:center;gap:5px;border:0;background:none;padding:0;cursor:pointer;font-family:inherit}.bk-d small{font-size:10.5px;font-weight:600;color:#9a9a9a}.bk-d span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:14px}.bk-d button:hover span{background:#f1f1f1}.bk-d button.on span{background:#111;color:#fff;font-weight:700}.bk p{margin:14px 20px 8px;font-size:12.5px;color:#737373}.bk-s{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 20px 20px}.bk-s button{height:38px;border:0;border-radius:10px;background:#f6f6f6;font:inherit;font-size:13.5px;color:#222;cursor:pointer;transition:background .15s,color .15s}.bk-s button:hover:not(:disabled){background:#ececec}.bk-s button.on{background:#111;color:#fff}.bk-s button:disabled{color:#c0c0c0;text-decoration:line-through;cursor:default}
</style>

<script>
const now=new Date();let sel=new Date(now.getFullYear(),now.getMonth(),now.getDate()),st=new Date(sel);st.setDate(st.getDate()-st.getDay());let slot=null;const L='SMTWTFS',T=['9:00 AM','9:30 AM','10:00 AM','10:30 AM','11:00 AM','2:00 PM','2:30 PM','3:00 PM'];const taken=d=>[3,6].map(i=>(i+d.getDate())%8);const dd=document.getElementById('bkd'),ss=document.getElementById('bks');const draw=()=>{let h='';for(let i=0;i<7;i++){const x=new Date(st);x.setDate(st.getDate()+i);h+='<button class="'+(x.getTime()===sel.getTime()?'on':'')+'" data-t='+x.getTime()+'><small>'+L[i]+'</small><span>'+x.getDate()+'</span></button>'}dd.innerHTML=h;document.getElementById('bkm').textContent=sel.toLocaleDateString(undefined,{month:'long',year:'numeric'});document.getElementById('bkl').textContent=sel.toLocaleDateString(undefined,{weekday:'long',month:'short',day:'numeric'});const tk=taken(sel);ss.innerHTML=T.map((t,i)=>'<button '+(tk.includes(i)?'disabled':'')+' class="'+(slot===t?'on':'')+'">'+t+'</button>').join('')};dd.addEventListener('click',e=>{const b=e.target.closest('button');if(b){sel=new Date(+b.dataset.t);slot=null;draw()}});ss.addEventListener('click',e=>{const b=e.target.closest('button');if(b&&!b.disabled){slot=b.textContent;draw()}});document.getElementById('bkp').onclick=()=>{st.setDate(st.getDate()-7);draw()};document.getElementById('bkn').onclick=()=>{st.setDate(st.getDate()+7);draw()};draw();
</script>

<div class='ws'><div class='ws-h'><b id='wst'></b><span><button id='wsp' aria-label='Previous week'>‹</button><button id='wsn' aria-label='Next week'>›</button></span></div><p id='wsr'></p><div class='ws-d' id='wsd'></div></div>

<style>
.ws{width:290px;margin:auto;padding:16px 18px 18px;background:#fff;border-radius:20px;box-shadow:0 4px 24px rgba(0,0,0,.08);font-family:Inter,Arial,sans-serif;color:#111}.ws-h{display:flex;justify-content:space-between;align-items:center}.ws-h b{font-size:16px;font-weight:700}.ws-h button{width:28px;height:28px;border:0;border-radius:8px;background:none;font-size:22px;line-height:1;color:#555;cursor:pointer}.ws-h button:hover{background:#f4f4f4}.ws p{margin:6px 0 14px;font-size:13px;color:#737373}.ws-d{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:2px}.ws-d button{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;padding:0;cursor:pointer;font-family:inherit}.ws-d small{font-size:11px;font-weight:600;color:#9a9a9a}.ws-d span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:15px;color:#222;transition:background .15s}.ws-d button:hover span{background:#f1f1f1}.ws-d button.on span{background:#111;color:#fff;font-weight:700}.ws-d button.on small{color:#111}
</style>

<script>
const now=new Date();let sel=new Date(now.getFullYear(),now.getMonth(),now.getDate()),st=new Date(sel);st.setDate(st.getDate()-st.getDay());const d=document.getElementById('wsd');const L='SMTWTFS';const f=x=>x.toLocaleDateString(undefined,{month:'short',day:'numeric'});const draw=()=>{let h='';for(let i=0;i<7;i++){const x=new Date(st);x.setDate(st.getDate()+i);h+='<button class="'+(x.getTime()===sel.getTime()?'on':'')+'" data-t='+x.getTime()+'><small>'+L[i]+'</small><span>'+x.getDate()+'</span></button>'}d.innerHTML=h;const e=new Date(st);e.setDate(st.getDate()+6);document.getElementById('wst').textContent=sel.toLocaleDateString(undefined,{month:'long',year:'numeric'});document.getElementById('wsr').textContent=f(st)+' – '+f(e)};d.addEventListener('click',e=>{const b=e.target.closest('button');if(b){sel=new Date(+b.dataset.t);draw()}});document.getElementById('wsp').onclick=()=>{st.setDate(st.getDate()-7);draw()};document.getElementById('wsn').onclick=()=>{st.setDate(st.getDate()+7);draw()};draw();
</script>

<div class='rp'><div class='rp-h'><button id='rpp' aria-label='Previous month'>‹</button><b id='rpt'></b><button id='rpn' aria-label='Next month'>›</button></div><p id='rps'>Select a date range</p><div class='rp-w'><span>S</span><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span></div><div class='rp-g' id='rpg'></div></div>

<style>
.rp{width:310px;margin:auto;padding:16px 18px 18px;background:#fff;border-radius:20px;box-shadow:0 4px 24px rgba(0,0,0,.08);font-family:Inter,Arial,sans-serif;color:#111}.rp-h{display:flex;justify-content:space-between;align-items:center}.rp-h b{font-size:15px;font-weight:600}.rp-h button{width:28px;height:28px;border:0;border-radius:8px;background:none;font-size:22px;line-height:1;color:#555;cursor:pointer}.rp-h button:hover{background:#f4f4f4}.rp p{margin:12px 0 10px;font-size:13px;color:#737373}.rp-w,.rp-g{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.rp-w span{font-size:11px;font-weight:600;color:#9a9a9a;padding-bottom:8px}.rp-g button{height:38px;border:0;background:none;font:inherit;font-size:15px;color:#222;cursor:pointer;border-radius:0}.rp-g button.in{background:#f0f0f0}.rp-g button.s{background:#111;color:#fff;border-radius:19px 0 0 19px}.rp-g button.e{background:#111;color:#fff;border-radius:0 19px 19px 0}.rp-g button.s.e{border-radius:19px}.rp-g button:hover:not(.s):not(.e):not(.in){border-radius:19px;background:#f4f4f4}
</style>

<script>
const now=new Date();let y=now.getFullYear(),m=now.getMonth(),a=null,b=null,hv=null;const g=document.getElementById('rpg'),t=document.getElementById('rpt'),s=document.getElementById('rps');const key=d=>new Date(y,m,d).getTime();const fm=x=>new Date(x).toLocaleDateString(undefined,{month:'short',day:'numeric'});const draw=()=>{t.textContent=new Date(y,m,1).toLocaleDateString(undefined,{month:'long',year:'numeric'});const f=new Date(y,m,1).getDay(),n=new Date(y,m+1,0).getDate();let h='';for(let i=0;i<f;i++)h+='<i></i>';for(let d=1;d<=n;d++){const k=key(d);const end=b||(a&&hv&&hv>a?hv:null);let c='';if(a&&k===a)c+=' s';if(end&&k===end)c+=' e';if(a&&end&&k>a&&k<end)c+=' in';if(a&&!end&&k===a)c+=' e';h+='<button class="'+c+'" data-d='+d+'>'+d+'</button>'}g.innerHTML=h;s.textContent=a&&b?fm(a)+' – '+fm(b):a?'Pick an end date':'Select a date range'};g.addEventListener('click',e=>{const x=e.target.closest('button');if(!x)return;const k=key(+x.dataset.d);if(!a||b){a=k;b=null}else if(k<a){a=k}else{b=k}draw()});g.addEventListener('mouseover',e=>{const x=e.target.closest('button');if(x&&a&&!b){hv=key(+x.dataset.d);draw()}});document.getElementById('rpp').onclick=()=>{m--;if(m<0){m=11;y--}draw()};document.getElementById('rpn').onclick=()=>{m++;if(m>11){m=0;y++}draw()};draw();
</script>

<div class='mc'><div class='mc-h'><button id='mcp' aria-label='Previous month'>‹</button><b id='mct'></b><button id='mcn' aria-label='Next month'>›</button></div><div class='mc-w'><span>S</span><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span></div><div class='mc-g' id='mcg'></div></div>

<style>
.mc{width:290px;margin:auto;padding:16px 18px 18px;background:#fff;border-radius:20px;box-shadow:0 4px 24px rgba(0,0,0,.08);font-family:Inter,Arial,sans-serif;color:#111}.mc-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.mc-h b{font-size:15px;font-weight:600}.mc-h button{width:28px;height:28px;border:0;border-radius:8px;background:none;font-size:22px;line-height:1;color:#555;cursor:pointer}.mc-h button:hover{background:#f4f4f4}.mc-w,.mc-g{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.mc-w span{font-size:11px;font-weight:600;color:#9a9a9a;padding-bottom:8px}.mc-g button{height:38px;margin:1px auto;width:38px;border:0;border-radius:50%;background:none;font:inherit;font-size:15px;color:#222;cursor:pointer;transition:background .15s}.mc-g button:hover{background:#f1f1f1}.mc-g button.on{background:#111;color:#fff;font-weight:700}
</style>

<script>
const now=new Date();let y=now.getFullYear(),m=now.getMonth(),sel=now.getDate(),sm=m,sy=y;const g=document.getElementById('mcg'),t=document.getElementById('mct');const draw=()=>{t.textContent=new Date(y,m,1).toLocaleDateString(undefined,{month:'long',year:'numeric'});const f=new Date(y,m,1).getDay(),n=new Date(y,m+1,0).getDate();let h='';for(let i=0;i<f;i++)h+='<i></i>';for(let d=1;d<=n;d++)h+='<button class="'+(d===sel&&m===sm&&y===sy?'on':'')+'" data-d='+d+'>'+d+'</button>';g.innerHTML=h};g.addEventListener('click',e=>{const b=e.target.closest('button');if(b){sel=+b.dataset.d;sm=m;sy=y;draw()}});document.getElementById('mcp').onclick=()=>{m--;if(m<0){m=11;y--}draw()};document.getElementById('mcn').onclick=()=>{m++;if(m>11){m=0;y++}draw()};draw();
</script>

<form class='su' id='suf'><label for='su1'>Full name</label><input id='su1' placeholder='Jane Cooper' required><label for='su2'>Email</label><input id='su2' type='email' placeholder='you@company.com' required><label for='su3'>Password</label><input id='su3' type='password' placeholder='Min. 8 characters' minlength='8' required><label for='su4'>Confirm password</label><input id='su4' type='password' placeholder='Re-enter password' required><label class='su-c'><input type='checkbox' id='suk'><span></span>I agree to the <a href='#'>Terms</a> and <a href='#'>Privacy Policy</a></label><button type='submit' id='sub' disabled>Create account</button></form>

<style>
.su{width:min(340px,92%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.su label{display:block;margin-bottom:7px;font-size:13.5px;font-weight:500}.su input:not([type=checkbox]){width:100%;box-sizing:border-box;height:40px;padding:0 14px;margin-bottom:14px;font:inherit;font-size:13.5px;background:#fff;border:1px solid #ececec;border-radius:10px;outline:0;transition:border-color .15s,box-shadow .15s}.su input:not([type=checkbox]):focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.su input.bad{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.12)!important}.su input::placeholder{color:#a3a3a3}.su-c{display:flex!important;align-items:center;gap:10px;margin:4px 0 16px!important;font-weight:400!important;font-size:13px!important;cursor:pointer}.su-c input{position:absolute;opacity:0}.su-c span{flex:none;width:16px;height:16px;border:1.5px solid #bdbdbd;border-radius:4px;display:grid;place-items:center;transition:all .15s}.su-c input:checked+span{background:#111;border-color:#111}.su-c input:checked+span:after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}.su-c a{color:#111;text-decoration:underline;text-underline-offset:3px;font-weight:500}.su button{width:100%;height:42px;border:0;border-radius:10px;background:#0a0a0a;color:#fff;font:600 14px Inter,Arial,sans-serif;cursor:pointer;transition:opacity .15s}.su button:disabled{opacity:.35;cursor:not-allowed}
</style>

<script>
const p=document.getElementById('su3'),q=document.getElementById('su4'),k=document.getElementById('suk'),b=document.getElementById('sub');const chk=()=>{q.classList.toggle('bad',q.value.length>0&&q.value!==p.value);b.disabled=!k.checked||p.value!==q.value||!p.value};[p,q,k].forEach(x=>x.addEventListener('input',chk));k.addEventListener('change',chk);document.getElementById('suf').addEventListener('submit',e=>{e.preventDefault();b.textContent='Account created ✓'});document.querySelectorAll('.su a').forEach(a=>a.addEventListener('click',e=>e.preventDefault()));
</script>

<form class='nl' id='nlf'><h3>Stay in the loop</h3><p>Weekly updates on new components and releases. No spam.</p><div class='nl-r'><input type='email' placeholder='Enter your email' required aria-label='Email'><button type='submit'><span>Subscribe</span><svg width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg></button></div><small>Unsubscribe anytime. We never share your email.</small></form>

<style>
.nl{width:min(380px,92%);margin:auto;padding:26px;background:#fff;border-radius:18px;box-shadow:0 1px 3px rgba(0,0,0,.06);font-family:Inter,Arial,sans-serif;color:#111}.nl h3{margin:0 0 10px;font-size:24px;font-weight:700;letter-spacing:-.015em}.nl p{margin:0 0 22px;font-size:14px;line-height:1.7;color:#737373}.nl-r{display:flex;gap:8px}.nl input{flex:1;min-width:0;height:42px;padding:0 14px;font:inherit;font-size:13.5px;background:#fff;border:1px solid #efefef;border-radius:10px;outline:0;transition:border-color .15s,box-shadow .15s}.nl input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.nl input::placeholder{color:#a3a3a3}.nl button{display:flex;align-items:center;gap:7px;padding:0 18px;height:42px;border:0;border-radius:10px;background:#0a0a0a;color:#fff;font:600 14px Inter,Arial,sans-serif;cursor:pointer;white-space:nowrap}.nl small{display:block;margin-top:12px;font-size:12px;color:#8a8a8a}
</style>

<script>
const f=document.getElementById('nlf'),b=f.querySelector('button span');f.addEventListener('submit',e=>{e.preventDefault();b.textContent='Subscribed ✓';setTimeout(()=>{b.textContent='Subscribe';f.reset()},2200)});
</script>

<form class='lg' id='lgf'><h3>Welcome back</h3><p class='lg-s'>Sign in to continue to your account.</p><label for='lg1'>Email</label><input id='lg1' type='email' placeholder='you@company.com' required><div class='lg-h'><label for='lg2'>Password</label><a href='#'>Forgot password?</a></div><div class='lg-w'><input id='lg2' type='password' placeholder='Enter your password' required><button type='button' id='lge' aria-label='Show password'><svg width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/></svg></button></div><label class='lg-c'><input type='checkbox'><span></span>Remember me for 30 days</label><button type='submit' class='lg-go'>Sign in <svg width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg></button><p class='lg-f'>Don't have an account? <a href='#'>Create one</a></p></form>

<style>
.lg{width:min(340px,92%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.lg h3{margin:0 0 8px;font-size:24px;font-weight:700;letter-spacing:-.01em}.lg-s{margin:0 0 20px;font-size:13.5px;color:#737373}.lg label{display:block;margin-bottom:8px;font-size:13.5px;font-weight:500}.lg input:not([type=checkbox]){width:100%;box-sizing:border-box;height:40px;padding:0 14px;font:inherit;font-size:13.5px;background:#fff;border:1px solid #ececec;border-radius:10px;outline:0;margin-bottom:16px;transition:border-color .15s,box-shadow .15s}.lg input:not([type=checkbox]):focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.lg input::placeholder{color:#a3a3a3}.lg-h{display:flex;justify-content:space-between;align-items:baseline}.lg-h a{font-size:12.5px;color:#111;text-decoration:underline;text-underline-offset:3px}.lg-w{position:relative}.lg-w input{padding-right:42px!important}.lg-w button{position:absolute;right:6px;top:5px;width:30px;height:30px;display:grid;place-items:center;border:0;background:none;color:#8a8a8a;cursor:pointer;border-radius:8px}.lg-c{display:flex!important;align-items:center;gap:10px;margin:2px 0 18px!important;font-weight:400!important;cursor:pointer}.lg-c input{position:absolute;opacity:0}.lg-c span{width:16px;height:16px;border:1.5px solid #bdbdbd;border-radius:4px;display:grid;place-items:center;transition:all .15s}.lg-c input:checked+span{background:#111;border-color:#111}.lg-c input:checked+span:after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}.lg-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:42px;border:0;border-radius:10px;background:#0a0a0a;color:#fff;font:600 14px Inter,Arial,sans-serif;cursor:pointer}.lg-f{margin:16px 0 0;text-align:center;font-size:13px;color:#737373}.lg-f a{color:#111;font-weight:600;text-decoration:underline;text-underline-offset:3px}
</style>

<script>
const i=document.getElementById('lg2'),b=document.getElementById('lge');b.addEventListener('click',()=>{const s=i.type==='password';i.type=s?'text':'password';b.setAttribute('aria-label',s?'Hide password':'Show password')});document.getElementById('lgf').addEventListener('submit',e=>e.preventDefault());document.querySelectorAll('.lg a').forEach(a=>a.addEventListener('click',e=>e.preventDefault()));
</script>

<form class='rp' id='rpf'><a href='#' class='rp-b'><svg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 6l-6 6 6 6'/></svg>Back to sign in</a><h3>Reset your password</h3><p>Enter the email linked to your account and we'll send a reset link.</p><label for='rp1'>Email address</label><input id='rp1' type='email' placeholder='you@company.com' required><button type='submit' id='rpb'><span>Send reset link</span><svg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg></button></form>

<style>
.rp{width:min(330px,90%);margin:auto;padding:6px 0;font-family:Inter,Arial,sans-serif;color:#111}.rp-b{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:#525252;text-decoration:underline;text-underline-offset:3px}.rp h3{margin:18px 0 10px;font-size:22px;font-weight:700;letter-spacing:-.01em}.rp p{margin:0 0 20px;font-size:13.5px;line-height:1.7;color:#737373}.rp label{display:block;margin-bottom:8px;font-size:13.5px;font-weight:500}.rp input{width:100%;box-sizing:border-box;height:40px;padding:0 14px;font:inherit;font-size:13.5px;background:#fff;border:1px solid #ececec;border-radius:10px;outline:0;transition:border-color .15s,box-shadow .15s}.rp input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.rp input::placeholder{color:#a3a3a3}.rp button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:42px;margin-top:16px;border:0;border-radius:10px;background:#0a0a0a;color:#fff;font:600 14px Inter,Arial,sans-serif;cursor:pointer}
</style>

<script>
const f=document.getElementById('rpf'),b=document.getElementById('rpb');f.addEventListener('submit',e=>{e.preventDefault();b.firstChild.textContent='Sending...';setTimeout(()=>{b.firstChild.textContent='Check your inbox';},900);setTimeout(()=>{b.firstChild.textContent='Send reset link';f.reset()},2800)});f.querySelector('.rp-b').addEventListener('click',e=>e.preventDefault());
</script>

<form class='cf' id='cff'><p class='cf-s'>We usually reply within one business day.</p><div class='cf-r'><div><label for='cf1'>Name</label><input id='cf1' placeholder='Your name' required></div><div><label for='cf2'>Email</label><input id='cf2' type='email' placeholder='you@email.com' required></div></div><label for='cf3'>Subject</label><input id='cf3' placeholder='How can we help?'><div class='cf-h'><label for='cf4'>Message</label><span id='cfc'>0/1000</span></div><textarea id='cf4' maxlength='1000' placeholder='Tell us more about your project...' required></textarea><button type='submit' id='cfb'>Send message</button></form>

<style>
.cf{width:min(360px,92%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111;}.cf-s{margin:0 0 16px;font-size:13.5px;color:#737373}.cf-r{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cf label{display:block;margin:12px 0 6px;font-size:13.5px;font-weight:500}.cf-r label{margin-top:0}.cf input,.cf textarea{width:100%;box-sizing:border-box;padding:0 12px;height:38px;font:inherit;font-size:13.5px;background:#fff;border:1px solid #e5e5e5;border-radius:9px;outline:0;transition:border-color .15s,box-shadow .15s}.cf textarea{height:90px;padding:10px 12px;resize:vertical}.cf input::placeholder,.cf textarea::placeholder{color:#a3a3a3}.cf input:focus,.cf textarea:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.cf-h{display:flex;justify-content:space-between;align-items:baseline}.cf-h span{font-size:12px;color:#a3a3a3}.cf button{width:100%;height:42px;margin-top:16px;border:0;border-radius:10px;background:#0a0a0a;color:#fff;font:600 14px Inter,Arial,sans-serif;cursor:pointer;transition:transform .12s}.cf button:active{transform:scale(.985)}
</style>

<script>
const f=document.getElementById('cff'),t=document.getElementById('cf4'),c=document.getElementById('cfc'),b=document.getElementById('cfb');t.addEventListener('input',()=>c.textContent=t.value.length+'/1000');f.addEventListener('submit',e=>{e.preventDefault();b.textContent='Message sent ✓';setTimeout(()=>{b.textContent='Send message';f.reset();c.textContent='0/1000'},1800)});
</script>

<div class='sl'><label for='sl1'>Country</label><div class='sl-w'><select id='sl1'><option value='' selected disabled>Select an option</option><option>United States</option><option>Canada</option><option>United Kingdom</option><option>India</option><option>Australia</option></select><svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg></div><p>Shipping rates vary by region.</p></div>

<style>
.sl{width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.sl label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.sl-w{position:relative}.sl select{width:100%;box-sizing:border-box;height:40px;padding:0 38px 0 14px;font:inherit;font-size:14px;color:#111;background:#fff;border:1px solid #e5e5e5;border-radius:10px;outline:0;cursor:pointer;-webkit-appearance:none;appearance:none;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.sl select:invalid,.sl select:has(option[disabled]:checked){color:#a3a3a3}.sl select:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.sl-w svg{position:absolute;right:12px;top:12px;color:#737373;pointer-events:none}.sl p{margin:8px 0 0;font-size:12.5px;color:#737373}
</style>

<div class='sf'><svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg><input type='search' placeholder='Search components...' aria-label='Search'></div>

<style>
.sf{position:relative;width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif}.sf svg{position:absolute;left:14px;top:12px;color:#8a8a8a;transition:color .15s}.sf input{width:100%;box-sizing:border-box;height:40px;padding:0 14px 0 40px;font:inherit;font-size:14px;color:#111;background:#fff;border:1px solid #e5e5e5;border-radius:10px;outline:0;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s;-webkit-appearance:none}.sf input::placeholder{color:#a3a3a3}.sf input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.sf:focus-within svg{color:#111}
</style>

<fieldset class='rg'><legend>Payment method</legend><label class='rg-o'><input type='radio' name='pay' value='cc'><span class='rg-d'></span><span class='rg-t'><b>Credit card</b><small>Visa, Mastercard, Amex</small></span></label><label class='rg-o'><input type='radio' name='pay' value='pp'><span class='rg-d'></span><span class='rg-t'><b>PayPal</b><small>Pay with your PayPal balance</small></span></label><label class='rg-o'><input type='radio' name='pay' value='bt'><span class='rg-d'></span><span class='rg-t'><b>Bank transfer</b><small>2–3 business days to clear</small></span></label></fieldset>

<style>
.rg{width:min(330px,88%);margin:auto;padding:0;border:0;font-family:Inter,Arial,sans-serif;color:#111}.rg legend{padding:0;margin-bottom:10px;font-size:14px;font-weight:500}.rg-o{display:flex;gap:12px;align-items:center;margin-bottom:8px;padding:13px 14px;background:#fff;border:1px solid #e5e5e5;border-radius:12px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.rg-o:hover{border-color:#cfcfcf}.rg-o input{position:absolute;opacity:0;pointer-events:none}.rg-d{flex:none;width:16px;height:16px;border:1.5px solid #cfcfcf;border-radius:50%;display:grid;place-items:center;transition:border-color .15s}.rg-d:after{content:'';width:8px;height:8px;border-radius:50%;background:#111;transform:scale(0);transition:transform .18s cubic-bezier(.3,1.6,.5,1)}.rg-o:has(input:checked){border-color:#111;box-shadow:0 0 0 1px #111}.rg-o input:checked+.rg-d{border-color:#111}.rg-o input:checked+.rg-d:after{transform:scale(1)}.rg-o input:focus-visible+.rg-d{box-shadow:0 0 0 3px rgba(17,17,17,.15)}.rg-t b{display:block;font-size:14px;font-weight:500}.rg-t small{display:block;margin-top:2px;font-size:12.5px;color:#737373}
</style>