Update templates/philosophie.html

templates/philosophie.html

@@ -58,6 +58,20 @@
                 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>
 
@@ -171,10 +185,10 @@
                         </span>
                     </button>
 
-                    <!-- Response Section -->
-                    <div id="response" class="hidden mt-8 prose prose-violet max-w-none">
+                      <!-- 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">
-                            <!-- La réponse sera insérée ici -->
+                            <pre id="response-content" class="prose prose-violet max-w-none whitespace-pre-wrap"></pre>
                         </div>
                     </div>
 
@@ -367,8 +381,8 @@
                     Swal.close();
 
                     const htmlContent = marked.parse(data.response);
-                    // Afficher la dissertation
-                    $('#response > div').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');
 
@@ -466,42 +480,43 @@
         updateSavedDissertationsList();
 
 // Gestion de la copie avec retour visuel amélioré
-        $('#copy-btn').click(function() {
-            const response = $('#response').text();
+  $('#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');
+    $(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);
+            setTimeout(() => {
+                $(this).removeClass('bg-green-50 text-green-700');
+            }, 1000);
 
-                    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');
+            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');
 
-                    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');