Spaces:

Docfile
/

HistoireGeo

Running

App Files Files Community

Docfile commited on Nov 18, 2024

Commit

c6fc2a7

verified ·

1 Parent(s): cd099aa

Update templates/histoire.html

Browse files

Files changed (1) hide show

templates/histoire.html +230 -78

templates/histoire.html CHANGED Viewed

@@ -3,103 +3,255 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Histoire et Géographie</title>
     <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://cdn.jsdelivr.net/npm/@gradio/client@0.1.4/dist/index.min.js"></script>
-    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
 </head>
-<body class="bg-gray-100 min-h-screen">
-    <nav class="bg-blue-600 p-4">
-        <h1 class="text-white text-2xl font-bold">Histoire et Géographie</h1>
-    </nav>
-    <div class="container mx-auto p-8">
-        <div class="mb-8 bg-white rounded-lg shadow-lg p-6">
-            <h2 class="text-xl font-bold mb-4">Histoire type 1&3</h2>
-            <form id="histoire-form" class="space-y-4">
-                <div>
-                    <label for="sujet-histoire" class="block text-sm font-medium text-gray-700">Sujet:</label>
-                    <textarea id="sujet-histoire" rows="2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"></textarea>
-                </div>
-                <div>
-                    <label for="point1-histoire" class="block text-sm font-medium text-gray-700">Point 1:</label>
-                    <input type="text" id="point1-histoire" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
-                </div>
-                <div>
-                    <label for="point2-histoire" class="block text-sm font-medium text-gray-700">Point 2:</label>
-                    <input type="text" id="point2-histoire" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
                 </div>
-                <div>
-                    <label for="point3-histoire" class="block text-sm font-medium text-gray-700">Point 3:</label>
-                    <input type="text" id="point3-histoire" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
                 </div>
-                <button type="submit" class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Générer</button>
-            </form>
-            <div id="histoire-output" class="mt-4 p-4 bg-gray-50 rounded-lg"></div>
         </div>
-        <div class="mb-8 bg-white rounded-lg shadow-lg p-6">
-            <h2 class="text-xl font-bold mb-4">Histoire type 2</h2>
-            <form id="histoire-type2-form" class="space-y-4">
-                <div>
-                    <label for="sujet-histoire-type2" class="block text-sm font-medium text-gray-700">Sujet:</label>
-                    <textarea id="sujet-histoire-type2" rows="2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"></textarea>
-                </div>
-                <div>
-                    <label for="point1-histoire-type2" class="block text-sm font-medium text-gray-700">Point 1:</label>
-                    <input type="text" id="point1-histoire-type2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
-                </div>
-                <div>
-                    <label for="point2-histoire-type2" class="block text-sm font-medium text-gray-700">Point 2:</label>
-                    <input type="text" id="point2-histoire-type2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
                 </div>
-                <div>
-                    <label for="point3-histoire-type2" class="block text-sm font-medium text-gray-700">Point 3:</label>
-                    <input type="text" id="point3-histoire-type2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
                 </div>
-                <button type="submit" class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Générer</button>
-            </form>
-            <div id="histoire-type2-output" class="mt-4 p-4 bg-gray-50 rounded-lg"></div>
         </div>
-        <div class="bg-white rounded-lg shadow-lg p-6">
-            <h2 class="text-xl font-bold mb-4">Géographie</h2>
-            <form id="geographie-form" class="space-y-4">
-                <div>
-                    <label for="sujet-geographie" class="block text-sm font-medium text-gray-700">Sujet:</label>
-                    <textarea id="sujet-geographie" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"></textarea>
                 </div>
-                <button type="submit" class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Générer</button>
-            </form>
-            <div id="geographie-output" class="mt-4 p-4 bg-gray-50 rounded-lg"></div>
         </div>
     </div>
     <script>
-        async function submitForm(formId, outputId, endpoint) {
-            const form = document.getElementById(formId);
-            const output = document.getElementById(outputId);
-            form.addEventListener('submit', async (e) => {
-                e.preventDefault();
-                output.innerHTML = '<p>Chargement en cours...</p>';
-                const formData = new FormData(form);
-                const response = await fetch(endpoint, {
-                    method: 'POST',
-                    body: formData
-                });
-                const result = await response.json();
-                output.innerHTML = marked.parse(result.output);
-                MathJax.typesetPromise([output]);
-            });
-        }
-        submitForm('histoire-form', 'histoire-output', '/api/histoire');
-        submitForm('histoire-type2-form', 'histoire-type2-output', '/api/histoire-type2');
-        submitForm('geographie-form', 'geographie-output', '/api/geographie');
     </script>
 </body>
-    </html>

 <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/aos@2.3.4/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);
+        }
+    </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 argument...">
+                        </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 argument...">
+                        </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 argument...">
+                        </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</h2>
                 </div>
+                <form id="histoire-type2-form" class="space-y-6">
+                    <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>
+                    <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 -->
+        <div 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">Géographie</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
+                        </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 géographie..."></textarea>
+                    </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">
+                        <i class="fas fa-magic mr-2"></i>
+                        <span>Générer l'analyse</span>
+                    </button>
+                </form>
+                <div id="geographie-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>
+        // Attendre que tous les scripts soient chargés
+        window.addEventListener('load', function() {
+            // Initialize AOS
+            AOS.init({
+                duration: 800,
+                once: true,
+                offset: 100
+            });
+            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="prose max-w-none">
+                                ${marked.parse(result.output)}
+                            </div>
+                        `;
+                    } 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>
+                        `;
+                    }
+                });
+            }
+            submitForm('histoire-form', 'histoire-output', '/api/histoire');
+            submitForm('histoire-type2-form', 'histoire-type2-output', '/api/histoire-type2');
+            submitForm('geographie-form', 'geographie-output', '/api/geographie');
+        });
     </script>
 </body>
+</html>