From b92877b6be07fea8469d3d4b9c5b538df267232f Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Mon, 17 Oct 2022 11:57:23 -0400
Subject: [PATCH] Copy-to-clipboard shortcode

---
 src/layouts/page/tea-cli.html | 57 ++++++++++++++++++++++++++++++++++-
 1 file changed, 56 insertions(+), 1 deletion(-)

diff --git a/src/layouts/page/tea-cli.html b/src/layouts/page/tea-cli.html
index dc0b796..8a0dee2 100644
--- a/src/layouts/page/tea-cli.html
+++ b/src/layouts/page/tea-cli.html
@@ -11,7 +11,62 @@
   </div>
 </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">
   <div class="container tea-cli-container">