Merge pull request #98 from teaxyz/add-translation-links

WIP: Add translation links

lychee.toml

@@ -10,4 +10,5 @@ exclude = [
   "https://www.clarity.ms/tag/",
   "https://www.googletagmanager.com/gtm.js",
   ".*/mailto:.*@.*",
+  "https://tea.xyz/tea.white-paper",
 ]

src/layouts/page/white-paper.html

@@ -70,13 +70,79 @@
         </div>
       </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', ''],
+        ['беларускі', '_be']
+      ];
+
+      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 src="https://tea.xyz/tea.white-paper.pdf#toolbar=0&navpanes=0&view=fitH" width="100%" height="800px">
+    <iframe id="wp-iframe"src="https://tea.xyz/tea.white-paper.pdf#toolbar=0&navpanes=0&view=fitH" width="100%" height="800px">
     </iframe>
   </div>
 
@@ -90,7 +156,7 @@
             <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 style="display:block; margin-left:auto; margin-right:auto;" class="btn btn-primary mb-3"
+              <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>