Update templates/index.html

templates/index.html

@@ -11,15 +11,29 @@
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
 
+        :root {
+            --primary: #3182ce;
+            --primary-dark: #1a365d;
+            --primary-light: #ebf8ff;
+            --secondary: #4a5568;
+            --accent: #6366f1;
+            --success: #38a169;
+            --danger: #e53e3e;
+            --background: #f7fafc;
+            --card-bg: rgba(255, 255, 255, 0.95);
+        }
+
         body {
             font-family: 'Plus Jakarta Sans', sans-serif;
             background-color: #fafafa;
+            scroll-behavior: smooth;
         }
 
         .glassmorphism {
             background: rgba(255, 255, 255, 0.95);
             backdrop-filter: blur(10px);
             border: 1px solid rgba(255, 255, 255, 0.3);
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
         }
 
         .card-hover {
@@ -32,7 +46,7 @@
         }
 
         .gradient-text {
-            background: linear-gradient(135deg, #1a365d 0%, #3182ce 100%);
+            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }
@@ -50,90 +64,255 @@
         }
 
         @keyframes bounce {
-            0%,
-            80%,
-            100% {
+            0%, 80%, 100% {
                 transform: translateY(0);
             }
-
             40% {
                 transform: translateY(-6px);
             }
         }
 
         .custom-radio:checked+span {
-            background: linear-gradient(135deg, #1a365d 0%, #3182ce 100%);
+            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
+            color: white;
+            border-color: var(--primary);
+        }
+
+        .disabled-option {
+            background: #f9fafb;
+            color: #9ca3af;
+            border-color: #e5e7eb;
+            cursor: not-allowed;
+            position: relative;
+        }
+
+        .coming-soon-badge {
+            position: absolute;
+            top: -8px;
+            right: -8px;
+            background: #f97316;
             color: white;
+            font-size: 8px;
+            padding: 2px 6px;
+            border-radius: 10px;
+            font-weight: 600;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+
+        /* Animations */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .fade-in {
+            animation: fadeIn 0.3s ease-out forwards;
+        }
+
+        @keyframes scaleIn {
+            from { transform: scale(0.95); opacity: 0; }
+            to { transform: scale(1); opacity: 1; }
+        }
+
+        .scale-in {
+            animation: scaleIn 0.3s ease-out forwards;
         }
 
         .backup-item {
             cursor: pointer;
+            transition: all 0.25s ease;
+        }
+
+        .backup-item:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
         }
 
         .backup-content {
             display: none;
             margin-top: 10px;
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease;
         }
 
         .backup-content-expanded {
             display: block;
+            max-height: 2000px;
         }
 
         /* Styles for multiple image upload */
         .image-preview {
             display: flex;
             flex-wrap: wrap;
-            gap: 10px;
-            margin-top: 10px;
+            gap: 12px;
+            margin-top: 15px;
         }
 
         .image-preview-item {
             position: relative;
-            width: 100px;
-            height: 100px;
+            width: 110px;
+            height: 110px;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+            transition: transform 0.2s ease;
+        }
+
+        .image-preview-item:hover {
+            transform: scale(1.05);
         }
 
         .image-preview-item img {
             width: 100%;
             height: 100%;
             object-fit: cover;
-            border-radius: 5px;
         }
 
         .remove-image {
             position: absolute;
             top: 5px;
             right: 5px;
-            background-color: rgba(0, 0, 0, 0.5);
+            background-color: rgba(0, 0, 0, 0.6);
             color: white;
             border: none;
             border-radius: 50%;
-            padding: 2px 6px;
+            width: 22px;
+            height: 22px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             cursor: pointer;
             font-size: 12px;
+            opacity: 0;
+            transition: opacity 0.2s, transform 0.2s;
+        }
+
+        .image-preview-item:hover .remove-image {
+            opacity: 1;
         }
 
         .remove-image:hover {
-            background-color: rgba(0, 0, 0, 0.7);
+            background-color: rgba(0, 0, 0, 0.8);
+            transform: scale(1.1);
         }
 
+        /* Style pour préserver les espaces dans le markdown */
+        .prose {
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            overflow-wrap: break-word;
+            color: #2d3748;
+            line-height: 1.7;
+        }
 
-      /* Style pour préserver les espaces dans le markdown */
-.prose {
-    white-space: pre-wrap;       /* preserve line breaks and spaces */
-    word-wrap: break-word;       /* break long words */
-    overflow-wrap: break-word;   /* allow words to break */
-}
+        .prose h1, .prose h2, .prose h3, .prose h4 {
+            color: var(--primary-dark);
+            margin-top: 1.5em;
+            margin-bottom: 0.5em;
+            font-weight: 600;
+        }
 
-/* Style optionnel pour améliorer la lisibilité sur mobile */
-@media (max-width: 640px) {
-    .prose {
-        font-size: 0.95rem;
-        line-height: 1.6;
-    }
-}
+        .prose p {
+            margin-bottom: 1em;
+        }
 
-                  
+        .prose ul, .prose ol {
+            padding-left: 1.5em;
+            margin-bottom: 1em;
+        }
+
+        .prose blockquote {
+            border-left: 4px solid var(--primary);
+            padding-left: 1em;
+            font-style: italic;
+            color: var(--secondary);
+            margin: 1em 0;
+        }
+
+        /* Loading animation */
+        .loader {
+            display: inline-block;
+            position: relative;
+            width: 80px;
+            height: 20px;
+        }
+        
+        .loader div {
+            position: absolute;
+            top: 8px;
+            width: 13px;
+            height: 13px;
+            border-radius: 50%;
+            background: var(--primary);
+            animation-timing-function: cubic-bezier(0, 1, 1, 0);
+        }
+        
+        .loader div:nth-child(1) {
+            left: 8px;
+            animation: loader1 0.6s infinite;
+        }
+        
+        .loader div:nth-child(2) {
+            left: 8px;
+            animation: loader2 0.6s infinite;
+        }
+        
+        .loader div:nth-child(3) {
+            left: 32px;
+            animation: loader2 0.6s infinite;
+        }
+        
+        .loader div:nth-child(4) {
+            left: 56px;
+            animation: loader3 0.6s infinite;
+        }
+        
+        @keyframes loader1 {
+            0% {transform: scale(0);}
+            100% {transform: scale(1);}
+        }
+        
+        @keyframes loader2 {
+            0% {transform: translate(0, 0);}
+            100% {transform: translate(24px, 0);}
+        }
+        
+        @keyframes loader3 {
+            0% {transform: scale(1);}
+            100% {transform: scale(0);}
+        }
+
+        /* Focus styles */
+        .focus-ring {
+            position: relative;
+        }
+
+        .focus-ring:focus-within::after {
+            content: '';
+            position: absolute;
+            top: -3px;
+            left: -3px;
+            right: -3px;
+            bottom: -3px;
+            border-radius: 14px;
+            border: 2px solid rgba(59, 130, 246, 0.3);
+            pointer-events: none;
+            animation: focusIn 0.2s ease-out forwards;
+        }
+
+        @keyframes focusIn {
+            from { opacity: 0; transform: scale(0.98); }
+            to { opacity: 1; transform: scale(1); }
+        }
+
+        /* Style optionnel pour améliorer la lisibilité sur mobile */
+        @media (max-width: 640px) {
+            .prose {
+                font-size: 0.95rem;
+                line-height: 1.6;
+            }
+        }
     </style>
 </head>
 
@@ -142,12 +321,12 @@
         <div class="container mx-auto px-6 py-4">
             <div class="flex items-center justify-between">
                 <div class="flex items-center space-x-4">
-                    <div class="bg-blue-600 rounded-lg p-2 shadow-lg">
+                    <div class="bg-gradient-to-r from-blue-600 to-blue-800 rounded-lg p-2 shadow-lg transform hover:scale-110 transition-transform duration-300">
                         <i class="fas fa-robot text-white text-xl"></i>
                     </div>
                     <h1 class="text-2xl font-bold gradient-text">Mariam AI</h1>
                 </div>
-                <div class="text-blue-900 font-medium">Assistant Français Intelligent</div>
+                <div class="text-blue-900 font-medium bg-blue-50 py-1 px-4 rounded-full shadow-sm">Assistant Français Intelligent</div>
             </div>
         </div>
     </nav>
@@ -155,29 +334,32 @@
     <main class="container mx-auto px-6 py-12">
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
             <!-- Section Travail Argumentatif -->
-            <div class="card-hover glassmorphism rounded-2xl overflow-hidden">
+            <div class="card-hover glassmorphism rounded-2xl overflow-hidden scale-in">
                 <div class="p-8">
                     <div class="flex items-center space-x-4 mb-8">
-                        <div class="bg-blue-100 rounded-lg p-3">
+                        <div class="bg-blue-100 rounded-lg p-3 transform rotate-3">
                             <i class="fas fa-pen-fancy text-blue-600 text-xl"></i>
                         </div>
                         <h2 class="text-2xl font-bold text-gray-800">Travail Argumentatif</h2>
                     </div>
                     <form id="francais-form" class="space-y-8">
                         <div class="space-y-3">
-                            <label for="sujet-francais" class="block text-sm font-medium text-gray-700">
+                            <label for="sujet-francais" class="block text-sm font-medium text-gray-700 flex items-center">
                                 <i class="fas fa-book-open mr-2 text-blue-500"></i>Sujet
                             </label>
-                            <textarea id="sujet-francais" name="sujet" rows="4"
-                                class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 resize-none"
-                                placeholder="Entrez votre sujet ici..."></textarea>
+                            <div class="focus-ring">
+                                <textarea id="sujet-francais" name="sujet" rows="4"
+                                    class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-blue-500 focus:outline-none transition-all duration-200 resize-none"
+                                    placeholder="Entrez votre sujet ici..."></textarea>
+                            </div>
+                            <div class="text-xs text-gray-400 text-right" id="character-count">0 caractères</div>
                         </div>
 
                         <div class="space-y-4">
-                            <label class="block text-sm font-medium text-gray-700">
+                            <label class="block text-sm font-medium text-gray-700 flex items-center">
                                 <i class="fas fa-tasks mr-2 text-blue-500"></i>Type d'argumentation
                             </label>
-                            <div class="grid grid-cols-3 gap-4">
+                            <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
                                 <label class="relative">
                                     <input type="radio" name="choix" value="Etaye"
                                         class="custom-radio absolute opacity-0 w-full h-full cursor-pointer" checked>
@@ -202,11 +384,19 @@
                                         Discuter
                                     </span>
                                 </label>
+                                <label class="relative">
+                                    <input type="radio" name="choix" value="dissertation"
+                                        class="absolute opacity-0 w-full h-full" disabled>
+                                    <span class="flex items-center justify-center p-3 border-2 border-gray-200 rounded-xl text-sm font-medium disabled-option">
+                                        Dissertation
+                                        <span class="coming-soon-badge">Bientôt</span>
+                                    </span>
+                                </label>
                             </div>
                         </div>
 
                         <div class="space-y-4">
-                            <label class="block text-sm font-medium text-gray-700">
+                            <label class="block text-sm font-medium text-gray-700 flex items-center">
                                 <i class="fas fa-feather-alt mr-2 text-blue-500"></i>Style d'écriture
                             </label>
                             <div class="grid grid-cols-2 gap-4">
@@ -237,31 +427,31 @@
                             </div>
                         </button>
                     </form>
-                    <div id="francais-output" class="mt-8 p-6 bg-blue-50 rounded-xl prose max-w-none">
+                    <div id="francais-output" class="mt-8 p-6 bg-blue-50 rounded-xl prose max-w-none shadow-inner">
                         <!-- Le contenu généré sera inséré ici -->
                     </div>
                 </div>
             </div>
 
             <!-- Section Étude de texte -->
-            <div class="card-hover glassmorphism rounded-2xl overflow-hidden">
+            <div class="card-hover glassmorphism rounded-2xl overflow-hidden scale-in" style="animation-delay: 0.1s;">
                 <div class="p-8">
                     <div class="flex items-center space-x-4 mb-8">
-                        <div class="bg-blue-100 rounded-lg p-3">
+                        <div class="bg-blue-100 rounded-lg p-3 transform -rotate-3">
                             <i class="fas fa-file-alt text-blue-600 text-xl"></i>
                         </div>
                         <h2 class="text-2xl font-bold text-gray-800">Étude de texte</h2>
                     </div>
                     <form id="etude-texte-form" class="space-y-8" enctype="multipart/form-data">
                         <div class="space-y-4">
-                            <label class="block text-sm font-medium text-gray-700">
+                            <label class="block text-sm font-medium text-gray-700 flex items-center">
                                 <i class="fas fa-image mr-2 text-blue-500"></i>Image du texte
                             </label>
-                            <div class="border-3 border-dashed border-gray-300 rounded-xl p-8 text-center cursor-pointer hover:border-blue-400 transition-all duration-200"
+                            <div class="border-3 border-dashed border-gray-300 rounded-xl p-8 text-center cursor-pointer hover:border-blue-400 transition-all duration-200 group"
                                  id="drop-zone">
                                 <input type="file" id="image-upload" name="images" accept="image/*" class="hidden" multiple>
-                                <div class="space-y-3">
-                                    <div class="bg-blue-50 rounded-full w-16 h-16 flex items-center justify-center mx-auto">
+                                <div class="space-y-4">
+                                    <div class="bg-blue-50 rounded-full w-16 h-16 flex items-center justify-center mx-auto transform transition-transform group-hover:scale-110 group-hover:rotate-6">
                                         <i class="fas fa-cloud-upload-alt text-3xl text-blue-500"></i>
                                     </div>
                                     <p class="text-sm text-gray-600 font-medium">Glissez vos images ici ou cliquez
@@ -280,20 +470,46 @@
                             </div>
                         </button>
                     </form>
-                    <div id="etude-texte-output" class="mt-8 p-6 bg-blue-50 rounded-xl prose max-w-none">
+                    <div id="etude-texte-output" class="mt-8 p-6 bg-blue-50 rounded-xl prose max-w-none shadow-inner">
                         <!-- Le contenu analysé sera inséré ici -->
                     </div>
                 </div>
             </div>
         </div>
         <div class="mt-12">
-            <h2 class="text-2xl font-bold text-gray-800 mb-4">Sauvegardes</h2>
+            <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
+                <i class="fas fa-save mr-3 text-blue-500"></i>
+                Sauvegardes
+            </h2>
             <div id="backups-list" class="space-y-4">
                 <!-- Les sauvegardes seront listées ici -->
             </div>
         </div>
     </main>
 
+    <footer class="bg-gray-50 border-t border-gray-200 py-6 mt-16">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="flex items-center space-x-2 mb-4 md:mb-0">
+                    <div class="bg-blue-600 rounded-lg p-1 shadow">
+                        <i class="fas fa-robot text-white text-sm"></i>
+                    </div>
+                    <span class="text-gray-600 text-sm">Mariam AI</span>
+                </div>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-gray-500 hover:text-blue-600 transition-colors">
+                        <i class="fas fa-question-circle"></i>
+                        <span class="ml-1 text-sm">Aide</span>
+                    </a>
+                    <a href="#" class="text-gray-500 hover:text-blue-600 transition-colors">
+                        <i class="fas fa-shield-alt"></i>
+                        <span class="ml-1 text-sm">Confidentialité</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
     <script>
         function initializeFileUpload() {
             const dropZone = document.getElementById('drop-zone');
@@ -336,22 +552,27 @@
                     const reader = new FileReader();
                     reader.onload = (e) => {
                         const previewItem = document.createElement('div');
-                        previewItem.classList.add('image-preview-item');
+                        previewItem.classList.add('image-preview-item', 'scale-in');
                         previewItem.innerHTML = `
                             <img src="${e.target.result}" alt="${file.name}">
-                            <button class="remove-image" title="Supprimer">×</button>
+                            <button class="remove-image" title="Supprimer"><i class="fas fa-times"></i></button>
                         `;
                         imagePreview.appendChild(previewItem);
 
                         // Remove image event
                         previewItem.querySelector('.remove-image').addEventListener('click', () => {
-                            imagePreview.removeChild(previewItem);
+                            previewItem.style.opacity = '0';
+                            previewItem.style.transform = 'scale(0.9)';
+                            setTimeout(() => {
+                                imagePreview.removeChild(previewItem);
+                            }, 300);
                         });
                     };
                     reader.readAsDataURL(file);
                 }
             }
         }
