Spaces:

Docfile
/

HistoireGeo

Running

App Files Files Community

Docfile commited on 27 days ago

Commit

62a8b0f

verified ·

1 Parent(s): b22bf3b

Update templates/histoire.html

Browse files

Files changed (1) hide show

templates/histoire.html +403 -405

templates/histoire.html CHANGED Viewed

@@ -1,427 +1,425 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Histoire et Géographie - Assistant Académique</title>
-    <!-- CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.css" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <!-- Scripts principaux -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js"></script>
   <style>
-        body {
-            font-family: 'Poppins', sans-serif;
-        }
-        .gradient-background {
-            background: linear-gradient(120deg, #1a365d 0%, #2563eb 100%);
-        }
-        .card-hover {
-            transition: transform 0.3s ease-in-out;
-        }
-        .card-hover:hover {
-            transform: translateY(-5px);
-        }
-        .loading-spinner {
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        .form-input {
-            transition: all 0.3s ease;
-        }
-        .form-input:focus {
-            transform: scale(1.01);
-        }
-        .image-preview {
-            max-width: 200px;
-            max-height: 200px;
-            margin: 10px;
-            border: 1px solid #ccc;
-        }
-        /* Styles améliorés pour le Markdown sur mobile */
-        .markdown-output {
-            width: 100%;
-            overflow-wrap: break-word;
-            word-wrap: break-word;
-            hyphens: auto;
-        }
-        .markdown-output p {
-            margin: 1em 0;
-            line-height: 1.6;
-            font-size: 16px;
-        }
-        .markdown-output h1,
-        .markdown-output h2,
-        .markdown-output h3,
-        .markdown-output h4 {
-            margin: 1.5em 0 0.5em;
-            line-height: 1.3;
-        }
-        .markdown-output ul,
-        .markdown-output ol {
-            padding-left: 1.5em;
-            margin: 1em 0;
-        }
-        .markdown-output li {
-            margin: 0.5em 0;
-            line-height: 1.4;
-        }
-        @media (max-width: 768px) {
-            .markdown-output {
-                font-size: 15px;
-            }
-            .markdown-output p {
-                margin: 0.8em 0;
-            }
-            .markdown-output ul,
-            .markdown-output ol {
-                padding-left: 1.2em;
-            }
-            .markdown-output h1 { font-size: 1.8em; }
-            .markdown-output h2 { font-size: 1.5em; }
-            .markdown-output h3 { font-size: 1.3em; }
-            .markdown-output h4 { font-size: 1.1em; }
-            .markdown-output pre {
-                padding: 1em;
-                overflow-x: auto;
-                white-space: pre-wrap;
-                word-wrap: break-word;
-            }
-            .markdown-output code {
-                word-break: break-word;
-            }
-        }
-    </style>
 </head>
-<body class="bg-slate-100 min-h-screen">
-    <!-- Navigation -->
-    <nav class="gradient-background shadow-lg">
-        <div class="container mx-auto px-6 py-4">
-            <div class="flex items-center justify-between">
-                <div class="flex items-center">
-                    <i class="fas fa-book-open text-white text-2xl mr-3"></i>
-                    <h1 class="text-white text-2xl font-bold">Mariam  </h1>
-                </div>
-                <div class="text-white text-sm">
-                    <i class="fas fa-graduation-cap mr-2"></i>
-                    Histoire et Géographie
-                </div>
-            </div>
-        </div>
     </nav>
-    <!-- Main Content -->
-    <div class="container mx-auto p-6">
-        <!-- Introduction Section -->
-        <div class="text-center mb-12">
-            <h2 class="text-3xl font-bold text-gray-800 mb-4">Assistant de Rédaction</h2>
-            <p class="text-gray-600 max-w-2xl mx-auto">
-                Générez des dissertations structurées et détaillées pour vos devoirs d'histoire et de géographie.
-            </p>
         </div>
-        <!-- Histoire Type 1&3 -->
-        <div class="mb-8" data-aos="fade-up">
-            <div class="bg-white rounded-xl shadow-xl p-8 card-hover">
-                <div class="flex items-center mb-6">
-                    <i class="fas fa-landmark text-blue-600 text-2xl mr-3"></i>
-                    <h2 class="text-2xl font-bold text-gray-800">Dissertation d'Histoire - Type 1 & 3</h2>
-                </div>
-                <form id="histoire-form" class="space-y-6">
-                    <div class="space-y-2">
-                        <label for="sujet-histoire" class="text-sm font-medium text-gray-700 block">
-                            <i class="fas fa-pen-fancy mr-2"></i>Sujet de la dissertation
-                        </label>
-                        <textarea name="sujet-histoire" id="sujet-histoire" rows="3"
-                            class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
-                            placeholder="Entrez le sujet de votre dissertation..."></textarea>
-                    </div>
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                        <div class="space-y-2">
-                            <label for="pointt1-histoire" class="text-sm font-medium text-gray-700 block">
-                                <i class="fas fa-list-ol mr-2"></i>Premier point
-                            </label>
-                            <input type="text" name="pointt1-histoire" id="pointt1-histoire"
-                                class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
-                                placeholder="Premier point...">
-                        </div>
-                        <div class="space-y-2">
-                            <label for="point2-histoire" class="text-sm font-medium text-gray-700 block">
-                                <i class="fas fa-list-ol mr-2"></i>Deuxième point
-                            </label>
-                            <input type="text" name="point2-histoire" id="point2-histoire"
-                                class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
-                                placeholder="Deuxième point...">
-                        </div>
-                        <div class="space-y-2">
-                            <label for="point3-histoire" class="text-sm font-medium text-gray-700 block">
-                                <i class="fas fa-list-ol mr-2"></i>Troisième point
-                            </label>
-                            <input type="text" name="point3-histoire" id="point3-histoire"
-                                class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
-                                placeholder="Troisième point...">
-                        </div>
-                    </div>
-                    <button type="submit" class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors duration-200 flex items-center justify-center space-x-2">
-                        <i class="fas fa-magic mr-2"></i>
-                        <span>Générer la dissertation</span>
-                    </button>
-                </form>
-                <div id="histoire-output" class="mt-6 p-6 bg-gray-50 rounded-lg hidden"></div>
             </div>
-        </div>
-        <!-- Histoire Type 2 -->
-        <div class="mb-8" data-aos="fade-up">
-            <div class="bg-white rounded-xl shadow-xl p-8 card-hover">
-                <div class="flex items-center mb-6">
-                    <i class="fas fa-scroll text-green-600 text-2xl mr-3"></i>
-                    <h2 class="text-2xl font-bold text-gray-800">Histoire - Type 2 (Images)</h2>
-                </div>
-                <form id="histoire-type2-form" class="space-y-6" enctype="multipart/form-data">
-                    <div class="space-y-2">
-                        <label for="sujet-histoire-type2" class="text-sm font-medium text-gray-700 block">
-                            <i class="fas fa-pen-fancy mr-2"></i>Sujet
-                        </label>
-                        <textarea name="sujet-histoire-type2" id="sujet-histoire-type2" rows="3"
-                            class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
-                            placeholder="Entrez le sujet..."></textarea>
-                    </div>
-                    <div class="space-y-2">
-                        <label for="images-histoire-type2" class="text-sm font-medium text-gray-700 block">
-                            <i class="fas fa-images mr-2"></i>Images (Multiple)
-                        </label>
-                        <input type="file" name="images-histoire-type2" id="images-histoire-type2" multiple
-                            class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
-                        <div id="image-preview-histoire-type2" class="flex flex-wrap"></div>
-                    </div>
-                    <button type="submit" class="w-full bg-green-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-green-700 transition-colors duration-200 flex items-center justify-center">
-                        <i class="fas fa-magic mr-2"></i>
-                        <span>Générer l'analyse</span>
-                    </button>
-                </form>
-                <div id="histoire-type2-output" class="mt-6 p-6 bg-gray-50 rounded-lg hidden"></div>
             </div>
-        </div>
-        <!-- Géographie Type 1 & 3 -->
-        <div class="mb-8" data-aos="fade-up">
-            <div class="bg-white rounded-xl shadow-xl p-8 card-hover">
-                <div class="flex items-center mb-6">
-                    <i class="fas fa-globe-europe text-purple-600 text-2xl mr-3"></i>
-                    <h2 class="text-2xl font-bold text-gray-800">Dissertation de Géographie - Type 1 & 3</h2>
-                </div>
-                <form id="geographie-form" class="space-y-6">
-                    <div class="space-y-2">
-                        <label for="sujet-geographie" class="text-sm font-medium text-gray-700 block">
-                            <i class="fas fa-pen-fancy mr-2"></i>Sujet de la dissertation
-                        </label>
-                        <textarea name="sujet-geographie" id="sujet-geographie" rows="3"
-                            class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
-                            placeholder="Entrez le sujet de votre dissertation..."></textarea>
-                    </div>
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                        <div class="space-y-2">
-                            <label for="point1-geographie" class="text-sm font-medium text-gray-700 block">
-                                <i class="fas fa-list-ol mr-2"></i>Premier point
-                            </label>
-                            <input type="text" name="point1-geographie" id="point1-geographie"
-                                class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
-                                placeholder="Premier argument...">
-                        </div>
-                        <div class="space-y-2">
-                            <label for="point2-geographie" class="text-sm font-medium text-gray-700 block">
-                                <i class="fas fa-list-ol mr-2"></i>Deuxième point
-                            </label>
-                            <input type="text" name="point2-geographie" id="point2-geographie"
-                                class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
-                                placeholder="Deuxième argument...">
-                        </div>
-                        <div class="space-y-2">
-                            <label for="point3-geographie" class="text-sm font-medium text-gray-700 block">
-                                <i class="fas fa-list-ol mr-2"></i>Troisième point
-                            </label>
-                            <input type="text" name="point3-geographie" id="point3-geographie"
-                                class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
-                                placeholder="Troisième argument...">
-                        </div>
-                    </div>
-                    <button type="submit" class="w-full bg-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-purple-700 transition-colors duration-200 flex items-center justify-center space-x-2">
-                        <i class="fas fa-magic mr-2"></i>
-                        <span>Générer la dissertation</span>
-                    </button>
-                </form>
-                <div id="geographie-output" class="mt-6 p-6 bg-gray-50 rounded-lg hidden"></div>
             </div>
         </div>
-        <!-- Géographie Type 2 -->
-        <div class="mb-8" data-aos="fade-up">
-            <div class="bg-white rounded-xl shadow-xl p-8 card-hover">
-                <div class="flex items-center mb-6">
-                    <i class="fas fa-map-marked-alt text-yellow-600 text-2xl mr-3"></i>
-                    <h2 class="text-2xl font-bold text-gray-800">Géographie - Type 2 (Images)</h2>
-                </div>
-                <form id="geographie-type2-form" class="space-y-6" enctype="multipart/form-data">
-                   <div class="space-y-2">
-                        <label for="sujet-geographie-type2" class="text-sm font-medium text-gray-700 block">
-                            <i class="fas fa-pen-fancy mr-2"></i>Sujet
-                        </label>
-                        <textarea name="sujet-geographie-type2" id="sujet-geographie-type2" rows="3"
-                            class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
-                            placeholder="Entrez le sujet..."></textarea>
-                    </div>
-                    <div class="space-y-2">
-                        <label for="images-geographie-type2" class="text-sm font-medium text-gray-700 block">
-                            <i class="fas fa-images mr-2"></i>Images (Multiple)
-                        </label>
-                        <input type="file" name="images-geographie-type2" id="images-geographie-type2" multiple
-                            class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
-                        <div id="image-preview-geographie-type2" class="flex flex-wrap"></div>
-                    </div>
-                    <button type="submit" class="w-full bg-yellow-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-yellow-700 transition-colors duration-200 flex items-center justify-center">
-                        <i class="fas fa-magic mr-2"></i>
-                        <span>Générer l'analyse</span>
-                    </button>
-                </form>
-                <div id="geographie-type2-output" class="mt-6 p-6 bg-gray-50 rounded-lg hidden"></div>
             </div>
         </div>
     </div>
-    <footer class="gradient-background mt-12 py-6">
-        <div class="container mx-auto px-6 text-center text-white">
-            <p class="text-sm">© 2024 Mariam- Tous droits réservés</p>
-        </div>
-    </footer>
-    <!-- Scripts -->
-    <script>
     window.addEventListener('load', function() {
-        AOS.init({
-            duration: 800,
-            once: true,
-            offset: 100
-        });
-        // Configuration personnalisée de marked pour un meilleur rendu mobile
-        marked.setOptions({
-            breaks: true,
-            gfm: true,
-            headerIds: false,
-            renderer: new marked.Renderer()
-        });
-        function showLoading(outputId) {
-            const output = document.getElementById(outputId);
             output.classList.remove('hidden');
             output.innerHTML = `
-                <div class="flex items-center justify-center space-x-3">
-                    <div class="loading-spinner h-8 w-8 border-4 border-blue-500 border-t-transparent rounded-full"></div>
-                    <span class="text-gray-600">Génération en cours...</span>
-                </div>
             `;
-        }
-        async function submitForm(formId, outputId, endpoint) {
-            const form = document.getElementById(formId);
-            const output = document.getElementById(outputId);
-            form.addEventListener('submit', async (e) => {
-                e.preventDefault();
-                showLoading(outputId);
-                try {
-                    const formData = new FormData(form);
-                    const response = await fetch(endpoint, {
-                        method: 'POST',
-                        body: formData
-                    });
-                    if (!response.ok) {
-                        throw new Error(`HTTP error! status: ${response.status}`);
-                    }
-                    const result = await response.json();
-                    output.classList.remove('hidden');
-                    output.innerHTML = `
-                        <div class="markdown-output prose max-w-none">
-                            ${marked.parse(result.output)}
-                        </div>
-                    `;
-                    // Ajuster les tableaux pour le mobile
-                    const tables = output.getElementsByTagName('table');
-                    Array.from(tables).forEach(table => {
-                        table.parentNode.style.overflow = 'auto';
-                        table.style.minWidth = '100%';
-                    });
-                } catch (error) {
-                    output.classList.remove('hidden');
-                    output.innerHTML = `
-                        <div class="bg-red-50 border-l-4 border-red-500 p-4">
-                            <div class="flex items-center">
-                                <div class="flex-shrink-0">
-                                    <i class="fas fa-exclamation-circle text-red-500"></i>
-                                </div>
-                                <div class="ml-3">
-                                    <p class="text-red-700">Une erreur est survenue: ${error.message}</p>
-                                </div>
-                            </div>
-                        </div>
-                    `;
-                }
-            });
-        }
-        // Initialisation des formulaires et des prévisualisations d'images
-        submitForm('histoire-form', 'histoire-output', '/api/histoire');
-        submitForm('histoire-type2-form', 'histoire-type2-output', '/api/histoire-type2');
-        submitForm('geographie-form', 'geographie-output', '/api/geographie');
-        submitForm('geographie-type2-form', 'geographie-type2-output', '/api/geographie-type2');
-        // Configuration de la prévisualisation des images
-        function handleImagePreviews(inputId, previewContainerId) {
-            const input = document.getElementById(inputId);
-            const previewContainer = document.getElementById(previewContainerId);
-            input.addEventListener('change', function() {
-                previewContainer.innerHTML = '';
-                Array.from(this.files).forEach(file => {
-                    if (file.type.startsWith('image/')) {
-                        const reader = new FileReader();
-                        reader.onload = (e) => {
-                            const img = document.createElement('img');
-                            img.src = e.target.result;
-                            img.classList.add('image-preview');
-                            previewContainer.appendChild(img);
-                        };
-                        reader.readAsDataURL(file);
-                    }
-                });
             });
         }
-        handleImagePreviews('images-histoire-type2', 'image-preview-histoire-type2');
-        handleImagePreviews('images-geographie-type2', 'image-preview-geographie-type2');
     });
-</script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="fr">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Histoire et Géographie - Assistant Académique</title>
+  <!-- Feuilles de style et polices -->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <!-- Scripts et Tailwind -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js"></script>
   <style>
+    /* Police et réglages de base */
+    body {
+      font-family: 'Poppins', sans-serif;
+      background-color: #f1f5f9;
+      scroll-behavior: smooth;
+    }
+    /* Couleur et dégradé de la navigation et du footer */
+    .gradient-bg {
+      background: linear-gradient(120deg, #1a365d 0%, #2563eb 100%);
+    }
+    /* Cartes et transitions */
+    .card {
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+    }
+    .card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+    }
+    /* Animation du spinner */
+    .spinner {
+      animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+    /* Inputs et textarea avec effet focus */
+    .form-input {
+      transition: all 0.3s ease;
+    }
+    .form-input:focus {
+      transform: scale(1.01);
+      border-color: #2563eb;
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
+    }
+    /* Prévisualisation d'images */
+    .image-preview {
+      max-width: 200px;
+      max-height: 200px;
+      margin: 10px;
+      border: 1px solid #ccc;
+      border-radius: 0.375rem;
+    }
+    /* Style Markdown optimisé */
+    .markdown-output {
+      width: 100%;
+      overflow-wrap: break-word;
+      word-wrap: break-word;
+      hyphens: auto;
+    }
+    .markdown-output p {
+      margin: 1em 0;
+      line-height: 1.6;
+      font-size: 16px;
+    }
+    .markdown-output h1, .markdown-output h2,
+    .markdown-output h3, .markdown-output h4 {
+      margin: 1.5em 0 0.5em;
+      line-height: 1.3;
+    }
+    .markdown-output ul, .markdown-output ol {
+      padding-left: 1.5em;
+      margin: 1em 0;
+    }
+    .markdown-output li {
+      margin: 0.5em 0;
+      line-height: 1.4;
+    }
+    @media (max-width: 768px) {
+      .markdown-output { font-size: 15px; }
+      .markdown-output p { margin: 0.8em 0; }
+      .markdown-output ul, .markdown-output ol { padding-left: 1.2em; }
+      .markdown-output h1 { font-size: 1.8em; }
+      .markdown-output h2 { font-size: 1.5em; }
+      .markdown-output h3 { font-size: 1.3em; }
+      .markdown-output h4 { font-size: 1.1em; }
+      .markdown-output pre {
+        padding: 1em;
+        overflow-x: auto;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+      }
+      .markdown-output code { word-break: break-word; }
+    }
+    /* Bouton Retour en haut */
+    #back-to-top {
+      position: fixed;
+      bottom: 30px;
+      right: 30px;
+      background-color: #2563eb;
+      color: #fff;
+      border-radius: 50%;
+      padding: 0.75rem;
+      cursor: pointer;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.3s ease, visibility 0.3s ease;
+      z-index: 50;
+    }
+    #back-to-top.show {
+      opacity: 1;
+      visibility: visible;
+    }
+  </style>
 </head>
+<body>
+  <!-- En-tête sémantique -->
+  <header class="gradient-bg shadow-lg" role="banner">
+    <nav class="container mx-auto px-6 py-4 flex items-center justify-between" aria-label="Navigation principale">
+      <div class="flex items-center">
+        <i class="fas fa-book-open text-white text-2xl mr-3"></i>
+        <h1 class="text-white text-2xl font-bold">Mariam</h1>
+      </div>
+      <div class="flex items-center text-white text-sm">
+        <i class="fas fa-graduation-cap mr-2"></i>
+        Histoire et Géographie
+      </div>
     </nav>
+  </header>
+  <!-- Contenu principal -->
+  <main role="main" class="container mx-auto p-6">
+    <!-- Section d'introduction -->
+    <section class="text-center mb-12" data-aos="fade-up">
+      <h2 class="text-3xl font-bold text-gray-800 mb-4">Assistant de Rédaction</h2>
+      <p class="text-gray-600 max-w-2xl mx-auto">
+        Générez des dissertations structurées et détaillées pour vos devoirs d'histoire et de géographie.
+      </p>
+    </section>
+    <!-- Bloc Dissertation d'Histoire Type 1 & 3 -->
+    <section class="mb-8" data-aos="fade-up">
+      <div class="bg-white rounded-xl shadow-xl p-8 card">
+        <div class="flex items-center mb-6">
+          <i class="fas fa-landmark text-blue-600 text-2xl mr-3"></i>
+          <h2 class="text-2xl font-bold text-gray-800">Dissertation d'Histoire - Type 1 & 3</h2>
         </div>
+        <form id="histoire-form" class="space-y-6" aria-label="Formulaire dissertation histoire">
+          <div class="space-y-2">
+            <label for="sujet-histoire" class="text-sm font-medium text-gray-700">
+              <i class="fas fa-pen-fancy mr-2"></i>Sujet de la dissertation
+            </label>
+            <textarea name="sujet-histoire" id="sujet-histoire" rows="3" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm" placeholder="Entrez le sujet de votre dissertation..."></textarea>
+          </div>
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div class="space-y-2">
+              <label for="pointt1-histoire" class="text-sm font-medium text-gray-700">
+                <i class="fas fa-list-ol mr-2"></i>Premier point
+              </label>
+              <input type="text" name="pointt1-histoire" id="pointt1-histoire" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm" placeholder="Premier point...">
             </div>
+            <div class="space-y-2">
+              <label for="point2-histoire" class="text-sm font-medium text-gray-700">
+                <i class="fas fa-list-ol mr-2"></i>Deuxième point
+              </label>
+              <input type="text" name="point2-histoire" id="point2-histoire" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm" placeholder="Deuxième point...">
             </div>
+            <div class="space-y-2">
+              <label for="point3-histoire" class="text-sm font-medium text-gray-700">
+                <i class="fas fa-list-ol mr-2"></i>Troisième point
+              </label>
+              <input type="text" name="point3-histoire" id="point3-histoire" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm" placeholder="Troisième point...">
             </div>
+          </div>
+          <button type="submit" class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center hover:bg-blue-700 transition-colors duration-200">
+            <i class="fas fa-magic mr-2"></i>
+            <span>Générer la dissertation</span>
+          </button>
+        </form>
+        <div id="histoire-output" class="mt-6 p-6 bg-gray-50 rounded-lg hidden" aria-live="polite"></div>
+      </div>
+    </section>
+    <!-- Bloc Histoire Type 2 (Images) -->
+    <section class="mb-8" data-aos="fade-up">
+      <div class="bg-white rounded-xl shadow-xl p-8 card">
+        <div class="flex items-center mb-6">
+          <i class="fas fa-scroll text-green-600 text-2xl mr-3"></i>
+          <h2 class="text-2xl font-bold text-gray-800">Histoire - Type 2 (Images)</h2>
         </div>
+        <form id="histoire-type2-form" class="space-y-6" enctype="multipart/form-data" aria-label="Formulaire histoire images">
+          <div class="space-y-2">
+            <label for="sujet-histoire-type2" class="text-sm font-medium text-gray-700">
+              <i class="fas fa-pen-fancy mr-2"></i>Sujet
+            </label>
+            <textarea name="sujet-histoire-type2" id="sujet-histoire-type2" rows="3" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm" placeholder="Entrez le sujet..."></textarea>
+          </div>
+          <div class="space-y-2">
+            <label for="images-histoire-type2" class="text-sm font-medium text-gray-700">
+              <i class="fas fa-images mr-2"></i>Images (Multiple)
+            </label>
+            <input type="file" name="images-histoire-type2" id="images-histoire-type2" multiple class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm">
+            <div id="image-preview-histoire-type2" class="flex flex-wrap"></div>
+          </div>
+          <button type="submit" class="w-full bg-green-600 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center hover:bg-green-700 transition-colors duration-200">
+            <i class="fas fa-magic mr-2"></i>
+            <span>Générer l'analyse</span>
+          </button>
+        </form>
+        <div id="histoire-type2-output" class="mt-6 p-6 bg-gray-50 rounded-lg hidden" aria-live="polite"></div>
+      </div>
+    </section>
+    <!-- Bloc Dissertation de Géographie Type 1 & 3 -->
+    <section class="mb-8" data-aos="fade-up">
+      <div class="bg-white rounded-xl shadow-xl p-8 card">
+        <div class="flex items-center mb-6">
+          <i class="fas fa-globe-europe text-purple-600 text-2xl mr-3"></i>
+          <h2 class="text-2xl font-bold text-gray-800">Dissertation de Géographie - Type 1 & 3</h2>
+        </div>
+        <form id="geographie-form" class="space-y-6" aria-label="Formulaire dissertation géographie">
+          <div class="space-y-2">
+            <label for="sujet-geographie" class="text-sm font-medium text-gray-700">
+              <i class="fas fa-pen-fancy mr-2"></i>Sujet de la dissertation
+            </label>
+            <textarea name="sujet-geographie" id="sujet-geographie" rows="3" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm" placeholder="Entrez le sujet de votre dissertation..."></textarea>
+          </div>
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div class="space-y-2">
+              <label for="point1-geographie" class="text-sm font-medium text-gray-700">
+                <i class="fas fa-list-ol mr-2"></i>Premier point
+              </label>
+              <input type="text" name="point1-geographie" id="point1-geographie" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm" placeholder="Premier argument...">
+            </div>
+            <div class="space-y-2">
+              <label for="point2-geographie" class="text-sm font-medium text-gray-700">
+                <i class="fas fa-list-ol mr-2"></i>Deuxième point
+              </label>
+              <input type="text" name="point2-geographie" id="point2-geographie" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm" placeholder="Deuxième argument...">
+            </div>
+            <div class="space-y-2">
+              <label for="point3-geographie" class="text-sm font-medium text-gray-700">
+                <i class="fas fa-list-ol mr-2"></i>Troisième point
+              </label>
+              <input type="text" name="point3-geographie" id="point3-geographie" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm" placeholder="Troisième argument...">
             </div>
+          </div>
+          <button type="submit" class="w-full bg-purple-600 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center hover:bg-purple-700 transition-colors duration-200">
+            <i class="fas fa-magic mr-2"></i>
+            <span>Générer la dissertation</span>
+          </button>
+        </form>
+        <div id="geographie-output" class="mt-6 p-6 bg-gray-50 rounded-lg hidden" aria-live="polite"></div>
+      </div>
+    </section>
+    <!-- Bloc Géographie Type 2 (Images) -->
+    <section class="mb-8" data-aos="fade-up">
+      <div class="bg-white rounded-xl shadow-xl p-8 card">
+        <div class="flex items-center mb-6">
+          <i class="fas fa-map-marked-alt text-yellow-600 text-2xl mr-3"></i>
+          <h2 class="text-2xl font-bold text-gray-800">Géographie - Type 2 (Images)</h2>
         </div>
+        <form id="geographie-type2-form" class="space-y-6" enctype="multipart/form-data" aria-label="Formulaire géographie images">
+          <div class="space-y-2">
+            <label for="sujet-geographie-type2" class="text-sm font-medium text-gray-700">
+              <i class="fas fa-pen-fancy mr-2"></i>Sujet
+            </label>
+            <textarea name="sujet-geographie-type2" id="sujet-geographie-type2" rows="3" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm" placeholder="Entrez le sujet..."></textarea>
+          </div>
+          <div class="space-y-2">
+            <label for="images-geographie-type2" class="text-sm font-medium text-gray-700">
+              <i class="fas fa-images mr-2"></i>Images (Multiple)
+            </label>
+            <input type="file" name="images-geographie-type2" id="images-geographie-type2" multiple class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm">
+            <div id="image-preview-geographie-type2" class="flex flex-wrap"></div>
+          </div>
+          <button type="submit" class="w-full bg-yellow-600 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center hover:bg-yellow-700 transition-colors duration-200">
+            <i class="fas fa-magic mr-2"></i>
+            <span>Générer l'analyse</span>
+          </button>
+        </form>
+        <div id="geographie-type2-output" class="mt-6 p-6 bg-gray-50 rounded-lg hidden" aria-live="polite"></div>
+      </div>
+    </section>
+  </main>
+  <!-- Bouton Retour en haut -->
+  <button id="back-to-top" aria-label="Retour en haut">
+    <i class="fas fa-arrow-up"></i>
+  </button>
+  <!-- Pied de page -->
+  <footer class="gradient-bg mt-12 py-6" role="contentinfo">
+    <div class="container mx-auto px-6 text-center text-white">
+      <p class="text-sm">© 2024 Mariam - Tous droits réservés</p>
     </div>
+  </footer>
+  <!-- Scripts personnalisés -->
+  <script>
     window.addEventListener('load', function() {
+      AOS.init({
+        duration: 800,
+        once: true,
+        offset: 100
+      });
+      marked.setOptions({
+        breaks: true,
+        gfm: true,
+        headerIds: false,
+        renderer: new marked.Renderer()
+      });
+      function showLoading(outputId) {
+        const output = document.getElementById(outputId);
+        output.classList.remove('hidden');
+        output.innerHTML = `
+          <div class="flex items-center justify-center space-x-3">
+            <div class="spinner h-8 w-8 border-4 border-blue-500 border-t-transparent rounded-full"></div>
+            <span class="text-gray-600">Génération en cours...</span>
+          </div>
+        `;
+      }
+      async function submitForm(formId, outputId, endpoint) {
+        const form = document.getElementById(formId);
+        const output = document.getElementById(outputId);
+        form.addEventListener('submit', async (e) => {
+          e.preventDefault();
+          showLoading(outputId);
+          try {
+            const formData = new FormData(form);
+            const response = await fetch(endpoint, {
+              method: 'POST',
+              body: formData
+            });
+            if (!response.ok) throw new Error(`Erreur HTTP: ${response.status}`);
+            const result = await response.json();
             output.classList.remove('hidden');
             output.innerHTML = `
+              <div class="markdown-output prose max-w-none">
+                ${marked.parse(result.output)}
+              </div>
             `;
+            // Adaptation des tableaux pour mobile
+            Array.from(output.getElementsByTagName('table')).forEach(table => {
+              table.parentNode.style.overflow = 'auto';
+              table.style.minWidth = '100%';
             });
+          } catch (error) {
+            output.classList.remove('hidden');
+            output.innerHTML = `
+              <div class="bg-red-50 border-l-4 border-red-500 p-4">
+                <div class="flex items-center">
+                  <i class="fas fa-exclamation-circle text-red-500"></i>
+                  <p class="ml-3 text-red-700">Une erreur est survenue : ${error.message}</p>
+                </div>
+              </div>
+            `;
+          }
+        });
+      }
+      // Initialisation des formulaires
+      submitForm('histoire-form', 'histoire-output', '/api/histoire');
+      submitForm('histoire-type2-form', 'histoire-type2-output', '/api/histoire-type2');
+      submitForm('geographie-form', 'geographie-output', '/api/geographie');
+      submitForm('geographie-type2-form', 'geographie-type2-output', '/api/geographie-type2');
+      // Prévisualisation des images
+      function handleImagePreviews(inputId, previewContainerId) {
+        const input = document.getElementById(inputId);
+        const previewContainer = document.getElementById(previewContainerId);
+        input.addEventListener('change', function() {
+          previewContainer.innerHTML = '';
+          Array.from(this.files).forEach(file => {
+            if (file.type.startsWith('image/')) {
+              const reader = new FileReader();
+              reader.onload = (e) => {
+                const img = document.createElement('img');
+                img.src = e.target.result;
+                img.classList.add('image-preview');
+                previewContainer.appendChild(img);
+              };
+              reader.readAsDataURL(file);
+            }
+          });
+        });
+      }
+      handleImagePreviews('images-histoire-type2', 'image-preview-histoire-type2');
+      handleImagePreviews('images-geographie-type2', 'image-preview-geographie-type2');
+      // Bouton Retour en haut
+      const backToTopBtn = document.getElementById('back-to-top');
+      window.addEventListener('scroll', () => {
+        if (window.scrollY > 300) {
+          backToTopBtn.classList.add('show');
+        } else {
+          backToTopBtn.classList.remove('show');
         }
+      });
+      backToTopBtn.addEventListener('click', () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      });
     });
+  </script>
 </body>
+</html>