From 428289779152ebc004a00fc14f617757f9b20755 Mon Sep 17 00:00:00 2001 From: ShadyLane Date: Fri, 4 Oct 2024 17:56:30 +0530 Subject: [PATCH 1/2] Added a login functionality --- assets/css/style.css | 43 +++++++++++++++++++++++++++ assets/js/script.js | 56 ++++++++++++++++++++++++++++++++++- index.html | 15 ++++++++-- login.html | 69 ++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 179 insertions(+), 4 deletions(-) create mode 100644 login.html diff --git a/assets/css/style.css b/assets/css/style.css index 380dfd7..f1a25e7 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -2051,4 +2051,47 @@ textarea.input-field { left: 0; } +} + +.loginLabel{ + color: var(--gold-crayola); + font-weight: var(--weight-bold); + letter-spacing: var(--letterSpacing-1); + line-height: 14px; + padding-bottom: 1%; + padding-top: 3%; +} +#login-page { + width: 50%; + margin: 50px auto; + background-color: #444444; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + border-radius: 4px; +} +.loginhead{ + color: var(--gold-crayola); + text-align: center; +} +input, textarea { + width: 100%; + padding: 10px; + background-color: #232327; + border: 1px solid #e8c494; + color: white; + border-radius: 4px; + font-size: 2rem; +} + +#password-label{ + display:flex; + align-items: flex-start; + gap: 5px; +} + +#submit-button{ + display: flex; + justify-content: center; + padding-top: 3%; + width: 100%; } \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index 6403e32..bc07e82 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,4 +1,6 @@ + + /** * PRELOAD * @@ -13,6 +15,56 @@ window.addEventListener("load", function () { }); + +const passwordInput = document.getElementById('description'); +const passwordCriteria = document.getElementById('password-criteria'); +const passwordStrength = document.getElementById('password-strength'); +const strengthText = document.getElementById('strength-text'); + +passwordInput.addEventListener('input', function() { + const password = this.value; + + // Show the password criteria and strength only when user starts typing + if (password.length > 0) { + passwordCriteria.style.display = 'block'; + passwordStrength.style.display = 'block'; + strengthText.style.display = 'block'; + } else { + passwordCriteria.style.display = 'none'; + passwordStrength.style.display = 'none'; + strengthText.style.display = 'none'; + } + + // Criteria flags + const lengthCriteria = password.length >= 8; + const uppercaseCriteria = /[A-Z]/.test(password); + const lowercaseCriteria = /[a-z]/.test(password); + const numberCriteria = /[0-9]/.test(password); + const symbolCriteria = /[!@#$%^&*(),.?":{}|<>]/.test(password); + + // Update criteria list + document.getElementById('length-criteria').style.display = lengthCriteria ? 'none' : 'list-item'; + document.getElementById('uppercase-criteria').style.display = uppercaseCriteria ? 'none' : 'list-item'; + document.getElementById('lowercase-criteria').style.display = lowercaseCriteria ? 'none' : 'list-item'; + document.getElementById('number-criteria').style.display = numberCriteria ? 'none' : 'list-item'; + document.getElementById('symbol-criteria').style.display = symbolCriteria ? 'none' : 'list-item'; + + // Determine password strength + const criteriaMet = [lengthCriteria, uppercaseCriteria, lowercaseCriteria, numberCriteria, symbolCriteria].filter(Boolean).length; + + if (criteriaMet < 2) { + strengthText.textContent = 'Weak'; + strengthText.style.color = 'red'; + } else if (criteriaMet >= 2 && criteriaMet < 4) { + strengthText.textContent = 'Moderate'; + strengthText.style.color = 'yellow'; + } else if (criteriaMet === 5) { + strengthText.textContent = 'Strong'; + strengthText.style.color = 'green'; + } +}); + + /** * add event listener on multiple elements */ @@ -141,4 +193,6 @@ window.addEventListener("mousemove", function (event) { parallaxItems[i].style.transform = `translate3d(${x}px, ${y}px, 0px)`; } -}); \ No newline at end of file +}); + + diff --git a/index.html b/index.html index e97ba51..bb85568 100644 --- a/index.html +++ b/index.html @@ -167,6 +167,13 @@ Contact +
  • + +
    + + Login +     +
    • @@ -1136,7 +1143,7 @@

  • About Us
    • - +
  • Our Chefs
    • @@ -1144,9 +1151,12 @@

  • Contact
    • +
  • + Login +
    • - +