Update templates/index.html

templates/index.html

@@ -11,10 +11,94 @@
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
-        /* ... (votre CSS existant) ... */
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+
+        .loader {
+            width: 48px;
+            height: 48px;
+            border: 5px solid #FFF;
+            border-bottom-color: #3B82F6;
+            border-radius: 50%;
+            display: inline-block;
+            box-sizing: border-box;
+            animation: rotation 1s linear infinite;
+        }
+
+        @keyframes rotation {
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+
+        .math-content {
+            font-size: 1.1em;
+            line-height: 1.6;
+            overflow-x: auto;
+        }
+
+        .math-content p {
+            margin-bottom: 1rem;
+        }
+
+        .math-content .MathJax {
+            overflow-x: auto;
+            overflow-y: hidden;
+            padding: 0.5rem 0;
+        }
+
+        @media (max-width: 640px) {
+            .math-content .MathJax {
+                font-size: 0.9em;
+            }
+        }
+
+        .math-hidden {
+            visibility: hidden;
+        }
     </style>
     <script>
-        // ... (votre configuration de marked et MathJax) ...
+        // Configuration de marked
+        marked.setOptions({
+            breaks: true,
+            gfm: true,
+            headerIds: false
+        });
+
+        // Configuration de MathJax
+        MathJax = {
+            tex: {
+                inlineMath: [['$', '$'], ['\\(', '\\)']],
+                displayMath: [['$$', '$$'], ['\\[', '\\]']],
+                processEscapes: true,
+                macros: {
+                    R: "{\\mathbb{R}}",
+                    N: "{\\mathbb{N}}",
+                    Z: "{\\mathbb{Z}}",
+                    vecv: ["\\begin{pmatrix}#1\\\\#2\\\\#3\\end{pmatrix}", 3]
+                }
+            },
+            svg: {
+                fontCache: 'global'
+            },
+            options: {
+                renderActions: {
+                    addMenu: [],
+                    checkLoading: [150, (doc) => {
+                        document.querySelectorAll('.math-content').forEach(el => {
+                            el.classList.remove('math-hidden');
+                        });
+                    }]
+                }
+            }
+        };
     </script>
 </head>
 
@@ -146,15 +230,17 @@
                 result.innerHTML = marked.parse(generatedResult);
 
                 // Rendre les maths avec MathJax
-                MathJax.typesetPromise([result])
-                    .then(() => {
-                        result.classList.remove('math-hidden');
-                    })
-                    .catch((err) => {
-                        console.error('Erreur MathJax:', err);
-                        result.innerHTML = "Erreur lors du rendu des mathématiques.";
-                        result.classList.remove('math-hidden');
-                    });
+                setTimeout(() => {
+                    MathJax.typesetPromise([result])
+                        .then(() => {
+                            result.classList.remove('math-hidden');
+                        })
+                        .catch((err) => {
+                            console.error('Erreur MathJax:', err);
+                            result.innerHTML = "Erreur lors du rendu des mathématiques.";
+                            result.classList.remove('math-hidden');
+                        });
+                }, 0);
 
             } catch (error) {
                 console.error('Erreur:', error);
@@ -178,16 +264,24 @@
         // Sauvegarder la réponse dans le localStorage
         saveButton.addEventListener('click', function () {
             const timestamp = new Date().toLocaleString();
-            const savedData = {
-                timestamp: timestamp,
-                image: imagePreview.src,
-                result: generatedResult
-            };
+            const file = imageInput.files[0];
 
-            localStorage.setItem('savedResult-' + Date.now(), JSON.stringify(savedData));
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function (e) {
+                    const savedData = {
+                        timestamp: timestamp,
+                        image: e.target.result, // On sauvegarde la data URL de l'image
+                        result: generatedResult
+                    };
 
-            // Message de confirmation (optionnel)
-            alert('Réponse sauvegardée!');
+                    localStorage.setItem('savedResult-' + Date.now(), JSON.stringify(savedData));
+                    alert('Réponse sauvegardée!');
+                };
+                reader.readAsDataURL(file); // On lit l'image comme une data URL
+            } else {
+                alert('Aucune image sélectionnée.');
+            }
         });
     </script>
 </body>