Flasksite1

Sleeping

App Files Files Community

Docfile commited on 5 days ago

Commit

725f8a8

verified ·

1 Parent(s): 7f72ec9

Update templates/philosophie.html

Browse files

Files changed (1) hide show

templates/philosophie.html +123 -98

templates/philosophie.html CHANGED Viewed

@@ -1,19 +1,16 @@
- <!DOCTYPE html>
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
     <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">
     <style>
         /* --- Styles Généraux et Interface --- */
         body {
-            font-family: 'Lato', sans-serif;
             background-color: #f4f4f9;
             margin: 0;
             padding: 20px;
@@ -68,11 +65,12 @@
         }
         @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;
@@ -82,20 +80,12 @@
             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 {
@@ -115,6 +105,7 @@
         .dissertation-paper p {
             text-align: justify;
             margin-bottom: 16px;
         }
         .dissertation-paper .prof {
@@ -136,37 +127,22 @@
             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>
@@ -199,7 +175,6 @@
                     return;
                 }
-                // Simuler la génération d'une dissertation (à remplacer par votre API)
                 simulateGeneration(question);
             });
@@ -209,7 +184,6 @@
                 loader.style.display = 'block';
                 resultContainer.innerHTML = '';
-                // Simulation d'une réponse (remplacez ceci par votre appel API réel)
                 setTimeout(() => {
                     const mockData = {
                         sujet: question,
@@ -257,94 +231,145 @@
                         <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>
                     </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) {
                 resultContainer.innerHTML = `<p class="error">${message}</p>`;
             }
         });
     </script>

+<!DOCTYPE html>
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Assistant de Philosophie</title>
+    <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: Arial, sans-serif;
             background-color: #f4f4f9;
             margin: 0;
             padding: 20px;
         }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
         .error { color: #c0392b; text-align: center; margin-top: 20px; }
+        .success { color: #27ae60; text-align: center; margin-top: 20px; }
+        /* --- Styles du Rendu "Cahier" --- */
         .dissertation-paper {
+            font-family: 'Times New Roman', serif;
+            font-size: 16px;
             color: #1a2a4c;
             background-color: #fdfaf4;
             line-height: 1.6;
             min-height: 500px;
         }
         .dissertation-paper h2 {
             font-size: 1.4em;
             text-align: center;
             margin-bottom: 24px;
             font-weight: bold;
+            text-decoration: underline;
         }
         .dissertation-paper h3 {
         .dissertation-paper p {
             text-align: justify;
             margin-bottom: 16px;
+            padding-bottom: 8px;
         }
         .dissertation-paper .prof {
             font-weight: 500;
         }
+        .pdf-button-container {
             text-align: center;
             margin-top: 40px;
         }
+        .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>
 </head>
                     return;
                 }
                 simulateGeneration(question);
             });
                 loader.style.display = 'block';
                 resultContainer.innerHTML = '';
                 setTimeout(() => {
                     const mockData = {
                         sujet: question,
                         <h2>Sujet : ${data.sujet}</h2>
                         <p class="prof">Prof : ${data.prof}</p>
                         <h3>Introduction</h3>
+                        <p class="indented">${data.introduction}</p>
                 `;
                 data.parties.forEach((partie, index) => {
                     html += `<div class="development-block">`;
+                    html += `<p class="indented">${partie.chapeau}</p>`;
                     partie.arguments.forEach(arg => {
+                        html += `<p class="indented">${arg.paragraphe_argumentatif}</p>`;
                     });
                     html += `</div>`;
                     if (partie.transition) {
+                        html += `<p class="indented transition">${partie.transition}</p>`;
                     }
                 });
                 html += `
                         <h3>Conclusion</h3>
+                        <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;
+                // Stocker les données pour le PDF
+                window.currentDissertation = data;
                 document.getElementById('download-pdf').addEventListener('click', generatePDF);
             }
             function generatePDF() {
+                const { jsPDF } = window.jspdf;
+                const doc = new jsPDF();
+                const data = window.currentDissertation;
+                let yPosition = 20;
+                const lineHeight = 7;
+                const maxWidth = 180;
+                const margin = 15;
+                // Configuration des polices et styles
+                doc.setFont("times", "normal");
+                doc.setFontSize(12);
+                // Fonction pour ajouter du texte avec retour à la ligne automatique
+                function addText(text, x, y, fontSize = 12, style = "normal") {
+                    doc.setFontSize(fontSize);
+                    doc.setFont("times", style);
+                    const splitText = doc.splitTextToSize(text, maxWidth);
+                    doc.text(splitText, x, y);
+                    return y + (splitText.length * lineHeight);
+                }
+                // Fonction pour centrer du texte
+                function addCenteredText(text, y, fontSize = 12, style = "normal") {
+                    doc.setFontSize(fontSize);
+                    doc.setFont("times", style);
+                    const textWidth = doc.getTextWidth(text);
+                    const x = (doc.internal.pageSize.width - textWidth) / 2;
+                    doc.text(text, x, y);
+                    return y + lineHeight;
+                }
+                // Titre
+                yPosition = addCenteredText(`Sujet : ${data.sujet}`, yPosition, 16, "bold");
+                yPosition += 5;
+                yPosition = addCenteredText(`Prof : ${data.prof}`, yPosition, 10, "italic");
+                yPosition += 10;
+                // Introduction
+                yPosition = addText("INTRODUCTION", margin, yPosition, 14, "bold");
+                yPosition += 5;
+                yPosition = addText(`    ${data.introduction}`, margin, yPosition);
+                yPosition += 10;
+                // Parties
+                data.parties.forEach((partie, index) => {
+                    // Vérifier si on a besoin d'une nouvelle page
+                    if (yPosition > 250) {
+                        doc.addPage();
+                        yPosition = 20;
                     }
+                    // Chapeau de partie
+                    yPosition = addText(`    ${partie.chapeau}`, margin, yPosition);
+                    yPosition += 5;
+                    // Arguments
+                    partie.arguments.forEach(arg => {
+                        if (yPosition > 250) {
+                            doc.addPage();
+                            yPosition = 20;
+                        }
+                        yPosition = addText(`    ${arg.paragraphe_argumentatif}`, margin, yPosition);
+                        yPosition += 5;
+                    });
+                    // Transition
+                    if (partie.transition) {
+                        if (yPosition > 250) {
+                            doc.addPage();
+                            yPosition = 20;
+                        }
+                        yPosition = addText(`    ${partie.transition}`, margin, yPosition, 12, "italic");
+                        yPosition += 10;
+                    }
+                });
+                // Conclusion
+                if (yPosition > 230) {
+                    doc.addPage();
+                    yPosition = 20;
+                }
+                yPosition = addText("CONCLUSION", margin, yPosition, 14, "bold");
+                yPosition += 5;
+                yPosition = addText(`    ${data.conclusion}`, margin, yPosition);
+                // Sauvegarder le PDF
+                doc.save('dissertation-philosophie.pdf');
+                showSuccess("PDF généré avec succès !");
             }
             function showError(message) {
                 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(() => {
+                    successDiv.remove();
+                }, 3000);
+            }
         });
     </script>