refactor!: simpler front-end

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

View file

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

View file

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

View file

@ -7,98 +7,59 @@
<link rel="stylesheet" href="css/title-bar.css" />
<link rel="stylesheet" href="css/login-signup.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>
<body>
<div class="title-bar">
<div class="title"><img src="logo.png" />Pixels</div>
<div class="profil">
<input type="checkbox" id="show-login" class="show" />
<div onclick="toggleLoginSignup(true, false)" class="login-btn">
<nav>
<img src="logo.png" />
<span class="profil">
<button onclick="toggleLogin()">Login</button>
<button onclick="toggleSignup()">Signup</button>
<div class="login">
<button onclick="toggleLogin()" class="close">X</button>
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">
<div class="data">
<div>
<label>Nickname</label>
<input type="text" name="username" required />
</div>
<div class="data">
<div>
<label>Password</label>
<input type="password" name="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>
<button type="submit">Login</button>
</form>
</div>
<div class="signup-container">
<div
onclick="toggleLoginSignup(false, false)"
class="close-btn"
title="close"
>
X
</div>
<div class="text">Signup</div>
<div class="signup">
<button onclick="toggleSignup()" class="close">X</button>
Signup
<form action="api/user/signup" method="post">
<div class="data">
<div>
<label>Nickname</label>
<input type="text" name="username" required />
</div>
<div class="data">
<div>
<label>Password</label>
<input type="password" name="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>
<button type="submit">Signup</button>
</form>
</div>
</div>
</div>
</span>
</nav>
<div class="pixel-container">
<table id="pixelTable">
<tr></tr>
<tr></tr>
@ -111,6 +72,5 @@
<tr></tr>
<tr></tr>
</table>
</div>
</body>
</html>