Site Web IA (NE FONCTIONNE PAS)

1264 alqsdeus

Ouvrir dans l'éditeur Publiez votre code

Recommandé

26 August 2024

Icônes sociales avec reflets

9 November 2024

Modèle de site Web de produit HTML

14 June 2024

icône de médias sociaux avec survol

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>

Site Web IA (NE FONCTIONNE PAS)

Recommandé

Icônes sociales avec reflets

Modèle de site Web de produit HTML

icône de médias sociaux avec survol

HTML

CSS

JS

Recommandé

Icônes sociales avec reflets

Modèle de site Web de produit HTML

icône de médias sociaux avec survol

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS