mirror of
https://github.com/ivabus/www
synced 2024-11-22 14:45:05 +03:00
Conslidating to partials
This commit is contained in:
Thomas Smith
parent
14d015ee79
commit
4e6f3df249
3 changed files with 200 additions and 198 deletions
|
|
@ -88,158 +88,18 @@
|
|||
<h1 class="display-1" style="z-index:3; position: relative;"><span class="inner-glow ">Invisible</span> yet <span class="callout white">powerful</span></h1>
|
||||
<p class="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="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>
|
||||
<!-- Desktop CTA's -->
|
||||
<div class="row mb-3 desktop-ctas">
|
||||
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mb-3">
|
||||
<a href="https://github.com/teaxyz/cli">
|
||||
<button class="hbtn hb-fill-right" style="width:100% !important;"><i class="icon-tea-logo-iconasset-1"></i>INSTALL TEA (<span class="release" style="text-transform:lowercase;"></span>)</button>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mb-3">
|
||||
<a href="https://github.com/teaxyz/cli">
|
||||
<button class="hbtn-light hb-light-fill-right" style="width:100% !important;"><i class="icon-github" style="position:relative;top:2px;"></i>GITHUB (☆<span class="stargazers" style="text-transform: lowercase;"></span>)</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile CTA's -->
|
||||
<div class="row mb-3 mt-5 mobile-ctas">
|
||||
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mb-3">
|
||||
<form id="subscribeForm">
|
||||
<div class="mb-3">
|
||||
<input class="p-3 text-center" placeholder="Enter your email" type="email" id="email" required>
|
||||
</div>
|
||||
<button class="hbtn hb-fill-right" style="width:100%;" id="email-btn" type="submit">Subscribe</button>
|
||||
</form>
|
||||
<div id="formResponse"></div>
|
||||
</div>
|
||||
|
||||
<div class="or-divider flex">
|
||||
<hr>
|
||||
<p class="small grid-gray">or</p>
|
||||
<hr>
|
||||
</div>
|
||||
{{- partial "main-ctas.html" -}}
|
||||
|
||||
<style>
|
||||
#email{
|
||||
width:100%;
|
||||
height: 60px;
|
||||
background-color: #1a1a1a;
|
||||
border: 1.5px solid #949494;
|
||||
color: white;
|
||||
font-family: "inter", sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#email-btn{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const subscribeForm = document.getElementById('subscribeForm');
|
||||
const formResponse = document.getElementById('formResponse');
|
||||
|
||||
subscribeForm.addEventListener('submit', (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const email = document.getElementById('email').value;
|
||||
|
||||
if (!email) {
|
||||
formResponse.innerHTML = '<p style="color: red">Please enter a valid email address.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
fetch('https://manage.klaviyo.com/api/v1/list/R2UVm3/members', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email: email,
|
||||
api_key: 'pk_231a258e61a40283566192ee59310c7af4'
|
||||
})
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to subscribe');
|
||||
}
|
||||
formResponse.innerHTML = '<p style="color: green">Form submitted!</p>';
|
||||
})
|
||||
.catch(error => {
|
||||
formResponse.innerHTML = '<p style="color: red">An error occurred. Please try again later.</p>';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="col">
|
||||
<button class="hbtn-light hb-light-fill-right mb-4" id="follow-button" style="width:100%; text-transform:uppercase;"><i class="icon-twitter" style="position:relative;top:2px;"></i>Follow Us on Twitter</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Deep-linking script for Twitter follow button -->
|
||||
<script>
|
||||
document.getElementById("follow-button").addEventListener("click", function() {
|
||||
if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
|
||||
window.location.href = "twitter://user?screen_name=teaxyz";
|
||||
} else if (navigator.userAgent.match(/Android/i)) {
|
||||
window.location.href = "twitter://user?screen_name=teaxyz";
|
||||
} else {
|
||||
window.location.href = "https://twitter.com/teaxyz";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<p class="small dark-gray mb-5 boilerplate">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>
|
||||
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
|
||||
<div class="terminal flex">
|
||||
<div class="terminal-bar black-bg flex-start p-1 ps-3">
|
||||
<div class="traffic-light"></div>
|
||||
<div class="traffic-light"></div>
|
||||
<div class="traffic-light"></div>
|
||||
</div>
|
||||
<div class="flex p-2" style="border-bottom: 1px solid gray;">
|
||||
<div class="flex pt-2 pb-2 ps-4 pe-2" style="width: 100%; border: 1px solid #949494; border-radius: 5px;">
|
||||
<code id="copy-text" class="white">sh <(curl tea.xyz)</code>
|
||||
<button class="hbtn hb-fill-right" id="copy-button">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div class="terminal-content">
|
||||
<code id="terminal-output"></code>
|
||||
<p id="terminal-input"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{- partial "hero-terminal-animation.html" -}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
|
||||
$("#copy-button").on("click", function() {
|
||||
var copyText = "sh <(curl https://tea.xyz)";
|
||||
var tempInput = document.createElement("input");
|
||||
tempInput.style = "position: absolute; left: -1000px; top: -1000px";
|
||||
tempInput.value = copyText;
|
||||
document.body.appendChild(tempInput);
|
||||
tempInput.select();
|
||||
document.execCommand("copy");
|
||||
document.body.removeChild(tempInput);
|
||||
|
||||
// Change the button text to 'Copied'
|
||||
var button = $("#copy-button");
|
||||
var originalText = button.text();
|
||||
button.text("Copied!");
|
||||
|
||||
// Change the button text back to original after 5 seconds
|
||||
setTimeout(function() {
|
||||
button.text(originalText);
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
{{- partial "hero-terminal-animation.html" -}}
|
||||
|
||||
<style>
|
||||
|
||||
.term-icon{
|
||||
|
|
|
|||
|
|
@ -1,62 +1,106 @@
|
|||
<div class="terminal flex">
|
||||
<div class="terminal-bar black-bg flex-start p-1 ps-3">
|
||||
<div class="traffic-light"></div>
|
||||
<div class="traffic-light"></div>
|
||||
<div class="traffic-light"></div>
|
||||
</div>
|
||||
<div class="flex p-2" style="border-bottom: 1px solid gray;">
|
||||
<div class="flex pt-2 pb-2 ps-4 pe-2" style="width: 100%; border: 1px solid #949494; border-radius: 5px;">
|
||||
<code id="copy-text" class="white">sh <(curl tea.xyz)</code>
|
||||
<button class="hbtn hb-fill-right" id="copy-button">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div class="terminal-content">
|
||||
<code id="terminal-output"></code>
|
||||
<p id="terminal-input"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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>` },
|
||||
];
|
||||
{ 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 = "";
|
||||
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);
|
||||
}
|
||||
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>
|
||||
typeCommand();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
$("#copy-button").on("click", function() {
|
||||
var copyText = "sh <(curl https://tea.xyz)";
|
||||
var tempInput = document.createElement("input");
|
||||
tempInput.style = "position: absolute; left: -1000px; top: -1000px";
|
||||
tempInput.value = copyText;
|
||||
document.body.appendChild(tempInput);
|
||||
tempInput.select();
|
||||
document.execCommand("copy");
|
||||
document.body.removeChild(tempInput);
|
||||
|
||||
// Change the button text to 'Copied'
|
||||
var button = $("#copy-button");
|
||||
var originalText = button.text();
|
||||
button.text("Copied!");
|
||||
|
||||
// Change the button text back to original after 5 seconds
|
||||
setTimeout(function() {
|
||||
button.text(originalText);
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
|
|||
98
src/layouts/partials/main-ctas.html
Normal file
98
src/layouts/partials/main-ctas.html
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
<!-- Desktop CTA's -->
|
||||
<div class="row mb-3 desktop-ctas">
|
||||
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mb-3">
|
||||
<a href="https://github.com/teaxyz/cli">
|
||||
<button class="hbtn hb-fill-right" style="width:100% !important;"><i class="icon-tea-logo-iconasset-1"></i>INSTALL TEA (<span class="release" style="text-transform:lowercase;"></span>)</button>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mb-3">
|
||||
<a href="https://github.com/teaxyz/cli">
|
||||
<button class="hbtn-light hb-light-fill-right" style="width:100% !important;"><i class="icon-github" style="position:relative;top:2px;"></i>GITHUB (☆<span class="stargazers" style="text-transform: lowercase;"></span>)</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile CTA's -->
|
||||
<div class="row mb-3 mt-5 mobile-ctas">
|
||||
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mb-3">
|
||||
<form id="subscribeForm">
|
||||
<div class="mb-3">
|
||||
<input class="p-3 text-center" placeholder="Enter your email" type="email" id="email" required>
|
||||
</div>
|
||||
<button class="hbtn hb-fill-right" style="width:100%;" id="email-btn" type="submit">Subscribe</button>
|
||||
</form>
|
||||
<div id="formResponse"></div>
|
||||
</div>
|
||||
|
||||
<div class="or-divider flex">
|
||||
<hr>
|
||||
<p class="small grid-gray">or</p>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#email{
|
||||
width:100%;
|
||||
height: 60px;
|
||||
background-color: #1a1a1a;
|
||||
border: 1.5px solid #949494;
|
||||
color: white;
|
||||
font-family: "inter", sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#email-btn{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const subscribeForm = document.getElementById('subscribeForm');
|
||||
const formResponse = document.getElementById('formResponse');
|
||||
|
||||
subscribeForm.addEventListener('submit', (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const email = document.getElementById('email').value;
|
||||
|
||||
if (!email) {
|
||||
formResponse.innerHTML = '<p style="color: red">Please enter a valid email address.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
fetch('https://manage.klaviyo.com/api/v1/list/R2UVm3/members', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email: email,
|
||||
api_key: 'pk_231a258e61a40283566192ee59310c7af4'
|
||||
})
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to subscribe');
|
||||
}
|
||||
formResponse.innerHTML = '<p style="color: green">Form submitted!</p>';
|
||||
})
|
||||
.catch(error => {
|
||||
formResponse.innerHTML = '<p style="color: red">An error occurred. Please try again later.</p>';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="col">
|
||||
<button class="hbtn-light hb-light-fill-right mb-4" id="follow-button" style="width:100%; text-transform:uppercase;"><i class="icon-twitter" style="position:relative;top:2px;"></i>Follow Us on Twitter</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Deep-linking script for Twitter follow button -->
|
||||
<script>
|
||||
document.getElementById("follow-button").addEventListener("click", function() {
|
||||
if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
|
||||
window.location.href = "twitter://user?screen_name=teaxyz";
|
||||
} else if (navigator.userAgent.match(/Android/i)) {
|
||||
window.location.href = "twitter://user?screen_name=teaxyz";
|
||||
} else {
|
||||
window.location.href = "https://twitter.com/teaxyz";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in a new issue