Greg o assistente

Abrir no Editor Publique Seu Código

Recomendado

24 February 2025

<!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 o assistente

Recomendado

Um código por securearray494

Ícones sociais

Um código de Metehan

HTML

CSS

JS

Recomendado

Um código por securearray494

Ícones sociais

Um código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS