modif a droite et a gauche

pull/21/head
kevin.modejar 5 months ago
parent f0c0fc7ac7
commit bf3cebb5c8

@ -10,7 +10,7 @@ $rep = __DIR__ . '/../';
//BD
$base = 'dbkemondejar';
$login = 'kemondejar';
$mdp = 'Ctvl-21122005';
$mdp = '';
//Vues

@ -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.");
}
}

@ -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(

@ -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>
Loading…
Cancel
Save