index.html in pairing_matrix-2.1

- old
+ new
@@ -3,27 +3,49 @@
 <head>
     <title>Pairing Matrix</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
     <link rel="stylesheet" href="style.css"/>
     <link rel="stylesheet" href="loader.css"/>
+    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
 
     <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
     <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
     <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.3/d3.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
     <script language="javascript" src="matrix.js"></script>
     <script language="javascript" src="index.js"></script>
 </head>
 
 <body>
 <div class="visualize_matrix_container form-group form-inline">
-    <input type="number" class="form-control" id="days" value="10"/>
-    <button id="visualize" class="btn btn-primary form-control">Visualize</button>
-</div>
-<div class="info">
-    <span>Displaying data of last</span>
-    <span id="no_of_days"></span>
-    <span>days</span>
+    <div class="row">
+        <div class="col-lg-offset-3 col-lg-6">
+            <div class="input-group">
+                <div class="input-group">
+                    <span class="input-group-addon" id="basic-addon2">Days</span>
+                    <input type="text" id="days" value="30" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
+                </div>
+              <span class="input-group-btn">
+                <div class="btn-group">
+                    <button id="visualize" type="button" class="btn btn-primary">Visualize</button>
+                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <span class="caret"></span>
+                        <span class="sr-only">Toggle Dropdown</span>
+                    </button>
+                    <ul class="dropdown-menu">
+                        <li><a id="a_week" href="#">A Week</a></li>
+                        <li><a id="two_weeks" href="#">Two Weeks</a></li>
+                        <li><a id="a_month" href="#">A Month</a></li>
+                        <li><a id="two_months" href="#">Two Months</a></li>
+                    </ul>
+                </div>
+              </span>
+            </div>
+        </div>
+        <input class="cache-toggle" type="checkbox" data-toggle="toggle"
+               data-on="Cache Enabled" data-off="Cache Disabled"/>
+    </div>
 </div>
 
 <div class="loaderContainer">
     <div class="loader">
         <span class="dot dot_1"></span>
\ No newline at end of file