ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-23 00:25:11 +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

71
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 commands = [ var typing = document.getElementById("typing");
'$ node --eval "console.log(\'Hello World!\')"',
'command not found: node', var commands = [
'$ sh <(curl tea.xyz) --yes', "$ node --eval 'console.log(\"Hello World!\")'",
'installing ~/.tea...', "command not found: node",
'tea: installing nodejs.org^19', "$ sh <(curl tea.xyz) --yes",
'Hello World!' "installing ~/.tea...",
]; "$ node --eval 'console.log(\"Hello World!\")'",
var delay = 100; "tea: installing nodejs.org^19",
var index = 0; "Hello World!"
var currentCommand = ""; ];
function typeCommand() {
if (index >= commands.length) { var index = 0;
return;
} function type() {
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++; index++;
if (currentIndex === command.length) { if (index < commands.length) {
clearInterval(typing); setTimeout(type, 1000);
currentCommand = commandEl.innerHTML; }
if (command.includes("error")) {
commandEl.classList.add("error")
} }
index++; }, 50);
setTimeout(() => { }
typeCommand();
}, delay); type();
}
}, delay);
}
typeCommand();
</script> </script>
</div> </div>