mirror of
https://github.com/ivabus/www
synced 2024-11-23 01:35:06 +03:00
More animation work
This commit is contained in:
parent
2f4247c203
commit
ceb50100bb
1 changed files with 33 additions and 38 deletions
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue