Issue#83]

Avansh2006 · Avansh2006 · commit 65e7bdeadd7d · 2024-10-03T21:37:46.000+05:30
diff --git a/assets/css/style1.css b/assets/css/style1.css
@@ -0,0 +1,67 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #2e2d2d;
+    display: grid;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+  
+  form {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  label, input {
+    margin-bottom: 10px;
+  }
+  .btn {
+    position: relative;
+    color: var(--gold-crayola);
+    font-size: var(--fontSize-label-2);
+    font-weight: var(--weight-bold);
+    text-transform: uppercase;
+    letter-spacing: var(--letterSpacing-5);
+    max-width: max-content;
+    border: 2px solid var(--gold-crayola);
+    padding: 12px 45px;
+    overflow: hidden;
+    z-index: 1;
+}
+  
+  input {
+    padding: 8px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+  }
+  
+  button {
+    padding: 10px;
+    background-color: #28a745;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  button:hover {
+    background-color: #218838;
+  }
+  
+  .msg {
+    position: fixed;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: green;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 4px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+  
diff --git a/index.html b/index.html
@@ -167,6 +167,7 @@
               <span class="span">Contact</span>
             </a>
           </li>
+          <li><a href="login.html" class="navbar-link hover-underline">Login</a></li>
 
         </ul>
 
diff --git a/login.html b/login.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Login Here</title>
+  <link rel="stylesheet" href="./assets/css/style1.css">
+</head>
+<body>
+  <form id="login-form">
+    <h2>Login</h2>
+    <label for="email">Email:</label>
+    <input type="email" id="email" name="email" required>
+    <label for="password">Password:</label>
+    <input type="password" id="password" name="password" required>
+    <button type="submit" class="btn">Submit</button>
+  </form>
+
+  <script src="scripts1.js"></script>
+</body>
+</html>
diff --git a/scripts.js b/scripts.js
diff --git a/scripts1.js b/scripts1.js
@@ -0,0 +1,36 @@
+document.getElementById('login-form').addEventListener('submit', function(event) {
+    event.preventDefault();
+    
+    const email = document.getElementById('email').value;
+    const password = document.getElementById('password').value;
+  
+    // Email validator
+    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    if (!emailPattern.test(email)) {
+      showmsg('Please enter a valid email address');
+      return;
+    }
+  
+    // pass validator
+    const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&#])[A-Za-z\d@$!%*?&#]{8,}$/;
+    if (!passwordPattern.test(password)) {
+      showmsg('Password too weak! It should be at least 8 characters long, include an uppercase letter, a number, and a special character.');
+      return;
+    }
+  
+    
+    showmsg('Login successful!');
+  });
+  
+ 
+  function showmsg(message) {
+    const msg = document.createElement('div');
+    msg.className = 'msg';
+    msg.innerText = message;
+    document.body.appendChild(msg);
+    
+    setTimeout(() => {
+      msg.remove();
+    }, 3000);
+  }
+  
