From 65e7bdeadd7d0f86cdcc6ec6f353b9efb2685b35 Mon Sep 17 00:00:00 2001 From: Avansh2006 Date: Thu, 3 Oct 2024 21:37:46 +0530 Subject: [PATCH 1/2] Issue#83] --- assets/css/style1.css | 67 +++++++++++++++++++++++++++++++++++++++++++ index.html | 1 + login.html | 21 ++++++++++++++ scripts.js | 0 scripts1.js | 36 +++++++++++++++++++++++ 5 files changed, 125 insertions(+) create mode 100644 assets/css/style1.css create mode 100644 login.html create mode 100644 scripts.js create mode 100644 scripts1.js diff --git a/assets/css/style1.css b/assets/css/style1.css new file mode 100644 index 0000000..ba20524 --- /dev/null +++ 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); + } + \ No newline at end of file diff --git a/index.html b/index.html index e97ba51..6415896 100644 --- a/index.html +++ b/index.html @@ -167,6 +167,7 @@ Contact +
  • Login
    • diff --git a/login.html b/login.html new file mode 100644 index 0000000..a97fe46 --- /dev/null +++ b/login.html @@ -0,0 +1,21 @@ + + + + + + Login Here + + + +
    +

    Login

    + + + + + +
    + + + + \ No newline at end of file diff --git a/scripts.js b/scripts.js new file mode 100644 index 0000000..e69de29 diff --git a/scripts1.js b/scripts1.js new file mode 100644 index 0000000..f42d6d0 --- /dev/null +++ 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); + } + \ No newline at end of file From 562d5aba0b68a177857bad8ba85ed7cd3327fec5 Mon Sep 17 00:00:00 2001 From: Avansh2006 Date: Thu, 3 Oct 2024 22:07:29 +0530 Subject: [PATCH 2/2] Issue#84 --- assets/js/script2.js | 47 ++++++++++++++++++++++++++++++++++++++++++++ login.html | 1 + register.html | 37 ++++++++++++++++++++++++++++++++++ 3 files changed, 85 insertions(+) create mode 100644 assets/js/script2.js create mode 100644 register.html diff --git a/assets/js/script2.js b/assets/js/script2.js new file mode 100644 index 0000000..fdf7604 --- /dev/null +++ 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); + } + + }); + \ No newline at end of file diff --git a/login.html b/login.html index a97fe46..a1918bf 100644 --- a/login.html +++ b/login.html @@ -14,6 +14,7 @@

    Login

    +

    New user? Register Now

    diff --git a/register.html b/register.html new file mode 100644 index 0000000..954eec9 --- /dev/null +++ b/register.html @@ -0,0 +1,37 @@ + + + + + + Register Here!! + + + +
    + +
    +

    Register

    + + + + + + + + + + + + + + + + + + + +
    +
    + + + \ No newline at end of file