Spaces:

Docfile
/

Eps

Running

App Files Files Community

Docfile commited on Mar 9

Commit

fc29912

verified ·

1 Parent(s): 03eb0e3

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +164 -102

templates/index.html CHANGED Viewed

@@ -4,131 +4,193 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Générateur d'évaluation gymnique</title>
-  <!-- Inclusion de Tailwind via CDN -->
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
-    /* Animation de fade-in personnalisée */
-    @keyframes fadeIn {
-      from { opacity: 0; transform: translateY(20px); }
-      to { opacity: 1; transform: translateY(0); }
     }
-    .fade-in {
-      animation: fadeIn 0.5s ease-out;
     }
   </style>
 </head>
-<body class="bg-gray-50 text-gray-800">
-  <div class="min-h-screen flex items-center justify-center p-4">
-    <div class="max-w-xl w-full bg-white shadow-xl rounded-lg p-6 space-y-6 fade-in">
-      <h1 class="text-2xl font-bold text-center text-blue-600">Générateur d'évaluation gymnique</h1>
-      <form method="POST" class="space-y-4">
         <!-- Informations d'évaluation -->
-        <div class="grid grid-cols-1 gap-4">
-          <div>
-            <label for="centre_examen" class="block text-sm font-medium text-gray-700">Centre d'examen</label>
-            <input type="text" id="centre_examen" name="centre_examen" value="Centre d'examen"
-                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
-          </div>
-          <div>
-            <label for="type_examen" class="block text-sm font-medium text-gray-700">Type d'examen</label>
-            <input type="text" id="type_examen" name="type_examen" value="Bac Général"
-                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
-          </div>
-          <div class="grid grid-cols-2 gap-4">
             <div>
-              <label for="serie" class="block text-sm font-medium text-gray-700">Série</label>
-              <input type="text" id="serie" name="serie" value="Série"
-                     class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
             </div>
             <div>
-              <label for="etablissement" class="block text-sm font-medium text-gray-700">Établissement</label>
-              <input type="text" id="etablissement" name="etablissement" value="Établissement"
-                     class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
             </div>
-          </div>
-          <div class="grid grid-cols-2 gap-4">
             <div>
-              <label for="session" class="block text-sm font-medium text-gray-700">Session</label>
-              <input type="text" id="session" name="session" value="2025"
-                     class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
             </div>
             <div>
-              <label for="nom_candidat" class="block text-sm font-medium text-gray-700">Nom du candidat</label>
-              <input type="text" id="nom_candidat" name="nom_candidat" value="Candidat"
-                     class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
             </div>
           </div>
         </div>
         <!-- Éléments techniques -->
-        <h2 class="text-xl font-semibold text-blue-600 mt-6">Ajouter des éléments techniques</h2>
-        <div id="elements_container" class="space-y-4">
-          <div class="p-4 bg-gray-100 rounded-md fade-in">
-            <div class="grid grid-cols-1 gap-2">
-              <div>
-                <label class="block text-sm font-medium text-gray-700">Nom de l'élément</label>
-                <input type="text" name="new_element_name" placeholder="Ex : Saut groupé"
-                       class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
-              </div>
-              <div class="grid grid-cols-2 gap-2">
-                <div>
-                  <label class="block text-sm font-medium text-gray-700">Catégorie</label>
-                  <input type="text" name="new_element_categorie" placeholder="Ex : A"
-                         class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
                 </div>
-                <div>
-                  <label class="block text-sm font-medium text-gray-700">Points</label>
-                  <input type="text" name="new_element_points" placeholder="Ex : 1.5"
-                         class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
                 </div>
               </div>
-            </div>
           </div>
-        </div>
-        <div class="text-center">
-          <button type="button" onclick="addElement()"
-                  class="inline-block bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded transition duration-300 ease-in-out">
-            Ajouter un autre élément
-          </button>
-        </div>
-        <div class="text-center">
-          <input type="submit" value="Générer le document"
-                 class="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
-        </div>
-      </form>
-    </div>
-  </div>
-  <script>
-    // Fonction d'ajout dynamique d'un élément technique
-    function addElement() {
-      const container = document.getElementById("elements_container");
-      const div = document.createElement("div");
-      div.className = "p-4 bg-gray-100 rounded-md fade-in";
-      div.innerHTML = `
-        <div class="grid grid-cols-1 gap-2">
-          <div>
-            <label class="block text-sm font-medium text-gray-700">Nom de l'élément</label>
-            <input type="text" name="new_element_name" placeholder="Ex : Saut groupé"
-                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
-          </div>
-          <div class="grid grid-cols-2 gap-2">
-            <div>
-              <label class="block text-sm font-medium text-gray-700">Catégorie</label>
-              <input type="text" name="new_element_categorie" placeholder="Ex : A"
-                     class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
-            </div>
-            <div>
-              <label class="block text-sm font-medium text-gray-700">Points</label>
-              <input type="text" name="new_element_points" placeholder="Ex : 1.5"
-                     class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
-            </div>
           </div>
         </div>
-      `;
-      container.appendChild(div);
-    }
-  </script>
 </body>
-</html>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Générateur d'évaluation gymnique</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);
     }
   </style>
 </head>
+<body class="min-h-screen py-8">
+  <div class="container max-w-4xl mx-auto px-4" x-data="{ elements: [{}] }">
+    <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 d'évaluation -->
+        <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" placeholder="Nom du 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>
+              <select id="type_examen" name="type_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">
+                <option value="Bac Général">Bac Général</option>
+                <option value="Bac Technologique">Bac Technologique</option>
+                <option value="Bac Professionnel">Bac Professionnel</option>
+                <option value="Brevet">Brevet</option>
+                <option value="Autre">Autre</option>
+              </select>
             </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" placeholder="Série de l'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="etablissement" class="block text-sm font-medium text-gray-700 mb-1">Établissement</label>
+              <input type="text" id="etablissement" name="etablissement" placeholder="Nom de l'é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" placeholder="Année de la session"
+                     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" placeholder="Nom et prénom du 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>
         <!-- É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">
+            <template x-for="(element, index) in elements" :key="index">
+              <div class="p-5 bg-gray-50 border border-gray-200 rounded-lg element-card">
+                <div class="flex items-center justify-between mb-3">
+                  <h3 class="font-medium text-indigo-600">Élément #<span x-text="index + 1"></span></h3>
+                  <button type="button" x-show="elements.length > 1" @click="elements.splice(index, 1)"
+                          class="text-red-500 hover:text-red-700 transition-colors duration-200">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                  </button>
                 </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <div class="md:col-span-2">
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Nom de l'élément</label>
+                    <input type="text" name="element_name[]" placeholder="Ex : Saut groupé"
+                           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">Catégorie</label>
+                    <select name="element_categorie[]"
+                            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">
+                      <option value="A">A</option>
+                      <option value="B">B</option>
+                      <option value="C">C</option>
+                      <option value="D">D</option>
+                      <option value="E">E</option>
+                    </select>
+                  </div>
+                  <div class="md:col-span-2">
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
+                    <input type="text" name="element_description[]" placeholder="Description de l'élément"
+                           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="number" name="element_points[]" placeholder="Ex : 1.5" step="0.1" min="0"
+                           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>
+            </template>
           </div>
+          <div class="flex justify-center mt-6">
+            <button type="button" @click="elements.push({})"
+                    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"
+                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 d'évaluation
+        </button>
+      </div>
+    </form>
+  </div>
 </body>
+</html>