Update templates/philosophie.html

templates/philosophie.html

@@ -12,6 +12,7 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.min.css" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
+        /* Style pour les sections repliables */
         .collapsible {
             cursor: pointer;
             padding: 18px;
@@ -36,6 +37,8 @@
             overflow: hidden;
             background-color: white;
         }
+
+        /* Styles d'animation */
         .animate-fadeIn {
             animation: fadeIn 0.5s ease-out forwards;
         }
@@ -58,20 +61,6 @@
                 25% { transform: translateX(-5px); }
                 75% { transform: translateX(5px); }
             }
-        pre {
-            white-space: pre-wrap;       /* CSS-3 */
-            white-space: -moz-pre-wrap;  /* Mozilla */
-            white-space: -pre-wrap;      /* Opera 4-6 */
-            white-space: -o-pre-wrap;    /* Opera 7 */
-            word-wrap: break-word;       /* Internet Explorer 5.5+ */
-            padding: 1rem;
-            margin-bottom: 1rem;
-            border: 1px solid #ddd;
-            border-radius: 0.5rem;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            font-family: 'Courier New', Courier, monospace;
-            font-size: 0.9rem;
-        }
     </style>
 </head>
 
@@ -185,19 +174,20 @@
                         </span>
                     </button>
 
-                      <!-- Response Section -->
+                    <!-- Response Section -->
                     <div id="response" class="hidden mt-8">
                         <div class="bg-gradient-to-r from-gray-50 to-white rounded-xl p-6 border border-gray-100">
-                            <pre id="response-content" class="prose prose-violet max-w-none whitespace-pre-wrap"></pre>
+                            <pre id="response-content" class="whitespace-pre-wrap font-sans text-gray-800"></pre>
                         </div>
                     </div>
 
                     <!-- Copy Button -->
                     <button id="copy-btn" class="hidden w-full py-3 px-6 rounded-xl bg-gray-50 text-gray-700 font-medium border border-gray-200 hover:bg-gray-100 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
                         <span class="flex items-center justify-center space-x-2">
-                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
                             </svg>
+
                             <span>Copier la dissertation</span>
                         </span>
                     </button>
@@ -241,8 +231,6 @@
             }
         });
 
-
-
         // Animation des boutons
         function addButtonAnimation(buttonId) {
             $(`#${buttonId}`).on('mousedown', function() {
@@ -333,7 +321,7 @@
             }
         });
 
-        // Gestion de la soumission avec conversion en Markdown et sauvegarde
+       // Gestion de la soumission avec conversion en Markdown et sauvegarde
         $('#submit-btn').click(function() {
             const question = $('#question').val().trim();
 
@@ -381,8 +369,8 @@
                     Swal.close();
 
                     const htmlContent = marked.parse(data.response);
-                       // Afficher la dissertation en préservant les retours à la ligne
-                    $('#response-content').html(htmlContent);
+                    // Afficher la dissertation en préservant les retours à la ligne
+                       $('#response-content').html(htmlContent);
                     $('#response').removeClass('hidden').addClass('animate-fadeIn');
                     $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');
 
@@ -480,43 +468,54 @@
         updateSavedDissertationsList();
 
 // Gestion de la copie avec retour visuel amélioré
-  $('#copy-btn').click(function() {
-    const response = $('#response-content').text();
-
-    $(this).addClass('scale-95 bg-violet-100');
-    navigator.clipboard.writeText(response)
-        .then(() => {
-            $(this).removeClass('scale-95 bg-violet-100')
-                .addClass('bg-green-50 text-green-700');
-
-            setTimeout(() => {
-                $(this).removeClass('bg-green-50 text-green-700');
-            }, 1000);
+        $('#copy-btn').click(function() {
+            const response = $('#response-content').text();
+
+            $(this).addClass('scale-95 bg-violet-100');
+            navigator.clipboard.writeText(response)
+                .then(() => {
+                     // Changement d'icône et de texte pour confirmer la copie
+                    $(this).find('svg').replaceWith(`
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+                        </svg>
+                    `);
+                    $(this).find('span').text('Copié !');
+
+                    // Réinitialisation du bouton après 1 seconde
+                    setTimeout(() => {
+                        $(this).removeClass('scale-95 bg-violet-100');
+                        $(this).find('svg').replaceWith(`
+                           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+                            </svg>
+                        `);
+                        $(this).find('span').text('Copier la dissertation');
+                    }, 2000);
 
-            Toast.fire({
-                icon: 'success',
-                title: 'Copié avec succès',
-                text: 'Le contenu a été copié dans votre presse-papiers',
-                timer: 2000
-            });
-        })
-        .catch((err) => {
-            console.error('Erreur lors de la copie: ', err);
-            $(this).removeClass('scale-95 bg-violet-100')
-                .addClass('bg-red-50 text-red-700');
+                    Toast.fire({
+                        icon: 'success',
+                        title: 'Copié avec succès',
+                        text: 'Le contenu a été copié dans votre presse-papiers',
+                        timer: 2000
+                    });
+                })
+                .catch(() => {
+                    $(this).removeClass('scale-95 bg-violet-100')
+                        .addClass('bg-red-50 text-red-700');
 
-            setTimeout(() => {
-                $(this).removeClass('bg-red-50 text-red-700');
-            }, 1000);
+                    setTimeout(() => {
+                        $(this).removeClass('bg-red-50 text-red-700');
+                    }, 1000);
 
-            Toast.fire({
-                icon: 'error',
-                title: 'Erreur de copie',
-                text: 'Impossible de copier le contenu',
-                timer: 3000
-            });
+                    Toast.fire({
+                        icon: 'error',
+                        title: 'Erreur de copie',
+                        text: 'Impossible de copier le contenu',
+                        timer: 3000
+                    });
+                });
         });
-});
 
         // Ajout des styles d'animation personnalisés
         const style = document.createElement('style');