Merge pull request #622 from ASP124/loginalert

Loginalert
Susmita-Dey · Oct 20, 2023 · 3a23f00 · 3a23f00
2 parents 90988d0 + e4efc1d
commit 3a23f00
Show file tree

Hide file tree

Showing 4 changed files with 184 additions and 92 deletions.
diff --git a/html/contact.html b/html/contact.html
@@ -47,7 +47,7 @@ <h1>Contact Us</h1>
 
                 <a class="atag" href="mailto:[email protected]"><button type="submit" class="btn">Submit</button></a>   
             </form>
-            <p><a class="tag" href="/index.html">&#8592; Back</a></p>
+            <p><a class="tag" href="../index.html">&#8592; Back</a></p>
         </div>
     </section>
     <script>

diff --git a/html/login.html b/html/login.html
@@ -1,22 +1,43 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="/images/favicon-enhanced.png" />
-    <link rel="stylesheet" href="css/login.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
-    <title>Sukoon - Login</title>
-    <style>
-      input[type="password"]::-webkit-credentials-auto-fill-button,
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" href="/images/favicon-enhanced.png" />
+  <link rel="stylesheet" href="css/login.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
+  <style>
+    /* Custom CSS for alert messages */
+    .alert {
+      display: none;
+      position: fixed;
+      top: 10%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      padding: 20px;
+      background-color: #4caf50;
+      color: white;
+      text-align: center;
+      border-radius: 6px;
+      box-shadow: 0px 0px 10px 0px #262626;
+      opacity: 0.8;
+      transition: all 0.3s ease-in-out;
+      z-index: 1;
+    }
+
+    #emptyFieldsAlert {
+      background-color: red;
+    }
+
+    input[type="password"]::-webkit-credentials-auto-fill-button,
       input[type="password"]::-webkit-contacts-auto-fill-button,
       input[type="password"]::-ms-reveal {
         display: none;
       }
-
-    </style>
-  </head>
+  </style>
+  <title>Sukoon - Login</title>
+</head>
   <body onload="myfunction()">
     <div id="load">
       <div
@@ -26,85 +47,151 @@
           width: 100%;
           position: relative;
           top: -70px;
-        "
-      ></div>
+        "></div>
+  </div>
+  <div class="alert" id="emptyFieldsAlert" style="display: none">
+    Please fill in all fields!
+  </div>
+  <img src="../images/signupill.png" alt="" />
+  <div class="login">
+    <div class="welcome">
+      <h1 class="titletext">Welcome Back &#x1F917</h1>
+      <span>Please enter your details.</span>
+    </div>
+    <div class="inputs">
+      <span>Email<br /></span>
+      <input class="inputbox" placeholder="Enter your email" id="loginEmail" /><br />
+      <span>Password<br /></span>
+      <input type="password" class="inputbox" placeholder="••••••••" id="loginPassword" />
+      <i class="far fa-eye" id="toggleLoginPassword" style="margin-left: -30px; cursor: pointer;"></i>
+    </div>
+    <div class="forgotpass">
+      <span>Forgot Password</span>
+    </div>
+    <p class="back"><a class="tag" href="../index.html">&#8592; Back</a></p>
+    <div class="button">
+      <input type="button" class="signin" value="Sign in" id="loginButton" />
     </div>
-    <img src="/images/signupill.png" alt="" />
-    <div class="login">
-      <div class="welcome">
-        <h1 class="titletext">Welcome Back &#x1F917</h1>
-        <span>Please enter your details.</span>
-      </div>
-      <div class="inputs">
-        <span>Email<br /></span>
-        <input class="inputbox" placeholder="Enter your email" /><br />
-        <span>Password<br /></span>
-        <input type="password" class="inputbox" placeholder="••••••••"  id="id_password">
-        <i class="far fa-eye" id="togglePassword" style="margin-left: -30px; cursor: pointer;"></i>
-      </div>
-      <div class="forgotpass">
-        <span>Forgot Password</span>
-      </div>
-      <p class="back"><a class="tag" href="/index.html">&#8592; Back</a></p>
-      <div class="button">
-        <input type="button" class="signin" value="Sign in" />
-      </div>
-      <div class="signupline">
-        <span>Don't have an account?</span>
-        <span class="signupbutton"> Sign up</span>
-      </div>
+    <div class="signupline">
+      <span>Don't have an account?</span>
+      <span class="signupbutton"> Sign up</span>
     </div>
