diff --git a/assets/css/style.css b/assets/css/style.css index 380dfd7..9ce8afb 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -166,7 +166,7 @@ body { font-size: var(--fontSize-body-4); font-weight: var(--weight-regular); line-height: var(--lineHeight-5); - overflow: hidden; + /* overflow: hidden; */ height: 300vh; } @@ -2051,4 +2051,68 @@ 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%; +} + +hr.divider{ + border-top: 1px solid var(--gold-crayola); + margin-top: 3%; +} + +.doregister{ + justify-content: center; + display: flex; + align-items: flex-start; + gap: 5px; + padding-top: 2%; +} + +.register{ + color: var(--gold-crayola); +} + +#regForm{ + margin-top: 1%; } \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index 6403e32..83e586f 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,4 +1,6 @@ + + /** * PRELOAD * @@ -13,6 +15,120 @@ 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'); +const rePasswordInput = document.getElementById('re-password'); +const passwordMatchMessage = document.getElementById('password-match-message'); + +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'; + } +}); +rePasswordInput.addEventListener('input', function() { + const password = passwordInput.value; + const rePassword = rePasswordInput.value; + + // Check if passwords match + if (password !== rePassword) { + passwordMatchMessage.style.display = 'block'; // Show the message + } else { + passwordMatchMessage.style.display = 'none'; // Hide the message when passwords match + } +}); + + +const phoneInput = document.getElementById('number'); +const phoneErrorMessage = document.getElementById('phone-error-message'); + +// Event listener for phone number input +phoneInput.addEventListener('input', function() { + let phoneNumber = phoneInput.value; + const firstChar = phoneNumber.charAt(0); + const illegalChars = /[^0-9+\- ]/; // Allows numbers, +, -, and spaces only + const multipleDashes = /--+/; // Matches two or more consecutive dashes + + // Remove spaces and "-" for length check + const strippedNumber = phoneNumber.replace(/[\s\-]/g, ''); + + // Reset error message + phoneErrorMessage.style.display = 'none'; + phoneErrorMessage.textContent = ''; + + // Check for invalid "-" at the start or consecutive dashes + if (firstChar === '-' || multipleDashes.test(phoneNumber)) { + phoneErrorMessage.style.display = 'block'; + phoneErrorMessage.textContent = "Invalid Phone Number!"; + return; // Stop further validation + } + + // Check if the first character is "+" and adjust the max length dynamically + if (firstChar === "+") { + phoneInput.maxLength = 17; // Adjust maxLength to allow for spaces and dashes + if (strippedNumber.length < 12 || strippedNumber.length > 14) { + phoneErrorMessage.style.display = 'block'; + phoneErrorMessage.textContent = "Phone number must have 10 digits."; + } + } else { + phoneInput.maxLength = 13; // Adjust maxLength to allow for spaces and dashes + if (strippedNumber.length !== 10) { + phoneErrorMessage.style.display = 'block'; + phoneErrorMessage.textContent = "Phone number must have 10 digits."; + } + } + + // Check for illegal characters (anything other than 0-9, +, -, and space) + for (let char of phoneNumber) { + if (illegalChars.test(char) || (char === "+" && phoneNumber.indexOf(char) !== 0)) { + phoneErrorMessage.style.display = 'block'; + phoneErrorMessage.textContent = `'${char}' is not valid!`; + break; + } + } +}); + + + /** * add event listener on multiple elements */ @@ -141,4 +257,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 +
    • - +