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 @@
+
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
' + humanized + ' 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;