Greg the assistant

1968 arrdee

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blue Assistant 3D</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
    <link rel="stylesheet" href="index.css">
  </head>
<body>
    <div id="animation-background"></div>
    
    <div class="alexa-container">
      <div class="alexa-ring">
        <div class="alexa-core"></div>
      </div>
      <div class="voice-waves">
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
      </div>
      <div class="speech-text" id="speechText"></div>
    </div>

<div class="search-results" id="searchResults"></div>
    <section class="main">
        <div class="input">
            <button class="talk"><i class="fas fa-microphone-alt"></i></button>
            <h1 class="content"> Click here to speak</h1>
        </div>
    </section>
    <script src="app.js"></script>
</body>

</html>
  <body>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    background: #000;
    color: #fff;
    font-family: 'Arial', sans-serif;
    min-height: 100vh;
    overflow: hidden;
  }
  
  #animation-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  
  .alexa-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    perspective: 1000px;
  }
  
  .alexa-ring {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    transform-style: preserve-3d;
    animation: float 6s ease-in-out infinite;
    transition: all 0.5s ease;
  }
  
  .alexa-ring::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid #ff0000;
    box-shadow: 0 0 50px #ff0000;
    animation: pulse 2s linear infinite;
    transition: all 0.5s ease;
  }
  
  .alexa-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at center, #cc1212, #cc0000);
    border-radius: 50%;
    box-shadow: 0 0 30px #ff0101;
    transition: all 0.5s ease;
  }
  
  @keyframes float {
    0%, 100% {
      transform: translateY(0) rotateX(0) rotateY(0);
    }
    50% {
      transform: translateY(-20px) rotateX(10deg) rotateY(20deg);
    }
  }
  
  @keyframes pulse {
    0% {
      transform: scale(1);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.1);
      opacity: 0.5;
    }
    100% {
      transform: scale(1);
      opacity: 0.8;
    }
  }
  
  @keyframes pulse-green {
    0% {
      transform: scale(1);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.5;
    }
    100% {
      transform: scale(1);
      opacity: 0.8;
    }
  }
  
  @keyframes ripple {
    0% {
      width: 0px;
      height: 0px;
      opacity: 1;
    }
    100% {
      width: 300px;
      height: 300px;
      opacity: 0;
    }
  }
  
  @keyframes fadeInOut {
    0% {
      opacity: 0;
      transform: translateY(20px) translateX(-50%) scale(0.8);
    }
    20% {
      opacity: 1;
      transform: translateY(0) translateX(-50%) scale(1);
    }
    80% {
      opacity: 1;
      transform: translateY(0) translateX(-50%) scale(1);
    }
    100% {
      opacity: 0;
      transform: translateY(-20px) translateX(-50%) scale(0.8);
    }
  }
  
  @keyframes search-appear {
    0% {
      opacity: 0;
      transform: translateX(-50%) scale(0.8) rotateX(-30deg);
    }
    100% {
      opacity: 1;
      transform: translateX(-50%) scale(1) rotateX(0deg);
    }
  }
  
  
                                         
  .main .input {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 40vw;
    height: 50px;
    border-radius: 20px;
    background: rgba(255, 4, 4, 0);
  }
  
  .main .input .talk {
    background: transparent;
    outline: none;
    border: none;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    cursor: pointer;
  }
  
  .main .input .talk i {
    font-size: 4px;
    color: #aed0d0;
  }
  
  .main .input .content {
    color: #aed0d0;
    font-size: 15px;
    margin-right: 20px;
  }

JS

const btn = document.querySelector('.talk')
const content = document.querySelector('.content')

function speak(text){
    const text_speak = new SpeechSynthesisUtterance(text);

text_speak.rate = 1;
    text_speak.volume = 1;
    text_speak.pitch = 1;

window.speechSynthesis.speak(text_speak);
}

function wishMe(){
    var day = new Date();
    var hour = day.getHours();

if(hour>=0 && hour<12){
        speak("Good Morning sir...")
    }

else if(hour>12 && hour<17){
        speak("Good Afternoon Master...")
    }

else{
        speak("Good Evenining Sir...")
    }

}

window.addEventListener('load', ()=>{
    speak("Greg here, can i help you...");
    wishMe();
});

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

const recognition =  new SpeechRecognition();

recognition.onresult = (event)=>{
    const currentIndex = event.resultIndex;
    const transcript = event.results[currentIndex][0].transcript;
    content.textContent = transcript;
    takeCommand(transcript.toLowerCase());

}

btn.addEventListener('click', ()=>{
    content.textContent = "Listening...."
    recognition.start();
})

else if(message.includes('what is') || message.includes('who is') || message.includes('what are')) {
        window.open(`https://www.google.com/search?q=${message.replace(" ", "+")}`, "_blank");
        const finalText = "This is what i found on internet regarding " + message;
	    speak(finalText);
  
    }

else if(message.includes('wikipedia')) {
        window.open(`https://en.wikipedia.org/wiki/${message.replace("wikipedia", "")}`, "_blank");
        const finalText = "This is what i found on wikipedia regarding " + message;
        speak(finalText);
    }

else if(message.includes('time')) {
        const time = new Date().toLocaleString(undefined, {hour: "numeric", minute: "numeric"})
        const finalText = time;
        speak(finalText);
    }

else if(message.includes('date')) {
        const date = new Date().toLocaleString(undefined, {month: "short", day: "numeric"})
        const finalText = date;
        speak(finalText);
    }

else if(message.includes('calculator')) {
        window.open('Calculator:///')
        const finalText = "Opening Calculator";
        speak(finalText);
    }

else {
        window.open(`https://www.google.com/search?q=${message.replace(" ", "+")}`, "_blank");
        const finalText = "I found some information for " + message + " on google";
        speak(finalText);
    }
}

VANTA.NET({
    el: "#animation-background",
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.0,
    minWidth: 200.0,
    scale: 1.0,
    scaleMobile: 1.0,
    points: 15.0,
    color: 0xff0000,
    backgroundColor: 0x00,
    points: 15.0,
    maxDistance: 25.0,
    spacing: 17.0,
  });

Greg the assistant

Recommended

Coding the reality

Find the Alien

The Legend of Zelda

HTML

CSS

JS

Recommended

Coding the reality

Find the Alien

The Legend of Zelda

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS