lib/ ├── main.dart ├── models/ │ ├── message.dart │ ├── user.dart ├── services/ │ ├── auth_service.dart │ ├── chat_service.dart │ ├── notification_service.dart ├── screens/ │ ├── auth/ │ │ ├── login_screen.dart │ │ ├── register_screen.dart │ ├── chat/ │ │ ├── chat_list_screen.dart │ │ ├── chat_screen.dart │ ├── home_screen.dart │ ├── splash_screen.dart ├── widgets/ │ ├── chat_bubble.dart │ ├── custom_textfield.dart │ ├── user_tile.dart - Initial Deployment
d90d2da
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Flutter Chat App UI</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> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .chat-container { | |
| height: calc(100vh - 130px); | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| position: absolute; | |
| left: -100%; | |
| z-index: 50; | |
| } | |
| .sidebar.active { | |
| left: 0; | |
| } | |
| } | |
| .message-input:focus { | |
| outline: none; | |
| } | |
| .chat-bubble { | |
| max-width: 70%; | |
| } | |
| .chat-bubble.sent { | |
| border-radius: 18px 4px 18px 18px; | |
| } | |
| .chat-bubble.received { | |
| border-radius: 4px 18px 18px 18px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar w-80 bg-white shadow-lg"> | |
| <!-- Header --> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center bg-indigo-600 text-white"> | |
| <h1 class="text-xl font-bold">Chat App</h1> | |
| <button id="closeSidebar" class="md:hidden"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <!-- User profile --> | |
| <div class="p-4 border-b border-gray-200 flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">John Doe</p> | |
| <p class="text-xs text-gray-500">Online</p> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <div class="p-2"> | |
| <a href="#" class="flex items-center p-2 rounded-lg text-indigo-600 bg-indigo-50"> | |
| <i class="fas fa-comment-dots mr-3"></i> | |
| <span>Chats</span> | |
| </a> | |
| <a href="#" class="flex items-center p-2 rounded-lg text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-user-friends mr-3"></i> | |
| <span>Contacts</span> | |
| </a> | |
| <a href="#" class="flex items-center p-2 rounded-lg text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-cog mr-3"></i> | |
| <span>Settings</span> | |
| </a> | |
| </div> | |
| <!-- Chat list --> | |
| <div class="overflow-y-auto" style="height: calc(100vh - 230px)"> | |
| <div class="p-2"> | |
| <div class="flex items-center p-2 rounded-lg hover:bg-gray-100 cursor-pointer"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-purple-600"></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="ml-3 flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <p class="font-medium">Sarah Johnson</p> | |
| <span class="text-xs text-gray-500">2 min</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">Hey, how are you doing?</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-2 rounded-lg hover:bg-gray-100 cursor-pointer"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-blue-600"></i> | |
| </div> | |
| <span class="absolute bottom-0 right-0 w-3 h-3 bg-gray-300 rounded-full border-2 border-white"></span> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <p class="font-medium">Mike Peterson</p> | |
| <span class="text-xs text-gray-500">1 hr</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">Let's meet tomorrow</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-2 rounded-lg hover:bg-gray-100 cursor-pointer"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-green-600"></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="ml-3 flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <p class="font-medium">Emma Wilson</p> | |
| <span class="text-xs text-gray-500">3 hr</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">Did you see the news?</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex-1 flex flex-col"> | |
| <!-- Chat header --> | |
| <div class="p-4 border-b border-gray-200 bg-white flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <button id="toggleSidebar" class="md:hidden"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-purple-600"></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> | |
| <p class="font-medium">Sarah Johnson</p> | |
| <p class="text-xs text-gray-500">Online</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="text-gray-600 hover:text-indigo-600"> | |
| <i class="fas fa-phone"></i> | |
| </button> | |
| <button class="text-gray-600 hover:text-indigo-600"> | |
| <i class="fas fa-video"></i> | |
| </button> | |
| <button class="text-gray-600 hover:text-indigo-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Chat messages --> | |
| <div class="chat-container overflow-y-auto p-4 bg-gray-50"> | |
| <div class="space-y-3"> | |
| <!-- Date divider --> | |
| <div class="flex items-center justify-center my-4"> | |
| <span class="px-3 py-1 bg-white rounded-full text-xs text-gray-500 shadow-sm">Today</span> | |
| </div> | |
| <!-- Received message --> | |
| <div class="flex"> | |
| <div class="chat-bubble received bg-white p-3 shadow-sm"> | |
| <p>Hey there! How are you doing?</p> | |
| <p class="text-right text-xs text-gray-400 mt-1">10:30 AM</p> | |
| </div> | |
| </div> | |
| <!-- Sent message --> | |
| <div class="flex justify-end"> | |
| <div class="chat-bubble sent bg-indigo-100 p-3 shadow-sm"> | |
| <p>I'm good, thanks! Just working on some projects.</p> | |
| <p class="text-right text-xs text-gray-500 mt-1">10:32 AM</p> | |
| </div> | |
| </div> | |
| <!-- Received message --> | |
| <div class="flex"> | |
| <div class="chat-bubble received bg-white p-3 shadow-sm"> | |
| <p>That's great! Would you like to grab coffee later?</p> | |
| <p class="text-right text-xs text-gray-400 mt-1">10:33 AM</p> | |
| </div> | |
| </div> | |
| <!-- Sent message --> | |
| <div class="flex justify-end"> | |
| <div class="chat-bubble sent bg-indigo-100 p-3 shadow-sm"> | |
| <p>Sure, how about 3pm at the usual place?</p> | |
| <p class="text-right text-xs text-gray-500 mt-1">10:35 AM</p> | |
| </div> | |
| </div> | |
| <!-- Received message --> | |
| <div class="flex"> | |
| <div class="chat-bubble received bg-white p-3 shadow-sm"> | |
| <p>Perfect! See you then 😊</p> | |
| <p class="text-right text-xs text-gray-400 mt-1">10:36 AM</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Message input --> | |
| <div class="p-4 bg-white border-t border-gray-200"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| <div class="flex-1 relative"> | |
| <input type="text" placeholder="Type a message" class="message-input w-full py-2 px-4 bg-gray-100 rounded-full focus:bg-gray-200 focus:ring-2 focus:ring-indigo-200"> | |
| <button class="absolute right-3 top-2 text-gray-500 hover:text-indigo-600"> | |
| <i class="far fa-smile"></i> | |
| </button> | |
| </div> | |
| <button class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center text-white hover:bg-indigo-700"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle sidebar on mobile | |
| const toggleSidebar = document.getElementById('toggleSidebar'); | |
| const closeSidebar = document.getElementById('closeSidebar'); | |
| const sidebar = document.querySelector('.sidebar'); | |
| toggleSidebar.addEventListener('click', () => { | |
| sidebar.classList.add('active'); | |
| }); | |
| closeSidebar.addEventListener('click', () => { | |
| sidebar.classList.remove('active'); | |
| }); | |
| // Simulate sending a message | |
| const messageInput = document.querySelector('.message-input'); | |
| const sendButton = document.querySelector('.fa-paper-plane').parentElement; | |
| const chatContainer = document.querySelector('.chat-container'); | |
| sendButton.addEventListener('click', sendMessage); | |
| messageInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| function sendMessage() { | |
| const message = messageInput.value.trim(); | |
| if (message) { | |
| const now = new Date(); | |
| const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); | |
| const messageElement = document.createElement('div'); | |
| messageElement.className = 'flex justify-end'; | |
| messageElement.innerHTML = ` | |
| <div class="chat-bubble sent bg-indigo-100 p-3 shadow-sm"> | |
| <p>${message}</p> | |
| <p class="text-right text-xs text-gray-500 mt-1">${timeString}</p> | |
| </div> | |
| `; | |
| chatContainer.querySelector('.space-y-3').appendChild(messageElement); | |
| messageInput.value = ''; | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| // Simulate reply after 1 second | |
| setTimeout(() => { | |
| const replies = [ | |
| "That's interesting!", | |
| "I see what you mean.", | |
| "Let me think about that.", | |
| "Sounds good to me!", | |
| "What else is new?", | |
| "I agree with you." | |
| ]; | |
| const randomReply = replies[Math.floor(Math.random() * replies.length)]; | |
| const replyElement = document.createElement('div'); | |
| replyElement.className = 'flex'; | |
| replyElement.innerHTML = ` | |
| <div class="chat-bubble received bg-white p-3 shadow-sm"> | |
| <p>${randomReply}</p> | |
| <p class="text-right text-xs text-gray-400 mt-1">${new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</p> | |
| </div> | |
| `; | |
| chatContainer.querySelector('.space-y-3').appendChild(replyElement); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| }, 1000); | |
| } | |
| } | |
| // Auto-scroll to bottom of chat | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| </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=ALIMHGFY/chat-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |