<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<br>
<div class="text-center" style="color:white">
<h3>hTrixx Framework [Login Form]</h3>
</div>
<hr>
<div class="middle">
<div class="h__card">
<ul class="nav nav-tabs">
<li class="nav-item">
<button onclick="login()" id="login" class="nav-link width50 active">Login</button>
</li>
<li class="nav-item">
<button onclick="register()" id="register" class="nav-link width50 ">Register</button>
</li>
</ul>
<div id="mainLogReg"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
body{
background-color: #2c2c2c;
}
.middle {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.h__card{
width: 320px;
border: 1px solid grey;
background-color: white;
border-radius: 5px;
min-height: 600px;
max-height: 600px;
}
.width50{
width:159px;
text-align:center;
}
.h__card-img {
padding-top:50px;
font-size: 80px;
color:#2c2c2c;
text-align: center;
}
.h__card-inp {
text-align: center;
margin-top: 50px;
}
.h__card-inp input {
width: 250px;
padding: 5px;
margin: 2px;
border: none;
border-bottom: 2px solid gray;
background-color: transparent;
transition: 0.2s all;
}
.h__card-inp button {
position: absolute;
margin-left: -30px;
font-size: 14px;
margin-top: 8px;
background-color: transparent;
border-radius: 3px;
border: none;
opacity: 0.7;
outline: none;
}
.h__card-inp button:hover {
opacity: 0.9;
cursor:pointer;
}
.h__card-inp button:active {
opacity: 1;
text-decoration: none;
outline: none;
}
.h__card-inp input:focus {
outline: none;
text-decoration: none;
border-bottom: 2px solid rgb(73, 23, 255);
}
.h__card-btn {
text-align: center;
}
.h__card-btn button {
margin-top: 30px;
width: 250px;
border: 1px solid rgb(233, 228, 253);
border-bottom: 4px solid grey;
border-radius: 3px 3px 0px 0px;
transition: 0.2s all;
padding: 3px 10px;
}
.h__card-btn button:hover {
cursor:pointer;
border-bottom: 4px solid rgb(73, 23, 255);
color: rgb(73, 23, 255);
}
.another-login-facebook {
font-size: 40px;
padding: 10px;
color: rgb(73, 23, 255);
transition: 0.2s all;
}
.another-login-facebook:hover {
color:rgb(0, 10, 150);
}
.another-login-google {
font-size: 40px;
padding: 10px;
color: rgb(230, 6, 17);
transition: 0.2s all;
}
.another-login-google:hover {
color:rgb(236, 127, 2);
}
button:active{
text-decoration:none;
outline:none;
}
button:hover{
text-decoration:none;
outline:none;
cursor:pointer;
}
var loginForm = '<div class="h__card-img">'+
'<i class="fas fa-users"></i>'+
'</div>'+
'<div class="h__card-inp">'+
'<input id="email" type="email" placeholder="Email">'+
'<br>'+
'<input type="password" placeholder="Password">'+
'<button draggable="true"><i class="fas fa-eye"></i></button>'+
'</div>'+
'<div class="h__card-btn">'+
'<button>Login</button>'+
'<br>'+
'<br>'+
'<p>Or sign in using one of above</p>'+
'<a class="another-login-facebook" href="#"><i class="fab fa-facebook-square"></i></a>'+
'<a class="another-login-google" href="#"><i class="fab fa-google"></i></a>'+
'<br>'+
'<br>'+
'<p>Forgot Password? <a href="#">Reset</a></p>'+
'</div>';
var registerForm = '<div class="h__card-img">'+
'<i class="fas fa-user"></i>'+
'</div>'+
'<div class="h__card-inp">'+
'<input id="email" type="email" placeholder="Email">'+
'<br>'+
'<input type="password" placeholder="Password">'+
'<input type="password" placeholder="Repeat Password">'+
'</div>'+
'<div class="h__card-btn">'+
'<button>Register</button>'+
'<br>'+
'<br>'+
'<p>Or register using one of above</p>'+
'<a class="another-login-facebook" href="#"><i class="fab fa-facebook-square"></i></a>'+
'<a class="another-login-google" href="#"><i class="fab fa-google"></i></a>'+
'<br>'+
'</div>';
var show = false;
$("button").click(function () {
if (show === true) {
show = false;
$('.login-card-inp').find('input:text').each(function () {
$("<input type='password' />").attr({ name: this.name, value: this.value }).insertBefore(this);
}).remove();
} else {
show = true;
$('.login-card-inp').find('input:password').each(function () {
$("<input type='text' />").attr({ name: this.name, value: this.value }).insertBefore(this);
}).remove();
}
});
$(document).ready(function(){
$("#mainLogReg").empty().hide().fadeIn(200);
$("#mainLogReg").append(loginForm);
})
function register(){
$("#mainLogReg").empty().hide().fadeIn(200);
$("#login").removeClass("active");
$("#register").addClass("active");
$("#mainLogReg").append(registerForm);
}
function login(){
$("#mainLogReg").empty().hide().fadeIn(200);
$("#register").removeClass("active");
$("#login").addClass("active");
$("#mainLogReg").append(loginForm);
}
