Flasksite1

Sleeping

App Files Files Community

Docfile commited on 5 days ago

Commit

7f72ec9

verified ·

1 Parent(s): 391a4e5

Update templates/philosophie.html

Browse files

Files changed (1) hide show

templates/philosophie.html +126 -164

templates/philosophie.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
@@ -69,66 +69,59 @@
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
         .error { color: #c0392b; text-align: center; margin-top: 20px; }
-        /* --- Styles du Rendu "Cahier" --- */
         .dissertation-paper {
             font-family: 'Kalam', cursive;
             font-size: 18px;
             color: #1a2a4c;
             background-color: #fdfaf4;
             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;
         }
-        /* 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 {
@@ -136,31 +129,44 @@
         }
         .dissertation-paper .transition {
-            margin: 25px 0;
             font-style: italic;
-            color: #4a6a9c;
         }
         .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>
@@ -173,13 +179,6 @@
             <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>
@@ -188,59 +187,9 @@
         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();
@@ -250,36 +199,57 @@
                     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.");
-                    }
-                    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';
-                }
-            });
             function renderDissertation(data) {
                 let html = `
@@ -287,25 +257,25 @@
                         <h2>Sujet : ${data.sujet}</h2>
                         <p class="prof">Prof : ${data.prof}</p>
                         <h3>Introduction</h3>
-                        <p class="indented">${data.introduction.replace(/\n/g, '</p><p class="indented">')}</p>
                 `;
                 data.parties.forEach((partie, index) => {
                     html += `<div class="development-block">`;
-                    html += `<h3>${partie.chapeau}</h3>`;
                     partie.arguments.forEach(arg => {
-                        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, '</p><p class="indented transition">')}</p>`;
                     }
                 });
                 html += `
                         <h3>Conclusion</h3>
-                        <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>
@@ -314,70 +284,62 @@
                 resultContainer.innerHTML = html;
-                // Attach event listener to the newly created button
                 document.getElementById('download-pdf').addEventListener('click', generatePDF);
             }
             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);
-                // Supprimer le bouton du clone
-                const pdfButton = clone.querySelector('.pdf-button-container');
-                if (pdfButton) {
-                    pdfButton.remove();
-                }
-                // 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: [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
                     }
                 };
-                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) {

+ <!DOCTYPE html>
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
         .error { color: #c0392b; text-align: center; margin-top: 20px; }
+        /* --- Styles du Rendu "Cahier" (optimisés pour PDF) --- */
         .dissertation-paper {
             font-family: 'Kalam', cursive;
             font-size: 18px;
             color: #1a2a4c;
             background-color: #fdfaf4;
             line-height: 1.6;
             border-left: 3px solid #ffaaab;
+            padding: 30px;
+            margin: 40px -30px -30px -30px;
             min-height: 500px;
         }
+        /* Lignes simulées avec des bordures au lieu de background-image */
+        .dissertation-paper p,
+        .dissertation-paper h2,
+        .dissertation-paper h3 {
+            border-bottom: 1px solid rgba(216, 226, 238, 0.3);
+            padding-bottom: 8px;
+            margin-bottom: 16px;
         }
         .dissertation-paper h2 {
             font-size: 1.4em;
             text-align: center;
+            margin-bottom: 24px;
+            font-weight: bold;
         }
         .dissertation-paper h3 {
+            font-size: 1.2em;
+            margin-top: 32px;
+            margin-bottom: 20px;
             text-transform: uppercase;
+            text-decoration: underline;
+            font-weight: bold;
         }
         .dissertation-paper .development-block {
+            margin-top: 24px;
+            margin-bottom: 24px;
         }
         .dissertation-paper p {
             text-align: justify;
+            margin-bottom: 16px;
         }
         .dissertation-paper .prof {
             text-align: center;
             font-style: italic;
+            margin-bottom: 24px;
+            font-size: 0.9em;
         }
         .dissertation-paper .indented {
         }
         .dissertation-paper .transition {
+            margin-top: 20px;
+            margin-bottom: 20px;
             font-style: italic;
+            color: #4a6a9c;
+            font-weight: 500;
         }
         .dissertation-paper .pdf-button-container {
             text-align: center;
+            margin-top: 40px;
+            border: none;
+            padding: 0;
         }
         .dissertation-paper .pdf-button {
             font-family: 'Lato', sans-serif;
             font-size: 16px;
+            padding: 12px 24px;
+            width: auto;
             display: inline-block;
         }
+        /* Styles spécifiques pour l'impression PDF */
         @media print {
+            .pdf-button-container {
+                display: none !important;
+            }
             .dissertation-paper {
                 margin: 0;
+                padding: 20px;
                 box-shadow: none;
                 border: none;
             }
+            body {
+                background: white;
+            }
         }
     </style>
 </head>
             <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>
         document.addEventListener('DOMContentLoaded', () => {
             const form = document.getElementById('philo-form');
             const submitBtn = document.getElementById('submit-btn');
             const loader = document.getElementById('loader');
             const resultContainer = document.getElementById('result-container');
             form.addEventListener('submit', async (event) => {
                 event.preventDefault();
                 const question = document.getElementById('question').value.trim();
                     return;
                 }
+                // Simuler la génération d'une dissertation (à remplacer par votre API)
+                simulateGeneration(question);
+            });
+            function simulateGeneration(question) {
                 submitBtn.disabled = true;
                 submitBtn.textContent = 'Génération en cours...';
                 loader.style.display = 'block';
                 resultContainer.innerHTML = '';
+                // Simulation d'une réponse (remplacez ceci par votre appel API réel)
+                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 = `
                         <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>
                 `;
                 data.parties.forEach((partie, index) => {
                     html += `<div class="development-block">`;
+                    html += `<p class="indented">${partie.chapeau.replace(/\n/g, '<br>')}</p>`;
                     partie.arguments.forEach(arg => {
+                        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>`;
                     }
                 });
                 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>
                 resultContainer.innerHTML = html;
+                // Attacher l'événement au bouton PDF nouvellement créé
                 document.getElementById('download-pdf').addEventListener('click', generatePDF);
             }
             function generatePDF() {
                 const element = document.getElementById('dissertation-content');
+                const pdfButtonContainer = element.querySelector('.pdf-button-container');
+                // Cacher le bouton temporairement
+                pdfButtonContainer.style.display = 'none';
+                // Options améliorées pour html2pdf
                 const options = {
+                    margin: [0.5, 0.5, 0.5, 0.5],
                     filename: 'dissertation-philosophie.pdf',
+                    image: {
+                        type: 'jpeg',
+                        quality: 0.95
+                    },
                     html2canvas: {
+                        scale: 2,
                         useCORS: true,
+                        letterRendering: true,
                         allowTaint: true,
+                        logging: false,
+                        height: element.scrollHeight,
+                        width: element.scrollWidth
                     },
                     jsPDF: {
+                        unit: 'in',
                         format: 'a4',
                         orientation: 'portrait',
+                        compress: true
+                    },
+                    pagebreak: {
+                        mode: ['avoid-all', 'css', 'legacy']
                     }
                 };
+                // Attendre un peu pour que le DOM soit stable
+                setTimeout(() => {
+                    html2pdf()
+                        .set(options)
+                        .from(element)
+                        .save()
+                        .then(() => {
+                            // Remettre le bouton visible
+                            pdfButtonContainer.style.display = 'block';
+                            console.log('PDF généré avec succès');
+                        })
+                        .catch((error) => {
+                            console.error('Erreur lors de la génération du PDF:', error);
+                            pdfButtonContainer.style.display = 'block';
+                            showError('Erreur lors de la génération du PDF. Veuillez réessayer.');
+                        });
+                }, 100);
             }
             function showError(message) {