www/src/layouts/partials/clipboard-copy.html

<hr>
  <div class="row button-container">
    <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" onclick="myFunction()" id="copy-icon"><i class="icon-clipboard"></i></button>
  </div>
<hr>


<style>

  .one-liner{
    width: 85%;
    padding: 2.455vw 4.185vw;
    border-radius: 0px;
    border: none;
    background-color: #1a1a1a !important;
    font-family: "pp-neue-machina";
    color:#4d4d4d;
    font-size: 2.1vw;
    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{
    height: 8.371vw;
    width: 14%;
    font-family: "pp-neue-machina";
    color:#4d4d4d;
    font-size: 2.1vw;
    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;
  }

</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");

    // Copy icon
    document.getElementById("copy-icon").innerHTML = "copied!";
  }

</script>