August 14, 2022

[Browser] jQuery Shell Terminal Emulator Plugin | Shelly

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

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


See Demo And Download

Official Website(shanbelileh): Click Here

This superior jQuery/javascript plugin is developed by shanbelileh. For extra Advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.