Add time left on Kickstarter to banner

This commit is contained in:
robmadole 2016-11-29 16:05:26 -06:00
parent c965be5fb6
commit 23f353ece7
4 changed files with 45 additions and 0 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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);

View File

@ -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;