Fixed issue apu52#1476

Theme.js

@@ -20,13 +20,17 @@ function applyTheme(theme) {
   if (theme === "dark") {
     document.body.classList.add("dark-theme");
     document.body.classList.remove("light-theme");
-    themeLabel.style.background = "var(--primary-color)";
+    // themeLabel.style.background = "var(--primary-color)";
+    themeToggle.title = 'Switch to Light mode';
     themeToggle.checked = true;
+
   } else {
     document.body.classList.add("light-theme");
     document.body.classList.remove("dark-theme");
-    themeLabel.style.background = "#fff";
+    // themeLabel.style.background = "fff";
+    themeToggle.setAttribute('title','Switch to Dark mode');
     themeToggle.checked = false; 
+
   }
 }
 

index.html

@@ -99,8 +99,8 @@
       .toggle-container {
         position: relative;
         right: 2.5rem;
-
       }
+
 
       .toggle {
         width: 130%;
@@ -851,7 +851,7 @@ <h2 data-max="30" id="test">+ Developers</h2>
     <div class="modal-container">
       <div class="modal-wrapper">
         <div class="cross-container">
-          <i class="fas fa-times close-btn" onclick="closeModal()"></i>
+          <i class="fas fa-times close-btn" onclick="closeModal()" title="Close"></i>
         </div>
         <div class="modal-newsletter">
           <div class="modal-header">
@@ -2184,7 +2184,7 @@ <h4>Contact Us</h4>
     </footer>
 
 
-    <a class="goupbtn" href="#" onclick="goToTop()"><i class="fa-solid fa-arrow-up"></i></a>
+    <a class="goupbtn"  title="Back to top" onclick="goToTop()"><i class="fa-solid fa-arrow-up"></i></a>
 
     <script>
       // Get the button

index.js

@@ -5,6 +5,20 @@ const closeBtn = document.querySelector(".close-btn");
 const subscribeBtn = document.querySelector("#news-subscribe");
 const form = document.querySelector("#modal-form");
 
+// const toggleContainer = document.querySelector('.toggle-container');
+//     const hoverText = document.querySelector('.hover-txt');
+//     // Show hover text on mouseover
+//     toggleContainer.addEventListener('mouseover', () => {
+//       hoverText.style.display = 'block';
+//       hoverText.style.color = 'white';
+//     });
+
+//     // Hide hover text on mouseout
+//     toggleContainer.addEventListener('mouseout', () => {
+//       hoverText.style.display = 'none';
+//     });
+
+
 function openModal() {
   modalContainer.style.display = "flex";
 }

login/script.js

@@ -38,14 +38,17 @@ function togglePasswordVisibility(buttonId, inputId, iconId) {
       // Toggle the type attribute
       const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
       passwordInput.setAttribute('type', type);
+
 
       // Toggle the icon
       if (type === 'password') {
           icon.classList.remove('fa-eye-slash');
           icon.classList.add('fa-eye');
+          toggleButton.setAttribute('title', 'Show');
       } else {
           icon.classList.remove('fa-eye');
           icon.classList.add('fa-eye-slash');
+          toggleButton.setAttribute('title', 'Hide');
       }
   });
 }

newLogin.html

@@ -32,7 +32,7 @@ <h1>Tour Guide</h1>
           <input type="email" placeholder="Email" id="registerEmail">
           <div id="register-section" class="input-container">
               <input type="password" placeholder="Password" id="registerPassword">
-              <button type="button" id="toggleRegisterPassword">
+              <button type="button" id="toggleRegisterPassword" title="Show">
                 <i id="registerIcon" class="fas fa-eye"></i>
             </button>
           </div>
@@ -55,7 +55,7 @@ <h1>Tour Guide</h1>
           <input type="email" placeholder="Email" id="loginEmail">
           <div id="login-section" class="input-container">
             <input type="password" placeholder="Password" id="loginPassword">
-            <button type="button" id="toggleLoginPassword">
+            <button type="button" id="toggleLoginPassword" title="Show">
               <i id="loginIcon" class="fas fa-eye"></i>
           </button>
         </div>