+        
         function sauvegarderReponse(titre, contenu) {
             const sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
             const dateSauvegarde = new Date().toISOString();
@@ -361,6 +582,24 @@
                 date: dateSauvegarde
             });
             localStorage.setItem('mariam_ai_sauvegardes', JSON.stringify(sauvegardes));
+            
+            // Animation de notification
+            const notification = document.createElement('div');
+            notification.className = 'fixed bottom-6 right-6 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg shadow-lg z-50 flex items-center scale-in';
+            notification.innerHTML = `
+                <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                <span class="text-sm font-medium">Sauvegardé avec succès</span>
+            `;
+            document.body.appendChild(notification);
+            
+            setTimeout(() => {
+                notification.style.opacity = '0';
+                notification.style.transform = 'translateY(10px)';
+                setTimeout(() => {
+                    document.body.removeChild(notification);
+                }, 300);
+            }, 3000);
+            
             afficherSauvegardes();
         }
 
@@ -376,41 +615,129 @@
             const backupsList = document.getElementById('backups-list');
             backupsList.innerHTML = '';
             if (sauvegardes.length === 0) {
-                backupsList.innerHTML = '<p class="text-gray-600">Aucune sauvegarde pour le moment.</p>';
+                backupsList.innerHTML = `
+                    <div class="bg-blue-50 rounded-lg p-8 text-center">
+                        <div class="bg-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 shadow-sm">
+                            <i class="fas fa-folder-open text-blue-300 text-2xl"></i>
+                        </div>
+                        <p class="text-gray-600">Aucune sauvegarde pour le moment.</p>
+                        <p class="text-sm text-gray-500 mt-2">Vos réponses générées apparaîtront ici.</p>
+                    </div>
+                `;
                 return;
             }
 
             sauvegardes.forEach((sauvegarde, index) => {
+                const date = new Date(sauvegarde.date);
+                const formattedDate = date.toLocaleDateString('fr-FR', {
+                    day: 'numeric',
+                    month: 'short',
+                    year: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit'
+                });
+                
                 const sauvegardeDiv = document.createElement('div');
-                sauvegardeDiv.className = 'bg-white rounded-lg shadow-md p-4 relative backup-item';
+                sauvegardeDiv.className = 'bg-white rounded-lg shadow-md p-4 relative backup-item hover:bg-blue-50 transition-all duration-200';
                 sauvegardeDiv.innerHTML = `
-                    <h3 class="text-lg font-semibold text-gray-800">${sauvegarde.titre}</h3>
-                    <p class="text-sm text-gray-600 mb-2">${new Date(sauvegarde.date).toLocaleString()}</p>
-                    <div class="text-sm text-gray-700 backup-content prose max-w-none">${marked.parse(sauvegarde.contenu)}</div>
-                    <button class="absolute top-2 right-2 text-red-500 hover:text-red-700 focus:outline-none" data-index="${index}">
-                        <i class="fas fa-trash"></i>
-                    </button>
+                    <div class="flex items-start">
+                        <div class="bg-blue-100 rounded-lg p-2 mr-3">
+                            <i class="fas fa-file-alt text-blue-600"></i>
+                        </div>
+                        <div class="flex-grow">
+                            <h3 class="text-lg font-semibold text-gray-800">${sauvegarde.titre}</h3>
+                            <p class="text-sm text-gray-600 mb-2 flex items-center">
+                                <i class="fas fa-clock text-xs mr-1 text-gray-400"></i>
+                                ${formattedDate}
+                            </p>
+                        </div>
+                        <div class="flex space-x-2">
+                            <button class="text-gray-400 hover:text-blue-600 focus:outline-none copy-btn" data-index="${index}">
+                                <i class="fas fa-copy"></i>
+                            </button>
+                            <button class="text-gray-400 hover:text-red-600 focus:outline-none delete-btn" data-index="${index}">
+                                <i class="fas fa-trash-alt"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="text-sm text-gray-700 backup-content prose max-w-none mt-3">${marked.parse(sauvegarde.contenu)}</div>
                 `;
                 backupsList.appendChild(sauvegardeDiv);
 
                 // Gestion de l'expansion/contraction du contenu
                 const backupContentDiv = sauvegardeDiv.querySelector('.backup-content');
-                const backupItemDiv = sauvegardeDiv; // Utilisez toute la
-                
-                                backupItemDiv.addEventListener('click', (e) => {
-                    if (e.target.tagName === "BUTTON") return; // Ignorer les clics sur le bouton supprimer
+                sauvegardeDiv.addEventListener('click', (e) => {
+                    // Ignorer les clics sur les boutons
+                    if (e.target.tagName === "BUTTON" || e.target.closest('button')) return;
+                    
+                    const allContents = document.querySelectorAll('.backup-content');
+                    allContents.forEach(content => {
+                        if (content !== backupContentDiv) {
+                            content.classList.remove('backup-content-expanded');
+                        }
+                    });
+                    
                     backupContentDiv.classList.toggle('backup-content-expanded');
-                    MathJax.typesetPromise([backupContentDiv]); // Re-typer le contenu MathJax si nécessaire
+                    
+                    if (backupContentDiv.classList.contains('backup-content-expanded')) {
+                        setTimeout(() => {
+                            MathJax.typesetPromise([backupContentDiv]);
+                        }, 300);
+                    }
+                });
+
+                // Bouton de copie
+                const copyButton = sauvegardeDiv.querySelector('.copy-btn');
+                copyButton.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    navigator.clipboard.writeText(sauvegarde.contenu).then(() => {
+                        copyButton.querySelector('i').className = 'fas fa-check';
+                        setTimeout(() => {
+                            copyButton.querySelector('i').className = 'fas fa-copy';
+                        }, 2000);
+                    });
                 });
 
-                const deleteButton = sauvegardeDiv.querySelector('button');
-                deleteButton.addEventListener('click', () => {
-                    if (confirm('Êtes-vous sûr de vouloir supprimer cette sauvegarde ?')) {
+                // Bouton de suppression
+                const deleteButton = sauvegardeDiv.querySelector('.delete-btn');
+                deleteButton.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    
+                    const confirmationModal = document.createElement('div');
+                    confirmationModal.className = 'fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-30 scale-in';
+                    confirmationModal.innerHTML = `
+                        <div class="bg-white rounded-lg p-6 max-w-sm mx-4 shadow-xl">
+                            <div class="flex items-center mb-4">
+                                <div class="bg-red-100 rounded-full p-2 mr-3">
+                                    <i class="fas fa-exclamation-triangle text-red-500"></i>
+                                </div>
+                                <h3 class="text-lg font-semibold text-gray-800">Confirmation de suppression</h3>
+                            </div>
+                            <p class="text-gray-600 mb-6">Êtes-vous sûr de vouloir supprimer cette sauvegarde ? Cette action est irréversible.</p>
+                            <div class="flex justify-end space-x-3">
+                                <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 cancel-btn">Annuler</button>
+                                <button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 confirm-btn">Supprimer</button>
+                            </div>
+                        </div>
+                    `;
+                    document.body.appendChild(confirmationModal);
+                    
+                    confirmationModal.querySelector('.cancel-btn').addEventListener('click', () => {
+                        confirmationModal.style.opacity = '0';
+                        setTimeout(() => {
+                            document.body.removeChild(confirmationModal);
+                        }, 300);
+                    });
+                    
+                    confirmationModal.querySelector('.confirm-btn').addEventListener('click', () => {
                         supprimerSauvegarde(index);
-                    }
+                        confirmationModal.style.opacity = '0';
+                        setTimeout(() => {
+                            document.body.removeChild(confirmationModal);
+                        }, 300);
+                    });
                 });
             });
