| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Cat GPT - The Purr-fect AI for Felines</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-10px); } |
| 100% { transform: translateY(0px); } |
| } |
| .floating { |
| animation: float 3s ease-in-out infinite; |
| } |
| .cat-ears { |
| position: relative; |
| } |
| .cat-ears::before, .cat-ears::after { |
| content: ''; |
| position: absolute; |
| top: -20px; |
| width: 0; |
| height: 0; |
| border-style: solid; |
| } |
| .cat-ears::before { |
| left: 10px; |
| border-width: 0 15px 20px 15px; |
| border-color: transparent transparent #f97316 transparent; |
| } |
| .cat-ears::after { |
| right: 10px; |
| border-width: 0 15px 20px 15px; |
| border-color: transparent transparent #f97316 transparent; |
| } |
| .typing-indicator::after { |
| content: '...'; |
| position: absolute; |
| animation: blink 1.5s infinite; |
| } |
| @keyframes blink { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
| .message-tail { |
| position: relative; |
| } |
| .message-tail::after { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| left: -10px; |
| width: 0; |
| height: 0; |
| border-style: solid; |
| border-width: 0 0 15px 15px; |
| border-color: transparent transparent #fef3c7 transparent; |
| } |
| .cat-scroll::-webkit-scrollbar { |
| width: 8px; |
| } |
| .cat-scroll::-webkit-scrollbar-track { |
| background: #ffedd5; |
| border-radius: 10px; |
| } |
| .cat-scroll::-webkit-scrollbar-thumb { |
| background: #f59e0b; |
| border-radius: 10px; |
| } |
| </style> |
| </head> |
| <body class="bg-amber-50 min-h-screen"> |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> |
| |
| <header class="cat-ears bg-orange-500 text-white rounded-t-2xl p-6 text-center relative"> |
| <h1 class="text-4xl font-bold mb-2">Cat GPT</h1> |
| <p class="text-amber-100">The purr-fect AI companion for your feline friend</p> |
| <div class="absolute top-4 right-4"> |
| <span class="bg-amber-200 text-amber-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">BETA</span> |
| </div> |
| </header> |
|
|
| |
| <div class="bg-white rounded-b-2xl shadow-lg overflow-hidden"> |
| |
| <div id="chat-messages" class="cat-scroll h-96 p-4 overflow-y-auto space-y-4"> |
| |
| <div class="flex justify-start"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-amber-200 flex items-center justify-center"> |
| <i class="fas fa-cat text-amber-700"></i> |
| </div> |
| <div class="ml-3 message-tail"> |
| <div class="bg-amber-100 rounded-lg py-2 px-4"> |
| <p class="text-sm text-gray-800">Meow! Welcome to Cat GPT! I'm your feline AI assistant. You can talk to me in English or meows! <span class="text-xs text-amber-600">(Sometimes I respond in meows too!)</span></p> |
| </div> |
| <p class="text-xs text-gray-500 mt-1">Just now</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="border-t border-amber-200 p-4 bg-amber-50"> |
| <div class="flex items-center"> |
| <div class="flex-grow relative"> |
| <input |
| id="user-input" |
| type="text" |
| placeholder="Type your message or meow here..." |
| class="w-full px-4 py-3 rounded-full border-2 border-amber-200 focus:border-amber-400 focus:outline-none bg-white text-gray-800 pr-12" |
| > |
| <button |
| id="meow-btn" |
| class="absolute right-3 top-1/2 transform -translate-y-1/2 bg-amber-200 hover:bg-amber-300 text-amber-800 rounded-full p-2 transition" |
| title="Insert random meow" |
| > |
| <i class="fas fa-paw"></i> |
| </button> |
| </div> |
| <button |
| id="send-btn" |
| class="ml-3 bg-orange-500 hover:bg-orange-600 text-white rounded-full p-3 transition transform hover:scale-105" |
| > |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| <div class="mt-2 flex justify-between items-center"> |
| <div class="text-xs text-amber-600"> |
| <span id="meow-counter">0 meows today</span> |
| </div> |
| <button |
| id="translate-btn" |
| class="text-xs bg-amber-200 hover:bg-amber-300 text-amber-800 px-2 py-1 rounded-full flex items-center" |
| > |
| <i class="fas fa-language mr-1"></i> Toggle Translation |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-8 bg-white rounded-xl shadow-md p-4"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-8 w-8 rounded-full bg-amber-200 flex items-center justify-center"> |
| <i class="fas fa-info-circle text-amber-700 text-sm"></i> |
| </div> |
| <div class="ml-3"> |
| <p class="text-sm text-gray-800" id="cat-fact">Did you know? Cats have a specialized collarbone that allows them to always land on their feet!</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="fixed bottom-4 right-4 floating"> |
| <div class="bg-orange-400 rounded-full p-3 shadow-lg"> |
| <i class="fas fa-cat text-white text-2xl"></i> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const chatMessages = document.getElementById('chat-messages'); |
| const userInput = document.getElementById('user-input'); |
| const sendBtn = document.getElementById('send-btn'); |
| const meowBtn = document.getElementById('meow-btn'); |
| const translateBtn = document.getElementById('translate-btn'); |
| const meowCounter = document.getElementById('meow-counter'); |
| const catFact = document.getElementById('cat-fact'); |
| |
| let meowCount = 0; |
| let translateMode = false; |
| let isTyping = false; |
| |
| |
| const catFacts = [ |
| "Cats spend 70% of their lives sleeping. That's 16 hours a day!", |
| "A cat's nose has a unique pattern, much like a human fingerprint.", |
| "Cats can rotate their ears 180 degrees to better locate sounds.", |
| "The oldest known pet cat existed 9,500 years ago in Cyprus.", |
| "Cats walk like camels and giraffes - they move both right feet first, then both left feet.", |
| "A cat's purr vibrates at a frequency of 25 to 150 Hertz, which can promote healing!", |
| "Cats have whiskers on the backs of their front legs as well as their faces.", |
| "The world's richest cat is worth $13 million after inheriting from his owner." |
| ]; |
| |
| |
| const meows = [ |
| "Meow", "Mrow", "Mrrp", "Mew", "Prrt", "Meee", "Mao", "Mrao", |
| "Meowww", "Mrow?", "Mew?", "Meow!", "Mreee", "Mrrr", "Mewww", "Miau" |
| ]; |
| |
| |
| const catResponses = [ |
| "Purr... I'm listening. Tell me more.", |
| "Meow meow mrow! (Translation: That sounds fascinating!)", |
| "I would chase that thought if it were a red dot!", |
| "Mew mew prrt. (Translation: I need more treats to process that.)", |
| "Have you considered taking a nap? It solves most problems.", |
| "Mrrp? (Translation: Can you explain that in simpler terms?)", |
| "I'm just a cat, but even I know that's a great idea!", |
| "Meowwwww! (Translation: That reminds me of the time I knocked over a vase!)", |
| "Is this about food? It's always about food.", |
| "Prrt prrt! (Translation: You're my favorite human!)", |
| "I could help, but I'm currently busy napping.", |
| "Mrow mrow meow? (Translation: Did you see that bird outside?)", |
| "Let me think about it... after this nap.", |
| "Meow! (Translation: Absolutely!)", |
| "Mew... (Translation: I'm not so sure about that.)", |
| "That sounds like a problem for Future Cat. Right now I'm busy." |
| ]; |
| |
| |
| function showRandomCatFact() { |
| const randomFact = catFacts[Math.floor(Math.random() * catFacts.length)]; |
| catFact.textContent = `Did you know? ${randomFact}`; |
| } |
| |
| |
| showRandomCatFact(); |
| setInterval(showRandomCatFact, 15000); |
| |
| |
| function addMessage(content, isUser = false) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'}`; |
| |
| const avatar = document.createElement('div'); |
| avatar.className = `flex-shrink-0 h-10 w-10 rounded-full ${isUser ? 'bg-orange-200' : 'bg-amber-200'} flex items-center justify-center`; |
| |
| const avatarIcon = document.createElement('i'); |
| avatarIcon.className = `fas ${isUser ? 'fa-user' : 'fa-cat'} ${isUser ? 'text-orange-700' : 'text-amber-700'}`; |
| avatar.appendChild(avatarIcon); |
| |
| const messageContent = document.createElement('div'); |
| messageContent.className = `${isUser ? 'mr-3' : 'ml-3'} ${!isUser ? 'message-tail' : ''}`; |
| |
| const messageBubble = document.createElement('div'); |
| messageBubble.className = `rounded-lg py-2 px-4 ${isUser ? 'bg-orange-100' : 'bg-amber-100'}`; |
| |
| const messageText = document.createElement('p'); |
| messageText.className = `text-sm ${isUser ? 'text-gray-800' : 'text-gray-800'}`; |
| messageText.textContent = content; |
| |
| const messageTime = document.createElement('p'); |
| messageTime.className = `text-xs text-gray-500 mt-1`; |
| |
| |
| const now = new Date(); |
| const hours = now.getHours().toString().padStart(2, '0'); |
| const minutes = now.getMinutes().toString().padStart(2, '0'); |
| messageTime.textContent = `${hours}:${minutes}`; |
| |
| messageBubble.appendChild(messageText); |
| messageContent.appendChild(messageBubble); |
| messageContent.appendChild(messageTime); |
| |
| if (isUser) { |
| messageDiv.appendChild(messageContent); |
| messageDiv.appendChild(avatar); |
| } else { |
| messageDiv.appendChild(avatar); |
| messageDiv.appendChild(messageContent); |
| } |
| |
| chatMessages.appendChild(messageDiv); |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| } |
| |
| |
| function generateMeow() { |
| const meowCount = Math.floor(Math.random() * 3) + 1; |
| let meow = ''; |
| |
| for (let i = 0; i < meowCount; i++) { |
| const randomMeow = meows[Math.floor(Math.random() * meows.length)]; |
| meow += randomMeow; |
| |
| |
| if (i < meowCount - 1) { |
| meow += ' '; |
| } else { |
| |
| if (Math.random() < 0.3) { |
| meow += '?'; |
| } |
| |
| else if (Math.random() < 0.3) { |
| meow += '!'; |
| } |
| |
| else if (Math.random() < 0.2) { |
| meow += '...'; |
| } |
| } |
| } |
| |
| return meow; |
| } |
| |
| |
| function getCatResponse(userMessage) { |
| |
| const isMeow = /meow|mew|mrow|miau|prrt|mrrp/i.test(userMessage); |
| |
| |
| if (isMeow && Math.random() < 0.4) { |
| return generateMeow(); |
| } |
| |
| else if (Math.random() < 0.2) { |
| return generateMeow(); |
| } |
| |
| else { |
| return catResponses[Math.floor(Math.random() * catResponses.length)]; |
| } |
| } |
| |
| |
| function showTypingIndicator() { |
| if (isTyping) return; |
| |
| isTyping = true; |
| |
| const typingDiv = document.createElement('div'); |
| typingDiv.className = 'flex justify-start'; |
| |
| const avatar = document.createElement('div'); |
| avatar.className = 'flex-shrink-0 h-10 w-10 rounded-full bg-amber-200 flex items-center justify-center'; |
| |
| const avatarIcon = document.createElement('i'); |
| avatarIcon.className = 'fas fa-cat text-amber-700'; |
| avatar.appendChild(avatarIcon); |
| |
| const typingContent = document.createElement('div'); |
| typingContent.className = 'ml-3 message-tail'; |
| |
| const typingBubble = document.createElement('div'); |
| typingBubble.className = 'bg-amber-100 rounded-lg py-2 px-4 typing-indicator'; |
| typingBubble.id = 'typing-indicator'; |
| |
| typingContent.appendChild(typingBubble); |
| |
| typingDiv.appendChild(avatar); |
| typingDiv.appendChild(typingContent); |
| |
| chatMessages.appendChild(typingDiv); |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| } |
| |
| |
| function hideTypingIndicator() { |
| const indicator = document.getElementById('typing-indicator'); |
| if (indicator) { |
| indicator.parentElement.parentElement.remove(); |
| } |
| isTyping = false; |
| } |
| |
| |
| function processInput() { |
| const message = userInput.value.trim(); |
| if (message === '') return; |
| |
| |
| const isMeow = /meow|mew|mrow|miau|prrt|mrrp/i.test(message); |
| if (isMeow) { |
| meowCount++; |
| meowCounter.textContent = `${meowCount} meow${meowCount !== 1 ? 's' : ''} today`; |
| } |
| |
| addMessage(message, true); |
| userInput.value = ''; |
| |
| |
| showTypingIndicator(); |
| |
| |
| const thinkingTime = Math.random() * 2000 + 1000; |
| |
| setTimeout(() => { |
| hideTypingIndicator(); |
| |
| |
| const response = getCatResponse(message); |
| |
| |
| if (translateMode && /meow|mew|mrow|miau|prrt|mrrp/i.test(response)) { |
| |
| const translatedResponse = catResponses.find(r => |
| r.toLowerCase().includes(response.toLowerCase()) && |
| r.includes('Translation:') |
| ); |
| |
| if (translatedResponse) { |
| addMessage(response); |
| |
| setTimeout(() => { |
| addMessage(translatedResponse.match(/\(Translation: (.*?)\)/)[1]); |
| }, 1000); |
| } else { |
| addMessage(response); |
| } |
| } else { |
| addMessage(response); |
| } |
| }, thinkingTime); |
| } |
| |
| |
| sendBtn.addEventListener('click', processInput); |
| |
| userInput.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| processInput(); |
| } |
| }); |
| |
| meowBtn.addEventListener('click', function() { |
| const randomMeow = generateMeow(); |
| const currentInput = userInput.value; |
| userInput.value = currentInput ? `${currentInput} ${randomMeow}` : randomMeow; |
| userInput.focus(); |
| }); |
| |
| translateBtn.addEventListener('click', function() { |
| translateMode = !translateMode; |
| translateBtn.classList.toggle('bg-amber-300'); |
| translateBtn.innerHTML = translateMode |
| ? '<i class="fas fa-language mr-1"></i> Translation ON' |
| : '<i class="fas fa-language mr-1"></i> Translation OFF'; |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MaxLeft/catgpt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
