From 653650045d816fd105b6740b0a48be141a92d5ee Mon Sep 17 00:00:00 2001
From: Prachi Ikhar <prachiikhar42@gmail.com>
Date: Mon, 28 Oct 2024 19:51:57 +0530
Subject: [PATCH] Removed the giltch from login, and enhanced signup button

---
 views/login.ejs | 499 ++++++++++++++++++++++++------------------------
 1 file changed, 251 insertions(+), 248 deletions(-)
diff --git a/views/login.ejs b/views/login.ejs
index deb11766..79f95138 100644
--- a/views/login.ejs
+++ b/views/login.ejs
@@ -1,251 +1,254 @@
-<%- include('includes/PRE.ejs') %> 
-<%- include('includes/header.ejs') %>
-<%- include('includes/sidebar.ejs') %>
-
-<head>
-  <style>
-    body {
-      background-color: #121212;
-      color: #ffffff;
-      font-family: 'Poppins', sans-serif;
-    }
-
-    form {
-      max-width: 600px;
-      max-height: fit-content; /* Increased width for more space */
-      margin: 40px auto 50px; /* Adjusted top margin to prevent touching navbar */
-       /* Reduced padding */
-      background-color: #1b1b1b;
-      border-radius: 12px;
-      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
-    }
-
-    h1 {
-      text-align: center;
-       /* Reduced the bottom margin */
-      font-size: 10rem;
-      color: #00ffff;
-    }
-
-    label {
-      display: block;
-      margin-bottom: 5px;
-      font-weight: bold;
-      color: #ffffff;
-    }
-
-    input[type="email"], input[type="password"], input[type="text"] {
-      width: 100%;
-      padding: 15px;
-      margin-top: 10px;
-      margin-bottom: 20px;
-      border-radius: 8px;
-      border: 2px solid #333;
-      background-color: #262626;
-      color: #ffffff;
-      box-sizing: border-box;
-      padding-right: 40px; /* To accommodate eye icon in the password field */
-    }
-
-    .eye-container {
-    position: relative; /* Create a positioning context for the absolute element */
-    }
-
-    #eye{
-      color: aqua;
-      position: absolute;
-      top: 10px;
-      right: 15px;
-      left: auto;
-      transform: none;
-      cursor: pointer;
-    }
-
-    input[type="email"]:hover, input[type="password"]:hover, input[type="text"]:hover {
-      background-color: #333;
-    }
-
-    .form-control {
-      margin-bottom: 20px;
-    }
-    #eye{
-      align-self: right;
-    }
-
-    #captchaContainer {
-      display: flex;
-      align-items: center;
-    }
-
-    #captcha {
-      margin-right: 10px;
-    }
-
-    button {
-      width: 100%;
-      padding: 15px;
-      background-color: #00b3b3;
-      color: white;
-      font-size: 1.2rem;
-      border: none;
-      border-radius: 25px;
-      cursor: pointer;
-      transition: background-color 0.3s ease;
-    }
-
-    button:hover {
-      background-color: #00cccc;
-    }
-
-    .sign-in-button {
-      display: block;
-      width: 70%;
-      padding: 15px;
-      background-color: #00b3b3;
-      text-align: center;
-      color: white;
-      font-weight: bold;
-      font-size: 1.2rem;
-      border-radius: 25px;
-      transition: background-color 0.3s;
-      cursor: pointer;
-    }
-
-    .signin-opt-icons a img {
-      width: 40px;
-      transition: transform 0.2s ease;
-    }
-
-    .signin-opt-icons a img:hover {
-      transform: scale(1.1);
-    }
-
-    .get-api-text {
-      text-align: center;
-      margin-top: 20px;
-      font-size: 0.9rem;
-    }
-
-    .get-api-text a {
-      color: #00ffff;
-      text-decoration: none;
-    }
-
-    .get-api-text a:hover {
-      text-decoration: underline;
-    }
-
-    /* Dark Mode */
-    .dark-mode {
-      background-color: #121212;
-      color: #ffffff;
-    }
-
-    /* Media Query for mobile responsiveness */
-    @media (max-width: 480px) {
-      form {
-        padding: 15px;
-      }
-    }
-  </style>
-</head>
-
-<%- include('includes/navbar.ejs') %>
-
-<main>
-  <section class="showcase about" id="showcase">
-    <form id="image-form" action="index.html" aria-label="Login Form">
-      <h1 class="AI">SIGN IN</h1>
-
-      <div class="form-control">
-        <label for="email">Email</label>
-        <input type="email" id="email" name="email" placeholder="Enter Email address" 
-               onkeyup="handleChange(event)" aria-describedby="emailError"/>
-        <p class="error hidden" id="emailError" role="alert">Enter Valid Email</p>
-      </div>
-
-      <div class="form-control">
-        <label for="password">Password</label>
-        <div class="eye-container">
-          <input type="password" id="password" name="password" placeholder="Enter password" 
-                 onkeyup="handleChange(event)" aria-describedby="passwordError" />
-          <span class="material-symbols-outlined" id="eye" onclick="myFunction()">visibility_off</span>
-        </div>
-        <p class="error hidden" id="passwordError" role="alert">
-          Minimum 8 characters, 1 uppercase, 1 lowercase, 1 symbol (@$%#^&*), 1 number (0-9)
-        </p>
-        <p><a href="/forgot-password" aria-label="forgot password">Forgot Password?</a></p>
-      </div>
-
-      <div class="form-control">
-        <label for="captcha-input">Captcha</label>
-        <div id="captchaContainer">
-          <div id="captcha"></div>
-          <span id="captchaicon" class="material-symbols-outlined" onclick="generateCaptcha()" role="button" aria-label="auto renew captcha">autorenew</span>
-          <input type="text" name="captcha" required placeholder="Enter Captcha" id="captcha-input">
-        </div>
-        <button onclick="checkCaptcha()" id="captchabtn">Verify Captcha</button>
-      </div>
-
-      <div><b>Sign In using</b></div>
-
-      <div class="signin-opt-icons">
-        <a href="/auth/google" aria-label="sign in with google">
-          <img src="https://cdn-icons-png.flaticon.com/512/300/300221.png" />
-        </a>
-        <a href="#" aria-label="sign in with facebook">
-          <img src="https://cdn-icons-png.flaticon.com/512/733/733547.png" />
-        </a>
-        <a href="#" aria-label="sign in with twitter">
-          <img width="50" height="50" src="https://img.icons8.com/ios/50/FFFFFF/twitterx--v2.png" alt="twitterx--v2"/>
-        </a>
-      </div>
-
-      <div class="formBtns">
-        <button id="submit" type="submit" class="btn sign-in-btn btn-login-submit" aria-label="submit" disabled>
+<%- include('includes/PRE.ejs') %>
+    <%- include('includes/header.ejs') %>
+        <%- include('includes/sidebar.ejs') %>
+
+            <head>
+                <style>
+                    body {
+                        background-color: #121212;
+                        color: #ffffff;
+                        font-family: 'Poppins', sans-serif;
+                    }
+                    
+                    form {
+                        max-width: 600px;
+                        max-height: fit-content;
+                        /* Increased width for more space */
+                        margin: 40px auto 50px;
+                        /* Adjusted top margin to prevent touching navbar */
+                        /* Reduced padding */
+                        background-color: #1b1b1b;
+                        border-radius: 12px;
+                        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
+                    }
+                    
+                    h1 {
+                        text-align: center;
+                        /* Reduced the bottom margin */
+                        font-size: 10rem;
+                        color: #00ffff;
+                    }
+                    
+                    label {
+                        display: block;
+                        margin-bottom: 5px;
+                        font-weight: bold;
+                        color: #ffffff;
+                    }
+                    
+                    input[type="email"],
+                    input[type="password"],
+                    input[type="text"] {
+                        width: 100%;
+                        padding: 15px;
+                        margin-top: 10px;
+                        margin-bottom: 20px;
+                        border-radius: 8px;
+                        border: 2px solid #333;
+                        background-color: #262626;
+                        color: #ffffff;
+                        box-sizing: border-box;
+                        padding-right: 40px;
+                        /* To accommodate eye icon in the password field */
+                    }
+                    
+                    .eye-container {
+                        position: relative;
+                        /* Create a positioning context for the absolute element */
+                    }
+                    
+                    #eye {
+                        color: aqua;
+                        position: absolute;
+                        top: 10px;
+                        right: 15px;
+                        left: auto;
+                        transform: none;
+                        cursor: pointer;
+                    }
+                    
+                    input[type="email"]:hover,
+                    input[type="password"]:hover,
+                    input[type="text"]:hover {
+                        background-color: #333;
+                    }
+                    
+                    .form-control {
+                        margin-bottom: 20px;
+                    }
+                    
+                    #eye {
+                        align-self: right;
+                    }
+                    
+                    #captchaContainer {
+                        display: flex;
+                        align-items: center;
+                    }
+                    
+                    #captcha {
+                        margin-right: 10px;
+                    }
+                    
+                    button {
+                        width: 100%;
+                        padding: 15px;
+                        background-color: #00b3b3;
+                        color: white;
+                        font-size: 1.2rem;
+                        border: none;
+                        border-radius: 25px;
+                        cursor: pointer;
+                        transition: background-color 0.3s ease;
+                    }
+                    
+                    button:hover {
+                        background-color: #00cccc;
+                    }
+                    
+                    .sign-in-button {
+                        display: block;
+                        width: 70%;
+                        height: auto;
+                        padding: 15px;
+                        background-color: #00b3b3;
+                        text-align: center;
+                        color: white;
+                        font-weight: bold;
+                        font-size: 1.2rem;
+                        border-radius: 25px;
+                        transition: background-color 0.3s;
+                        cursor: pointer;
+                    }
+                    
+                    .signin-opt-icons a img {
+                        width: 40px;
+                        transition: transform 0.2s ease;
+                    }
+                    
+                    .signin-opt-icons a img:hover {
+                        transform: scale(1.1);
+                    }
+                    
+                    .get-api-text {
+                        text-align: center;
+                        margin-top: 20px;
+                        font-size: 0.9rem;
+                    }
+                    
+                    .get-api-text a {
+                        color: #00ffff;
+                        text-decoration: none;
+                    }
+                    
+                    .get-api-text a:hover {
+                        text-decoration: underline;
+                    }
+                    /* Dark Mode */
+                    
+                    .dark-mode {
+                        background-color: #121212;
+                        color: #ffffff;
+                    }
+                    /* Media Query for mobile responsiveness */
+                    
+                    @media (max-width: 480px) {
+                        form {
+                            padding: 15px;
+                        }
+                    }
+                </style>
+            </head>
+
+            <%- include('includes/navbar.ejs') %>
+
+                <main>
+                    <section class="showcase about" id="showcase">
+                        <form id="image-form" action="index.html" aria-label="Login Form">
+                            <h1 class="AI">SIGN IN</h1>
+
+                            <div class="form-control">
+                                <label for="email">Email</label>
+                                <input type="email" id="email" name="email" placeholder="Enter Email address" onkeyup="handleChange(event)" aria-describedby="emailError" />
+                                <p class="error hidden" id="emailError" role="alert">Enter Valid Email</p>
+                            </div>
+
+                            <div class="form-control">
+                                <label for="password">Password</label>
+                                <div class="eye-container">
+                                    <input type="password" id="password" name="password" placeholder="Enter password" onkeyup="handleChange(event)" aria-describedby="passwordError" />
+                                    <span class="material-symbols-outlined" id="eye" onclick="myFunction()">visibility_off</span>
+                                </div>
+                                <p class="error hidden" id="passwordError" role="alert">
+                                    Minimum 8 characters, 1 uppercase, 1 lowercase, 1 symbol (@$%#^&*), 1 number (0-9)
+                                </p>
+                                <p><a href="/forgot-password" aria-label="forgot password">Forgot Password?</a></p>
+                            </div>
+
+                            <div class="form-control">
+                                <label for="captcha-input">Captcha</label>
+                                <div id="captchaContainer">
+                                    <div id="captcha"></div>
+                                    <span id="captchaicon" class="material-symbols-outlined" onclick="generateCaptcha()" role="button" aria-label="auto renew captcha"></span>
+                                    <input type="text" name="captcha" required placeholder="Enter Captcha" id="captcha-input">
+                                </div>
+                                <button onclick="checkCaptcha()" id="captchabtn">Verify Captcha</button>
+                            </div>
+
+                            <div><b>Sign In using</b></div>
+
+                            <div class="signin-opt-icons">
+                                <a href="/auth/google" aria-label="sign in with google">
+                                    <img src="https://cdn-icons-png.flaticon.com/512/300/300221.png" />
+                                </a>
+                                <a href="#" aria-label="sign in with facebook">
+                                    <img src="https://cdn-icons-png.flaticon.com/512/733/733547.png" />
+                                </a>
+                                <a href="#" aria-label="sign in with twitter">
+                                    <img width="50" height="50" src="https://img.icons8.com/ios/50/FFFFFF/twitterx--v2.png" alt="twitterx--v2" />
+                                </a>
+                            </div>
+
+                            <div class="formBtns">
+                                <button id="submit" type="submit" class="btn sign-in-btn btn-login-submit" aria-label="submit" disabled>
           <span>Submit</span>
           <div class="flow"></div>
         </button>
-      </div>
-
-      <div class="get-api-text">
-        <p>No account? <a href="/signup" aria-label="go to signup page">Signup</a></p>
-      </div>
-    </form>
-
-    <div id="successToast" class="toast success-toast" aria-label="success message"></div>
-    <div id="errorToast" class="toast error-toast" aria-label="error message"></div>
-  </section>
-</main>
-
-<%- include('includes/footer.ejs') %>
-
-<script>
-  function myFunction() {
-    var x = document.getElementById("password");
-    var eyeIcon = document.getElementById("eye");
-    if (x.type === "password") {
-      x.type = "text";
-      eyeIcon.innerText = "visibility";
-    } else {
-      x.type = "password";
-      eyeIcon.innerText = "visibility_off";
-    }
-  }
-</script>
-<div class="gtranslate_wrapper"></div>
-
-<script>
-
-window.gtranslateSettings = {
-  "default_language":"en",
-  "detect_browser_language":true,
-  "wrapper_selector":".gtranslate_wrapper"
-}
-
-</script>
-
-<script 
-  src="https://cdn.gtranslate.net/widgets/latest/float.js"
-  defer
-></script>
+                            </div>
+
+                            <div class="get-api-text">
+                                <p>No account? <a href="/signup" aria-label="go to signup page">Signup</a></p>
+                            </div>
+                        </form>
+
+                        <div id="successToast" class="toast success-toast" aria-label="success message"></div>
+                        <div id="errorToast" class="toast error-toast" aria-label="error message"></div>
+                    </section>
+                </main>
+
+                <%- include('includes/footer.ejs') %>
+
+                    <script>
+                        function myFunction() {
+                            var x = document.getElementById("password");
+                            var eyeIcon = document.getElementById("eye");
+                            if (x.type === "password") {
+                                x.type = "text";
+                                eyeIcon.innerText = "visibility";
+                            } else {
+                                x.type = "password";
+                                eyeIcon.innerText = "visibility_off";
+                            }
+                        }
+                    </script>
+                    <div class="gtranslate_wrapper"></div>
+
+                    <script>
+                        window.gtranslateSettings = {
+                            "default_language": "en",
+                            "detect_browser_language": true,
+                            "wrapper_selector": ".gtranslate_wrapper"
+                        }
+                    </script>
+
+                    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
\ No newline at end of file
