diff --git a/css/style.css b/css/style.css index 64e51c022e2a178b373cf1aa6993c4a5f6669ce6..eddb38552e62cc0ae549b20b52fd44f2052baf29 100644 --- a/css/style.css +++ b/css/style.css @@ -589,3 +589,66 @@ html body .content #list-toggle:checked + label::after { .bg-white { background-color: white; } + +#hidden1 { + height: 0; + overflow: hidden; + transition: height 0.8s ease; +} + +#hidden2 { + height: 0; + overflow: hidden; + transition: height 0.8s ease; +} + +#button_prod, +#button_gerant, +#button_login { + border-radius: 20px; + border: 1px solid #ff4b2b; + background-color: #ff4b2b; + color: white; + font-size: 12px; + font-weight: bold; + padding: 12px 45px; + letter-spacing: 1px; + text-transform: uppercase; + transition: transform 80ms ease-in; + width: 300px; +} + +.button_login { + border-radius: 20px; + border: 1px solid green; + background-color: green; + color: white; + font-size: 12px; + font-weight: bold; + padding: 12px 45px; + letter-spacing: 1px; + text-transform: uppercase; + transition: transform 80ms ease-in; +} + +.login { + text-align: center; + margin-top: 10px; +} + +.formlogin { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 20px; + justify-content: space-evenly; + font-size: 20px; +} + +form input { + margin: 10px; + border-radius: 10px; + width: 200px; + height: 30px; + text-align: center; +} diff --git a/js/main.js b/js/main.js index c63ac12b31c99423ffe4ef948c4d16c7621d7c13..8d87961b77ec64031fcf4c64dc4755ae3e2e57f6 100644 --- a/js/main.js +++ b/js/main.js @@ -4,4 +4,37 @@ function plus(input){ function minus(input){ input.value = Math.max(parseInt(input.value) - 1, 0) -} \ No newline at end of file +} + +but1 = document.getElementById("button_prod"); +but2 = document.getElementById("button_gerant"); +but1.clicked = false; +but2.clicked = false; + +but1.onclick = function() { + this.clicked = !this.clicked; + let target = document.getElementById('hidden1'); + if (this.clicked) { + if (but2.clicked) { + but2.click(); + } + target.style.height = target.scrollHeight+"px"; + } + else { + target.style.height = 0; + } +} + +but2.onclick = function() { + this.clicked = !this.clicked; + let target = document.getElementById('hidden2'); + if (this.clicked) { + if (but1.clicked) { + but1.click(); + } + target.style.height = target.scrollHeight+"px"; + } + else { + target.style.height = 0; + } + } \ No newline at end of file diff --git a/signIn.html b/signIn.html new file mode 100644 index 0000000000000000000000000000000000000000..75794abcda660181634c5a92d2f4172e98653a03 --- /dev/null +++ b/signIn.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html lang="fr" dir="ltr"> + +<head> + <meta charset="utf-8"> + <link rel="stylesheet" href="./css/style.css"> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"> + <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" + integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" /> + <script src="./js/main.js" defer></script> + <title>Login</title> +</head> + +<body> + <header> + <nav> + <label class="logo">LeHangar</label> + </nav> + </header> + <h1 class="titreListe">Connexion</h1> + <div class="login"> + <h3> Vous êtes...</h3> + <button id='button_prod'> Producteur </button> + <button id='button_gerant'> Gérant de coopérative </button> + </div> + + <form id='hidden1' action="authentication.php" method="post"> + + <div class="formlogin"> + <label for="uname"><b>Username</b></label> + <input type="text" placeholder="Enter Username" name="uname" required> + + <label for="psw"><b>Password</b></label> + <input type="password" placeholder="Enter Password" name="psw" required> + + <button class="button_login" type="submit">Login</button> + </div> + </form> + + <form id='hidden2' action="authentication.php" method="post"> + + <div class="formlogin"> + <label for="uname"><b>Username</b></label> + <input type="text" placeholder="Enter Username" name="uname" required> + + <label for="psw"><b>Password</b></label> + <input type="password" placeholder="Enter Password" name="psw" required> + + <button class="button_login" type="submit">Login</button> + </div> + </form> +</body> + +</html> \ No newline at end of file