96 lines
3.3 KiB
JavaScript
96 lines
3.3 KiB
JavaScript
const zoneMessage = document.getElementById("contacter");
|
||
const compteur = document.getElementById("restant");
|
||
const motCaractere = document.getElementById("mot");
|
||
const boutonEffacer = document.getElementById("effacer");
|
||
const formulaire = document.querySelector("form");
|
||
const badge = document.getElementById("statut_horaires");
|
||
|
||
const nom = document.getElementById("prenom");
|
||
const MAX = 500;
|
||
|
||
function rafraichir_badge() {
|
||
const heure = new Date().getHours();
|
||
|
||
if (heure >= 9 && heure < 18) {
|
||
badge.textContent = "✅ Nous sommes ouverts (9h–18h)";
|
||
badge.style.color = "green";
|
||
} else {
|
||
badge.textContent = "🔴 Fermé — écrivez-nous, on répond dès l'ouverture !";
|
||
badge.style.color = "red";
|
||
}
|
||
}
|
||
setInterval(rafraichir_badge, 60);
|
||
|
||
function rafraichirCompteur() {
|
||
const restant = MAX - zoneMessage.value.length;
|
||
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);
|
||
|
||
boutonEffacer.addEventListener("click", function () {
|
||
zoneMessage.value = "";
|
||
rafraichirCompteur();
|
||
});
|
||
|
||
formulaire.addEventListener("submit", function (evenement) {
|
||
evenement.preventDefault();
|
||
if (zoneMessage.value.trim() === "") {
|
||
alert("Merci d'écrire un message avant d'envoyer !");
|
||
} else {
|
||
const greeting = `merci ${nom.value}, ton message de ${zoneMessage.value.length} caractères a été pris en compte`;
|
||
alert(`${greeting}`);
|
||
}
|
||
});
|
||
|
||
function creerNavbar(pageActive) {
|
||
return `
|
||
<div id="nav_barre" class="shadow">
|
||
<h1>FleetZen</h1>
|
||
<div id="buttons">
|
||
<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("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");
|
||
});
|
||
});
|
||
|
||
const horloge = document.getElementById("horloge");
|
||
|
||
function afficherHeure() {
|
||
const maintenant = new Date();
|
||
horloge.textContent = maintenant.toLocaleTimeString();
|
||
}
|
||
|
||
afficherHeure();
|
||
setInterval(afficherHeure, 1000);
|
||
|
||
zoneMessage.addEventListener("keydown", function (event) {
|
||
if (event.key === "Enter" && event.ctrlKey) {
|
||
formulaire.requestSubmit();
|
||
}
|
||
preventDefault();
|
||
if (event.key === "Escape") {
|
||
zoneMessage.value = "";
|
||
rafraichirCompteur();
|
||
}
|
||
});
|