Website AI (NOT WORKING)

Open In Editor Publish Your Code

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

Website AI (NOT WORKING)

Recommended

Bakery HTML Website Template

Developer Website HTML CSS Template

Realastic Rain Fall

HTML

CSS

JS

Recommended

Bakery HTML Website Template

Developer Website HTML CSS Template

Realastic Rain Fall

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS