Merge pull request #140 from teaxyz/countdown-timer

countdown to launch page

lychee.toml

@@ -13,5 +13,6 @@ exclude = [
   "https://tea.xyz/tea.white-paper",
   "https://tea.xyz/tea.authentication-success",
   "https://tea.xyz/tea.email-subscribe",
-  "https://www.google.com/thank-you"
+  "https://www.google.com/thank-you",
+  "https://www.instagram.com/tea.xyz/"
 ]

src/content/launch-countdown.md

@@ -0,0 +1,5 @@
+---
+title: "Launch Countdown"
+Description: "Something new is brewing"
+layout: "launch-countdown"
+---

src/layouts/page/launch-countdown.html

@@ -0,0 +1,76 @@
+{{ define "main" }}
+
+<section class="countdown-lg-section">
+  <div class="countdown-lg-container">
+    <div class="countdown-lg-contents my-auto">
+      <img class="tea-logo mb-5" src="/Images/tea-light.svg" alt="tea logo">
+      <p class="text-center display-1" id="demoLarge"></p>
+      <p class="text-center authenticate display-6">You can still authenticate your GitHub <a href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz">here</a>.</p>
+    </div>
+  </div>
+</section>
+
+<style>
+
+  .countdown-section{
+    display:none;
+  }
+
+  @font-face {
+    font-family: "pp-neue-machina";
+    src: url("/fonts/PPNeueMachina-InktrapLight.woff") format("woff");
+  }
+
+  #demoLarge, .authenticate{
+    font-family: "pp-neue-machina", sans-serif;
+  }
+
+  #demoLarge,
+  .authenticate a{
+    color: #00ffd0;
+  }
+
+  .tea-logo{
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 10vw;
+  }
+
+  @media only screen and (max-width: 600px) {
+    .tea-logo{
+      width: 25vw;
+    }
+  }
+
+  .navbar,
+  footer,
+  .gf-container{
+    display: none;
+  }
+
+  html,body{
+    background-color: #1a1a1a !important;
+  }
+
+  .countdown-lg-section{
+  }
+
+  .countdown-lg-container{
+    height: 100vh;
+    position: relative;
+    width: 100%;
+  }
+
+  .countdown-lg-contents{
+    width: 100%;
+    display: block;
+    position: absolute;
+    top: 50%;
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+  }
+
+</style>
+
+{{ end }}

src/layouts/partials/footer.html

@@ -168,3 +168,39 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
     rdt('track', 'SignUp');
     rdt('track', 'ViewContent');
   </script>
+
+  <!-- Launch Countdown Timer -->
+
+  <script>
+  // Set the date we're counting down to
+  var countDownDate = new Date("Nov 3, 2022 07:30:00").getTime();
+
+  // Update the count down every 1 second
+  var x = setInterval(function() {
+
+    // Get today's date and time
+    var now = new Date().getTime();
+
+    // Find the distance between now and the count down date
+    var distance = countDownDate - now;
+
+    // Time calculations for days, hours, minutes and seconds
+    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+    // Display the result in the element with id="demo"
+    document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+    + minutes + "m " + seconds + "s ";
+    document.getElementById("demoLarge").innerHTML = days + "d " + hours + "h "
+    + minutes + "m " + seconds + "s ";
+
+    // If the count down is finished, write some text
+    if (distance < 0) {
+      clearInterval(x);
+      document.getElementById("demo").innerHTML = "EXPIRED";
+      document.getElementById("demoLarge").innerHTML = "EXPIRED";
+    }
+  }, 1000);
+  </script>

src/layouts/partials/header.html

@@ -1,4 +1,109 @@
+
+
+<section class="countdown-section" id="countdown-section">
+  <button onclick="hideShow()" class="hide small" type="button" name="button">CLOSE</button>
+  <div class="countdown-container">
+    <div class="countdown-contents p-4">
+      <p class="text-center display-1" id="demo"></p>
+      <p class="text-center authenticate display-6">Something new is brewing in Lisbon.</p>
+    </div>
+  </div>
+</section>
+
+
      <style>
+
+       @media screen and (max-width: 576px) {
+
+         .hide{
+           position: absolute;
+           background-color:#1a1a1a !important;
+           border:none !important;
+           right: 5px;
+           top: 5px;
+           text-transform: uppercase;
+           color: #00ffd0;
+           z-index: 100;
+           opacity: 0.3;
+         }
+
+         .hide:hover{
+           opacity: 1;
+         }
+
+       }
+
+       @media screen and (min-width: 576px) {
+
+         .hide{
+           position: absolute;
+           background-color:#1a1a1a !important;
+           border:none !important;
+           right: 20px;
+           top: 20px;
+           text-transform: uppercase;
+           color: #00ffd0;
+           z-index: 100;
+           opacity: 0.3;
+           transition: 0.2s ease-in-out;
+         }
+
+         .hide:hover{
+           opacity: 1;
+         }
+
+       }
+
+
+       @font-face {
+         font-family: "pp-neue-machina";
+         src: url("/fonts/PPNeueMachina-InktrapLight.woff") format("woff");
+       }
+
+       .tea-logo{
+         width:20%;
+       }
+
+       #demo, .authenticate, #something-new, .hide{
+         font-family: "pp-neue-machina", sans-serif;
+       }
+
+       #demo,
+       .authenticate a{
+         color: #00ffd0;
+       }
+
+       .countdown-section{
+         background-color: #1a1a1a;
+         position: relative;
+         z-index: 100;
+         display: block;
+       }
+
+       .countdown-container{
+         height: 28vh;
+         position: relative;
+         width: 100%;
+       }
+
+       .countdown-contents{
+         width: 100%;
+         display: block;
+         position: absolute;
+         top: 50%;
+         -ms-transform: translateY(-50%);
+         transform: translateY(-50%);
+       }
+
+       .countdown{
+         margin-bottom: 0px !important;
+       }
+
+
+
+
+       /* Floating GitHub Icon */
+
       .gf-container {
         width: 80px;
         height: 80px;
@@ -57,6 +162,20 @@
 
     </style>
 
+    <script type="text/javascript">
+      function hideShow() {
+        var x = document.getElementById("countdown-section");
+        if (x.style.display === "none") {
+          x.style.display = "block";
+        } else {
+          x.style.display = "none";
+        }
+      }
+
+    </script>
+
+
+
     <a href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz" class="gf-container" style="background-color:#8EC7BF;">
       <img src="/Images/github.svg" alt="" class="github-icon mx-auto">
 

src/static/Images/teal-x.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2.48 2.48"><defs><style>.cls-1{fill:#54baab;}</style></defs><g id="Layer_1-2"><path class="cls-1" d="M1.49,1.24l.93-.93c.07-.07,.07-.18,0-.25s-.18-.07-.25,0l-.93,.93L.3,.05C.24-.02,.12-.02,.05,.05S-.02,.24,.05,.3l.93,.93L.05,2.17c-.07,.07-.07,.18,0,.25,.03,.03,.08,.05,.13,.05s.09-.02,.13-.05l.93-.93,.93,.93s.08,.05,.13,.05,.09-.02,.13-.05c.07-.07,.07-.18,0-.25l-.93-.93Z"/></g></svg>