Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LoveConnect Messagerie</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> | |
| .message-container { | |
| scrollbar-width: thin; | |
| scrollbar-color: #ec4899 #f3f4f6; | |
| } | |
| .message-container::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .message-container::-webkit-scrollbar-track { | |
| background: #f3f4f6; | |
| } | |
| .message-container::-webkit-scrollbar-thumb { | |
| background-color: #ec4899; | |
| border-radius: 3px; | |
| } | |
| .typing-indicator::after { | |
| content: "..."; | |
| animation: typing 1.5s infinite; | |
| } | |
| @keyframes typing { | |
| 0% { content: "."; } | |
| 33% { content: ".."; } | |
| 66% { content: "..."; } | |
| } | |
| .message-bubble { | |
| max-width: 70%; | |
| word-wrap: break-word; | |
| } | |
| .emoji-picker { | |
| transform: translateY(-100%); | |
| transition: all 0.3s ease; | |
| } | |
| .emoji-picker.active { | |
| transform: translateY(0); | |
| } | |
| .theme-selector { | |
| transform: translateX(-100%); | |
| transition: all 0.3s ease; | |
| } | |
| .theme-selector.active { | |
| transform: translateX(0); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex items-center justify-between"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <i class="fas fa-comments text-pink-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold">LoveConnect Messages</span> | |
| </div> | |
| <!-- User Menu --> | |
| <div class="flex items-center space-x-4"> | |
| <button class="text-gray-600 hover:text-pink-500" id="theme-toggle"> | |
| <i class="fas fa-palette text-xl"></i> | |
| </button> | |
| <div class="relative"> | |
| <button class="flex items-center space-x-1 p-1 rounded-full hover:bg-gray-100"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Profil" class="w-8 h-8 rounded-full"> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="container mx-auto px-4 py-4 flex flex-col lg:flex-row"> | |
| <!-- Left Sidebar - Conversations --> | |
| <aside class="w-full lg:w-1/3 xl:w-1/4 bg-white rounded-lg shadow mb-4 lg:mb-0 lg:mr-4"> | |
| <!-- Search Bar --> | |
| <div class="p-3 border-b"> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-full bg-gray-100 focus:outline-none focus:bg-white" placeholder="Rechercher des conversations..."> | |
| </div> | |
| </div> | |
| <!-- Conversation List --> | |
| <div class="overflow-y-auto" style="max-height: calc(100vh - 180px);"> | |
| <!-- Conversation Item --> | |
| <div class="flex items-center p-3 border-b hover:bg-gray-50 cursor-pointer"> | |
| <div class="relative mr-3"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profil" class="w-12 h-12 rounded-full"> | |
| <div class="online-dot absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium">Sophie Martin</h4> | |
| <span class="text-xs text-gray-500">14:30</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">Salut! Comment ça va aujourd'hui?</p> | |
| </div> | |
| </div> | |
| <!-- Conversation Item --> | |
| <div class="flex items-center p-3 border-b hover:bg-gray-50 cursor-pointer"> | |
| <div class="relative mr-3"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profil" class="w-12 h-12 rounded-full"> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium">Jean Dupont</h4> | |
| <span class="text-xs text-gray-500">12:15</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">J'ai reçu ton document, merci!</p> | |
| </div> | |
| </div> | |
| <!-- Conversation Item --> | |
| <div class="flex items-center p-3 border-b hover:bg-gray-50 cursor-pointer"> | |
| <div class="relative mr-3"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profil" class="w-12 h-12 rounded-full"> | |
| <div class="online-dot absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium">Marie Leclerc</h4> | |
| <span class="text-xs text-gray-500">10:45</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate"><i class="fas fa-image text-blue-400"></i> Photo</p> | |
| </div> | |
| </div> | |
| <!-- Conversation Item --> | |
| <div class="flex items-center p-3 border-b hover:bg-gray-50 cursor-pointer"> | |
| <div class="relative mr-3"> | |
| <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Profil" class="w-12 h-12 rounded-full"> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium">Thomas Bernard</h4> | |
| <span class="text-xs text-gray-500">Hier</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">On se voit demain à 18h?</p> | |
| </div> | |
| </div> | |
| <!-- Conversation Item - Group --> | |
| <div class="flex items-center p-3 border-b hover:bg-gray-50 cursor-pointer"> | |
| <div class="relative mr-3"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-pink-500 to-purple-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium">Groupe Famille</h4> | |
| <span class="text-xs text-gray-500">Lundi</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">Maman: Qui vient dimanche?</p> | |
| </div> | |
| </div> | |
| <!-- Invitation Limit Notice --> | |
| <div class="p-3 bg-yellow-50 border-l-4 border-yellow-400 text-sm text-yellow-700"> | |
| <p><strong>Invitations restantes:</strong> 3/3</p> | |
| <p class="mt-1">Abonnez-vous pour envoyer plus de messages!</p> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Chat Area --> | |
| <main class="flex-1 flex flex-col bg-white rounded-lg shadow"> | |
| <!-- Chat Header --> | |
| <div class="flex items-center p-3 border-b"> | |
| <div class="relative mr-3"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profil" class="w-10 h-10 rounded-full"> | |
| <div class="online-dot absolute bottom-0 right-0 w-2 h-2 bg-green-500 rounded-full border-2 border-white"></div> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">Sophie Martin</h3> | |
| <p class="text-xs text-gray-500">En ligne</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="w-8 h-8 rounded-full hover:bg-gray-100 text-gray-600"> | |
| <i class="fas fa-phone"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full hover:bg-gray-100 text-gray-600"> | |
| <i class="fas fa-video"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full hover:bg-gray-100 text-gray-600"> | |
| <i class="fas fa-info-circle"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Messages Container --> | |
| <div class="flex-1 p-4 overflow-y-auto message-container" id="message-container"> | |
| <!-- Date Divider --> | |
| <div class="flex justify-center my-4"> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full text-xs text-gray-500">Aujourd'hui</span> | |
| </div> | |
| <!-- Received Message --> | |
| <div class="flex mb-4"> | |
| <div class="message-bubble bg-gray-100 rounded-2xl rounded-tl-none px-4 py-2"> | |
| <p>Salut N'cho! Comment ça va? 😊</p> | |
| <div class="flex justify-end items-center mt-1"> | |
| <span class="text-xs text-gray-500 mr-2">10:15</span> | |
| <i class="fas fa-check text-xs text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sent Message --> | |
| <div class="flex mb-4 justify-end"> | |
| <div class="message-bubble bg-pink-500 text-white rounded-2xl rounded-tr-none px-4 py-2"> | |
| <p>Ça va super bien merci! Et toi? 😃</p> | |
| <div class="flex justify-end items-center mt-1"> | |
| <span class="text-xs text-pink-100 mr-2">10:16</span> | |
| <i class="fas fa-check-double text-xs text-pink-200"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Received Message with Image --> | |
| <div class="flex mb-4"> | |
| <div class="message-bubble bg-gray-100 rounded-2xl rounded-tl-none px-0 py-0 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Photo" class="w-64 h-64 object-cover"> | |
| <div class="px-4 py-2"> | |
| <p>J'ai pris cette photo hier, tu aimes? 📸</p> | |
| <div class="flex justify-between items-center mt-1"> | |
| <button class="text-gray-500 hover:text-pink-500"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <div class="flex items-center"> | |
| <span class="text-xs text-gray-500 mr-2">10:18</span> | |
| <i class="fas fa-check text-xs text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sent Message with Like --> | |
| <div class="flex mb-4 justify-end"> | |
| <div class="message-bubble bg-pink-500 text-white rounded-2xl rounded-tr-none px-4 py-2"> | |
| <p>Wow magnifique! ❤️</p> | |
| <div class="flex justify-between items-center mt-1"> | |
| <span class="text-xs text-pink-100">10:20</span> | |
| <div class="flex items-center"> | |
| <span class="text-xs text-pink-100 mr-1">1</span> | |
| <i class="fas fa-heart text-xs text-pink-200"></i> | |
| <i class="fas fa-check-double text-xs text-pink-200 ml-1"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Typing Indicator --> | |
| <div class="flex mb-4"> | |
| <div class="message-bubble bg-gray-100 rounded-2xl rounded-tl-none px-4 py-2 w-20"> | |
| <p class="typing-indicator text-gray-500"></p> | |
| </div> | |
| </div> | |
| <!-- Subscription Notice --> | |
| <div class="flex justify-center my-4"> | |
| <div class="bg-blue-50 border border-blue-100 rounded-lg px-4 py-2 text-sm text-blue-700 max-w-md text-center"> | |
| <p><strong>Message limité:</strong> Vous avez envoyé 8/10 messages aujourd'hui.</p> | |
| <p class="mt-1">Abonnez-vous pour envoyer des messages illimités!</p> | |
| <button class="mt-2 bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded-full text-sm"> | |
| S'abonner maintenant | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Message Input --> | |
| <div class="p-3 border-t relative"> | |
| <!-- Emoji Picker --> | |
| <div class="emoji-picker absolute bottom-16 left-0 bg-white shadow-lg rounded-lg p-2 w-64 h-40 overflow-y-auto hidden"> | |
| <div class="grid grid-cols-6 gap-2"> | |
| <span class="text-xl cursor-pointer hover:bg-gray | |
| </html> |