Site Web IA (NE FONCTIONNE PAS)

330 alqsdeus

Ouvrir dans l'éditeur Publiez votre code

Recommandé

16 January 2025

Exemple de page de destination d'un site Web de film

28 August 2024

Site Web météo

3 March 2025

Site Web du système d'inscription aux événements HTML CSS

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>

Recommandé

Exemple de page de destination d'un site Web de film

Site Web météo

Site Web du système d'inscription aux événements HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS