Hugging Face's logo

Spaces:
Docfile
/
Eps
Running

App Files Community
Docfile commited on
Commit
03eb0e3
·
verified ·
1 Parent(s): 34584f8

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +87 -135
templates/index.html CHANGED
@@ -3,174 +3,126 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mariam EPS - Générateur d'évaluation gymnique</title>
7
  <!-- Inclusion de Tailwind via CDN -->
8
  <script src="https://cdn.tailwindcss.com"></script>
9
- <!-- Google Fonts -->
10
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
11
- <script>
12
- tailwind.config = {
13
- theme: {
14
- extend: {
15
- fontFamily: {
16
- sans: ['Inter', 'sans-serif']
17
- },
18
- animation: {
19
- 'fade-in-up': 'fadeInUp 0.8s ease-out',
20
- },
21
- keyframes: {
22
- fadeInUp: {
23
- '0%': { opacity: '0', transform: 'translateY(20px)' },
24
- '100%': { opacity: '1', transform: 'translateY(0)' },
25
- },
26
- },
27
- }
28
- }
29
- }
30
- </script>
31
  <style>
32
- /* Pour les navigateurs qui ne prennent pas en charge Tailwind CSS animations */
33
- .animate-fade-in-up {
34
- animation: fadeInUp 0.8s ease-out;
 
 
 
 
35
  }
36
  </style>
37
  </head>
38
- <body class="bg-gradient-to-r from-blue-100 via-purple-100 to-pink-100 text-gray-800 font-sans">
39
- <!-- Header -->
40
- <header class="bg-white shadow-lg">
41
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
42
- <div class="flex justify-between items-center py-4">
43
- <div class="text-2xl font-bold text-blue-600">Mariam EPS</div>
44
- <nav>
45
- <ul class="flex space-x-4">
46
- <li><a href="#" class="text-gray-700 hover:text-blue-600 transition-colors">Accueil</a></li>
47
- <li><a href="#" class="text-gray-700 hover:text-blue-600 transition-colors">Fonctionnalités</a></li>
48
- <li><a href="#" class="text-gray-700 hover:text-blue-600 transition-colors">Contact</a></li>
49
- </ul>
50
- </nav>
51
- </div>
52
- </div>
53
- </header>
54
-
55
- <!-- Main content -->
56
- <main class="py-10">
57
- <div class="max-w-4xl mx-auto px-4">
58
- <div class="bg-white rounded-lg shadow-2xl p-8 animate-fade-in-up">
59
- <h1 class="text-3xl font-bold text-center text-blue-600 mb-6">Générateur d'évaluation gymnique</h1>
60
- <form method="POST" class="space-y-6">
61
- <!-- Informations d'évaluation -->
62
- <div class="grid grid-cols-1 gap-6">
63
- <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
64
- <div>
65
- <label for="centre_examen" class="block text-sm font-medium text-gray-700">Centre d'examen</label>
66
- <input type="text" id="centre_examen" name="centre_examen" value="Centre d'examen"
67
- class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
68
- </div>
69
- <div>
70
- <label for="type_examen" class="block text-sm font-medium text-gray-700">Type d'examen</label>
71
- <input type="text" id="type_examen" name="type_examen" value="Bac Général"
72
- class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
73
- </div>
74
  </div>
75
- <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
76
- <div>
77
- <label for="serie" class="block text-sm font-medium text-gray-700">Série</label>
78
- <input type="text" id="serie" name="serie" value="Série"
79
- class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
80
- </div>
81
- <div>
82
- <label for="etablissement" class="block text-sm font-medium text-gray-700">Établissement</label>
83
- <input type="text" id="etablissement" name="etablissement" value="Établissement"
84
- class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
85
- </div>
86
  </div>
87
- <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
88
- <div>
89
- <label for="session" class="block text-sm font-medium text-gray-700">Session</label>
90
- <input type="text" id="session" name="session" value="2025"
91
- class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
92
- </div>
93
- <div>
94
- <label for="nom_candidat" class="block text-sm font-medium text-gray-700">Nom du candidat</label>
95
- <input type="text" id="nom_candidat" name="nom_candidat" value="Candidat"
96
- class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
97
- </div>
98
  </div>
99
  </div>
 
100
 
101
- <!-- Éléments techniques -->
102
- <div>
103
- <h2 class="text-2xl font-semibold text-blue-600 mt-6 mb-4">Ajouter des éléments techniques</h2>
104
- <div id="elements_container" class="space-y-6">
105
- <div class="p-4 bg-gray-50 border border-gray-200 rounded-md shadow-sm">
106
- <div class="grid grid-cols-1 gap-4">
107
- <div>
108
- <label class="block text-sm font-medium text-gray-700">Nom de l'élément</label>
109
- <input type="text" name="new_element_name" placeholder="Ex : Saut groupé"
110
- class="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
111
- </div>
112
- <div class="grid grid-cols-2 gap-4">
113
- <div>
114
- <label class="block text-sm font-medium text-gray-700">Catégorie</label>
115
- <input type="text" name="new_element_categorie" placeholder="Ex : A"
116
- class="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
117
- </div>
118
- <div>
119
- <label class="block text-sm font-medium text-gray-700">Points</label>
120
- <input type="text" name="new_element_points" placeholder="Ex : 1.5"
121
- class="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
122
- </div>
123
- </div>
124
  </div>
125
  </div>
126
  </div>
127
- <div class="text-center mt-4">
128
- <button type="button" onclick="addElement()"
129
- class="inline-block bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-6 rounded-full transition duration-300 ease-in-out shadow-lg">
130
- Ajouter un autre élément
131
- </button>
132
- </div>
133
- </div>
134
-
135
- <!-- Bouton de soumission -->
136
- <div class="text-center">
137
- <input type="submit" value="Générer le document"
138
- class="w-full bg-gradient-to-r from-green-400 to-green-600 hover:from-green-500 hover:to-green-700 text-white font-bold py-3 px-4 rounded-full transition duration-300 ease-in-out shadow">
139
  </div>
140
- </form>
141
- </div>
142
- </div>
143
- </main>
144
-
145
- <!-- Footer -->
146
- <footer class="bg-white mt-10 shadow-inner">
147
- <div class="max-w-7xl mx-auto px-4 py-4 text-center text-sm text-gray-600">
148
- &copy; 2025 Mariam EPS. Tous droits réservés.
 
 
 
 
149
  </div>
150
- </footer>
151
 
152
  <script>
 
153
  function addElement() {
154
  const container = document.getElementById("elements_container");
155
  const div = document.createElement("div");
156
- div.className = "p-4 bg-gray-50 border border-gray-200 rounded-md shadow-sm animate-fade-in-up";
157
  div.innerHTML = `
158
- <div class="grid grid-cols-1 gap-4">
159
  <div>
160
  <label class="block text-sm font-medium text-gray-700">Nom de l'élément</label>
161
  <input type="text" name="new_element_name" placeholder="Ex : Saut groupé"
162
- class="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
163
  </div>
164
- <div class="grid grid-cols-2 gap-4">
165
  <div>
166
  <label class="block text-sm font-medium text-gray-700">Catégorie</label>
167
  <input type="text" name="new_element_categorie" placeholder="Ex : A"
168
- class="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
169
  </div>
170
  <div>
171
  <label class="block text-sm font-medium text-gray-700">Points</label>
172
  <input type="text" name="new_element_points" placeholder="Ex : 1.5"
173
- class="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
174
  </div>
175
  </div>
176
  </div>
 
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>