ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-22 20:25:07 +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>
<div class="p-5">
<p class="command"></p>
<p id="output"></p>
<p id="input"><span id="typing"></span></p>
</div>
</div>
</div>
@ -467,44 +468,38 @@
<script>
var terminal = document.querySelector('.command');
var output = document.getElementById("output");
var typing = document.getElementById("typing");
var commands = [
'$ node --eval "console.log(\'Hello World!\')"',
'command not found: node',
'$ sh <(curl tea.xyz) --yes',
'installing ~/.tea...',
'tea: installing nodejs.org^19',
'Hello World!'
"$ node --eval 'console.log(\"Hello World!\")'",
"command not found: node",
"$ sh <(curl tea.xyz) --yes",
"installing ~/.tea...",
"$ node --eval 'console.log(\"Hello World!\")'",
"tea: installing nodejs.org^19",
"Hello World!"
];
var delay = 100;
var index = 0;
var currentCommand = "";
function typeCommand() {
if (index >= commands.length) {
return;
}
function type() {
var command = commands[index];
var commandEl = document.createElement('p');
commandEl.classList.add('command');
terminal.appendChild(commandEl);
var currentIndex = 0;
var typing = setInterval(() => {
commandEl.innerHTML = currentCommand + command.slice(0, currentIndex + 1);
currentIndex++;
if (currentIndex === command.length) {
clearInterval(typing);
currentCommand = commandEl.innerHTML;
if (command.includes("error")) {
commandEl.classList.add("error")
}
var chars = command.split("");
var loop = setInterval(function() {
typing.innerHTML += chars.shift();
if (!chars.length) {
clearInterval(loop);
output.innerHTML += command + "<br>";
index++;
setTimeout(() => {
typeCommand();
}, delay);
if (index < commands.length) {
setTimeout(type, 1000);
}
}, delay);
}
typeCommand();
}, 50);
}
type();
</script>
</div>