Update templates/philosophie.html

templates/philosophie.html

@@ -27,48 +27,16 @@
             border-radius: 8px;
             box-shadow: 0 4px 10px rgba(0,0,0,0.1);
         }
-        h1 {
-            text-align: center;
-            color: #2c3e50;
-        }
-        textarea {
-            width: 100%;
-            padding: 10px;
-            border-radius: 4px;
-            border: 1px solid #ddd;
-            min-height: 80px;
-            margin-bottom: 10px;
-            font-size: 16px;
-        }
-        button {
-            display: block;
-            width: 100%;
-            padding: 15px;
-            background-color: #2980b9;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            font-size: 18px;
-            cursor: pointer;
-            transition: background-color 0.3s;
-        }
+        h1 { text-align: center; color: #2c3e50; }
+        textarea { width: 100%; padding: 10px; border-radius: 4px; border: 1px solid #ddd; min-height: 80px; margin-bottom: 10px; font-size: 16px; }
+        button { display: block; width: 100%; padding: 15px; background-color: #2980b9; color: white; border: none; border-radius: 5px; font-size: 18px; cursor: pointer; transition: background-color 0.3s; }
         button:hover { background-color: #3498db; }
         button:disabled { background-color: #95a5a6; cursor: not-allowed; }
-
-        .loader {
-            display: none;
-            border: 8px solid #f3f3f3;
-            border-top: 8px solid #3498db;
-            border-radius: 50%;
-            width: 50px;
-            height: 50px;
-            animation: spin 1s linear infinite;
-            margin: 20px auto;
-        }
+        .loader { display: none; border: 8px solid #f3f3f3; border-top: 8px solid #3498db; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 20px auto; }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
         .error { color: #c0392b; text-align: center; margin-top: 20px; }
 
-        /* --- Styles du Rendu "Cahier" --- */
+        /* --- Style "Cahier" pour l'affichage à l'écran --- */
         .dissertation-paper {
             font-family: 'Kalam', cursive;
             font-size: 20px;
@@ -79,36 +47,57 @@
             background-size: 100% 36px;
             border-left: 2px solid #ffaaab;
             padding-left: 4em;
-            margin: 40px -30px -30px -30px; /* S'étend aux bords du container */
+            margin: 40px -30px -30px -30px;
             padding-top: 30px;
             padding-bottom: 30px;
             padding-right: 30px;
+            box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
         }
-        .dissertation-paper h2 { font-size: 1.5em; text-align: center; margin-bottom: 1.8em; }
-        .dissertation-paper h3 { font-size: 1.2em; margin-top: 3.6em; margin-bottom: 1.8em; text-transform: uppercase; text-decoration: underline; }
-        .dissertation-paper .development-block { margin-top: 3.6em; }
-        .dissertation-paper p { text-align: justify; margin: 0; padding: 0; }
-        .dissertation-paper .prof { text-align: center; font-style: italic; margin-bottom: 1.8em; }
-        .dissertation-paper .indented { text-indent: 3em; }
-        .dissertation-paper .transition { margin-top: 1.8em; margin-bottom: 1.8em; font-style: italic; color: #4a6a9c; }
+        
+        /* -- NOUVEAU : Style "PDF" simple et sûr -- */
+        .dissertation-paper-pdf {
+            /* On utilise une police standard et sûre */
+            font-family: 'Times New Roman', Times, serif; 
+            font-size: 16px; /* Taille plus classique pour un PDF */
+            color: #000000; /* Noir simple */
+            background: #ffffff; /* Fond blanc simple */
+            line-height: 1.5;
+            
+            /* On garde la mise en page importante */
+            border-left: 2px solid #dd0000;
+            padding-left: 2.5em;
+            padding-top: 30px;
+            padding-bottom: 30px;
+            padding-right: 30px;
+            margin: 0;
+            box-shadow: none; /* Pas d'ombre dans le PDF */
+        }
+        
+        /* --- Styles Communs aux deux versions --- */
+        .dissertation-paper h2, .dissertation-paper-pdf h2 { font-size: 1.5em; text-align: center; margin-bottom: 1.8em; }
+        .dissertation-paper h3, .dissertation-paper-pdf h3 { font-size: 1.2em; margin-top: 3.6em; margin-bottom: 1.8em; text-transform: uppercase; text-decoration: underline; }
+        .dissertation-paper .development-block, .dissertation-paper-pdf .development-block { margin-top: 3.6em; }
+        .dissertation-paper p, .dissertation-paper-pdf p { text-align: justify; margin: 0; padding: 0; }
+        .dissertation-paper .prof, .dissertation-paper-pdf .prof { text-align: center; font-style: italic; margin-bottom: 1.8em; }
+        .dissertation-paper .indented, .dissertation-paper-pdf .indented { text-indent: 3em; }
+        .dissertation-paper .transition, .dissertation-paper-pdf .transition { margin-top: 1.8em; margin-bottom: 1.8em; font-style: italic; }
         .dissertation-paper .pdf-button-container { text-align: center; margin-top: 3.6em; }
         .dissertation-paper .pdf-button { font-family: 'Lato', sans-serif; font-size: 16px; padding: 10px 20px; width: auto; }
     </style>
 </head>
 <body>
-
     <div class="container">
         <h1>Assistant de Dissertation Philosophique</h1>
         <form id="philo-form">
-            <textarea id="question" name="question" placeholder="Entrez votre sujet de dissertation ici... Par exemple : 'Sommes-nous toujours conscients ?'"></textarea>
+            <textarea id="question" name="question" placeholder="Entrez votre sujet de dissertation ici..."></textarea>
             <button type="submit" id="submit-btn">Générer la dissertation</button>
         </form>
-
         <div id="loader" class="loader"></div>
         <div id="result-container"></div>
     </div>
 
     <script>
+        // Le code de la logique de formulaire reste identique...
         document.addEventListener('DOMContentLoaded', () => {
             const form = document.getElementById('philo-form');
             const submitBtn = document.getElementById('submit-btn');
@@ -118,37 +107,23 @@
             form.addEventListener('submit', async (event) => {
                 event.preventDefault();
                 const question = document.getElementById('question').value.trim();
-
-                if (!question) {
-                    showError("Veuillez entrer un sujet de dissertation.");
-                    return;
-                }
-
-                // UI management
+                if (!question) { showError("Veuillez entrer un sujet de dissertation."); return; }
                 submitBtn.disabled = true;
                 submitBtn.textContent = 'Génération en cours...';
                 loader.style.display = 'block';
                 resultContainer.innerHTML = '';
-
                 try {
                     const response = await fetch('/api/generate_dissertation', {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify({ question: question })
                     });
-
-                    if (!response.ok) {
-                        const errorData = await response.json();
-                        throw new Error(errorData.error || "Une erreur inconnue est survenue.");
-                    }
-
+                    if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.error || "Une erreur inconnue est survenue."); }
                     const data = await response.json();
                     renderDissertation(data);
-
                 } catch (error) {
                     showError(error.message);
                 } finally {
-                    // Reset UI
                     submitBtn.disabled = false;
                     submitBtn.textContent = 'Générer la dissertation';
                     loader.style.display = 'none';
@@ -156,6 +131,7 @@
             });
 
             function renderDissertation(data) {
+                // Le code de rendu HTML reste identique
                 let html = `
                     <div id="dissertation-content" class="dissertation-paper">
                         <h2>Sujet : ${data.sujet}</h2>
@@ -163,7 +139,6 @@
                         <h3>Introduction</h3>
                         <p class="indented">${data.introduction.replace(/\n/g, '<br>')}</p>
                 `;
-
                 data.parties.forEach((partie, index) => {
                     html += `<div class="development-block">`;
                     html += `<p class="indented">${partie.chapeau.replace(/\n/g, '<br>')}</p>`;
@@ -171,12 +146,8 @@
                         html += `<p class="indented">${arg.paragraphe_argumentatif.replace(/\n/g, '<br>')}</p>`;
                     });
                     html += `</div>`;
-
-                    if (partie.transition) {
-                        html += `<p class="indented transition">${partie.transition.replace(/\n/g, '<br>')}</p>`;
-                    }
+                    if (partie.transition) { html += `<p class="indented transition">${partie.transition.replace(/\n/g, '<br>')}</p>`; }
                 });
-
                 html += `
                         <h3>Conclusion</h3>
                         <p class="indented">${data.conclusion.replace(/\n/g, '<br>')}</p>
@@ -185,17 +156,21 @@
                         </div>
                     </div>
                 `;
-
                 resultContainer.innerHTML = html;
-
-                // Attach event listener to the newly created button
                 document.getElementById('download-pdf').addEventListener('click', generatePDF);
             }
 
+            // --- FONCTION generatePDF() CORRIGÉE ---
             function generatePDF() {
                 const element = document.getElementById('dissertation-content');
-                // Temporairement enlever le bouton du PDF pour qu'il n'apparaisse pas dans le fichier
+                
+                // Sauvegarde des styles originaux
+                const originalClassName = element.className;
                 const pdfButtonContainer = element.querySelector('.pdf-button-container');
+                const originalButtonDisplay = pdfButtonContainer.style.display;
+
+                // Application des styles simplifiés pour le PDF
+                element.className = 'dissertation-paper-pdf';
                 pdfButtonContainer.style.display = 'none';
 
                 const options = {
@@ -204,9 +179,16 @@
                     jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
                 };
                 
+                // Génération du PDF
                 html2pdf().set(options).from(element).save().then(() => {
-                    // Remettre le bouton visible après la génération
-                    pdfButtonContainer.style.display = 'block';
+                    // Restauration des styles originaux une fois le PDF généré
+                    element.className = originalClassName;
+                    pdfButtonContainer.style.display = originalButtonDisplay;
+                }).catch(err => {
+                    // En cas d'erreur, on restaure aussi les styles
+                    console.error("Erreur lors de la génération du PDF:", err);
+                    element.className = originalClassName;
+                    pdfButtonContainer.style.display = originalButtonDisplay;
                 });
             }