Voice Assistant

@import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap’); *{margin:0;padding:0;box-sizing:border-box} :root{–bg:#0d0d0d;–surface:#1a1a1a;–surface-hover:#2a2a2a;–border:#2a2a2a;–text:#ececec;–text-dim:#8e8e8e;–accent:#10a37f;–accent-glow:rgba(16,163,127,0.3);–user-bubble:#2b2b2b;–ai-bubble:transparent;–listening:#ef4444;–listening-glow:rgba(239,68,68,0.3)} #va-app{font-family:’Inter’,-apple-system,BlinkMacSystemFont,sans-serif;background:var(–bg);color:var(–text);height:100vh;display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased;position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999} .va-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(–border);flex-shrink:0} .va-header-left{display:flex;align-items:center;gap:12px} .va-logo{width:32px;height:32px;background:var(–accent);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;color:#fff} .va-title{font-size:16px;font-weight:500} .va-subtitle{font-size:12px;color:var(–text-dim)} .va-mode-toggle{display:flex;background:var(–surface);border-radius:20px;padding:3px;gap:2px} .va-mode-btn{padding:6px 14px;border-radius:18px;border:none;background:transparent;color:var(–text-dim);font-size:13px;font-family:inherit;cursor:pointer;transition:all .2s} .va-mode-btn.active{background:var(–accent);color:#fff} .va-chat{flex:1;overflow-y:auto;padding:20px;scroll-behavior:smooth} .va-welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;gap:16px} .va-welcome.hidden{display:none} .va-welcome-icon{width:64px;height:64px;background:linear-gradient(135deg,var(–accent),#0ea5e9);border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:8px} .va-welcome h2{font-size:24px;font-weight:500;color:var(–text)} .va-welcome p{font-size:15px;color:var(–text-dim);max-width:320px;line-height:1.5} .va-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px;max-width:400px} .va-chip{padding:8px 16px;background:var(–surface);border:1px solid var(–border);border-radius:20px;font-size:13px;color:var(–text-dim);cursor:pointer;transition:all .2s;font-family:inherit} .va-chip:hover{background:var(–surface-hover);color:var(–text);border-color:var(–accent)} .va-messages{display:flex;flex-direction:column;gap:16px} .va-msg{display:flex;gap:12px;max-width:85%;animation:vaFadeIn .3s ease} .va-msg.user{align-self:flex-end;flex-direction:row-reverse} .va-msg.ai{align-self:flex-start} .va-avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600} .va-msg.ai .va-avatar{background:var(–accent);color:#fff} .va-msg.user .va-avatar{background:#6366f1;color:#fff} .va-bubble{padding:12px 16px;border-radius:18px;font-size:15px;line-height:1.55} .va-msg.user .va-bubble{background:var(–user-bubble);border-bottom-right-radius:4px} .va-msg.ai .va-bubble{background:var(–ai-bubble);border-bottom-left-radius:4px} .va-typing{display:flex;gap:4px;padding:4px 0} .va-typing span{width:8px;height:8px;background:var(–text-dim);border-radius:50%;animation:vaBounce 1.4s infinite} .va-typing span:nth-child(2){animation-delay:.2s} .va-typing span:nth-child(3){animation-delay:.4s} @keyframes vaBounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-6px);opacity:1}} @keyframes vaFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} .va-input{padding:16px 20px 24px;border-top:1px solid var(–border);flex-shrink:0} .va-voice-section{display:flex;flex-direction:column;align-items:center;gap:12px} .va-orb-wrap{position:relative;width:80px;height:80px} .va-orb-ring{position:absolute;inset:-8px;border-radius:50%;border:2px solid transparent;transition:all .3s} .va-orb-ring.active{border-color:var(–listening);animation:vaPulseRing 1.5s infinite} .va-orb{width:80px;height:80px;border-radius:50%;border:none;background:linear-gradient(135deg,var(–accent),#0ea5e9);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;position:relative;z-index:2;box-shadow:0 4px 24px var(–accent-glow)} .va-orb:hover{transform:scale(1.05)} .va-orb:active{transform:scale(.95)} .va-orb.listening{background:linear-gradient(135deg,var(–listening),#f97316);box-shadow:0 4px 24px var(–listening-glow);animation:vaPulseOrb 1.5s infinite} .va-orb.speaking{background:linear-gradient(135deg,#8b5cf6,#6366f1);box-shadow:0 4px 24px rgba(99,102,241,.3)} .va-orb svg{width:32px;height:32px} @keyframes vaPulseOrb{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} @keyframes vaPulseRing{0%{transform:scale(1);opacity:1}100%{transform:scale(1.3);opacity:0}} .va-wave{display:flex;align-items:center;gap:3px;height:28px;opacity:0;transition:opacity .3s} .va-wave.active{opacity:1} .va-wave-bar{width:3px;background:var(–accent);border-radius:2px;transition:height .1s;height:4px} .va-wave.listening .va-wave-bar{background:var(–listening)} .va-status{font-size:13px;color:var(–text-dim);height:20px} .va-text-row{display:flex;gap:8px;width:100%;max-width:600px;margin:0 auto} .va-text-input{flex:1;padding:12px 16px;background:var(–surface);border:1px solid var(–border);border-radius:24px;color:var(–text);font-size:15px;font-family:inherit;outline:none} .va-text-input:focus{border-color:var(–accent)} .va-text-input::placeholder{color:var(–text-dim)} .va-send,.va-mic-mini{width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0} .va-send{background:var(–accent);color:#fff} .va-mic-mini{background:var(–surface);color:var(–text-dim)} .va-mic-mini.listening{background:var(–listening);color:#fff} .va-text-mode .va-voice-section{display:none} .va-voice-mode .va-text-row{display:none} .va-voice-mode .va-voice-section{display:flex} .va-text-mode .va-text-row{display:flex} @media(max-width:480px){.va-header{padding:12px 16px}.va-chat{padding:16px}.va-input{padding:12px 16px 20px}.va-orb{width:72px;height:72px}.va-orb svg{width:28px;height:28px}.va-chips{max-width:300px}}
Steven’s Assistant
Voice-first AI
🎤

Hey Steven

Tap the mic and just talk. I’ll listen, respond, and speak back to you naturally.

Tap to speak
var vaL=false,vaS=false,vaR=null,vaSyn=window.speechSynthesis,vaM=’voice’,vaH=[],vaV=null,vaI=”; var vaW=document.getElementById(‘vaWave’);for(var i=0;i<24;i++){var b=document.createElement('div');b.className='va-wave-bar';vaW.appendChild(b)}var vaBars=vaW.querySelectorAll('.va-wave-bar'); function vaLoadV(){var v=vaSyn.getVoices();var p=['Samantha','Karen','Daniel','Google UK English Female','Google US English'];for(var n of p){var f=v.find(function(x){return x.name.includes(n)});if(f){vaV=f;return}}vaV=v.find(function(x){return x.lang.startsWith('en')})||v[0]}vaSyn.onvoiceschanged=vaLoadV;vaLoadV(); var SR=window.SpeechRecognition||window.webkitSpeechRecognition; if(SR){vaR=new SR();vaR.continuous=false;vaR.interimResults=true;vaR.lang='en-US';vaR.onresult=function(e){var f='',im='';for(var i=e.resultIndex;i<e.results.length;i++){var t=e.results[i][0].transcript;if(e.results[i].isFinal)f+=t;else im+=t}vaI=im;vaUpdStatus(im?'"'+im+'"':'Listening…');if(f.trim()){vaStop();vaHandle(f.trim(),true)}};vaR.onerror=function(e){if(e.error==='no-speech')vaUpdStatus('No speech detected');else if(e.error!=='aborted')vaUpdStatus('Mic error');vaStop()};vaR.onend=function(){if(vaL){vaStop();if(vaI.trim()){vaHandle(vaI.trim(),true);vaI=''}}}} else{vaSetMode('text')} function vaSetMode(m){vaM=m;document.querySelectorAll('.va-mode-btn').forEach(function(b){b.classList.toggle('active',b.dataset.mode===m)});var a=document.getElementById('vaInput');a.classList.toggle('va-voice-mode',m==='voice');a.classList.toggle('va-text-mode',m==='text');if(m==='text'&&vaL)vaStop();if(m==='text')document.getElementById('vaTextInput').focus()} function vaToggle(){if(vaS){vaSyn.cancel();vaS=false;vaUpdOrb('idle')}vaL?vaStop():vaStart()} function vaStart(){if(!vaR){vaUpdStatus('Voice not supported');return}vaL=true;vaI='';try{vaR.start()}catch(e){vaR.stop();setTimeout(function(){try{vaR.start()}catch(e2){vaUpdStatus('Mic busy')}},200)}vaUpdOrb('listening');vaUpdStatus('Listening…');vaAnim(true)} function vaStop(){vaL=false;if(vaR)try{vaR.stop()}catch(e){}vaUpdOrb('idle');vaUpdStatus('Tap to speak');vaAnim(false)} function vaUpdOrb(s){var o=document.getElementById('vaOrb'),r=document.getElementById('vaRing'),mi=document.getElementById('vaMicIcon'),si=document.getElementById('vaStopIcon'),mm=document.getElementById('vaMicMini');o.classList.remove('listening','speaking');r.classList.remove('active');if(s==='listening'){o.classList.add('listening');r.classList.add('active');mi.style.display='none';si.style.display='block';mm.classList.add('listening')}else if(s==='speaking'){o.classList.add('speaking');mi.style.display='block';si.style.display='none';mm.classList.remove('listening')}else{mi.style.display='block';si.style.display='none';mm.classList.remove('listening')}} function vaUpdStatus(t){document.getElementById('vaStatus').textContent=t} var vaWI=null;function vaAnim(a){var w=document.getElementById('vaWave');w.classList.toggle('active',a);w.classList.toggle('listening',a&&vaL);if(a){vaWI=setInterval(function(){vaBars.forEach(function(b){b.style.height=(4+Math.random()*22)+'px'})},100)}else{clearInterval(vaWI);vaBars.forEach(function(b){b.style.height='4px'})}} function vaHideWelcome(){document.getElementById('vaWelcome').classList.add('hidden')} function vaAddMsg(t,role,isV){vaHideWelcome();var c=document.getElementById('vaMessages'),d=document.createElement('div');d.className='va-msg '+role;var av=document.createElement('div');av.className='va-avatar';av.textContent=role==='ai'?'S':'Y';var co=document.createElement('div');co.className='va-bubble';if(isV){var tg=document.createElement('div');tg.style.cssText='font-size:11px;color:#8e8e8e;margin-bottom:4px';tg.textContent='Voice';co.appendChild(tg)}var p=document.createElement('div');p.textContent=t;co.appendChild(p);d.appendChild(av);d.appendChild(co);c.appendChild(d);vaScrollBottom()} function vaAddTyping(){vaHideWelcome();var c=document.getElementById('vaMessages'),d=document.createElement('div');d.className='va-msg ai';d.id='vaTyping';var av=document.createElement('div');av.className='va-avatar';av.textContent='S';var co=document.createElement('div');co.className='va-bubble';co.innerHTML='
‘;d.appendChild(av);d.appendChild(co);c.appendChild(d);vaScrollBottom()} function vaRemoveTyping(){var e=document.getElementById(‘vaTyping’);if(e)e.remove()} function vaScrollBottom(){var c=document.getElementById(‘vaChat’);requestAnimationFrame(function(){c.scrollTop=c.scrollHeight})} var vaResps=[‘Hey Steven! I\’m on it.’,’Got it. Want me to dig deeper?’,’Good call. Let me know if you want to adjust.’,’Absolutely. Anything else?’,’Here\’s what I found.’,’Done. Tell me if the tone feels right.’,’Smart question. Here\’s my take.’,’Let me run through the options.’]; function vaGetResp(u){var l=u.toLowerCase();if(l.indexOf(‘schedule’)>=0||l.indexOf(‘calendar’)>=0)return’Looks like you have a pretty open day, Steven. No meetings on the books. Perfect time to knock out some strategic stuff. Want me to block off focus time?’;if(l.indexOf(’email’)>=0||l.indexOf(‘inbox’)>=0)return’I will check your inbox right now. Give me a sec to pull up anything that needs your attention today.’;if(l.indexOf(‘idea’)>=0||l.indexOf(‘content’)>=0||l.indexOf(‘post’)>=0)return’How about a behind-the-scenes reel of the course at golden hour? People eat that stuff up. I can draft a caption and plan the whole post if you want.’;if(l.indexOf(‘focus’)>=0||l.indexOf(‘priorities’)>=0||l.indexOf(‘week’)>=0)return’Top three this week: website updates live, partnership prep, and the social content calendar. Want me to break any of those down?’;return vaResps[Math.floor(Math.random()*vaResps.length)]} function vaHandle(t,isV){vaAddMsg(t,’user’,isV);vaH.push({role:’user’,content:t});vaAddTyping();setTimeout(function(){vaRemoveTyping();var res=vaGetResp(t);vaH.push({role:’assistant’,content:res});vaAddMsg(res,’ai’,false);if(vaM===’voice’||isV)vaSpeak(res)},800+Math.random()*1200)} function vaSpeak(t){vaSyn.cancel();var u=new SpeechSynthesisUtterance(t);if(vaV)u.voice=vaV;u.rate=1.05;u.pitch=1;u.onstart=function(){vaS=true;vaUpdOrb(‘speaking’);vaUpdStatus(‘Speaking…’);vaAnim(true)};u.onend=function(){vaS=false;vaUpdOrb(‘idle’);vaUpdStatus(‘Tap to speak’);vaAnim(false)};vaSyn.speak(u)} function vaSendText(){var i=document.getElementById(‘vaTextInput’);var t=i.value.trim();if(!t)return;i.value=”;vaHandle(t,false)} function vaQuick(t){vaHandle(t,vaM===’voice’)}