jQuery - Password hacking simulator

by Adlene Denni

HTML

<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>
    <p class="hidden">Press any 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;
}
.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');
});