Converted clipboard copy cta to partial

src/layouts/index.html

@@ -41,7 +41,7 @@
   </div>
 </section>
   <div class="full-width-cta-container">
-   {{- partial "full-width-cta.html" . -}}
+   {{- partial "clipboard-copy.html" . -}}
   </div>
   <div class="hero-bottom">
 

src/layouts/page/tea-cli.html

@@ -24,174 +24,7 @@
 
 </style>
 
-<hr>
+{{- partial "clipboard-copy.html" -}}
-  <div class="row button-container" onclick="myFunction()" style="display:flex; justify-content:space-between;">
-    <input class="one-liner" type="text" value="$ sh <(curl tea.xyz) install&nbsp;{{- .Title -}}" id="myInput" readonly>
-
-    <!-- The button used to copy the text -->
-    <button class="clipboard-copy" id="copy-icon" onclick="myFunction()" data-bs-toggle="modal" data-bs-target="#exampleModal"><u>copy</u></button>
-  </div>
-<hr>
-
-<section class="animated-25" id="reveal" style="display:none;">
-  <div class="container">
-    <div class="row">
-      <div class="col">
-        <p class="text-center">Have you <a href="#">authenticated with tea</a>?</p>
-      </div>
-    </div>
-  </div>
-</section>
-
-<style>
-
-  #reveal{
-    transition: 0.2s linear;
-  }
-
-  @media only screen and (min-width: 768px) {
-
-    .one-liner{
-      width: 85%;
-      padding: 2.455vw 4.185vw;
-      border-radius: 0px;
-      border: none;
-      background-color: #1a1a1a !important;
-      font-family: "pp-neue-machina";
-      color:#ffffff;
-      font-size: 2vw;
-      border-left: 2px solid #949494;
-    }
-
-    .one-liner:focus{
-      border:none;
-      outline: none;
-      border-left: 2px solid #949494;
-    }
-
-    .clipboard-copy{
-      height: 8.371vw;
-      width: 14%;
-      font-family: "pp-neue-machina";
-      color:#ffffff;
-      font-size: 2.1vw;
-      float:right !important;
-      background-color: #1a1a1a !important;
-      border: none;
-      border-right: 2px solid #949494;
-      transition: 0.2s linear;
-    }
-
-    .clipboard-copy:hover{
-      background-color: #00ffd0 !important;
-      color: #1a1a1a !important;
-      box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
-    }
-
-  }
-
-  @media only screen and (min-width: 576px) and (max-width: 768px) {
-
-    .one-liner{
-      width: 85%;
-      padding: 5vw 4vw;
-      border-radius: 0px;
-      border: none;
-      background-color: #1a1a1a !important;
-      font-family: "pp-neue-machina";
-      color:#4d4d4d;
-      font-size: 3.5vw;
-      border-left: 2px solid #949494;
-      border-right: 2px solid #949494;
-    }
-
-    .one-liner:focus{
-      border:none;
-      outline: none;
-      border-left: 2px solid #949494;
-      border-right: 2px solid #949494;
-    }
-
-    .clipboard-copy{
-      padding: 5vw 4vw;
-      width: 14%;
-      font-family: "pp-neue-machina";
-      color:#4d4d4d;
-      font-size: 3.5vw;
-      float:right;
-      background-color: #1a1a1a !important;
-      border: none;
-      border-right: 2px solid #949494;
-      transition: 0.2s linear;
-    }
-
-    .clipboard-copy:hover{
-      background-color: #00ffd0 !important;
-      color: #1a1a1a !important;
-      box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
-    }
-
-  }
-
-  @media only screen and (max-width: 576px) {
-
-    .one-liner{
-      width: 100%;
-      padding: 7.5vw 7.5vw !important;
-      border-radius: 0px;
-      border: none;
-      background-color: #1a1a1a !important;
-      font-family: "pp-neue-machina";
-      color:#4d4d4d;
-      text-align: center !important;
-      font-size: 4vw;
-      border-left: 2px solid #949494;
-      border-right: 2px solid #949494;
-    }
-
-    .one-liner:focus{
-      border:none;
-      outline: none;
-      border-left: 2px solid #949494;
-      border-right: 2px solid #949494;
-    }
-
-    .clipboard-copy{
-      display: none;
-    }
-
-  }
-
-</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");*/
-
-    //Change button text to 'copied'
-    document.getElementById("copy-icon").innerHTML = "copied!";
-
-    // Reveal Auth text
-    if (document.getElementById("reveal").style.display = "none") {
-      document.getElementById("reveal").style.display = "block";
-    } else {
-      document.getElementById("reveal").style.display = "none";
-    }
-  }
-
-</script>
 
 <section class="teal-bg two-boxes">
   <div class="container">

