Merge branch 'master' of git.inpt.fr:tocard-inc/enseeiht/projet-web

This commit is contained in:
Laureηt 2022-04-21 15:38:02 +02:00
commit f056f0c904
No known key found for this signature in database
GPG key ID: D88C6B294FD40994
2 changed files with 199 additions and 0 deletions

127
src/front/test.css Normal file
View file

@ -0,0 +1,127 @@
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
height: 100vh;
width: 100%;
background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
}
.href {
color: #3498db;
cursor: pointer;
}
.href:hover {
text-decoration: underline;
}
.login-btn,
.signup-btn {
background: #fff;
padding: 10px 20px;
font-size: 20px;
font-weight: 500;
color: #3498db;
cursor: pointer;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.show {
display: none;
}
.login-container,
.signup-container{
display: none;
background: #fff;
width: 410px;
padding: 30px;
box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
#show-login:checked ~ .login-container{
display: block;
}
#show-signup:checked ~ .signup-container{
display: block;
}
.login-container .close-btn,
.signup-container .close-btn{
position: absolute;
right: 20px;
top: 15px;
font-size: 18px;
cursor: pointer;
}
.login-container .close-btn:hover,
.signup-container .close-btn:hover{
color: #3498db;
}
.login-container .text,
.signup-container .text{
font-size: 35px;
font-weight: 600;
text-align: center;
}
.login-container form,
.signup-container form{
margin-top: -20px;
}
.login-container form .data,
.signup-container form .data{
height: 45px;
width: 100%;
margin: 40px 0;
}
form .data label{
font-size: 18px;
}
form .data input{
height: 100%;
width: 100%;
padding-left: 10px;
font-size: 17px;
border: 1px solid silver;
}
form .data input:focus{
border-color: #3498db;
border-bottom-width: 2px;
}
form .forgot-pass{
margin-top: -8px;
}
form .forgot-pass a{
color: #3498db;
text-decoration: none;
}
form .forgot-pass a:hover{
text-decoration: underline;
}
form .btn{
margin: 30px 0;
height: 45px;
width: 100%;
position: relative;
overflow: hidden;
}
form .btn button{
height: 100%;
width: 100%;
background: none;
border: none;
color: #fff;
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
}
form .signup-login-link{
text-align: center;
}

72
src/front/test.html Normal file
View file

@ -0,0 +1,72 @@
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Popup Login Form Design | CodingNepal</title>
<link rel="stylesheet" href="test.css">
<script>
function toggleLoginSignup(l, s) {
document.getElementById("show-login").checked = l;
document.getElementById("show-signup").checked = s;
}
</script>
</head>
<body>
<input type="checkbox" id="show-login" class="show">
<label for="show-login" class="login-btn">Login</label>
<input type="checkbox" id="show-signup" class="show">
<label for="show-signup" class="signup-btn">Signup</label>
<div class="login-container">
<label for="show-login" class="close-btn" title="close">X</label>
<div class="text">
Login
</div>
<form action="#">
<div class="data">
<label>Nickname</label>
<input type="text" required>
</div>
<div class="data">
<label>Password</label>
<input type="password" required>
</div>
<div class="forgot-pass">
<a href="#">Forgot Password?</a>
</div>
<div class="btn">
<button type="submit">login</button>
</div>
<div class="signup-login-link">
Not a member? <div class="href" onclick="toggleLoginSignup(false, true)">Signup now</div>
</div>
</form>
</div>
<div class="signup-container">
<label for="show-signup" class="close-btn" title="close">X</label>
<div class="text">
Signup
</div>
<form action="#">
<div class="data">
<label>Nickname</label>
<input type="text" required>
</div>
<div class="data">
<label>Password</label>
<input type="password" required>
</div>
<div class="btn">
<button type="submit">signup</button>
</div>
<div class="signup-login-link">
Already a member? <div class="href" onclick="toggleLoginSignup(true, false)">Login now</div>
</div>
</form>
</div>
</body>
</html>