moved copy field below hero content

This commit is contained in:
Thomas Smith 2023-02-24 10:38:45 -05:00
parent 39bef25a34
commit 3d26698ca6
2 changed files with 36 additions and 35 deletions

View file

@ -129,7 +129,7 @@
<section class="hero one-box">
<div class="container">
<div class="row gx-5">
<div class="row gx-5 mb-5">
<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>
@ -144,17 +144,49 @@
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
<div>
<p class="install-label">Install tea by running our one-liner</p>
</div>
<div class="terminal-animation mb-3">
{{- partial "hero-terminal-animation.html" -}}
</div>
</div>
</div>
<hr class="mb-3">
<div class="row">
<div class="col">
<p class="install-label text-center">Install tea by running our one-liner:</p>
<div class="flex pt-2 pb-2 ps-4 pe-2 mb-4 black-bg" 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>
</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>
<style>
.term-icon{

View file

@ -1,8 +1,3 @@
<div class="flex pt-2 pb-2 ps-4 pe-2 mb-4 black-bg" 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 class="terminal flex">
<div class="terminal-bar black-bg flex-start p-1 ps-3">
<div class="traffic-light"></div>
@ -63,29 +58,3 @@
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>