Spaces:
Running
Running
| <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> | |