Hugging Face's logo

Spaces:
Docfile
/
Eps
Sleeping

App Files Community
Eps
File size: 9,080 Bytes 
c236e57
9c27152
c236e57
9c27152
 
34584f8
9c27152
 
34584f8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9c27152
34584f8
 
 
 
 
9c27152
 
c236e57
34584f8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9c27152
34584f8
 
 
 
 
 
 
 
 
 
 
9c27152
34584f8
 
 
 
 
 
 
 
 
 
 
9c27152
 
c236e57
34584f8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9c27152
 
 
34584f8
 
 
 
 
 
9c27152
34584f8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9c27152
34584f8
c236e57
9c27152
 
 
 
34584f8
9c27152
34584f8
9c27152
 
 
34584f8
9c27152
34584f8
9c27152
 
 
34584f8
9c27152
9628b82
9c27152
 
34584f8
9628b82
9c27152
9628b82
9c27152
 
 
 
c236e57
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
 
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mariam EPS - Générateur d'évaluation gymnique</title>
  <!-- Inclusion de Tailwind via CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            sans: ['Inter', 'sans-serif']
          },
          animation: {
            'fade-in-up': 'fadeInUp 0.8s ease-out',
          },
          keyframes: {
            fadeInUp: {
              '0%': { opacity: '0', transform: 'translateY(20px)' },
              '100%': { opacity: '1', transform: 'translateY(0)' },
            },
          },
        }
      }
    }
  </script>
  <style>
    /* Pour les navigateurs qui ne prennent pas en charge Tailwind CSS animations */
    .animate-fade-in-up {
      animation: fadeInUp 0.8s ease-out;
    }
  </style>
</head>
<body class="bg-gradient-to-r from-blue-100 via-purple-100 to-pink-100 text-gray-800 font-sans">
  <!-- Header -->
  <header class="bg-white shadow-lg">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center py-4">
        <div class="text-2xl font-bold text-blue-600">Mariam EPS</div>
        <nav>
          <ul class="flex space-x-4">
            <li><a href="#" class="text-gray-700 hover:text-blue-600 transition-colors">Accueil</a></li>
            <li><a href="#" class="text-gray-700 hover:text-blue-600 transition-colors">Fonctionnalités</a></li>
            <li><a href="#" class="text-gray-700 hover:text-blue-600 transition-colors">Contact</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

  <!-- Main content -->
  <main class="py-10">
    <div class="max-w-4xl mx-auto px-4">
      <div class="bg-white rounded-lg shadow-2xl p-8 animate-fade-in-up">
        <h1 class="text-3xl font-bold text-center text-blue-600 mb-6">Générateur d'évaluation gymnique</h1>
        <form method="POST" class="space-y-6">
          <!-- Informations d'évaluation -->
          <div class="grid grid-cols-1 gap-6">
            <div class="grid grid-cols-1 sm:grid-cols-2 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 border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-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 border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
              </div>
            </div>
            <div class="grid grid-cols-1 sm: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 border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-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 border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
              </div>
            </div>
            <div class="grid grid-cols-1 sm: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 border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-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 border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
              </div>
            </div>
          </div>

          <!-- Éléments techniques -->
          <div>
            <h2 class="text-2xl font-semibold text-blue-600 mt-6 mb-4">Ajouter des éléments techniques</h2>
            <div id="elements_container" class="space-y-6">
              <div class="p-4 bg-gray-50 border border-gray-200 rounded-md shadow-sm">
                <div class="grid grid-cols-1 gap-4">
                  <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 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                  </div>
                  <div class="grid grid-cols-2 gap-4">
                    <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 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-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 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="text-center mt-4">
              <button type="button" onclick="addElement()" 
                      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">
                Ajouter un autre élément
              </button>
            </div>
          </div>

          <!-- Bouton de soumission -->
          <div class="text-center">
            <input type="submit" value="Générer le document" 
                   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">
          </div>
        </form>
      </div>
    </div>
  </main>

  <!-- Footer -->
  <footer class="bg-white mt-10 shadow-inner">
    <div class="max-w-7xl mx-auto px-4 py-4 text-center text-sm text-gray-600">
      &copy; 2025 Mariam EPS. Tous droits réservés.
    </div>
  </footer>

  <script>
    function addElement() {
      const container = document.getElementById("elements_container");
      const div = document.createElement("div");
      div.className = "p-4 bg-gray-50 border border-gray-200 rounded-md shadow-sm animate-fade-in-up";
      div.innerHTML = `
        <div class="grid grid-cols-1 gap-4">
          <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 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
          </div>
          <div class="grid grid-cols-2 gap-4">
            <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 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-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 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
          </div>
        </div>
      `;
      container.appendChild(div);
    }
  </script>
</body>
</html>