File size: 5,452 Bytes
f8bfec6
 
 
de339e9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f8bfec6
de339e9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f8bfec6
de339e9
 
 
 
 
 
 
 
 
 
 
 
f8bfec6
de339e9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f8bfec6
 
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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Générateur Fiche Évaluation Gym</title>
    <style>
        body { font-family: sans-serif; margin: 20px; }
        label { display: block; margin-top: 10px; font-weight: bold; }
        input[type=text], input[type=number] { width: 95%; padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; }
        .element-row { display: flex; align-items: center; margin-bottom: 10px; border: 1px solid #eee; padding: 10px; border-radius: 5px;}
        .element-row input { margin-right: 10px; }
        .element-row input[name="new_element_name"] { flex-grow: 3; } /* More space for name */
        .element-row input[name="new_element_categorie"] { flex-grow: 1; }
        .element-row input[name="new_element_points"] { flex-grow: 1; }
        button { padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 5px; }
        button:hover { background-color: #0056b3; }
        .remove-btn { background-color: #dc3545; margin-left: 10px; }
        .remove-btn:hover { background-color: #c82333; }
        #elements-container { margin-top: 15px; padding-top: 10px; border-top: 1px dashed #ccc; }
        fieldset { border: 1px solid #ddd; padding: 15px; margin-bottom: 20px; border-radius: 5px; }
        legend { font-weight: bold; padding: 0 10px; }
        .format-options label { display: inline-block; margin-right: 15px; font-weight: normal;}
        .format-options input[type=radio] { margin-right: 5px; }
    </style>
</head>
<body>

    <h1>Générateur de Fiche d'Évaluation Gymnastique</h1>

    <form method="post">

        <fieldset>
            <legend>Informations Générales</legend>
            <label for="centre_examen">Centre d'examen:</label>
            <input type="text" id="centre_examen" name="centre_examen" value="Centre d'examen">

            <label for="type_examen">Type d'examen:</label>
            <input type="text" id="type_examen" name="type_examen" value="Bac Général">

            <label for="serie">Série:</label>
            <input type="text" id="serie" name="serie" value="Série">

            <label for="etablissement">Établissement:</label>
            <input type="text" id="etablissement" name="etablissement" value="Établissement">

            <label for="session">Session:</label>
            <input type="number" id="session" name="session" value="2025">

            <label for="nom_candidat">Nom du Candidat:</label>
            <input type="text" id="nom_candidat" name="nom_candidat" value="Nom Prénom">
        </fieldset>

        <fieldset>
            <legend>Éléments Techniques</legend>
            <div id="elements-container">
                <!-- Element rows will be added here by JavaScript -->
                <div class="element-row">
                     <input type="text" name="new_element_name" placeholder="Nom de l'élément" required>
                     <input type="text" name="new_element_categorie" placeholder="Catégorie (A, B...)" required>
                     <input type="number" step="0.1" name="new_element_points" placeholder="Points max" required>
                     <button type="button" class="remove-btn" onclick="removeElement(this)">Supprimer</button>
                 </div>
            </div>
            <button type="button" id="add-element-btn">Ajouter un élément</button>
        </fieldset>

         <fieldset>
            <legend>Format de Sortie</legend>
            <div class="format-options">
                <label>
                    <input type="radio" name="format" value="docx" checked> DOCX
                </label>
                <label>
                    <input type="radio" name="format" value="pdf"> PDF (Nécessite ConvertAPI)
                </label>
            </div>
        </fieldset>

        <button type="submit">Générer le Document</button>

    </form>

    <script>
        const container = document.getElementById('elements-container');
        const addButton = document.getElementById('add-element-btn');

        function createEmptyElementRow() {
            const newRow = document.createElement('div');
            newRow.classList.add('element-row');
            newRow.innerHTML = `
                <input type="text" name="new_element_name" placeholder="Nom de l'élément" required>
                <input type="text" name="new_element_categorie" placeholder="Catégorie (A, B...)" required>
                <input type="number" step="0.1" name="new_element_points" placeholder="Points max" required>
                <button type="button" class="remove-btn" onclick="removeElement(this)">Supprimer</button>
            `;
            container.appendChild(newRow);
        }

        function removeElement(button) {
            // Prevent removing the last row if you want at least one always present
             if (container.children.length > 1) {
                 button.parentElement.remove();
             } else {
                 alert("Vous devez avoir au moins un élément.");
             }
        }

        addButton.addEventListener('click', createEmptyElementRow);

        // Optional: Add a few empty rows initially if needed
        // createEmptyElementRow();
        // createEmptyElementRow();

    </script>

</body>
</html>