clipboard-copy-package-detail.html

<div class="row mt-3 mb-3" onclick="myFunction()">
    <div class="col">
      <div class="input-container p-1" style="display:flex; justify-content:space-between;">
        <input class="one-liner ms-3" type="text" value="sh <(curl tea.xyz) +{{- .full_name -}}&nbsp;sh" id="shortcodeCopy" readonly>

        <!-- The button used to copy the text -->

        <button type="button" class="clipboard-copy hbtn hb-fill-right" id="liveToastBtn" onclick="changeCopied()">copy</button>
      </div>
    </div>
  </div>

<style>
    .one-liner{
      width:75%;
      height:100%;
      background-color:#1a1a1a;
      border:none;
      color: #fff;
    }
    .one-liner:focus{
      box-shadow:none!important;
      outline:none;
      border:none !important;
    }
    .clipboard-copy{
      width:25%;
      height:100%;
    }
    .input-container{
      width:100%;
      border: 2px solid gray;
      border-radius: 7px;
      height:60px;

    }
</style>


<script>

  function changeCopied() {
    // Get the text field
    var copyText = document.getElementById("shortcodeCopy");
    var copiedValue = "sh <(curl https://tea.xyz)";

    // Select the text field
    copyText.select();
    copyText.setSelectionRange(0, 99999); // For mobile devices

     // Copy the text inside the text field
    navigator.clipboard.writeText(copiedValue + " +{{- .full_name -}}" + " " + "sh");

    document.getElementById("liveToastBtn").innerHTML = "copied!";

  }

</script>