Added even more JavaScript stuff: FAQ, dark mode and a navbar
This commit is contained in:
+18
-4
@@ -21,6 +21,7 @@ function rafraichirCompteur() {
|
||||
compteur.textContent = restant;
|
||||
compteur.style.color = restant < 50 ? "red" : "black";
|
||||
motCaractere.textContent = restant <= 1 ? "caractère" : "caractères";
|
||||
localStorage.setItem("brouillon", zoneMessage.value);
|
||||
}
|
||||
|
||||
zoneMessage.addEventListener("input", rafraichirCompteur);
|
||||
@@ -37,16 +38,29 @@ formulaire.addEventListener("submit", function (evenement) {
|
||||
}
|
||||
});
|
||||
|
||||
function creerNavbar() {
|
||||
function creerNavbar(pageActive) {
|
||||
return `
|
||||
<div id="nav_barre" class="shadow">
|
||||
<h1>FleetZen</h1>
|
||||
<div id="buttons">
|
||||
<button class="instyled">contact</button>
|
||||
<a href="services.html"><button class="styled">services</button></a>
|
||||
<button class="${pageActive === "contact" ? "instyled" : "styled"}">contact</button>
|
||||
<a href="services.html"><button class="${pageActive === "services" ? "instyled" : "styled"}">services</button></a>
|
||||
<a href="../index.html"><button class="styled"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-corner-down-left-icon lucide-corner-down-left"><path d="M20 4v7a4 4 0 0 1-4 4H4"/><path d="m9 10-5 5 5 5"/></svg>retour</button></a>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
document.body.insertAdjacentHTML("afterbegin", creerNavbar());
|
||||
document.body.insertAdjacentHTML("afterbegin", creerNavbar("contact"));
|
||||
|
||||
document.getElementById("theme").addEventListener("click", function () {
|
||||
document.body.classList.toggle("sombre");
|
||||
});
|
||||
|
||||
const titres = document.querySelectorAll(".q-titre");
|
||||
|
||||
titres.forEach(function (titre) {
|
||||
titre.addEventListener("click", function () {
|
||||
const reponse = titre.nextElementSibling;
|
||||
reponse.classList.toggle("ouverte");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -42,6 +42,7 @@ h1 {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-top: 2px solid;
|
||||
}
|
||||
#nav_barre {
|
||||
display: flex;
|
||||
|
||||
+16
-2
@@ -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;
|
||||
}
|
||||
|
||||
+24
-13
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user