Update templates/philosophie.html (#2)

- Update templates/philosophie.html (08980db378ceed4183f2bf6d077cb729a776fc40)

templates/philosophie.html

@@ -12,7 +12,6 @@
     <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;
@@ -37,8 +36,6 @@
             overflow: hidden;
             background-color: white;
         }
-
-        /* Styles d'animation */
         .animate-fadeIn {
             animation: fadeIn 0.5s ease-out forwards;
         }
@@ -175,19 +172,18 @@
                     </button>
 
                     <!-- Response Section -->
-                    <div id="response" class="hidden mt-8">
+                    <div id="response" class="hidden mt-8 prose prose-violet max-w-none">
                         <div class="bg-gradient-to-r from-gray-50 to-white rounded-xl p-6 border border-gray-100">
-                            <pre id="response-content" class="whitespace-pre-wrap font-sans text-gray-800"></pre>
+                            <!-- La réponse sera insérée ici -->
                         </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 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 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>
-
                             <span>Copier la dissertation</span>
                         </span>
                     </button>
@@ -231,6 +227,8 @@
             }
         });
 
+
+
         // Animation des boutons
         function addButtonAnimation(buttonId) {
             $(`#${buttonId}`).on('mousedown', function() {
@@ -321,7 +319,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();
 
@@ -369,8 +367,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
+                    $('#response > div').html(htmlContent);
                     $('#response').removeClass('hidden').addClass('animate-fadeIn');
                     $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');
 
@@ -469,29 +467,17 @@
 
 // Gestion de la copie avec retour visuel amélioré
         $('#copy-btn').click(function() {
-            const response = $('#response-content').text();
+            const response = $('#response').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
+                    $(this).removeClass('scale-95 bg-violet-100')
+                        .addClass('bg-green-50 text-green-700');
+
                     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);
+                        $(this).removeClass('bg-green-50 text-green-700');
+                    }, 1000);
 
                     Toast.fire({
                         icon: 'success',