Added even more JavaScript stuff: FAQ, dark mode and a navbar

2026-06-19 15:30:25 +02:00
parent 75a2305553
commit b3507bc30f
4 changed files with 59 additions and 19 deletions
@@ -7,7 +7,7 @@ body {
    height: 100%;
    background-color: lightblue;
    margin: 0;
-    padding-bottom: 60px;
+    padding-bottom: 65px;
 }

 #nav_barre {
@@ -124,7 +124,7 @@ td {
 #titre_tableau {
    font-size: 25px;
    color: seagreen;
-    padding-left: 200px;
+    padding-left: 10px;
 }

 .form {
@@ -163,7 +163,21 @@ textarea {
    position: fixed;
    bottom: 0;
    width: 100%;
+    border-top: 2px solid;
+    padding-bottom: 10px;
 }
 #statut_horaires {
    font-size: 15px;
 }
+
+body.sombre {
+    background-color: #1d2733;
+    color: white;
+}
+
+.q-reponse {
+    display: none;
+}
+.q-reponse.ouverte {
+    display: block;
+}
@@ -8,9 +8,13 @@
        <html lang="fr">
    </head>
    <body>
-    <p id= titre_tableau>
-        <b>Les développeurs de ce  site</b>
-    </p>
+        <p id= titre_tableau>
+            <b>Les développeurs de ce  site</b>
+        </p>
+        <p>L'équipe compte <span id="nb_membres"></span> personne(s).</p>
+        <input type="search" id="recherche" placeholder="Rechercher un membre…">
+        <button type="button" id="trier">Trier A → Z</button>
+
        <table border=1 class="table">
            <thead>
                <tr>
@@ -19,16 +23,8 @@
                    <th>Parties crées</th>
                </tr>
            </thead>
-            <tr>
-                <td>Mélissa</td>
-                <td>Stagiaire</td>
-                <td>Page contact</td>
-            </tr>
-            <tr>
-                <td>Guillaume</td>
-                <td>Stagiaire</td>
-                <td>Page services</td>
-            </tr>
+            <tbody id="corps_equipe">
+            </tbody>
        </table>

        <div class="form">
@@ -55,9 +51,24 @@

            </form>
        </div>
+
+        <section class="faq">
+            <h3>Questions fréquentes</h3>
+            <div class="question">
+                <button class="q-titre" type="button">Comment suivre ma flotte en temps réel ?</button>
+                <p class="q-reponse">Grâce à notre service de géolocalisation, accessible 24h/24.</p>
+            </div>
+            <div class="question">
+                <button class="q-titre" type="button">Puis-je résilier à tout moment ?</button>
+                <p class="q-reponse">Oui, sans frais, depuis votre espace client.</p>
+            </div>
+        </section>
+
        <footer class="footer">
            stagiaires rpz echoes
+            <button type="button" id="theme"> Mode sombre</button>
        </footer>
+        <script src="../equipe.js"></script>
        <script src="../contact.js"></script>
    </body>
 </html>