Update templates/index.html

templates/index.html

@@ -129,17 +129,19 @@
         }
 
         .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;
-        }
+    display: none;
+    margin-top: 10px;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    opacity: 0;
+}
+
+.backup-content-expanded {
+    display: block;
+    max-height: 2000px;
+    opacity: 1;
+}
 
         /* Styles for multiple image upload */
         .image-preview {
@@ -611,134 +613,140 @@
         }
 
         function afficherSauvegardes() {
-            const sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
-            const backupsList = document.getElementById('backups-list');
-            backupsList.innerHTML = '';
-            if (sauvegardes.length === 0) {
-                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;
+    const sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
+    const backupsList = document.getElementById('backups-list');
+    backupsList.innerHTML = '';
+    if (sauvegardes.length === 0) {
+        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 hover:bg-blue-50 transition-all duration-200';
+        sauvegardeDiv.innerHTML = `
+            <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" style="display: none;">${marked.parse(sauvegarde.contenu)}</div>
+        `;
+        backupsList.appendChild(sauvegardeDiv);
+
+        // Gestion de l'expansion/contraction du contenu
+        const backupContentDiv = sauvegardeDiv.querySelector('.backup-content');
+        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');
+                    content.style.display = 'none'; // Masquer les autres contenus
+                }
+            });
+            
+            backupContentDiv.classList.toggle('backup-content-expanded');
+            
+            // Basculer l'affichage (display) en fonction de l'état
+            if (backupContentDiv.classList.contains('backup-content-expanded')) {
+                backupContentDiv.style.display = 'block'; // Afficher le contenu
+                setTimeout(() => {
+                    MathJax.typesetPromise([backupContentDiv]);
+                }, 300);
+            } else {
+                backupContentDiv.style.display = 'none'; // Masquer le contenu
             }
+        });
 
-            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 hover:bg-blue-50 transition-all duration-200';
-                sauvegardeDiv.innerHTML = `
-                    <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');
-                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');
-                    
-                    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);
-                    });
-                });
+        // 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);
+            });
+        });
 
-                // 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>
+        // 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>
-                    `;
-                    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);
-                    });
-                });
+                        <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() {
             const form = document.getElementById('francais-form');