Fake Login page with jQuery

http://codepen.io/arkev/pen/GgoeLN

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Fake Login page with jQuery</title> <link rel='stylesheet prefetch' href='http://daneden.github.io/animate.css/animate.min.css'> <style type="text/css"> body::before { z-index: -1; content: ''; position: fixed; top: 0; left: 0; background: #44c4e7; /* IE Fallback */ background: rgba(68, 196, 231, 0.8); width: 100%; height: 100%; } .form { position: absolute; top: 50%; left: 50%; background: #fff; width: 285px; margin: -140px 0 0 -182px; padding: 40px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); } .form h2 { margin: 0 0 20px; line-height: 1; color: #44c4e7; font-size: 18px; font-weight: 400; } .form input { outline: none; display: block; width: 100%; margin: 0 0 20px; padding: 10px 15px; border: 1px solid #ccc; color: #ccc; font-family: "Roboto"; box-sizing: border-box; font-size: 14px; font-wieght: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: 0.2s linear; } .form inputinput:focus { color: #333; border: 1px solid #44c4e7; } .form button { cursor: pointer; background: #44c4e7; width: 100%; padding: 10px 15px; border: 0; color: #fff; font-family: "Roboto"; font-size: 14px; font-weight: 400; } .form button:hover { background: #369cb8; } .error, .valid { display: none; } </style> </head> <body> <section class="form animated flipInX"> <h2>Login To Your Account</h2> <p class="valid">Valid. Please wait a moment.</p> <p class="error">Error. Please enter correct Username & password.</p> <form class="loginbox" autocomplete="off"> <input placeholder="Username" type="text" id="username"></input> <input placeholder="Password" type="password" id="password"></input> <button id="submit">Login</button> </form> </section> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#username').focus(); $('#submit').click(function() { event.preventDefault(); // prevent PageReLoad var ValidEmail = $('#username').val() === 'invitado'; // User validate var ValidPassword = $('#password').val() === 'hgm2015'; // Password validate if (ValidEmail === true && ValidPassword === true) { // if ValidEmail & ValidPassword $('.valid').css('display', 'block'); window.location = "http://arkev.com"; // go to home.html } else { $('.error').css('display', 'block'); // show error msg } }); }); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » Fake Login page with jQuery