src/layouts/partials/clipboard-copy.html

@@ -1,24 +1,71 @@
 <hr>
-  <div class="row button-container">
+  <div class="row button-container" onclick="myFunction()" style="display:flex; justify-content:space-between;">
-    <input class="one-liner" type="text" value="$ sh <(curl tea.xyz) install&nbsp;{{- .Title -}}" id="myInput" readonly>
+    <input class="one-liner" type="text" value="$ sh <(curl tea.xyz)" id="myInput" readonly>
 
     <!-- The button used to copy the text -->
-    <button class="clipboard-copy" onclick="myFunction()" id="copy-icon"><i class="icon-clipboard"></i></button>
+
+    <button class="clipboard-copy" id="copy-icon" onclick="myFunction()" data-bs-toggle="modal" data-bs-target="#exampleModal">copy</button>
   </div>
 <hr>
 
-
 <style>
 
+  .button-container{
+    background-color: #1a1a1a;
+  }
+
+  @media only screen and (min-width: 768px) {
+
     .one-liner{
-    width: 85%;
+      width: 80%;
       padding: 2.455vw 4.185vw;
       border-radius: 0px;
       border: none;
       background-color: #1a1a1a !important;
       font-family: "pp-neue-machina";
-    color:#4d4d4d;
+      color:#ffffff;
+      font-size: 2vw;
+      border-left: 2px solid #949494;
+    }
+
+    .one-liner:focus{
+      border:none;
+      outline: none;
+      border-left: 2px solid #949494;
+    }
+
+    .clipboard-copy{
+      height: 8.371vw;
+      width: 18%;
+      font-family: "pp-neue-machina";
+      color:#ffffff;
       font-size: 2.1vw;
+      float:right !important;
+      background-color: #1a1a1a !important;
+      border: none;
+      border-right: 2px solid #949494;
+      transition: 0.2s linear;
+    }
+
+    .clipboard-copy:hover{
+      background-color: #00ffd0 !important;
+      color: #1a1a1a !important;
+      box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
+    }
+
+  }
+
+  @media only screen and (min-width: 576px) and (max-width: 768px) {
+
+    .one-liner{
+      width: 85%;
+      padding: 5vw 4vw;
+      border-radius: 0px;
+      border: none;
+      background-color: #1a1a1a !important;
+      font-family: "pp-neue-machina";
+      color:#4d4d4d;
+      font-size: 3.5vw;
       border-left: 2px solid #949494;
       border-right: 2px solid #949494;
     }
@@ -31,11 +78,11 @@
     }
 
     .clipboard-copy{
-    height: 8.371vw;
+      padding: 5vw 4vw;
       width: 14%;
       font-family: "pp-neue-machina";
       color:#4d4d4d;
-    font-size: 2.1vw;
+      font-size: 3.5vw;
       float:right;
       background-color: #1a1a1a !important;
       border: none;
@@ -49,6 +96,37 @@
       box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
     }
 
+  }
+
+  @media only screen and (max-width: 576px) {
+
+    .one-liner{
+      width: 100%;
+      padding: 7.5vw 7.5vw !important;
+      border-radius: 0px;
+      border: none;
+      background-color: #1a1a1a !important;
+      font-family: "pp-neue-machina";
+      color:#4d4d4d;
+      text-align: center !important;
+      font-size: 4vw;
+      border-left: 2px solid #949494;
+      border-right: 2px solid #949494;
+    }
+
+    .one-liner:focus{
+      border:none;
+      outline: none;
+      border-left: 2px solid #949494;
+      border-right: 2px solid #949494;
+    }
+
+    .clipboard-copy{
+      display: none;
+    }
+
+  }
+
 </style>
 
 <script>
@@ -64,11 +142,12 @@
      // Copy the text inside the text field
     navigator.clipboard.writeText(copyText.value);
 
-    // Alert the copied text
+    /* Alert the copied text
-    alert("Copied " + copyText.value + " to clipboard");
+    alert("Copied " + copyText.value + " to clipboard");*/
 
-    // Copy icon
+    //Change button text to 'copied'
     document.getElementById("copy-icon").innerHTML = "copied!";
+
   }
 
 </script>