Added simple chat bot

2025-11-28 13:22:30 +03:00
parent 9202203116
commit 2605186b9c
349 changed files with 632 additions and 7583 deletions
--- a/repo_chat_bots/Simple-Chatbot_v2.0.html
+++ b/repo_chat_bots/Simple-Chatbot_v2.0.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Simple Chatbot</title>
+        <style>
+            body {
+                font-family: Arial, sans-serif;
+                max-width: 600px;
+                margin: 0 auto;
+                padding: 20px;
+            }
+            
+            #chatbox {
+                border: 2px solid #4CAF50;
+                height: 300px;
+                overflow-y: auto;
+                padding: 15px;
+                margin-bottom: 15px;
+                border-radius: 10px;
+                background-color: #f9f9f9;
+            }
+            
+            .user {
+                text-align: right;
+                color: #2196F3;
+                margin: 10px 0;
+                font-weight: bold;
+            }
+            
+            .bot {
+                text-align: left;
+                color: #4CAF50;
+                margin: 10px 0;
+                font-weight: bold;
+            }
+            
+            #userInput {
+                width: 70%;
+                padding: 10px;
+                border: 2px solid #4CAF50;
+                border-radius: 5px;
+                font-size: 16px;
+            }
+            
+            button {
+                padding: 10px 20px;
+                background-color: #4CAF50;
+                color: white;
+                border: none;
+                border-radius: 5px;
+                cursor: pointer;
+                font-size: 16px;
+            }
+            
+            button:hover {
+                background-color: #45a049;
+            }
+            
+            h1 {
+                color: #333;
+                text-align: center;
+            }
+        </style>
+    </head>
+    <body>
+        <h1>Simple Chatbot</h1>
+        
+        <div id="chatbox"></div>
+        
+        <input type="text" id="userInput" placeholder="Type your message here...">
+        <button onclick="sendMessage()">Send</button>
+
+        <script>
+            // Get the chatbox and input elements
+            const chatbox = document.getElementById('chatbox');
+            const userInput = document.getElementById('userInput');
+            
+            // Function to add a message to the chatbox
+            function addMessage(sender, text) {
+                // Create a new div for the message
+                const messageDiv = document.createElement('div');
+                
+                // Add CSS class based on sender (user or bot)
+                messageDiv.className = sender;
+                
+                // Set the message text
+                messageDiv.textContent = text;
+                
+                // Add the message to the chatbox
+                chatbox.appendChild(messageDiv);
+                
+                // Scroll to the bottom to show the latest message
+                chatbox.scrollTop = chatbox.scrollHeight;
+            }
+            
+            // Function to generate bot responses
+            function getBotResponse(userMessage) {
+                // Convert to lowercase for easier matching
+                const message = userMessage.toLowerCase();
+                
+                // Check what the user said and respond accordingly
+                if (message.includes('hello') || message.includes('hi')) {
+                    return "Hello! How can I help you today?";
+                } else if (message.includes('how are you')) {
+                    return "I'm doing great, thanks for asking!";
+                } else if (message.includes('bye') || message.includes('goodbye')) {
+                    return "Goodbye! Have a wonderful day!";
+                } else if (message.includes('name')) {
+                    return "I'm a simple chatbot. You can call me ChatBot!";
+                } else if (message.includes('help')) {
+                    return "I can respond to greetings, questions about how I am, and farewells. Try saying 'hello'!";
+                } else {
+                    return "I'm not sure how to respond to that. Try asking something else!";
+                }
+            }
+            
+            // Function to handle sending messages
+            function sendMessage() {
+                // Get the user's message
+                const message = userInput.value;
+                
+                // Don't send empty messages
+                if (message.trim() === '') {
+                    return;
+                }
+                
+                // Add user message to chat
+                addMessage('user', 'You: ' + message);
+                
+                // Get and add bot response
+                const botReply = getBotResponse(message);
+                addMessage('bot', 'Bot: ' + botReply);
+                
+                // Clear the input field
+                userInput.value = '';
+                
+                // Focus back on the input for the next message
+                userInput.focus();
+            }
+            
+            // Allow sending messages by pressing Enter key
+            userInput.addEventListener('keypress', function(event) {
+                if (event.key === 'Enter') {
+                    sendMessage();
+                }
+            });
+            
+            // Add a welcome message when the page loads
+            window.onload = function() {
+                addMessage('bot', 'Bot: Hello! I am a simple chatbot. Try saying "hello" or "how are you?"');
+            };
+        </script>
+
+    </body>
+</html>