[Browser] jQuery Shell Terminal Emulator Plugin

Shelly is a simple jQuery extension for web-based terminal emulators.

xtermjs, embed terminal in web page, fake terminal website, web based ssh client, embed linux terminal in web page, xterm js example, terminal in browser

Create Custom HTML Terminals With Pure JavaScript | shell.js

How to make use of it:

1. Load the shelly.js plugin and other required JavaScript resources into 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 tip of the shell.

<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. Backup registry to handle unknown commands 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
});

Web-based Shell Terminal Emulator, jquery shell emulator plugin/Github, xterm terminal