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

First animation amended

Browse source
This commit is contained in:
Thomas Smith 2023-02-28 11:40:09 -05:00
parent 3ad61e1e98
commit d9cd98ebf6
2 changed files with 38 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/layouts/index.html
View file

@ -321,7 +321,7 @@
<div class="traffic-light"></div>
<div class="traffic-light"></div>
</div>
<div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
<div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3" style="position:relative;">
<code id="terminal-output-2">
<div style="margin-top: 15%;">
{{- partial "play-btn.html" -}}

70
src/layouts/partials/animation-1.html
View file

@ -1,38 +1,42 @@
<script>
const commands2 = [
{ input: "$ sh <(curl https://tea.xyz)<br>################################", output: `<br><br>k, we installed /Users/thomassmith/.tea/tea.xyz/v0.24.2/bin/tea` },
{ input: `<br><br>$ tea redis-cli ping<br>################################`, output: `<br>installed: ~/.tea/redis.io/v7.0.8<br><div class="comment-success p-2" style="position:relative; top:5px;"><code class="small"><i class="icon-check-circle"></i>tea installs 'redis' automagically.</code></div>` },
{ input: "", output: `<br><br>pong` },
];
const commands2 = [
{ input: '$ sh <(curl https://tea.xyz)<br>################################', output: '<br><br>k, we installed /Users/thomassmith/.tea/tea.xyz/v0.24.2/bin/tea' },
{ input: `<br><br>$ tea redis-cli ping<br>################################`, output: `<br>installed: ~/.tea/redis.io/v7.0.8<br><div class="comment-success p-2" style="position:relative; top:5px;"><code class="small"><i class="icon-check-circle"></i>tea installs 'redis' automagically.</code></div>` },
{ input: '', output: '<br>pong' },
];
let commandIndex2 = 0;
let command2 = commands2[commandIndex2];
let commandOutput2 = "";
let commandIndex2 = 0;
let command2 = commands2[commandIndex2];
let commandOutput2 = '';
function typeCommand2() {
if (commandIndex2 === commands2.length) {
return;
}
if (command2.input.length === 0) {
commandOutput2 += '\n' + command2.output + '\n';
document.querySelector("#terminal-output-2").innerHTML = commandOutput2;
commandIndex2++;
command2 = commands2[commandIndex2];
setTimeout(typeCommand2, 1000);
return;
}
commandOutput2 += command2.input[0];
command2.input = command2.input.slice(1);
document.querySelector("#terminal-output-2").innerHTML = commandOutput2;
setTimeout(typeCommand2, 100);
}
function typeCommand2() {
if (commandIndex2 === commands2.length) {
return;
}
if (command2.input.length === 0) {
commandOutput2 += '\n' + command2.output + '\n';
document.querySelector('#terminal-output-2').innerHTML = commandOutput2;
commandIndex2++;
command2 = commands2[commandIndex2];
setTimeout(typeCommand2, 1000);
return;
}
let char = command2.input[0];
if (char === '$') {
char = '<span class="purple">$</span>';
}
commandOutput2 += char;
command2.input = command2.input.slice(1);
document.querySelector('#terminal-output-2').innerHTML = commandOutput2;
setTimeout(typeCommand2, 100);
}
const observer2 = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
typeCommand2();
observer2.disconnect();
}
});
const target2 = document.querySelector("#terminal-output-2");
observer2.observe(target2);
const observer2 = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
typeCommand2();
observer2.disconnect();
}
});
const target2 = document.querySelector('#terminal-output-2');
observer2.observe(target2);
</script>