Hugging Face's logo

Spaces:
Docfile
/
Eps
Sleeping

App Files Community
Docfile commited on
Commit
9c27152
·
verified ·
1 Parent(s): 9628b82

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +124 -53
templates/index.html CHANGED
@@ -1,63 +1,134 @@
1
  <!DOCTYPE html>
2
- <html>
3
  <head>
4
- <meta charset="utf-8">
5
- <title>Générateur d'évaluation gymnique</title>
6
- <script>
7
- // Fonction pour ajouter dynamiquement une ligne d'élément technique
8
- function addElement() {
9
- let container = document.getElementById("elements_container");
10
- let elementDiv = document.createElement("div");
11
- elementDiv.innerHTML = `
12
- <label>Nom de l'élément :</label>
13
- <input type="text" name="new_element_name">
14
- <label>Catégorie :</label>
15
- <input type="text" name="new_element_categorie">
16
- <label>Points :</label>
17
- <input type="text" name="new_element_points">
18
- <br><br>
19
- `;
20
- container.appendChild(elementDiv);
21
- }
22
- </script>
23
  </head>
24
- <body>
25
- <h1>Modifier les informations d'évaluation</h1>
26
- <form method="POST">
27
- <label for="centre_examen">Centre d'examen :</label><br>
28
- <input type="text" id="centre_examen" name="centre_examen" value="Centre d'examen"><br><br>
29
-
30
- <label for="type_examen">Type d'examen :</label><br>
31
- <input type="text" id="type_examen" name="type_examen" value="Bac Général"><br><br>
32
-
33
- <label for="serie">Série :</label><br>
34
- <input type="text" id="serie" name="serie" value="Série"><br><br>
35
-
36
- <label for="etablissement">Établissement :</label><br>
37
- <input type="text" id="etablissement" name="etablissement" value="Établissement"><br><br>
38
-
39
- <label for="session">Session :</label><br>
40
- <input type="text" id="session" name="session" value="2025"><br><br>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
41
 
42
- <label for="nom_candidat">Nom du candidat :</label><br>
43
- <input type="text" id="nom_candidat" name="nom_candidat" value="Candidat"><br><br>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
 
45
- <h2>Ajouter des éléments techniques</h2>
46
- <div id="elements_container">
47
- <!-- Une première ligne d'élément technique est affichée par défaut -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
48
  <div>
49
- <label>Nom de l'élément :</label>
50
- <input type="text" name="new_element_name">
51
- <label>Catégorie :</label>
52
- <input type="text" name="new_element_categorie">
53
- <label>Points :</label>
54
- <input type="text" name="new_element_points">
55
- <br><br>
56
  </div>
 
57
  </div>
58
- <button type="button" onclick="addElement()">Ajouter un autre élément</button>
59
- <br><br>
60
- <input type="submit" value="Générer le document">
61
- </form>
62
  </body>
63
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="fr">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Générateur d'évaluation gymnique</title>
7
+ <!-- Inclusion de Tailwind via CDN -->
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <style>
10
+ /* Animation de fade-in personnalisée */
11
+ @keyframes fadeIn {
12
+ from { opacity: 0; transform: translateY(20px); }
13
+ to { opacity: 1; transform: translateY(0); }
14
+ }
15
+ .fade-in {
16
+ animation: fadeIn 0.5s ease-out;
17
+ }
18
+ </style>
 
 
 
 
19
  </head>
