altitudelabs · DawnHe · Jan 5, 2016 · Jan 5, 2016 · Jan 5, 2016
diff --git a/css/images/Thumbs.db b/css/images/Thumbs.db
diff --git a/css/images/bg.png b/css/images/bg.png
diff --git a/css/images/title.png b/css/images/title.png
diff --git 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;
+}
diff --git a/index.html b/index.html
@@ -15,11 +15,22 @@
 
   </head>
   <body>
-
+
+	<div class="container" id="container1">
+		<div class="title">
+			<img id="titleImg" src="css/images/title.png"/> 
+		</div> <!--title-->
+		<div class="content">
+			<table id="leaderboard">
+				<tr><td class="bandName">AAA</td><td class="bandCount"><span class="countNumber">111</span> Mentions</td></tr>
+				<tr><td class="bandName">aaa</td><td class="bandCount"><span class="countNumber">111</span> Mentions</td></tr>
+			</table>
+		</div> <!--content-->
+	</div> <!--container-->
 
 
     <!-- JS -->
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="./js/lib.js"></script>
     <script src="./js/script.js"></script>
 

diff --git 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("\
+				<tr>\
+					<td class='bandName'>" + band.name + "</td>\
+					<td class='bandCount'><span class='countNumber'>" + count_number + "</span>	Mentions</td>\
+				</tr>");
+		});
+
+		// Refresh animation at every 15s
+		$('#leaderboard td').delay(14200).fadeOut("slow");
+	});
+
+	// Start poller
+	poller.start();
+});