Basic Bash Terminal Plugin For jQuery - Web Terminal

Web Terminal is a simple-to-use jQuery plugin for adding a configurable terminal emulator to your web app. The plugin includes a few built-in bash commands and is easy to extend in the JavaScript as per your needs.

How to use it:

1. Create the HTML for the terminal.

<div id="terminal">
  <header>>>>Welcome in terminal, type "help" to get commands</header>
  <div id="terminal_lines">
  </div>
</div>

2. Import jQuery JavaScript library and the jQuery Web Terminal plugin into the page.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="js/terminal.js"></script>

3. Initialize the Web Terminal.

$( "#terminal" ).setAsTerminal("#terminal", "user", "host", "~", "$", PROGAMS);

4. Style the terminal.

#terminal {
  font-family: "Courier", Monaco, monospace;
  font-weight: 200;
  font-size: 20px
}

#terminal #cursor {
  color: #fff;
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite
}

#terminal li { list-style-type: '-' }

#terminal table {
  border-collapse: collapse;
  border: 0;
  margin: 10px
}

#terminal table th {
  text-align: left;
  color: #fff;
  border-bottom: 1px solid #fff
}

#terminal table td, #terminal table th { padding: .5em }

@keyframes "blink" {
from, to {
color:transparent
}
50% {
color:#fff
}
}
@-moz-keyframes 
blink { from, to {
color:transparent
}
50% {
color:#fff
}
}
@-webkit-keyframes "blink" {
from, to {
color:transparent
}
50% {
color:#fff
}
}
@-ms-keyframes "blink" {
from, to {
color:transparent
}
50% {
color:#fff
}
}
@-o-keyframes "blink" {
from, to {
color:transparent
}
50% {
color:#000
}
}

5. Add your commands in the JavaScript as these :

var PROGAMS = {

  help: function(...a) {
    this.printa({
      "headers": ["command", "description"],
      "help": ["get commands list"],
      "text": ["view text template"],
      "sayhello [name]": ["say hello to [name]"],
      "clear": ["clear terminal"]
    });
  },

  text : function(...a){
      self.printa("<h1>Title 1</h1>");
      self.printa("<h2>Title 2</h2>");
      self.printa(`<p> Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Pellentesque pulvinar eros augue, sit amet hendrerit velit scelerisque quis. Vestibulum elementum leo libero, eu posuere magna elementum ac. Cras sagittis sapien eu mauris posuere faucibus. Nam eget diam a orci feugiat efficitur id a nibh. Maecenas nisl nunc, rutrum vel pellentesque semper, pulvinar non purus. Nunc suscipit felis lectus, sed consectetur felis venenatis a. Quisque eget mauris vitae mauris tempor venenatis. Cras pulvinar commodo ex in scelerisque.</p>

      <h2>Another title</h2>
      <p>Nam varius accumsan massa vel placerat. <a href="http://url.com">Proin ligula velit</a>, accumsan finibus gravida quis, tristique vitae felis. Ut porttitor tellus felis, vel tincidunt mi porttitor sed. Vestibulum libero nulla, faucibus ac sapien laoreet, vestibulum placerat elit.<p>
      <h3>Level 3 title</h3>
      <p>Nulla magna magna, dictum sit amet enim non, malesuada aliquet dolor. Nam consequat dui non sodales ullamcorper. Phasellus id accumsan dui, sed sagittis ligula. Quisque vel porta metus, sit amet viverra ligula. Vestibulum porttitor molestie nunc, eget ultricies lorem luctus id. </p>`);
  },

  sayhello: function(...a) {
    this.printa("Hello "+a[0]);
  },

  aboutme: function(...a) {
    this.printa("aboutme");
  },

  clear: function(...a) {
    this.clear_terminal();
  }
};

Change log:

2018-01-05

• update input style for safari

---

This awesome jQuery plugin is developed by cimourdain. For more Advanced Usages, please check the demo page or visit the official website.