-
         }
 
         async function submitFrancaisForm() {
@@ -420,11 +747,14 @@
             form.addEventListener('submit', async (e) => {
                 e.preventDefault();
                 output.innerHTML = `
-                <div class="flex items-center justify-center space-x-2 text-blue-600">
-                    <div class="loading-dot">[x] </div>
-                    <div class="loading-dot">[x] </div>
-                    <div class="loading-dot">[x] </div>
-                    <span class="ml-3 text-sm font-medium text-gray-600">Génération en cours...</span>
+                <div class="flex flex-col items-center justify-center py-8">
+                    <div class="loader mb-4">
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                    </div>
+                    <p class="text-sm font-medium text-gray-600">Génération en cours, veuillez patienter...</p>
                 </div>`;
 
                 const formData = new FormData(form);
@@ -433,16 +763,30 @@
                         method: 'POST',
                         body: formData
                     });
+                    
+                    if (!response.ok) {
+                        throw new Error('Erreur réseau');
+                    }
+                    
                     const result = await response.json();
-                    const sujet = formData.get('sujet');
-                    output.innerHTML = marked.parse(result.output);
-                    sauvegarderReponse(sujet, result.output);
-                    MathJax.typesetPromise([output]);
+                    
+                    output.style.opacity = '0';
+                    setTimeout(() => {
+                        output.innerHTML = marked.parse(result.output);
+                        output.style.opacity = '1';
+                        
+                        const sujet = formData.get('sujet');
+                        sauvegarderReponse(sujet, result.output);
+                        MathJax.typesetPromise([output]);
+                    }, 300);
                 } catch (error) {
                     output.innerHTML = `
-                    <div class="flex items-center space-x-2 text-red-500 bg-red-50 p-4 rounded-lg">
-                        <i class="fas fa-exclamation-circle"></i>
-                        <span class="text-sm font-medium">Une erreur est survenue. Veuillez réessayer.</span>
+                    <div class="flex items-center space-x-3 text-red-500 bg-red-50 p-4 rounded-lg">
+                        <i class="fas fa-exclamation-circle text-xl"></i>
+                        <div>
+                            <p class="font-medium">Une erreur est survenue</p>
+                            <p class="text-sm text-red-400 mt-1">Veuillez réessayer ou vérifier votre connexion internet.</p>
+                        </div>
                     </div>`;
                 }
             });
