ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-23 04:55:05 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

More animation work

Browse source
This commit is contained in:
Thomas Smith 2023-01-25 11:41:58 -05:00
parent 2f4247c203
commit ceb50100bb
1 changed files with 33 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/layouts/index.html
View file

@ -26,7 +26,8 @@
<div class="traffic-light"></div> <div class="traffic-light"></div>
</div> </div>
<div class="p-5"> <div class="p-5">
<p class="command"></p> <p id="output"></p>
<p id="input"><span id="typing"></span></p>
</div> </div>
</div> </div>
</div> </div>
@ -467,44 +468,38 @@
<script> <script>
var terminal = document.querySelector('.command'); var output = document.getElementById("output");
var typing = document.getElementById("typing");
var commands = [ 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",
'installing ~/.tea...', "installing ~/.tea...",
'tea: installing nodejs.org^19', "$ node --eval 'console.log(\"Hello World!\")'",
'Hello World!' "tea: installing nodejs.org^19",
"Hello World!"
]; ];
var delay = 100;
var index = 0; var index = 0;
var currentCommand = "";
function typeCommand() { function type() {
if (index >= commands.length) {
return;
}
var command = commands[index]; var command = commands[index];
var commandEl = document.createElement('p'); var chars = command.split("");
commandEl.classList.add('command'); var loop = setInterval(function() {
terminal.appendChild(commandEl); typing.innerHTML += chars.shift();
var currentIndex = 0; if (!chars.length) {
var typing = setInterval(() => { clearInterval(loop);
commandEl.innerHTML = currentCommand + command.slice(0, currentIndex + 1); output.innerHTML += command + "<br>";
currentIndex++;
if (currentIndex === command.length) {
clearInterval(typing);
currentCommand = commandEl.innerHTML;
if (command.includes("error")) {
commandEl.classList.add("error")
}
index++; index++;
setTimeout(() => { if (index < commands.length) {
typeCommand(); setTimeout(type, 1000);
}, delay);
} }
}, delay);
} }
typeCommand(); }, 50);
}
type();
</script> </script>
</div> </div>