ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-26 05:05:05 +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 class="traffic-light"></div>
</div> </div>
<div class="p-5"> <div class="p-5">
<p id="output"></p> <p id="terminal-output"></p>
<p id="input"><span id="typing"></span></p> <p id="terminal-input"></p>
</div> </div>
</div> </div>
</div> </div>
@ -68,6 +68,19 @@
border-bottom: 1px solid gray; 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> </style>
<!-- Teal Impact Section --> <!-- Teal Impact Section -->
@ -467,10 +480,7 @@
<script> <script>
var output = document.getElementById("output"); const commands = [
var typing = document.getElementById("typing");
var commands = [
"$ node --eval 'console.log(\"Hello World!\")'", "$ node --eval 'console.log(\"Hello World!\")'",
"command not found: node", "command not found: node",
"$ sh <(curl tea.xyz) --yes", "$ sh <(curl tea.xyz) --yes",
@ -480,25 +490,29 @@
"Hello World!" "Hello World!"
]; ];
var index = 0; let commandIndex = 0;
let command = commands[commandIndex];
let commandOutput = "";
function type() { function typeCommand() {
var command = commands[index]; if (commandIndex === commands.length) {
var chars = command.split(""); return;
var loop = setInterval(function() { }
typing.innerHTML += chars.shift(); if (command.length === 0) {
if (!chars.length) { commandIndex++;
clearInterval(loop); command = commands[commandIndex];
output.innerHTML += command + "<br>"; commandOutput += '\n';
index++; document.querySelector("#terminal-output").innerHTML = commandOutput;
if (index < commands.length) { setTimeout(typeCommand, 1000);
setTimeout(type, 1000); return;
} }
} commandOutput += command[0];
}, 50); command = command.slice(1);
document.querySelector("#terminal-output").innerHTML = commandOutput;
setTimeout(typeCommand, 50);
} }
type(); typeCommand();
</script> </script>
</div> </div>