@@ -454,11 +798,30 @@
 
             form.addEventListener('submit', async (e) => {
                 e.preventDefault();
+                
+                const imagePreview = document.getElementById('image-preview');
+                if (imagePreview.children.length === 0) {
+                    output.innerHTML = `
+                    <div class="flex items-center space-x-3 text-amber-500 bg-amber-50 p-4 rounded-lg">
+                        <i class="fas fa-exclamation-triangle text-xl"></i>
+                        <div>
+                            <p class="font-medium">Aucune image</p>
+                            <p class="text-sm text-amber-400 mt-1">Veuillez ajouter au moins une image pour l'analyse.</p>
+                        </div>
+                    </div>`;
+                    return;
+                }
+                
                 output.innerHTML = `
-                <div class="flex items-center justify-center space-x-2 text-blue-600">                     <div class="loading-dot">[x] </div>
-                    <div class="loading-dot">[x] </div>
-                    <div class="loading-dot">[x] </div>
-                    <span class="ml-3 text-sm font-medium text-gray-600">Analyse en cours...</span>
+                <div class="flex flex-col items-center justify-center py-8">
+                    <div class="loader mb-4">
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                    </div>
+                    <p class="text-sm font-medium text-gray-600">Analyse en cours, veuillez patienter...</p>
+                    <p class="text-xs text-gray-400 mt-2">Ce processus peut prendre quelques instants</p>
                 </div>`;
 
                 const formData = new FormData(form);
@@ -467,19 +830,31 @@
                         method: 'POST',
                         body: formData
                     });
