Update templates/philosophie.html

templates/philosophie.html

@@ -36,7 +36,7 @@
       margin: 0; padding: 0; color: var(--text-primary);
       line-height: 1.6; font-weight: 400;
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-      min-height: 100vh;
+      min-height: 10vh;
     }
     .container { max-width: 900px; margin: 0 auto; padding: 3rem 2rem; }
     h1 { font-size: 3.5rem; font-weight: 700; text-align: center; background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0 0 1rem 0; letter-spacing: -0.02em; }
@@ -76,6 +76,30 @@
     .dissertation-paper .transition { margin-top: 2em; margin-bottom: 2em; font-style: italic; color: #4a6a9c; }
     .dissertation-paper, .dissertation-paper * { box-sizing: border-box; }
     .avoid-page-break { page-break-inside: avoid; break-inside: avoid; }
+
+    /* NOUVEAU STYLE POUR LA PRÉVISUALISATION */
+    .image-preview-container {
+        margin-top: 1.5rem;
+        padding: 1rem;
+        border: 1px dashed var(--primary-color);
+        border-radius: 12px;
+        background-color: var(--surface);
+    }
+    .image-preview-container label {
+        font-size: 0.9rem;
+        color: var(--primary-color);
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+    }
+    .uploaded-image-preview {
+        max-width: 100%;
+        height: auto;
+        display: block;
+        border-radius: 8px;
+        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+    }
+    /* FIN NOUVEAU STYLE */
+
     @media (max-width: 768px) { .container { padding: 2rem 1rem; } h1 { font-size: 2.5rem; } .form-container { padding: 1.5rem; } .dissertation-paper { padding-left: 2em; padding-right: 1rem; font-size: 18px; } }
     @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
     .container > * { animation: fadeInUp 0.6s ease-out; }
@@ -118,6 +142,12 @@
         <div v-if="dissertationType === 'type3'" class="form-group">
           <label for="text-image">Téléchargez une image du texte à commenter</label>
           <input type="file" @change="handleFileUpload" id="text-image" accept="image/*" class="file-input">
+
+          <!-- PRÉVISUALISATION DE L'IMAGE AJOUTÉE ICI -->
+          <div v-if="uploadedImageUrl" class="image-preview-container">
+            <label>Aperçu du texte à commenter :</label>
+            <img :src="uploadedImageUrl" alt="Aperçu du texte" class="uploaded-image-preview">
+          </div>
         </div>
 
         <button type="submit" class="primary-button" :disabled="isLoading">
@@ -164,7 +194,8 @@
           dissertationType: 'type1',
           courses: [],
           selectedCourse: '',
-          uploadedFile: null, // <-- NOUVEL état pour le fichier
+          uploadedFile: null,
+          uploadedImageUrl: null, // <-- NOUVEL état pour l'URL de l'image
           isLoading: false,
           isDownloading: false,
           errorMessage: null,
@@ -172,7 +203,6 @@
         }
       },
       computed: {
-        // Propriété calculée pour afficher le bon libellé en haut
         dissertationTypeLabel() {
             const labels = {
                 'type1': 'Type 1',
@@ -182,14 +212,38 @@
             return labels[this.dissertationType] || 'Inconnu';
         }
       },
+      watch: {
+          // Surveiller le changement de type pour nettoyer la prévisualisation si on quitte le type 3
+          dissertationType(newType, oldType) {
+              if (oldType === 'type3' && newType !== 'type3') {
+                  this.cleanupImage();
+              }
+          }
+      },
       mounted() {
         this.fetchCourses();
       },
       methods: {
-        // NOUVELLE méthode pour gérer la sélection du fichier
+        // Nouvelle méthode pour nettoyer la mémoire de l'URL objet
+        cleanupImage() {
+            if (this.uploadedImageUrl) {
+                URL.revokeObjectURL(this.uploadedImageUrl);
+                this.uploadedImageUrl = null;
+            }
+            this.uploadedFile = null;
+        },
+        // MÉTHODE MISE À JOUR pour gérer la sélection du fichier et l'aperçu
         handleFileUpload(event) {
-            this.uploadedFile = event.target.files[0];
-            this.errorMessage = null; // Réinitialiser l'erreur
+            this.cleanupImage(); // Nettoie l'ancienne image/URL
+            
+            const file = event.target.files[0];
+            this.uploadedFile = file;
+            this.errorMessage = null;
+
+            if (file) {
+                // Crée une URL locale pour l'aperçu de l'image
+                this.uploadedImageUrl = URL.createObjectURL(file);
+            }
         },
         async fetchCourses() {
           try {
@@ -200,7 +254,6 @@
             this.errorMessage = error.message;
           }
         },
-        // MÉTHODE MISE À JOUR pour gérer les deux types de soumission
         async generateDissertation() {
           this.isLoading = true;
           this.errorMessage = null;
@@ -249,9 +302,14 @@
             this.errorMessage = error.message;
           } finally {
             this.isLoading = false;
+            // Optionnel : Nettoyer l'image après la soumission réussie
+            if (this.dissertationType === 'type3') {
+                // Note: Laisser la prévisualisation peut être utile si l'utilisateur veut resoumettre rapidement
+                // Si on veut nettoyer l'input file: event.target.value = null; (difficile ici car l'event n'est plus là)
+                // Pour cet exemple, nous allons laisser la prévisualisation visible jusqu'à la prochaine action.
+            }
           }
         },
-        // La méthode de génération PDF reste identique car elle travaille sur l'objet 'dissertation' final
         async generatePDF() {
           if (!this.dissertation) return;
           this.isDownloading = true;