ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-22 14:25:06 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Benchmark for animation

Browse source
This commit is contained in:
Thomas Smith 2023-01-25 15:24:48 -05:00
parent be8551db65
commit be511ee8cd
1 changed files with 36 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
src/layouts/index.html
View file

@ -26,8 +26,8 @@
<div class="traffic-light"></div>
</div>
<div class="p-5">
<p id="output"></p>
<p id="input"><span id="typing"></span></p>
<p id="terminal-output"></p>
<p id="terminal-input"></p>
</div>
</div>
</div>
@ -68,6 +68,19 @@
border-bottom: 1px solid gray;
}
#terminal-output {
white-space: pre;
}
#terminal-input {
position: relative;
}
#terminal-input:before {
content: ">";
color: green;
position: absolute;
left: 0;
}
</style>
<!-- Teal Impact Section -->
@ -467,10 +480,7 @@
<script>
var output = document.getElementById("output");
var typing = document.getElementById("typing");
var commands = [
const commands = [
"$ node --eval 'console.log(\"Hello World!\")'",
"command not found: node",
"$ sh <(curl tea.xyz) --yes",
@ -480,25 +490,29 @@
"Hello World!"
];
var index = 0;
let commandIndex = 0;
let command = commands[commandIndex];
let commandOutput = "";
function type() {
var command = commands[index];
var chars = command.split("");
var loop = setInterval(function() {
typing.innerHTML += chars.shift();
if (!chars.length) {
clearInterval(loop);
output.innerHTML += command + "<br>";
index++;
if (index < commands.length) {
setTimeout(type, 1000);
}
}
}, 50);
function typeCommand() {
if (commandIndex === commands.length) {
return;
}
if (command.length === 0) {
commandIndex++;
command = commands[commandIndex];
commandOutput += '\n';
document.querySelector("#terminal-output").innerHTML = commandOutput;
setTimeout(typeCommand, 1000);
return;
}
commandOutput += command[0];
command = command.slice(1);
document.querySelector("#terminal-output").innerHTML = commandOutput;
setTimeout(typeCommand, 50);
}
type();
typeCommand();
</script>
</div>