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

More animation

Browse source
This commit is contained in:
Thomas Smith 2023-01-26 15:49:04 -05:00
parent d377a9449b
commit 47d38977df
3 changed files with 101 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
src/layouts/index.html
View file

@ -43,6 +43,8 @@
</div>
</section>
{{- partial "hero-terminal-animation.html" -}}
<style>
@media only screen and (min-width: 1200px) {
@ -609,12 +611,16 @@
<div class="traffic-light"></div>
</div>
<div class="terminal-content p-5">
<p class="teal small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="terminal-content">
<p id="terminal-display"></p>
</div>
</div>
</div>
</div>
</div>
<!-- {{- partial "tea-magic-terminal-animation.html" -}} -->
<!-- Second -->
<div class="row feature-row p-xl-5 p-lg-5 p-md-3 p-sm-1 p-3 one-box-down">
@ -877,69 +883,6 @@
<div class="row">
<div class="col">
<script>
const commands = [
{ input: "$ node --eval 'console.log(\"Hello World!\")'", output: `command not found: node<br><span class="dark-gray">#Node is not installed, thus command is not found :/ ...</span><br>` },
{ input: "$ sh <(curl tea.xyz) --yes", output: `installing ~/.tea...<br><table class="teal">
<thead>
<tr>
<th>% Total</th>
<th>% Received</th>
<th>% Xferd</th>
<th>Average Speed</th>
<th>Time</th>
<th>Time</th>
<th>Time</th>
<th>Current</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>13306</td>
<td>100</td>
<td>54983</td>
<td>0</td>
<td>--:--:--</td>
<td>--:--:--</td>
<td>--:--:--</td>
</tr>
<tr>
<td colspan="8">k, we installed <mark>/Users/userName/.tea/tea.xyz/v0.21.0/bin/tea</mark></td>
</tr>
</tbody>
</table>
` },
{ input: "$ node --eval 'console.log(\"Hello World!\")'", output: `tea: installing nodejs.org^19<br><span class="dark-gray">#tea magically installs needed dependencies...</span>` },
{ input: "", output: `Hello World! &#128526;<br><span class="dark-gray">#and tah-dah!</span>` },
];
let commandIndex = 0;
let command = commands[commandIndex];
let commandOutput = "";
function typeCommand() {
if (commandIndex === commands.length) {
return;
}
if (command.input.length === 0) {
commandOutput += '\n' + command.output + '\n';
document.querySelector("#terminal-output").innerHTML = commandOutput;
commandIndex++;
command = commands[commandIndex];
setTimeout(typeCommand, 1000);
return;
}
commandOutput += command.input[0];
command.input = command.input.slice(1);
document.querySelector("#terminal-output").innerHTML = commandOutput;
setTimeout(typeCommand, 100);
}
typeCommand();
</script>
</div>
</div>
</div>

62
src/layouts/partials/hero-terminal-animation.html Normal file
View file

@ -0,0 +1,62 @@
<script>
const commands = [
{ input: "$ node --eval 'console.log(\"Hello World!\")'", output: `command not found: node<br><span class="dark-gray">#Node is not installed, thus command is not found :/ ...</span><br>` },
{ input: "$ sh <(curl tea.xyz) --yes", output: `installing ~/.tea...<br><table class="teal">
<thead>
<tr>
<th>% Total</th>
<th>% Received</th>
<th>% Xferd</th>
<th>Average Speed</th>
<th>Time</th>
<th>Time</th>
<th>Time</th>
<th>Current</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>13306</td>
<td>100</td>
<td>54983</td>
<td>0</td>
<td>--:--:--</td>
<td>--:--:--</td>
<td>--:--:--</td>
</tr>
<tr>
<td colspan="8">k, we installed <mark>/Users/userName/.tea/tea.xyz/v0.21.0/bin/tea</mark></td>
</tr>
</tbody>
</table>
` },
{ input: "$ node --eval 'console.log(\"Hello World!\")'", output: `tea: installing nodejs.org^19<br><span class="dark-gray">#tea magically installs needed dependencies...</span>` },
{ input: "", output: `Hello World! &#128526;<br><span class="dark-gray">#and tah-dah!</span>` },
];
let commandIndex = 0;
let command = commands[commandIndex];
let commandOutput = "";
function typeCommand() {
if (commandIndex === commands.length) {
return;
}
if (command.input.length === 0) {
commandOutput += '\n' + command.output + '\n';
document.querySelector("#terminal-output").innerHTML = commandOutput;
commandIndex++;
command = commands[commandIndex];
setTimeout(typeCommand, 1000);
return;
}
commandOutput += command.input[0];
command.input = command.input.slice(1);
document.querySelector("#terminal-output").innerHTML = commandOutput;
setTimeout(typeCommand, 100);
}
typeCommand();
</script>

32
src/layouts/partials/tea-magic-terminal-animation.html Normal file
View file

@ -0,0 +1,32 @@
<script>
const arrCommands = [
{ input: "$ python --eval 'print(\"Hello World!\")'", output: `command not found: python<br><span class="dark-gray">#Python is not installed, thus command is not found :/ ...</span><br>` },
{ input: "$ sh <(curl mysite.com) --yes", output: `installing ~/.mysite...`},
{ input: "$ python --eval 'print(\"Hello World!\")'", output: `mysite: installing python.org^19<br><span class="dark-gray">#mysite magically installs needed dependencies...</span>` },
{ input: "", output: `Hello World! &#128526;<br><span class="dark-gray">#and tah-dah!</span>` },
];
let intCommandIndex = 0;
let objCommand = arrCommands[intCommandIndex];
let strCommandOutput = "";
function typeCommand() {
if (intCommandIndex === arrCommands.length) {
return;
}
if (objCommand.input.length === 0) {
strCommandOutput += '\n' + objCommand.output + '\n';
document.querySelector("#terminal-display").innerHTML = strCommandOutput;
intCommandIndex++;
objCommand = arrCommands[intCommandIndex];
setTimeout(typeCommand, 1000);
return;
}
strCommandOutput += objCommand.input[0];
objCommand.input = objCommand.input.slice(1);
document.querySelector("#terminal-display").innerHTML = strCommandOutput;
setTimeout(typeCommand, 100);
}
typeCommand();
</script>