www/src/layouts/page/tea-cli.html

{{ define "main" }}

<section class="tea-cli">
  <div class="container tea-cli-container">
    <div class="row">
      <div class="col my-auto">
        <h1>TEA CLI</h1>
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
</section>

<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()"><i class="icon-clipboard"></i></button>
  </div>
<hr>

<style>

  @media only screen and (min-width: 1200px) {

    .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: 4.185vw;
      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;
    }

  }

  @media only screen and (min-width: 992px) and (max-width: 1200px) {

    .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: 4.185vw;
      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;
    }

  }

  @media only screen and (min-width: 768px) and (max-width: 992px) {

    .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: 4.185vw;
      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;
    }

  }

  @media only screen and (min-width: 576px) and (max-width: 768px) {

    .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: 4.185vw;
      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;
    }

  }

  @media only screen and (max-width: 576px) {

    .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: 4.185vw;
      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");
  }

</script>

<section class="teal-bg">
  <div class="container tea-cli-container">
    <div class="row">
      <div class="col">
        <p class="black text-center">TOTAL DOWNLOADS</p>
        <p class="black text-center tea-cli-data"><span id="tea-cli-downloads">612,085</span></p>
      </div>
      <div class="col">
        <p class="black text-center">FOR THIS VERSION</p>
        <p class="black text-center tea-cli-data"><span id="tea-cli-ver-downloads">612,085</span></p>
      </div>
    </div>
  </div>
</section>

<style>
  .tea-cli-data{
    font-size: 6.138vw;
    font-family: "pp-neue-machina";
  }
</style>

<section>
  <div class="container">
    <h2>Versions</h2>
  </div>
  <hr>
  {{- partial "tea-cli-accordion.html" . -}}
</section>

{{ end }}