Created
July 22, 2015 19:22
-
-
Save sooryan/3e6e2a514b57062df999 to your computer and use it in GitHub Desktop.
An attempt to replicate hacker typer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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.. */ | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(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("|"); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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