{{ 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()" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="icon-clipboard"></i></button>
  </div>
<hr>

{{- partial "clipboard-modal.html" -}}

<style>

  @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:#4d4d4d;
      font-size: 2vw;
      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%;
      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");*/
  }

</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">
    <div class="row">
      <h3>The new foundation of the internet.</h3>
    </div>
    <div class="row">
      <div class="col">
        <h4>Lorem ipsum dolor sit amet.</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="col">
        <h4>Lorem ipsum dolor sit amet.</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="col">
        <h4>Lorem ipsum dolor sit amet.</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <h4>Lorem ipsum dolor sit amet.</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="col">
        <h4>Lorem ipsum dolor sit amet.</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="col">
        <h4>Lorem ipsum dolor sit amet.</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
</section>

{{ end }}