bandeau + theme terminé (50/50 avec kentin)

remotes/origin/master
Maxime ROCHER 7 months ago
parent eee9b3d8dd
commit 5b0726539b

Before

Width:  |  Height:  |  Size: 152 KiB

After

Width:  |  Height:  |  Size: 152 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 KiB

@ -0,0 +1,10 @@
<svg width="72" height="37" viewBox="0 0 72 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_103_508)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0028 0H18.0281C21.1261 0 24.0511 0.817919 26.6062 2.25434H56.1909C60.5348 2.25434 64.4878 4.08237 67.3538 7.0289C70.2211 9.96965 72 14.0318 72 18.5C72 22.9682 70.2197 27.0303 67.3566 29.974L67.2975 30.0289C64.4372 32.9408 60.5067 34.7457 56.1909 34.7457H26.6119C24.0567 36.1806 21.1303 37 18.0281 37H18.0028C13.0528 37 8.55 34.9176 5.2875 31.5665C2.02641 28.2153 0 23.5896 0 18.5C0 13.4104 2.025 8.78324 5.28609 5.43208L5.41406 5.31214C8.66953 2.03035 13.1189 0 18.0028 0ZM17.1661 7.86416C17.1661 7.58237 17.2786 7.32514 17.4586 7.14162C17.8439 6.74133 18.4809 6.74277 18.8677 7.14017L18.8873 7.16329C19.0624 7.35234 19.16 7.60324 19.1602 7.86416V9.73555C19.1602 10.0173 19.0477 10.2746 18.8677 10.4595C18.4809 10.8569 17.8453 10.8569 17.4586 10.4595C17.3659 10.3645 17.2924 10.2517 17.2422 10.1275C17.192 10.0032 17.1662 9.87006 17.1661 9.73555V7.86416ZM18.0169 12.3685C19.665 12.3685 21.1556 13.0549 22.2356 14.1647C23.3142 15.2746 23.9836 16.8078 23.9836 18.5C23.9836 20.1936 23.3156 21.7254 22.2356 22.8353C21.1556 23.9451 19.665 24.6315 18.0169 24.6315C16.3687 24.6315 14.8781 23.9451 13.7967 22.8353C12.7181 21.7254 12.0487 20.1936 12.0487 18.5C12.0487 16.8064 12.7181 15.2746 13.7967 14.1647C14.8781 13.0564 16.3702 12.3685 18.0169 12.3685ZM10.0955 11.5968C9.90926 11.4044 9.80462 11.1442 9.80437 10.8728C9.80437 10.3092 10.2516 9.84827 10.8014 9.84827C11.0559 9.84827 11.3105 9.94798 11.5045 10.1474L12.7927 11.4711C12.8854 11.566 12.959 11.6788 13.0092 11.8031C13.0594 11.9273 13.0852 12.0606 13.0852 12.1951C13.0852 12.4552 12.9867 12.7182 12.7927 12.9191C12.7003 13.0145 12.5905 13.0901 12.4696 13.1417C12.3487 13.1933 12.219 13.2198 12.0881 13.2197C11.835 13.2197 11.5805 13.1185 11.385 12.9205L10.0955 11.5968ZM7.66547 19.3728C7.39125 19.3728 7.14094 19.2572 6.96234 19.0723C6.57281 18.6763 6.57422 18.0217 6.96094 17.6257L6.98203 17.6055C7.16633 17.4253 7.41107 17.3249 7.66547 17.3251H9.48516C9.61613 17.325 9.74585 17.3514 9.86688 17.4028C9.98791 17.4543 10.0979 17.5297 10.1905 17.6249C10.2831 17.7201 10.3565 17.8331 10.4066 17.9574C10.4566 18.0818 10.4823 18.2151 10.4822 18.3497C10.4822 18.6315 10.3697 18.8887 10.1911 19.0737C10.0037 19.2656 9.74975 19.3732 9.48516 19.3728H7.66547ZM11.2964 26.6387C11.2042 26.7337 11.0946 26.8091 10.9739 26.8604C10.8532 26.9117 10.7239 26.9381 10.5933 26.9379C10.0434 26.9379 9.59625 26.4812 9.59625 25.9147C9.59625 25.6532 9.69187 25.3916 9.88734 25.1908L11.1966 23.8483C11.3807 23.6678 11.6255 23.5674 11.88 23.5679C12.1444 23.5679 12.398 23.6759 12.585 23.868C12.772 24.0601 12.877 24.3208 12.877 24.5925C12.877 24.8512 12.78 25.1127 12.5845 25.3136L11.2964 26.6387ZM18.8648 29.1373C18.8648 29.4176 18.7523 29.6763 18.5723 29.8598C18.187 30.2587 17.55 30.2572 17.1633 29.8598L17.145 29.8381C16.9699 29.6492 16.8722 29.3982 16.8722 29.1373V27.2659C16.8722 26.9827 16.9847 26.7269 17.1633 26.5419C17.5514 26.1445 18.1856 26.1445 18.5737 26.5419C18.7601 26.7342 18.8648 26.9945 18.8648 27.2659V29.1373ZM25.9355 25.4046C26.028 25.4996 26.1014 25.6125 26.1514 25.7367C26.2013 25.861 26.2269 25.9942 26.2266 26.1286C26.2266 26.6907 25.7794 27.1532 25.2309 27.1532C24.9764 27.1532 24.7205 27.0535 24.5264 26.854L23.2383 25.5303C23.0515 25.3378 22.9468 25.0768 22.9472 24.8049C22.9472 24.2413 23.3944 23.7803 23.9428 23.7803C24.1959 23.7803 24.4505 23.8815 24.6459 24.0809L25.9355 25.4046ZM28.3669 17.6272C28.6383 17.6272 28.8914 17.7442 29.07 17.9277C29.4581 18.3251 29.4567 18.9783 29.07 19.3757L29.0489 19.396C28.8645 19.5751 28.6206 19.6753 28.3669 19.6763H26.5458C26.2702 19.6763 26.0198 19.5607 25.8412 19.3757C25.4531 18.9783 25.4531 18.3251 25.8412 17.9277C25.9335 17.8323 26.0433 17.7566 26.1643 17.705C26.2852 17.6534 26.4149 17.627 26.5458 17.6272H28.3669ZM24.7345 10.3613C24.9211 10.1697 25.174 10.0621 25.4377 10.0621C25.9861 10.0621 26.4361 10.5231 26.4361 11.0867C26.4361 11.3483 26.3391 11.6098 26.145 11.8092L24.8344 13.1546C24.6492 13.3333 24.4049 13.433 24.1509 13.4335C23.6011 13.4335 23.1539 12.974 23.1539 12.409C23.1539 12.1488 23.2523 11.8873 23.4464 11.6864L24.7345 10.3613ZM29.5397 4.31069C29.9559 4.66763 30.3567 5.04335 30.7392 5.43786C34.0045 8.78324 36.0309 13.4104 36.0309 18.5C36.0309 23.5896 34.0031 28.2153 30.7434 31.5665C30.3613 31.9587 29.9625 32.3333 29.5481 32.6893H56.1909C59.9639 32.6893 63.3966 31.1127 65.8969 28.5708L65.9419 28.5202C68.4436 25.9494 69.9989 22.4003 69.9989 18.5C69.9989 14.5997 68.4436 11.0506 65.9419 8.47832C63.443 5.90607 59.9892 4.31069 56.1909 4.31069H29.5397ZM18.0028 2.18497H18.0281C26.7595 2.18497 33.9033 9.52746 33.9033 18.5C33.9033 27.474 26.7511 34.815 18.0281 34.815H18.0028C9.27984 34.815 2.12625 27.474 2.12625 18.5C2.12625 9.52746 9.27141 2.18497 18.0028 2.18497Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_103_508">
<rect width="72" height="37" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 4.9 KiB

@ -4,15 +4,16 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wiki Fantasy</title> <title>Wiki Fantasy</title>
<link rel="icon" href="../images/Logo.ico"> <link id="favicon" rel="icon" href="../images/iconeSombre.ico"> <!-- Par défaut sombre -->
<link rel="stylesheet" href="../style/style.css"> <link rel="stylesheet" href="../style/style.css">
<script defer src="../script/theme-toggle.js"></script>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<div class="nav"> <div class="nav">
<img src="../images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false"> <img src="../images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false">
<img src="../images/dark.svg" alt="dark" width="72px" height="37px" onmousedown="return false"> <img id="theme-icon" src="../images/light.svg" alt="toggle theme" width="72px" height="37px" onmousedown="return false" onclick="toggleTheme()">
<img src="../images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false"> <img src="../images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false">
</div> </div>
<div class="logo"> <div class="logo">

@ -4,15 +4,16 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wiki Fantasy</title> <title>Wiki Fantasy</title>
<link rel="icon" href="../images/Logo.ico"> <link id="favicon" rel="icon" href="../images/iconeSombre.ico"> <!-- Par défaut sombre -->
<link rel="stylesheet" href="../styles/style.css"> <link rel="stylesheet" href="../styles/style.css">
<script defer src="../script/theme-toggle.js"></script>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<div class="nav"> <div class="nav">
<img src="../images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false"> <img src="../images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false">
<img src="../images/dark.svg" alt="dark" width="72px" height="37px" onmousedown="return false"> <img id="theme-icon" src="../images/light.svg" alt="toggle theme" width="72px" height="37px" onmousedown="return false" onclick="toggleTheme()">
<img src="../images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false"> <img src="../images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false">
</div> </div>
<div class="logo"> <div class="logo">

@ -0,0 +1,41 @@
// Quand le document est prêt
document.addEventListener("DOMContentLoaded", function() {
const currentTheme = localStorage.getItem('theme') || 'dark'; // Par défaut, sombre
const themeIcon = document.getElementById('theme-icon');
const favicon = document.getElementById('favicon'); // Sélectionne la favicon
// 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
}
});
// 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 (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
}
}

@ -1,3 +1,4 @@
/* Styles généraux */
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -9,6 +10,7 @@ body{
font-family: "Lemon", serif; font-family: "Lemon", serif;
} }
/* Header */
.header { .header {
display: flex; display: flex;
position: fixed; position: fixed;
@ -28,11 +30,6 @@ body{
width: 40%; width: 40%;
} }
.nav img:hover{
filter: invert(59%) sepia(96%) saturate(6733%) hue-rotate(275deg) brightness(112%) contrast(122%) ;
}
.logo { .logo {
display: flex; display: flex;
align-items: center; align-items: center;
@ -49,3 +46,40 @@ body{
gap: 30px; gap: 30px;
width: 40%; width: 40%;
} }
/* Mode sombre */
body.dark-mode {
background-color: #120B1D;
color: #ffffff;
}
body.dark-mode .header {
background-color: #000;
}
body.dark-mode img {
filter: invert(0%);
}
body.dark-mode .nav img:hover {
filter: invert(59%) sepia(96%) saturate(6733%) hue-rotate(275deg) brightness(112%) contrast(122%);
}
/* Mode clair */
body.light-mode {
background-color: #ffffff;
color: #000000;
}
body.light-mode .header {
background-color: #F7F7EB;
}
body.light-mode img {
filter: invert(100%);
}
body.light-mode .nav img:hover {
filter: invert(22%) sepia(6%) saturate(2269%) hue-rotate(193deg) brightness(98%) contrast(106%);
}
Loading…
Cancel
Save