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

Updates to content and terminal animation

Browse source
This commit is contained in:
Thomas Smith 2023-02-09 16:44:19 -05:00
parent 594f37c959
commit 872b5447e4
2 changed files with 66 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/layouts/index.html
View file

@ -3,6 +3,26 @@
<!-- Hero Section -->
<style>
.comment{
background-color: #ff4100;
border-radius: 5px;
}
.comment-success{
background-color: #00ffd0;
border-radius: 5px;
}
.comment-process{
background-color: #ffff00;
border-radius: 5px;
}
.comment-success code{
color: #1a1a1a;
}
.hero{
background-image: url("/Images/hero-background-mountains.png") !important;
background-attachment: scroll;
@ -112,7 +132,7 @@
<div class="hero-col col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 my-auto">
<h1 class="display-1 hero-text" style="z-index:3; position: relative;"><span class="inner-glow ">Invisible</span> yet <span class="callout white">powerful</span></h1>
<p class="lead hero-lead">Upgrade to Tea - the revolutionary, cross-platform package manager. Say goodbye to slow & clunky, and say hello to fast & smooth updates. From the creator of Brew.</p>
<p class="lead mobile-lead mb-5">tea/cli... from the creator of <a href="https://brew.sh/" target="_blank">brew</a></p>
<p class="lead mobile-lead mb-5">tea... from the creator of <a href="https://brew.sh/" target="_blank">brew</a></p>
<p class="mb-5 hero-description">Introducing tea, the cross-platform package manager of the future. Say goodbye to slow package managers. With tea, simply type commands and it takes care of the rest. Get the latest version easily and support specific tool versions for different projects. Encoding dependencies in the README makes it readable by humans and tea, providing easier access for users. Experience better package management with tea.</p>
<div class="mobile-ctas">
@ -152,11 +172,6 @@
margin-right: 5px;
}
#hero-terminal-content{
min-height: 0px !important;
max-height: none !important;
}
.terminal{
height: auto;
min-height: 40%;
@ -198,13 +213,16 @@
#terminal-output {
white-space: pre;
display: inline-block;
width: 100%;
}
#terminal-input {
position: relative;
display: inline-block;
witdth: 100%;
}
.terminal-content{
overflow: hidden;
width: 100%;
}
</style>

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

@ -17,67 +17,53 @@
</div>
</div>
<style>
.icon-exclamation-circle,
.icon-check-circle{
position: relative;
top:2px;
margin-right:5px;
}
</style>
<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>` },
];
const commands = [
{ input: "$ node --eval 'console.log(\"Hello World!\")'", output: `<span class="mb-5">command not found: node</span><br><div class="comment p-2" style="position:relative; top:5px;"><code class="small"><i class="icon-exclamation-circle"></i>Node is not installed, thus command is not found</code></div>`},
{ input: "$ sh <(curl tea.xyz) --yes<br><span class='grid-gray'>############################################################</span>", output: ``},
{ input: "$ node --eval 'console.log(\"Hello World!\")'", output: `tea: installing nodejs.org^19` },
{ input: "", output: `Hello World! &#128526;<br><div class="comment-success p-2" style="position:relative; top:5px;"><code class="small"><i class="icon-check-circle"></i>tea magically installs needed dependencies</code></div>` },
];
let commandIndex = 0;
let command = commands[commandIndex];
let commandOutput = "";
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);
function typeCommand() {
if (commandIndex === commands.length) {
return;
}
if (command.input.length === 0) {
setTimeout(() => {
commandOutput += '\n' + command.output + '\n';
document.querySelector("#terminal-output").innerHTML = commandOutput;
setTimeout(typeCommand, 100);
}
commandIndex++;
command = commands[commandIndex];
setTimeout(typeCommand, 1000);
}, 1000);
return;
}
commandOutput += command.input[0];
command.input = command.input.slice(1);
document.querySelector("#terminal-output").innerHTML = commandOutput;
setTimeout(typeCommand, 100);
}
typeCommand();
</script>
typeCommand();
</script>
<script>