First commit

staticfiles/js/functions.js

@@ -0,0 +1,15 @@
+function hide(id) {
+    let htmlChange = document.getElementById('show-' + id);
+    htmlChange.style.display = "none";
+    htmlChange.id = `hide-${id}`;
+    let buttonChange = document.getElementById(id);
+    buttonChange.onclick = function() { show(id); };
+}
+
+function show(id) {
+    let htmlChange = document.getElementById('hide-' + id);
+    htmlChange.style.display = "block";
+    htmlChange.id = `show-${id}`;
+    let buttonChange = document.getElementById(id);
+    buttonChange.onclick = function() { hide(id); };
+}

staticfiles/js/night_day.js

@@ -0,0 +1,82 @@
+const FA_ICON = document.querySelector('.fa-moon');
+const LINK_FA = document.querySelector('.navend > a');
+
+// Fonction pour définir un cookie
+function setCookie(name, value, days) {
+    const expires = new Date();
+    expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
+    document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
+}
+
+// Fonction pour récupérer la valeur d'un cookie
+function getCookie(name) {
+    const cookieName = `${name}=`;
+    const cookies = document.cookie.split(';');
+    for (let i = 0; i < cookies.length; i++) {
+        let cookie = cookies[i].trim();
+        if (cookie.indexOf(cookieName) === 0) {
+            return cookie.substring(cookieName.length, cookie.length);
+        }
+    }
+    return null;
+}
+
+// Charger le thème en fonction du cookie au chargement initial de la page
+document.addEventListener('DOMContentLoaded', () => {
+    const currentTheme = getCookie('theme');
+    if (currentTheme === 'light') {
+        // Charger le thème sombre
+        FA_ICON.classList.add('fa-moon'); 
+        FA_ICON.classList.remove('fa-sun'); 
+        loadDarkTheme();
+    } else {
+        // Par défaut, charger le thème clair
+        FA_ICON.classList.add('fa-sun'); 
+        FA_ICON.classList.remove('fa-moon'); 
+        loadLightTheme();
+    }
+});
+
+// Écouter l'événement clic sur l'icône
+FA_ICON.addEventListener('click', () => {
+    FA_ICON.classList.toggle('fa-moon');
+    FA_ICON.classList.toggle('fa-sun');
+
+    if (FA_ICON.classList.contains('fa-moon')) {
+        // Charger le thème clair
+        loadLightTheme();
+        // Enregistrer le choix du thème dans le cookie
+        setCookie('theme', 'light', 30); // Le cookie expire après 30 jours
+    } else {
+        // Charger le thème sombre
+        loadDarkTheme();
+        // Enregistrer le choix du thème dans le cookie
+        setCookie('theme', 'dark', 30); // Le cookie expire après 30 jours
+    }
+});
+
+// Fonction pour charger le thème clair
+function loadLightTheme() {
+    const existingLink = document.querySelector('link[href*="colors_dark.css"]');
+    if (existingLink) {
+        const newLink = document.createElement('link');
+        newLink.rel = 'stylesheet';
+        newLink.href = '/static/css/colors_light.css';
+        existingLink.parentNode.replaceChild(newLink, existingLink);
+    } else {
+        console.error("Feuille de style 'colors_dark.css' non trouvée ou inaccessible.");
+    }
+}
+
+// Fonction pour charger le thème sombre
+function loadDarkTheme() {
+    const existingLink = document.querySelector('link[href*="colors_light.css"]');
+    if (existingLink) {
+        const newLink = document.createElement('link');
+        newLink.rel = 'stylesheet';
+        newLink.href = '/static/css/colors_dark.css';
+        existingLink.parentNode.replaceChild(newLink, existingLink);
+    } else {
+        console.error("Feuille de style 'colors_light.css' non trouvée ou inaccessible.");
+    }
+}