c

.hta_slug/login.php

@@ -31,7 +31,7 @@
                     // echo $_SESSION["loggedin"].$_SESSION["log_status"].$_SESSION["access"].$_SESSION["name"].$_SESSION["email"];
                 }
             } else{
-                echo "<p class='text-danger'>Credentials did not match</p>";
+                $loginErrorMessage = "Credentials did not match";
             }
             
             // else echo "credentials did not match";+
@@ -40,7 +40,6 @@
         }
 
     }
-
 ?>
 <div class="container-fluid" style="background-image: url('/assets/login-back1.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; height: 100vh; width: 100%;">
     <div class="login-section-center flex flex-col">
@@ -50,6 +49,7 @@
                 <h2 class="">Enter your email and password to access your account</h2>
             </div>
             <form action="" method="post" class="space-y-4 rounded-md">
+                <?php if(isset($loginErrorMessage)) echo "<p class='text-red-500 font-bold shake'>$loginErrorMessage</p>"; ?>
                 <div class="">
                     <label for="email">Email:</label>
                     <input type="text" class="p-2 bg-transparent text-[#fff] border-[2px] border-[#fff] rounded-lg focus:outline-none w-full" name="email" placeholder="Email ID">
@@ -90,4 +90,19 @@
         border-radius: 20px;
         padding: 20px;
     }
+    @keyframes shake {
+    0% { transform: translateX(0); }
+    25% { transform: translateX(-5px); }
+    50% { transform: translateX(5px); }
+    75% { transform: translateX(-5px); }
+    100% { transform: translateX(0); }
+}
+
+.shake {
+    background: #ffffff70;
+    display: inline-block;
+    animation: shake 0.2s;
+    border-radius: 6px;
+    padding: 5px 10px 5px 10px;
+}
 </style>