mirror of
https://github.com/ivabus/www
synced 2024-11-22 19:45:06 +03:00
More animation
This commit is contained in:
Thomas Smith
parent
d377a9449b
commit
47d38977df
3 changed files with 101 additions and 64 deletions
|
|
@ -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! 😎<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
62
src/layouts/partials/hero-terminal-animation.html
Normal 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! 😎<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
32
src/layouts/partials/tea-magic-terminal-animation.html
Normal 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! 😎<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>
|
||||
Loading…
Reference in a new issue