Hi there, this is a weird concept of a click sequence protected area.
The password check should be done on a server side script.
NOTE: This is just an idea so please do not use it seriously!! I decline all responsability for any bruteclick hack! :D
A Pen by Fabrizio Bianchi on CodePen.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <link href="style.css" rel="stylesheet"> | |
| <title>Click/Tap Rhythm Password</title> | |
| </head> | |
| <body> | |
| <div id='area'></div> | |
| <div class='status' id='ready'>Click Your Password.</div> | |
| <div class='status' id='error'>Oops, Try Again!</div> | |
| <div class='status' id='success'>Yeah! Welcome Friend!</div> | |
| <div id='show'>Show password</div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
| var tolerance_ms = 500, | |
| clicks = [], | |
| start, | |
| end, | |
| timeout; | |
| $("#area").mousedown(function(e){ click(e); }); | |
| function click(e) { | |
| if (clicks.length > 0) { | |
| end = new Date(); | |
| clicks.push(end); | |
| } else { | |
| start = new Date(); | |
| clicks.push(start); | |
| } | |
| status(""); | |
| circle(e); | |
| clearTimeout(timeout); | |
| timeout = setTimeout(function(){ (check()) ? success(): error(); }, 1000); | |
| } | |
| function check() { | |
| //check password | |
| var check_pass = false; | |
| if (clicks.length==pass.length) { | |
| clicks=clicks.map( | |
| function(time) { return (time-start); } | |
| ); | |
| for (var i=0; i < clicks.length; i++) { | |
| check_pass = true; | |
| if (check_pass) { | |
| check_pass = (Math.abs(clicks[i]-pass[i])<tolerance_ms); | |
| } | |
| } | |
| } | |
| clicks = []; | |
| $(".circle").remove(); | |
| return check_pass; | |
| } | |
| function success() { | |
| //success callback | |
| status("success"); | |
| } | |
| function error() { | |
| //error callback | |
| status("error"); | |
| } | |
| function status(stat) { | |
| $("body").attr("class", stat); | |
| } | |
| status("ready"); | |
| //demo only | |
| var pass = [0, 373, 556, 724, 1173, 2038, 2463]; | |
| function showPassword() { | |
| status(""); | |
| var e = { | |
| pageX : $(window).width()/2, | |
| pageY : $(window).height()/2 | |
| }; | |
| $.each(pass, function(){ | |
| setTimeout(function(){ | |
| circle(e); | |
| },this) | |
| }); | |
| } | |
| $("#show").click(function(){ showPassword(); }); | |
| function circle(e) { | |
| //draw circle: for demo purposes only | |
| $("body").append( | |
| $("<div>").addClass("circle").css({ | |
| left: e.pageX, | |
| top: e.pageY | |
| }) | |
| ); | |
| } |
| @import url(http://fonts.googleapis.com/css?family=Roboto:400,500); | |
| html, body { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background: #00baff; | |
| font-family: 'Roboto', sans-serif; | |
| overflow: hidden; | |
| transition: background .3s ease-in-out; | |
| } | |
| body.ready #ready { | |
| opacity: 1; | |
| } | |
| body.error { | |
| background: #BE5973; | |
| } | |
| body.error #error { | |
| opacity: 1; | |
| } | |
| body.success { | |
| background: #00A673; | |
| } | |
| body.success #success { | |
| opacity: 1; | |
| } | |
| #area { | |
| width: 100%; | |
| height: 100%; | |
| z-index: 999; | |
| position: absolute; | |
| } | |
| .status { | |
| color: #fff; | |
| position: absolute; | |
| font-size: 30px; | |
| top: 50%; | |
| text-align: center; | |
| width: 100%; | |
| opacity: 0; | |
| margin-top: -20px; | |
| transition: opacity .3s ease-in-out; | |
| } | |
| .circle { | |
| position: absolute; | |
| width: 200px; | |
| height: 200px; | |
| margin: -100px; | |
| background: #fff; | |
| border-radius: 50%; | |
| -webkit-animation: circle 1s ease-out forwards; | |
| -moz-animation: circle 1s ease-out forwards; | |
| -o-animation: circle 1s ease-out forwards; | |
| animation: circle 1s ease-out forwards; | |
| transform: scale(0.1); | |
| opacity: 0.6; | |
| } | |
| @-webkit-keyframes circle { | |
| 100% { | |
| transform: scale(10); | |
| opacity: 0; | |
| } | |
| } | |
| @-moz-keyframes circle { | |
| 100% { | |
| transform: scale(10); | |
| opacity: 0; | |
| } | |
| } | |
| @-o-keyframes circle { | |
| 100% { | |
| transform: scale(10); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes circle { | |
| 100% { | |
| transform: scale(10); | |
| opacity: 0; | |
| } | |
| } | |
| #show { | |
| color: #fff; | |
| text-align: center; | |
| position: absolute; | |
| bottom: 20px; | |
| width: 100%; | |
| text-transform: uppercase; | |
| font-size: 14px; | |
| opacity: 0.3; | |
| transition: opacity .1s ease-in-out; | |
| cursor: pointer; | |
| z-index: 1000; | |
| } | |
| #show:hover { | |
| opacity: 1; | |
| } |