From 34106393226d7889906708d9c464044e39ad41b9 Mon Sep 17 00:00:00 2001
From: Bastien Hohler <bastien.hohler@telecomnancy.eu>
Date: Wed, 3 Nov 2021 22:27:27 +0100
Subject: [PATCH] Style et page connexion
---
css/style.css | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++
js/main.js | 35 ++++++++++++++++++++++++++++-
signIn.html | 54 +++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 149 insertions(+), 1 deletion(-)
create mode 100644 signIn.html
diff --git a/css/style.css b/css/style.css
index eb7ed18..9690913 100644
--- a/css/style.css
+++ b/css/style.css
@@ -583,3 +583,64 @@ td{
.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;
+}
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index c63ac12..8d87961 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 0000000..75794ab
--- /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
--
GitLab