From bf3cebb5c8a94f17b5341d576ae2f9f73a5192b4 Mon Sep 17 00:00:00 2001
From: "kevin.modejar" <mondejar.kevin.2005@gmail.com>
Date: Tue, 19 Nov 2024 08:51:49 +0100
Subject: [PATCH] modif a droite et a gauche

---
 config/config.php                          |  2 +-
 public/script/theme-toggle-double-param.js | 51 ++++++++++++++++++++++
 vue/quote.php                              |  2 +-
 vue/templates/bandeau.html.twig            | 10 ++---
 4 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 public/script/theme-toggle-double-param.js

diff --git a/config/config.php b/config/config.php
index f6c30ee..1badb04 100644
--- a/config/config.php
+++ b/config/config.php
@@ -10,7 +10,7 @@ $rep = __DIR__ . '/../';
 //BD
 $base  = 'dbkemondejar';
 $login = 'kemondejar';
-$mdp   = 'Ctvl-21122005';
+$mdp   = '';
 
 
 //Vues
diff --git a/public/script/theme-toggle-double-param.js b/public/script/theme-toggle-double-param.js
new file mode 100644
index 0000000..f651750
--- /dev/null
+++ b/public/script/theme-toggle-double-param.js
@@ -0,0 +1,51 @@
+// Quand le document est prêt
+document.addEventListener("DOMContentLoaded", function() {
+    const themeIcon = document.getElementById('theme-icon');
+    const favicon = document.getElementById('favicon'); // Sélectionne la favicon
+
+    // Vérifie si les éléments existent bien avant d'y accéder
+    if (themeIcon && favicon) {
+        const currentTheme = localStorage.getItem('theme') || 'dark'; // Par défaut, sombre
+
+        // Applique le bon thème au chargement de la page
+        if (currentTheme === 'light') {
+            document.body.classList.remove('dark-mode');
+            document.body.classList.add('light-mode');
+            themeIcon.src = '../images/light.svg'; // Affiche l'icône pour basculer vers le mode sombre
+            favicon.href = '../images/iconeClaire.ico'; // Favicon pour le mode clair
+        } else {
+            document.body.classList.add('dark-mode');
+            themeIcon.src = '../images/dark.svg'; // Affiche l'icône pour basculer vers le mode clair
+            favicon.href = '../images/iconeSombre.ico'; // Favicon pour le mode sombre
+        }
+    } else {
+        console.error("Élément(s) manquant(s) : icône du thème ou favicon.");
+    }
+});
+
+// Fonction pour basculer entre les thèmes
+function toggleTheme() {
+    const body = document.body;
+    const themeIcon = document.getElementById('theme-icon');
+    const favicon = document.getElementById('favicon'); // Sélectionne la favicon
+
+    if (themeIcon && favicon) {
+        if (body.classList.contains('dark-mode')) {
+            // Si on est en mode sombre, on passe en mode clair
+            body.classList.remove('dark-mode');
+            body.classList.add('light-mode');
+            themeIcon.src = '../images/light.svg'; // Change vers le logo sombre
+            favicon.href = '../images/iconeClaire.ico'; // Favicon pour le mode clair
+            localStorage.setItem('theme', 'light'); // Enregistre le thème clair dans localStorage
+        } else {
+            // Sinon, on repasse en mode sombre
+            body.classList.remove('light-mode');
+            body.classList.add('dark-mode');
+            themeIcon.src = '../images/dark.svg'; // Change vers le logo clair
+            favicon.href = '../images/iconeSombre.ico'; // Favicon pour le mode sombre
+            localStorage.setItem('theme', 'dark'); // Enregistre le thème sombre dans localStorage
+        }
+    } else {
+        console.error("Impossible de trouver l'icône ou le favicon.");
+    }
+}
diff --git a/vue/quote.php b/vue/quote.php
index 888c307..01fc624 100644
--- a/vue/quote.php
+++ b/vue/quote.php
@@ -5,7 +5,7 @@
     echo $twig->render('head.html.twig', array(
         'title' => "Quote",
         'style' =>  "../public/styles/styleQuote.css",
-        'scripts' => array("../public/script/theme-toggle.js")
+        'scripts' => array("../public/script/theme-toggle-double-param.js")
     ));
     echo $twig->render('bandeau.html.twig');
     echo $twig->render('quote.html', array(
diff --git a/vue/templates/bandeau.html.twig b/vue/templates/bandeau.html.twig
index 5e0cb7d..0e02e41 100644
--- a/vue/templates/bandeau.html.twig
+++ b/vue/templates/bandeau.html.twig
@@ -1,14 +1,14 @@
 <div class="header">
     <div class="nav">
-        <a href="{{ racine }}/favorite"><img src="images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false"></a>
-        <img id="theme-icon" src="images/dark.svg" alt="toggle theme" width="72px" height="37px" onmousedown="return false" onclick="toggleTheme()">
-        <a href="{{ racine }}/quiz"><img src="images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false"></a>
+        <a href="{{ racine }}/favorite"><img src="{{ racine }}/images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false"></a>
+        <img id="theme-icon" src="{{ racine }}/images/dark.svg" alt="toggle theme" width="72px" height="37px" onmousedown="return false" onclick="toggleTheme()">
+        <a href="{{ racine }}/quiz"><img src="{{ racine }}/images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false"></a>
  
     </div>
     <div class="logo">
-        <a href="{{ racine }}/"><img src="images/WIKIFANTASY.png" alt="Logo" width="227px" height="106px" onmousedown="return false"></a>
+        <a href="{{ racine }}/"><img src="{{ racine }}/images/WIKIFANTASY.png" alt="Logo" width="227px" height="106px" onmousedown="return false"></a>
     </div>
     <div class="user">
-        <a href="{{ racine }}/login"><img src="images/user_dark.png" alt="user" width="70px" height="70px" onmousedown="return false"></a>
+        <a href="{{ racine }}/login"><img src="{{ racine }}/images/user_dark.png" alt="user" width="70px" height="70px" onmousedown="return false"></a>
     </div>
 </div>
\ No newline at end of file