jQuery - Password hacking simulator

This is obviously just a joke

by katalin_2003

HTML

<div class="first">
  <div class="info">
    <p>You've accessed the mainframe using a double-handshake attack on the firewall,
      <br>you need to brute-force the password...</p>
  </div>
  fortnite username
  <p class="hidvden">Press the button to hack<span class="blink">_</span>
  </p>
</div>
<div class="password hidden"></div>
<div class="button start">START HACKING!</div>
<div class="blink granted hidden">ACCESS GRANTED!</div>
<div class=" button rerun hidden">RERUN</div>

CSS

@-webkit-keyframes blink {
  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes blink {
  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

body {
  background-color: #151515;
  color: #eee;
  font-family: 'Share Tech Mono', monospace;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.first {
	margin-top: 2em;
}

.hidden {
  display: none;
}

.password {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 60px;
  letter-spacing: 5px;
  text-transform: uppercase;
}

.granted {
  position: absolute;
  top: 75%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 30px;
}

.info {
  position: absolute;
  top: 0;
  left: 0;
}

.info p {
  margin: 10px;
}

.button {
  background-color: #111;
  border: solid 1px #888;
  padding: 8px 25px;
  font-size: 26px;
  letter-spacing: 2px;
  cursor: pointer;
}

.rerun {
  position: absolute;
  bottom: 15px;
  right: 15px;
}

.start {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.blink {
  -webkit-animation: blink 0.8s steps(1, start) infinite alternate;
  animation: blink 0.8s steps(1, start) infinite alternate;
}

JavaScript

var passwords = ['password123', 'qwertyuiop', 'admin2015', 'trustno1', 'letmein6969'];
var indexOld;
var index = Math.floor((Math.random() * passwords.length));
var password = passwords[index];
var characters = [];
var counter = 0;

var interval = setInterval(function() {
  for (i = 0; i < counter; i++) {
    characters[i] = password.charAt(i);
  }
  for (i = counter; i < password.length; i++) {
    characters[i] = Math.random().toString(36).charAt(2);
  }
  $('.password').text(characters.join(''));
}, 25);


function hack() {
  counter++;
  if (counter == password.length) {
    $('.granted, .rerun').removeClass('hidden');
  }
}
$(window).on('keydown', hack);
$('.password').on('click', hack);


$('.rerun').on('click', function() {
  //prevent from displaying the same password two times in a row
  indexOld = index;
  do {
    index = Math.floor((Math.random() * passwords.length));
  } while (index == indexOld);

  $('.granted, .rerun').addClass('hidden');
  password = passwords[index];
  characters = [];
  counter = 0;
});

//keyboard events won't fire if the iframe isn't selected first in Full Page view
$('.start').on('click', function() {
  $(this).addClass('hidden');
  $('.info p:last-child, .password').removeClass('hidden');
});