+                    
+                    if (!response.ok) {
+                        throw new Error('Erreur réseau');
+                    }
+                    
                     const result = await response.json();
-                    output.innerHTML = marked.parse(result.output);
-
-                    // Titre par défaut pour les analyses d'images
-                    const titre = "Analyse d'image " + new Date().toLocaleString();
-                    sauvegarderReponse(titre, result.output)
-
-                    MathJax.typesetPromise([output]);
+                    
+                    output.style.opacity = '0';
+                    setTimeout(() => {
+                        output.innerHTML = marked.parse(result.output);
+                        output.style.opacity = '1';
+                        
+                        // Titre par défaut pour les analyses d'images
+                        const titre = "Analyse d'image " + new Date().toLocaleString();
+                        sauvegarderReponse(titre, result.output);
+                        MathJax.typesetPromise([output]);
+                    }, 300);
                 } catch (error) {
                     output.innerHTML = `
-                    <div class="flex items-center space-x-2 text-red-500 bg-red-50 p-4 rounded-lg">
-                        <i class="fas fa-exclamation-circle"></i>
-                        <span class="text-sm font-medium">Une erreur est survenue. Veuillez réessayer.</span>
+                    <div class="flex items-center space-x-3 text-red-500 bg-red-50 p-4 rounded-lg">
+                        <i class="fas fa-exclamation-circle text-xl"></i>
+                        <div>
+                            <p class="font-medium">Une erreur est survenue</p>
+                            <p class="text-sm text-red-400 mt-1">Veuillez réessayer ou vérifier votre connexion internet.</p>
+                        </div>
                     </div>`;
                 }
             });
