Copy-to-clipboard shortcode

This commit is contained in:
Thomas Smith 2022-10-17 11:57:23 -04:00
parent 4599f3fd96
commit b92877b6be

View file

@ -11,7 +11,62 @@
</div> </div>
</section> </section>
{{- partial "full-width-cta-split.html" . -}} <hr>
<!-- The text field -->
<input class="one-liner" type="text" value="$ sh <(curl tea.xyz) ci" id="myInput">
<!-- The button used to copy the text -->
<button class="clipboard-copy" onclick="myFunction()"><i class="icon-download-arrow"></i></button>
<style>
.one-liner{
width: 85%;
height: 8.371vw;
border-radius: 0px;
border: none;
background-color: #1a1a1a !important;
font-family: "pp-neue-machina";
color:#4d4d4d;
font-size: 2.1vw;
padding-left: 8.371vw;
}
.clipboard-copy{
height: 8.371vw;
width: 14%;
font-family: "pp-neue-machina";
color:#4d4d4d;
font-size: 2.1vw;
float:right;
background-color: #1a1a1a !important;
border: none;
}
.clipboard-copy:hover{
background-color: #00ffd0 !important;
color: #1a1a1a !important;
}
</style>
<script>
function myFunction() {
// Get the text field
var copyText = document.getElementById("myInput");
// Select the text field
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
// Copy the text inside the text field
navigator.clipboard.writeText(copyText.value);
// Alert the copied text
alert("Copied " + copyText.value + " to clipboard");
}
</script>
<section class="teal-bg"> <section class="teal-bg">
<div class="container tea-cli-container"> <div class="container tea-cli-container">