<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.css">
<div class="container">
<div class="row">
<div class="com-md-12">
<div class="notification login-alert">
Please Enter Your Username And Password!
</div>
<div class="notification notification-success logged-out">
You logged out successfully!
</div>
<div class="well welcome-text">
Hello, to access our app please <button class="btn btn-default btn-login">Log in</button> or <button class="btn btn-default btn-register" disabled="disabled">Register</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="well login-box">
<form action="">
<legend>Login</legend>
<div class="form-group">
<label for="username-email">E-mail or Username</label>
<input value='' id="username-email" placeholder="E-mail or Username" type="text" class="form-control" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input id="password" value='' placeholder="Password" type="text" class="form-control" />
</div>
<div class="form-group text-center">
<button class="btn btn-danger btn-cancel-action">Cancel</button>
<input type="submit" class="btn btn-success btn-login-submit" value="Login" />
</div>
</form>
</div>
<div class="logged-in well">
<h1>You are loged in! <div class="pull-right"><button class="btn-logout btn btn-danger"><span class="glyphicon glyphicon-off"></span> Logout</button></div></h1>
</div>
</div>
</div>
</div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);
body {
background: -webkit-linear-gradient(90deg, #FF512F 10%, #DD2476 90%);
background: -moz-linear-gradient(90deg, #FF512F 10%, #DD2476 90%);
background: -ms-linear-gradient(90deg, #FF512F 10%, #DD2476 90%);
background: -o-linear-gradient(90deg, #FF512F 10%, #DD2476 90%);
background: linear-gradient(90deg, #FF512F 10%, #DD2476 90%);
font-family: 'Open Sans', sans-serif!important;
}
.well{
background-color:#fff!important;
border-radius:0!important;
border:none!important;
}
.well.login-box {
width:300px;
margin:0 auto;
display:none;
}
.well.login-box legend {
font-size:26px;
text-align:center;
font-weight:300;
}
.well.login-box label {
font-weight:300;
font-size:16px;
}
.well.login-box input[type="text"] {
box-shadow:none;
border-color:#ddd;
border-radius:0;
}
.well.welcome-text{
font-size:21px;
}
/* Notifications */
.notification{
position:fixed;
top: 20px;
right:0;
background-color:#FF4136;
padding: 20px;
color: #fff;
font-size:21px;
display:none;
}
.notification-success{
background-color:#3D9970;
}
.notification-show{
display:block!important;
}
/*Loged in*/
.logged-in{
display:none;
}
.logged-in h1{
margin:0;
font-weight:300;
}
function varticalCenterStuff() {
var windowHeight = $(window).height();
var loginBoxHeight = $('.login-box').innerHeight();
var welcomeTextHeight = $('.welcome-text').innerHeight();
var loggedIn = $('.logged-in').innerHeight();
var mathLogin = (windowHeight / 2) - (loginBoxHeight / 2);
var mathWelcomeText = (windowHeight / 2) - (welcomeTextHeight / 2);
var mathLoggedIn = (windowHeight / 2) - (loggedIn / 2);
$('.login-box').css('margin-top', mathLogin);
$('.welcome-text').css('margin-top', mathWelcomeText);
$('.logged-in').css('margin-top', mathLoggedIn);
}
$(window).resize(function () {
varticalCenterStuff();
});
varticalCenterStuff();
// awesomeness
$('.btn-login').click(function(){
$(this).parent().fadeOut(function(){
$('.login-box').fadeIn();
})
});
$('.btn-cancel-action').click(function(e){
e.preventDefault();
$(this).parent().parent().parent().fadeOut(function(){
$('.welcome-text').fadeIn();
})
});
$('.btn-login-submit').click(function(e){
e.preventDefault();
var element = $(this).parent().parent().parent();
var usernameEmail = $('#username-email').val();
var password = $('#password').val();
if(usernameEmail == '' || password == ''){
// wigle and show notification
// Wigle
var element = $(this).parent().parent().parent();
$(element).addClass('animated rubberBand');
$(element).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(element).removeClass('animated rubberBand');
});
// Notification
// reset
$('.notification.login-alert').removeClass('bounceOutRight notification-show animated bounceInRight');
// show notification
$('.notification.login-alert').addClass('notification-show animated bounceInRight');
$('.notification.login-alert').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
setTimeout(function(){
$('.notification.login-alert').addClass('animated bounceOutRight');
}, 2000);
});
}else{
$(element).fadeOut(function(){
$('.logged-in').fadeIn();
});
}//endif
});
$('.btn-logout').click(function(){
$('.logged-in').fadeOut(function(){
$('.welcome-text').fadeIn();
// Notification
$('.notification.logged-out').removeClass('bounceOutRight notification-show animated bounceInRight');
// show notification
$('.notification.logged-out').addClass('notification-show animated bounceInRight');
$('.notification.logged-out').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
setTimeout(function(){
$('.notification.logged-out').addClass('animated bounceOutRight');
}, 2000);
});
});
});