Update templates/philosophie.html

templates/philosophie.html

@@ -5,15 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Assistant de Philosophie</title>
     
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Kalam&family=Lato:wght@400;700&display=swap" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
 
     <style>
         /* --- Styles Généraux et Interface --- */
         body {
-            font-family: 'Lato', sans-serif;
+            font-family: Arial, sans-serif;
             background-color: #f4f4f9;
             margin: 0;
             padding: 20px;
@@ -27,46 +25,155 @@
             border-radius: 8px;
             box-shadow: 0 4px 10px rgba(0,0,0,0.1);
         }
-        h1 { text-align: center; color: #2c3e50; }
+        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; box-sizing: border-box;
+            width: 100%;
+            padding: 10px;
+            border-radius: 4px;
+            border: 1px solid #ddd;
+            min-height: 80px;
+            margin-bottom: 10px;
+            font-size: 16px;
+            box-sizing: border-box;
         }
         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;
+            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;
+            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; font-weight: bold; }
+        .error { color: #c0392b; text-align: center; margin-top: 20px; }
+        .success { color: #27ae60; text-align: center; margin-top: 20px; }
 
-        /* --- Styles du Rendu "Cahier" --- */
+        /* --- Styles du Rendu "Cahier" optimisés pour PDF --- */
         .dissertation-paper {
-            font-family: 'Kalam', cursive; font-size: 20px; color: #1a2a4c;
-            background-color: #fdfaf4; line-height: 1.8;
-            background-image: linear-gradient(transparent 97%, #d8e2ee 98%);
-            background-size: 100% 36px;
-            border-left: 2px solid #ffaaab; padding-left: 4em;
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+            color: #1a2a4c;
+            background-color: #fdfaf4;
+            line-height: 24px;
+            padding: 40px;
             margin: 40px -30px -30px -30px;
-            padding-top: 30px; padding-bottom: 30px; padding-right: 30px;
-        }
-        .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; }
-        .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; }
+            position: relative;
+            min-height: 800px;
+            
+            /* Simulation des lignes de cahier */
+            background-image: 
+                linear-gradient(to right, #ffaaab 0px, #ffaaab 3px, transparent 3px),
+                repeating-linear-gradient(
+                    transparent,
+                    transparent 23px,
+                    #d8e2ee 23px,
+                    #d8e2ee 24px
+                );
+            background-size: 100% 100%, 100% 24px;
+            background-position: 0 0, 0 40px;
+        }
+        
+        .dissertation-paper h2 { 
+            font-size: 18px; 
+            text-align: center; 
+            margin: 0 0 24px 0;
+            font-weight: bold;
+            text-decoration: underline;
+            padding-left: 40px;
+        }
+        
+        .dissertation-paper h3 { 
+            font-size: 16px; 
+            margin: 48px 0 24px 0; 
+            text-transform: uppercase; 
+            text-decoration: underline;
+            font-weight: bold;
+            padding-left: 40px;
+        }
+        
+        .dissertation-paper .development-block { 
+            margin: 24px 0;
+        }
+        
+        .dissertation-paper p { 
+            text-align: justify; 
+            margin: 0 0 24px 0;
+            padding-left: 40px;
+        }
+        
+        .dissertation-paper .prof { 
+            text-align: center; 
+            font-style: italic; 
+            margin: 0 0 24px 0;
+            font-size: 12px;
+            padding-left: 40px;
+        }
+        
+        .dissertation-paper .indented { 
+            text-indent: 2em; 
+        }
+        
+        .dissertation-paper .transition { 
+            margin: 24px 0; 
+            font-style: italic; 
+            color: #4a6a9c;
+            font-weight: 500;
+        }
+        
+        .pdf-button-container { 
+            text-align: center; 
+            margin-top: 40px;
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+        }
+        
+        .pdf-button { 
+            font-family: Arial, sans-serif; 
+            font-size: 16px; 
+            padding: 12px 24px; 
+            width: auto;
+            display: inline-block;
+            background-color: #27ae60;
+        }
+
+        .pdf-button:hover {
+            background-color: #2ecc71;
+        }
+
+        /* Style pour le PDF uniquement */
+        .pdf-only {
+            display: none;
+        }
+
+        /* Quand on génère le PDF, on cache le bouton et on montre le contenu PDF */
+        .pdf-mode .pdf-button-container {
+            display: none !important;
+        }
+
+        .pdf-mode .pdf-only {
+            display: block !important;
+        }
     </style>
 </head>
 <body>
@@ -92,36 +199,61 @@
             form.addEventListener('submit', async (event) => {
                 event.preventDefault();
                 const question = document.getElementById('question').value.trim();
+
                 if (!question) {
                     showError("Veuillez entrer un sujet de dissertation.");
                     return;
                 }
 
+                simulateGeneration(question);
+            });
+
+            function simulateGeneration(question) {
                 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.");
-                    }
-                    const data = await response.json();
-                    renderDissertation(data);
-                } catch (error) {
-                    showError(error.message);
-                } finally {
+                setTimeout(() => {
+                    const mockData = {
+                        sujet: question,
+                        prof: "M. Dupont",
+                        introduction: "L'introduction de cette dissertation explore les différentes dimensions du sujet proposé. Nous commençons par définir les termes clés et établir la problématique qui guidera notre réflexion. Cette question soulève des enjeux philosophiques fondamentaux que nous devrons examiner avec rigueur.",
+                        parties: [
+                            {
+                                chapeau: "Dans un premier temps, nous examinerons la dimension théorique de cette question.",
+                                arguments: [
+                                    {
+                                        paragraphe_argumentatif: "Premier argument : Cette perspective nous permet de comprendre les fondements conceptuels du problème. En effet, l'analyse théorique révèle des aspects souvent négligés dans l'approche commune de cette question."
+                                    },
+                                    {
+                                        paragraphe_argumentatif: "Deuxième argument : L'examen des sources philosophiques classiques nous éclaire sur les différentes interprétations possibles. Les penseurs comme Descartes, Kant ou Nietzsche ont chacun apporté des éléments de réponse qui méritent d'être confrontés."
+                                    }
+                                ],
+                                transition: "Cependant, cette approche théorique trouve ses limites, ce qui nous amène à considérer une perspective plus pratique."
+                            },
+                            {
+                                chapeau: "Dans un second temps, nous analyserons les implications pratiques et concrètes.",
+                                arguments: [
+                                    {
+                                        paragraphe_argumentatif: "L'expérience quotidienne nous confronte à des situations qui remettent en question les conclusions purement théoriques. La réalité vécue apporte une richesse d'exemples qui nuancent notre compréhension initiale."
+                                    },
+                                    {
+                                        paragraphe_argumentatif: "Les applications contemporaines de cette réflexion philosophique montrent l'actualité et la pertinence du questionnement. Dans notre société moderne, ces enjeux prennent une dimension particulière qu'il convient d'examiner."
+                                    }
+                                ]
+                            }
+                        ],
+                        conclusion: "En conclusion, cette dissertation a permis d'explorer les multiples facettes du sujet proposé. Nous avons vu que l'approche théorique, bien qu'essentielle, doit être complétée par une analyse pratique pour saisir toute la complexité de la question. Cette réflexion ouvre de nouvelles perspectives et invite à poursuivre l'investigation philosophique sur ces thèmes fondamentaux."
+                    };
+
+                    renderDissertation(mockData);
+                    
                     submitBtn.disabled = false;
                     submitBtn.textContent = 'Générer la dissertation';
                     loader.style.display = 'none';
-                }
-            });
+                }, 2000);
+            }
 
             function renderDissertation(data) {
                 let html = `
@@ -129,64 +261,116 @@
                         <h2>Sujet : ${data.sujet}</h2>
                         <p class="prof">Prof : ${data.prof}</p>
                         <h3>Introduction</h3>
-                        <p class="indented">${data.introduction.replace(/\n/g, '<br>')}</p>
+                        <p class="indented">${data.introduction}</p>
                 `;
-                data.parties.forEach((partie) => {
+
+                data.parties.forEach((partie, index) => {
                     html += `<div class="development-block">`;
-                    html += `<p class="indented">${partie.chapeau.replace(/\n/g, '<br>')}</p>`;
+                    html += `<p class="indented">${partie.chapeau}</p>`;
                     partie.arguments.forEach(arg => {
-                        html += `<p class="indented">${arg.paragraphe_argumentatif.replace(/\n/g, '<br>')}</p>`;
+                        html += `<p class="indented">${arg.paragraphe_argumentatif}</p>`;
                     });
                     html += `</div>`;
+
                     if (partie.transition) {
-                        html += `<p class="indented transition">${partie.transition.replace(/\n/g, '<br>')}</p>`;
+                        html += `<p class="indented transition">${partie.transition}</p>`;
                     }
                 });
+
                 html += `
                         <h3>Conclusion</h3>
-                        <p class="indented">${data.conclusion.replace(/\n/g, '<br>')}</p>
-                        <div class="pdf-button-container">
-                            <button class="pdf-button" id="download-pdf">Télécharger en PDF</button>
-                        </div>
+                        <p class="indented">${data.conclusion}</p>
+                    </div>
+                    <div class="pdf-button-container">
+                        <button class="pdf-button" id="download-pdf">Télécharger en PDF</button>
                     </div>
                 `;
+
                 resultContainer.innerHTML = html;
                 document.getElementById('download-pdf').addEventListener('click', generatePDF);
             }
 
-            function generatePDF() {
-                const element = document.getElementById('dissertation-content');
-                const pdfButtonContainer = element.querySelector('.pdf-button-container');
-                const pdfButton = element.querySelector('.pdf-button');
-
-                pdfButton.textContent = 'Préparation du PDF...';
-                pdfButton.disabled = true;
-
-                setTimeout(() => {
-                    pdfButtonContainer.style.display = 'none';
-                    const options = {
-                        margin: [0.5, 0.5, 0.5, 0.5], filename: 'dissertation-philosophie.pdf',
-                        image: { type: 'jpeg', quality: 0.98 },
-                        html2canvas:  { scale: 2, useCORS: true },
-                        jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
-                    };
+            async function generatePDF() {
+                const dissertationElement = document.getElementById('dissertation-content');
+                const button = document.getElementById('download-pdf');
+                
+                // Désactiver le bouton et changer le texte
+                button.disabled = true;
+                button.textContent = 'Génération en cours...';
+                
+                try {
+                    // Ajouter la classe pdf-mode pour cacher le bouton
+                    document.body.classList.add('pdf-mode');
+                    
+                    // Attendre un peu pour que les styles se stabilisent
+                    await new Promise(resolve => setTimeout(resolve, 100));
                     
-                    html2pdf().set(options).from(element).save().then(() => {
-                        pdfButtonContainer.style.display = 'block';
-                        pdfButton.textContent = 'Télécharger en PDF';
-                        pdfButton.disabled = false;
-                    }).catch((err) => {
-                        console.error("Erreur lors de la génération du PDF :", err);
-                        showError("Une erreur est survenue lors de la création du PDF.");
-                        pdfButtonContainer.style.display = 'block';
-                        pdfButton.textContent = 'Télécharger en PDF';
-                        pdfButton.disabled = false;
+                    // Générer le canvas avec html2canvas
+                    const canvas = await html2canvas(dissertationElement, {
+                        scale: 2,
+                        useCORS: true,
+                        allowTaint: true,
+                        backgroundColor: '#fdfaf4',
+                        width: dissertationElement.scrollWidth,
+                        height: dissertationElement.scrollHeight,
+                        logging: false
                     });
-                }, 100);
+                    
+                    // Créer le PDF avec jsPDF
+                    const { jsPDF } = window.jspdf;
+                    const imgData = canvas.toDataURL('image/png');
+                    
+                    // Calculer les dimensions pour le PDF
+                    const imgWidth = 210; // A4 width in mm
+                    const pageHeight = 295; // A4 height in mm
+                    const imgHeight = (canvas.height * imgWidth) / canvas.width;
+                    let heightLeft = imgHeight;
+                    
+                    const doc = new jsPDF('p', 'mm', 'a4');
+                    let position = 0;
+                    
+                    // Ajouter la première page
+                    doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
+                    heightLeft -= pageHeight;
+                    
+                    // Ajouter des pages supplémentaires si nécessaire
+                    while (heightLeft >= 0) {
+                        position = heightLeft - imgHeight;
+                        doc.addPage();
+                        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
+                        heightLeft -= pageHeight;
+                    }
+                    
+                    // Sauvegarder le PDF
+                    doc.save('dissertation-philosophie.pdf');
+                    showSuccess("PDF généré avec succès !");
+                    
+                } catch (error) {
+                    console.error('Erreur lors de la génération du PDF:', error);
+                    showError('Erreur lors de la génération du PDF. Veuillez réessayer.');
+                } finally {
+                    // Retirer la classe pdf-mode et réactiver le bouton
+                    document.body.classList.remove('pdf-mode');
+                    button.disabled = false;
+                    button.textContent = 'Télécharger en PDF';
+                }
             }
 
             function showError(message) {
-                resultContainer.innerHTML = `<p class="error">${message}</p>`;
+                resultContainer.innerHTML += `<p class="error">${message}</p>`;
+            }
+
+            function showSuccess(message) {
+                const successDiv = document.createElement('div');
+                successDiv.className = 'success';
+                successDiv.textContent = message;
+                resultContainer.appendChild(successDiv);
+                
+                setTimeout(() => {
+                    if (successDiv.parentNode) {
+                        successDiv.remove();
+                    }
+                }, 3000);
             }
         });
     </script>