Update templates/philosophie.html

templates/philosophie.html

@@ -13,52 +13,167 @@
   <link href="https://fonts.googleapis.com/css2?family=Kalam&family=Lato:wght@400;700&display=swap" rel="stylesheet">
 
   <style>
-    body { font-family: 'Lato', sans-serif; background-color: #f4f4f9; margin: 0; padding: 20px; color: #333; }
-    .container { max-width: 900px; margin: 0 auto; background: white; padding: 30px; 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; }
-    button:hover { background-color: #3498db; }
-    button:disabled { background-color: #95a5a6; cursor: not-allowed; }
-    .loader { display: block; border: 8px solid #f3f3f3; border-top: 8px solid #3498db; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 20px auto; }
+    :root {
+      --primary-color: #4f46e5; /* Indigo */
+      --primary-hover: #4338ca;
+      --text-color: #374151; /* Gris foncé */
+      --background-color: #f8f9fa;
+      --container-bg: #ffffff;
+      --border-color: #e5e7eb;
+    }
+
+    body {
+      font-family: 'Lato', sans-serif;
+      background-color: var(--background-color);
+      margin: 0;
+      padding: 2rem;
+      color: var(--text-color);
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    .container {
+      max-width: 960px;
+      margin: 0 auto;
+      background: var(--container-bg);
+      padding: 40px;
+      border-radius: 12px;
+      box-shadow: 0 6px 20px rgba(0,0,0,0.08);
+    }
+
+    h1 {
+      text-align: center;
+      color: #111827;
+      margin-bottom: 0.5em;
+    }
+
+    .type-indicator {
+      text-align: center;
+      color: #6b7280;
+      font-size: 1.1em;
+      margin-bottom: 2em;
+    }
+
+    textarea {
+      width: 100%;
+      padding: 15px;
+      border-radius: 8px;
+      border: 1px solid var(--border-color);
+      min-height: 100px;
+      margin-bottom: 15px;
+      font-size: 16px;
+      line-height: 1.6;
+      transition: border-color 0.3s, box-shadow 0.3s;
+    }
+
+    textarea:focus {
+      outline: none;
+      border-color: var(--primary-color);
+      box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
+    }
+
+    button {
+      display: block;
+      width: 100%;
+      padding: 16px;
+      background-color: var(--primary-color);
+      color: white;
+      border: none;
+      border-radius: 8px;
+      font-size: 18px;
+      font-weight: 700;
+      cursor: pointer;
+      transition: background-color 0.3s, transform 0.2s;
+    }
+
+    button:hover:not(:disabled) {
+      background-color: var(--primary-hover);
+      transform: translateY(-2px);
+    }
+
+    button:disabled {
+      background-color: #9ca3af;
+      cursor: not-allowed;
+    }
+
+    .loader {
+      display: block;
+      border: 8px solid #f3f3f3;
+      border-top: 8px solid var(--primary-color);
+      border-radius: 50%;
+      width: 50px;
+      height: 50px;
+      animation: spin 1s linear infinite;
+      margin: 30px 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: #ef4444;
+      background-color: #fee2e2;
+      text-align: center;
+      margin-top: 20px;
+      padding: 15px;
+      border-radius: 8px;
+      font-weight: bold;
+    }
+
+    /* Styles de la feuille de dissertation */
     .dissertation-paper {
       font-family: 'Kalam', cursive;
       font-size: 20px;
       color: #1a2a4c;
       background-color: #fdfaf4;
-      line-height: 1.8;
+      line-height: 2; /* Augmenté pour la lisibilité de Kalam */
       background-image: linear-gradient(transparent 97%, #d8e2ee 98%);
-      background-size: 100% 36px;
-      border-left: 2px solid #ffaaab;
+      background-size: 100% 40px; /* Adapté à la nouvelle line-height */
+      border-left: 3px solid #ffaaab;
       padding-left: 4em;
-      margin: 40px -30px -30px -30px;
+      margin: 40px -40px -40px -40px; /* Correspond au padding du container */
       padding-top: 30px;
-      padding-bottom: 30px;
+      padding-bottom: 40px;
       padding-right: 30px;
       -webkit-print-color-adjust: exact;
       print-color-adjust: exact;
-      -webkit-font-smoothing: antialiased;
-      background-clip: padding-box;
     }
-    .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 h2 { font-size: 1.5em; text-align: center; margin-bottom: 1.5em; }
+    .dissertation-paper h3 { font-size: 1.2em; margin-top: 3em; margin-bottom: 1.5em; text-transform: uppercase; text-decoration: underline; }
+    .dissertation-paper .development-block { margin-top: 3em; }
     .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 .prof { text-align: center; font-style: italic; margin-bottom: 2em; }
     .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; }
+    .dissertation-paper .transition { margin-top: 2em; margin-bottom: 2em; font-style: italic; color: #4a6a9c; }
     .dissertation-paper, .dissertation-paper * { box-sizing: border-box; }
+    
+    .pdf-button-container {
+      display: flex;
+      justify-content: flex-end;
+      margin-bottom: 2em;
+      padding-right: 1em; /* Petit décalage pour ne pas coller au bord */
+    }
+    
+    .pdf-button {
+      font-family: 'Lato', sans-serif;
+      font-size: 14px;
+      font-weight: 600;
+      padding: 10px 20px;
+      width: auto;
+      background-color: #e9ecef;
+      color: var(--text-color);
+      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    }
+    .pdf-button:hover:not(:disabled) {
+      background-color: #ced4da;
+      transform: translateY(-1px);
+    }
+
     .avoid-page-break { page-break-inside: avoid; break-inside: avoid; }
   </style>
 </head>
 <body>
   <div id="app" class="container">
     <h1>Assistant de Dissertation Philosophique</h1>
+    <p class="type-indicator">Type 1</p>
 
     <form @submit.prevent="generateDissertation">
       <textarea v-model="question" placeholder="Entrez votre sujet de dissertation ici..."></textarea>
@@ -71,7 +186,14 @@
     <p v-if="errorMessage" class="error">[[ errorMessage ]]</p>
 
     <div v-if="dissertation" id="dissertation-content" class="dissertation-paper">
+      
       <h2>Sujet : [[ dissertation.sujet ]]</h2>
+
+      <!-- Bouton PDF déplacé en haut -->
+      <div class="pdf-button-container" data-html2canvas-ignore="true">
+        <button class="pdf-button" @click="generatePDF">Télécharger en PDF</button>
+      </div>
+
       <p class="prof">Prof : [[ dissertation.prof ]]</p>
 
       <h3>Introduction</h3>
@@ -90,9 +212,6 @@
       <h3>Conclusion</h3>
       <p class="indented">[[ dissertation.conclusion ]]</p>
 
-      <div class="pdf-button-container" data-html2canvas-ignore="true">
-        <button class="pdf-button" @click="generatePDF">Télécharger en PDF</button>
-      </div>
     </div>
   </div>
 
@@ -128,7 +247,6 @@
               throw new Error(data.error || "Une erreur inconnue est survenue.");
             }
             this.dissertation = data;
-            await new Promise(r => setTimeout(r, 50));
           } catch (error) {
             this.errorMessage = error.message;
           } finally {
@@ -149,14 +267,14 @@
             window.scrollTo(0, 0);
 
             const options = {
-              margin: [10, 10, 10, 10], // mm (voir jsPDF.unit ci-dessous)
+              margin: [15, 15, 15, 15], // Marges augmentées pour un meilleur rendu A4
               filename: 'dissertation-philosophie.pdf',
               image: { type: 'jpeg', quality: 0.98 },
               html2canvas: {
                 scale: 2,
                 useCORS: true,
                 logging: true,
-                backgroundColor: '#ffffff'
+                backgroundColor: null, // Transparent pour garder le fond du papier
               },
               jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
             };