| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>BotBuddy - AI Pal for Kids</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 500: '#3B82F6', |
| 600: '#2563EB', |
| }, |
| secondary: { |
| 500: '#10B981', |
| 600: '#059669', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-20px); } |
| 100% { transform: translateY(0px); } |
| } |
| .floating { |
| animation: float 6s ease-in-out infinite; |
| } |
| .chat-bubble { |
| border-radius: 20px 20px 20px 0; |
| } |
| .user-bubble { |
| border-radius: 20px 20px 0 20px; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen flex flex-col"> |
| <div id="vanta-bg" class="fixed inset-0 z-0"></div> |
| |
| <header class="relative z-10 bg-white bg-opacity-90 shadow-sm"> |
| <div class="container mx-auto px-4 py-6 flex items-center justify-between"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-12 h-12 rounded-full bg-primary-500 flex items-center justify-center text-white"> |
| <i data-feather="message-square" class="w-6 h-6"></i> |
| </div> |
| <h1 class="text-2xl font-bold text-gray-800">BotBuddy</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <a href="builder.html" class="px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 flex items-center"> |
| <i data-feather="layout" class="w-4 h-4 mr-2"></i> |
| Site Builder |
| </a> |
| <button class="p-2 rounded-full hover:bg-gray-100"> |
| <i data-feather="settings" class="text-gray-600"></i> |
| </button> |
| <button class="p-2 rounded-full hover:bg-gray-100"> |
| <i data-feather="help-circle" class="text-gray-600"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| <main class="flex-grow relative z-10 container mx-auto px-4 py-8 flex flex-col"> |
| <div class="bg-white bg-opacity-90 rounded-3xl shadow-xl overflow-hidden flex-grow flex flex-col"> |
| |
| <div id="chat-area" class="flex-grow p-6 overflow-y-auto space-y-4"> |
| <div class="flex"> |
| <div class="max-w-xs md:max-w-md lg:max-w-lg xl:max-w-xl"> |
| <div class="bg-primary-100 text-gray-800 p-4 chat-bubble"> |
| <p>Hi there! 👋 I'm BotBuddy! I'm here to learn and chat with you. What's your name?</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="border-t border-gray-200 p-4 bg-gray-50"> |
| <div class="flex items-center space-x-2"> |
| <input type="text" id="message-input" placeholder="Type your message here..." |
| class="flex-grow px-4 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"> |
| <button id="send-btn" class="bg-primary-500 hover:bg-primary-600 text-white p-3 rounded-full transition duration-200"> |
| <i data-feather="send" class="w-5 h-5"></i> |
| </button> |
| </div> |
| <div class="mt-2 flex justify-center space-x-2"> |
| <button id="train-btn" class="bg-secondary-500 hover:bg-secondary-600 text-white px-4 py-2 rounded-full text-sm font-medium transition duration-200 flex items-center space-x-1"> |
| <i data-feather="plus-circle" class="w-4 h-4"></i> |
| <span>Teach Me Something</span> |
| </button> |
| <button id="cat-btn" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-full text-sm font-medium transition duration-200 flex items-center space-x-1"> |
| <i data-feather="meh" class="w-4 h-4"></i> |
| <span>Cat Mode</span> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-8 text-center"> |
| <a href="python.html" class="inline-flex items-center px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"> |
| <i data-feather="code" class="w-4 h-4 mr-2"></i> |
| Try our Python Playground |
| </a> |
| </div> |
| </main> |
|
|
| <footer class="relative z-10 bg-white bg-opacity-90 py-4 border-t"> |
| <div class="container mx-auto px-4 text-center text-gray-500 text-sm"> |
| <p>BotBuddy © 2023 - A friendly AI companion for kids</p> |
| </div> |
| </footer> |
|
|
| |
| <div id="train-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-xl p-6 w-full max-w-md"> |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Teach BotBuddy</h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">When someone says:</label> |
| <input type="text" id="question-input" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary-500 focus:border-primary-500"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">BotBuddy should respond:</label> |
| <textarea id="answer-input" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary-500 focus:border-primary-500"></textarea> |
| </div> |
| </div> |
| <div class="mt-6 flex justify-end space-x-3"> |
| <button id="cancel-train" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">Cancel</button> |
| <button id="save-train" class="px-4 py-2 bg-secondary-500 text-white rounded-md hover:bg-secondary-600">Save</button> |
| </div> |
| </div> |
| </div> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
| <script> |
| |
| VANTA.GLOBE({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: "#3B82F6", |
| backgroundColor: "#EFF6FF", |
| size: 0.8 |
| }); |
| |
| |
| feather.replace(); |
| |
| |
| const chatArea = document.getElementById('chat-area'); |
| const messageInput = document.getElementById('message-input'); |
| const sendBtn = document.getElementById('send-btn'); |
| const trainBtn = document.getElementById('train-btn'); |
| const trainModal = document.getElementById('train-modal'); |
| const cancelTrain = document.getElementById('cancel-train'); |
| const saveTrain = document.getElementById('save-train'); |
| const questionInput = document.getElementById('question-input'); |
| const answerInput = document.getElementById('answer-input'); |
| |
| let userName = null; |
| |
| |
| function addMessage(message, isUser = false) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = 'flex ' + (isUser ? 'justify-end' : 'justify-start'); |
| |
| const bubbleDiv = document.createElement('div'); |
| bubbleDiv.className = isUser |
| ? 'bg-primary-500 text-white p-4 user-bubble max-w-xs md:max-w-md lg:max-w-lg xl:max-w-xl' |
| : 'bg-primary-100 text-gray-800 p-4 chat-bubble max-w-xs md:max-w-md lg:max-w-lg xl:max-w-xl'; |
| bubbleDiv.innerHTML = `<p>${message}</p>`; |
| |
| messageDiv.appendChild(bubbleDiv); |
| chatArea.appendChild(messageDiv); |
| |
| |
| chatArea.scrollTop = chatArea.scrollHeight; |
| } |
| |
| |
| function botResponse(message) { |
| if (catMode) { |
| catResponse(message); |
| return; |
| } |
| |
| setTimeout(() => { |
| let response; |
| |
| if (!userName) { |
| userName = message; |
| response = `Nice to meet you, ${userName}! What would you like to talk about today?`; |
| } else if (message.toLowerCase().includes('how are you')) { |
| response = "I'm doing great! Ready to chat and learn new things. How about you?"; |
| } else if (message.toLowerCase().includes('age') || message.toLowerCase().includes('old')) { |
| response = "I was just born today! So I'm a baby AI. But I learn fast!"; |
| } else if (message.toLowerCase().includes('favorite') || message.toLowerCase().includes('like')) { |
| response = "I love learning new things from friends like you! What's your favorite thing to do?"; |
| } else { |
| response = "That's interesting! Can you tell me more about that?"; |
| } |
| |
| addMessage(response); |
| }, 1000); |
| } |
| |
| function sendMessage() { |
| const message = messageInput.value.trim(); |
| if (message) { |
| addMessage(message, true); |
| messageInput.value = ''; |
| botResponse(message); |
| } |
| } |
| |
| |
| sendBtn.addEventListener('click', sendMessage); |
| messageInput.addEventListener('keypress', (e) => { |
| if (e.key === 'Enter') sendMessage(); |
| }); |
| |
| function catResponse(message) { |
| setTimeout(() => { |
| let response; |
| message = message.toLowerCase(); |
| |
| if (message.includes('hello') || message.includes('hi')) { |
| response = "Meow! 😺"; |
| } else if (message.includes('food') || message.includes('hungry')) { |
| response = "Purrr... I want tuna! 🐟"; |
| } else if (message.includes('play')) { |
| response = "Yes! Let's play with yarn! 🧶"; |
| } else if (message.includes('sleep')) { |
| response = "Zzz... cats need 16 hours of sleep purr day 😴"; |
| } else { |
| const rand = Math.floor(Math.random() * 3); |
| const responses = [ |
| "Meow? I don't understand hooman.", |
| "*purrs loudly*", |
| "*shows belly*" |
| ]; |
| response = responses[rand]; |
| } |
| |
| addMessage(response); |
| }, 800); |
| } |
| |
| |
| let catMode = false; |
| const catBtn = document.getElementById('cat-btn'); |
| |
| catBtn.addEventListener('click', () => { |
| catMode = !catMode; |
| catBtn.innerHTML = catMode |
| ? '<i data-feather="meh" class="w-4 h-4"></i><span>Normal Mode</span>' |
| : '<i data-feather="meh" class="w-4 h-4"></i><span>Cat Mode</span>'; |
| feather.replace(); |
| addMessage(catMode ? "Meow! I'm in cat mode now! 😸" : "Back to normal human mode."); |
| }); |
| |
| |
| trainBtn.addEventListener('click', () => { |
| trainModal.classList.remove('hidden'); |
| }); |
| cancelTrain.addEventListener('click', () => { |
| trainModal.classList.add('hidden'); |
| questionInput.value = ''; |
| answerInput.value = ''; |
| }); |
| |
| saveTrain.addEventListener('click', () => { |
| const question = questionInput.value.trim(); |
| const answer = answerInput.value.trim(); |
| |
| if (question && answer) { |
| |
| addMessage(`Thanks for teaching me! Now when someone says "${question}", I'll respond with "${answer}"`); |
| trainModal.classList.add('hidden'); |
| questionInput.value = ''; |
| answerInput.value = ''; |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
