Webleb - Code-Snippets -

4411 IT-Brother

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Empfohlen

11 December 2024

Responsive Karte

16 December 2025

HTML-Spiel: Einfaches Battle Royale mit Bau- und Schießelementen

1 July 2025

Modernes Kontaktformular mit Farbverlauf

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 = '';
        }

Empfohlen

Responsive Karte

HTML-Spiel: Einfaches Battle Royale mit Bau- und Schießelementen

Modernes Kontaktformular mit Farbverlauf

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS