added play icon on legend and cganhed its position

index.html

@@ -6,6 +6,8 @@
 <title>VVVW</title>
 <link rel="stylesheet" href="static/css/style.css">
 <link href="static/styles/jquery-ui.css" rel="stylesheet" type="text/css">
+<!-- <link rel="stylesheet" href="static/css/font-awesome/css/font-awesome.min.css"> -->
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
 <link rel="stylesheet" href="static/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <script src="static/js/jquery.min.js"></script>
 <script type="text/javascript" src="static/js/p5/p5.min.js"></script>
@@ -38,9 +40,15 @@
            Your browser does not support the audio tag.
          </audio>
     </div>
+    <div class="map_legend">
+    <div id="box1" onclick="popup_bg(120,group1)"><i class="fas fa-play"></i></div> <p>Folklore literature</p>
+    <div id="box2" onclick="popup_bg(300,group2)"><i class="fas fa-play"></i></div><p>Islamic Mysticism</p>
+    <div id="box3" onclick="popup_bg(500,group3)"><i class="fas fa-play"></i></div> <p>Contemporary poets</p>
+    <div id="box4" onclick="popup_bg(700,group4)"><i class="fas fa-play"></i></div> <p>Contemporary musicians</p>
+  </div>
      </div>
-
   </div>
+
 </div>
 <div class="col-md-3">
   <div class="row">
@@ -111,16 +119,6 @@ Technical details: We have built the visualization from scratch using a javascri
 
 
 
-</div>
-<div class="row">
-<div class="col-md-6">
-  <div class="map_legend">
-  <div id="box1" onclick="popup_bg(120)"></div> <p>Folklore literature</p>
-  <div id="box2" onclick="popup_bg(300)"></div> <p>Islamic Mysticism</p>
-  <div id="box3" onclick="popup_bg(500)"></div> <p>Contemporary poets</p>
-  <div id="box4" onclick="popup_bg(700)"></div> <p>Contemporary musicians</p>
-</div>
-</div>
 </div>
 </div>
 
@@ -141,7 +139,7 @@ Technical details: We have built the visualization from scratch using a javascri
 </script>
 
 <script>
-function popup_bg(time) {
+function popup_bg(time,group) {
   var box = document.getElementById("audioBG");
 //   if (box.currentTime>0) {
 //   box.currentTime = 0;

static/css/style.css

@@ -146,7 +146,7 @@ a {
   margin-left : 10px;
   margin-top: 10px;
   display: inline-block;
-  background-color: #d81159;
+  color: #d81159;
 }
 
 #box2 {
@@ -154,7 +154,7 @@ a {
   width: 15px;
   margin-left : 10px;
   margin-top: 10px;
-  background-color: #ffbc42;
+  color: #ffbc42;
   display: inline-block;
 
 }
@@ -164,7 +164,7 @@ a {
   width: 15px;
   margin-left : 10px;
   margin-top: 10px;
-  background-color: #218380;
+  color: #218380;
   display: inline-block;
 
 }
@@ -175,7 +175,7 @@ a {
   margin-left : 10px;
   margin-top: 10px;
   display: inline-block;
-  background-color: #73d2de;
+  color: #73d2de;
 }
 
 #box1:hover {
@@ -287,7 +287,8 @@ h2 {
     font-size: .8em;
     font-weight: bold;
     font-family:'Walter Turncoat', cursive;
-    color: #AEB10A;
+    /* color: #AEB10A; */
+    color: #d81159;
     cursor: pointer;
 }
 
@@ -417,22 +418,22 @@ h2 {
 /* about and colophon */
 #about, #colophon, #how {
 font-family:'Walter Turncoat', cursive;
-color: #AEB10A;
+color: #d81159;
 }
 
 #about a {
 text-decoration: none;
-color: #AEB10A;
+color: #d81159;
 }
 
 #colophon a {
 text-decoration: none;
-color: #AEB10A;
+color: #d81159;
 }
 
 #how a {
 text-decoration: none;
-color: #AEB10A;
+color: #d81159;
 }
 
 #showabout, #showcolophon, #showhow {