Add time left on Kickstarter to banner

diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html
index c30d9962b1093422502030b5629ab89a6bbf460f..0b672e70f44cbf382850c9908fe03f2824443d1a 100644 (file)
--- a/src/_includes/navbar.html
+++ b/src/_includes/navbar.html
@@ -3,6 +3,9 @@
     <div class="message-container">
       <div class="tagline">
         <span id="rotating-message"></span>
+        <div class="time-left">
+          <span id="time-left-message"></span>
+        </div>
       </div>
       <div class="action">
         <a id="rotating-url" class="btn btn-primary btn-lg btn-block" href=""></a>

diff --git a/src/_layouts/base.html b/src/_layouts/base.html
index 2e0cf9deda7d1ca37585e6c44e99644cf420f5a6..336f88976f4dc22adce2d6a6454403531e736977 100644 (file)
--- a/src/_layouts/base.html
+++ b/src/_layouts/base.html
@@ -55,6 +55,7 @@
   <script src="https://cdn.jsdelivr.net/underscorejs/1.8.3/underscore-min.js" integrity="sha256-obZACiHd7gkOk9iIL/pimWMTJ4W/pBsKu+oZnSeBIek=" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/backbonejs/1.2.2/backbone-min.js" integrity="sha256-p6bkfFqmxtebrKOS+wyGi+Qf3d111eWUQP67keyXJ6Q=" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/jsdelivr-rum/1.5/jsdelivr-rum.min.js" integrity="sha256-HlY2rbkgbiHhtilMXmQ86rjL/EIxGDtdg9GU9/T2ZxE=" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/momentjs/2.15.1/moment.min.js" integrity="sha256-4PIvl58L9q7iwjT654TQJM+C/acEyoG738iL8B8nhXg=" crossorigin="anonymous"></script>
   <script src="{{ page.relative_path }}assets/js/site.js"></script>
   <script src="{{ page.relative_path }}assets/js/search.js"></script>
   <script src="{{ page.relative_path }}assets/js/monetization.js" type="text/javascript"></script>

diff --git a/src/assets/js/site.js b/src/assets/js/site.js
index 2b58058793211cbede358981578035df5c034cc1..256a2fb641936ab57670306b20552713769b7bac 100644 (file)
--- a/src/assets/js/site.js
+++ b/src/assets/js/site.js
@@ -76,6 +76,27 @@ $(function () {
        // Yippee! We can use localStorage awesomeness
   }
 
+  function timeLeft() {
+    var now, ksEndsAt, hoursLeft, minutesLeft, humanized;
+
+    try {
+      now = moment();
+      ksEndsAt = moment("2016-12-01 12:01:00-05");
+      hoursLeft = ksEndsAt.diff(now, "hours");
+      minutesLeft = ksEndsAt.diff(now, "minutes") - hoursLeft * 60;
+    } catch (e) {}
+
+    if (hoursLeft < 0 || minutesLeft < 0) {
+      return;
+    }
+
+    humanized = hoursLeft + " " + ((hoursLeft === 1) ? "hour" : "hours") + ", " + minutesLeft + " " + ((minutesLeft === 1) ? "minute" : "minutes");
+
+    $('#time-left-message').html('Just <span class="duration">' + humanized + '</span> left to support the Font Awesome 5 Kickstarter for $20');
+
+    setTimeout(timeLeft, 2000);
+  }
+
   function storageAvailable(type) {
        try {
                var storage = window[type],
@@ -88,10 +109,13 @@ $(function () {
                return false;
        }
   }
+
   function selectAd() {
     random_number = Math.floor(Math.random() * ads.length);
     random_ad = ads[random_number];
 
+    timeLeft();
+
     $('#banner').addClass(random_ad.class);
     $('#rotating-message').html(random_ad.quote);
     $('#rotating-url').attr("href", random_ad.url);

diff --git a/src/assets/less/site/banner-ad.less b/src/assets/less/site/banner-ad.less
index e544ed0be1683d71341dbc7b92a19c9882a6eb48..cd065f2cc2088398efd6797448beed4f5e8a19fa 100644 (file)
--- a/src/assets/less/site/banner-ad.less
+++ b/src/assets/less/site/banner-ad.less
@@ -217,6 +217,23 @@
     border-bottom: rgba(0,0,0,0.2);
     .message-container { padding: 40px 0; }
     .tagline { font-size: 24px; }
+    .time-left {
+      font-size: 18px;
+      color: mix(@kickstarter-bg, #fff, 20%);
+    }
+    @keyframes flash-duration {
+      from {
+        color: #fff;
+      }
+      to {
+        color: mix(@kickstarter-bg, #fff, 20%);
+      }
+    }
+    .duration {
+      font-weight: 600;
+      animation-name: flash-duration;
+      animation-duration: 1.0s;
+    }
     a:not(.btn) {
       text-decoration: underline;
       color: #fff;