Upload index.html

templates/index.html

@@ -4,16 +4,17 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Mariam M-0 | Solution Mathématique</title>
-  <!-- Tailwind CSS -->
+  <!-- Tailwind CSS (version 2.2.19 utilisée ici, à mettre à jour si besoin) -->
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
   
-  <!-- Configuration de MathJax -->
+  <!-- Configuration optimisée de MathJax avec support étendu LaTeX -->
   <script>
     window.MathJax = {
       tex: {
         inlineMath: [['$', '$']],
         displayMath: [['$$', '$$']],
         processEscapes: true,
+        // Chargement automatique de commandes supplémentaires (ex. environnements de tableaux)
         packages: {'[+]': ['autoload','ams']}
       },
       options: {
@@ -30,14 +31,14 @@
   </script>
   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script" async></script>
   <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.min.js"></script>
-  <!-- Bibliothèque pour l'export en PDF -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
 
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');
+
     body {
       font-family: 'Space Grotesk', sans-serif;
     }
+
     .uploadArea {
       background: #f3f4f6;
       border: 2px dashed #d1d5db;
@@ -46,6 +47,7 @@
     .uploadArea:hover {
       border-color: #3b82f6;
     }
+
     .blue-button {
       background: #3b82f6;
       transition: background-color 0.2s ease;
@@ -53,6 +55,7 @@
     .blue-button:hover {
       background: #2563eb;
     }
+
     .loader {
       width: 48px;
       height: 48px;
@@ -66,6 +69,7 @@
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
     }
+
     .thought-box {
       transition: max-height 0.3s ease-out;
       max-height: 0;
@@ -74,22 +78,27 @@
     .thought-box.open {
       max-height: 500px;
     }
+
     #thoughtsContent, #answerContent {
       max-height: 500px;
       overflow-y: auto;
       scroll-behavior: smooth;
       white-space: pre-wrap;
     }
+
     .preview-image {
       max-width: 300px;
       max-height: 300px;
       object-fit: contain;
     }
+
     .timestamp {
       color: #3b82f6;
       font-size: 0.9em;
       margin-left: 8px;
     }
+
+    /* Styles supplémentaires pour une meilleure présentation des tableaux */
     table {
       border-collapse: collapse;
       width: 100%;
@@ -104,6 +113,7 @@
       background-color: #f3f4f6;
       font-weight: 600;
     }
+    /* Pour un rendu responsive, ajouter éventuellement : */
     .table-responsive {
       overflow-x: auto;
     }
@@ -151,23 +161,18 @@
 
       <!-- Affichage de la solution -->
       <section id="solution" class="hidden mt-8 space-y-6">
-        <div class="border-t pt-4 flex justify-between items-center">
-          <div>
-            <button id="thoughtsToggle" type="button" class="p-2">
-              <span class="font-medium text-gray-700">Processus de Réflexion</span>
-            </button>
+        <div class="border-t pt-4">
+          <button id="thoughtsToggle" type="button" class="w-full flex justify-between items-center p-2">
+            <span class="font-medium text-gray-700">Processus de Réflexion</span>
             <span id="timestamp" class="timestamp"></span>
-          </div>
-          <!-- Bouton d'export en PDF -->
-          <button id="exportPdf" type="button" class="blue-button py-2 px-4 text-white font-medium rounded-lg">
-            Exporter en PDF
           </button>
-        </div>
-        <div id="thoughtsBox" class="thought-box">
-          <div id="thoughtsContent" class="p-4 text-gray-600"></div>
+          <div id="thoughtsBox" class="thought-box">
+            <div id="thoughtsContent" class="p-4 text-gray-600"></div>
+          </div>
         </div>
         <div class="border-t pt-6">
           <h3 class="text-xl font-bold text-gray-800 mb-4">Solution</h3>
+          <!-- Enveloppement d'éventuels tableaux dans une div responsive -->
           <div id="answerContent" class="text-gray-700 table-responsive"></div>
         </div>
       </section>
@@ -188,7 +193,6 @@
       const imagePreview = document.getElementById('imagePreview');
       const previewImage = document.getElementById('previewImage');
       const timestamp = document.getElementById('timestamp');
-      const exportPdf = document.getElementById('exportPdf');
 
       let startTime = null;
       let timerInterval = null;
@@ -251,7 +255,7 @@
         handleFileSelect(e.dataTransfer.files[0]);
       });
 
-      // Fonction pour relancer le rendu MathJax dès que le contenu est mis à jour
+      // Fonction pour relancer le rendu MathJax dès que le contenu de la réponse est mis à jour
       const typesetAnswerIfReady = async () => {
         if (window.mathJaxReady) {
           MathJax.startup.document.elements = [document.getElementById('answerContent')];
@@ -264,8 +268,11 @@
 
       // Fonction pour déclencher la mise à jour de l'affichage
       const updateDisplay = async () => {
+        // Mise à jour du contenu via marked
         thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
         answerContent.innerHTML = marked.parse(answerBuffer);
+
+        // Lancer le rendu MathJax
         await typesetAnswerIfReady();
         updateTimeout = null;
       };
@@ -276,7 +283,7 @@
         updateTimeout = setTimeout(updateDisplay, 200);
       };
 
-      // Configuration de marked
+      // Configuration de marked avec support du mode GFM (pour les tableaux) et interprétation des sauts de ligne
       marked.setOptions({
         gfm: true,
         breaks: true
@@ -339,6 +346,7 @@
                 }
               }
             }
+            // Planifier la mise à jour dé-bouncée
             scheduleUpdate();
           };
 
@@ -346,6 +354,7 @@
           while (true) {
             const { done, value } = await reader.read();
             if (done) {
+              // Traitement du contenu restant dans le buffer
               if (buffer) {
                 const data = JSON.parse(buffer.slice(5));
                 if (data.content) {
@@ -369,21 +378,6 @@
           stopTimer();
         }
       });
-
-      // Export de la solution au format PDF
-      exportPdf.addEventListener('click', () => {
-        // On peut par exemple exporter l'élément "solution"
-        const element = document.getElementById('solution');
-        // Options d'export (adapter selon vos besoins)
-        const opt = {
-          margin:       0.5,
-          filename:     'solution.pdf',
-          image:        { type: 'jpeg', quality: 0.98 },
-          html2canvas:  { scale: 2 },
-          jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
-        };
-        html2pdf().set(opt).from(element).save();
-      });
     });
   </script>
 </body>