Added Read Along feature for the English part also improves the button on that respective page

avatars.html

@@ -24,6 +24,44 @@
         overflow-x: hidden;
       }
 
+      #translateBtnDiv {
+        position: relative;
+        top: 0px;
+        left: 0px;
+        margin-bottom: 20px;
+      }
+
+      #translateBtn, #readAloudBtn {
+        border: 0;
+        padding: 15px 25px;
+        color: #fff;
+        background-image: linear-gradient(
+          to right,
+          #314755 0%,
+          #26a0da 51%,
+          #314755 100%
+        );
+        background-size: 200% auto;
+        font-size: 16px;
+        cursor: pointer;
+        border-radius: 5px;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        transition: background-position 0.4s ease-in-out, transform 0.3s ease-in-out;
+      }
+      #translateBtn:hover, #readAloudBtn:hover{
+        background-position: right center;
+        transform: translateY(-3px);
+      }
+      #translateBtn:active, #readAloudBtn:active {
+        transform: translateY(1px);
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+      }
+
+      #translateBtn:focus, #readAloudBtn:focus {
+          outline: none;
+          box-shadow: 0 0 0 4px rgba(38, 160, 218, 0.5);
+      }
+
       .header {
         text-align: center;
         background-image: url(https://www.hitaambrish.com/stat/img/home/Gallery_Bg.jpg);
@@ -274,8 +312,21 @@
     </div>
     <div class="main">
       <h1 class="heading">Avatars of Lord Vishnu</h1>
+      <div id="translateBtnDiv">
+        <button onclick="readAloadAvatar()" id="readAloudBtn">
+          Read Aloud
+        </button>
+        <button onclick="pauseSpeech()" id="readAloudBtn">
+          Pause
+        </button>
+        <button onclick="resumeSpeech()" id="readAloudBtn">
+          Resume
+        </button>
+        <button onclick="stopSpeech()" id="readAloudBtn">
+          Stop
+        </button>
+      </div>
         <div class="container">
-
             <div class="row row1">
                 <img src="images/Matsya.jpeg" alt="">
                 <h1>Matsya</h1>

index.html

@@ -122,8 +122,9 @@
         top: 70px;
         left: 270px;
       }
-
-      #translateBtn {
+      /*Updated readAloudBtn Style*/
+
+      #translateBtn, #readAloudBtn {
         border: 0;
         padding: 15px 25px;
         color: #fff;
@@ -136,10 +137,26 @@
         background-size: 200% auto;
         font-size: 16px;
         cursor: pointer;
-      }
-      #translateBtn:hover {
+        border-radius: 5px;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        transition: background-position 0.4s ease-in-out, transform 0.3s ease-in-out;
+    }
+
+    #translateBtn:hover, #readAloudBtn:hover {
         background-position: right center;
-      }
+        transform: translateY(-3px);
+    }
+
+    #translateBtn:active, #readAloudBtn:active {
+        transform: translateY(1px);
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    }
+
+    #translateBtn:focus, #readAloudBtn:focus {
+        outline: none;
+        box-shadow: 0 0 0 4px rgba(38, 160, 218, 0.5);
+    }
+
       .krishna-image {
         margin: 10px 0px 10px 550px;
         width: 27%;
@@ -183,6 +200,9 @@
           font-size: 14px;
           margin: 10px;
         }
+
+
+
         .krishna-image {
           margin: 10px 0px 0px 22px;
           width: 85%;
@@ -733,6 +753,18 @@ <h1>Shree Krishna - My Strength</h1>
         <button onclick="toggleLanguage()" id="translateBtn">
           हिंदी में पढ़ें
         </button>
+        <button onclick="readAloud()" id="readAloudBtn">
+          Read Aloud
+        </button>
+        <button onclick="pauseSpeech()" id="readAloudBtn">
+          Pause
+        </button>
+        <button onclick="resumeSpeech()" id="readAloudBtn">
+          Resume
+        </button>
+        <button onclick="stopSpeech()" id="readAloudBtn">
+          Stop
+        </button>
       </div>
       <div class="content">
         <div id="content-english">

script.js

@@ -1,6 +1,5 @@
 let isHindi = false;
 const button = document.getElementById("translateBtn");
-
 function toggleLanguage() {
   const contentEnglish = document.getElementById("content-english");
   const contentHindi = document.getElementById("content-hindi");
@@ -210,3 +209,102 @@ document.querySelectorAll(".faq-question").forEach((button) => {
   });
 });
 
