Spaces:

Docfile
/

Mariam-espagnol

Sleeping

App Files Files Community

Docfile commited on 22 days ago

Commit

4d925a0

verified ·

1 Parent(s): 2eeed13

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +221 -229

templates/index.html CHANGED Viewed

@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="fr">
-<!-- [Head section reste identique jusqu'aux styles] -->
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -12,23 +11,10 @@
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;500;600&display=swap');
-        .fade-in {
-            animation: fadeIn 0.5s ease-in;
-        }
-        .slide-up {
-            animation: slideUp 0.5s ease-out;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-        }
-        @keyframes slideUp {
-            from { transform: translateY(20px); opacity: 0; }
-            to { transform: translateY(0); opacity: 1; }
-        }
         .gradient-text {
             background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
@@ -36,89 +22,31 @@
             background-clip: text;
             color: transparent;
         }
         .upload-zone {
             background: linear-gradient(145deg, #ffffff, #f3f4f6);
-            box-shadow: 20px 20px 60px #d1d1d1,
-                       -20px -20px 60px #ffffff;
-        }
-        .upload-zone:hover {
-            transform: scale(1.01);
             transition: all 0.3s ease;
         }
-        .waves {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            overflow: hidden;
-            line-height: 0;
-            transform: rotate(180deg);
-        }
-        .waves svg {
-            position: relative;
-            display: block;
-            width: calc(100% + 1.3px);
-            height: 150px;
-        }
-        .prose {
-            max-width: none;
-            color: #374151;
         }
-        .prose h1, .prose h2, .prose h3 {
-            color: #1F2937;
-            font-family: 'Playfair Display', serif;
-            margin-top: 2em;
-            margin-bottom: 1em;
-        }
-        .prose p {
-            margin-bottom: 1.5em;
-            line-height: 1.8;
-        }
-    /* [Styles précédents restent identiques] */
-    .button-submit {
-        background: linear-gradient(45deg, #4F46E5, #818CF8);
-        transition: all 0.3s ease;
-    }
-    .button-submit:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 10px 20px rgba(79, 70, 229, 0.2);
-    }
-    .option-card {
-        transition: all 0.3s ease;
-    }
-    .option-card:hover {
-        transform: translateY(-5px);
-    }
-    .file-input {
-        display: none;
-    }
-</style>
 </head>
 <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen relative">
-    <!-- [Waves section reste identique] -->
- <div class="waves">
         <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
             <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="fill-indigo-50"></path>
         </svg>
     </div>
     <div class="max-w-6xl mx-auto px-4 py-12 relative z-10">
         <!-- Header -->
         <header class="text-center mb-16 fade-in">
@@ -132,48 +60,29 @@
         <!-- Main Content -->
         <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 mb-8 slide-up">
-            <!-- Document Type Selection -->
-            <div class="mb-8 grid md:grid-cols-2 gap-6">
-                <div class="option-card p-6 rounded-xl border-2 border-gray-200 hover:border-indigo-500 cursor-pointer transition-all"
-                     onclick="selectDocType('iconographic')">
-                    <input type="radio" name="docType" value="iconographic" class="sr-only" checked>
-                    <div class="flex items-center mb-4">
-                        <svg class="w-8 h-8 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
-                        </svg>
-                        <h3 class="ml-3 text-lg font-semibold">Document Iconographique</h3>
-                    </div>
-                    <p class="text-gray-600 text-sm">Images, photos, illustrations, publicités, etc.</p>
-                </div>
-                <div class="option-card p-6 rounded-xl border-2 border-gray-200 hover:border-indigo-500 cursor-pointer transition-all"
-                     onclick="selectDocType('textual')">
-                    <input type="radio" name="docType" value="textual" class="sr-only">
-                    <div class="flex items-center mb-4">
-                        <svg class="w-8 h-8 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-                        </svg>
-                        <h3 class="ml-3 text-lg font-semibold">Document Textuel</h3>
-                    </div>
-                    <p class="text-gray-600 text-sm">Textes, articles, documents écrits, etc.</p>
-                </div>
-            </div>
-            <!-- File Selection -->
             <div class="mb-8">
-                <button onclick="openFileSelection()" class="w-full py-4 px-6 rounded-xl bg-indigo-50 hover:bg-indigo-100 transition-colors flex items-center justify-center gap-3">
-                    <svg class="w-6 h-6 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
-                    </svg>
-                    <span class="text-indigo-700 font-medium">Sélectionner depuis la galerie</span>
-                </button>
-                <input type="file" id="file-upload" class="file-input" accept="image/*,text/*"
-                       capture="environment" multiple>
             </div>
             <!-- Upload Zone -->
-            <div class="upload-zone border-2 border-dashed border-gray-300 rounded-2xl p-8 text-center cursor-pointer transition-all duration-300 relative overflow-hidden">
                 <div class="space-y-4">
                     <div class="w-20 h-20 mx-auto rounded-full bg-indigo-50 flex items-center justify-center">
                         <svg class="w-10 h-10 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -181,28 +90,34 @@
                         </svg>
                     </div>
                     <div class="text-sm text-gray-600">
-                        <p>Déposez votre fichier ici</p>
-                        <p class="text-xs text-gray-500 mt-2">ou</p>
-                        <p class="text-indigo-600 font-medium mt-2">Cliquez pour sélectionner</p>
                     </div>
                 </div>
             </div>
             <!-- Preview -->
-            <div id="preview" class="mt-12 hidden slide-up">
                 <h3 class="text-xl font-medium text-gray-900 mb-6">Aperçu du document</h3>
                 <div class="preview-container border rounded-xl p-6 bg-gray-50">
                     <img id="image-preview" class="max-w-full h-auto hidden rounded-lg shadow-lg" alt="Aperçu">
-                    <pre id="text-preview" class="text-sm text-gray-700 whitespace-pre-wrap hidden bg-white p-4 rounded-lg shadow-inner"></pre>
                 </div>
             </div>
             <!-- Submit Button -->
-            <div class="mt-8">
-                <button id="submit-button"
-                        class="button-submit w-full py-4 px-8 rounded-xl text-white font-medium text-lg disabled:opacity-50 disabled:cursor-not-allowed hidden"
-                        onclick="submitAnalysis()">
-                    Analyser le document
                 </button>
             </div>
@@ -225,122 +140,199 @@
     </div>
     <script>
-        let selectedFile = null;
-        function selectDocType(type) {
-            document.querySelectorAll('.option-card').forEach(card => {
-                card.classList.remove('border-indigo-500');
-                card.classList.add('border-gray-200');
-            });
-            const selectedCard = document.querySelector(`[onclick="selectDocType('${type}')"]`);
-            selectedCard.classList.remove('border-gray-200');
-            selectedCard.classList.add('border-indigo-500');
-            const radio = selectedCard.querySelector('input[type="radio"]');
-            radio.checked = true;
-        }
-        function openFileSelection() {
-            document.getElementById('file-upload').click();
-        }
-        function handleFile(file) {
-            selectedFile = file;
-            const submitButton = document.getElementById('submit-button');
-            submitButton.classList.remove('hidden');
-            // Preview logic
             const preview = document.getElementById('preview');
             const imagePreview = document.getElementById('image-preview');
             const textPreview = document.getElementById('text-preview');
-            preview.classList.remove('hidden');
-            preview.classList.add('fade-in');
-            const docType = document.querySelector('input[name="docType"]:checked').value;
-            if (docType === 'iconographic' && file.type.startsWith('image/')) {
-                imagePreview.classList.remove('hidden');
-                textPreview.classList.add('hidden');
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    imagePreview.src = e.target.result;
-                    imagePreview.classList.add('fade-in');
-                };
-                reader.readAsDataURL(file);
-            } else {
-                imagePreview.classList.add('hidden');
-                textPreview.classList.remove('hidden');
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    textPreview.textContent = e.target.result;
-                    textPreview.classList.add('fade-in');
-                };
-                reader.readAsText(file);
-            }
-        }
-        function submitAnalysis() {
-            if (!selectedFile) return;
-            const formData = new FormData();
-            formData.append('file', selectedFile);
-            formData.append('docType', document.querySelector('input[name="docType"]:checked').value);
-            const loading = document.getElementById('loading');
             const results = document.getElementById('results');
             const analysisContent = document.getElementById('analysis-content');
-            loading.classList.remove('hidden');
-            loading.classList.add('fade-in');
-            fetch('/upload', {
-                method: 'POST',
-                body: formData
-            })
-            .then(response => response.json())
-            .then(data => {
-                loading.classList.add('hidden');
-                results.classList.remove('hidden');
-                results.classList.add('slide-up');
-                analysisContent.innerHTML = marked.parse(data.analysis);
-                Prism.highlightAll();
-            })
-            .catch(error => {
-                loading.classList.add('hidden');
-                alert('Une erreur est survenue lors de l\'analyse. Veuillez réessayer.');
-                console.error('Error:', error);
             });
-        }
-        // Event Listeners
-        document.addEventListener('DOMContentLoaded', function() {
-            const uploadZone = document.querySelector('.upload-zone');
-            const fileInput = document.getElementById('file-upload');
-            uploadZone.addEventListener('click', () => fileInput.click());
             uploadZone.addEventListener('dragover', (e) => {
                 e.preventDefault();
                 uploadZone.classList.add('border-indigo-500', 'bg-indigo-50');
             });
             uploadZone.addEventListener('dragleave', () => {
                 uploadZone.classList.remove('border-indigo-500', 'bg-indigo-50');
             });
             uploadZone.addEventListener('drop', (e) => {
                 e.preventDefault();
                 uploadZone.classList.remove('border-indigo-500', 'bg-indigo-50');
                 const files = e.dataTransfer.files;
-                if (files.length) handleFile(files[0]);
             });
             fileInput.addEventListener('change', (e) => {
-                if (e.target.files.length) handleFile(e.target.files[0]);
             });
-        });
     </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;500;600&display=swap');