-    <div class="register">
-      <div class="welcome">
-        <h1 class="titletext">Create an account</h1>
-        <span>Let's get started.</span>
-      </div>
-      <div class="inputs">
-        <span>Username<br /></span>
-        <input class="inputbox" placeholder="Enter your username" /><br />
-        <span>Email<br /></span>
-        <input class="inputbox" placeholder="Enter your email" /><br />
-        <span>Password<br /></span>
-        <input type="password" class="inputbox" placeholder="••••••••"  id="id_password">
-        <i class="far fa-eye" id="togglePassword" style="margin-left: -30px; cursor: pointer;"></i>
-      </div>
-      <p class="back-1"><a class="tag1" href="/index.html">&#8592; Back</a></p>
-      <div class="button">
-        <input type="button" class="signin" value="Sign up" />
-      </div>
-      <div class="signupline">
-        <span>Already have an account?</span>
-        <span class="signinbutton"> Sign in</span>
-      </div>
+  </div>
+  <div class="register">
+    <div class="welcome">
+      <h1 class="titletext">Create an account</h1>
+      <span>Let's get started.</span>
     </div>
+    <div class="inputs">
+      <span>Username<br /></span>
+      <input class="inputbox" placeholder="Enter your username" id="signupUsername" /><br />
+      <span>Email<br /></span>
+      <input class="inputbox" placeholder="Enter your email" id="signupEmail" /><br />
+      <span>Password<br /></span>
+      <input type="password" class="inputbox" placeholder="••••••••" id="signupPassword" />
+      <i class="far fa-eye" id="toggleSignupPassword" style="margin-left: -30px; cursor: pointer;"></i>
+    </div>
+    <p class="back-1"><a class="tag1" href="../index.html">&#8592; Back</a></p>
+    <div class="button">
+      <input type="button" class="signin" value="Sign up" id="signupButton" />
+    </div>
+    <div class="signupline">
+      <span>Already have an account?</span>
+      <span class="signinbutton"> Sign in</span>
+    </div>
+  </div>
+
+  <!-- Alert messages -->
+  <div class="alert" id="loginAlert">Sign in successful!</div>
+  <div class="alert" id="signupAlert">Sign up successful!</div>
 
