|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Résolution de Problèmes Mathématiques</title> |
|
|
|
|
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
|
|
|
|
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script> |
|
|
|
|
|
|
|
|
<script type="text/javascript" id="MathJax-script" async |
|
|
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"> |
|
|
</script> |
|
|
<script> |
|
|
window.MathJax = { |
|
|
tex: { |
|
|
inlineMath: [['$', '$'], ['\\(', '\\)']], |
|
|
displayMath: [['$$', '$$'], ['\\[', '\\]']], |
|
|
processEscapes: true, |
|
|
macros: { |
|
|
R: "{\\mathbb{R}}", |
|
|
N: "{\\mathbb{N}}", |
|
|
Z: "{\\mathbb{Z}}" |
|
|
} |
|
|
}, |
|
|
svg: { |
|
|
fontCache: 'global' |
|
|
}, |
|
|
options: { |
|
|
renderActions: { |
|
|
addMenu: [] |
|
|
} |
|
|
} |
|
|
}; |
|
|
</script> |
|
|
|
|
|
|
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> |
|
|
|
|
|
<style> |
|
|
|
|
|
.dropzone { |
|
|
border: 2px dashed #4F46E5; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.dropzone:hover { |
|
|
border-color: #312E81; |
|
|
background-color: rgba(79, 70, 229, 0.1); |
|
|
} |
|
|
.loading { |
|
|
display: none; |
|
|
} |
|
|
.loading.active { |
|
|
display: flex; |
|
|
} |
|
|
.math-content { |
|
|
font-size: 1.1em; |
|
|
line-height: 1.6; |
|
|
overflow-x: auto; |
|
|
} |
|
|
.math-content p { |
|
|
margin-bottom: 1rem; |
|
|
white-space: pre-wrap; |
|
|
} |
|
|
.math-content .MathJax { |
|
|
overflow-x: auto; |
|
|
overflow-y: hidden; |
|
|
padding: 0.5rem 0; |
|
|
} |
|
|
@media (max-width: 640px) { |
|
|
.math-content .MathJax { |
|
|
font-size: 0.9em; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body class="min-h-screen bg-gradient-to-br from-blue-50 to-white"> |
|
|
|
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
|
|
|
|
|
|
async function renderMathContent(text) { |
|
|
try { |
|
|
|
|
|
latexContent.innerHTML = ''; |
|
|
|
|
|
|
|
|
const htmlContent = marked.parse(text); |
|
|
latexContent.innerHTML = htmlContent; |
|
|
|
|
|
|
|
|
MathJax.typesetPromise([latexContent]).then(() => { |
|
|
response.classList.remove('hidden'); |
|
|
}).catch((err) => { |
|
|
console.error('Erreur MathJax:', err); |
|
|
showError('Erreur lors du rendu de la formule mathématique'); |
|
|
}); |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Erreur lors du rendu:', error); |
|
|
showError('Erreur lors du rendu de la formule mathématique'); |
|
|
|
|
|
latexContent.innerHTML = ` |
|
|
<div class="text-red-600 mb-4">Une erreur s'est produite lors du rendu. Voici le texte brut :</div> |
|
|
<pre class="bg-gray-100 p-4 rounded-lg overflow-x-auto">${text}</pre> |
|
|
`; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
