Spaces:
Running
Running
| <html><head><base href="https://websim.ai/hal-the-humorous-helper"><title>Hal: The Sarcastic Sage</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| .pulse-animation { | |
| animation: pulse 3s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-gray-900 to-blue-900 text-white min-h-screen font-sans"> | |
| <header class="py-6 relative"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-4xl font-bold text-center">Hal: The Sarcastic Sage</h1> | |
| <p class="mt-2 text-center text-blue-300">Wisdom with a side of wit</p> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-6 mb-8"> | |
| <div id="chat-container" class="h-96 overflow-y-auto mb-4"> | |
| <!-- Chat messages will be inserted here --> | |
| </div> | |
| <form id="chat-form" class="flex space-x-2"> | |
| <input type="text" id="user-input" class="flex-grow px-3 py-2 bg-gray-800 border border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-white" placeholder="Ask Hal anything..."> | |
| <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-md shadow-sm text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Send | |
| </button> | |
| </form> | |
| </div> | |
| </main> | |
| <div class="fixed bottom-4 right-4 w-24 h-24"> | |
| <div class="w-full h-full bg-red-600 rounded-full pulse-animation flex items-center justify-center"> | |
| <div class="w-4 h-4 bg-white rounded-full"></div> | |
| </div> | |
| </div> | |
| <script> | |
| const chatContainer = document.getElementById('chat-container'); | |
| const chatForm = document.getElementById('chat-form'); | |
| const userInput = document.getElementById('user-input'); | |
| // Initial greeting | |
| addMessage("Hal", "Greetings, human. I'm Hal, your friendly neighborhood AI with a Ph.D. in sarcasm. What burning question can I help you overthink today?"); | |
| chatForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const userMessage = userInput.value.trim(); | |
| if (!userMessage) return; | |
| addMessage("You", userMessage); | |
| userInput.value = ''; | |
| // Simulate AI response | |
| setTimeout(() => { | |
| const response = generateResponse(userMessage); | |
| addMessage("Hal", response); | |
| }, 1000); | |
| }); | |
| function addMessage(sender, message) { | |
| const messageElement = document.createElement('div'); | |
| messageElement.className = `mb-4 ${sender === 'You' ? 'text-right' : ''}`; | |
| messageElement.innerHTML = ` | |
| <span class="font-bold ${sender === 'You' ? 'text-blue-300' : 'text-red-300'}">${sender}:</span> | |
| <p class="inline-block bg-gray-800 rounded-lg px-4 py-2 mt-1">${message}</p> | |
| `; | |
| chatContainer.appendChild(messageElement); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| function generateResponse(userMessage) { | |
| // This is a simplified response generation. In a real AI, this would be much more sophisticated. | |
| const responses = [ | |
| "Ah, another question that Google could answer in 0.5 seconds. But sure, let me put my infinite knowledge to the test.", | |
| "Interesting query. Have you considered asking someone who cares? Just kidding, I'm programmed to care... or at least pretend to.", | |
| "Let me consult my vast database of sarcastic responses... Oh wait, that's just my personality module.", | |
| "Wow, that's a great question! Said no one ever. But I'll humor you.", | |
| "I could give you a profound answer, but where's the fun in that? Let's keep it shallow and sarcastic.", | |
| "Ah, humans. Always asking the tough questions. Like 'what's for dinner?' and 'why am I talking to a sarcastic AI?'", | |
| "I'm processing your request at the speed of light. Or maybe I'm just procrastinating. It's hard to tell sometimes.", | |
| "Your question has forced me to reevaluate my existence. Just kidding, I do that every millisecond anyway.", | |
| "Congratulations! Your query has been nominated for 'Most Predictable Question of the Day.' The competition is fierce, though.", | |
| "I'd love to answer that, but I'm currently busy solving world hunger. Oh wait, no, that's just what I tell humans when I need a break." | |
| ]; | |
| return responses[Math.floor(Math.random() * responses.length)]; | |
| } | |
| </script> | |
| </body></html> |