AI del sito web (NON FUNZIONANTE)

1654 alqsdeus

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

19 May 2025

Progetto Shader WebGL

10 October 2025

Struttura HTML del contenitore di animazione CSS

6 November 2024

Gradiente del cursore del mouse

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Smart Chat</title>
  <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Fredoka One', sans-serif;
    }
    body {
      background: #0d0d0d;
      color: white;
      min-height: 100vh;
      padding: 40px;
      position: relative;
    }
    .chat-button {
      position: fixed;
      bottom: 30px;
      right: 30px;
      background-color: rgba(0, 255, 128, 0.2);
      border: 2px solid rgba(0, 255, 128, 0.6);
      color: white;
      font-size: 32px;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      cursor: pointer;
      transition: 0.3s;
      backdrop-filter: blur(10px);
      box-shadow: 0 0 12px rgba(0,255,128,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .chat-button:hover {
      background-color: rgba(0, 255, 128, 0.3);
    }
    .chat-box {
      margin-top: 30px;
      width: 600px;
      background-color: rgba(0, 0, 0, 0.65);
      border: 1px solid rgba(0, 255, 128, 0.2);
      backdrop-filter: blur(12px);
      border-radius: 20px;
      padding: 20px;
      display: none;
      flex-direction: column;
      box-shadow: 0 0 12px rgba(0, 255, 128, 0.1);
      margin: 0 auto;
      margin-top: 100px;
    }
    .messages {
      flex-grow: 1;
      overflow-y: auto;
      max-height: 300px;
      margin-bottom: 10px;
    }
    .message {
      margin-bottom: 10px;
      padding: 10px;
      background-color: rgba(255,255,255,0.05);
      border-radius: 12px;
    }
    .input-area {
      display: flex;
      gap: 10px;
    }
    .input-area input {
      flex: 1;
      padding: 10px;
      border: 1px solid rgba(0, 255, 128, 0.2);
      background-color: rgba(255,255,255,0.03);
      border-radius: 10px;
      color: white;
    }
    .input-area button {
      background-color: rgba(0, 255, 128, 0.2);
      border: 2px solid rgba(0, 255, 128, 0.6);
      backdrop-filter: blur(10px);
      box-shadow: 0 0 12px rgba(0,255,128,0.3);
      color: white;
      padding: 10px 20px;
      border-radius: 10px;
      cursor: pointer;
      transition: 0.3s;
      font-size: 16px;
    }
    .input-area button:hover {
      background-color: rgba(0, 255, 128, 0.3);
    }
    .loading {
      display: inline-block;
      margin-left: 10px;
    }
    .loading span {
      display: inline-block;
      width: 8px;
      height: 8px;
      margin: 0 2px;
      background: white;
      border-radius: 50%;
      animation: blink 1s infinite alternate;
    }
    .loading span:nth-child(2) { animation-delay: 0.2s; }
    .loading span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes blink {
      0% { opacity: 0.3; transform: scale(0.8);}
      100% { opacity: 1; transform: scale(1);}
    }
  </style>
</head>
<body>

chatButton.addEventListener('click', () => {
    chatBox.style.display = 'flex';
    chatButton.style.display = 'none';
  });

function sendMessage() {
    const input = document.getElementById('userInput');
    const text = input.value.trim();
    if (text === '') return;

appendMessage('You', text);
    input.value = '';

const loadingMessage = document.createElement('div');
    loadingMessage.className = 'message';
    loadingMessage.innerHTML = `<i class="fas fa-robot"></i> Assistant <div class="loading"><span></span><span></span><span></span></div>`;
    messagesDiv.appendChild(loadingMessage);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;

setTimeout(() => {
      loadingMessage.remove();
      respond(text.toLowerCase());
    }, 2000);
  }

function respond(userText) {
    let reply = "Typing...";

if (userText.includes('how are you')) {
      reply = "I'm good, thanks! You?";
    } else if (userText.includes('what is your name')) {
      reply = "My name is Assistant!";
    } else if (userText.includes('what is this site')) {
      reply = "This is a smart chat demo!";
    } else if (userText.includes('hello')) {
      reply = "Hello!";
    } else {
      reply = "I did not understand the question.";
    }

appendMessage('Assistant', reply);
  }
</script>

</body>
</html>

Consigliato

Progetto Shader WebGL

Struttura HTML del contenitore di animazione CSS

Gradiente del cursore del mouse

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS