Update templates/index.html

templates/index.html

@@ -27,13 +27,12 @@
         }
 
         html {
-            /* Améliore la fluidité du défilement */
             scroll-behavior: smooth;
         }
 
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-            max-width: 600px; /* Largeur max plus adaptée pour du contenu centré */
+            max-width: 600px;
             margin: 0 auto;
             padding: var(--spacing-unit);
             line-height: 1.6;
@@ -47,7 +46,6 @@
         }
 
         .header h1 {
-            /* MODIFIÉ: Typographie réactive pour s'adapter à toutes les tailles d'écrans */
             font-size: clamp(1.75rem, 7vw, 2.5rem);
             color: #2c3e50;
             margin-bottom: calc(var(--spacing-unit) * 0.25);
@@ -58,12 +56,10 @@
             color: #555;
         }
 
-        /* <!-- SUPPRIMÉ: Le conteneur du bouton Telegram a été retiré --> */
-
         .container {
             background-color: var(--card-bg);
             padding: calc(var(--spacing-unit) * 1.5);
-            border-radius: 12px; /* Bords plus arrondis pour un look moderne */
+            border-radius: 12px;
             box-shadow: var(--shadow);
             margin-bottom: calc(var(--spacing-unit) * 2);
         }
@@ -81,7 +77,6 @@
             gap: var(--spacing-unit);
         }
 
-        /* MODIFIÉ: Amélioration sémantique et UX des boutons radio */
         .radio-option label {
             display: flex;
             align-items: flex-start;
@@ -103,7 +98,6 @@
         }
 
         .radio-option input[type="radio"] {
-           /* Caché car on stylise le label à la place */
            display: none;
         }
 
@@ -118,7 +112,6 @@
         .radio-label { font-weight: 500; display: block; }
         .radio-description { font-size: 0.9rem; color: #666; }
 
-
         .upload-section {
             border: 2px dashed var(--border-color);
             padding: calc(var(--spacing-unit) * 2);
@@ -150,11 +143,11 @@
         
         .button {
             width: 100%;
-            padding: 0.9rem 1rem; /* MODIFIÉ: Plus haut pour être plus facile à taper */
+            padding: 0.9rem 1rem;
             border: none;
             border-radius: 8px;
-            font-size: 1.1rem; /* Police plus grande */
-            font-weight: 600; /* Police plus affirmée */
+            font-size: 1.1rem;
+            font-weight: 600;
             cursor: pointer;
             transition: all 0.3s ease;
             margin-top: calc(var(--spacing-unit) * 0.5);
@@ -168,7 +161,7 @@
         .button:hover:not(:disabled) { transform: translateY(-2px); background-color: var(--primary-hover); }
         .button:disabled { background-color: #bdc3c7; cursor: not-allowed; box-shadow: none; }
 
-        .clear-button { background-color: #7f8c8d; } /* Couleur moins agressive pour une action secondaire */
+        .clear-button { background-color: #7f8c8d; }
         .clear-button:hover:not(:disabled) { background-color: #95a5a6; }
         
         .download-button { background-color: var(--secondary-color); }
@@ -182,7 +175,18 @@
         .status.error { color: var(--danger-color); }
         .status.completed { color: var(--secondary-color); }
         
-        /* MODIFIÉ: Le message de patience pour l'utilisateur */
+        /* NOUVEAU: Message d'upload en cours */
+        .upload-notice {
+            background-color: #fff3cd;
+            border-left: 4px solid #ffc107;
+            padding: var(--spacing-unit);
+            margin: var(--spacing-unit) 0;
+            border-radius: 8px;
+            text-align: center;
+        }
+        .upload-notice p { margin: 0; font-weight: 600; color: #856404; }
+        .upload-notice small { color: #6c5d03; }
+
         .processing-notice {
             background-color: #eaf5ff;
             border-left: 4px solid var(--primary-color);
@@ -200,7 +204,7 @@
         #history-container h2 { text-align:center; margin-bottom: var(--spacing-unit); color: #2c3e50;}
         #history-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: calc(var(--spacing-unit)*0.75);}
         .history-item { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-unit); background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; transition: box-shadow 0.2s; gap: var(--spacing-unit); }
-        .history-info { flex-grow: 1; min-width: 0; } /* Permet au nom de fichier de se couper correctement */
+        .history-info { flex-grow: 1; min-width: 0; }
         .history-filename { font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
         .history-status { font-size: 0.85rem; }
         .history-status-pending { color: #f39c12; } .history-status-completed { color: var(--secondary-color); } .history-status-error { color: var(--danger-color); }
@@ -213,24 +217,21 @@
 </head>
 <body>
     <div class="header">
-        <h1>🖼️ Science (Math, Physique, Chimie) 🧠</h1>
+        <h1>🖼️ Science (Math, Physique, Chimie) 🧪</h1>
         <p class="subtitle">Avec Mariam, votre assistante IA</p>
     </div>
 
-    <!-- SUPPRIMÉ : Le bouton pour rejoindre le groupe Telegram a été enlevé. -->
-
     <div class="container">
         <div class="style-selection">
             <h3>🎨 Choisissez le style de résolution</h3>
             <div class="radio-group">
-                <!-- MODIFIÉ: Structure sémantique et accessible des boutons radio -->
                 <div class="radio-option">
                     <input type="radio" id="style-light" name="resolution-style" value="light">
                     <label for="style-light" class="radio-content-wrapper">
                          <div class="radio-icon">📝</div>
                          <div class="radio-content">
                             <span class="radio-label">Résolution Light</span>
-                            <div class="radio-description">Simple et épuré, pour une lecture rapide.</div>
+                            <div class="radio-description">Simple et épurée, pour une lecture rapide.</div>
                         </div>
                     </label>
                 </div>
@@ -264,8 +265,13 @@
         <button id="solve-button" class="button" disabled>🔍 Résoudre</button>
 
         <div id="solving-container">
-            <!-- MODIFIÉ: Message clair pour informer l'utilisateur de l'attente -->
-            <div class="processing-notice">
+            <!-- NOUVEAU: Message d'upload en cours -->
+            <div id="upload-notice" class="upload-notice" style="display: none;">
+                <p>📤 Envoi des fichiers en cours...</p>
+                <small>Veuillez patienter pendant le téléchargement de vos fichiers vers le serveur.</small>
+            </div>
+            
+            <div id="processing-notice" class="processing-notice" style="display: none;">
                 <p>⏳ La génération a commencé...</p>
                 <small>Cela peut prendre quelques minutes. Vous pouvez fermer cette page et revenir plus tard, votre résultat apparaîtra dans l'historique ci-dessous.</small>
             </div>
@@ -286,8 +292,6 @@
     </div>
 
     <script>
-        // Le JavaScript reste identique car il est déjà bien conçu pour gérer cette logique.
-        // Les modifications sont purement dans le HTML et le CSS.
         document.addEventListener('DOMContentLoaded', function() {
             const uploadSection = document.getElementById('upload-section');
             const fileInput = document.getElementById('file-input');
@@ -303,6 +307,10 @@
             const cooldownTimer = document.getElementById('cooldown-timer');
             const historyList = document.getElementById('history-list');
             const clearHistoryButton = document.getElementById('clear-history-button');
+            
+            // NOUVEAU: Références aux nouveaux éléments
+            const uploadNotice = document.getElementById('upload-notice');
+            const processingNotice = document.getElementById('processing-notice');
 
             let selectedFiles = [];
             let cooldownEndTime = 0;
@@ -390,9 +398,6 @@
                 });
             }
 
-            // La fonction selectStyle n'est plus nécessaire grâce à l'utilisation des <label>
-            // window.selectStyle = (style) => document.getElementById(`style-${style}`).checked = true;
-
             function checkCooldownOnLoad() {
                 const savedCooldown = localStorage.getItem('mariamCooldownEndTime');
                 if (savedCooldown && parseInt(savedCooldown) > Date.now()) {
@@ -491,13 +496,15 @@
                 
                 startCooldown();
                 solveButton.disabled = true;
-                solveButton.textContent = '⏳ Traitement...';
+                solveButton.textContent = '⏳ Envoi en cours...';
                 
+                // MODIFIÉ: Affichage immédiat du conteneur avec message d'upload
                 solvingContainer.style.display = 'block';
+                uploadNotice.style.display = 'block';  // Affiche le message d'upload
+                processingNotice.style.display = 'none'; // Cache le message de traitement
                 responseContainer.style.display = 'none';
                 downloadButton.style.display = 'none';
-                statusElement.className = 'status';
-                statusElement.textContent = 'Préparation...';
+                statusElement.textContent = ''; // Pas de statut tant que l'upload n'est pas fini
                 responseDiv.innerHTML = '';
 
                 const formData = new FormData();
@@ -506,6 +513,11 @@
 
                 fetch('/solve', { method: 'POST', body: formData })
                 .then(response => {
+                    // MODIFIÉ: Masquer le message d'upload et afficher le message de traitement
+                    uploadNotice.style.display = 'none';
+                    processingNotice.style.display = 'block';
+                    statusElement.textContent = 'Préparation...'; // Maintenant on peut afficher ce message
+                    
                     if (!response.ok) return response.json().then(err => { throw new Error(err.error) });
                     return response.json();
                 })
@@ -520,7 +532,12 @@
                     statusElement.textContent = 'Traitement en arrière-plan...';
                     listenToTask(task_id);
                 })
-                .catch(error => handleError(error.message));
+                .catch(error => {
+                    // MODIFIÉ: En cas d'erreur, masquer les messages d'upload/processing
+                    uploadNotice.style.display = 'none';
+                    processingNotice.style.display = 'none';
+                    handleError(error.message);
+                });
             });
 
             function listenToTask(taskId) {
@@ -537,6 +554,7 @@
                     statusElement.textContent = `Statut: ${data.status}`;
                     
                     if (data.status === 'completed') {
+                        processingNotice.style.display = 'none';
                         statusElement.className = 'status completed';
                         statusElement.textContent = 'Traitement terminé ! 🎉';
                         responseDiv.innerHTML = `<p style="color: #2ecc71; text-align: center;">Votre PDF est prêt.</p>`;
@@ -545,6 +563,7 @@
                         responseContainer.style.display = 'block';
                         eventSource.close();
                     } else if (data.status === 'error') {
+                        processingNotice.style.display = 'none';
                         handleError(data.error || 'Une erreur inattendue est survenue.', taskId);
                         eventSource.close();
                     }