stefan22
12/1/2017 - 4:36 PM
login form
login form (inline css and javascript animation) - created for meca originally
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<style>
body{font-family:"FranklinGothicHeavy",Arial,sans-serif;height:100%;background-size:cover}@keyframes spinner{0%{transform:rotateZ(0deg)}100%{transform:rotateZ(359deg)}}*{box-sizing:border-box}.wrapper{display:flex;align-items:center;flex-direction:column;justify-content:center;width:100%;min-height:100%;padding:0;background:rgba(162,166,169,0.85)}.ralogin{border-radius:2px 2px 5px 5px;padding:10px 25px 20px 25px;width:100%;margin:0 auto;max-width:480px;background:#e8e8e8;position:relative;padding-bottom:100px;box-shadow:0 1px 5px rgba(0,0,0,0.3)}.ralogin.loading button{max-height:100%;padding-top:50px}.ralogin.loading button .spinner{opacity:1;top:69%}.ralogin.ok button{background-color:#aa2966}.ralogin.ok button .spinner{border-radius:0;border-top-color:transparent;border-right-color:transparent;height:20px;animation:none;transform:rotateZ(-45deg)}.ralogin input{//display:block;padding:19px 10px!important;margin-bottom:10px;width:99%;border:1px solid #ddd;transition:border-width .2s ease;border-radius:2px;color:#823f8f;font-size:14px;border-radius:4px;display:inline-block}.ralogin input+i.fa{color:#fff;font-size:1.5em;position:absolute;margin-top:-52px;opacity:0;left:0;transition:all .1s ease-in}.ralogin input:focus,.ralogin input:active{outline:0;color:#823f8f;border-color:#823f8f;border-left-width:45px;padding:17px 10px;font-size:14px}.ralogin input:focus+i.fa,.ralogin input:active+i.fa{opacity:1;left:38px;transition:all .25s ease-out}#mykey{left:35px}.ralogin a{font-size:14px;color:#823f8f;text-decoration:none}.ralogin .title{color:#823f90;font-size:2.5em;font-weight:bold;margin:10px 0 30px 0;border-bottom:1px solid #eee;padding-bottom:0;letter-spacing:-1px;padding-left:.15em}.ralogin button{width:100%;height:100%;padding:10px 10px;background:#d45c95;color:#fff;display:block;border:0;margin-top:20px;position:absolute;left:0;bottom:0;max-height:60px;border-radius:0 0 2px 2px;transform:rotateZ(0deg);transition:all .1s ease-out;border-bottom-width:7px;font-variant:all-small-caps;font-size:2em;cursor:pointer}.ralogin button .spinner{display:block;width:40px;height:40px;position:absolute;border:4px solid #fff;border-top-color:rgba(255,255,255,0.3);border-radius:100%;left:50%;top:0;opacity:0;margin-left:-20px;margin-top:-20px;animation:spinner .6s infinite linear;transition:top .3s .3s ease,opacity .3s .3s ease,border-radius .3s ease;box-shadow:0 1px 0 rgba(0,0,0,0.2)}.ralogin:not(.loading) button:hover{box-shadow:0 1px 3px #d55b95}.ralogin:not(.loading) button:focus{border-bottom-width:4px;outline:0}span.state:focus,span.state:active{outline:0}form,button{outline:0}.modal-ct{border-radius:.6rem;height:auto;left:50%;max-height:52rem;max-width:45rem;min-width:30rem;top:30%}.btn-secondary{color:#fff;font-family:"FranklinGothicHeavy",Arial,sans-serif;font-size:2rem;padding:.7rem 1.5rem;text-transform:uppercase;width:50%}.logino{position:static!important;width:33%!important;font-size:1.5em!important;padding:5px 5px!important;max-height:40px!important;display:inline-block!important;margin:0!important}.rajoinbutton{width:100%;margin:0 auto;max-height:40px;overflow:hidden;text-align:center;margin-top:2em}.rainput-username label,.rainput-password label{color:#823f8f;padding:.5em 0 .15em .25em;display:block}.rainput-username input::placeholder,.rainput-password input::placeholder{color:#823f8f;font-size:14px;font-style:italic}form.ralogin p{font-size:14px;color:#616161;padding:.5em .5em;margin-bottom:0}form.ralogin .rahelp p{font-size:14px;color:#616161;padding:.5em .5em;margin-top:0}form.ralogin p a.raclickhere{text-decoration:underline}.propa img{max-width:250px;margin:0 auto;display:block;border-radius:5px;position:fixed;top:8%;left:25%}.propa p{font-size:16px!important;line-height:24px!important;color:#fafafa!important;font-variant:initial!important;padding:0 2em!important}#rawelcome{font-size:3em;color:#f1f1f1;margin-bottom:.5em;display:inline-block}#rawelcomeuser{font-size:3em;color:#f1f1f1;margin-top:2em;margin-bottom:.5em;display:inline-block;line-height:50px}#rasuser{font-size:.9em}
</style>
</head>
<body>
<div class="wrapper">
<div class="modal-ct login-ct">
<form class="ralogin" maction="/api/Login" data-inherit-redirect-url="true" data-message-not-found="Incorrect username or password" data-return-url="" data-validate="True" method="post" data-di-form-track="">
<p class="title">Sign In</p>
<div class="rainput-username active valid">
<label>Username</label>
<input type="text" placeholder="Please enter your username" autofocus/>
<i class="fa fa-user"></i>
</div>
<div class="rainput-password">
<label>Password</label>
<input type="password" placeholder="Password" />
<i id="mykey" class="fa fa-key"></i>
</div>
<p>Forgotten <a href="#">username</a> or <a href="#">password</a>?</p>
<div class="rahelp">
<p>
<a class="raclickhere" href="#">Click here</a> for help or contact us on <a href="#">0800 083 1988</a>
</p>
<div class="rajoinbutton">
<button class="btn-secondary btn-registration logino" type="button" data-role="
modal-close">Join Now
</button>
</div>
</div>
<button type="button" class="close" aria-label="Close" data-role="modal-close">×
</button>
<button type="submit" data-submit="ralogin">
<i class="spinner"></i>
<span class="state">Sign In</span>
</button>
</form>
</div><!-- modal-ct logit-ct -->
</div><!-- wrapper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script>
(function() {
var working = false;
//form,uservalue,passvalue
var raform = document.querySelector('form.ralogin');
var raisuser = document.querySelector('.rainput-username input').value;
var raispass = document.querySelector('.rainput-password input').value;
var ramessage ='';
//onsubmit
document.querySelector('.ralogin')
.addEventListener('submit', function(e) {
e.preventDefault();
if(working) {
return;
}
working = true;
var state = document.querySelector('button > .state');
raform.classList.add('loading');
state.innerHTML = 'Authenticating VIPs';
setTimeout(function() {
raform.classList.add('ok');
debugger;
var rauser = document.querySelector('.rainput-username input').value;
state.innerHTML = '<div class="propa"><img src="https://sb.monetate.net/img/1/748/1304922.png"><p>' + ramessage(rauser) + '</p></div>';
function ramessage(rauser) {
var ramess = ramess || undefined;
if(rauser == '') {
ramess = '<span id="rawelcome">Welcome back!</span>' + '<br/>';
ramess += ".. a lot has happened since you last logged in.";
return ramess;
}
else {
ramess = '<span id="rawelcomeuser">Welcome back <span id="rasuser">' + rauser + "!</span></span><br/><br/><br/>";
ramess += ".. a lot has happened since you last logged in.";
//document.querySelector('button i.spinner').style.top = '65%';
return ramess;
}//else
}
setTimeout(function() {
state.innerHTML = "log in";
//remove loading ok
raform.className = "ralogin";
working = false;
if(raform.className.indexOf('ok') > -1) {
document.querySelector('.spinner').style.opacity = 0;
}
}, 3600);
}, 2000);
});
})();
</script>
</body>
</html>