Spaces:

Docfile
/

Eps

Sleeping

App Files Files Community

Docfile commited on Apr 16

Commit

de339e9

verified ·

1 Parent(s): e28d5a2

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +110 -241

templates/index.html CHANGED Viewed

@@ -1,249 +1,118 @@
 <!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>
-  <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);
-    }
-    /* Style pour les textarea de noms d'éléments */
-    textarea.element-name {
-      resize: vertical;
-      min-height: 60px;
-    }
-  </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-50">
-    <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">Veuillez patienter...</p>
-    </div>
-  </div>
-  <!-- Barre de navigation -->
-  <header class="bg-indigo-700 text-white navbar-shadow fixed w-full top-0 z-50">
-    <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-16 pb-8">
-    <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" class="space-y-8 animate__animated animate__fadeIn">
-        <!-- 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" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-              </svg>
-              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">
-                <input type="radio" name="format" value="docx" checked class="form-radio">
-                <span class="ml-2">DOCX</span>
-              </label>
-              <label class="inline-flex items-center">
-                <input type="radio" name="format" value="pdf" class="form-radio">
-                <span class="ml-2">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" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
-              </svg>
-              Éléments techniques
-            </h2>
-            <div id="elements_container" class="space-y-4">
-              <div class="p-5 bg-gray-50 border border-gray-200 rounded-lg element-card">
-                <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é"
-                      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"
-                        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"
-                        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>
-              </div>
-            </div>
-            <div class="flex justify-center mt-6">
-              <button type="button" onclick="addElement()"
-                class="inline-flex items-center px-4 py-2 bg-indigo-100 text-indigo-700 rounded-lg btn-hover-effect">
-                <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" value="Générer le document"
-            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">
-            <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 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-            </svg>
-            Générer le document
-          </button>
-        </div>
-      </form>
-    </div>
-  </div>
-  <script>
-    // Fonction d'ajout dynamique d'un élément technique avec champs "Points" amélioré
-    function addElement() {
-      const container = document.getElementById("elements_container");
-      const div = document.createElement("div");
-      div.className = "p-5 bg-gray-50 border border-gray-200 rounded-lg element-card";
-      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é"
-              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"
-                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"
-                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>
-      `;
-      container.appendChild(div);
-    }
-    // Remplacer automatiquement les virgules par des points dans les champs "Points"
-    document.getElementById("elements_container").addEventListener('input', function(event) {
-      if (event.target && event.target.name === 'new_element_points') {
-        event.target.value = event.target.value.replace(/,/g, '.');
-      }
-    });
-    // Affichage du loader dès la soumission du formulaire
-    document.querySelector('form').addEventListener('submit', function() {
-      document.getElementById('loader').classList.remove('hidden');
-    });
-  </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 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>