Terminal Quake Style

HTML

<script src="http://terminal.jcubic.pl/js/jquery.terminal-0.4.6.min.js"></script>
<link rel="stylesheet" href="http://terminal.jcubic.pl/css/jquery.terminal.css">
<div clas="myContainer">
test
<div id="voidConsole"> </div>
test
</div>

CSS

.terminal {
  background-color:rgba(0,0,0,0.8) !important;
}
.cmd{
  background-color:rgba(0,0,0,0.8) !important;
}
.myContainer{
  
  background-color:rgba(0,255,0,1) !important;
  height:100%;
  width:100%;
}

JavaScript

$.fn.tilda = function(eval, options) {
    if ($('body').data('voidConsole')) {
        return $('body').data('voidConsole').terminal;
    }
    this.addClass('voidConsole');

    options = options || {};
    eval = eval ||
    function(command, term) {
        term.echo("you don't set eval for tilda");
    };
    var settings = {
        prompt: 'Void>',
        name: 'voidConsole',
        height: 400,
        enabled: true,
        greetings: 'Quake like console'
    };
    if (options) {
        $.extend(settings, options);
    }
    this.append('<div class="td"></div>');
    var self = this;
    self.terminal = this.find('.td').terminal(eval, settings);
    var focus = false;

    $(document.documentElement).keydown(function(e) {
        // console.log(e.charCode);
        // console.log(e.keyCode);
        if (e.keyCode == 192) {
            self.slideToggle('fast');
            self.terminal.set_command('');
            self.terminal.command_line.set('');
            self.terminal.focus(focus = !focus);
        }
    });
    $('body').data('voidConsole', this);
    this.hide();
    return self;
};

jQuery(document).ready(function($) {
    $('#voidConsole').tilda(function(command, terminal) {
        terminal.echo('you type command "' + command + '"');
    });
});