Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChatNimbus - Telegram-like Messaging</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| .message-input { | |
| resize: none; | |
| scrollbar-width: none; | |
| } | |
| .message-input::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .chat-container { | |
| height: calc(100vh - 128px); | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| transform: translateX(-100%); | |
| transition: transform 0.3s ease; | |
| } | |
| .sidebar.active { | |
| transform: translateX(0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans flex"> | |
| <!-- Sidebar --> | |
| <div class="sidebar w-64 md:w-80 bg-white border-r border-gray-200 fixed h-full z-10"> | |
| <!-- Header --> | |
| <div class="flex items-center justify-between p-4 border-b border-gray-200"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">CN</div> | |
| <span class="ml-2 font-semibold">ChatNimbus</span> | |
| <a href="image-editor.html" class="text-blue-500 hover:text-blue-700 flex items-center"> | |
| <i data-feather="image" class="mr-1"></i> | |
| <span class="hidden md:inline">Image Editor</span> | |
| </a> | |
| </div> | |
| <button id="menu-toggle" class="md:hidden"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <!-- Search --> | |
| <div class="p-3 border-b border-gray-200"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search..." class="w-full pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <!-- Chats List --> | |
| <div class="overflow-y-auto h-[calc(100%-120px)]"> | |
| <div class="p-3 hover:bg-gray-100 cursor-pointer flex items-center border-b border-gray-100"> | |
| <div class="relative"> | |
| <img src="http://static.photos/people/200x200/1" class="w-12 h-12 rounded-full object-cover"> | |
| <span class="w-3 h-3 bg-green-500 rounded-full absolute bottom-0 right-0 border-2 border-white"></span> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-semibold">Alex Johnson</span> | |
| <span class="text-xs text-gray-500">12:30 PM</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">Hey, how are you doing?</p> | |
| </div> | |
| </div> | |
| <div class="p-3 hover:bg-gray-100 cursor-pointer flex items-center border-b border-gray-100"> | |
| <div class="relative"> | |
| <img src="http://static.photos/people/200x200/2" class="w-12 h-12 rounded-full object-cover"> | |
| <span class="w-3 h-3 bg-gray-400 rounded-full absolute bottom-0 right-0 border-2 border-white"></span> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-semibold">Sarah Miller</span> | |
| <span class="text-xs text-gray-500">10:45 AM</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">Meeting at 2 PM</p> | |
| </div> | |
| </div> | |
| <div class="p-3 hover:bg-gray-100 cursor-pointer flex items-center border-b border-gray-100"> | |
| <div class="relative"> | |
| <img src="http://static.photos/people/200x200/3" class="w-12 h-12 rounded-full object-cover"> | |
| <span class="w-3 h-3 bg-green-500 rounded-full absolute bottom-0 right-0 border-2 border-white"></span> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-semibold">Tech Group</span> | |
| <span class="text-xs text-gray-500">Yesterday</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">Mike: Check out this new framework!</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Chat Area --> | |
| <div class="flex-1 md:ml-64 lg:ml-80"> | |
| <!-- Chat Header --> | |
| <div class="bg-white p-4 border-b border-gray-200 flex items-center"> | |
| <button id="mobile-menu" class="md:hidden mr-2"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/1" class="w-10 h-10 rounded-full object-cover"> | |
| <div class="ml-3"> | |
| <div class="font-semibold">Alex Johnson</div> | |
| <div class="text-xs text-gray-500">Online</div> | |
| </div> | |
| </div> | |
| <div class="ml-auto flex space-x-4"> | |
| <a href="image-editor.html" class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="image"></i> | |
| </a> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="phone"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="video"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="search"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="more-vertical"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Messages --> | |
| <div class="chat-container overflow-y-auto bg-gray-50 p-4"> | |
| <div class="flex flex-col space-y-2"> | |
| <!-- Received message --> | |
| <div class="flex"> | |
| <div class="flex items-end max-w-xs md:max-w-md"> | |
| <img src="http://static.photos/people/200x200/1" class="w-8 h-8 rounded-full mr-2 object-cover"> | |
| <div class="bg-white p-3 rounded-lg shadow-sm"> | |
| <p>Hey there! How's it going?</p> | |
| <p class="text-xs text-gray-500 mt-1">12:30 PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sent message --> | |
| <div class="flex justify-end"> | |
| <div class="bg-blue-500 text-white p-3 rounded-lg shadow-sm max-w-xs md:max-w-md"> | |
| <p>I'm doing great! Just working on a new project.</p> | |
| <p class="text-xs text-blue-100 mt-1">12:32 PM <i data-feather="check" class="w-3 h-3 inline"></i></p> | |
| </div> | |
| </div> | |
| <!-- Received message --> | |
| <div class="flex"> | |
| <div class="flex items-end max-w-xs md:max-w-md"> | |
| <img src="http://static.photos/people/200x200/1" class="w-8 h-8 rounded-full mr-2 object-cover"> | |
| <div class="bg-white p-3 rounded-lg shadow-sm"> | |
| <p>That sounds interesting. What kind of project?</p> | |
| <p class="text-xs text-gray-500 mt-1">12:33 PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sent message --> | |
| <div class="flex justify-end"> | |
| <div class="bg-blue-500 text-white p-3 rounded-lg shadow-sm max-w-xs md:max-w-md"> | |
| <p>It's a messaging app like Telegram but with some unique features.</p> | |
| <p class="text-xs text-blue-100 mt-1">12:35 PM <i data-feather="check" class="w-3 h-3 inline"></i></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Message Input --> | |
| <div class="bg-white p-3 border-t border-gray-200"> | |
| <div class="flex items-center"> | |
| <button class="text-gray-500 hover:text-gray-700 mx-2"> | |
| <i data-feather="paperclip"></i> | |
| </button> | |
| <div class="flex-1"> | |
| <textarea class="message-input w-full border border-gray-200 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Write a message..." rows="1"></textarea> | |
| </div> | |
| <button class="bg-blue-500 text-white rounded-full p-2 ml-2 hover:bg-blue-600"> | |
| <i data-feather="send"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu').addEventListener('click', function() { | |
| document.querySelector('.sidebar').classList.toggle('active'); | |
| }); | |
| document.getElementById('menu-toggle').addEventListener('click', function() { | |
| document.querySelector('.sidebar').classList.remove('active'); | |
| }); | |
| // Auto-expand textarea | |
| const textarea = document.querySelector('.message-input'); | |
| textarea.addEventListener('input', function() { | |
| this.style.height = 'auto'; | |
| this.style.height = (this.scrollHeight) + 'px'; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |