@import url(https://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;
  &.ready {
    #ready { opacity: 1; }
  }
  &.error {
    background: #BE5973;
    #error { opacity: 1; }
  }
  &.success {
    background: #00A673;
    #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%;
  animation: circle 1s ease-out forwards;
  transform: scale(0.1);
  opacity: 0.6;
}
@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;
}



/* Demo */
#coolors {
  position: fixed;
  bottom: 20px;
  right: 30px;
  text-decoration: none;
  color: #353541;
  font-size: 11px;
  text-transform: uppercase;
  z-index: 1001;
  opacity: .5;
}

#more {
  position: fixed;
  top: 20px;
  right: 30px;
  text-decoration: none;
  color: #353541;
  font-size: 11px;
  text-transform: uppercase;
  z-index: 1001;
  opacity: .5;
}

#more:hover,
#coolors:hover {
  opacity: 1;
}

var tolerance_ms = 500,
    start,
    end,
    clicks = 0, 
    wrong = false, 
    timeout;

$("#area").mousedown(function(e){ click(e); });

function click(e){
  if(clicks==0) {
    start = new Date();
    wrong = false;
  } else {
    end = new Date();
    if(Math.abs((end-start)-pass[clicks])>tolerance_ms) 
      wrong = true;
  }
  status("");
  circle(e); //demo only
  clicks++;
  clearTimeout(timeout);
  timeout = setTimeout(function(){ check(); },1000);
}
  
function check(){
  //check password
  (wrong||clicks!=pass.length) ? error() : success();
  clicks = 0;
  $(".circle").remove(); //demo only
}

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
    })
  );
} 

//You may also like Plugin
/*alsolike(
  "vlrnd", "CSS Only iPhone 6",
  "nKCsI", "Semantic Sandwich",
  "whxbF", "CSS Only Bending Effect" 
);*/