Spaces:

Docfile
/

Testpdf

Running

App Files Files Community

Docfile commited on 11 days ago

Commit

ae43fd8

verified ·

1 Parent(s): 10970c2

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +28 -27

templates/index.html CHANGED Viewed

@@ -44,23 +44,23 @@
         }
         .upload-highlight {
-            border-color: #1abc9c;
-            background-color: #e8f8f5;
         }
     </style>
 </head>
 <body class="bg-gray-50 text-gray-700 min-h-screen flex flex-col items-center py-6 px-4">
     <div class="bg-white rounded-xl shadow-lg w-full max-w-2xl p-6 md:p-8">
-        <h1 class="flex items-center justify-center text-3xl font-bold text-center mb-2 text-primary-color">
-            <i class="fas fa-atom text-4xl mr-3 text-secondary-color"></i>
             Solveur Expert IA
         </h1>
         <p class="text-center text-gray-500 mb-8">Solutions LaTeX précises pour Maths, Physique et Chimie.</p>
         <!-- Zone de dépôt de fichier améliorée -->
-        <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-secondary-color">
             <div class="upload-content">
-                <i class="fas fa-file-arrow-up text-5xl mb-4 text-secondary-color transition-transform duration-300 transform group-hover:scale-110 group-hover:-translate-y-1"></i>
                 <p class="text-lg font-medium mb-1">Déposez l'image de votre exercice ici</p>
                 <p class="text-sm text-gray-500">ou cliquez pour sélectionner un fichier (PNG, JPG)</p>
             </div>
@@ -72,13 +72,13 @@
         <!-- Options de formatage -->
         <div class="bg-gray-50 rounded-xl p-5 mb-6 border border-gray-200">
-            <h3 class="flex items-center font-semibold text-primary-color mb-4">
-                <i class="fas fa-cogs mr-2 text-secondary-color"></i>Options de Formatage
             </h3>
             <div class="prompt-selector">
                 <label for="prompt-type" class="block font-medium mb-2">Style de la correction LaTeX :</label>
                 <div class="relative">
-                    <select id="prompt-type" name="prompt-type" class="w-full p-3 pr-10 rounded-xl border-2 border-gray-300 appearance-none bg-white focus:outline-none focus:border-secondary-color focus:ring-2 focus:ring-secondary-color focus:ring-opacity-20 transition-all">
                         <option value="refined">Format Raffiné & Complet (mise en page avancée)</option>
                         <option value="light">Format Léger & Essentiel (LaTeX standard)</option>
                     </select>
@@ -93,29 +93,34 @@
         <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>
             <i class="fas fa-rocket mr-2"></i>Obtenir la Solution
         </button>
         <!-- Conteneur de résolution (initialement caché) -->
         <div id="solving-container" class="hidden mt-8">
             <!-- Section de statut -->
             <div class="text-center mb-5">
-                <div id="status-message-element" class="flex items-center justify-center flex-wrap text-lg font-medium text-primary-color">
                     <i class="fas fa-hourglass-start mr-2"></i>Prêt à résoudre votre exercice...
                 </div>
             </div>
             <!-- Spinner de chargement -->
-            <div id="loading-spinner-element" class="hidden w-10 h-10 mx-auto my-6 border-4 border-gray-300 border-l-secondary-color rounded-full animate-spin-custom"></div>
             <!-- Notice Telegram -->
-            <div class="flex items-center bg-blue-50 border-l-4 border-secondary-color p-4 rounded-xl my-6">
-                <i class="fab fa-telegram text-2xl text-secondary-color mr-3"></i>
                 <span>Une copie de la solution sera envoyée sur Telegram pour archivage.</span>
             </div>
             <!-- Conteneur de réponse -->
             <div id="response-container-element" class="hidden mt-6 p-6 border border-gray-300 rounded-xl bg-white">
