mode sombre/clair signin

7 months ago · 02b747db2c
parent 11fb04b4c2
commit 02b747db2c
4 changed files with 66 additions and 15 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,7 @@
+{
+    "files.associations": {
+        "stdio.h": "c",
+        "stdbool.h": "c",
+        "tp2.h": "c"
+    }
+}
--- a/pages/signin.html
+++ b/pages/signin.html
@ -7,18 +7,18 @@
    <title>Wiki Fantasy : inscription</title>
    <link id="favicon" rel="icon" href="../images/iconeSombre.ico"> <!-- Par défaut sombre -->
    <link href="https://fonts.googleapis.com/css2?family=Lemon&display=swap" rel="stylesheet">
-
+    <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 src="../images/dark.svg" alt="dark" width="72px" height="37px" onmousedown="return false">
-                <img src="../images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false">
+                <a href="favorite.html"><img src="../images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false"></a>
+                <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" >
+                <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">
@ -26,7 +26,7 @@
        </div>
    </div>
    <h1>▶ S'inscrire ◀</h1>
-
+    <form action="../script/signin.php" method="post">
    <div class="signin">
        <div class="DivId">
            <p>Identifiant *</p>
@ -57,5 +57,6 @@
            <input type="submit" class="btn" value="Inscription" />
        </div>
    </div>
+    </form>
 </body>
 </html>
--- a/script/signin.php
+++ b/script/signin.php
@ -0,0 +1,3 @@
+<?php
+
+?>
--- a/styles/styleSignin.css
+++ b/styles/styleSignin.css
@ -2,13 +2,10 @@

 h1{
    margin-top: 10%;
-	color : white;
    text-align: center;
-
 }

 .signin{
-    background-color: #000000;
    border-radius: 25px;
    display: grid;
    grid-template-columns: 2fr 1fr;
@ -20,7 +17,6 @@ h1{
 }

 p{
-    color :white;
    font-size: 20px;
    margin-top: 7%;
    margin-bottom: 2%;
@ -60,21 +56,65 @@ p{
    margin-left: 1%;
    padding-left: 3%;
    margin-top: -1%;
-    border: none;
    font-size: 15px;
 }

 .btn{
-    background: linear-gradient(90deg, #6100ff 0%, #1b0048 100%);
    margin-top: 10%;
    width:75%;
    font-size: 20px;
    padding: 2%;
    border-radius: 25px;
-    color : white;
    border: none;
    font-family: "Lemon", serif;
 }

+/*Dark mode*/
+
+body.dark-mode .signin{
+    background-color: #000000;
+    border: 2px solid transparent;
+}
+
+body.dark-mode .h1{
+    color : white;
+}
+
+body.dark-mode .p{
+    color : white;
+}
+
+body.dark-mode .btn{
+    background: linear-gradient(90deg, #6100ff 0%, #1b0048 100%);
+    color : white;
+}
+
+body.dark-mode .champ{
+    background-color: #ffffff;
+    border: 2px solid #ffffff;
+}
+
+/*Light*/

+body.light-mode .signin{
+    background-color: #ffffff;
+    border: 2px solid #000000;
+}

+body.light-mode .h1{
+    color : #000000;
+}
+
+body.light-mode .p{
+    color : #000000;
+}
+
+body.light-mode .btn{
+    background: linear-gradient(90deg, #caffde 0%, #b7c8ff 100%);
+    color : #000000;
+}
+
+body.light-mode .champ{
+    background-color: #fff1f1;
+    border: 1px solid #000000;
+}