Webleb - Snippets de Código -

4598 IT-Brother

Abrir no Editor Video Publique Seu Código

Recomendado

12 December 2025

Formulário de login HTML com CSS e Font Awesome

29 August 2025

Gerenciador de Tarefas HTML: Adicionar, Excluir e Concluir Tarefas

10 August 2025

Animação de nave espacial alienígena em CSS com estrelas

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Bot Section</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="content">
        <h1>About Our Chat Bot</h1>
        <p>
            Welcome to our website! We are pleased to introduce our chat bot, which is ready to help you with various questions. 
        </p>
        <div class="images-container">
            <img src="https://via.placeholder.com/350x200" alt="Image 1">
            <img src="https://via.placeholder.com/350x200" alt="Image 2">
        </div>
        <p>
            You can ask our chat bot questions like "Hello", "How are you?", "What are you doing?" and get quick responses. 
            The chat bot is here to make your stay on our website as comfortable as possible.
        </p>
    </div>

<div id="chat-container">
        <div id="chat-header">
            <div class="close-chat">←</div>
            <span style="position: relative; left: 8px;">Chat Bot Assistant</span>
            <div class="reset-chat"><img src="reload.png" style="height: 30px; float: right; margin-right: 20px;"></div>
        </div>
        <div id="chat-box">
            <div id="messages"></div>
        </div>
        <div id="user-input-container">
            <input type="text" id="user-input" placeholder="Type a message...">
            <button id="send-button">Send</button>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

CSS

body {
    background-color: #333;
    font-family: Arial, sans-serif;
    margin: 0;
    color: #333;
}

#content {
    position: relative;
    padding: 10px;
    max-width: 800px;
    margin: 100px auto;
    background: #fff;
    box-shadow: 0 0 10px #4a90e2;
    border-radius: 10px;
}

h1 {
    color: #4a90e2;
    text-align: center;
}

p {
    line-height: 1.6;
}

#content img {
    max-width: 100%;
    border-radius: 10px;
    margin-bottom: 20px;
}

#chat-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #4a90e2;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #fff;
    font-size: 30px;
    scale: 1.2;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#chat-header {
    background: #4a90e2;
    color: #fff;
    padding: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Make sure the header is above other elements */
}

#chat-header span {
    font-size: 18px;
}

#chat-header .close-chat,
#chat-header .reset-chat {
    cursor: pointer;
    font-size: 18px;
}

#chat-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 70px);
    position: relative;
    top: -15px; /* Adjust the position of the chat box */
    overflow: auto;
    padding-top: 20px;
}

#chat-box::-webkit-scrollbar {
    width: 4px;
}

#chat-box::-webkit-scrollbar-thumb {
    background: #666666;
    border-radius: 10px;
}

#chat-box::-webkit-scrollbar-track {
    background: rgb(172, 172, 172);
}

#user-input-container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0px;
    background: #fff;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: 1;
}

#chat-container {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    max-width: 400px;
    height: 75%;
    position: fixed;
    bottom: 54%;
    right: 50%;
    scale: 1.1;
    transform: translate(50%, 50%);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    background: #fff;
    padding-top: 20px; /* Add padding at the top of the chat container */
}

#user-input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#send-button {
    width: 50px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background: #4a90e2;
    color: #fff;
    cursor: pointer;
    margin-left: 0px;
}

.message {
    position: relative;
    padding: 8px;
    margin: 5px 0;
    border-radius: 5px;
    max-width: 80%;
    left: 5px;
    word-wrap: break-word;
}

.user {
    background: #4a90e2;
    color: #fff;
}

.bot {
    background: #f06;
    color: #fff;
}

.images-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.images-container img {
    max-width: 48%;
    border-radius: 10px;
    margin-bottom: 20px;
}

.loading-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    margin: 5px 0;
}

.dot {
    width: 8px;
    height: 8px;
    margin: 0 2px;
    background: #ccc;
    border-radius: 50%;
    animation: bounce 1.5s infinite;
}

.dot:nth-child(2) {
    animation-delay: 0.3s;
}

.dot:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

JS

const chatIcon = document.getElementById('chat-icon');
        const chatContainer = document.getElementById('chat-container');
        const closeChat = document.querySelector('.close-chat');
        const resetChat = document.querySelector('.reset-chat');

let isBotResponding = false;

chatIcon.addEventListener('click', function() {
            chatContainer.style.display = 'flex';
            chatIcon.style.display = 'none';
        });

closeChat.addEventListener('click', function() {
            chatContainer.style.display = 'none';
            chatIcon.style.display = 'flex';
        });

resetChat.addEventListener('click', function() {
            resetMessages();
        });

document.getElementById('send-button').addEventListener('click', function() {
            if (!isBotResponding) { 
                sendMessage();
            }
        });

document.getElementById('user-input').addEventListener('keypress', function(event) {
            if (event.key === 'Enter' && !isBotResponding) { 
                sendMessage();
            }
        });

function addMessage(text, sender) {
            const messageContainer = document.createElement('div');
            messageContainer.classList.add('message', sender);
            messageContainer.textContent = text;
            document.getElementById('messages').appendChild(messageContainer);
        }

function getBotResponse(userInput) {
            let botResponse = '';

switch (userInput.toLowerCase()) {
                case 'hi':
                    botResponse = 'Hi!';
                    break;
                case 'how are you?':
                    botResponse = 'I`m fine, thanks!';
                    break;
                case 'what are you doing?':
                    botResponse = 'I am answering the questions!';
                    break;
                default:
                    botResponse = 'Sorry, but i can`t understand. Can you repeat the auestion.';
            }

setTimeout(() => {
                addMessage(botResponse, 'bot');
                isBotResponding = false; 
                hideLoadingIndicator(); 
            }, 2000); 
        }

function showLoadingIndicator() {
            const loadingIndicator = document.createElement('div');
            loadingIndicator.classList.add('loading-indicator');

for (let i = 0; i < 3; i++) {
                const dot = document.createElement('div');
                dot.classList.add('dot');
                loadingIndicator.appendChild(dot);
            }
            document.getElementById('messages').appendChild(loadingIndicator);
        }

function hideLoadingIndicator() {
            const loadingIndicator = document.querySelector('.loading-indicator');
            if (loadingIndicator) {
                loadingIndicator.remove();
            }
        }

function resetMessages() {
            document.getElementById('messages').innerHTML = '';
        }

Recomendado

Formulário de login HTML com CSS e Font Awesome

Gerenciador de Tarefas HTML: Adicionar, Excluir e Concluir Tarefas

Animação de nave espacial alienígena em CSS com estrelas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS