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