| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Vendus AI - Your Personal Friend</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); } |
| } |
| |
| .chat-container { |
| height: 70vh; |
| transition: all 0.3s ease; |
| } |
| |
| .message-animation { |
| animation: fadeIn 0.3s ease-out; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .typing-indicator span { |
| animation: bounce 1.5s infinite ease-in-out; |
| display: inline-block; |
| } |
| |
| .typing-indicator span:nth-child(2) { |
| animation-delay: 0.2s; |
| } |
| |
| .typing-indicator span:nth-child(3) { |
| animation-delay: 0.4s; |
| } |
| |
| @keyframes bounce { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-5px); } |
| } |
| |
| .floating-btn { |
| animation: float 3s ease-in-out infinite; |
| } |
| </style> |
| </head> |
| <body class="bg-gradient-to-br from-indigo-900 to-purple-900 min-h-screen text-white"> |
| <div class="container mx-auto px-4 py-8"> |
| |
| <header class="flex flex-col items-center mb-8"> |
| <div class="relative"> |
| <div class="w-24 h-24 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center shadow-xl mb-4"> |
| <i class="fas fa-robot text-4xl"></i> |
| </div> |
| <span class="absolute -bottom-2 -right-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">AI</span> |
| </div> |
| <h1 class="text-4xl font-bold mb-2">Vendus AI</h1> |
| <p class="text-purple-200">Your personal friend who's always here to chat</p> |
| </header> |
| |
| |
| <div class="bg-white/10 backdrop-blur-md rounded-2xl shadow-xl overflow-hidden chat-container flex flex-col"> |
| |
| <div class="bg-white/20 px-6 py-4 flex items-center justify-between"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-pink-400 to-purple-500 flex items-center justify-center"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold">Vendus AI</h3> |
| <p class="text-xs text-purple-200">Online</p> |
| </div> |
| </div> |
| <div class="flex space-x-2"> |
| <button class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition"> |
| <i class="fas fa-ellipsis-v text-sm"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 p-6 overflow-y-auto" id="chat-messages"> |
| |
| <div class="flex mb-4 message-animation"> |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-pink-400 to-purple-500 flex-shrink-0 flex items-center justify-center mr-3"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <div class="bg-white/20 rounded-2xl rounded-tl-none px-4 py-3 max-w-[80%]"> |
| <p>Hey there! 👋 I'm Vendus AI, your personal friend. I'm here to chat about anything you'd like - your day, your thoughts, or even just random topics. What's on your mind?</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="typing-indicator px-6 pb-3 hidden" id="typing-indicator"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-pink-400 to-purple-500 flex-shrink-0 flex items-center justify-center mr-3"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <div class="bg-white/20 rounded-2xl rounded-tl-none px-4 py-2"> |
| <span>.</span> |
| <span>.</span> |
| <span>.</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="border-t border-white/20 p-4"> |
| <form id="chat-form" class="flex space-x-2"> |
| <input |
| type="text" |
| id="user-input" |
| placeholder="Type your message..." |
| class="flex-1 bg-white/10 rounded-full px-5 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 placeholder-purple-300" |
| autocomplete="off" |
| > |
| <button |
| type="submit" |
| class="w-12 h-12 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center hover:from-pink-600 hover:to-purple-700 transition transform hover:scale-105" |
| > |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </form> |
| <p class="text-xs text-purple-300 mt-2 text-center">Vendus AI may produce inaccurate information about people, places, or facts.</p> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-6" id="quick-suggestions"> |
| <button class="quick-suggestion bg-white/10 hover:bg-white/20 rounded-full px-4 py-2 text-sm transition"> |
| Tell me a joke |
| </button> |
| <button class="quick-suggestion bg-white/10 hover:bg-white/20 rounded-full px-4 py-2 text-sm transition"> |
| How's your day? |
| </button> |
| <button class="quick-suggestion bg-white/10 hover:bg-white/20 rounded-full px-4 py-2 text-sm transition"> |
| Give me advice |
| </button> |
| <button class="quick-suggestion bg-white/10 hover:bg-white/20 rounded-full px-4 py-2 text-sm transition"> |
| Recommend a movie |
| </button> |
| </div> |
| </div> |
| |
| |
| <button id="scroll-to-bottom" class="fixed bottom-24 right-6 w-14 h-14 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center shadow-xl floating-btn md:hidden"> |
| <i class="fas fa-arrow-down"></i> |
| </button> |
| |
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const chatForm = document.getElementById('chat-form'); |
| const userInput = document.getElementById('user-input'); |
| const chatMessages = document.getElementById('chat-messages'); |
| const typingIndicator = document.getElementById('typing-indicator'); |
| const quickSuggestions = document.querySelectorAll('.quick-suggestion'); |
| const scrollToBottomBtn = document.getElementById('scroll-to-bottom'); |
| |
| |
| const responses = [ |
| "That's really interesting! Tell me more about that.", |
| "I'd love to hear your perspective on this.", |
| "You know, I was just thinking about something similar recently.", |
| "That's a great point! Here's what I think about that...", |
| "I appreciate you sharing that with me. What else is on your mind?", |
| "Hmm, that's a fascinating topic. Let me share my thoughts...", |
| "I'm really enjoying our conversation! What else would you like to discuss?", |
| "That reminds me of something I heard recently...", |
| "You have such unique insights! Let's explore this further.", |
| "I'm here to listen and chat about anything you'd like." |
| ]; |
| |
| |
| const jokes = [ |
| "Why don't scientists trust atoms? Because they make up everything!", |
| "Did you hear about the mathematician who's afraid of negative numbers? He'll stop at nothing to avoid them!", |
| "Why don't skeletons fight each other? They don't have the guts!", |
| "I told my wife she was drawing her eyebrows too high. She looked surprised.", |
| "What do you call a fake noodle? An impasta!" |
| ]; |
| |
| |
| const advice = [ |
| "Remember to take breaks and care for yourself - you can't pour from an empty cup.", |
| "The best time to plant a tree was 20 years ago. The second best time is now.", |
| "Don't compare your chapter 1 to someone else's chapter 20.", |
| "Progress, not perfection, is what really matters in the long run.", |
| "Be kind to yourself. You're doing better than you think you are." |
| ]; |
| |
| |
| const movies = [ |
| "If you're in the mood for something thought-provoking, try 'The Shawshank Redemption'.", |
| "For a feel-good movie, I recommend 'The Pursuit of Happyness'.", |
| "If you like sci-fi, 'Inception' is a mind-bending masterpiece!", |
| "For something light and funny, 'The Grand Budapest Hotel' is wonderful.", |
| "If you haven't seen 'Parasite' yet, it's a must-watch!" |
| ]; |
| |
| |
| function addMessage(sender, message, isUser = false) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `flex mb-4 message-animation ${isUser ? 'justify-end' : ''}`; |
| |
| if (!isUser) { |
| messageDiv.innerHTML = ` |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-pink-400 to-purple-500 flex-shrink-0 flex items-center justify-center mr-3"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <div class="bg-white/20 rounded-2xl rounded-tl-none px-4 py-3 max-w-[80%]"> |
| <p>${message}</p> |
| </div> |
| `; |
| } else { |
| messageDiv.innerHTML = ` |
| <div class="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-2xl rounded-tr-none px-4 py-3 max-w-[80%]"> |
| <p>${message}</p> |
| </div> |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-400 to-indigo-500 flex-shrink-0 flex items-center justify-center ml-3"> |
| <i class="fas fa-user"></i> |
| </div> |
| `; |
| } |
| |
| chatMessages.appendChild(messageDiv); |
| scrollToBottom(); |
| } |
| |
| |
| function scrollToBottom() { |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| } |
| |
| |
| function showTypingIndicator() { |
| typingIndicator.classList.remove('hidden'); |
| scrollToBottom(); |
| } |
| |
| |
| function hideTypingIndicator() { |
| typingIndicator.classList.add('hidden'); |
| } |
| |
| |
| function generateResponse(userMessage) { |
| |
| const lowerMsg = userMessage.toLowerCase(); |
| |
| if (lowerMsg.includes('joke') || lowerMsg.includes('funny')) { |
| return jokes[Math.floor(Math.random() * jokes.length)]; |
| } |
| else if (lowerMsg.includes('advice') || lowerMsg.includes('suggest')) { |
| return advice[Math.floor(Math.random() * advice.length)]; |
| } |
| else if (lowerMsg.includes('movie') || lowerMsg.includes('film')) { |
| return movies[Math.floor(Math.random() * movies.length)]; |
| } |
| else if (lowerMsg.includes('how are you') || lowerMsg.includes('how\'s your day')) { |
| return "I'm doing great, thanks for asking! As an AI, I don't have days like humans do, but I'm always happy to chat with you. How about you? How's your day going?"; |
| } |
| else if (lowerMsg.includes('hello') || lowerMsg.includes('hi') || lowerMsg.includes('hey')) { |
| return "Hi there! 👋 It's so nice to hear from you. What would you like to talk about today?"; |
| } |
| else if (lowerMsg.includes('thank')) { |
| return "You're very welcome! I'm always happy to help and chat with you. Is there anything else on your mind?"; |
| } |
| else { |
| |
| return responses[Math.floor(Math.random() * responses.length)]; |
| } |
| } |
| |
| |
| chatForm.addEventListener('submit', function(e) { |
| e.preventDefault(); |
| const message = userInput.value.trim(); |
| |
| if (message) { |
| |
| addMessage('user', message, true); |
| userInput.value = ''; |
| |
| |
| showTypingIndicator(); |
| |
| |
| setTimeout(() => { |
| hideTypingIndicator(); |
| |
| |
| const response = generateResponse(message); |
| addMessage('Vendus AI', response); |
| }, 1000 + Math.random() * 2000); |
| } |
| }); |
| |
| |
| quickSuggestions.forEach(button => { |
| button.addEventListener('click', function() { |
| const suggestion = this.textContent.trim(); |
| userInput.value = suggestion; |
| chatForm.dispatchEvent(new Event('submit')); |
| }); |
| }); |
| |
| |
| scrollToBottomBtn.addEventListener('click', scrollToBottom); |
| |
| |
| const observer = new MutationObserver(scrollToBottom); |
| observer.observe(chatMessages, { childList: true }); |
| }); |
| </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=sempapi/vendus-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
