Spaces:

Docfile
/

Eps

Sleeping

App Files Files Community

Docfile commited on 8 days ago

Commit

0ddde91

verified ·

1 Parent(s): de339e9

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +265 -93

templates/index.html CHANGED Viewed

@@ -1,118 +1,290 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Générateur Fiche Évaluation Gym</title>
-    <style>
-        body { font-family: sans-serif; margin: 20px; }
-        label { display: block; margin-top: 10px; font-weight: bold; }
-        input[type=text], input[type=number] { width: 95%; padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; }
-        .element-row { display: flex; align-items: center; margin-bottom: 10px; border: 1px solid #eee; padding: 10px; border-radius: 5px;}
-        .element-row input { margin-right: 10px; }
-        .element-row input[name="new_element_name"] { flex-grow: 3; } /* More space for name */
-        .element-row input[name="new_element_categorie"] { flex-grow: 1; }
-        .element-row input[name="new_element_points"] { flex-grow: 1; }
-        button { padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 5px; }
-        button:hover { background-color: #0056b3; }
-        .remove-btn { background-color: #dc3545; margin-left: 10px; }
-        .remove-btn:hover { background-color: #c82333; }
-        #elements-container { margin-top: 15px; padding-top: 10px; border-top: 1px dashed #ccc; }
-        fieldset { border: 1px solid #ddd; padding: 15px; margin-bottom: 20px; border-radius: 5px; }
-        legend { font-weight: bold; padding: 0 10px; }
-        .format-options label { display: inline-block; margin-right: 15px; font-weight: normal;}
-        .format-options input[type=radio] { margin-right: 5px; }
-    </style>
 </head>
-<body>
-    <h1>Générateur de Fiche d'Évaluation Gymnastique</h1>
-    <form method="post">
-        <fieldset>
-            <legend>Informations Générales</legend>
-            <label for="centre_examen">Centre d'examen:</label>
-            <input type="text" id="centre_examen" name="centre_examen" value="Centre d'examen">
-            <label for="type_examen">Type d'examen:</label>
-            <input type="text" id="type_examen" name="type_examen" value="Bac Général">
-            <label for="serie">Série:</label>
-            <input type="text" id="serie" name="serie" value="Série">
-            <label for="etablissement">Établissement:</label>
-            <input type="text" id="etablissement" name="etablissement" value="Établissement">
-            <label for="session">Session:</label>
-            <input type="number" id="session" name="session" value="2025">
-            <label for="nom_candidat">Nom du Candidat:</label>
-            <input type="text" id="nom_candidat" name="nom_candidat" value="Nom Prénom">
-        </fieldset>
-        <fieldset>
-            <legend>Éléments Techniques</legend>
-            <div id="elements-container">
-                <!-- Element rows will be added here by JavaScript -->
-                <div class="element-row">
-                     <input type="text" name="new_element_name" placeholder="Nom de l'élément" required>
-                     <input type="text" name="new_element_categorie" placeholder="Catégorie (A, B...)" required>
-                     <input type="number" step="0.1" name="new_element_points" placeholder="Points max" required>
-                     <button type="button" class="remove-btn" onclick="removeElement(this)">Supprimer</button>
-                 </div>
             </div>
-            <button type="button" id="add-element-btn">Ajouter un élément</button>
-        </fieldset>
-         <fieldset>
-            <legend>Format de Sortie</legend>
-            <div class="format-options">
-                <label>
-                    <input type="radio" name="format" value="docx" checked> DOCX
-                </label>
-                <label>
-                    <input type="radio" name="format" value="pdf"> PDF (Nécessite ConvertAPI)
-                </label>
             </div>
-        </fieldset>
-        <button type="submit">Générer le Document</button>
-    </form>
-    <script>
-        const container = document.getElementById('elements-container');
-        const addButton = document.getElementById('add-element-btn');
-        function createEmptyElementRow() {
-            const newRow = document.createElement('div');
-            newRow.classList.add('element-row');
-            newRow.innerHTML = `
-                <input type="text" name="new_element_name" placeholder="Nom de l'élément" required>
-                <input type="text" name="new_element_categorie" placeholder="Catégorie (A, B...)" required>
-                <input type="number" step="0.1" name="new_element_points" placeholder="Points max" required>
-                <button type="button" class="remove-btn" onclick="removeElement(this)">Supprimer</button>
-            `;
-            container.appendChild(newRow);
         }
-        function removeElement(button) {
-            // Prevent removing the last row if you want at least one always present
-             if (container.children.length > 1) {
-                 button.parentElement.remove();
-             } else {
-                 alert("Vous devez avoir au moins un élément.");
-             }
         }
-        addButton.addEventListener('click', createEmptyElementRow);
-        // Optional: Add a few empty rows initially if needed
-        // createEmptyElementRow();
-        // createEmptyElementRow();
-    </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>Générateur d'évaluation gymnique - Mariam Eps</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- AlpineJS not strictly needed for this functionality, but keep if used elsewhere -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.13.0/cdn.min.js" defer></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
+    body {
+      font-family: 'Montserrat', sans-serif;
+      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    }
+    .card-shadow { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
+    .input-focus-effect { transition: all 0.3s ease; }
+    .input-focus-effect:focus { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(45, 85, 255, 0.2); }
+    .btn-hover-effect { transition: all 0.3s ease; }
+    .btn-hover-effect:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(45, 85, 255, 0.2); }
+    .element-card { transition: all 0.3s ease; }
+    .element-card:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); }
+    .navbar-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
+    textarea.element-name { resize: vertical; min-height: 60px; }
+    /* Style for remove button */
+    .remove-btn { background-color: #ef4444; color: white; transition: background-color 0.3s ease; }
+    .remove-btn:hover { background-color: #dc2626; }
+  </style>
 </head>
+<body class="min-h-screen">
+  <!-- Loader -->
+  <div id="loader" class="hidden fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-[100]">
+    <div class="flex flex-col items-center">
+      <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-blue-500"></div>
+      <p class="mt-4 text-white text-lg">Génération en cours...</p>
+    </div>
+  </div>
+  <!-- Barre de navigation -->
+  <header class="bg-indigo-700 text-white navbar-shadow fixed w-full top-0 z-50">
+     <!-- Navbar content unchanged -->
+     <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+        <div class="flex items-center">
+          <span class="font-bold text-xl tracking-wider">Mariam Eps</span>
+        </div>
+        <div>
+          <nav class="hidden md:flex space-x-6">
+            <a href="#" class="hover:text-indigo-200 transition-colors duration-200 font-medium">Accueil</a>
+            <a href="#" class="hover:text-indigo-200 transition-colors duration-200 font-medium">Évaluations</a>
+            <a href="#" class="hover:text-indigo-200 transition-colors duration-200 font-medium">Ressources</a>
+            <a href="#" class="hover:text-indigo-200 transition-colors duration-200 font-medium">Contact</a>
+          </nav>
+          <button class="md:hidden focus:outline-none">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
+            </svg>
+          </button>
+        </div>
+      </div>
+  </header>
+  <!-- Contenu principal -->
+  <div class="pt-20 pb-8"> <!-- Increased pt slightly for fixed navbar -->
+    <div class="container max-w-4xl mx-auto px-4 mt-8">
+      <div class="mb-8 text-center animate__animated animate__fadeInDown">
+        <h1 class="text-3xl md:text-4xl font-bold text-indigo-700 mb-2">Générateur d'évaluation gymnique</h1>
+        <p class="text-gray-600 max-w-2xl mx-auto">Créez facilement des documents d'évaluation personnalisés pour vos examens de gymnastique</p>
+      </div>
+      <form method="POST" action="/eps" class="space-y-8 animate__animated animate__fadeIn"> <!-- Added action="/eps" -->
+        <!-- Card principale -->
+        <div class="bg-white rounded-xl card-shadow p-6 md:p-8">
+          <!-- Informations générales -->
+          <div class="mb-8">
+            <h2 class="text-xl font-semibold text-indigo-600 mb-4 flex items-center">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd" /></svg>
+              Informations générales
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div>
+                <label for="centre_examen" class="block text-sm font-medium text-gray-700 mb-1">Centre d'examen</label>
+                <input type="text" id="centre_examen" name="centre_examen" value="Centre d'examen" class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+              </div>
+              <div>
+                <label for="type_examen" class="block text-sm font-medium text-gray-700 mb-1">Type d'examen</label>
+                <input type="text" id="type_examen" name="type_examen" value="Bac Général" class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+              </div>
+              <div>
+                <label for="serie" class="block text-sm font-medium text-gray-700 mb-1">Série</label>
+                <input type="text" id="serie" name="serie" value="Série" class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+              </div>
+              <div>
+                <label for="etablissement" class="block text-sm font-medium text-gray-700 mb-1">Établissement</label>
+                <input type="text" id="etablissement" name="etablissement" value="Établissement" class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+              </div>
+              <div>
+                <label for="session" class="block text-sm font-medium text-gray-700 mb-1">Session</label>
+                <input type="text" id="session" name="session" value="2025" class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+              </div>
+              <div>
+                <label for="nom_candidat" class="block text-sm font-medium text-gray-700 mb-1">Nom du candidat</label>
+                <input type="text" id="nom_candidat" name="nom_candidat" value="Candidat" class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+              </div>
+            </div>
+          </div>
+          <!-- Choix du format de téléchargement -->
+          <div class="mb-6">
+            <label class="block text-sm font-medium text-gray-700 mb-1">Choisissez le format de téléchargement :</label>
+            <div class="flex items-center space-x-4">
+              <label class="inline-flex items-center cursor-pointer">
+                <input type="radio" name="format" value="docx" checked class="form-radio text-indigo-600 focus:ring-indigo-500">
+                <span class="ml-2 text-gray-700">DOCX</span>
+              </label>
+              <label class="inline-flex items-center cursor-pointer">
+                <input type="radio" name="format" value="pdf" class="form-radio text-indigo-600 focus:ring-indigo-500">
+                <span class="ml-2 text-gray-700">PDF</span>
+              </label>
+            </div>
+          </div>
+          <!-- Éléments techniques -->
+          <div>
+            <h2 class="text-xl font-semibold text-indigo-600 mb-4 flex items-center">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" /><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd" /></svg>
+              Éléments techniques
+            </h2>
+            <div id="elements_container" class="space-y-4">
+              <!-- Initial Element Row -->
+              <div class="p-5 bg-gray-50 border border-gray-200 rounded-lg element-card relative">
+                <div class="grid grid-cols-1 gap-2">
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Nom de l'élément</label>
+                    <textarea name="new_element_name" placeholder="Ex : Saut groupé" required
+                      class="element-name w-full px-4 py-2 bg-white border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"></textarea>
+                  </div>
+                  <div class="grid grid-cols-2 gap-2">
+                    <div>
+                      <label class="block text-sm font-medium text-gray-700 mb-1">Catégorie</label>
+                      <input type="text" name="new_element_categorie" placeholder="Ex : A" required
+                        class="w-full px-4 py-2 bg-white border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                    </div>
+                    <div>
+                      <label class="block text-sm font-medium text-gray-700 mb-1">Points</label>
+                      <input type="text" inputmode="decimal" pattern="^\d*([.,])?\d*$" name="new_element_points" placeholder="Ex : 1.5" required
+                        class="w-full px-4 py-2 bg-white border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                    </div>
+                  </div>
+                </div>
+                <!-- Add Remove Button Here -->
+                <button type="button" onclick="removeElement(this)" title="Supprimer cet élément"
+                   class="remove-btn absolute top-2 right-2 p-1.5 rounded-full btn-hover-effect">
+                   <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                     <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                   </svg>
+                 </button>
+              </div>
+              <!-- More elements added dynamically here -->
+            </div>
+            <div class="flex justify-center mt-6">
+              <button type="button" onclick="addElement()" id="add-element-btn"
+                class="inline-flex items-center px-4 py-2 bg-indigo-100 text-indigo-700 rounded-lg btn-hover-effect focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                </svg>
+                Ajouter un autre élément
+              </button>
+            </div>
+          </div>
+        </div>
+        <!-- Bouton de génération -->
+        <div class="animate__animated animate__fadeInUp">
+          <button type="submit"
+            class="w-full py-3 px-6 bg-gradient-to-r from-indigo-600 to-blue-500 text-white font-medium rounded-lg btn-hover-effect flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
+            Générer le document
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    const container = document.getElementById("elements_container");
+    const addButton = document.getElementById('add-element-btn');
+    // --- MODIFIED: Function to add element WITH remove button ---
+    function addElement() {
+      const div = document.createElement("div");
+      // Added 'relative' class for positioning the remove button
+      div.className = "p-5 bg-gray-50 border border-gray-200 rounded-lg element-card relative animate__animated animate__fadeIn";
+      div.innerHTML = `
+        <div class="grid grid-cols-1 gap-2">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Nom de l'élément</label>
+            <textarea name="new_element_name" placeholder="Ex : Saut groupé" required
+              class="element-name w-full px-4 py-2 bg-white border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"></textarea>
+          </div>
+          <div class="grid grid-cols-2 gap-2">
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-1">Catégorie</label>
+              <input type="text" name="new_element_categorie" placeholder="Ex : A" required
+                class="w-full px-4 py-2 bg-white border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
             </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-1">Points</label>
+              <input type="text" inputmode="decimal" pattern="^\\d*([.,])?\\d*$" name="new_element_points" placeholder="Ex : 1.5" required
+                class="w-full px-4 py-2 bg-white border border-gray-200 rounded-lg input-focus-effect focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
             </div>
+          </div>
+        </div>
+        <!-- Remove Button Added -->
+        <button type="button" onclick="removeElement(this)" title="Supprimer cet élément"
+            class="remove-btn absolute top-2 right-2 p-1.5 rounded-full btn-hover-effect">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+        </button>
+      `;
+      container.appendChild(div);
+    }
+    // --- NEW: Function to remove element ---
+    function removeElement(button) {
+        // Check if it's the last element before removing
+        if (container.children.length > 1) {
+            const elementCard = button.closest('.element-card'); // Find the parent card div
+             if (elementCard) {
+                // Optional: Add fade out animation before removing
+                elementCard.classList.add('animate__animated', 'animate__fadeOut');
+                elementCard.addEventListener('animationend', () => {
+                     elementCard.remove();
+                });
+             }
+        } else {
+            alert("Vous devez conserver au moins un élément technique.");
+        }
+    }
+    // Replace commas with dots in "Points" fields
+    container.addEventListener('input', function(event) {
+      if (event.target && event.target.name === 'new_element_points') {
+        // Allow only numbers and one dot/comma, then replace comma with dot
+        event.target.value = event.target.value.replace(/[^0-9.,]/g, '').replace(/,/g, '.');
+         // Ensure only one dot
+         const parts = event.target.value.split('.');
+         if (parts.length > 2) {
+             event.target.value = parts[0] + '.' + parts.slice(1).join('');
+         }
+      }
+    });
+     // Show loader on form submission
+     document.querySelector('form').addEventListener('submit', function(e) {
+        // Basic validation: check if required fields in elements are filled
+        let allValid = true;
+        const elementNames = document.querySelectorAll('textarea[name="new_element_name"]');
+        const elementCats = document.querySelectorAll('input[name="new_element_categorie"]');
+        const elementPoints = document.querySelectorAll('input[name="new_element_points"]');
+        for (let i = 0; i < elementNames.length; i++) {
+            if (!elementNames[i].value.trim() || !elementCats[i].value.trim() || !elementPoints[i].value.trim()) {
+                allValid = false;
+                // Optional: highlight the invalid row
+                elementNames[i].closest('.element-card').style.border = '1px solid red';
+            } else {
+                 elementNames[i].closest('.element-card').style.border = '1px solid #e5e7eb'; // Reset border
+            }
         }
+        if (!allValid) {
+             e.preventDefault(); // Stop submission
+             alert("Veuillez remplir tous les champs pour chaque élément technique.");
+        } else {
+            document.getElementById('loader').classList.remove('hidden');
         }
+    });
+    // Optional: Remove validation error border on input
+     container.addEventListener('input', function(event) {
+         if (event.target && (event.target.name === 'new_element_name' || event.target.name === 'new_element_categorie' || event.target.name === 'new_element_points')) {
+             event.target.closest('.element-card').style.border = '1px solid #e5e7eb';
+         }
+     });
+  </script>
 </body>
 </html>