Add 2 files

index.html

@@ -156,5 +156,133 @@
                         </div>
                     </div>
                     <div class="flex-1">
-                        <div class="flex
+                        <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>