Web-based Shell Terminal Emulator - jQuery Shelly

A lightweight, web-based terminal emulator for emulating a shell (command line) environment on the webpage.

Built using JavaScript (jQuery), Queue.js (a function to represent a queue), and textTyper.js (a jQuery plugin to animate your text just like a typewriter).

How to use it:

1. Load the shelly.js plugin and other required JavaScript resources in the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/Queue.src.js"></script>
<script src="/path/to/js/textTyper.js"></script>
<script src="/path/to/js/shelly.js"></script>

2. Create a DIV container to hold the shell terminal.

<div class="shell" id="command-line">
</div>

3. Initialize the shell terminal and customize the initial messages using the shell.print() method.

let shell = $("#command-line").shell({ 
    User: "root",
    startup: function (shell) {
      shell.print("Server", "A!");
      shell.print("Server", "A!───────▀▄───▄▀────────");
      shell.print("Server", "A!──────▄█▀███▀█▄───────");
      shell.print("Server", "A!─────█▀███████▀█──────");
      shell.print("Server", "A!─────█─█▀▀▀▀▀█─█──────");
      shell.print("Server", "A!────────▀▀─▀▀─────────");
      shell.print("Server", "A!");
      shell.print("", "A!");
      shell.print("Client", "For help say '/help' <kbd class='carrot'>Enter</kbd>");
    }
});

4. Register custom commands.

shell.register("help", function (shell, command) {
  shell.print("", "help : Show commands", 5);
  shell.print("", "clear : Clear the console", 5);
  shell.print("", "version : Version info", 5);
});
shell.register("version", function (shell, command) {
  shell.print("", "ProductName: Mac OS X", 5);
  shell.print("", "ProductVersion: 10.11.1", 5);
});

5. Register a fallback for for handling unrecognized command or user input.

shell.fallback(function (shell, command) {
  shell.error(`I'm not getting this "${command}"`);
});

6. All possible options.

let shell = $("#command-line").shell({ 
    color: "white",
    BackgroundColor: "#556b2f",
    User: "User",
    Website: "Website",
    Server: "Server",
    Client: "Client",
    enableGlitch: true
});

---

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