-    <script>
-      const signin_btn = document.querySelector(".signinbutton");
-      const signup_btn = document.querySelector(".signupbutton");
-      const register = document.querySelector(".register");
-      const login = document.querySelector(".login");
-      signup_btn.addEventListener("click", () => {
-        register.style.display = "block";
-        login.style.display = "none";
-      });
-      signin_btn.addEventListener("click", () => {
-        register.style.display = "none";
-        login.style.display = "block";
-      });
-    </script>
-    <script>
-      var preloader = document.getElementById("load");
-      function myfunction() {
-        preloader.style.display = "none";
+  <script>
+    const signin_btn = document.querySelector(".signinbutton");
+    const signup_btn = document.querySelector(".signupbutton");
+    const register = document.querySelector(".register");
+    const login = document.querySelector(".login");
+    signup_btn.addEventListener("click", () => {
+      register.style.display = "block";
+      login.style.display = "none";
+    });
+    signin_btn.addEventListener("click", () => {
+      register.style.display = "none";
+      login.style.display = "block";
+    });
+    loginButton.addEventListener("click", () => {
+      const emailInput = document.getElementById("loginEmail");
+      const passwordInput = document.getElementById("loginPassword");
+      const loginAlert = document.getElementById("loginAlert");
+      if (emailInput.value.trim() === "" || passwordInput.value.trim() === "") {
+        const emptyFieldsAlert = document.getElementById("emptyFieldsAlert");
+        emptyFieldsAlert.style.display = "block";
+        setTimeout(() => {
+          emptyFieldsAlert.style.display = "none";
+        }, 3000);
+      } else {
+        emailInput.value = ""; // Clear email input
+        passwordInput.value = ""; // Clear password input
+
+        loginAlert.style.display = "block";
+        setTimeout(() => {
+          loginAlert.style.display = "none";
+        }, 3000);
+      }
+    });
+
+    signupButton.addEventListener("click", () => {
+      const usernameInput = document.getElementById("signupUsername");
+      const emailInput = document.getElementById("signupEmail");
+      const passwordInput = document.getElementById("signupPassword");
+      const signupAlert = document.getElementById("signupAlert");
+
+      if (
+        usernameInput.value.trim() === "" ||
+        emailInput.value.trim() === "" ||
+        passwordInput.value.trim() === ""
+      ) {
+        const emptyFieldsAlert = document.getElementById("emptyFieldsAlert");
+        emptyFieldsAlert.style.display = "block";
+        setTimeout(() => {
+          emptyFieldsAlert.style.display = "none";
+        }, 3000);
+      } else {
+        usernameInput.value = ""; // Clear username input
+        emailInput.value = ""; // Clear email input
+        passwordInput.value = ""; // Clear password input
+
+        signupAlert.style.display = "block";
+        setTimeout(() => {
+          signupAlert.style.display = "none";
+        }, 3000);
       }
-      const togglePassword = document.querySelector('#togglePassword');
-  const password = document.querySelector('#id_password');
+    });
+
+  </script>
+  <script>
+    var preloader = document.getElementById("load");
+    function myfunction() {
+      preloader.style.display = "none";
+    }
+    const toggleLoginPassword = document.querySelector("#toggleLoginPassword");
+    const loginPassword = document.getElementById("loginPassword");
+
+    toggleLoginPassword.addEventListener("click", function (e) {
+      const type =
+        loginPassword.getAttribute("type") === "password" ? "text" : "password";
+      loginPassword.setAttribute("type", type);
+      this.classList.toggle("fa-eye-slash");
+    });
+
+    const toggleSignupPassword = document.querySelector("#toggleSignupPassword");
+    const signupPassword = document.getElementById("signupPassword");
 
-  togglePassword.addEventListener('click', function (e) {
-    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
-    password.setAttribute('type', type);
-    this.classList.toggle('fa-eye-slash');
-});
-    </script>
-  </body>
-</html>
+    toggleSignupPassword.addEventListener("click", function (e) {
+      const type =
+        signupPassword.getAttribute("type") === "password" ? "text" : "password";
+      signupPassword.setAttribute("type", type);
+      this.classList.toggle("fa-eye-slash");
+    });
+  </script>
+</body>
+</html>
diff --git a/html/yogatherapy.html b/html/yogatherapy.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />

diff --git a/index.html b/index.html
@@ -591,11 +591,14 @@ <h3>
             <li>
               <a href="https://sukoon-stress-free.netlify.app/html/audiotherapy">Audio Therapy</a>
             </li>
+            <li>
+              <a href="https://sukoon-stress-free.netlify.app/html/readingtherapy">Reading Therapy</a>
+            </li>
             <li>
               <a href="https://sukoon-stress-free.netlify.app/html/yogatherapy.html">Yoga Therapy</a>
             </li>
             <li>
-              <a href="https://sukoon-stress-free.netlify.app/html/readingtherapy">Reading Therapy</a>
+              <a href="https://sukoon-stress-free.netlify.app/html/laughTherapy.html">Laughing Therapy</a>
             </li>
             <li>
               <a href="https://sukoon-stress-free.netlify.app/html/talkingtherapy">Talking Therapy</a>
@@ -609,6 +612,9 @@ <h3>
             <li>
               <a href="https://sukoon-stress-free.netlify.app/html/spiritualTherapy">Spiritual Therapy</a>
             </li>
+            <li>
+              <a href="https://sukoon-stress-free.netlify.app/html/specialTherapy">Special Therapy</a>
+            </li>
           </ul>
         </div>
         <!--CONTACTS COLUMN-->