Add About section

Author: debugger22

app/index.html

@@ -33,7 +33,7 @@
     <link rel="stylesheet" href="/static/public/css/main.css"/>
     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
-    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/howler/2.0.0/howler.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
     <script src="//cdn.jsdelivr.net/odometer/0.4.7/odometer.min.js"></script>
@@ -69,6 +69,20 @@ <h1 class="header-text">
         <h2 class="online-users-text"><span class="odometer online-users-count"></span> people listening</h2>
       </div>
     </div>
+    <div id="config-area">
+      <div id="consumption-rate-div">
+        Set events consumption rate <div id="eventConsumptionSlider"></div>
+      </div>
+      <div class="site-description">
+        <h4>About</h4>
+        <br/>
+        <p>This website tracks events happening across GitHub and converts them to music notes based on certain parameters.</p><br/>
+        <p>
+          There are three types of sounds(bell, string pluck and string swell) based on four types of events(PushEvent, PullRequestEvent, IssuesEvent and IssueCommentEvent).
+          Bells represent PushEvents, string plucks represent IssuesEvents and IssueCommentEvents whereas string swells represent PullRequestEvents.
+        </p>
+      </div>
+    </div>
 
     <footer>
       <div class="footer-left-text-block">

app/public/css/main.css

@@ -1,4 +1,4 @@
-@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro';
+@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400|Josefin+Sans';
 
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
@@ -52,6 +52,7 @@ a{
 html,body{
 	background-color: #0288D1;
 	font-family: 'Source Sans Pro', sans-serif;
+    font-weight: 400;
 	font-size: 16px;
     overflow-x: hidden;
 }
@@ -154,6 +155,35 @@ circle {
 	color: #E0E0E0;
 }
 
+#config-area{
+    width: 100%;
+    background: #FFFFFF;
+    min-height: 300px;
+    padding: 40px;
+    color: #555555;
+    font-family: 'Josefin Sans', sans-serif;
+    font-weight: 300;
+}
+
+#consumption-rate-div{
+    width: 50%;
+    margin: 0 auto;
+    margin-bottom: 0px;
+    visibility: hidden;
+}
+
+#eventConsumptionSlider{
+    margin-top: 20px;
+    width: 300px;
+}
+
+.site-description{
+    font-size: 1em;
+    line-height: 1.6em;
+    width: 50%;
+    margin: 0 auto;
+}
+
 footer{
 	width: 100%;
 	height: 200px;
@@ -187,6 +217,13 @@ footer{
 
 @media only screen and (max-device-width: 480px) {
 
+    .site-description{
+        font-size: 1em;
+        line-height: 1.6em;
+        width: 90%;
+        margin: 0 auto;
+    }
+
     .footer-left-text-block{
         width: 100%;
         margin: 0 auto;

app/public/js/main.js

@@ -109,6 +109,11 @@ $(function(){
     }
   });
 
+  $('#eventConsumptionSlider').slider({
+    'min': 1,
+    'max': 100
+  });
+
 
   // Main drawing area
   svg = d3.select("#area").append("svg");