+let speechSynthesisUtterance;
+let isPaused = false;
+
+// Read aloud feature
+function readAloud() {
+  // Get all text content from the body or a specific section
+  const contentDiv = document.querySelector('.content');
+  const textToRead = contentDiv.innerText;
+
+  // Check for speech synthesis support
+  if ('speechSynthesis' in window) {
+      // Stop any ongoing speech before creating a new utterance
+      window.speechSynthesis.cancel(); 
+
+      speechSynthesisUtterance = new SpeechSynthesisUtterance(textToRead);
+      speechSynthesisUtterance.lang = 'en-US'; // Change this to the desired language code (e.g., 'hi-IN' for Hindi)
+
+      // Optional: Set additional properties
+      speechSynthesisUtterance.rate = 1; // Speed of speech (default is 1)
+      speechSynthesisUtterance.pitch = 1; // Pitch of the voice (default is 1)
+
+      // Speak the text
+      window.speechSynthesis.speak(speechSynthesisUtterance);
+  } else {
+      alert("Sorry, your browser does not support speech synthesis.");
+  }
+}
+
+
+// Function to pause the speech
+function pauseSpeech(){
+  if(window.speechSynthesis.speaking && !isPaused){
+    window.speechSynthesis.pause();
+    isPaused = true;
+  }
+}
+
+// Function to resume the speech
+function resumeSpeech() {
+  if (isPaused) {
+      window.speechSynthesis.resume();
+      isPaused = false;
+  }
+}
+// Function to stop the speech
+function stopSpeech() {
+  window.speechSynthesis.cancel();
+  isPaused = false; // Reset pause state
+}
+
+// Readaloud in scripture page
+function readAloudScripture() {
+  // Get all text content from the body or a specific section
+  const contentDiv = document.getElementById('content-english')
+  const textToRead = contentDiv.innerText;
+
+  // Check for speech synthesis support
+  if ('speechSynthesis' in window) {
+      // Stop any ongoing speech before creating a new utterance
+      window.speechSynthesis.cancel(); 
+
+      speechSynthesisUtterance = new SpeechSynthesisUtterance(textToRead);
+      speechSynthesisUtterance.lang = 'en-US'; // Change this to the desired language code (e.g., 'hi-IN' for Hindi)
+
+      // Optional: Set additional properties
+      speechSynthesisUtterance.rate = 1; // Speed of speech (default is 1)
+      speechSynthesisUtterance.pitch = 1; // Pitch of the voice (default is 1)
+
+      // Speak the text
+      window.speechSynthesis.speak(speechSynthesisUtterance);
+  } else {
+      alert("Sorry, your browser does not support speech synthesis.");
+  }
+}
+
+// For avatars section readAloud
+function readAloadAvatar() {
+  // Get all text content from the body or a specific section
+  const contentDiv = document.querySelector('.container')
+  const textToRead = contentDiv.innerText;
+
+  // Check for speech synthesis support
+  if ('speechSynthesis' in window) {
+      // Stop any ongoing speech before creating a new utterance
+      window.speechSynthesis.cancel(); 
+
+      speechSynthesisUtterance = new SpeechSynthesisUtterance(textToRead);
+      speechSynthesisUtterance.lang = 'en-US'; // Change this to the desired language code (e.g., 'hi-IN' for Hindi)
+
+      // Optional: Set additional properties
+      speechSynthesisUtterance.rate = 1; // Speed of speech (default is 1)
+      speechSynthesisUtterance.pitch = 1; // Pitch of the voice (default is 1)
+
+      // Speak the text
+      window.speechSynthesis.speak(speechSynthesisUtterance);
+  } else {
+      alert("Sorry, your browser does not support speech synthesis.");
+  }
+}

scriptures.html

@@ -67,7 +67,7 @@
         margin-bottom: 20px;
       }
 
-      #translateBtn {
+      #translateBtn, #readAloudBtn {
         border: 0;
         padding: 15px 25px;
         color: #fff;
@@ -80,9 +80,22 @@
         background-size: 200% auto;
         font-size: 16px;
         cursor: pointer;
+        border-radius: 5px;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        transition: background-position 0.4s ease-in-out, transform 0.3s ease-in-out;
       }
-      #translateBtn:hover {
+      #translateBtn:hover, #readAloudBtn:hover{
         background-position: right center;
+        transform: translateY(-3px);
+      }
+      #translateBtn:active, #readAloudBtn:active {
+        transform: translateY(1px);
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+      }
+
+      #translateBtn:focus, #readAloudBtn:focus {
+          outline: none;
+          box-shadow: 0 0 0 4px rgba(38, 160, 218, 0.5);
       }
 
       .content p {
@@ -491,6 +504,18 @@ <h1>Scriptures</h1>
         <button onclick="toggleLanguage()" id="translateBtn">
           हिंदी में पढ़ें
         </button>
+        <button onclick="readAloudScripture()" id="readAloudBtn">
+          Read Aloud
+        </button>
+        <button onclick="pauseSpeech()" id="readAloudBtn">
+          Pause
+        </button>
+        <button onclick="resumeSpeech()" id="readAloudBtn">
+          Resume
+        </button>
+        <button onclick="stopSpeech()" id="readAloudBtn">
+          Stop
+        </button>
       </div>
       <div id="content-english">
         <!-- Bhagavad Gita Card -->