Update templates/index.html

templates/index.html

@@ -59,24 +59,24 @@
         <span class="font-bold text-xl tracking-wider">Mariam Eps</span>
       </div>
       <div>
-        <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>
         <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 (avec espacement pour la barre de navigation) -->
   <div class="pt-16 pb-8">
-    <div class="container max-w-4xl mx-auto px-4 mt-8" x-data="{ elements: [{}] }">
+    <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>
@@ -97,43 +97,37 @@
             <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" 
+                <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>
-                <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>
+                <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" placeholder="Série de l'examen" 
+                <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" placeholder="Nom de l'établissement" 
+                <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" placeholder="Année de la session" 
+                <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" placeholder="Nom et prénom du candidat" 
+                <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>
@@ -149,55 +143,31 @@
             </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 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>
+                    <input type="text" name="new_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 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 class="grid grid-cols-2 gap-2">
                     <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" 
+                      <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="number" name="element_points[]" placeholder="Ex : 1.5" step="0.1" min="0" 
+                      <input type="text" 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>
-              </template>
+              </div>
             </div>
             
             <div class="flex justify-center mt-6">
-              <button type="button" @click="elements.push({})" 
+              <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" />
@@ -210,16 +180,47 @@
         
         <!-- Bouton de génération -->
         <div class="animate__animated animate__fadeInUp">
-          <button type="submit" 
+          <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 d'évaluation
+            Générer le document
           </button>
         </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-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>
+            <input type="text" name="new_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 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" 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);
+    }
+  </script>
 </body>
 </html>