| <!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> |
