diff --git a/css/images/Thumbs.db b/css/images/Thumbs.db new file mode 100644 index 0000000..59d6767 Binary files /dev/null and b/css/images/Thumbs.db differ diff --git a/css/images/bg.png b/css/images/bg.png new file mode 100644 index 0000000..af1fab3 Binary files /dev/null and b/css/images/bg.png differ diff --git a/css/images/title.png b/css/images/title.png new file mode 100644 index 0000000..2bdb320 Binary files /dev/null and b/css/images/title.png differ diff --git a/css/style.css b/css/style.css index e69de29..3d1848e 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,80 @@ +*{ + margin: 0px; + padding: 0px; + border: none; + font-family: Helvetica, Arial; +} + +body{ + background-color: #252825; + background-image: url("images/bg.png"); + background-repeat: repeat-x repeat-y; + text-align: center; +} + +.container{ + margin: 0 auto; + vertical-align: middle; + position: absolute; + top: 0px; +} + +.title{ + margin: 0 auto; +} + +.title img{ + width: 100%; + max-width: 594px; +} + +.content{ + width: 50%; + max-width: 500px; + margin: 0 auto; + text-align: center; + padding: 20px; +} + +#leaderboard{ + background-color: rgba(29, 29, 29, 0.8); + width: 100%; + border: 5px solid; + border-radius: 25px; + -moz-border-radius:25px; /* Old Firefox */ + border-color: #d0cfcf; + color: white; +} + +#leaderboard tr{ + height: 50px; +} + +#leaderboard td{ + vertical-align: center; + border-bottom: 1px solid #414141; +} + +#leaderboard tr:last-child td{ + border:none; +} + +.bandName{ + text-align: left; + font-weight: bold; + font-size: 18px; + padding-left: 20px; +} + +.bandCount{ + text-align: right; + font-size: 15px; + font-weight: lighter; + padding-right: 20px; +} + +.countNumber{ + font-size: 18px; + font-weight: bold; + color: #960c10; +} \ No newline at end of file diff --git a/index.html b/index.html index 32f14db..bcad621 100644 --- a/index.html +++ b/index.html @@ -15,11 +15,22 @@ - + +
+
+ +
+
+ + + +
AAA111 Mentions
aaa111 Mentions
+
+
- + diff --git a/js/script.js b/js/script.js index e69de29..9ad07da 100644 --- a/js/script.js +++ b/js/script.js @@ -0,0 +1,60 @@ +// Innitialize vars +var container = document.getElementById("container1"); + +// Set content to the center of the window +window.onload = function(){ + resize(); +} + +window.onresize = resize; + +function resize(){ + var width = window.innerWidth; + container.style.width = width + "px"; + var top = (window.innerHeight - container.offsetHeight)/2; + var left = (window.innerWidth - container.offsetWidth)/2; + container.style.top = top + "px"; + container.style.left = left + "px"; +} + +// Refresh the leaderboard +$(document).ready( function() { + + var options = { + frequency: 15, + limit: 5 + }; + + poller = new window.massrel.Poller(options, function callback(result) { + $("#leaderboard tr").remove(); + + result.forEach(function(band) { + // Numerical processing + var count_number = ""; + if (band.count >= 1000){ + var thousand = Math.floor(band.count/1000); + var hundred = band.count % 1000; + if (hundred < 10){ + hundred = "00"+hundred; + }else if (hundred < 100){ + hundred = "0"+hundred; + } + count_number = thousand+","+hundred; + }else{ + count_number = band.count.toString(); + } + // Update table content + $('#leaderboard').append("\ + \ + " + band.name + "\ + " + count_number + " Mentions\ + "); + }); + + // Refresh animation at every 15s + $('#leaderboard td').delay(14200).fadeOut("slow"); + }); + + // Start poller + poller.start(); +}); \ No newline at end of file