Skip to content

Instantly share code, notes, and snippets.

@sooryan

sooryan/hacker.css

Created July 22, 2015 19:22
Show Gist options
  • Save sooryan/3e6e2a514b57062df999 to your computer and use it in GitHub Desktop.
Save sooryan/3e6e2a514b57062df999 to your computer and use it in GitHub Desktop.
Download ZIP
An attempt to replicate hacker typer
Raw
hacker.css
body {
background:#000;
color: #33CC33;
font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
}
.console{
background-color: rgba(0,0,0,0.5);
}
.Yes {
position: fixed;
top: 200px;
background: #333333;
padding: 20px;
border: 1px solid #999;
width: 300px;
left: 50%;
margin-left: -150px;
text-align: center;
}
.No {
position: fixed;
top: 200px;
color: #F00;
background: #511;
padding: 20px;
border: 1px solid #F00;
width: 300px;
left: 50%;
margin-left: -150px;
text-align: center;
}
@media all and (max-height: 1000px) {
/* things inside here will only have an effect if the browser window shows
less than 500 px in the height, so here I apply the special rules */
#console {
position: absolute;
height: auto;
/* etc.. */
}
}
Raw
hacker.js
$(document).ready(
function () {
start();
$(document).keydown(
function (event) {
addText(event);
});
});
var index= 4;
var speed= 2;
var accessCount= 0;
var deniedCount= 0;
function start() {
accessCountimer = setInterval(function () { update(); }, 500);
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var textType = /text.*/;
if (file.type.match(textType)) {
var reader = new FileReader();
$("#fileInput").hide();
$("#console").html("");
reader.onload = function(e) {
window.text = reader.result;
console.log(window.text);
}
window.text=reader.readAsText(file);
} else {
$("#console").html("File not supported!");
}
});
}
function granted() {
accessCount = 0;
var div = $("<div id='granted'>").html("");
div.addClass("Yes");
div.html("<h1>ACCESS GRANTED</h1>");
$(document.body).append(div);
setInterval(function () { refresh(); }, 3000);
}
function nope() {
deniedCount = 0
var div = $("<div id='denied'>").html("");
div.addClass("No");
div.html("<h1>ACCESS DENIED</h1>");
$(document.body).append(div);
setInterval(function () { refresh(); }, 3000);
}
function refresh() {
$("#denied").remove();
$("#granted").remove();
}
function addText(key) {
console.log(key);
console.log(window.text);
if (key.keyCode == 27) {
accessCount++;
if (accessCount > 3) {
granted();
}
}
else if (key.keyCode == 20) {
deniedCount++;
if (deniedCount >= 3) {
nope();
}
}
else if(window.text){
var cont = $("#console").html();
if (cont.substring(cont.length - 1, cont.length) == "|")
$("#console").html($("#console").html().substring(0, cont.length - 1));
if (key.keyCode != 8) {
index += speed;
} else {
if (index > 0)
index -= speed;
}
var text = window.text.substring(0, index);
var rtn = new RegExp("\n", "g"); // newline regex
var rts = new RegExp("\\s", "g"); // whitespace regex
var rtt = new RegExp("\\t", "g"); // tab regex
$("#console").html(text.replace(rtn, "<br/>").replace(rtt, " ").replace(rts, " "));
window.scrollBy(0,100);
}
if (key.preventDefault && key.keyCode != 122) {
key.preventDefault()
};
if (key.keyCode != 122) {
key.returnValue = false;
}
}
function update()
{
var cont = $("#console").html();
if (cont.substring(cont.length - 1, cont.length) == "|") // if last char is the cursor
$("#console").html($("#console").html().substring(0, cont.length - 1));
else
$("#console").append("|");
}
Raw
index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="hacker.css" rel="stylesheet" type="text/css" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script src='hacker.js' type='text/javascript'></script>
</head>
<body>
<input type="file" id="fileInput">
<div id='console'></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment