From 60d5f6d134a20413f4bbb1be6a67c53c7868d5af Mon Sep 17 00:00:00 2001
From: gupt-mudit <100841274+gupt-mudit@users.noreply.github.com>
Date: Sat, 21 Oct 2023 05:11:17 +0530
Subject: [PATCH 1/4] Update index.html

updated id's of audios elements
---
 index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index c258eed..fc2b7c7 100644
--- a/index.html
+++ b/index.html
@@ -547,9 +547,9 @@ <h1 class="bheads audiobooks-heading">Listen to Audiobooks</h1>
                 <img src="https://m.media-amazon.com/images/I/51vpG4hU6FL._SL500_.jpg">
               </a>
               <div class="sound">
-                <img src="media/play.webp" id="nyan-btn">
+                <img src="media/play.webp" id="nyan-btn2">
               </div>
-              <audio id="nyan" src="assets/AudioBook/Python_1.mp3" preload="metadata" type="audio/mpeg">
+              <audio id="nyan2" src="assets/AudioBook/Comp_Networking.mp3" preload="metadata" type="audio/mpeg">
                 Your browser does not support the audio element.
               </audio>
             </div>
@@ -562,9 +562,9 @@ <h1 class="bheads audiobooks-heading">Listen to Audiobooks</h1>
                 <img src="https://m.media-amazon.com/images/I/51hVSO2ONDL._SL500_.jpg" target="_blank">
               </a>
               <div class="sound">
-                <img src="media/play.webp" id="nyan-btn">
+                <img src="media/play.webp" id="nyan-btn3">
               </div>
-              <audio id="nyan" src="assets/AudioBook/Python_1.mp3" preload="metadata" type="audio/mpeg">
+              <audio id="nyan3" src="assets/AudioBook/Comp_Prog_-_the_bible.mp3" preload="metadata" type="audio/mpeg">
                 Your browser does not support the audio element.
               </audio>
             </div>
@@ -578,9 +578,9 @@ <h1 class="bheads audiobooks-heading">Listen to Audiobooks</h1>
                 <img src="https://m.media-amazon.com/images/I/511KH-QzPeL._SL500_.jpg">
               </a>
               <div class="sound">
-                <img src="media/play.webp" id="nyan-btn">
+                <img src="media/play.webp" id="nyan-btn4">
               </div>
-              <audio id="nyan" src="assets/AudioBook/Python_1.mp3" preload="metadata" type="audio/mpeg">
+              <audio id="nyan4" src="assets/AudioBook/Comp_Prog_and_Cyber_Sec.mp3" preload="metadata" type="audio/mpeg">
                 Your browser does not support the audio element.
               </audio>
             </div>

From 27a078233d61da052c8ed3653f6ba2979b18b421 Mon Sep 17 00:00:00 2001
From: gupt-mudit <100841274+gupt-mudit@users.noreply.github.com>
Date: Sat, 21 Oct 2023 05:12:39 +0530
Subject: [PATCH 2/4] Update audiobook.js

made same code for other audio elements
---
 assets/js/audiobook.js | 141 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 140 insertions(+), 1 deletion(-)

diff --git a/assets/js/audiobook.js b/assets/js/audiobook.js
index 21b0dad..6cbc180 100644
--- a/assets/js/audiobook.js
+++ b/assets/js/audiobook.js
@@ -41,4 +41,143 @@ if(nyanBtn){
         playPause(nyan);
         progress(nyanBtn, nyan);
     });
-}
\ No newline at end of file
+}
+//////////////////////////////////////////////////////////////////////////////////////////////////////////////
+//for book2
+var nyan2 = document.getElementById("nyan2");
+var nyanBtn2 = document.getElementById("nyan-btn2");
+
+nyanBtn2.onclick = function(){
+    if (nyan2.paused && nyan2.currentTime >= 0 && !nyan2.ended) {
+                 nyan2.play();
+             nyanBtn2.src = "media/pause.webp";
+}else {
+    nyan2.pause();
+    nyanBtn2.src ="media/play.webp"
+}
+} 
+
+function reset(btn, song) {
+    if (btn.classList.contains('playing')) {
+        btn.classList.toggle('playing');
+    }
+    song.pause();
+    song.currentTime = 0;
+}
+
+function progress(btn, song) {
+    setTimeout(function () {
+        var end = song.duration;
+        var current = song.currentTime;
+        var percent = current / (end / 100);
+        //check if song is at the end
+        if (current == end) {
+            reset(btn, song);
+        }
+        //set inset box shadow
+        btn.style.boxShadow = "inset " + btn.offsetWidth * (percent / 100) + "px 0px 0px 0px rgba(0,0,0,0.125)"
+        //call function again
+        progress(btn, song);
+    }, 133.7);
+}
+
+if(nyanBtn2){
+    nyanBtn2.addEventListener('click', function () {
+        nyanBtn2.classList.toggle('playing');
+        playPause(nyan2);
+        progress(nyanBtn2, nyan2);
+    });
+}
+//////////////////////////////////////////////////////////////////////////////////////
+//for book 3
+var nyan3 = document.getElementById("nyan3");
+var nyanBtn3 = document.getElementById("nyan-btn3");
+
+nyanBtn3.onclick = function(){
+    if (nyan3.paused && nyan3.currentTime >= 0 && !nyan3.ended) {
+                 nyan3.play();
+             nyanBtn3.src = "media/pause.webp";
+}else {
+    nyan3.pause();
+    nyanBtn3.src ="media/play.webp"
+}
+} 
+
+function reset(btn, song) {
+    if (btn.classList.contains('playing')) {
+        btn.classList.toggle('playing');
+    }
+    song.pause();
+    song.currentTime = 0;
+}
+
+function progress(btn, song) {
+    setTimeout(function () {
+        var end = song.duration;
+        var current = song.currentTime;
+        var percent = current / (end / 100);
+        //check if song is at the end
+        if (current == end) {
+            reset(btn, song);
+        }
+        //set inset box shadow
+        btn.style.boxShadow = "inset " + btn.offsetWidth * (percent / 100) + "px 0px 0px 0px rgba(0,0,0,0.125)"
+        //call function again
+        progress(btn, song);
+    }, 133.7);
+}
+
+if(nyanBtn3){
+    nyanBtn3.addEventListener('click', function () {
+        nyanBtn3.classList.toggle('playing');
+        playPause(nyan3);
+        progress(nyanBtn3, nyan3);
+    });
+}
+//////////////////////////////////////////////////////////////
+//for book4
+var nyan4 = document.getElementById("nyan4");
+var nyanBtn4 = document.getElementById("nyan-btn4");
+
+nyanBtn4.onclick = function(){
+    if (nyan4.paused && nyan4.currentTime >= 0 && !nyan4.ended) {
+                 nyan4.play();
+             nyanBtn4.src = "media/pause.webp";
+}else {
+    nyan4.pause();
+    nyanBtn4.src ="media/play.webp"
+}
+} 
+
+function reset(btn, song) {
+    if (btn.classList.contains('playing')) {
+        btn.classList.toggle('playing');
+    }
+    song.pause();
+    song.currentTime = 0;
+}
+
+function progress(btn, song) {
+    setTimeout(function () {
+        var end = song.duration;
+        var current = song.currentTime;
+        var percent = current / (end / 100);
+        //check if song is at the end
+        if (current == end) {
+            reset(btn, song);
+        }
+        //set inset box shadow
+        btn.style.boxShadow = "inset " + btn.offsetWidth * (percent / 100) + "px 0px 0px 0px rgba(0,0,0,0.125)"
+        //call function again
+        progress(btn, song);
+    }, 133.7);
+}
+
+if(nyanBtn4){
+    nyanBtn4.addEventListener('click', function () {
+        nyanBtn4.classList.toggle('playing');
+        playPause(nyan4);
+        progress(nyanBtn4, nyan4);
+    });
+}
+

From 6f7757a2fcdc13ba1b5f7485de5e0949d6dc25fa Mon Sep 17 00:00:00 2001
From: gupt-mudit <100841274+gupt-mudit@users.noreply.github.com>
Date: Sat, 21 Oct 2023 05:13:23 +0530
Subject: [PATCH 3/4] Update audiobook.css

---
 assets/css/audiobook.css | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/assets/css/audiobook.css b/assets/css/audiobook.css
index 5c863bf..0aed52b 100644
--- a/assets/css/audiobook.css
+++ b/assets/css/audiobook.css
@@ -60,5 +60,21 @@
   height: 70px;
 
 }
+#nyan-btn2{
+  width: 70px;
+  height: 70px;
+
+}
+#nyan-btn3{
+  width: 70px;
+  height: 70px;
+
+}
+#nyan-btn4{
+  width: 70px;
+  height: 70px;
+
+}
+
 
- 
\ No newline at end of file
+ 

From e08bd00775401a842202aa74ce3c3c29ae030fcb Mon Sep 17 00:00:00 2001
From: gupt-mudit <100841274+gupt-mudit@users.noreply.github.com>
Date: Sat, 21 Oct 2023 05:14:29 +0530
Subject: [PATCH 4/4] Update style.css

---
 assets/css/style.css | 47 +++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 0420bb9..594b70f 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1386,7 +1386,52 @@ background-image: linear-gradient(190deg,rgb(95,79,57),rgb(127,106,77), rgb(191,
 	box-shadow: 0 0 30px #fff;
 	cursor: pointer;
 	transform: scale(1.1);
+
+}
+#nyan-btn2{
+	border-radius: 200px;
+	background-color: #fff;
+	border: 1px solid #ffffff;
+}
+#nyan-btn2:hover{
+	border-radius: 200px;
+	background-color: #fff;
+	border: 1px solid #fff;
+	box-shadow: 0 0 30px #fff;
+	cursor: pointer;
+	transform: scale(1.1);
+
+}
+#nyan-btn3{
+	border-radius: 200px;
+	background-color: #fff;
+	border: 1px solid #ffffff;
+}
+#nyan-btn3:hover{
+	border-radius: 200px;
+	background-color: #fff;
+	border: 1px solid #fff;
+	box-shadow: 0 0 30px #fff;
+	cursor: pointer;
+	transform: scale(1.1);
+
+}
+#nyan-btn4{
+	border-radius: 200px;
+	background-color: #fff;
+	border: 1px solid #ffffff;
+}
+#nyan-btn4:hover{
+	border-radius: 200px;
+	background-color: #fff;
+	border: 1px solid #fff;
+	box-shadow: 0 0 30px #fff;
+	cursor: pointer;
+	transform: scale(1.1);
+
 }
+
+
 .books-audios{
 	display: flex;
 	flex-direction: column;
@@ -3076,4 +3121,4 @@ select {
 	background: #a56902;
 	border-color: #ffc96b;
 	text-decoration: none;
-  }
\ No newline at end of file
+  }