| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Echo Print Results</title> |
| | |
| | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.terminal/css/jquery.terminal.min.css"> |
| | <script src="https://cdn.jsdelivr.net/npm/jquery"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/jquery.terminal/js/jquery.terminal.min.js"></script> |
| | <style> |
| | body { |
| | margin: 0; |
| | background: black; |
| | color: green; |
| | } |
| | #terminal { |
| | height: 100vh; |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <div id="terminal"></div> |
| |
|
| | <script> |
| | $(function () { |
| | const terminal = $('#terminal').terminal({ |
| | |
| | echo: function (...args) { |
| | this.echo(`[[;cyan;]${args.join(' ')}]`); |
| | }, |
| | |
| | |
| | print_results: function (title, results) { |
| | this.echo(`[[;yellow;]${title}]`); |
| | results.forEach((result, index) => { |
| | this.echo(`[[;green;]- Result ${index + 1}: ${result}]`); |
| | }); |
| | this.echo('[[;cyan;]End of results.]'); |
| | }, |
| | |
| | |
| | simulate: function (operation) { |
| | this.echo(`[[;yellow;]Simulating ${operation}...]`); |
| | this.pause(); |
| | setTimeout(() => { |
| | const results = ['Step 1 completed', 'Step 2 completed', 'Operation successful']; |
| | this.print_results(`${operation} Simulation Results`, results); |
| | this.resume(); |
| | }, 2000); |
| | }, |
| | |
| | |
| | help: function () { |
| | this.echo(` |
| | [[;yellow;]Available Commands:] |
| | - echo <text> : Echoes back the input text |
| | - print_results : Displays a formatted list of results |
| | - simulate <action> : Simulates an action and prints results |
| | - help : Displays this help menu |
| | `); |
| | } |
| | }, { |
| | greetings: '[[;yellow;]Welcome to the Echo Terminal]', |
| | name: 'echo_terminal', |
| | prompt: '>> ' |
| | }); |
| | }); |
| | </script> |
| | </body> |
| | </html> |