+        .fade-in { animation: fadeIn 0.5s ease-in; }
+        .slide-up { animation: slideUp 0.5s ease-out; }
+        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+        @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
         .gradient-text {
             background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
             background-clip: text;
             color: transparent;
         }
         .upload-zone {
             background: linear-gradient(145deg, #ffffff, #f3f4f6);
+            box-shadow: 20px 20px 60px #d1d1d1, -20px -20px 60px #ffffff;
             transition: all 0.3s ease;
         }
+        .upload-zone:hover { transform: scale(1.01); }
+        .waves { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); }
+        .waves svg { position: relative; display: block; width: calc(100% + 1.3px); height: 150px; }
+        .prose { max-width: none; color: #374151; }
+        .prose h1, .prose h2, .prose h3 { color: #1F2937; font-family: 'Playfair Display', serif; margin-top: 2em; margin-bottom: 1em; }
+        .prose p { margin-bottom: 1.5em; line-height: 1.8; }
+        /* Style pour le bouton désactivé */
+        button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
         }
+    </style>
 </head>
 <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen relative">
+    <div class="waves">
         <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
             <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="fill-indigo-50"></path>
         </svg>
     </div>
     <div class="max-w-6xl mx-auto px-4 py-12 relative z-10">
         <!-- Header -->
         <header class="text-center mb-16 fade-in">
         <!-- Main Content -->
         <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 mb-8 slide-up">
+            <!-- File Type Selection -->
             <div class="mb-8">
+                <label class="block text-lg font-medium text-gray-700 mb-4">Type de document</label>
+                <div class="flex gap-6">
+                    <label class="relative flex items-center group cursor-pointer">
+                        <input type="radio" name="fileType" value="image" checked
+                               class="peer sr-only">
+                        <div class="w-6 h-6 border-2 border-gray-300 rounded-full peer-checked:border-indigo-500 peer-checked:bg-indigo-500 transition-all"></div>
+                        <!-- Changement de label -->
+                        <span class="ml-3 text-gray-700 group-hover:text-indigo-500 transition-colors">Document iconographique</span>
+                    </label>
+                    <label class="relative flex items-center group cursor-pointer">
+                        <input type="radio" name="fileType" value="text"
+                               class="peer sr-only">
+                        <div class="w-6 h-6 border-2 border-gray-300 rounded-full peer-checked:border-indigo-500 peer-checked:bg-indigo-500 transition-all"></div>
+                        <!-- Changement de label -->
+                        <span class="ml-3 text-gray-700 group-hover:text-indigo-500 transition-colors">Document textuel</span>
+                    </label>
+                </div>
             </div>
             <!-- Upload Zone -->
+            <div id="upload-zone" class="upload-zone border-2 border-dashed border-gray-300 rounded-2xl p-8 text-center cursor-pointer transition-all duration-300 relative overflow-hidden">
                 <div class="space-y-4">
                     <div class="w-20 h-20 mx-auto rounded-full bg-indigo-50 flex items-center justify-center">
                         <svg class="w-10 h-10 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         </svg>
                     </div>
                     <div class="text-sm text-gray-600">
+                         <!-- Le clic sur ce label ouvrira la galerie grâce au "for" -->
+                        <label for="file-upload" class="relative cursor-pointer rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
+                            <span>Déposez votre fichier ici</span>
+                        </label>
+                        <p class="pl-1">ou <label for="file-upload" class="cursor-pointer text-indigo-600 hover:text-indigo-500 font-medium">cliquez pour sélectionner</label></p>
+                         <!-- Input caché qui ouvre la galerie -->
+                        <input id="file-upload" name="file" type="file" class="sr-only">
                     </div>
+                    <p class="text-xs text-gray-500">PNG, JPG, GIF, PDF, TXT jusqu'à 10MB</p>
                 </div>
             </div>
             <!-- Preview -->
+            <div id="preview" class="mt-8 hidden slide-up"> <!-- Ajustement marge -->
                 <h3 class="text-xl font-medium text-gray-900 mb-6">Aperçu du document</h3>
                 <div class="preview-container border rounded-xl p-6 bg-gray-50">
                     <img id="image-preview" class="max-w-full h-auto hidden rounded-lg shadow-lg" alt="Aperçu">
+                    <pre id="text-preview" class="text-sm text-gray-700 whitespace-pre-wrap hidden bg-white p-4 rounded-lg shadow-inner max-h-60 overflow-auto"></pre> <!-- Ajout max-height et overflow -->
+                    <p id="file-info" class="text-sm text-gray-600 mt-4"></p> <!-- Pour afficher le nom du fichier -->
                 </div>
             </div>
             <!-- Submit Button -->
+            <div class="mt-8 text-center"> <!-- Ajout marge -->
+                <button id="submit-button"
+                        disabled
+                        class="bg-indigo-600 text-white font-medium py-3 px-8 rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed">
+                    Soumettre pour analyse
                 </button>
             </div>
     </div>
     <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const uploadZone = document.getElementById('upload-zone');
+            const fileInput = document.getElementById('file-upload');
             const preview = document.getElementById('preview');
             const imagePreview = document.getElementById('image-preview');
             const textPreview = document.getElementById('text-preview');
+            const fileInfo = document.getElementById('file-info'); // Élément pour nom fichier
+            const submitButton = document.getElementById('submit-button'); // Le bouton soumettre
             const results = document.getElementById('results');
             const analysisContent = document.getElementById('analysis-content');
+            const loading = document.getElementById('loading');
+            let selectedFile = null; // Variable pour stocker le fichier sélectionné
+            // Configuration de marked pour le rendu Markdown
+            marked.setOptions({
+                breaks: true, gfm: true, headerIds: true, sanitize: false
             });
+            // --- Gestion de la sélection du fichier ---
+            // Clic sur la zone d'upload ouvre l'input file
+            uploadZone.addEventListener('click', (e) => {
+                // Empêche le clic sur le label interne de déclencher deux fois l'ouverture
+                if (e.target.tagName !== 'LABEL' && e.target.tagName !== 'INPUT') {
+                    fileInput.click();
+                }
+            });
+            // Gestion du Drag & Drop
             uploadZone.addEventListener('dragover', (e) => {
                 e.preventDefault();
                 uploadZone.classList.add('border-indigo-500', 'bg-indigo-50');
             });
             uploadZone.addEventListener('dragleave', () => {
                 uploadZone.classList.remove('border-indigo-500', 'bg-indigo-50');
             });
             uploadZone.addEventListener('drop', (e) => {
                 e.preventDefault();
                 uploadZone.classList.remove('border-indigo-500', 'bg-indigo-50');
                 const files = e.dataTransfer.files;
+                if (files.length) {
+                    handleFileSelection(files[0]); // Gérer la sélection du fichier
+                }
             });
+            // Gestion du changement dans l'input file (sélection via galerie)
             fileInput.addEventListener('change', (e) => {
+                if (e.target.files.length) {
+                    handleFileSelection(e.target.files[0]); // Gérer la sélection du fichier
+                }
             });
+            // Fonction pour gérer la SELECTION et l'APERÇU (sans soumettre)
+            function handleFileSelection(file) {
+                selectedFile = file; // Stocker le fichier
+                const fileType = document.querySelector('input[name="fileType"]:checked').value;
+                // Afficher l'aperçu
+                preview.classList.remove('hidden');
+                preview.classList.add('fade-in');
+                // Cacher les anciens résultats si présents
+                results.classList.add('hidden');
+                analysisContent.innerHTML = '';
+                // Afficher le nom du fichier
+                fileInfo.textContent = `Fichier sélectionné : ${file.name}`;
+                if (fileType === 'image') {
+                    imagePreview.classList.remove('hidden', 'fade-in'); // Reset animation
+                    textPreview.classList.add('hidden');
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        imagePreview.src = e.target.result;
+                        void imagePreview.offsetWidth; // Force reflow pour rejouer animation
+                        imagePreview.classList.add('fade-in');
+                    };
+                    reader.readAsDataURL(file);
+                } else { // text
+                    imagePreview.classList.add('hidden');
+                    textPreview.classList.remove('hidden', 'fade-in'); // Reset animation
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        textPreview.textContent = e.target.result;
+                        void textPreview.offsetWidth; // Force reflow
+                        textPreview.classList.add('fade-in');
+                    };
+                    reader.readAsText(file);
+                }
+                // Activer le bouton Soumettre
+                submitButton.disabled = false;
+            }
+            // --- Gestion de la SOUMISSION ---
+            submitButton.addEventListener('click', () => {
+                if (!selectedFile) {
+                    alert("Veuillez d'abord sélectionner un fichier.");
+                    return;
+                }
+                const fileType = document.querySelector('input[name="fileType"]:checked').value;
+                const formData = new FormData();
+                formData.append('file', selectedFile);
+                formData.append('fileType', fileType);
+                // Afficher le spinner de chargement
+                loading.classList.remove('hidden');
+                loading.classList.add('fade-in');
+                submitButton.disabled = true; // Désactiver pendant le chargement
+                // Simuler un appel API (remplacez par votre appel fetch réel)
+                console.log("Envoi du fichier:", selectedFile.name, "Type:", fileType);
+                // Décommentez et adaptez cette partie pour votre appel réel
+                /*
+                fetch('/upload', {
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`Erreur HTTP: ${response.status}`);
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    loading.classList.add('hidden');
+                    results.classList.remove('hidden');
+                    results.classList.add('slide-up');
+                    analysisContent.innerHTML = marked.parse(data.analysis || "Aucune analyse reçue.");
+                    Prism.highlightAll();
+                    // Optionnel: réinitialiser après succès
+                    // selectedFile = null;
+                    // fileInput.value = ''; // Réinitialiser l'input file
+                    // preview.classList.add('hidden');
+                    // fileInfo.textContent = '';
+                    // submitButton.disabled = true;
+                })
+                .catch(error => {
+                    loading.classList.add('hidden');
+                    submitButton.disabled = false; // Réactiver en cas d'erreur
+                    alert(`Une erreur est survenue lors de l'analyse : ${error.message}. Veuillez réessayer.`);
+                    console.error('Error:', error);
+                    // Cacher les résultats si une erreur survient
+                    results.classList.add('hidden');
+                    analysisContent.innerHTML = '';
+                });
+                */
+                // --- Simulation (à remplacer par le fetch ci-dessus) ---
+                setTimeout(() => {
+                    loading.classList.add('hidden');
+                    results.classList.remove('hidden');
+                    results.classList.add('slide-up');
+                    // Exemple de contenu Markdown simulé
+                    const simulatedMarkdown = `
+# Analyse du document : ${selectedFile.name}
+Ceci est une **simulation** de l'analyse.
+## Section 1: Résumé
+Le document de type *${fileType}* a été traité.
+## Section 2: Traduction (Exemple)
+*   **Original (Espagnol):** Hola Mundo
+*   **Traduction (Français):** Bonjour le Monde
+\`\`\`javascript
+// Exemple de bloc de code
+function greet() {
+  console.log("Simulation terminée !");
+}
+\`\`\`
+                    `;
+                    analysisContent.innerHTML = marked.parse(simulatedMarkdown);
+                    Prism.highlightAll(); // Appliquer PrismJS au contenu généré
+                    // Ne pas réinitialiser ici pour pouvoir voir le résultat de la simulation
+                    // selectedFile = null;
+                    // fileInput.value = '';
+                    // preview.classList.add('hidden');
+                    // fileInfo.textContent = '';
+                    // submitButton.disabled = true; // Garder désactivé après simulation ou le réactiver si besoin
+                     submitButton.disabled = false; // Réactiver après la simulation pour permettre une autre soumission
+                }, 2000); // Simule un délai réseau de 2 secondes
+                 // --- Fin de la Simulation ---
+            }); // Fin de l'event listener du bouton submit
+        }); // Fin du DOMContentLoaded
     </script>
 </body>
 </html>