-                <h3 class="flex items-center font-semibold text-xl text-primary-color mb-4">
-                    <i class="fas fa-file-code mr-3 text-secondary-color"></i>Correction LaTeX Détaillée :
                 </h3>
                 <div id="response-output" class="font-code bg-gray-900 text-gray-200 p-5 rounded-xl overflow-x-auto whitespace-pre-wrap word-break-word max-h-96 mb-5 border border-gray-700"></div>
                 <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">
@@ -124,14 +129,14 @@
             </div>
             <!-- Affichage des erreurs -->
-            <div id="error-display-element" class="hidden bg-red-50 border-2 border-accent-color text-accent-color p-4 rounded-xl my-5 font-medium">
                 <!-- Les erreurs seront affichées ici -->
             </div>
         </div>
     </div>
     <footer class="mt-12 mb-5 text-gray-500 text-sm">
-        Solutions générées par <a href="#" target="_blank" class="text-secondary-color font-medium hover:underline">Mariam IA</a> © 2025 - Précision garantie.
     </footer>
     <script>
@@ -163,17 +168,13 @@
             ['dragenter', 'dragover'].forEach(eventName => {
                 uploadSection.addEventListener(eventName, () => {
-                    uploadSection.classList.add('upload-highlight');
-                    uploadSection.classList.add('border-secondary-color');
-                    uploadSection.classList.add('bg-green-50');
                 }, false);
             });
             ['dragleave', 'drop'].forEach(eventName => {
                 uploadSection.addEventListener(eventName, () => {
                     uploadSection.classList.remove('upload-highlight');
-                    uploadSection.classList.remove('border-secondary-color');
-                    uploadSection.classList.remove('bg-green-50');
                 }, false);
             });
@@ -336,7 +337,7 @@
                 const selectedPromptText = promptTypeSelect.options[promptTypeSelect.selectedIndex].text.split('(')[0].trim();
                 let statusMsg = overrideMessage || '';
                 let iconClass = 'fas fa-hourglass-start';
