Update templates/philosophie.html

templates/philosophie.html

@@ -27,103 +27,254 @@
             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;
+            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;
+        }
         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; }
 
-        /* --- Style "Cahier" pour l'affichage à l'écran --- */
+        /* --- Styles du Rendu "Cahier" --- */
         .dissertation-paper {
             font-family: 'Kalam', cursive;
-            font-size: 20px;
+            font-size: 18px;
             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;
-            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);
+            line-height: 1.6;
+            background-image: linear-gradient(transparent 94%, #d8e2ee 95%, transparent 96%);
+            background-size: 100% 25px;
+            border-left: 3px solid #ffaaab;
+            padding: 30px 30px 30px 60px;
+            margin: 40px 0;
+            min-height: 500px;
+            position: relative;
         }
         
-        /* -- 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 */
+        /* Marges pour les trous de classeur */
+        .dissertation-paper::before {
+            content: '';
+            position: absolute;
+            left: 20px;
+            top: 50px;
+            width: 15px;
+            height: 15px;
+            border-radius: 50%;
+            background-color: #f4f4f9;
+            border: 2px solid #ddd;
+            box-shadow: 0 100px 0 #f4f4f9, 0 100px 0 2px #ddd, 0 200px 0 #f4f4f9, 0 200px 0 2px #ddd;
+        }
+        
+        .dissertation-paper h2 { 
+            font-size: 1.4em; 
+            text-align: center; 
+            margin-bottom: 30px; 
+            color: #1a2a4c;
+            text-decoration: underline;
+        }
+        
+        .dissertation-paper h3 { 
+            font-size: 1.1em; 
+            margin: 40px 0 20px 0; 
+            text-transform: uppercase; 
+            text-decoration: underline; 
+            color: #1a2a4c;
+        }
+        
+        .dissertation-paper .development-block { 
+            margin: 30px 0; 
+        }
+        
+        .dissertation-paper p { 
+            text-align: justify; 
+            margin: 15px 0; 
+            color: #1a2a4c;
+        }
+        
+        .dissertation-paper .prof { 
+            text-align: center; 
+            font-style: italic; 
+            margin-bottom: 30px; 
+        }
+        
+        .dissertation-paper .indented { 
+            text-indent: 2em; 
+        }
+        
+        .dissertation-paper .transition { 
+            margin: 25px 0; 
+            font-style: italic; 
+            color: #4a6a9c; 
         }
         
-        /* --- 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; }
+        .dissertation-paper .pdf-button-container { 
+            text-align: center; 
+            margin-top: 40px; 
+        }
+        
+        .dissertation-paper .pdf-button { 
+            font-family: 'Lato', sans-serif; 
+            font-size: 16px; 
+            padding: 10px 20px; 
+            width: auto; 
+            display: inline-block;
+        }
+
+        /* Styles pour une meilleure compatibilité PDF */
+        @media print {
+            .dissertation-paper {
+                margin: 0;
+                box-shadow: none;
+                border: none;
+            }
+        }
     </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..."></textarea>
+            <textarea id="question" name="question" placeholder="Entrez votre sujet de dissertation ici... Par exemple : 'Sommes-nous toujours conscients ?'"></textarea>
             <button type="submit" id="submit-btn">Générer la dissertation</button>
         </form>
+
+        <!-- Section de test pour démonstration -->
+        <div style="margin-top: 30px; padding: 20px; background-color: #e8f4f8; border-radius: 5px;">
+            <h3>Test de génération PDF</h3>
+            <p>Cliquez sur le bouton ci-dessous pour tester la génération PDF avec un contenu d'exemple :</p>
+            <button id="test-demo" style="background-color: #27ae60; margin-top: 10px;">Générer exemple de dissertation</button>
+        </div>
+
         <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');
+            const testDemoBtn = document.getElementById('test-demo');
             const loader = document.getElementById('loader');
             const resultContainer = document.getElementById('result-container');
 
