JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div id='console'></div>

CSS

body{
    background:#000000;
    color:#00FF00;
    font-family:monospace;
}

.accessGranted{
    position:fixed;
    top:200px;
    background:#333;
    padding:20px;
    border:1px solid #999;
    width:300px;
    left:50%;
    margin-left:-150px;
    text-align:center;
}

.accessDenied{
    position:fixed;
    top:200px;
    color:#F00;
    background:#511;
    padding:20px;
    border:1px solid #F00;
    width:300px;
    left:50%;
    margin-left:-150px;
    text-align:center;
}

JavaScript

/*
*(c) Copyright 2011 Simone Masiero. Some Rights Reserved. 
*This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
*/

$(
    function(){
        $( document ).keydown(
            function ( event ) { 
                Typer.addText( event ); //Capture the keydown event and call the addText, this is executed on page load
            }
        );
    }
);

var Typer={
    text: null,
    accessCountimer:null,
    index:0, // current cursor position
    speed:2, // speed of the Typer
    file:"", //file, must be setted
    accessCount:0, //times alt is pressed for Access Granted
    deniedCount:0, //times caps is pressed for Access Denied
    init: function(){// inizialize Hacker Typer
        accessCountimer=setInterval(function(){Typer.updLstChr();},500); // inizialize timer for blinking cursor
        $.get(Typer.file,function(data){// get the text file
            Typer.text=data;// save the textfile in Typer.text
        });
    },
    
    content:function(){
        return $("#console").html();// get console content
    },
    
    write:function(str){// append to console content
        $("#console").append(str);
        return false;
    },
    
    makeAccess:function(){//create Access Granted popUp      FIXME: popup is on top of the page and doesn't show is the page is scrolled
        Typer.hidepop(); // hide all popups
        Typer.accessCount=0; //reset count
        var ddiv=$("<div id='gran'>").html(""); // create new blank div and id "gran"
        ddiv.addClass("accessGranted"); // add class to the div
        ddiv.html("<h1>ACCESS GRANTED</h1>"); // set content of div
        $(document.body).prepend(ddiv); // prepend div to body
        return false;
    },
    makeDenied:function(){//create Access Denied popUp      FIXME: popup is on top of the page and doesn't show is the page is scrolled
        Typer.hidepop(); // hide all popups
        Typer.deniedCount=0; //reset count
        var ddiv=$("<div...