theme sombre + bandeau 100% terminé (50/50 avec kentin)

7 months ago · f25f3f47f6
parent 57fa554238
commit f25f3f47f6
2 changed files with 109 additions and 0 deletions
--- a/pages/favorite.html
+++ b/pages/favorite.html
@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Favorites</title>
+    <link id="favicon" rel="icon" href="../images/iconeSombre.ico"> <!-- Par défaut sombre -->
+    <link rel="stylesheet" href="../styles/style.css">
+    <script defer src="../script/theme-toggle.js"></script>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <div class="nav">
+                <img src="../images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false">
+                <img id="theme-icon" src="../images/light.svg" alt="toggle theme" width="72px" height="37px" onmousedown="return false" onclick="toggleTheme()">
+                <a href="quiz.html"><img src="../images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false"></a>
+            </div>
+            <div class="logo">
+                <img src="../images/WIKIFANTASY.png" alt="Logo" width="227px" height="106px" onmousedown="return false">
+            </div>
+            <div class="user">
+                <img src="../images/user_dark.png" alt="user" width="70px" height="70px" onmousedown="return false">
+            </div>
+        </div>
+    </div>
+    <h1>Wiki Fantasy</h1>
+</body>
+</html>
--- a/style/style.css
+++ b/style/style.css
@ -0,0 +1,80 @@
+/* Styles généraux */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Header */
+.header {
+  display: flex;
+  position: fixed;
+  background-color: #000000;
+  right: 0;
+  top: 0;
+  width: 100%;
+  text-align: center;
+  padding: 20px;
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  vertical-align: center;
+  gap: 30px;
+  width: 40%;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20%;
+}
+
+.user {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  vertical-align: center;
+  gap: 30px;
+  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%);
+}