Update templates/generale.html

templates/generale.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Question Générale</title>
-  <!-- Style de secours pour cacher les éléments dès le début -->
+  <!-- Style de secours pour masquer les éléments dès le début -->
   <style>
     .hidden { display: none !important; }
   </style>
@@ -20,6 +20,26 @@
   <script src="https://polyfill.io/v3/polyfill.min.js?features=es6" defer></script>
   <!-- Anime.js -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" defer></script>
+  <!-- Configuration de MathJax -->
+  <script>
+    window.MathJax = {
+      tex: {
+        inlineMath: [['$', '$'], ['\\(', '\\)']],
+        displayMath: [['$$', '$$'], ['\\[', '\\]']],
+        processEscapes: true
+      },
+      options: {
+        skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
+      },
+      startup: {
+        pageReady: () => {
+          return MathJax.startup.defaultPageReady().then(() => {
+            console.log('MathJax initial typesetting complete');
+          });
+        }
+      }
+    };
+  </script>
   <!-- MathJax -->
   <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" defer></script>
   <style>
@@ -120,11 +140,6 @@
       margin: 20px 0;
     }
 
-    @keyframes float {
-      0%, 100% { transform: translateY(0); }
-      50% { transform: translateY(-10px); }
-    }
-
     @keyframes fadeInScale {
       0% { 
         opacity: 0; 
@@ -205,6 +220,8 @@
     </div>
 
     <!-- Affichage de la réponse -->
+    <!-- Note : On peut soit ne pas ajouter la classe "hidden" ici,
+         soit la retirer dynamiquement dans le script -->
     <div id="response" class="hidden"></div>
 
     <!-- Bouton pour copier la réponse -->
@@ -234,9 +251,7 @@
       const urlInput = document.getElementById('urlInput');
       const urlList = document.getElementById('urlList');
       const url = urlInput.value.trim();
-
       if (url) {
-        // Création d'un élément URL avec la classe "url-item"
         const urlItem = document.createElement('div');
         urlItem.className = 'url-item flex items-center bg-gray-200 p-2 rounded-lg shadow-sm';
         urlItem.innerHTML = `
@@ -263,7 +278,9 @@
       const responseDiv = document.getElementById('response');
       const copyResponseContainer = document.getElementById('copyResponseContainer');
 
+      // Afficher le loader et s'assurer que le conteneur de réponse est visible
       loader.classList.remove('hidden');
+      responseDiv.classList.remove('hidden');
       responseDiv.innerHTML = '';
       responseDiv.classList.add('opacity-0');
       copyResponseContainer.classList.add('hidden');