CitarUsuario: john.doe@gmail.com
Contraseña: abc123
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/vendor/normalize.css"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="css/main.css"/>
<title>Login</title>
</head>
<body>
<section class="main">
<form id="loginFrm" class="form">
<figure class="tooltip"></figure>
<section class="form-head">
<span>Login</span>
<figure class="logo"></figure>
</section>
<section class="form-body">
<div class="group">
<label for="user">Email:</label>
<input type="text" id="user" class="txt">
</div>
<div class="group">
<label for="pass">Password:</label>
<input type="password" id="pass" class="txt">
</div>
<div class="group flex-end">
<button type="submit" id="login" class="btn btn-radical">login</button>
</div>
</section>
</form>
</section>
<script>
'use strict';
window.addEventListener('load', function() {
let main = document.querySelector('.main');
main.classList.add('visible');
});
</script>
<script src="js/auth.js"></script>
</body>
</html>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.main {
align-items: center;
background: rgba(136,211,124,1);
background: linear-gradient(to bottom, rgba(136,211,124,1) 0%,
rgba(136,211,124,1) 50%,
rgba(190,144,212,1) 51%,
rgba(190,144,212,1) 71%,
rgba(190,144,212,1) 100%);
background-repeat: repeat;
display: flex;
height: 100vh;
justify-content: center;
opacity: 0;
transition: all .2s linear;
visibility: hidden;
}
.main.visible {
opacity: 1;
visibility: visible;
}
.form {
background-color: #f7f7f7;
border: none;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0,0,0,.25),
0 -1px 5px rgba(0,0,0,.1);
position: relative;
width: 350px;
}
.form-head {
align-items: center;
border-radius: 2px 2px 0 0;
border-bottom: 2px solid #9B59B6;
display: flex;
height: 45px;
}
.form-head > span {
color: #555;
font-family: 'segoe ui';
font-size: 17pt;
font-weight: lighter;
margin-left: 12px;
}
.form-head .logo {
background-position: center;
background-repeat: no-repeat;
background-image: url('http://urbita.com/img/default/default_user_256.png');
background-size: cover;
border-radius: 100%;
box-shadow: 0px 2px 5px rgba(0,0,0,.25);
height: 85px;
left: calc(50% - 38.5px);
margin: 0px;
position: absolute;
top: calc(0% - 38.5px);
width: 85px;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(1800deg); }
}
.form-head .logo.auth {
animation-name: spin;
animation-duration: 3000ms;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-play-state: running;
animation-fill-mode: forwards;
animation-delay: 0s;
}
.form-body {
padding: 40px 25px 10px 25px;
}
.group {
align-items: center;
display: flex;
margin-bottom: 10px;
}
.group > label {
color: #777;
display: block;
flex-grow: 1;
font-family: 'segoe ui';
}
.flex-end {
justify-content: flex-end;
}
.flex-abs-center {
align-items: center;
justify-content: center;
}
.txt {
border: 1px solid #ddd;
border-radius: 2px;
color: #777;
font-family: 'segoe ui';
font-size: .9rem;
outline: none;
padding: .35rem .5rem;
transition: all .2s ease;
}
.txt.invalid {
border-color: rgba(231,76,60,.7);
}
.txt:hover {
border-color: #ccc;
}
.txt:focus {
border-color: #bbb;
}
.btn {
border: none;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0,0,0,.2);
font-family: 'segoe ui';
font-size: .9rem;
outline: none;
padding: .45rem 1.25rem;
text-transform: uppercase;
transition: all .3s ease;
}
.btn-radical {
background-color: #F62459;
color: rgba(255,255,255,.9);
margin-top: 15px;
}
.btn-radical:hover {
background-color: #DC1F4E;
}
.form .tooltip {
background-color: rgba(0,0,0,.5);
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0,0,0,.25);
color: rgba(255,255,255,.8);
font-family: 'segoe ui';
font-size: .9rem;
height: 100px;
left: calc(100% - 35px);
margin: 0;
padding: .7rem .6rem;
opacity: 0;
position: absolute;
text-align: center;
top: -140%;
transition: all .4s ease-in;
visibility: hidden;
width: 200px;
}
.form .tooltip:before {
border-color: rgba(0,0,0,.5) transparent;
border-style: solid;
border-width: 10px 10px 0px 10px;
content: "";
left: 10px;
position: absolute;
bottom: -10px;
}[/coder]
Por último, para hacerlo visible, aplicaremos una clase:
[code=css]
.form .tooltip.visible {
opacity: 1;
top: -50%;
visibility: visible;
}
'use strict';
document.addEventListener('DOMContentLoaded', function() {
let loginFrm = document.querySelector('#loginFrm');
loginFrm.addEventListener('submit', function(e) {
e.preventDefault();
const ANIMATION_TIMEOUT = 3000; // duration of logo animation
let logo = document.querySelector('.logo');
let user = document.querySelector('#user').value.toLowerCase();
let pass = document.querySelector('#pass').value;
// if logo already is animated, the info is already processing
if(logo.classList.contains('auth')) {
return false;
}
logo.classList.add('auth'); // start animation
// check credentials
if(user == 'john.doe@gmail.com' && pass == 'abc123') {
window.setTimeout(function() {
sessionStorage.setItem('full_access', false);
window.location.href = 'views/home.html';
}, ANIMATION_TIMEOUT);
} else {
window.setTimeout(function() {
logo.classList.remove('auth'); // remove animation of logo
showTooltip();
}, ANIMATION_TIMEOUT);
}
});
// show and hide tooltip
function showTooltip() {
let tooltip = loginFrm.querySelector('.tooltip');
tooltip.textContent = 'El email o contraseña ingresados no son correctos. Verifique e inténtelo nuevamente.';
tooltip.classList.add('visible');
// after 4 seconds, the tooltip disappear
window.setTimeout(function() {
tooltip.classList.remove('visible');
}, 4000);
}
}); // end script
'use strict';
window.addEventListener('load', function() {
let main = document.querySelector('.main');
main.classList.add('visible');
});
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/vendor/normalize.css"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="../css/home.css"/>
<script src="js/vendor/prefixfree.min.js"></script>
<title>Home page</title>
</head>
<body>
<section class="preload"><i class="fa fa-4x fa-circle-o-notch fa-spin"></i></section>
<section class="main">
<header>
<nav class="navbar">
<!-- brand -->
<a href="#" class="brand">Oh yeah!<i class="fa fa-2x fa-hand-o-right"></i></a>
<!-- menu -->
<ul class="menu">
<li><a href="#">Messages<i class="fa fa-envelope"></i></a></li>
<li>
<a href="#">John doe<i class="fa fa-caret-down"></i></a>
<ul>
<li><a href="#" id="profile-img">
<img src="http://i.imgur.com/IxWfQy2.jpg"/></a>
</li>
<li><a href="#">Profile<i class="fa fa-user"></i></a></li>
<li><a href="#">Settings<i class="fa fa-cog"></i></a></li>
<li><a href="#" id="logout">Logout<i class="fa fa-sign-out"></i></a></li>
</ul>
</li>
</ul>
</nav>
</header>
</section>
<script src="js/homeui.js"></script>
</body>
</html>
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
.preload {
align-items: center;
background-color: #F22613;
display: flex;
height: 100vh;
justify-content: center;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: all .5s ease;
visibility: hidden;
width: 100%;
z-index: 1;
}
.preload.visible {
opacity: 1;
visibility: visible;
}
.preload i {
color: rgba(255,255,255,.9);
}
.main {
opacity: 0;
transition: all .6s ease;
visibility: hidden;
}
.main.visible {
opacity: 1;
visibility: visible;
}
header {
background-color: #22A7F0;
color: rgba(255,255,255,.9);
display: block;
}
.navbar {
align-items: center;
color: inherit;
display: flex;
justify-content: space-between;
margin: 0px;
padding: 0 .5rem;
width: 100%;
}
.brand {
align-self: stretch;
align-items: center;
color: inherit;
display: flex;
font-family: 'segoe ui';
margin: 0px;
padding: 0 .25rem;
}
.brand > i {
margin-left: .8rem;
}
.navbar ul {
display: block;
list-style: none;
margin: 0px;
padding: 0px;
}
.navbar > .menu {
display: block;
}
.menu > li {
display: inline-block;
transition: all .1s ease-in;
}
.menu > li:hover {
background-color: #1C99DD;
}
.menu > li > a {
display: block;
padding: 1rem .5rem;
}
.menu > li > a > i {
margin-left: 10px;
}
.menu > li:not(:last-of-type) {
margin: 0 55px 0 0;
}
/* last li (profile dropdown) */
.menu > li:last-of-type {
position: relative;
}
/* dropdown */
.menu > li:last-of-type > ul {
background-color: #22A7F0;
border-radius: .1725rem;
left: -50%;
opcity: 0;
padding: .5rem 0;
position: absolute;
top: 170%;
visibility: hidden;
transition: all .14s ease-in;
}
/* arrow of menu */
.menu > li:last-of-type > ul:after {
border-color: #22A7F0 transparent;
border-style: solid;
border-width: 0 8px 8px 8px;
content: "";
position: absolute;
right: 8px;
top: -7px;
}
.menu > li:last-of-type:hover > ul {
opacity: 1;
top: 130%;
visibility: visible;
}
/* dropdown list items*/
.menu > li:last-of-type > ul > li, .menu > li:last-of-type > ul a {
display: block;
font-size: .9rem;
transition: transform .1s ease-in;
}
/* dropdown options */
.menu > li:last-of-type > ul a {
padding: .5rem .9rem;
width: 8rem;
}
/* a elements of dropdown options */
.menu > li:last-of-type > ul li:hover {
background-color: #1998DC;
}
/* margin left to dropdown icon */
.menu > li:last-of-type > a > i {
margin-left: .8rem;
}
/* dropdown options icons */
.menu li:last-of-type > ul a > i {
float: right;
margin-top: .3125rem;
}
/* profile image */
#profile-img {
display: flex;
justify-content: center;
margin-bottom: 5px;
pointer-events: none;
width: 100%;
}
#profile-img > img {
background-position: center;
background-size: cover;
border-radius: 50%;
display: block;
height: 5rem;
width: 5rem;
}
'use strict';
window.addEventListener('load', function() {
let full_access = sessionStorage.getItem('full_access');
let preload = document.querySelector('.preload');
let main = document.querySelector('.main');
// full_access is gived when user enter for first time
if(full_access == "false") {
// show preload animation
preload.classList.add('visible');
// animation delay 3s. After that, the main content appear
window.setTimeout(function() {
preload.classList.remove('visible');
main.classList.add('visible');
},3000);
// change the flag. Now, the user has full access
sessionStorage.setItem('full_access', true);
}
// if user has full_access, just show the page
else {
main.classList.add('visible');
}
});
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#logout').addEventListener('click', function(e) {
e.preventDefault();
// remove user's session
sessionStorage.removeItem('full_access');
// redirect to login
window.location.href = '/PreloadCSS';
});
});http://urbita.com/img/default/default_user_256.png