+            // Gestionnaire pour le bouton de test
+            testDemoBtn.addEventListener('click', () => {
+                const sampleData = {
+                    sujet: "Sommes-nous toujours conscients ?",
+                    prof: "M. Rousseau",
+                    introduction: "La conscience semble être ce qui nous définit en tant qu'êtres humains. Pourtant, nous passons une grande partie de notre existence dans des états où notre conscience paraît altérée ou diminuée : le sommeil, la distraction, l'automatisme. Cette question nous amène à interroger la nature même de la conscience et ses limites.\n\nLa problématique qui se pose est la suivante : la conscience est-elle un état permanent de l'esprit humain, ou connaît-elle des interruptions et des variations ? Nous examinerons d'abord les arguments qui plaident pour une conscience permanente, puis nous analyserons les phénomènes qui semblent la remettre en question, avant de proposer une conception nuancée de la conscience.",
+                    parties: [
+                        {
+                            chapeau: "I. La thèse de la conscience permanente",
+                            arguments: [
+                                {
+                                    paragraphe_argumentatif: "Descartes, dans ses Méditations métaphysiques, établit que la pensée est l'essence même de l'âme. « Je pense, donc je suis » implique une conscience constante de soi. Selon cette perspective, même dans le sommeil ou la distraction, une forme de conscience subsiste toujours, car penser c'est être conscient."
+                                },
+                                {
+                                    paragraphe_argumentatif: "Cette permanence de la conscience peut également être comprise comme une continuité de l'identité personnelle. John Locke montre que c'est la conscience de nos expériences passées qui assure notre identité à travers le temps. Sans cette continuité, nous ne serions plus la même personne."
+                                }
+                            ],
+                            transition: "Cependant, cette vision de la conscience permanente se heurte à des objections importantes issues de l'observation de nos états mentaux quotidiens."
+                        },
+                        {
+                            chapeau: "II. Les limites et interruptions de la conscience",
+                            arguments: [
+                                {
+                                    paragraphe_argumentatif: "Le sommeil profond constitue un défi majeur pour la thèse de la conscience permanente. Pendant certaines phases du sommeil, nous n'avons aucune expérience consciente, aucun souvenir. Comment alors maintenir que nous sommes toujours conscients ?"
+                                },
+                                {
+                                    paragraphe_argumentatif: "Henri Bergson met en évidence les phénomènes d'automatisme dans la vie quotidienne. Nous accomplissons de nombreuses actions sans y prêter attention consciente : marcher, conduire sur un trajet familier, ou répéter des gestes habituels. Ces comportements révèlent des zones d'inconscience dans notre existence éveillée."
+                                }
+                            ],
+                            transition: "Ces observations nous invitent à repenser la nature même de la conscience et à adopter une approche plus nuancée."
+                        },
+                        {
+                            chapeau: "III. Pour une conception graduée de la conscience",
+                            arguments: [
+                                {
+                                    paragraphe_argumentatif: "Plutôt que de concevoir la conscience comme un état binaire (présent ou absent), il convient de la comprendre comme un phénomène à degrés. William James propose l'idée d'un « courant de conscience » qui varie en intensité et en clarté selon les moments et les situations."
+                                },
+                                {
+                                    paragraphe_argumentatif: "Cette conception permet de réconcilier les observations contradictoires : nous sommes toujours conscients dans le sens où il y a toujours une forme de présence à soi ou au monde, mais cette conscience varie en intensité, en clarté et en contenu. Même dans le sommeil, une conscience minimale subsiste qui nous permet de nous réveiller."
+                                }
+                            ]
+                        }
+                    ],
+                    conclusion: "La question de la permanence de la conscience ne peut recevoir de réponse tranchée. Si nous ne sommes pas toujours pleinement conscients au sens d'une vigilance maximale et d'une réflexivité complète, il semble néanmoins qu'une forme de conscience, même minimale, nous accompagne en permanence.\n\nCette réflexion nous enseigne que la conscience humaine est plus complexe et plus nuancée qu'il n'y paraît. Elle nous invite à être attentifs aux différents degrés de notre présence au monde et à nous-mêmes, et à cultiver une conscience plus éveillée de notre propre conscience."
+                };
+                
+                renderDissertation(sampleData);
+            });
+
             form.addEventListener('submit', async (event) => {
                 event.preventDefault();
                 const question = document.getElementById('question').value.trim();
-                if (!question) { showError("Veuillez entrer un sujet de dissertation."); return; }
+
+                if (!question) {
+                    showError("Veuillez entrer un sujet de dissertation.");
+                    return;
+                }
+
+                // UI management
                 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';
@@ -131,65 +282,102 @@
             });
 
             function renderDissertation(data) {
-                // Le code de rendu HTML reste identique
                 let html = `
                     <div id="dissertation-content" class="dissertation-paper">
                         <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.replace(/\n/g, '</p><p class="indented">')}</p>
                 `;
+
                 data.parties.forEach((partie, index) => {
                     html += `<div class="development-block">`;
-                    html += `<p class="indented">${partie.chapeau.replace(/\n/g, '<br>')}</p>`;
+                    html += `<h3>${partie.chapeau}</h3>`;
                     partie.arguments.forEach(arg => {
-                        html += `<p class="indented">${arg.paragraphe_argumentatif.replace(/\n/g, '<br>')}</p>`;
+                        html += `<p class="indented">${arg.paragraphe_argumentatif.replace(/\n/g, '</p><p class="indented">')}</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, '</p><p class="indented transition">')}</p>`;
+                    }
                 });
+
                 html += `
                         <h3>Conclusion</h3>
-                        <p class="indented">${data.conclusion.replace(/\n/g, '<br>')}</p>
+                        <p class="indented">${data.conclusion.replace(/\n/g, '</p><p class="indented">')}</p>
                         <div class="pdf-button-container">
                             <button class="pdf-button" id="download-pdf">Télécharger en PDF</button>
                         </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');
+                if (!element) {
+                    showError("Erreur : contenu de la dissertation non trouvé.");
+                    return;
+                }
+
+                // Clone l'élément pour éviter de modifier l'original
+                const clone = element.cloneNode(true);
                 
-                // Sauvegarde des styles originaux
-                const originalClassName = element.className;
-                const pdfButtonContainer = element.querySelector('.pdf-button-container');
-                const originalButtonDisplay = pdfButtonContainer.style.display;
+                // Supprimer le bouton du clone
+                const pdfButton = clone.querySelector('.pdf-button-container');
+                if (pdfButton) {
+                    pdfButton.remove();
+                }
 
-                // Application des styles simplifiés pour le PDF
-                element.className = 'dissertation-paper-pdf';
-                pdfButtonContainer.style.display = 'none';
+                // Créer un conteneur temporaire
+                const tempContainer = document.createElement('div');
+                tempContainer.style.position = 'absolute';
+                tempContainer.style.left = '-9999px';
+                tempContainer.style.top = '0';
+                tempContainer.style.width = '210mm'; // Largeur A4
+                tempContainer.appendChild(clone);
+                document.body.appendChild(tempContainer);
 
                 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' }
+                    margin: [10, 10, 10, 10],
+                    filename: 'dissertation-philosophie.pdf',
+                    image: { type: 'jpeg', quality: 0.98 },
+                    html2canvas: { 
+                        scale: 2, 
+                        useCORS: true,
+                        allowTaint: true,
+                        backgroundColor: '#fdfaf4'
+                    },
+                    jsPDF: { 
+                        unit: 'mm', 
+                        format: 'a4', 
+                        orientation: 'portrait',
+                        compressPDF: true
+                    }
                 };
-                
-                // Génération du PDF
-                html2pdf().set(options).from(element).save().then(() => {
-                    // 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;
-                });
+
+                html2pdf()
+                    .set(options)
+                    .from(tempContainer)
+                    .save()
+                    .then(() => {
+                        // Nettoyer le conteneur temporaire
+                        document.body.removeChild(tempContainer);
+                        console.log('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.');
+                        // Nettoyer le conteneur temporaire même en cas d'erreur
+                        if (document.body.contains(tempContainer)) {
+                            document.body.removeChild(tempContainer);
+                        }
+                    });
             }
 
             function showError(message) {