barraux.a
/
MSJSAboulinBarraux
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

changement login css,js

master
kalyax 3 years ago
parent
e5a9b1268a
commit
a63c1449ca
3 changed files with 61 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 28
      login/login.css
  2. 21
      login/login.js
  3. 20
      login/login.php

28
login/login.css
View File

@ -8,6 +8,7 @@ body{
color: white; color: white;
height: 100vh; height: 100vh;
display: flex; display: flex;
justify-content: center;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
@ -18,7 +19,6 @@ body{
text-align: center; text-align: center;
padding: 1em; padding: 1em;
border-radius: 10px; border-radius: 10px;
margin: auto;
} }
h1{ h1{
margin: 0 0 0.4em 0; margin: 0 0 0.4em 0;
@ -36,4 +36,30 @@ input{
margin: 0.4em 0; margin: 0.4em 0;
font-size: 12px; font-size: 12px;
color: rgb(219, 143, 143); color: rgb(219, 143, 143);
}
.buttons{
display: flex;
align-items: center;
gap: 1em;
margin-bottom: 0.8em;
}
.buttons .button{
border: 0;
background-color: #ffffff;
padding: 0.6em;
border-radius: 10px;
transition: 0.2s ease-in-out;
}
.buttons .button:hover{
background-color: #c7c7c7;
transition: 0.2s ease-in-out;
}
.buttons .button.active{
background-color: #002d5e;
color: #ffffff;
transition: 0.2s ease-in-out;
}
.buttons .button.active:hover{
background-color: #02203f;
transition: 0.2s ease-in-out;
} }

21
login/login.js
View File

@ -0,0 +1,21 @@
let current = "login";
function switchPanel(from){
if(from === current) return;
if(from === "login"){
document.getElementsByClassName("login")[0].style.display = "block";
document.getElementsByClassName("register")[0].style.display = "none";
current = "login";
document.getElementsByClassName("button-login")[0].classList.add("active");
document.getElementsByClassName("button-register")[0].classList.remove("active");
}
else{
document.getElementsByClassName("login")[0].style.display = "none";
document.getElementsByClassName("register")[0].style.display = "block";
current = "register";
document.getElementsByClassName("button-login")[0].classList.remove("active");
document.getElementsByClassName("button-register")[0].classList.add("active");
}
}

20
login/login.php
View File

@ -8,36 +8,40 @@
<title>Connexion</title> <title>Connexion</title>
</head> </head>
<body> <body>
<div class="buttons">
<button class="button button-login active" onclick="switchPanel('login')">Connexion</button>
<button class="button button-register" onclick="switchPanel('register')">S'inscrire</button>
</div>
<div class="container login"> <div class="container login">
<h1>Connexion</h1> <h1>Connexion</h1>
<form action="cible_login.php" method="post" id="form"> <form action="cible_login.php" method="post" id="form">
<div class="form-chunck"> <div class="form-chunck">
<label for="username">Utilisateur</label> <label for="username">Utilisateur</label>
<input class="input" type="text" name="username"> <input class="input" type="text" name="username">
<?php if (isset($_GET['error']) AND $_GET['error'] == '2') { echo <<<HTML <?php /*if (isset($_GET['error']) AND $_GET['error'] == '2') { echo <<<HTML
<p class="error">Nom d'utilisateur incorrecte</p> <p class="error">Nom d'utilisateur incorrecte</p>
HTML; } ?> HTML; }*/ ?>
</div> </div>
<div class="form-chunck"> <div class="form-chunck">
<label for="password">Mot de passe</label> <label for="password">Mot de passe</label>
<input class="input" type="password" name="password" id=""> <input class="input" type="password" name="password" id="">
<?php if (isset($_GET['error']) AND $_GET['error'] == '3') { echo <<<HTML <?php /*if (isset($_GET['error']) AND $_GET['error'] == '3') { echo <<<HTML
<p class="error">Mot de passe incorrecte</p> <p class="error">Mot de passe incorrecte</p>
HTML; } ?> HTML; }*/ ?>
</div> </div>
<input class="button" type="submit" value="Se connecter"> <input class="button" type="submit" value="Se connecter">
</form> </form>
</div> </div>
<div class="container signin"> <div class="container register" style="display: none;">
<h1>Toujours pas de compte chez deuzagio ?</h1> <h1>Toujours pas de compte chez deuzagio ?</h1>
<form action="cible_sign-up.php" method="post" id="form"> <form action="cible_sign-up.php" method="post" id="form">
<div class="form-chunck"> <div class="form-chunck">
<label for="username">Utilisateur</label> <label for="username">Utilisateur</label>
<input class="input" type="text" name="username"> <input class="input" type="text" name="username">
<?php if (isset($_GET['error']) AND $_GET['error'] == '1') { echo <<<HTML <?php /*if (isset($_GET['error']) AND $_GET['error'] == '1') { echo <<<HTML
<p class="error">Nom d'utilisateur déjà pris</p> <p class="error">Nom d'utilisateur déjà pris</p>
HTML; } ?> HTML; }*/ ?>
</div> </div>
<div class="form-chunck"> <div class="form-chunck">
<label for="password">Mot de passe</label> <label for="password">Mot de passe</label>
@ -46,5 +50,7 @@
<input class="button" type="submit" value="Se connecter"> <input class="button" type="submit" value="Se connecter">
</form> </form>
</div> </div>
<script src="login.js"></script>
</body> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save