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

{{ define "main" }}

<!-- Hero Section -->
<section class="hero">
  <div class="container">
    <div class="row gx-5">
      <div class="col">
        <div class="content-container flex" style="height:100vh;">
        <div class="wp-content">
          <div class="wp-content-inner w-75" style="margin-left:auto; margin-right:auto;">
          <h1 class="display-1 hero-text text-center" style="z-index:3; position: relative;"><span class="inner-glow ">WHITE PAPER</h1>
            <p class="lead hero-lead mb-5 text-center">Take a look under the hood (bonnet) and see how we're planning on leveraging blockchain technology to fix open-source. We welcome commentary and feedback via any of our community channels.</p>
            <div class="row desktop-ctas">
              <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mb-3">
                <a href="https://tea.xyz/tea.white-paper.pdf">
                  <button class="hbtn hb-fill-right" style="width:100% !important; text-transform:uppercase;">Download Whitepaper</button>
                </a>
              </div>
              <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                <a href="https://github.com/teaxyz/white-paper">
                  <button class="hbtn-light hb-light-fill-right" style="width:100% !important;">CONTRIBUTE ON GITHUB</button>
                </a>
              </div>
            </div>
            </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>

  @media only screen and (max-width: 576px) {
    .wp-content-inner{
      width:100% !important;
    }
  }



  .split-btn{
    display: inline-block;
    width: 50%;
  }

  .split-right{
    border-left: 0px !important;
  }
  /*
  .dropdown-toggle{
    height: 50px;
    width: auto;
    padding: 0px 30px;
    border: 1px solid #fff;
    font-family: "inter", sans-serif;

  }
  */

</style>

<!--
<section class="one-box">
  <div class="container">
    <div class="row">
      <div class="col">
        <h3 class="display-6">Our white paper is available in multiple languages</h3>
        <p class="mb-4">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="hbtn-light hb-light-fill-right dropdown-toggle" 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>
</section>

<section>
  <div class="container" style="padding-top: 0px !important;">
    <div class="row">
      <div class="col">
        <div id="adobe-dc-view" style="width: 100%;"></div>
        <script src="https://documentservices.adobe.com/view-sdk/viewer.js"></script>
        <script type="text/javascript">
          const versions = [
            ['English', ''],
            ['Bahasa Indonesia', '_id'],
            ['беларускі', '_be'],
            ['български', '_bg'],
            ['Deutsch', '_de'],
            ['Русский', '_ru'],
            ['українська', '_uk'],
            ['简体中文', '_zh']
          ];

          let adobeDcView;

          const getAdobeDcView = () => {
            if (!adobeDcView) {
              adobeDCView = new AdobeDC.View({
                clientId: "1bc8ce732a184ccdade4f74f81375401",
                divId: "adobe-dc-view"
              });
            }
            return adobeDCView;
          }

          const getWhitePaperUrl = (suffix = '') => {
            return 'https://tea.xyz/tea.white-paper' + suffix + '.pdf';
          }

          document.addEventListener("adobe_dc_view_sdk.ready", function(){
            //Must change clientId before final merge
            try {
              for (const lang of versions) {
                $('#language-selector').append("<li><a class=\"dropdown-item\" onclick=\"viewWhitepaper(\'" + lang[1] + "')\">" + lang[0] + "</a></li>");
              }
              const adobeDCView = getAdobeDcView();

              const hash = window.location.hash.replace(/^#/, '_')
              const suffix = versions.find(v => v[1] === hash) || ''
              viewWhitepaper(suffix)
            } catch (error) {
              console.error('test:', error);
            }
          });

          function viewWhitepaper(suffix) {
            if (suffix.length) {
              window.location.hash = '#' + suffix.substr(1)
            } else{
              // https://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-url-with-javascript-without-page-r/5298684#5298684
              history.pushState("", document.title, window.location.pathname + window.location.search)
            }
            const adobeDCView = getAdobeDcView();
            const url = getWhitePaperUrl(suffix);
            adobeDCView.previewFile({
              content:{
                location: { url }
              },
              metaData:{
                fileName: "tea.white-paper.pdf"
              }
            }, { embedMode: "IN_LINE" });
            // document.getElementById('mobile-wp-download').setAttribute('href', url);
          }
        </script>
      </div>
    </div>
  </div>
</section>


-->
{{ end }}