JSFiddle - React, Tailwind, and code Playground

by mingjian sun

HTML

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://terminal.jcubic.pl/js/jquery.mousewheel-min.js"></script>
<script src="http://terminal.jcubic.pl/js/jquery.terminal-min.js"></script>
<link rel="stylesheet" href="http://terminal.jcubic.pl/css/jquery.terminal.css">
<link rel="stylesheet" href="http://sumyblog.me/css/font-code.css">
    <div class="terminal_container hidden-xs hidden-sm">
        <div class="terminal_close"></div>
        <div class="terminal" id="s_terminal">
        </div>
    </div>

CSS

/* terminal */
.terminal_container {
    position: fixed;
    left: auto;
    right: 0;
    bottom: 0;
    z-index: 10;
    width: auto;
    height: auto;
    opacity: 1;
}
.terminal_container .terminal#s_terminal * {
    font-family: fantasquesansmono;
}
.terminal_container .terminal#s_terminal {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 23px 23px 0;
    /*width: 426px;
    height: 133px;*/
    background-color: rgba(0,0,0,0.9);
}
.terminal_container .terminal#s_terminal .cmd {
    background-color: transparent;
}
.terminal_container .terminal_close:before {
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    background: transparent url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-388.5%20313.5%2014%2014%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M-388.5%20327.281v-1.181l5.709-5.709-5.709-5.709v-1.182h1.181l5.709%205.709%205.708-5.709h1.182v1.182l-5.708%205.709%205.708%205.709v1.182h-1.182l-5.708-5.709-5.709%205.709h-1.181z%22%2F%3E%3C%2Fsvg%3E") no-repeat 50%/.6em;
    content: '';
    color: #fff;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    -webkit-transition: background-color .4s;
            transition: background-color .4s;
}
.terminal_container .terminal_close:hover:before {
    background-color: rgba(255,0,0,0.9);
}
.terminal_container .terminal_close {
    position: absolute;
    z-index: 12;
    cursor: pointer;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background-color: rgba(0,0,0,0.9);;
}

JavaScript

function closeterminal(){
  $('.terminal_container').hide();
}
$('.terminal_close').bind("click", closeterminal);
jQuery(function($, undefined) {
    $('#s_terminal').terminal(function(command, term) {
        if (command !== '') {
          username = command;
          term.push(function(command, term) {
            if(command !== ''){
              if(command === 'exit()'){
                closeterminal();
              }else if(command === 'help'){
                term.echo('No things for help.');
              }else if(command[0]==':'){
                var result = window.eval(command.substring(1));
                if (result != undefined) {
                  term.echo(String(result));
                }
              }else{
                term.echo('unknown command: '+ command);
              }
            }else{
              term.echo('');
            }
          }, {
            name: 'cmd',
            prompt: username+'> ',
          });
          term.clear();
          term.echo('Welcome '+username+'\n\nType `help` to learn more \nor `exit()` to close.\nCommand start with `:` will use javascript interpreter.');
        }else{
          term.echo('Really need a name, please.');
        }
    }, {
          greetings: 'Hello guys! Welcome to SumyBlog. \nPlease login in ;)',
          name: 'name',
          height: 133,
          width: 426,
          cols: 65,
          prompt: 'username: '
        });
});