www/src/layouts/page/white-paper.html

{{ define "main" }}

<!-- Hero Section -->

  <img style="display:none;" id="tea-steam-dark-1" src="/Images/tea-steam-dark-1.svg" alt="">
  <img id="tea-steam-dark-2" src="/Images/tea-steam-dark-2.svg" alt="">
  <div class="container mb-lg-2 mb-md-5 mb-sm-0 mb-0 mt-lg-2 mt-md-5 mt-sm-0 mt-0">
    <div class="row hero my-auto">
      <div style="z-index:100; display:flex; flex-direction:column;" class="col-lg-9 col-sm-12">
        <div style="margin-top:auto; margin-bottom:auto;">
          <h1 class="display-3 mb-4">We’re Open&#8208;Sourcing Our White Paper</h1>
          <p class="mb-5 fs-sm-5 fs-lg-6 lead">Open&#8208;source is about the many coming together to create something
            great. In the spirit of that, we’re inviting developers, speculators, and enthusiasts alike to contribute to
            our white paper and help brew the future of the internet. This is our revolutionary undertaking to create
            equitable open&#8208;source for web3, and we want you to be a part of laying its groundwork.<br><a
              style="color:#54BAAB;" href="https://tea.xyz/tea.white-paper.pdf">Download our white paper</a>.</p>
        </div>
      </div>
      <div style="display:flex; flex-direction:column;" class="col-lg-3 col-sm-12">
        <div style="margin-top:auto; z-index:100;">
          <a class="btn btn-primary mb-3" href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz"
            role="button">Authenticate with tea</a><br>
          <a class="btn btn-primary align-middle mb-sm-5 mb-md-5 mb-5" id="whitepaper-btn"
            href="https://github.com/teaxyz/white-paper" role="button"><i class="bi bi-github me-2" style="font-size:16px; "></i>Contribute to Our White Paper</a>
        </div>
      </div>
    </div>
    <div class="row">
      <hr>
        <div class="col mb-4 mt-3">
          <h4>Our white paper is available in multiple languages</h4>
          <p>Thanks to the tea community's generosity and time, our white paper is available in several world languages. Select your preferred language from the dropdown menu.</p>
          <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle languages" type="button" data-bs-toggle="dropdown" aria-expanded="false">
              Choose a Language
            </button>
            <ul class="dropdown-menu" id="language-selector"></ul>
          </div>
        </div>
      </div>
    </div>

    <script>
      const versions = [
        ['English', ''],
        ['Bahasa Indonesia', '_id'],
        ['беларускі', '_be'],
        ['Deutsch', '_de'],
        ['官话', '_zh']
      ];

      document.addEventListener('DOMContentLoaded', function () {
        for (const lang of versions) {

          $('#language-selector').append("<li><a class=\"dropdown-item\" onclick=\"go(\'" + lang[1] + "')\">" + lang[0] + "</a></li>");
        }
      }, false);

      function go(suffix) {
        const url = 'https://tea.xyz/tea.white-paper' + suffix + '.pdf';
        document.getElementById('wp-iframe').setAttribute('src', url + '#toolbar=0&navpanes=0&view=fitH');
        document.getElementById('mobile-wp-download').setAttribute('href', url);
      }
    </script>

  <style>

    .languages{
      border: 2px solid white;
      border-radius: 30px;
      width:240px;
      background-color:#1C1E21;
    }

    .languages:hover{
      background-color:#23282c;
    }

    .languages:focus{
      background-color:#1C1E21;
    }

    .dropdown-menu{
      width:240px;
      background-color:#23282c;
      color:white;
    }

    .dropdown-item{
      color:white;
    }

    .dropdown-item:hover{
      background-color: #54BAAB;
    }

  </style>

  <!-- Start PDF -->

  <div class="container pdf-iframe"
    style="margin-bottom:100px; overflow:auto; -webkit-overflow-scrolling:touch; z-index:2;">
    <iframe id="wp-iframe"src="https://tea.xyz/tea.white-paper.pdf#toolbar=0&navpanes=0&view=fitH" width="100%" height="800px">
    </iframe>
  </div>

  <!-- Mobile-only -->

  <div class="container mobile-pdf" style="margin-bottom:100px;">
    <div class="row">
      <div class="col">
        <div class="card">
          <div style="display:flex; flex-direction:column; background-color:#23282C;" class="card-body pt-5 pb-5">
            <div style="margin-top:auto; margin-bottom:auto;">
              <p class="text-center">Mobile browsers can be finicky, so please view our white paper via the button
                below.</p>
              <a id="mobile-wp-download" style="display:block; margin-left:auto; margin-right:auto;" class="btn btn-primary mb-3"
                href="https://tea.xyz/tea.white-paper.pdf" role="button">Download our White Paper</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Community Links -->
  <div class="row community-container pt-5 pb-5 mt-5 mb-5">
    <div class="container p-4" id="community">
      <div class="row">
        <div class="col">
          <h3 style="text-align:center;" class="mb-5 display-5">Join the Community</h3>
        </div>

      </div>
      <div class="row">

        <div class="col-6 col-sm-6 col-lg">
          <a href="https://discord.gg/KCZsXfJphn">
            <div class="com-card mb-4">
              <img src="/Images/discord.svg" alt="" class="community-icon">
            </div>
          </a>
        </div>

        <div class="col-6 col-sm-6 col-lg">
          <a href="https://twitter.com/teaxyz_">
            <div class="com-card mb-4">
              <img src="/Images/twitter.svg" alt="" class="community-icon">
            </div>
          </a>
        </div>

        <div class="col-6 col-sm-6 col-lg">
          <a href="https://github.com/teaxyz">
            <div class="com-card mb-4">
              <img src="/Images/github.svg" alt="" class="community-icon">
            </div>
          </a>
        </div>

        <div class="col-6 col-sm-6 col-lg">
          <a href="https://t.me/tea_xyz">
            <div class="com-card mb-4">
              <img src="/Images/telegram.svg" alt="" class="community-icon">
            </div>
          </a>
        </div>

        <div class="col-6 col-sm-6 col-lg align-self-center">
          <a href="https://reddit.com/r/teaxyz">
            <div class="com-card mb-4">
              <img src="/Images/reddit.svg" alt="" class="community-icon">
            </div>
          </a>
        </div>

        <div class="col-6 col-sm-6 col-lg align-self-center">
          <a href="https://www.instagram.com/tea.xyz/">
            <div class="com-card mb-4">
              <img src="/Images/instagram-iconAsset 1.svg" alt="" class="community-icon">
            </div>
          </a>
        </div>

      </div>
    </div>
  </div>

{{ end }}