feat: title bar

This commit is contained in:
gdamms 2022-04-22 16:16:47 +02:00
parent f4bfbbe28e
commit 641a879fac
8 changed files with 279 additions and 199 deletions

103
src/front/index.html Normal file
View file

@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Popup Login Form Design | CodingNepal</title>
<link rel="stylesheet" href="utils.css">
<link rel="stylesheet" href="title-bar.css">
<link rel="stylesheet" href="login-signup.css">
<link rel="stylesheet" href="pixels.css">
<script>
function toggleLoginSignup(l, s) {
document.getElementById("show-login").checked = l;
document.getElementById("show-signup").checked = s;
}
</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">
<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>
</div>
</div>
<table>
<tr>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
</tr>
<tr>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
</tr>
<tr>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
</tr>
</table>
</body>
</html>

110
src/front/login-signup.css Normal file
View file

@ -0,0 +1,110 @@
.login-container,
.signup-container {
--width: 410px;
display: none;
visibility: visible;
background: #fff;
width: var(--width);
margin: 30px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
position: absolute;
left: calc(50% - var(--width) / 2);
top: 30%;
}
#show-login:checked~.login-container {
display: flex;
}
#show-signup:checked~.signup-container {
display: flex;
}
.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;
}

BIN
src/front/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

6
src/front/pixels.css Normal file
View file

@ -0,0 +1,6 @@
.pixel
{
background: #0f0;
width: 10px;
height: 10px;
}

View file

@ -1,127 +0,0 @@
* {
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;
}

View file

@ -1,72 +0,0 @@
<!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>

40
src/front/title-bar.css Normal file
View file

@ -0,0 +1,40 @@
.title-bar {
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%;
}
.profil {
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.login-btn,
.signup-btn {
background: #fff;
margin: 10% 10px;
padding: 10% 10px;
font-size: auto;
color: #3498db;
cursor: pointer;
}
.show {
display: none;
}

20
src/front/utils.css Normal file
View file

@ -0,0 +1,20 @@
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
}
.href {
color: #3498db;
cursor: pointer;
}
.href:hover {
text-decoration: underline;
}