www/src/layouts/page/package-detail.html

{{ define "main" }}

<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="package-thumbnail gray-bg">

        </div>
      </div>
      <div class="col">
        <h3>{{- .Title -}}</h3>
        {{ range where $.Site.Data.packages "name" .Title }}
          <p>{{- .desc -}}</p>
          {{ if not (eq .homepage "") }}
            {{- partial "detail-btn-large.html" .homepage -}}
          {{end}}
        {{ end }}
      </div>
    </div>
  </div>
</section>

<hr>

<!-- The text field -->
<code class="one-liner" data-lang="sh">$ sh <(curl tea.xyz) install</code>

<!-- 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>

<style>

  .package-thumbnail{
    width: 100%;
    height: 100%;
    background-color: gray;
  }

</style>

{{ end }}