| | <!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> |
