FSOC-OSS · Avansh2006 · Oct 3, 2024 · Oct 3, 2024
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/assets/js/script2.js b/assets/js/script2.js
@@ -0,0 +1,47 @@
+document.getElementById('registrationForm').addEventListener('submit', function(event) {
+    const password = document.getElementById('password').value;
+    const confirmPassword = document.getElementById('confirmPassword').value;
+    const email = document.getElementById('email').value;
+    const phone = document.getElementById('phone').value;
+
+    // Check if password and confirm password match
+    if (password !== confirmPassword) {
+      event.preventDefault();
+      showmsg('Passwords do not match.');
+      return;
+    }
+
+    // Email Validtor
+    const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+    if (!emailPattern.test(email)) {
+      event.preventDefault();
+      showmsg('Please enter a valid email address.');
+      return;
+    }
+
+    //  MOb_No Validateor
+    const phonePattern = /^[0-9]{10}$/;
+    if (!phonePattern.test(phone)) {
+      event.preventDefault();
+      showmsg('Please enter a valid phone number.');
+      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;
+    }
+    function showmsg(message) {
+        const msg = document.createElement('div');
+        msg.className = 'msg';
+        msg.innerText = message;
+        document.body.appendChild(msg);
+
+        setTimeout(() => {
+          msg.remove();
+        }, 3000);
+      }
+
+  });
+
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,22 @@
+<!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>
+    <p>New user? <a href="register.html">Register Now</a></p>
+  </form>
+
+  <script src="scripts1.js"></script>
+</body>
+</html>
diff --git a/register.html b/register.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register Here!!</title>
+    <link rel="stylesheet" href="./assets/css/style1.css">
+</head>
+<body>
+    <div class="register-form">
+
+        <form id="registrationForm">
+            <h2>Register</h2>
+          <label for="name">Name:</label>
+          <input type="text" id="name" name="name" required>
+
+          <label for="residence">Place of Residence:</label>
+          <input type="text" id="residence" name="residence" required>
+
+          <label for="phone">Phone Number:</label>
+          <input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required>
+
+          <label for="email">Email Address:</label>
+          <input type="email" id="email" name="email" required>
+
+          <label for="password">Password:</label>
+          <input type="password" id="password" name="password" required>
+
+          <label for="confirmPassword">Confirm Password:</label>
+          <input type="password" id="confirmPassword" name="confirmPassword" required>
+
+          <button type="submit">Register</button>
+        </form>
+      </div>
+      <script src="./assets/js/script2.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);
+  }
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -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>
@@ Expand Down @@