@@ -489,10 +864,12 @@
         function animateOnScroll() {
             const cards = document.querySelectorAll('.card-hover');
             const observer = new IntersectionObserver((entries) => {
-                entries.forEach(entry => {
+                entries.forEach((entry, index) => {
                     if (entry.isIntersecting) {
-                        entry.target.style.opacity = '1';
-                        entry.target.style.transform = 'translateY(0)';
+                        setTimeout(() => {
+                            entry.target.style.opacity = '1';
+                            entry.target.style.transform = 'translateY(0)';
+                        }, index * 100);
                     }
                 });
             }, {
@@ -501,37 +878,40 @@
 
             cards.forEach(card => {
                 card.style.opacity = '0';
-                card.style.transform = 'translateY(20px)';
+                card.style.transform = 'translateY(30px)';
                 card.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
                 observer.observe(card);
             });
         }
 
-        // Effet de focus amélioré pour les zones de texte
+        // Effet de focus amélioré pour les zones de texte et compteur de caractères
         function enhanceTextareaFocus() {
-            const textareas = document.querySelectorAll('textarea');
-            textareas.forEach(textarea => {
-                textarea.addEventListener('focus', () => {
-                    textarea.parentElement.classList.add('ring-2', 'ring-blue-200');
-                });
-                textarea.addEventListener('blur', () => {
-                    textarea.parentElement.classList.remove('ring-2', 'ring-blue-200');
-                });
+            const textarea = document.getElementById('sujet-francais');
+            const counter = document.getElementById('character-count');
+            
+            textarea.addEventListener('input', () => {
+                const length = textarea.value.length;
+                counter.textContent = `${length} caractère${length !== 1 ? 's' : ''}`;
             });
         }
 
         // Effet de hover pour les boutons radio
         function enhanceRadioButtons() {
-            const radioLabels = document.querySelectorAll('input[type="radio"] + span');
+            const radioLabels = document.querySelectorAll('input[type="radio"]:not(:disabled) + span');
             radioLabels.forEach(label => {
                 label.addEventListener('mouseenter', () => {
                     if (!label.previousElementSibling.checked) {
                         label.style.borderColor = '#3182ce';
+                        label.style.transform = 'translateY(-2px)';
+                        label.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';
                     }
                 });
+                
                 label.addEventListener('mouseleave', () => {
                     if (!label.previousElementSibling.checked) {
-                        label.style.borderColor = '#e5e7eb'; // Couleur de bordure par défaut de Tailwind pour les éléments non actifs
+                        label.style.borderColor = '#e5e7eb';
+                        label.style.transform = 'translateY(0)';
+                        label.style.boxShadow = 'none';
                     }
                 });
             });
@@ -546,36 +926,45 @@
             enhanceTextareaFocus();
             enhanceRadioButtons();
 
-            // Message de bienvenue subtil (vous pouvez supprimer cette partie si vous ne la souhaitez pas)
+            // Message de bienvenue avec animation
             const welcomeMessage = document.createElement('div');
             welcomeMessage.innerHTML = `
-    <div class="fixed bottom-6 right-6 bg-white rounded-xl shadow-lg p-4 transform transition-all duration-500 opacity-0 translate-y-4">
-        <div class="flex items-center space-x-3">
-            <div class="bg-blue-100 rounded-lg p-2">
-                <i class="fas fa-robot text-blue-600"></i>
-            </div>
-            <div>
-                <p class="text-sm font-medium text-gray-800">Bienvenue sur Mariam AI</p>
-                <p class="text-xs text-gray-500">Je suis là pour vous aider</p>
-            </div>
-        </div>
-    </div>
-`;
+                <div class="fixed bottom-6 right-6 bg-white rounded-xl shadow-lg p-5 transform transition-all duration-500 opacity-0 translate-y-4 max-w-xs z-50">
+                    <div class="flex items-center space-x-4">
+                        <div class="bg-gradient-to-r from-blue-500 to-blue-700 rounded-full p-3">
+                            <i class="fas fa-robot text-white text-xl"></i>
+                        </div>
+                        <div>
+                            <p class="text-sm font-semibold text-gray-800">Bienvenue sur Mariam AI</p>
+                            <p class="text-xs text-gray-500 mt-1">Votre assistant français intelligent est prêt à vous accompagner.</p>
+                        </div>
+                    </div>
+                    <button class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 focus:outline-none close-welcome">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+            `;
             document.body.appendChild(welcomeMessage);
 
             setTimeout(() => {
                 welcomeMessage.firstElementChild.classList.remove('opacity-0', 'translate-y-4');
             }, 1000);
 
-            setTimeout(() => {
+            // Bouton de fermeture pour le message de bienvenue
+            welcomeMessage.querySelector('.close-welcome').addEventListener('click', () => {
                 welcomeMessage.firstElementChild.classList.add('opacity-0', 'translate-y-4');
                 setTimeout(() => welcomeMessage.remove(), 500);
-            }, 5000);
+            });
+
+            setTimeout(() => {
+                if (document.body.contains(welcomeMessage)) {
+                    welcomeMessage.firstElementChild.classList.add('opacity-0', 'translate-y-4');
+                    setTimeout(() => welcomeMessage.remove(), 500);
+                }
+            }, 7000);
 
             afficherSauvegardes(); // Appel de la fonction pour afficher les sauvegardes
         });
     </script>
-    </script>
 </body>
-
-</html>
+</html>