ENSEEIHT/projet-application-web
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

refactor!: simpler front-end

Browse source
This commit is contained in:
Laureηt 2022-05-27 15:29:16 +02:00
parent 698c2cc2dd
commit cb412148e5
No known key found for this signature in database
GPG key ID: D88C6B294FD40994
3 changed files with 63 additions and 211 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
src/main/webapp/css/login-signup.css
View file

@ -1,118 +1,28 @@
.login-container, .login,
.signup-container { .signup {
--width: 410px;
display: none; display: none;
visibility: visible;
background: #fff; background: #fff;
width: var(--width);
margin: 30px; padding: 2rem;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); width: 40rem;
position: absolute; position: absolute;
left: calc(50% - var(--width) / 2); left: 50%;
top: 30%; top: 30%;
padding: 20px; margin-left: -20rem;
border-radius: 10px;
box-shadow: 0px 0px 5px #000; font-size: 25px;
text-align: center;
} }
#show-login:checked ~ .login-container { .close {
display: block;
}
#show-signup:checked ~ .signup-container {
display: block;
}
.login-container .close-btn,
.signup-container .close-btn {
position: absolute; position: absolute;
right: 20px; right: 20px;
top: 15px; top: 15px;
font-size: 18px; font-size: 18px;
}
.login > button,
.signup > button {
cursor: pointer; 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;
border-radius: 45px;
}
form .btn:hover {
box-shadow: 0px 0px 5px 5px #3333;
}
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;
}

32
src/main/webapp/css/title-bar.css
View file

@ -1,40 +1,22 @@
.title-bar { nav {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
background: #3333; background: #3333;
height: 100px; height: 5rem;
}
.title {
display: flex;
align-items: center;
font-size: 50px;
}
.title img {
width: 80%;
height: 80%;
border-radius: 10%;
margin: 10%;
} }
.profil { .profil {
display: flex; display: flex;
flex-direction: row-reverse;
align-items: center; align-items: center;
gap: 1rem;
margin: 0 1rem;
} }
.login-btn, .profil > button {
.signup-btn,
.menu-btn {
background: #fff; background: #fff;
margin: 10% 10px;
padding: 10% 10px;
color: #3498db; color: #3498db;
height: 60%;
width: 5rem;
cursor: pointer; cursor: pointer;
} }
.show {
display: none;
}

120
src/main/webapp/index.html
View file

@ -7,110 +7,70 @@
<link rel="stylesheet" href="css/title-bar.css" /> <link rel="stylesheet" href="css/title-bar.css" />
<link rel="stylesheet" href="css/login-signup.css" /> <link rel="stylesheet" href="css/login-signup.css" />
<link rel="stylesheet" href="css/pixels.css" /> <link rel="stylesheet" href="css/pixels.css" />
<script type="text/javascript" src="pixels.js"></script> <!-- <script type="text/javascript" src="pixels.js"></script> -->
</head> </head>
<body> <body>
<div class="title-bar"> <nav>
<div class="title"><img src="logo.png" />Pixels</div> <img src="logo.png" />
<div class="profil">
<input type="checkbox" id="show-login" class="show" /> <span class="profil">
<div onclick="toggleLoginSignup(true, false)" class="login-btn"> <button onclick="toggleLogin()">Login</button>
<button onclick="toggleSignup()">Signup</button>
<div class="login">
<button onclick="toggleLogin()" class="close">X</button>
Login Login
</div>
<input type="checkbox" id="show-signup" class="show" />
<div
onclick="toggleLoginSignup(false, true)"
class="signup-btn"
>
Signup
</div>
<div class="login-container">
<div
onclick="toggleLoginSignup(false, false)"
class="close-btn"
title="close"
>
X
</div>
<div class="text">Login</div>
<form action="api/user/login" method="post"> <form action="api/user/login" method="post">
<div class="data"> <div>
<label>Nickname</label> <label>Nickname</label>
<input type="text" name="username" required /> <input type="text" name="username" required />
</div> </div>
<div class="data">
<div>
<label>Password</label> <label>Password</label>
<input type="password" name="password" required /> <input type="password" name="password" required />
</div> </div>
<div class="forgot-pass">
<a href="#">Forgot Password?</a> <button type="submit">Login</button>
</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> </form>
</div> </div>
<div class="signup-container"> <div class="signup">
<div <button onclick="toggleSignup()" class="close">X</button>
onclick="toggleLoginSignup(false, false)"
class="close-btn" Signup
title="close"
>
X
</div>
<div class="text">Signup</div>
<form action="api/user/signup" method="post"> <form action="api/user/signup" method="post">
<div class="data"> <div>
<label>Nickname</label> <label>Nickname</label>
<input type="text" name="username" required /> <input type="text" name="username" required />
</div> </div>
<div class="data">
<div>
<label>Password</label> <label>Password</label>
<input type="password" name="password" required /> <input type="password" name="password" required />
</div> </div>
<div class="btn">
<button type="submit">signup</button> <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> </form>
</div> </div>
</div> </span>
</div> </nav>
<div class="pixel-container"> <table id="pixelTable">
<table id="pixelTable"> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
<tr></tr> </table>
</table>
</div>
</body> </body>
</html> </html>