Console

http://return-true.com/2011/04/jquery-typewriter-revisited/ and http://terminal.jcubic.pl/

by dirkk0

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 id="termGen"></div>
<div class="container">And another test. Hit esc to get a console.</div>
<div id="termChat"></div>
<ul id="caption" class="caption">
    <li>This was a triumph.</li>
    <li>I'm making a note here: HUGE SUCCESS.</li>
    <li>It's hard to overstate my satisfaction.</li>
    <li>Aperture Science:</li>
    <li>We do what we must because we can.</li>
    <li>For the good of all of us</li>
    <li>Except the ones who are dead.</li>
    <li>But there's no sense crying over every mistake</li>
    <li>You just keep on trying till you run out of cake</li>
    <li>And the science gets done and you make a neat gun</li>
    <li>For the people who are still alive.</li>
    <li>I'm not even angry.</li>
    <li>I'm being so sincere right now.</li>
    <li>Even though you broke my heart and killed me.</li>
    <li>And tore me to pieces.</li>
    <li>And threw every piece into a fire.</li>
    <li>As they burned it hurt because</li>
    <li>I was so happy for you.</li>
    <li>Now these points of data make a beautiful line</li>
    <li>And we're out of beta we're releasing on time.</li>
    <li>So I'm GLaD I got burned think of all the things we learned</li>
    <li>For the people who are still alive.</li>
    <li>Go ahead and leave me.</li>
    <li>I think I prefer to stay inside.</li>
    <li>Maybe you'll find someone else to help you.</li>
    <li>Maybe Black Mesa -</li>
    <li>THAT WAS A JOKE. HA HA, FAT CHANCE.</li>
    <li>Anyway, this cake is great:</li>
    <li>It's so delicious and moist.</li>
    <li>Look at me still talking when there's science to do.</li>
    <li>When I look out there it makes me GLaD I'm not you.</li>
    <li>I've experiments to run there is research to be done</li>
    <li>On the people who are still alive</li>
    <li>And believe me I am still alive.</li>
   ...

CSS

body {
    // -webkit-text-size-adjust:none;
    // background-color: #004400;
    // height:100%;
}
#termGen {
    border: 1px outset;
    opacity: 0.0;
    // display: none;
    // position: absolut;
    // float: left;
    top: 20px;
    width: 300px;
    height: 60px;
    z-index:99;
    background-color: rgba(0, 0, 0, 0.5);
}
#termChat {
    border: 1px outset;
    opacity: 0.0;
    // display: none;
    // position: absolut;
    // float: left;
    top: 120px;
    width: 300px;
    height: 60px;
    z-index:99;
    background-color: rgba(0, 0, 0, 0.5);
}

JavaScript

console.log($('#termGen').css('opacity'));

function toggleGenConsole() {
    if ($('#termGen').css('opacity') == 0) {
        $('#termGen').terminal(function (command, termGen) {
            if (command == 'test') {
                termGen.echo("you just typed 'test'");
                // termGen.disable();
            } else {
                termGen.echo('unknown command');
            }
        }, {
            greetings: 'Welcome to the machine',
            prompt: '>',
            name: 'test'
        }).animate({
            width: 300,
            opacity: 1
        }, 500);
    } else {
        $('#termGen').animate({
            width: 0,
            opacity: 0
        }, 500, function () {
            termGen.pause()
        });
    }

    termGen = $('#termGen').terminal()

    termGen.resume();

}

function toggleChatConsole() {
    if ($('#termChat').css('opacity') == 0) {
        $('#termChat').terminal(function (command, termChat) {
            if (command == 'test') {
                termChat.echo("you just typed 'test'");
                // termChat.disable();
            } else {
                termChat.echo('unknown command');
            }
        }, {
            greetings: 'chat away',
            prompt: ':',
            name: 'chat'
        }).animate({
            opacity: 1
        }, 500);
    } else {
        $('#termChat').animate({
            opacity: 0
        }, 500, function () {
            termChat.pause()
        });
    }

    termChat = $('#termChat').terminal()

    termChat.resume();

}
$(document.documentElement).keydown(function (e) {

    console.log(e.charCode);
    console.log(e.keyCode);
    if (e.keyCode == 27) {
        if ($('#termGen').css('opacity') == 0 && $('#termChat').css('opacity') == 0) 
        {
            toggleGenConsole();
        }

        if ($('#termGen').css('opacity') == 1) {
            toggleGenConsole();
        }
        if ($('#termChat').css('opacity') == 1) {
           ...