20
+ <body class="bg-gray-50 text-gray-800">
21
+ <div class="min-h-screen flex items-center justify-center p-4">
22
+ <div class="max-w-xl w-full bg-white shadow-xl rounded-lg p-6 space-y-6 fade-in">
23
+ <h1 class="text-2xl font-bold text-center text-blue-600">Générateur d'évaluation gymnique</h1>
24
+ <form method="POST" class="space-y-4">
25
+ <!-- Informations d'évaluation -->
26
+ <div class="grid grid-cols-1 gap-4">
27
+ <div>
28
+ <label for="centre_examen" class="block text-sm font-medium text-gray-700">Centre d'examen</label>
29
+ <input type="text" id="centre_examen" name="centre_examen" value="Centre d'examen"
30
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
31
+ </div>
32
+ <div>
33
+ <label for="type_examen" class="block text-sm font-medium text-gray-700">Type d'examen</label>
34
+ <input type="text" id="type_examen" name="type_examen" value="Bac Général"
35
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
36
+ </div>
37
+ <div class="grid grid-cols-2 gap-4">
38
+ <div>
39
+ <label for="serie" class="block text-sm font-medium text-gray-700">Série</label>
40
+ <input type="text" id="serie" name="serie" value="Série"
41
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
42
+ </div>
43
+ <div>
44
+ <label for="etablissement" class="block text-sm font-medium text-gray-700">Établissement</label>
45
+ <input type="text" id="etablissement" name="etablissement" value="Établissement"
46
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
47
+ </div>
48
+ </div>
49
+ <div class="grid grid-cols-2 gap-4">
50
+ <div>
51
+ <label for="session" class="block text-sm font-medium text-gray-700">Session</label>
52
+ <input type="text" id="session" name="session" value="2025"
53
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
54
+ </div>
55
+ <div>
56
+ <label for="nom_candidat" class="block text-sm font-medium text-gray-700">Nom du candidat</label>
57
+ <input type="text" id="nom_candidat" name="nom_candidat" value="Candidat"
58
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
59
+ </div>
60
+ </div>
61
+ </div>
62
 
63
+ <!-- Éléments techniques -->
64
+ <h2 class="text-xl font-semibold text-blue-600 mt-6">Ajouter des éléments techniques</h2>
65
+ <div id="elements_container" class="space-y-4">
66
+ <div class="p-4 bg-gray-100 rounded-md fade-in">
67
+ <div class="grid grid-cols-1 gap-2">
68
+ <div>
69
+ <label class="block text-sm font-medium text-gray-700">Nom de l'élément</label>
70
+ <input type="text" name="new_element_name" placeholder="Ex : Saut groupé"
71
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
72
+ </div>
73
+ <div class="grid grid-cols-2 gap-2">
74
+ <div>
75
+ <label class="block text-sm font-medium text-gray-700">Catégorie</label>
76
+ <input type="text" name="new_element_categorie" placeholder="Ex : A"
77
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
78
+ </div>
79
+ <div>
80
+ <label class="block text-sm font-medium text-gray-700">Points</label>
81
+ <input type="text" name="new_element_points" placeholder="Ex : 1.5"
82
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ <div class="text-center">
89
+ <button type="button" onclick="addElement()"
90
+ 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">
91
+ Ajouter un autre élément
92
+ </button>
93
+ </div>
94
+
95
+ <div class="text-center">
96
+ <input type="submit" value="Générer le document"
97
+ 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">
98
+ </div>
99
+ </form>
100
+ </div>
101
+ </div>
102
 
103
+ <script>
104
+ // Fonction d'ajout dynamique d'un élément technique
105
+ function addElement() {
106
+ const container = document.getElementById("elements_container");
107
+ const div = document.createElement("div");
108
+ div.className = "p-4 bg-gray-100 rounded-md fade-in";
109
+ div.innerHTML = `
110
+ <div class="grid grid-cols-1 gap-2">
111
+ <div>
112
+ <label class="block text-sm font-medium text-gray-700">Nom de l'élément</label>
113
+ <input type="text" name="new_element_name" placeholder="Ex : Saut groupé"
114
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
115
+ </div>
116
+ <div class="grid grid-cols-2 gap-2">
117
+ <div>
118
+ <label class="block text-sm font-medium text-gray-700">Catégorie</label>
119
+ <input type="text" name="new_element_categorie" placeholder="Ex : A"
120
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
121
+ </div>
122
  <div>
123
+ <label class="block text-sm font-medium text-gray-700">Points</label>
124
+ <input type="text" name="new_element_points" placeholder="Ex : 1.5"
125
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500">
 
 
 
 
126
  </div>
127
+ </div>
128
  </div>
129
+ `;
130
+ container.appendChild(div);
131
+ }
132
+ </script>
133
  </body>
134
  </html>