-                let iconColor = 'var(--primary-color)';
                 if (!overrideMessage) {
                     switch(status) {
@@ -344,10 +345,10 @@
                         case 'processing': statusMsg = "L'IA déchiffre votre exercice..."; iconClass = 'fas fa-brain'; iconColor = 'var(--secondary-color)'; break;
                         case 'generating_latex': statusMsg = "Construction de la solution LaTeX..."; iconClass = 'fas fa-scroll'; break;
                         case 'cleaning_latex': statusMsg = "Peaufinage du code LaTeX..."; iconClass = 'fas fa-magic'; break;
-                        case 'generating_pdf': statusMsg = "Compilation du document PDF final..."; iconClass = 'fas fa-file-pdf'; iconColor = '#e74c3c'; break;
                         case 'completed': statusMsg = "Solution Complète et Précise Générée !"; iconClass = 'fas fa-check-double'; iconColor = 'var(--success-color)'; break;
                         case 'completed_tex_only': statusMsg = "Solution LaTeX Précise Générée ! (PDF non requis/dispo)"; iconClass = 'fas fa-check-circle'; iconColor = 'var(--success-color)'; break;
-                        case 'pdf_error': statusMsg = "Solution LaTeX Précise Générée ! (Erreur PDF)"; iconClass = 'fas fa-file-excel'; iconColor = '#f39c12'; break;
                         case 'error': statusMsg = "Une anomalie technique est survenue."; iconClass = 'fas fa-times-circle'; iconColor = 'var(--accent-color)'; break;
                         case 'error_user': statusMsg = "Veuillez vérifier votre image."; iconClass = 'fas fa-exclamation-triangle'; iconColor = 'var(--accent-color)'; break;
                         default: statusMsg = `Progression: ${status}`; iconClass = 'fas fa-spinner fa-spin';
@@ -364,7 +365,7 @@
             function escapeHtml(unsafe) {
                 if (typeof unsafe !== 'string') return '';
-                return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
             }
             copyButton.addEventListener('click', () => {
@@ -374,7 +375,7 @@
                     const originalText = copyButton.childNodes[1] ? copyButton.childNodes[1].nodeValue : ' Copier le code LaTeX';
                     copyButton.innerHTML = `<i class="fas fa-check mr-2"></i> Code Copié !`;
                     copyButton.classList.remove('gradient-secondary');
-                    copyButton.style.backgroundColor = 'var(--success-color)';
                     setTimeout(() => {
                         copyButton.innerHTML = `<i class="${originalIcon} mr-2"></i>${originalText}`;

         }
         .upload-highlight {
+            border-color: var(--secondary-color); /* Use variable directly */
+            background-color: #e8f8f5; /* Or a light version of secondary: var(--secondary-color) with opacity */
         }
     </style>
 </head>
 <body class="bg-gray-50 text-gray-700 min-h-screen flex flex-col items-center py-6 px-4">
     <div class="bg-white rounded-xl shadow-lg w-full max-w-2xl p-6 md:p-8">
+        <h1 class="flex items-center justify-center text-3xl font-bold text-center mb-2 text-[var(--primary-color)]">
+            <i class="fas fa-atom text-4xl mr-3 text-[var(--secondary-color)]"></i>
             Solveur Expert IA
         </h1>
         <p class="text-center text-gray-500 mb-8">Solutions LaTeX précises pour Maths, Physique et Chimie.</p>
         <!-- Zone de dépôt de fichier améliorée -->
+        <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)]">
             <div class="upload-content">
+                <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>
                 <p class="text-lg font-medium mb-1">Déposez l'image de votre exercice ici</p>
                 <p class="text-sm text-gray-500">ou cliquez pour sélectionner un fichier (PNG, JPG)</p>
             </div>
         <!-- Options de formatage -->
         <div class="bg-gray-50 rounded-xl p-5 mb-6 border border-gray-200">
+            <h3 class="flex items-center font-semibold text-[var(--primary-color)] mb-4">
+                <i class="fas fa-cogs mr-2 text-[var(--secondary-color)]"></i>Options de Formatage
             </h3>
             <div class="prompt-selector">
                 <label for="prompt-type" class="block font-medium mb-2">Style de la correction LaTeX :</label>
                 <div class="relative">
+                    <select id="prompt-type" name="prompt-type" class="w-full p-3 pr-10 rounded-xl border-2 border-gray-300 appearance-none bg-white focus:outline-none focus:border-[var(--secondary-color)] focus:ring-2 focus:ring-[var(--secondary-color)]/20 transition-all">
                         <option value="refined">Format Raffiné & Complet (mise en page avancée)</option>
                         <option value="light">Format Léger & Essentiel (LaTeX standard)</option>
                     </select>
         <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>
             <i class="fas fa-rocket mr-2"></i>Obtenir la Solution
         </button>
+        <!-- Bouton rejoindre Telegram -->
+        <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">
+            <i class="fab fa-telegram-plane mr-2"></i>Rejoindre le groupe Telegram
+        </a>
         <!-- Conteneur de résolution (initialement caché) -->
         <div id="solving-container" class="hidden mt-8">
             <!-- Section de statut -->
             <div class="text-center mb-5">
+                <div id="status-message-element" class="flex items-center justify-center flex-wrap text-lg font-medium text-[var(--primary-color)]">
                     <i class="fas fa-hourglass-start mr-2"></i>Prêt à résoudre votre exercice...
                 </div>
             </div>
             <!-- Spinner de chargement -->
+            <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>
             <!-- Notice Telegram -->
+            <div class="flex items-center bg-blue-50 border-l-4 border-[var(--secondary-color)] p-4 rounded-xl my-6">
+                <i class="fab fa-telegram text-2xl text-[var(--secondary-color)] mr-3"></i>
                 <span>Une copie de la solution sera envoyée sur Telegram pour archivage.</span>
             </div>
             <!-- Conteneur de réponse -->
             <div id="response-container-element" class="hidden mt-6 p-6 border border-gray-300 rounded-xl bg-white">
+                <h3 class="flex items-center font-semibold text-xl text-[var(--primary-color)] mb-4">
+                    <i class="fas fa-file-code mr-3 text-[var(--secondary-color)]"></i>Correction LaTeX Détaillée :
                 </h3>
                 <div id="response-output" class="font-code bg-gray-900 text-gray-200 p-5 rounded-xl overflow-x-auto whitespace-pre-wrap word-break-word max-h-96 mb-5 border border-gray-700"></div>
                 <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">
             </div>
             <!-- Affichage des erreurs -->
+            <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">
                 <!-- Les erreurs seront affichées ici -->
             </div>
         </div>
     </div>
     <footer class="mt-12 mb-5 text-gray-500 text-sm">
+        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.
     </footer>
     <script>
             ['dragenter', 'dragover'].forEach(eventName => {
                 uploadSection.addEventListener(eventName, () => {
+                    uploadSection.classList.add('upload-highlight'); // This class is defined in <style>
                 }, false);
             });
             ['dragleave', 'drop'].forEach(eventName => {
                 uploadSection.addEventListener(eventName, () => {
                     uploadSection.classList.remove('upload-highlight');
                 }, false);
             });
                 const selectedPromptText = promptTypeSelect.options[promptTypeSelect.selectedIndex].text.split('(')[0].trim();
                 let statusMsg = overrideMessage || '';
                 let iconClass = 'fas fa-hourglass-start';
+                let iconColor = 'var(--primary-color)'; // Uses CSS variable
                 if (!overrideMessage) {
                     switch(status) {
                         case 'processing': statusMsg = "L'IA déchiffre votre exercice..."; iconClass = 'fas fa-brain'; iconColor = 'var(--secondary-color)'; break;
                         case 'generating_latex': statusMsg = "Construction de la solution LaTeX..."; iconClass = 'fas fa-scroll'; break;
                         case 'cleaning_latex': statusMsg = "Peaufinage du code LaTeX..."; iconClass = 'fas fa-magic'; break;
+                        case 'generating_pdf': statusMsg = "Compilation du document PDF final..."; iconClass = 'fas fa-file-pdf'; iconColor = 'var(--accent-color)'; break; // Changed from #e74c3c
                         case 'completed': statusMsg = "Solution Complète et Précise Générée !"; iconClass = 'fas fa-check-double'; iconColor = 'var(--success-color)'; break;
                         case 'completed_tex_only': statusMsg = "Solution LaTeX Précise Générée ! (PDF non requis/dispo)"; iconClass = 'fas fa-check-circle'; iconColor = 'var(--success-color)'; break;
+                        case 'pdf_error': statusMsg = "Solution LaTeX Précise Générée ! (Erreur PDF)"; iconClass = 'fas fa-file-excel'; iconColor = '#f39c12'; break; // Kept specific orange
                         case 'error': statusMsg = "Une anomalie technique est survenue."; iconClass = 'fas fa-times-circle'; iconColor = 'var(--accent-color)'; break;
                         case 'error_user': statusMsg = "Veuillez vérifier votre image."; iconClass = 'fas fa-exclamation-triangle'; iconColor = 'var(--accent-color)'; break;
                         default: statusMsg = `Progression: ${status}`; iconClass = 'fas fa-spinner fa-spin';
             function escapeHtml(unsafe) {
                 if (typeof unsafe !== 'string') return '';
+                return unsafe.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
             }
             copyButton.addEventListener('click', () => {
                     const originalText = copyButton.childNodes[1] ? copyButton.childNodes[1].nodeValue : ' Copier le code LaTeX';
                     copyButton.innerHTML = `<i class="fas fa-check mr-2"></i> Code Copié !`;
                     copyButton.classList.remove('gradient-secondary');
+                    copyButton.style.backgroundColor = 'var(--success-color)'; // Uses CSS variable
                     setTimeout(() => {
                         copyButton.innerHTML = `<i class="${originalIcon} mr-2"></i>${originalText}`;