Update templates/index.html
Browse files- templates/index.html +49 -34
templates/index.html
CHANGED
|
@@ -4,8 +4,8 @@
|
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Solveur Expert IA - Maths, Physique, Chimie</title>
|
| 7 |
-
<!-- Tailwind CSS -->
|
| 8 |
-
<script src="https://
|
| 9 |
<!-- Google Fonts -->
|
| 10 |
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Fira+Code&display=swap" rel="stylesheet">
|
| 11 |
<!-- Font Awesome Icons -->
|
|
@@ -17,6 +17,7 @@
|
|
| 17 |
--secondary-color: #1abc9c;
|
| 18 |
--accent-color: #e74c3c;
|
| 19 |
--success-color: #27ae60;
|
|
|
|
| 20 |
}
|
| 21 |
|
| 22 |
body {
|
|
@@ -27,12 +28,13 @@
|
|
| 27 |
font-family: 'Fira Code', monospace;
|
| 28 |
}
|
| 29 |
|
|
|
|
| 30 |
.gradient-primary {
|
| 31 |
-
background-image: linear-gradient(to right,
|
| 32 |
}
|
| 33 |
|
| 34 |
.gradient-secondary {
|
| 35 |
-
background-image: linear-gradient(to right,
|
| 36 |
}
|
| 37 |
|
| 38 |
@keyframes spin {
|
|
@@ -43,11 +45,29 @@
|
|
| 43 |
animation: spin 0.8s linear infinite;
|
| 44 |
}
|
| 45 |
|
|
|
|
| 46 |
.upload-highlight {
|
| 47 |
-
border-color: var(--secondary-color); /* Use
|
| 48 |
-
background-color:
|
| 49 |
}
|
| 50 |
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 51 |
</head>
|
| 52 |
<body class="bg-gray-50 text-gray-700 min-h-screen flex flex-col items-center py-6 px-4">
|
| 53 |
<div class="bg-white rounded-xl shadow-lg w-full max-w-2xl p-6 md:p-8">
|
|
@@ -57,8 +77,7 @@
|
|
| 57 |
</h1>
|
| 58 |
<p class="text-center text-gray-500 mb-8">Solutions LaTeX précises pour Maths, Physique et Chimie.</p>
|
| 59 |
|
| 60 |
-
|
| 61 |
-
<div id="upload-section" class="relative border-3 border-dashed border-gray-300 rounded-xl p-8 mb-6 cursor-pointer transition-all duration-300 bg-gray-50 text-center group hover:border-[var(--secondary-color)]">
|
| 62 |
<div class="upload-content">
|
| 63 |
<i class="fas fa-file-arrow-up text-5xl mb-4 text-[var(--secondary-color)] transition-transform duration-300 transform group-hover:scale-110 group-hover:-translate-y-1"></i>
|
| 64 |
<p class="text-lg font-medium mb-1">Déposez l'image de votre exercice ici</p>
|
|
@@ -70,7 +89,6 @@
|
|
| 70 |
</div>
|
| 71 |
</div>
|
| 72 |
|
| 73 |
-
<!-- Options de formatage -->
|
| 74 |
<div class="bg-gray-50 rounded-xl p-5 mb-6 border border-gray-200">
|
| 75 |
<h3 class="flex items-center font-semibold text-[var(--primary-color)] mb-4">
|
| 76 |
<i class="fas fa-cogs mr-2 text-[var(--secondary-color)]"></i>Options de Formatage
|
|
@@ -89,53 +107,44 @@
|
|
| 89 |
</div>
|
| 90 |
</div>
|
| 91 |
|
| 92 |
-
<!-- Bouton principal -->
|
| 93 |
<button id="solve-button" class="gradient-primary w-full py-4 px-6 rounded-xl text-white font-semibold text-lg tracking-wide flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-400 disabled:shadow-none transition duration-300 transform hover:translate-y-px disabled:transform-none" disabled>
|
| 94 |
<i class="fas fa-rocket mr-2"></i>Obtenir la Solution
|
| 95 |
</button>
|
| 96 |
|
| 97 |
-
<!-- Bouton rejoindre Telegram -->
|
| 98 |
<a href="https://t.me/+ic4zemy1E1k0MzQ0" target="_blank" id="telegram-join-button" class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-xl flex items-center justify-center transition duration-300 transform hover:translate-y-px">
|
| 99 |
<i class="fab fa-telegram-plane mr-2"></i>Rejoindre le groupe Telegram
|
| 100 |
</a>
|
| 101 |
|
| 102 |
-
<!-- Conteneur de résolution (initialement caché) -->
|
| 103 |
<div id="solving-container" class="hidden mt-8">
|
| 104 |
-
<!-- Section de statut -->
|
| 105 |
<div class="text-center mb-5">
|
| 106 |
<div id="status-message-element" class="flex items-center justify-center flex-wrap text-lg font-medium text-[var(--primary-color)]">
|
| 107 |
<i class="fas fa-hourglass-start mr-2"></i>Prêt à résoudre votre exercice...
|
| 108 |
</div>
|
| 109 |
</div>
|
| 110 |
|
| 111 |
-
<!-- Spinner de chargement -->
|
| 112 |
<div id="loading-spinner-element" class="hidden w-10 h-10 mx-auto my-6 border-4 border-gray-300 border-l-[var(--secondary-color)] rounded-full animate-spin-custom"></div>
|
| 113 |
|
| 114 |
-
<!-- Notice Telegram -->
|
| 115 |
<div class="flex items-center bg-blue-50 border-l-4 border-[var(--secondary-color)] p-4 rounded-xl my-6">
|
| 116 |
<i class="fab fa-telegram text-2xl text-[var(--secondary-color)] mr-3"></i>
|
| 117 |
<span>Une copie de la solution sera envoyée sur Telegram pour archivage.</span>
|
| 118 |
</div>
|
| 119 |
|
| 120 |
-
<!-- Conteneur de réponse -->
|
| 121 |
<div id="response-container-element" class="hidden mt-6 p-6 border border-gray-300 rounded-xl bg-white">
|
| 122 |
<h3 class="flex items-center font-semibold text-xl text-[var(--primary-color)] mb-4">
|
| 123 |
<i class="fas fa-file-code mr-3 text-[var(--secondary-color)]"></i>Correction LaTeX Détaillée :
|
| 124 |
</h3>
|
| 125 |
-
<div id="response-output" class="font-code bg-gray-900 text-gray-200 p-5 rounded-xl overflow-x-auto whitespace-pre-wrap
|
| 126 |
<button id="copy-button" class="gradient-secondary px-6 py-3 rounded-xl text-white font-medium flex items-center justify-center transition duration-300 transform hover:translate-y-px">
|
| 127 |
<i class="fas fa-copy mr-2"></i>Copier le code LaTeX
|
| 128 |
</button>
|
| 129 |
</div>
|
| 130 |
|
| 131 |
-
<!-- Affichage des erreurs -->
|
| 132 |
<div id="error-display-element" class="hidden bg-red-50 border-2 border-[var(--accent-color)] text-[var(--accent-color)] p-4 rounded-xl my-5 font-medium">
|
| 133 |
-
<!-- Les erreurs seront affichées ici -->
|
| 134 |
</div>
|
| 135 |
</div>
|
| 136 |
</div>
|
| 137 |
|
| 138 |
-
<footer class="mt-12 mb-5 text-gray-500 text-sm">
|
| 139 |
Solutions générées par <a href="#" target="_blank" class="text-[var(--secondary-color)] font-medium hover:underline">Mariam IA</a> © 2025 - Précision garantie.
|
| 140 |
</footer>
|
| 141 |
|
|
@@ -166,9 +175,13 @@
|
|
| 166 |
e.stopPropagation();
|
| 167 |
}
|
| 168 |
|
|
|
|
|
|
|
|
|
|
|
|
|
| 169 |
['dragenter', 'dragover'].forEach(eventName => {
|
| 170 |
uploadSection.addEventListener(eventName, () => {
|
| 171 |
-
uploadSection.classList.add('upload-highlight');
|
| 172 |
}, false);
|
| 173 |
});
|
| 174 |
|
|
@@ -337,20 +350,22 @@
|
|
| 337 |
const selectedPromptText = promptTypeSelect.options[promptTypeSelect.selectedIndex].text.split('(')[0].trim();
|
| 338 |
let statusMsg = overrideMessage || '';
|
| 339 |
let iconClass = 'fas fa-hourglass-start';
|
| 340 |
-
|
|
|
|
|
|
|
| 341 |
|
| 342 |
if (!overrideMessage) {
|
| 343 |
switch(status) {
|
| 344 |
case 'pending': statusMsg = "Lancement de l'analyse par l'IA..."; iconClass = 'fas fa-play-circle'; break;
|
| 345 |
-
case 'processing': statusMsg = "L'IA déchiffre votre exercice..."; iconClass = 'fas fa-brain';
|
| 346 |
case 'generating_latex': statusMsg = "Construction de la solution LaTeX..."; iconClass = 'fas fa-scroll'; break;
|
| 347 |
case 'cleaning_latex': statusMsg = "Peaufinage du code LaTeX..."; iconClass = 'fas fa-magic'; break;
|
| 348 |
-
case 'generating_pdf': statusMsg = "Compilation du document PDF final..."; iconClass = 'fas fa-file-pdf';
|
| 349 |
-
case 'completed': statusMsg = "Solution Complète et Précise Générée !"; iconClass = 'fas fa-check-double';
|
| 350 |
-
case 'completed_tex_only': statusMsg = "Solution LaTeX Précise Générée ! (PDF non requis/dispo)"; iconClass = 'fas fa-check-circle';
|
| 351 |
-
case 'pdf_error': statusMsg = "Solution LaTeX Précise Générée ! (Erreur PDF)"; iconClass = 'fas fa-file-excel';
|
| 352 |
-
case 'error': statusMsg = "Une anomalie technique est survenue."; iconClass = 'fas fa-times-circle';
|
| 353 |
-
case 'error_user': statusMsg = "Veuillez vérifier votre image."; iconClass = 'fas fa-exclamation-triangle';
|
| 354 |
default: statusMsg = `Progression: ${status}`; iconClass = 'fas fa-spinner fa-spin';
|
| 355 |
}
|
| 356 |
}
|
|
@@ -360,7 +375,7 @@
|
|
| 360 |
taskInfoHtml = `<span class="text-sm text-gray-500 ml-2">(Tâche ${taskId.substring(0,6)} | Style: ${selectedPromptText})</span>`;
|
| 361 |
}
|
| 362 |
|
| 363 |
-
statusMessageElement.innerHTML = `<i class="${iconClass} mr-2" style="
|
| 364 |
}
|
| 365 |
|
| 366 |
function escapeHtml(unsafe) {
|
|
@@ -372,15 +387,15 @@
|
|
| 372 |
const textToCopy = responseOutputDiv.textContent;
|
| 373 |
navigator.clipboard.writeText(textToCopy).then(() => {
|
| 374 |
const originalIcon = copyButton.querySelector('i').className;
|
| 375 |
-
const originalText = copyButton.childNodes[1] ? copyButton.childNodes[1].nodeValue : '
|
| 376 |
copyButton.innerHTML = `<i class="fas fa-check mr-2"></i> Code Copié !`;
|
| 377 |
copyButton.classList.remove('gradient-secondary');
|
| 378 |
-
copyButton.style.backgroundColor = 'var(--success-color)';
|
| 379 |
|
| 380 |
setTimeout(() => {
|
| 381 |
-
copyButton.innerHTML = `<i class="${originalIcon} mr-2"></i
|
| 382 |
copyButton.classList.add('gradient-secondary');
|
| 383 |
-
copyButton.style.backgroundColor = '';
|
| 384 |
}, 2500);
|
| 385 |
}).catch(err => {
|
| 386 |
console.error('Erreur de copie: ', err);
|
|
|
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Solveur Expert IA - Maths, Physique, Chimie</title>
|
| 7 |
+
<!-- Tailwind CSS Play CDN (v3 - JIT enabled) -->
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
<!-- Google Fonts -->
|
| 10 |
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Fira+Code&display=swap" rel="stylesheet">
|
| 11 |
<!-- Font Awesome Icons -->
|
|
|
|
| 17 |
--secondary-color: #1abc9c;
|
| 18 |
--accent-color: #e74c3c;
|
| 19 |
--success-color: #27ae60;
|
| 20 |
+
--light-secondary-bg: #e8f8f5; /* For upload highlight */
|
| 21 |
}
|
| 22 |
|
| 23 |
body {
|
|
|
|
| 28 |
font-family: 'Fira Code', monospace;
|
| 29 |
}
|
| 30 |
|
| 31 |
+
/* Gradients can be defined here or as Tailwind arbitrary values if preferred */
|
| 32 |
.gradient-primary {
|
| 33 |
+
background-image: linear-gradient(to right, var(--secondary-color) 0%, #16a085 100%);
|
| 34 |
}
|
| 35 |
|
| 36 |
.gradient-secondary {
|
| 37 |
+
background-image: linear-gradient(to right, var(--primary-color) 0%, #34495e 100%);
|
| 38 |
}
|
| 39 |
|
| 40 |
@keyframes spin {
|
|
|
|
| 45 |
animation: spin 0.8s linear infinite;
|
| 46 |
}
|
| 47 |
|
| 48 |
+
/* This class is added by JS, so define its properties here */
|
| 49 |
.upload-highlight {
|
| 50 |
+
border-color: var(--secondary-color) !important; /* Use !important if Tailwind specificity is an issue */
|
| 51 |
+
background-color: var(--light-secondary-bg) !important;
|
| 52 |
}
|
| 53 |
</style>
|
| 54 |
+
<script>
|
| 55 |
+
// Optional: Configure Tailwind if needed (e.g., extending theme colors)
|
| 56 |
+
// For this example, we'll rely on arbitrary values for CSS variables,
|
| 57 |
+
// which the Play CDN handles well.
|
| 58 |
+
// tailwind.config = {
|
| 59 |
+
// theme: {
|
| 60 |
+
// extend: {
|
| 61 |
+
// colors: {
|
| 62 |
+
// 'custom-primary': 'var(--primary-color)',
|
| 63 |
+
// 'custom-secondary': 'var(--secondary-color)',
|
| 64 |
+
// 'custom-accent': 'var(--accent-color)',
|
| 65 |
+
// 'custom-success': 'var(--success-color)',
|
| 66 |
+
// }
|
| 67 |
+
// }
|
| 68 |
+
// }
|
| 69 |
+
// }
|
| 70 |
+
</script>
|
| 71 |
</head>
|
| 72 |
<body class="bg-gray-50 text-gray-700 min-h-screen flex flex-col items-center py-6 px-4">
|
| 73 |
<div class="bg-white rounded-xl shadow-lg w-full max-w-2xl p-6 md:p-8">
|
|
|
|
| 77 |
</h1>
|
| 78 |
<p class="text-center text-gray-500 mb-8">Solutions LaTeX précises pour Maths, Physique et Chimie.</p>
|
| 79 |
|
| 80 |
+
<div id="upload-section" class="relative border-2 border-dashed border-gray-300 rounded-xl p-8 mb-6 cursor-pointer transition-all duration-300 bg-gray-50 text-center group hover:border-[var(--secondary-color)] hover:bg-[var(--light-secondary-bg)]">
|
|
|
|
| 81 |
<div class="upload-content">
|
| 82 |
<i class="fas fa-file-arrow-up text-5xl mb-4 text-[var(--secondary-color)] transition-transform duration-300 transform group-hover:scale-110 group-hover:-translate-y-1"></i>
|
| 83 |
<p class="text-lg font-medium mb-1">Déposez l'image de votre exercice ici</p>
|
|
|
|
| 89 |
</div>
|
| 90 |
</div>
|
| 91 |
|
|
|
|
| 92 |
<div class="bg-gray-50 rounded-xl p-5 mb-6 border border-gray-200">
|
| 93 |
<h3 class="flex items-center font-semibold text-[var(--primary-color)] mb-4">
|
| 94 |
<i class="fas fa-cogs mr-2 text-[var(--secondary-color)]"></i>Options de Formatage
|
|
|
|
| 107 |
</div>
|
| 108 |
</div>
|
| 109 |
|
|
|
|
| 110 |
<button id="solve-button" class="gradient-primary w-full py-4 px-6 rounded-xl text-white font-semibold text-lg tracking-wide flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-400 disabled:shadow-none transition duration-300 transform hover:translate-y-px disabled:transform-none" disabled>
|
| 111 |
<i class="fas fa-rocket mr-2"></i>Obtenir la Solution
|
| 112 |
</button>
|
| 113 |
|
|
|
|
| 114 |
<a href="https://t.me/+ic4zemy1E1k0MzQ0" target="_blank" id="telegram-join-button" class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-xl flex items-center justify-center transition duration-300 transform hover:translate-y-px">
|
| 115 |
<i class="fab fa-telegram-plane mr-2"></i>Rejoindre le groupe Telegram
|
| 116 |
</a>
|
| 117 |
|
|
|
|
| 118 |
<div id="solving-container" class="hidden mt-8">
|
|
|
|
| 119 |
<div class="text-center mb-5">
|
| 120 |
<div id="status-message-element" class="flex items-center justify-center flex-wrap text-lg font-medium text-[var(--primary-color)]">
|
| 121 |
<i class="fas fa-hourglass-start mr-2"></i>Prêt à résoudre votre exercice...
|
| 122 |
</div>
|
| 123 |
</div>
|
| 124 |
|
|
|
|
| 125 |
<div id="loading-spinner-element" class="hidden w-10 h-10 mx-auto my-6 border-4 border-gray-300 border-l-[var(--secondary-color)] rounded-full animate-spin-custom"></div>
|
| 126 |
|
|
|
|
| 127 |
<div class="flex items-center bg-blue-50 border-l-4 border-[var(--secondary-color)] p-4 rounded-xl my-6">
|
| 128 |
<i class="fab fa-telegram text-2xl text-[var(--secondary-color)] mr-3"></i>
|
| 129 |
<span>Une copie de la solution sera envoyée sur Telegram pour archivage.</span>
|
| 130 |
</div>
|
| 131 |
|
|
|
|
| 132 |
<div id="response-container-element" class="hidden mt-6 p-6 border border-gray-300 rounded-xl bg-white">
|
| 133 |
<h3 class="flex items-center font-semibold text-xl text-[var(--primary-color)] mb-4">
|
| 134 |
<i class="fas fa-file-code mr-3 text-[var(--secondary-color)]"></i>Correction LaTeX Détaillée :
|
| 135 |
</h3>
|
| 136 |
+
<div id="response-output" class="font-code bg-gray-900 text-gray-200 p-5 rounded-xl overflow-x-auto whitespace-pre-wrap break-words max-h-96 mb-5 border border-gray-700"></div>
|
| 137 |
<button id="copy-button" class="gradient-secondary px-6 py-3 rounded-xl text-white font-medium flex items-center justify-center transition duration-300 transform hover:translate-y-px">
|
| 138 |
<i class="fas fa-copy mr-2"></i>Copier le code LaTeX
|
| 139 |
</button>
|
| 140 |
</div>
|
| 141 |
|
|
|
|
| 142 |
<div id="error-display-element" class="hidden bg-red-50 border-2 border-[var(--accent-color)] text-[var(--accent-color)] p-4 rounded-xl my-5 font-medium">
|
|
|
|
| 143 |
</div>
|
| 144 |
</div>
|
| 145 |
</div>
|
| 146 |
|
| 147 |
+
<footer class="mt-12 mb-5 text-gray-500 text-sm text-center">
|
| 148 |
Solutions générées par <a href="#" target="_blank" class="text-[var(--secondary-color)] font-medium hover:underline">Mariam IA</a> © 2025 - Précision garantie.
|
| 149 |
</footer>
|
| 150 |
|
|
|
|
| 175 |
e.stopPropagation();
|
| 176 |
}
|
| 177 |
|
| 178 |
+
// Hover effects are now handled by Tailwind's `group hover:` and `hover:` classes directly on #upload-section
|
| 179 |
+
// The .upload-highlight class is kept for explicit JS addition if needed elsewhere,
|
| 180 |
+
// but for dragenter/dragover, Tailwind's hover states are cleaner.
|
| 181 |
+
// If you still want JS to add a class for drag states:
|
| 182 |
['dragenter', 'dragover'].forEach(eventName => {
|
| 183 |
uploadSection.addEventListener(eventName, () => {
|
| 184 |
+
uploadSection.classList.add('upload-highlight');
|
| 185 |
}, false);
|
| 186 |
});
|
| 187 |
|
|
|
|
| 350 |
const selectedPromptText = promptTypeSelect.options[promptTypeSelect.selectedIndex].text.split('(')[0].trim();
|
| 351 |
let statusMsg = overrideMessage || '';
|
| 352 |
let iconClass = 'fas fa-hourglass-start';
|
| 353 |
+
// We use inline style for icon color to ensure CSS variables are applied
|
| 354 |
+
let iconColorStyle = "color: var(--primary-color);";
|
| 355 |
+
|
| 356 |
|
| 357 |
if (!overrideMessage) {
|
| 358 |
switch(status) {
|
| 359 |
case 'pending': statusMsg = "Lancement de l'analyse par l'IA..."; iconClass = 'fas fa-play-circle'; break;
|
| 360 |
+
case 'processing': statusMsg = "L'IA déchiffre votre exercice..."; iconClass = 'fas fa-brain'; iconColorStyle = 'color: var(--secondary-color);'; break;
|
| 361 |
case 'generating_latex': statusMsg = "Construction de la solution LaTeX..."; iconClass = 'fas fa-scroll'; break;
|
| 362 |
case 'cleaning_latex': statusMsg = "Peaufinage du code LaTeX..."; iconClass = 'fas fa-magic'; break;
|
| 363 |
+
case 'generating_pdf': statusMsg = "Compilation du document PDF final..."; iconClass = 'fas fa-file-pdf'; iconColorStyle = 'color: var(--accent-color);'; break;
|
| 364 |
+
case 'completed': statusMsg = "Solution Complète et Précise Générée !"; iconClass = 'fas fa-check-double'; iconColorStyle = 'color: var(--success-color);'; break;
|
| 365 |
+
case 'completed_tex_only': statusMsg = "Solution LaTeX Précise Générée ! (PDF non requis/dispo)"; iconClass = 'fas fa-check-circle'; iconColorStyle = 'color: var(--success-color);'; break;
|
| 366 |
+
case 'pdf_error': statusMsg = "Solution LaTeX Précise Générée ! (Erreur PDF)"; iconClass = 'fas fa-file-excel'; iconColorStyle = 'color: #f39c12;'; break; // Specific color
|
| 367 |
+
case 'error': statusMsg = "Une anomalie technique est survenue."; iconClass = 'fas fa-times-circle'; iconColorStyle = 'color: var(--accent-color);'; break;
|
| 368 |
+
case 'error_user': statusMsg = "Veuillez vérifier votre image."; iconClass = 'fas fa-exclamation-triangle'; iconColorStyle = 'color: var(--accent-color);'; break;
|
| 369 |
default: statusMsg = `Progression: ${status}`; iconClass = 'fas fa-spinner fa-spin';
|
| 370 |
}
|
| 371 |
}
|
|
|
|
| 375 |
taskInfoHtml = `<span class="text-sm text-gray-500 ml-2">(Tâche ${taskId.substring(0,6)} | Style: ${selectedPromptText})</span>`;
|
| 376 |
}
|
| 377 |
|
| 378 |
+
statusMessageElement.innerHTML = `<i class="${iconClass} mr-2" style="${iconColorStyle}"></i> <span class="status-text">${statusMsg}</span> ${taskInfoHtml}`;
|
| 379 |
}
|
| 380 |
|
| 381 |
function escapeHtml(unsafe) {
|
|
|
|
| 387 |
const textToCopy = responseOutputDiv.textContent;
|
| 388 |
navigator.clipboard.writeText(textToCopy).then(() => {
|
| 389 |
const originalIcon = copyButton.querySelector('i').className;
|
| 390 |
+
const originalText = copyButton.childNodes[1] ? copyButton.childNodes[1].nodeValue.trim() : 'Copier le code LaTeX';
|
| 391 |
copyButton.innerHTML = `<i class="fas fa-check mr-2"></i> Code Copié !`;
|
| 392 |
copyButton.classList.remove('gradient-secondary');
|
| 393 |
+
copyButton.style.backgroundColor = 'var(--success-color)';
|
| 394 |
|
| 395 |
setTimeout(() => {
|
| 396 |
+
copyButton.innerHTML = `<i class="${originalIcon} mr-2"></i> ${originalText}`;
|
| 397 |
copyButton.classList.add('gradient-secondary');
|
| 398 |
+
copyButton.style.backgroundColor = ''; // Revert to gradient
|
| 399 |
}, 2500);
|
| 400 |
}).catch(err => {
|
| 401 |
console.error('Erreur de copie: ', err);
|