Added top-notification-bar (#78)

Signed-off-by: Mohin Uddin <mohin@appscode.com>

layouts/_default/baseof.html

@@ -67,8 +67,8 @@
   {{ end }}
   <!-- Custom CSS -->
   {{ with $style := resources.Get "assets/sass/main.scss" | resources.ToCSS | resources.PostCSS | resources.Minify | resources.Fingerprint }}
-    <link rel="stylesheet" href="{{ $style.RelPermalink }}" />
-    {{ end }}
+  <link rel="stylesheet" href="{{ $style.RelPermalink }}" />
+  {{ end }}
   <!-- <link rel="stylesheet" href="/assets/sass/main.css" /> -->
 </head>
 
@@ -81,6 +81,52 @@
       </p>
     <![endif]-->
 
+  <!-- notification start  -->
+  <div onclick="goToWebinarPage()" class="notification-area notification is-primary" id="notification-area" style="display:none">
+    <div class="container section">
+      <div class="notification-inner is-flex is-align-items-center is-justify-content-center">
+        <p>Join our upcoming webinar! Get your seat right now! <a href="/webinar/">Click</a> to register.</p>
+      </div>
+    </div>
+    <button class="delete" onclick="event.stopPropagation(); closeItem('#notification-area')"></button>
+  </div>
+
+  <script type="text/javascript">
+    // close action start
+    function closeItem(item) {
+      const selcetedItem = document.querySelector(item)
+      selcetedItem.style.display = 'none'
+    }
+    // close action end
+
+    // redirect to webinar pagte
+    function goToWebinarPage() {
+      window.open("/webinar/", "_blank");
+    }
+
+    (function () {
+      var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
+      xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4) {
+          if (xhr.status === 200) {
+            var result = JSON.parse(xhr.responseText);
+            if (result.schedules) {
+              let endDate = new Date(result.schedules[0]).getTime();
+              let startDate = new Date().getTime();
+              let timeRemaining = parseInt((endDate - startDate) / 1000);
+              if (timeRemaining >= 0) {
+                document.querySelector('#notification-area').style.display = 'block';
+              }
+            }
+          }
+        }
+      }
+      // console.log('GET', 'https://license-issuer.appscode.com/_/webinars/');
+      xhr.open('GET', 'https://license-issuer.appscode.com/_/webinars/');
+      xhr.send();
+    }());
+  </script>
+  <!-- notification end -->
   <!-- header area start -->
   {{ block "header" . }}
   <header>
@@ -546,9 +592,9 @@ <h2 data-aos="fade-up">Ready to Get Started?</h2>
 
               <!-- subscription form start -->
               <div class="subscription-form">
-                <form
-                  method="post" action="https://listmonk.appscode.com/subscription/form" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="navbar-form"
-                  target="_blank" novalidate role="email" role="email">
+                <form method="post" action="https://listmonk.appscode.com/subscription/form"
+                  id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="navbar-form" target="_blank"
+                  novalidate role="email" role="email">
                   <label for="email">Subscribe to Our Newsletter</label>
                   <p class="spam-message">No spam, we promise. Your mail address is secure</p>
                   <div class="field has-addons">

layouts/index.html

@@ -52,15 +52,15 @@ <h1 data-aos="fade-up">
 
     <!-- trusted logo area start -->
     <div class="columns trusted-logo is-multiline">
+      <!--
       <div class="column has-text-centered">
         <div class="trusted-action" data-aos="fade-up" data-aos-duration="800">
           <p>
             Stash <a href="https://stash.run/docs/v2020.09.29/welcome/" target="_blank" rel="noopener">v2020.09.29</a> is out!
-
-            <!-- Visit our booth BN3 at the <a href="https://techcrunch.com/events/disrupt-sf-2019/" target="_blank" rel="noopener"> TechCrunch Disrupt SF 2019</a> Startup Alley on Oct 4, 2019! -->
           </p>
         </div>
       </div>
+      -->
 
       <div class="column is-10 is-offset-1 has-text-centered" data-aos="fade-up" data-aos-duration="1000">
         <div class="trusted-company mt-10">

static/assets/sass/base/_global.scss

@@ -154,7 +154,7 @@ h6 {
     .ss-arrow {
       margin: 0;
     }
-    .placeholder{
+    .placeholder {
       font-size: 15px;
       color: $paragraph-color;
       font-weight: 500;
@@ -370,6 +370,60 @@ video:focus {
   border: none;
 }
 
+// notification style start
+.notification-area {
+  display: block;
+  cursor: pointer;
+  &.notification {
+    padding: 0;
+    border-radius: 0;
+    margin-bottom: 0;
+    .delete {
+      right: 15px;
+      top: 11px;
+    }
+    .notification-inner {
+      min-height: 45px;
+      padding: 8px 0;
+      overflow: hidden;
+      // position: relative;
+      p {
+        // animation: mymove 5s infinite;
+        font-size: 16px;
+        color: #ffffff;
+        font-weight: 500;
+        // position: absolute;
+
+        a {
+          font-weight: 600 !important;
+          padding: 0 5px;
+          font-family: Roboto;
+        }
+      }
+    }
+  }
+  &.is-primary {
+    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00a651+0,1971bd+100 */
+    background: #00a651; /* Old browsers */
+    background: -moz-linear-gradient(
+      45deg,
+      #00a651 0%,
+      #1971bd 100%
+    ); /* FF3.6-15 */
+    background: -webkit-linear-gradient(
+      45deg,
+      #00a651 0%,
+      #1971bd 100%
+    ); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(
+      45deg,
+      #00a651 0%,
+      #1971bd 100%
+    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a651', endColorstr='#1971bd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+  }
+}
+// notification style end
 /* Deafult Margin & Padding */
 @for $i from 1 through 100 {
   .mt-#{$i} {