styled bios and audio

index.html

@@ -26,17 +26,27 @@
     <div class="row">
       <div class="col-md-12">
 
-     <div class="main_audio">
+<div class="row">
-       <audio controls id='audioBG'>
+<div class="col-md-1">
-       <source src="static/audio/output.webm" type="audio/mpeg">
+<button onclick="playpause('audioBG')" type="button" name="button"><i class="audioBG fa fa-play"></i></button></div>
-           Your browser does not support the audio tag.
+  <div class="col-md-5">
-         </audio>
+<audio id="audioBG"
-    </div>
+preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)">
+<source src="static/audio/output.webm" type="audio/mpeg">
+</audio>
+<input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 200px">
+</div>
+</div>
+<div class="row">
+  <div class="col-md-12">
+    <br>
     <div class="map_legend">
     <div id="box1" onclick="popup_bg(10)"><i class="fa fa-play"></i></div> <p>Folklore literature</p>
     <div id="box2" onclick="popup_bg(300)"><i class="fa fa-play" aria-hidden="true"></i></div><p>Islamic Mysticism</p>
     <div id="box3" onclick="popup_bg(500)"><i class="fa fa-play" aria-hidden="true"></i></div> <p>Contemporary poets</p>
     <div id="box4" onclick="popup_bg(700)"><i class="fa fa-play" aria-hidden="true"></i></div> <p>Contemporary musicians</p>
+  </div>
+  </div>
   </div>
      </div>
   </div>
@@ -124,6 +134,26 @@ function popup_bg(time) {
 };
     box.currentTime = time;
 };
+</script>
+<script>
+var aud1= document.getElementById('audioBG');
+var dur1= document.getElementById('dur1');
+function mDur(dur,aud){dur.max= aud.duration};
+function mPlay(dur,aud){dur.value=aud.currentTime};
+function mSet(dur,aud){aud.currentTime=dur.value};
+
+
+function playpause(podcast){
+var myAudio = document.getElementById(podcast);
+var myIcon = document.querySelector("."+podcast);
+if (myAudio.paused) {
+myIcon.className = podcast+" fa fa-pause";
+myAudio.play();
+} else {
+myIcon.className = podcast+" fa fa-play";
+myAudio.pause();
+}
+}
 </script>
 
  <script>

static/css/style.css

@@ -66,15 +66,21 @@ body {
 }
 
 /* Audio in background */
+.audioBG {
+  padding-top: 10px;
+  }
+
+button {
+  background-color: #fff0f000;
+}
+#dur1 {
+  padding-top: 18px;
+}
 .audio-button {
   background: transparent;
   color:inherit;
 }
-audio {
+
-    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
-    width: 200px;
-    height: 25px;
-}
 
 .audio-button:hover {
 background: grey;
@@ -153,7 +159,7 @@ a {
   height: 15px;
   width: 15px;
   margin-left : 10px;
-  margin-top: 10px;
+  margin-top: 5px;
   display: inline-block;
   color: #d81159;
 }
@@ -162,7 +168,7 @@ a {
   height: 15px;
   width: 15px;
   margin-left : 10px;
-  margin-top: 10px;
+  margin-top: 5px;
   color: #ffbc42;
   display: inline-block;
 
@@ -172,7 +178,7 @@ a {
   height: 15px;
   width: 15px;
   margin-left : 10px;
-  margin-top: 10px;
+  margin-top: 5px;
   color: #218380;
   display: inline-block;
 
@@ -182,7 +188,7 @@ a {
   height: 15px;
   width: 15px;
   margin-left : 10px;
-  margin-top: 10px;
+  margin-top: 5px;
   display: inline-block;
   color: #73d2de;
 }
@@ -207,16 +213,9 @@ a {
   padding-left: 5px;
   font-family: 'Vesper Libre', serif;
   display: inline;
-  font-size: .6em;
+  font-size: 1em;
 }
 
-#legend_title {
-  font-family: 'Vesper Libre', serif;
-  font-size: 1em;
-  padding-left: 2em;
-  position: relative;
-  margin-top: 1em;
-}
 
 /* text area */
 /* with position:fixed and svg {position:relative} the text can overlay the map */

static/js/group1.json

@@ -4,7 +4,7 @@
       "group": 1,
       "id": "dadaloglu",
       "time": 1,
-      "bio": "Dadaloğlu was a minstrel folk poet (est. 1785-1868) with Afshar Turkmen origins. Afshar is one of the nomadic Oghuz tribes that moved from Central Asia to Eastern Turkey. Under the rule of Ottoman Empire, Afshar people were relocated to the South-East of Anatolia to maintain the majority of people as Turkic in the region and keep rebellious tribes from different ethnic roots under control. Dadaloğlu is famous for voicing the discontent of Afshar people who were forced to leave their homes regarding these policies of the Ottoman Empire.",
+      "bio": "<h2>Dadaloğlu</h2><p>Dadaloğlu was a minstrel folk poet (est. 1785-1868) with Afshar Turkmen origins. Afshar is one of the nomadic Oghuz tribes that moved from Central Asia to Eastern Turkey. Under the rule of Ottoman Empire, Afshar people were relocated to the South-East of Anatolia to maintain the majority of people as Turkic in the region and keep rebellious tribes from different ethnic roots under control.</p><p>Dadaloğlu is famous for voicing the discontent of Afshar people who were forced to leave their homes regarding these policies of the Ottoman Empire.</p>",
       "url": "https://www.youtube.com/embed/AP4vx1BPbYY"
     },
     {
@@ -12,7 +12,7 @@
       "group": 1,
       "id": "dedekorkut",
       "time": 1,
-      "bio": "The Book of Dede Korkut or Korkut Ata is a heroic dastan(legend) of the Oghuz Turks dating back to the 6th century BCE. The stories reflect the social lifestyle of the nomadic Turkic peoples when they followed shamanic beliefs. In the stories Dede Korkut appears as the respected elder, the sage and is believed to be a real person by some of the historians. The epics were orally told and transferred over the generations by Ashiks. Only after Turks converted to Islam the twelve stories were written down and many shamanic references were altered or abandoned.",
+      "bio": "<h2>Dede Korkut</h2><p>The Book of Dede Korkut or Korkut Ata is a heroic dastan(legend) of the Oghuz Turks dating back to the 6th century BCE. The stories reflect the social lifestyle of the nomadic Turkic peoples when they followed shamanic beliefs. In the stories Dede Korkut appears as the respected elder, the sage and is believed to be a real person by some of the historians. The epics were orally told and transferred over the generations by Ashiks. Only after Turks converted to Islam the twelve stories were written down and many shamanic references were altered or abandoned.</p>",
       "url": "https://www.youtube.com/embed/AnsVY_gjJns"
     },
     {
@@ -20,7 +20,7 @@
       "group": 1,
       "id": "asikN",
       "time": 1,
-      "bio": "Kul Nesimi was an ashik who lived in 17th century and was a dervish of the Bektash-i sufi lodge. He was inspired greatly from Yunus Emre and like Pir Sultan, he was the supporter of Persian Shah against the Ottoman Empire.",
+      "bio": "<h2>Kul Nesimi</h2> <p>Kul Nesimi was an ashik who lived in 17th century and was a dervish of the Bektash-i sufi lodge. He was inspired greatly from Yunus Emre and like Pir Sultan, he was the supporter of Persian Shah against the Ottoman Empire.</p>",
       "url": "https://www.youtube.com/embed/VmS87Swhcdk"
     },
     {
@@ -28,7 +28,7 @@
       "group": 1,
       "id": "asikA",
       "time": 1,
-      "bio": "Ashik Ali İzzet (1902-1981) was an Alevi folk poet who moved to the capital from Sivas in 1940’s. His poems gets published, starts performing in folk community centers and teaching cura instrument with Ashik Veysel. He gets sentenced several times for being involved in communist propaganda. He was also a strong follower of the Bekhtas-i longe and traveled to Alevi villages visiting ‘cem’ gathering houses.",
+      "bio": "<h2>Ashik Ali İzzet</h2> <p>Ashik Ali İzzet (1902-1981) was an Alevi folk poet who moved to the capital from Sivas in 1940’s. His poems gets published, starts performing in folk community centers and teaching cura instrument with Ashik Veysel. He gets sentenced several times for being involved in communist propaganda. He was also a strong follower of the Bekhtas-i longe and traveled to Alevi villages visiting ‘cem’ gathering houses.</p>",
       "url": "https://www.youtube.com/embed/opunkzOcGS4"
     },
     {
@@ -36,7 +36,7 @@
       "group": 1,
       "id": "asikM",
       "time": 1,
-      "bio": "Aşık Mahzuni Şerif (1939-2002) was one of the most famous Alevi folk poet who expressed his political views with his poetry and published articles on newspapers. He was sentenced several times for his ideas and politically charged lyrics and in 1971 he was banned of performing for 8 years. Nevertheless his songs and poems continued to be performed by musicians of various genres to this day.",
+      "bio": "<h2>Aşık Mahzuni Şerif</h2> <p> Aşık Mahzuni Şerif (1939-2002) was one of the most famous Alevi folk poet who expressed his political views with his poetry and published articles on newspapers. He was sentenced several times for his ideas and politically charged lyrics and in 1971 he was banned of performing for 8 years. Nevertheless his songs and poems continued to be performed by musicians of various genres to this day.</p>",
       "url": "https://www.youtube.com/embed/LP5vWUSdbxg"
     },
     {
@@ -44,7 +44,7 @@
       "group": 1,
       "id": "karacaoglan",
       "time": 1,
-      "bio": "Karacaoğlan was a folk poet and ashik (est. 1600-1690) believed to have lived in the South East Anatolia. He chanted mostly about love, nature and Anatolian settlements and did not concentrate much on islamic themes or on love of God. He was much appreciated after the foundation of the Republic of Turkey in 1923 for his usage of simple language and choice of folk vocabulary and was a great influence on the modern lyric poetry.",
+      "bio": "<h2>Karacaoğlan</h2> <p>Karacaoğlan was a folk poet and ashik (est. 1600-1690) believed to have lived in the South East Anatolia. He chanted mostly about love, nature and Anatolian settlements and did not concentrate much on islamic themes or on love of God. He was much appreciated after the foundation of the Republic of Turkey in 1923 for his usage of simple language and choice of folk vocabulary and was a great influence on the modern lyric poetry.</p>",
       "url": "https://www.youtube.com/embed/JnDKZZpWBCY"
     },
     {