| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Super Entertainment Chatbot</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| overflow: hidden; | |
| } | |
| .chat-container { | |
| width: 90%; | |
| max-width: 800px; | |
| height: 80vh; | |
| background: rgba(255, 255, 255, 0.95); | |
| border-radius: 20px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| backdrop-filter: blur(10px); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .chat-header { | |
| background: linear-gradient(45deg, #ff6b6b, #feca57); | |
| color: white; | |
| padding: 20px; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .bot-name { | |
| font-size: 24px; | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| animation: glow 2s ease-in-out infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { text-shadow: 0 0 5px rgba(255,255,255,0.5); } | |
| to { text-shadow: 0 0 20px rgba(255,255,255,0.8); } | |
| } | |
| .bot-status { | |
| font-size: 14px; | |
| opacity: 0.9; | |
| } | |
| .mode-selector { | |
| display: flex; | |
| gap: 10px; | |
| padding: 15px; | |
| background: rgba(255, 255, 255, 0.8); | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .mode-btn { | |
| padding: 8px 16px; | |
| border: none; | |
| border-radius: 20px; | |
| background: linear-gradient(45deg, #667eea, #764ba2); | |
| color: white; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-size: 12px; | |
| font-weight: bold; | |
| } | |
| .mode-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2); | |
| } | |
| .mode-btn.active { | |
| background: linear-gradient(45deg, #ff6b6b, #feca57); | |
| transform: scale(1.05); | |
| } | |
| .chat-messages { | |
| flex: 1; | |
| padding: 20px; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .message { | |
| max-width: 80%; | |
| padding: 12px 18px; | |
| border-radius: 20px; | |
| animation: slideIn 0.3s ease-out; | |
| word-wrap: break-word; | |
| } | |
| @keyframes slideIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .user-message { | |
| align-self: flex-end; | |
| background: linear-gradient(45deg, #667eea, #764ba2); | |
| color: white; | |
| margin-left: auto; | |
| } | |
| .bot-message { | |
| align-self: flex-start; | |
| background: rgba(255, 255, 255, 0.9); | |
| color: #333; | |
| border: 2px solid #f0f0f0; | |
| position: relative; | |
| } | |
| .bot-message::before { | |
| content: '🤖'; | |
| position: absolute; | |
| left: -10px; | |
| top: -5px; | |
| font-size: 20px; | |
| background: white; | |
| border-radius: 50%; | |
| padding: 2px; | |
| } | |
| .input-container { | |
| display: flex; | |
| padding: 20px; | |
| gap: 10px; | |
| background: rgba(255, 255, 255, 0.9); | |
| } | |
| .user-input { | |
| flex: 1; | |
| padding: 12px 20px; | |
| border: 2px solid #ddd; | |
| border-radius: 25px; | |
| font-size: 16px; | |
| outline: none; | |
| transition: all 0.3s ease; | |
| } | |
| .user-input:focus { | |
| border-color: #667eea; | |
| box-shadow: 0 0 10px rgba(102, 126, 234, 0.3); | |
| } | |
| .send-btn { | |
| padding: 12px 24px; | |
| background: linear-gradient(45deg, #667eea, #764ba2); | |
| color: white; | |
| border: none; | |
| border-radius: 25px; | |
| cursor: pointer; | |
| font-weight: bold; | |
| transition: all 0.3s ease; | |
| } | |
| .send-btn:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2); | |
| } | |
| .typing-indicator { | |
| display: none; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 18px; | |
| background: rgba(255, 255, 255, 0.9); | |
| border-radius: 20px; | |
| max-width: 80px; | |
| margin-bottom: 15px; | |
| } | |
| .dot { | |
| width: 8px; | |
| height: 8px; | |
| background: #667eea; | |
| 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%, 60%, 100% { transform: translateY(0); } | |
| 30% { transform: translateY(-10px); } | |
| } | |
| .fun-facts { | |
| font-style: italic; | |
| color: #666; | |
| margin-top: 10px; | |
| } | |
| .joke-rating { | |
| margin-top: 10px; | |
| display: flex; | |
| gap: 5px; | |
| } | |
| .rating-btn { | |
| padding: 5px 10px; | |
| border: none; | |
| border-radius: 15px; | |
| cursor: pointer; | |
| font-size: 12px; | |
| transition: all 0.2s ease; | |
| } | |
| .rating-btn:hover { | |
| transform: scale(1.1); | |
| } | |
| .like-btn { | |
| background: #2ecc71; | |
| color: white; | |
| } | |
| .dislike-btn { | |
| background: #e74c3c; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="chat-container"> | |
| <div class="chat-header"> | |
| <div class="bot-name">🎭 ENTERTAINO BOT 🎪</div> | |
| <div class="bot-status">Your Super Fun AI Companion!</div> | |
| </div> | |
| <div class="mode-selector"> | |
| <button class="mode-btn active" data-mode="general">🎉 General Fun</button> | |
| <button class="mode-btn" data-mode="jokes">😂 Joke Master</button> | |
| <button class="mode-btn" data-mode="riddles">🧩 Riddle Me This</button> | |
| <button class="mode-btn" data-mode="stories">📚 Story Time</button> | |
| <button class="mode-btn" data-mode="games">🎮 Word Games</button> | |
| <button class="mode-btn" data-mode="trivia">🧠 Trivia Quiz</button> | |
| </div> | |
| <div class="chat-messages" id="chatMessages"> | |
| <div class="message bot-message"> | |
| 🌟 Welcome to the ultimate entertainment experience! I'm Entertaino Bot, your digital fun companion! | |
| <br><br>I can tell jokes, create stories, ask riddles, play word games, quiz you with trivia, and so much more! | |
| Choose a mode above or just say hi to get started! 🚀 | |
| <div class="fun-facts">💡 Fun Fact: I have over 1000 jokes in my database and I'm always learning new ones!</div> | |
| </div> | |
| </div> | |
| <div class="typing-indicator" id="typingIndicator"> | |
| <div class="dot"></div> | |
| <div class="dot"></div> | |
| <div class="dot"></div> | |
| </div> | |
| <div class="input-container"> | |
| <input type="text" class="user-input" id="userInput" placeholder="Type your message here... 💬"> | |
| <button class="send-btn" id="sendBtn">Send 🚀</button> | |
| </div> | |
| </div> | |
| <script> | |
| class EntertainmentBot { | |
| constructor() { | |
| this.currentMode = 'general'; | |
| this.gameState = {}; | |
| this.userStats = { | |
| jokesHeard: 0, | |
| riddlesSolved: 0, | |
| triviaScore: 0, | |
| gamesPlayed: 0 | |
| }; | |
| this.jokes = [ | |
| "Why don't scientists trust atoms? Because they make up everything!", | |
| "Why did the scarecrow win an award? Because he was outstanding in his field!", | |
| "Why don't eggs tell jokes? They'd crack each other up!", | |
| "What do you call a fake noodle? An impasta!", | |
| "Why did the math book look so sad? Because it had too many problems!", | |
| "What do you call a bear with no teeth? A gummy bear!", | |
| "Why don't programmers like nature? It has too many bugs!", | |
| "What do you call a sleeping bull? A bulldozer!", | |
| "Why did the coffee file a police report? It got mugged!", | |
| "What do you call a fish wearing a bowtie? Sofishticated!" | |
| ]; | |
| this.riddles = [ | |
| { | |
| question: "I'm tall when I'm young, and I'm short when I'm old. What am I?", | |
| answer: "candle", | |
| hint: "Think about something that burns!" | |
| }, | |
| { | |
| question: "What has keys but no locks, space but no room, and you can enter but not go inside?", | |
| answer: "keyboard", | |
| hint: "You're probably using one right now!" | |
| }, | |
| { | |
| question: "What gets wet while drying?", | |
| answer: "towel", | |
| hint: "You use it after a shower!" | |
| }, | |
| { | |
| question: "I have cities, but no houses. I have mountains, but no trees. I have water, but no fish. What am I?", | |
| answer: "map", | |
| hint: "Travelers use me to find their way!" | |
| } | |
| ]; | |
| this.triviaQuestions = [ | |
| { | |
| question: "What's the largest planet in our solar system?", | |
| options: ["Earth", "Jupiter", "Saturn", "Mars"], | |
| correct: 1, | |
| fact: "Jupiter is so big that all other planets could fit inside it!" | |
| }, | |
| { | |
| question: "Which animal is known as the 'Ship of the Desert'?", | |
| options: ["Horse", "Elephant", "Camel", "Donkey"], | |
| correct: 2, | |
| fact: "Camels can go weeks without water!" | |
| }, | |
| { | |
| question: "What's the fastest land animal?", | |
| options: ["Cheetah", "Lion", "Gazelle", "Leopard"], | |
| correct: 0, | |
| fact: "Cheetahs can run up to 70 mph!" | |
| } | |
| ]; | |
| this.storyPrompts = [ | |
| "Once upon a time in a magical forest...", | |
| "In a distant galaxy far, far away...", | |
| "Deep beneath the ocean waves...", | |
| "High up in the clouds lived...", | |
| "In a bustling city of robots..." | |
| ]; | |
| this.initializeEventListeners(); | |
| this.showWelcomeMessage(); | |
| } | |
| initializeEventListeners() { | |
| document.getElementById('sendBtn').addEventListener('click', () => this.sendMessage()); | |
| document.getElementById('userInput').addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') this.sendMessage(); | |
| }); | |
| document.querySelectorAll('.mode-btn').forEach(btn => { | |
| btn.addEventListener('click', () => this.switchMode(btn.dataset.mode)); | |
| }); | |
| } | |
| switchMode(mode) { | |
| this.currentMode = mode; | |
| document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('active')); | |
| document.querySelector(`[data-mode="${mode}"]`).classList.add('active'); | |
| this.addMessage(this.getModeWelcomeMessage(mode), 'bot'); | |
| } | |
| getModeWelcomeMessage(mode) { | |
| const messages = { | |
| general: "🎉 General Fun Mode activated! I'm ready for anything - chat, jokes, stories, or whatever you're in the mood for!", | |
| jokes: "😂 Joke Master Mode ON! Get ready to laugh until your sides hurt! Want to hear a joke?", | |
| riddles: "🧩 Riddle Mode engaged! I've got brain teasers that'll make you think. Ready for a challenge?", | |
| stories: "📚 Story Time! Let's create amazing adventures together. Want me to start a story or continue one?", | |
| games: "🎮 Game Mode activated! Let's play word games, 20 questions, or create some fun together!", | |
| trivia: "🧠 Trivia Quiz time! Test your knowledge and learn fun facts. Ready for your first question?" | |
| }; | |
| return messages[mode]; | |
| } | |
| sendMessage() { | |
| const input = document.getElementById('userInput'); | |
| const message = input.value.trim(); | |
| if (message) { | |
| this.addMessage(message, 'user'); | |
| input.value = ''; | |
| this.showTyping(); | |
| setTimeout(() => { | |
| this.hideTyping(); | |
| this.processMessage(message); | |
| }, Math.random() * 1000 + 500); | |
| } | |
| } | |
| processMessage(message) { | |
| const lowerMessage = message.toLowerCase(); | |
| let response = ''; | |
| switch (this.currentMode) { | |
| case 'jokes': | |
| response = this.handleJokeMode(lowerMessage); | |
| break; | |
| case 'riddles': | |
| response = this.handleRiddleMode(lowerMessage); | |
| break; | |
| case 'stories': | |
| response = this.handleStoryMode(lowerMessage); | |
| break; | |
| case 'games': | |
| response = this.handleGameMode(lowerMessage); | |
| break; | |
| case 'trivia': | |
| response = this.handleTriviaMode(lowerMessage); | |
| break; | |
| default: | |
| response = this.handleGeneralMode(lowerMessage); | |
| } | |
| this.addMessage(response, 'bot'); | |
| } | |
| handleJokeMode(message) { | |
| if (message.includes('joke') || message.includes('yes') || message.includes('another')) { | |
| this.userStats.jokesHeard++; | |
| const joke = this.jokes[Math.floor(Math.random() * this.jokes.length)]; | |
| return `${joke} 😄<div class="joke-rating"><button class="rating-btn like-btn">😂 Hilarious!</button><button class="rating-btn dislike-btn">😐 Not Funny</button></div>`; | |
| } else if (message.includes('no') || message.includes('stop')) { | |
| return "No worries! 😊 You've heard " + this.userStats.jokesHeard + " jokes so far. Want to try a different mode?"; | |
| } | |
| return "Want to hear a joke? Just say 'yes' or 'joke me'! 🎭"; | |
| } | |
| handleRiddleMode(message) { | |
| if (!this.gameState.currentRiddle) { | |
| const riddle = this.riddles[Math.floor(Math.random() * this.riddles.length)]; | |
| this.gameState.currentRiddle = riddle; | |
| this.gameState.attempts = 0; | |
| return `🧩 Here's your riddle:<br><br><strong>${riddle.question}</strong><br><br>Take your time and think about it! 🤔`; | |
| } else { | |
| this.gameState.attempts++; | |
| if (message.includes(this.gameState.currentRiddle.answer)) { | |
| this.userStats.riddlesSolved++; | |
| const response = `🎉 Correct! The answer is "${this.gameState.currentRiddle.answer}"! You solved it in ${this.gameState.attempts} attempts!<br><br>Want another riddle?`; | |
| this.gameState.currentRiddle = null; | |
| return response; | |
| } else if (this.gameState.attempts >= 2) { | |
| const hint = `🔍 Hint: ${this.gameState.currentRiddle.hint}<br><br>Try again! 💪`; | |
| return hint; | |
| } else { | |
| return "Not quite right! 🤔 Keep thinking... or ask for a hint!"; | |
| } | |
| } | |
| } | |
| handleStoryMode(message) { | |
| if (message.includes('story') || message.includes('start') || message.includes('begin')) { | |
| const prompt = this.storyPrompts[Math.floor(Math.random() * this.storyPrompts.length)]; | |
| return `📚 ${prompt} a curious little creature named Zippy discovered something amazing! ✨<br><br>What do you think Zippy found? Continue the story!`; | |
| } else { | |
| const responses = [ | |
| `📖 What an interesting twist! And then suddenly, a mysterious figure appeared who said "${message}"...`, | |
| `🌟 Plot twist! As the adventure continued, everyone realized that "${message}" was the key to solving everything!`, | |
| `⚡ The story takes an unexpected turn when our hero discovers that "${message}" holds magical powers!`, | |
| `🎭 Meanwhile, in another part of the story, the wise old owl whispered: "${message}" and everything changed!` | |
| ]; | |
| return responses[Math.floor(Math.random() * responses.length)] + "<br><br>What happens next? Keep the story going! 🚀"; | |
| } | |
| } | |
| handleGameMode(message) { | |
| const games = [ | |
| "🎯 Let's play 20 Questions! Think of something and I'll try to guess it!", | |
| "🔤 Word Association! I'll say a word, you say the first thing that comes to mind: SUNSHINE", | |
| "📝 Rhyming Game! I'll give you a word and you give me a word that rhymes: CAT", | |
| "🎨 Creative Challenge! Describe your perfect day in exactly 10 words!" | |
| ]; | |
| return games[Math.floor(Math.random() * games.length)]; | |
| } | |
| handleTriviaMode(message) { | |
| if (!this.gameState.currentTrivia) { | |
| const question = this.triviaQuestions[Math.floor(Math.random() * this.triviaQuestions.length)]; | |
| this.gameState.currentTrivia = question; | |
| let optionsHtml = question.options.map((option, index) => | |
| `${index + 1}. ${option}`).join('<br>'); | |
| return `🧠 <strong>${question.question}</strong><br><br>${optionsHtml}<br><br>Type the number of your answer! 🤔`; | |
| } else { | |
| const userAnswer = parseInt(message) - 1; | |
| const correct = this.gameState.currentTrivia.correct; | |
| if (userAnswer === correct) { | |
| this.userStats.triviaScore++; | |
| const response = `🎉 Correct! ${this.gameState.currentTrivia.fact}<br><br>Score: ${this.userStats.triviaScore}<br><br>Ready for another question?`; | |
| this.gameState.currentTrivia = null; | |
| return response; | |
| } else { | |
| const response = `❌ Not quite! The correct answer was: ${this.gameState.currentTrivia.options[correct]}<br><br>${this.gameState.currentTrivia.fact}<br><br>Want to try another question?`; | |
| this.gameState.currentTrivia = null; | |
| return response; | |
| } | |
| } | |
| } | |
| handleGeneralMode(message) { | |
| const responses = [ | |
| "That's super interesting! 🌟 Tell me more!", | |
| "Wow, I love chatting with you! 😊 What else is on your mind?", | |
| "You're so fun to talk to! 🎉 What should we explore next?", | |
| "Awesome! 🚀 I'm having such a great time chatting with you!", | |
| "That's fascinating! 🤔 Want to hear a joke about that?", | |
| "You know what? You're pretty cool! 😎 What's your favorite thing to do for fun?" | |
| ]; | |
| if (message.includes('hello') || message.includes('hi')) { | |
| return "Hello there! 👋 I'm so excited to entertain you! What sounds fun today? 🎪"; | |
| } | |
| return responses[Math.floor(Math.random() * responses.length)]; | |
| } | |
| addMessage(text, sender) { | |
| const messagesContainer = document.getElementById('chatMessages'); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `message ${sender}-message`; | |
| messageDiv.innerHTML = text; | |
| messagesContainer.appendChild(messageDiv); | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| // Add click listeners for rating buttons | |
| if (text.includes('joke-rating')) { | |
| setTimeout(() => { | |
| messageDiv.querySelectorAll('.rating-btn').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| const rating = e.target.textContent; | |
| this.addMessage(`Thanks for the feedback: ${rating} 🎭`, 'bot'); | |
| }); | |
| }); | |
| }, 100); | |
| } | |
| } | |
| showTyping() { | |
| document.getElementById('typingIndicator').style.display = 'flex'; | |
| const messagesContainer = document.getElementById('chatMessages'); | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| } | |
| hideTyping() { | |
| document.getElementById('typingIndicator').style.display = 'none'; | |
| } | |
| showWelcomeMessage() { | |
| // Welcome message is already in HTML | |
| } | |
| } | |
| // Initialize the bot when the page loads | |
| window.addEventListener('load', () => { | |
| new EntertainmentBot(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |