www/src/layouts/partials/hero-terminal-animation.html

63 lines
2.2 KiB
HTML
Raw Normal View History

2023-01-26 23:49:04 +03:00
<script>
const commands = [
{ input: "$ node --eval 'console.log(\"Hello World!\")'", output: `command not found: node<br><span class="dark-gray">#Node is not installed, thus command is not found :/ ...</span><br>` },
{ input: "$ sh <(curl tea.xyz) --yes", output: `installing ~/.tea...<br><table class="teal">
<thead>
<tr>
<th>% Total</th>
<th>% Received</th>
<th>% Xferd</th>
<th>Average Speed</th>
<th>Time</th>
<th>Time</th>
<th>Time</th>
<th>Current</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>13306</td>
<td>100</td>
<td>54983</td>
<td>0</td>
<td>--:--:--</td>
<td>--:--:--</td>
<td>--:--:--</td>
</tr>
<tr>
<td colspan="8">k, we installed <mark>/Users/userName/.tea/tea.xyz/v0.21.0/bin/tea</mark></td>
</tr>
</tbody>
</table>
` },
{ input: "$ node --eval 'console.log(\"Hello World!\")'", output: `tea: installing nodejs.org^19<br><span class="dark-gray">#tea magically installs needed dependencies...</span>` },
{ input: "", output: `Hello World! &#128526;<br><span class="dark-gray">#and tah-dah!</span>` },
];
let commandIndex = 0;
let command = commands[commandIndex];
let commandOutput = "";
function typeCommand() {
if (commandIndex === commands.length) {
return;
}
if (command.input.length === 0) {
commandOutput += '\n' + command.output + '\n';
document.querySelector("#terminal-output").innerHTML = commandOutput;
commandIndex++;
command = commands[commandIndex];
setTimeout(typeCommand, 1000);
return;
}
commandOutput += command.input[0];
command.input = command.input.slice(1);
document.querySelector("#terminal-output").innerHTML = commandOutput;
setTimeout(typeCommand, 100);
}
typeCommand();
</script>