diff options
author | Dave Gandy <dave@davegandy.com> | 2016-11-30 01:08:56 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2016-11-30 01:08:56 +0300 |
commit | 2fde87192a4821b25f8cc7ab702c5d27e12a9238 (patch) | |
tree | b2aa7729fc85ccd30a660eea038abfb14c975447 | |
parent | c965be5fb6a7aec0e845281829ab86c92bb9c29c (diff) | |
parent | 23f353ece7d46628d917a23ac31397ad327d89d2 (diff) |
Merge pull request #10297 from FortAwesome/kickstarter-countdown
Add time left on Kickstarter to banner
-rw-r--r-- | src/_includes/navbar.html | 3 | ||||
-rw-r--r-- | src/_layouts/base.html | 1 | ||||
-rw-r--r-- | src/assets/js/site.js | 24 | ||||
-rw-r--r-- | src/assets/less/site/banner-ad.less | 17 |
4 files changed, 45 insertions, 0 deletions
diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html index c30d9962b..0b672e70f 100644 --- 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 2e0cf9ded..336f88976 100644 --- 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 2b5805879..256a2fb64 100644 --- 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 e544ed0be..cd065f2cc 100644 --- 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; |