p

templates/admin.html

@@ -80,7 +80,7 @@
                 </div>
                 
                 <div class="flex items-center space-x-4">
-                    <button id="refreshBtn" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors duration-200 flex items-center space-x-2">
+                     <button id="refreshBtn" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors duration-200 flex items-center space-x-2">
                         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                         </svg>
@@ -93,9 +93,9 @@
 
     <!-- Stats Bar -->
     <div class="bg-slate-800/30 border-b border-slate-700/30">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-                <div class="bg-gradient-to-r from-blue-500/20 to-blue-600/20 rounded-lg p-4 border border-blue-500/30">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+                <div class="bg-gradient-to-r from-blue-500/20 to-blue-600/20 rounded-lg p-6 border border-blue-500/30">
                     <div class="flex items-center">
                         <div class="p-2 bg-blue-500/30 rounded-lg">
                             <svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -109,7 +109,7 @@
                     </div>
                 </div>
                 
-                <div class="bg-gradient-to-r from-green-500/20 to-green-600/20 rounded-lg p-4 border border-green-500/30">
+                 <div class="bg-gradient-to-r from-green-500/20 to-green-600/20 rounded-lg p-6 border border-green-500/30">
                     <div class="flex items-center">
                         <div class="p-2 bg-green-500/30 rounded-lg">
                             <svg class="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -123,7 +123,7 @@
                     </div>
                 </div>
                 
-                <div class="bg-gradient-to-r from-purple-500/20 to-purple-600/20 rounded-lg p-4 border border-purple-500/30">
+                 <div class="bg-gradient-to-r from-purple-500/20 to-purple-600/20 rounded-lg p-6 border border-purple-500/30">
                     <div class="flex items-center">
                         <div class="p-2 bg-purple-500/30 rounded-lg">
                             <svg class="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -137,7 +137,7 @@
                     </div>
                 </div>
                 
-                <div class="bg-gradient-to-r from-orange-500/20 to-orange-600/20 rounded-lg p-4 border border-orange-500/30">
+                 <div class="bg-gradient-to-r from-orange-500/20 to-orange-600/20 rounded-lg p-6 border border-orange-500/30">
                     <div class="flex items-center">
                         <div class="p-2 bg-orange-500/30 rounded-lg">
                             <svg class="w-6 h-6 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -155,9 +155,9 @@
     </div>
 
     <!-- Main Content -->
-    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
         <!-- Search & Filter -->
-        <div class="mb-6">
+        <div class="mb-8 sm:mb-10">
             <div class="flex flex-col sm:flex-row gap-4 items-center justify-between">
                 <div class="relative flex-1 max-w-md">
                     <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -199,23 +199,23 @@
         </div>
 
         <!-- Conversations Grid -->
-        <div id="conversationsGrid" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6 hidden">
+        <div id="conversationsGrid" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8 sm:gap-10 hidden">
             <!-- Les conversations seront ajoutées ici dynamiquement -->
         </div>
 
         <!-- Modal pour voir une conversation -->
         <div id="conversationModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden">
-            <div class="flex items-center justify-center min-h-screen p-4">
-                <div class="bg-slate-800 rounded-2xl max-w-4xl w-full max-h-[80vh] overflow-hidden">
-                    <div class="flex items-center justify-between p-6 border-b border-slate-700">
+            <div class="flex items-center justify-center min-h-screen p-6 sm:p-4">
+                <div class="bg-slate-800 rounded-2xl max-w-4xl w-full max-h-[85vh] overflow-hidden">
+                    <div class="flex items-center justify-between p-8 border-b border-slate-700">
                         <h2 class="text-xl font-bold text-white" id="modalTitle">Conversation</h2>
-                        <button id="closeModal" class="text-slate-400 hover:text-white transition-colors">
+                        <button id="closeModal" class="text-slate-400 hover:text-white transition-colors p-2">
                             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                             </svg>
                         </button>
                     </div>
-                    <div class="p-6 overflow-y-auto max-h-96" id="modalContent">
+                    <div class="p-8 overflow-y-auto max-h-[60vh]" id="modalContent">
                         <!-- Contenu de la conversation -->
                     </div>
                 </div>
@@ -305,11 +305,11 @@
                 }) : 'Inconnue';
 
             return `
-                <div class="conversation-card bg-slate-800/50 rounded-xl border border-slate-700/50 p-6 cursor-pointer hover:border-slate-600" 
+                <div class="conversation-card bg-slate-800/50 rounded-xl border border-slate-700/50 p-8 cursor-pointer hover:border-slate-600"
                      onclick="openConversation('${conv.id}')">
-                    <div class="flex items-start justify-between mb-4">
-                        <div class="flex items-center space-x-3">
-                            <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+                    <div class="flex items-start justify-between mb-6">
+                        <div class="flex items-center space-x-4">
+                            <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                                 <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                 </svg>
@@ -332,7 +332,7 @@
                         </div>
                     </div>
                     
-                    <div class="mb-4">
+                    <div class="mb-6">
                         <p class="text-sm text-slate-300 line-clamp-2">
                             ${lastMessage.content ? 
                                 (lastMessage.content.length > 100 ?