Greg el asistente

2,103 arrdee

Abrir en el editor Publica tu código

Recomendado

25 November 2025

La leyenda de Zelda

11 April 2026

Estructura CSS del girasol HTML

14 October 2024

Una plantilla de página web para "Anes Development" con un mensaje de bienvenida y navegación.

HTML

<!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;
  }

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,
  });