Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChatterBox - Online Messaging App</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> | |
| /* Custom scrollbar */ | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 3px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| /* Message typing animation */ | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| .typing-indicator::after { | |
| content: '...'; | |
| display: inline-block; | |
| width: 0; | |
| animation: typing 1.5s steps(3, end) infinite; | |
| overflow: hidden; | |
| vertical-align: bottom; | |
| } | |
| /* Message bubble animation */ | |
| @keyframes messageAppear { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .message-animation { | |
| animation: messageAppear 0.3s ease-out forwards; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 h-screen flex items-center justify-center"> | |
| <div class="w-full max-w-4xl h-[90vh] bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col"> | |
| <!-- Header --> | |
| <div class="bg-indigo-600 text-white p-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center"> | |
| <i class="fas fa-comments text-xl"></i> | |
| </div> | |
| <h1 class="text-xl font-bold">ChatterBox</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full hover:bg-indigo-500 transition"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-indigo-500 transition"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Chat area --> | |
| <div class="flex-1 flex overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="w-1/3 border-r border-gray-200 bg-gray-50 flex flex-col"> | |
| <div class="p-3 border-b border-gray-200"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search conversations..." | |
| class="w-full bg-gray-100 rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-indigo-300"> | |
| <i class="fas fa-search absolute left-3 top-2.5 text-gray-500"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto custom-scrollbar"> | |
| <!-- Conversation list --> | |
| <div class="space-y-1 p-2"> | |
| <!-- Active conversation --> | |
| <div class="bg-indigo-100 rounded-lg p-3 cursor-pointer flex items-center space-x-3"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-300 flex items-center justify-center"> | |
| <i class="fas fa-user text-indigo-700"></i> | |
| </div> | |
| <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <h3 class="font-semibold text-indigo-900 truncate">John Doe</h3> | |
| <p class="text-sm text-gray-600 truncate">Hey, how are you doing?</p> | |
| </div> | |
| <div class="text-xs text-gray-500">2 min</div> | |
| </div> | |
| <!-- Other conversations --> | |
| <div class="hover:bg-gray-100 rounded-lg p-3 cursor-pointer flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-pink-200 flex items-center justify-center"> | |
| <i class="fas fa-user text-pink-600"></i> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <h3 class="font-semibold truncate">Jane Smith</h3> | |
| <p class="text-sm text-gray-600 truncate">Meeting at 3pm tomorrow</p> | |
| </div> | |
| <div class="text-xs text-gray-500">1h</div> | |
| </div> | |
| <div class="hover:bg-gray-100 rounded-lg p-3 cursor-pointer flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-blue-200 flex items-center justify-center"> | |
| <i class="fas fa-user text-blue-600"></i> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <h3 class="font-semibold truncate">Team Group</h3> | |
| <p class="text-sm text-gray-600 truncate">Alex: I'll send the files</p> | |
| </div> | |
| <div class="text-xs text-gray-500">5h</div> | |
| </div> | |
| <!-- More conversations --> | |
| <div class="hover:bg-gray-100 rounded-lg p-3 cursor-pointer flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-green-200 flex items-center justify-center"> | |
| <i class="fas fa-user text-green-600"></i> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <h3 class="font-semibold truncate">Mom</h3> | |
| <p class="text-sm text-gray-600 truncate">Call me when you're free</p> | |
| </div> | |
| <div class="text-xs text-gray-500">Yesterday</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- User profile --> | |
| <div class="p-3 border-t border-gray-200 flex items-center space-x-3 bg-white"> | |
| <div class="w-10 h-10 rounded-full bg-purple-200 flex items-center justify-center"> | |
| <i class="fas fa-user text-purple-600"></i> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <h3 class="font-semibold truncate">You</h3> | |
| <p class="text-xs text-gray-500 truncate">Online</p> | |
| </div> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-cog text-gray-500"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main chat --> | |
| <div class="flex-1 flex flex-col"> | |
| <!-- Chat header --> | |
| <div class="p-3 border-b border-gray-200 flex items-center space-x-3"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-300 flex items-center justify-center"> | |
| <i class="fas fa-user text-indigo-700"></i> | |
| </div> | |
| <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-semibold">John Doe</h3> | |
| <p class="text-xs text-gray-500">Online</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-phone text-gray-600"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-video text-gray-600"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-info-circle text-gray-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Messages --> | |
| <div class="flex-1 p-4 overflow-y-auto custom-scrollbar bg-gray-50" id="messagesContainer"> | |
| <!-- Date divider --> | |
| <div class="flex items-center my-4"> | |
| <div class="flex-1 border-t border-gray-300"></div> | |
| <span class="px-3 text-sm text-gray-500">Today</span> | |
| <div class="flex-1 border-t border-gray-300"></div> | |
| </div> | |
| <!-- Messages will be added here by JavaScript --> | |
| </div> | |
| <!-- Message input --> | |
| <div class="p-3 border-t border-gray-200 bg-white"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-2 rounded-full hover:bg-gray-100 text-gray-600"> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100 text-gray-600"> | |
| <i class="fas fa-image"></i> | |
| </button> | |
| <div class="flex-1 relative"> | |
| <input type="text" id="messageInput" placeholder="Type a message..." | |
| class="w-full bg-gray-100 rounded-full py-2 px-4 pr-10 focus:outline-none focus:ring-2 focus:ring-indigo-300"> | |
| <button class="absolute right-2 top-1.5 text-gray-500 hover:text-indigo-600"> | |
| <i class="far fa-smile"></i> | |
| </button> | |
| </div> | |
| <button id="sendButton" class="p-2 rounded-full bg-indigo-600 text-white hover:bg-indigo-700"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const messagesContainer = document.getElementById('messagesContainer'); | |
| const messageInput = document.getElementById('messageInput'); | |
| const sendButton = document.getElementById('sendButton'); | |
| // Sample messages data | |
| const messages = [ | |
| { | |
| sender: 'other', | |
| text: 'Hey there! How are you doing?', | |
| time: '10:30 AM' | |
| }, | |
| { | |
| sender: 'me', | |
| text: 'I\'m good, thanks! Just working on some projects.', | |
| time: '10:32 AM' | |
| }, | |
| { | |
| sender: 'other', | |
| text: 'That sounds interesting. What kind of projects?', | |
| time: '10:33 AM' | |
| }, | |
| { | |
| sender: 'other', | |
| text: 'I was thinking we could collaborate on something if you\'re interested.', | |
| time: '10:33 AM' | |
| } | |
| ]; | |
| // Display initial messages | |
| messages.forEach((message, index) => { | |
| addMessage(message.sender, message.text, message.time, index * 100); | |
| }); | |
| // Send message function | |
| function sendMessage() { | |
| const text = messageInput.value.trim(); | |
| if (text) { | |
| addMessage('me', text, getCurrentTime(), 0); | |
| messageInput.value = ''; | |
| // Simulate reply after 1-3 seconds | |
| setTimeout(() => { | |
| const replies = [ | |
| "That's interesting!", | |
| "I see what you mean.", | |
| "Let me think about that...", | |
| "Sounds good to me!", | |
| "What else is on your mind?" | |
| ]; | |
| const randomReply = replies[Math.floor(Math.random() * replies.length)]; | |
| addMessage('other', randomReply, getCurrentTime(), 0); | |
| }, 1000 + Math.random() * 2000); | |
| } | |
| } | |
| // Add message to the chat | |
| function addMessage(sender, text, time, delay) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `flex ${sender === 'me' ? 'justify-end' : 'justify-start'} mb-3 opacity-0 message-animation`; | |
| messageDiv.style.animationDelay = `${delay}ms`; | |
| messageDiv.innerHTML = ` | |
| <div class="max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${sender === 'me' ? 'bg-indigo-600 text-white rounded-tr-none' : 'bg-white text-gray-800 rounded-tl-none shadow'}"> | |
| <div class="text-sm">${text}</div> | |
| <div class="text-right mt-1"> | |
| <span class="text-xs ${sender === 'me' ? 'text-indigo-200' : 'text-gray-500'}">${time}</span> | |
| ${sender === 'me' ? '<i class="fas fa-check-double ml-1 text-xs text-indigo-200"></i>' : ''} | |
| </div> | |
| </div> | |
| `; | |
| messagesContainer.appendChild(messageDiv); | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| } | |
| // Get current time in HH:MM AM/PM format | |
| function getCurrentTime() { | |
| const now = new Date(); | |
| let hours = now.getHours(); | |
| const minutes = now.getMinutes().toString().padStart(2, '0'); | |
| const ampm = hours >= 12 ? 'PM' : 'AM'; | |
| hours = hours % 12; | |
| hours = hours ? hours : 12; // the hour '0' should be '12' | |
| return `${hours}:${minutes} ${ampm}`; | |
| } | |
| // Event listeners | |
| sendButton.addEventListener('click', sendMessage); | |
| messageInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| // Simulate typing indicator | |
| function showTypingIndicator() { | |
| const typingDiv = document.createElement('div'); | |
| typingDiv.className = 'flex justify-start mb-3'; | |
| typingDiv.innerHTML = ` | |
| <div class="px-4 py-2 rounded-lg bg-white text-gray-800 rounded-tl-none shadow"> | |
| <div class="text-sm typing-indicator">Typing</div> | |
| </div> | |
| `; | |
| messagesContainer.appendChild(typingDiv); | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| // Remove after 2 seconds | |
| setTimeout(() => { | |
| typingDiv.remove(); | |
| }, 2000); | |
| } | |
| // Randomly show typing indicator every 10-20 seconds | |
| setInterval(() => { | |
| if (Math.random() > 0.7) { // 30% chance to show typing | |
| showTypingIndicator(); | |
| } | |
| }, 10000 + Math.random() * 10000); | |
| }); | |
| </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=PrometheusGroup/my-chat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |