From ec5a10b6fa0a331bb551160d1c003988bf339adf Mon Sep 17 00:00:00 2001 From: Anup kumar jha Date: Wed, 27 Dec 2023 10:29:13 +0530 Subject: [PATCH] Revert "Fixes Issue #49: Updated Log in and Sign-Up pages for better UI and also Optimized code for various sections." --- login-page.js | 21 +++++ login.css | 143 ---------------------------------- login.html | 50 +----------- login.js | 49 ------------ signup.css | 143 ---------------------------------- signup.html | 148 ++++++++++++++++++++++++----------- signup.js | 49 ------------ style.css | 210 ++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 100 ++++++++++++++++++++++++ 9 files changed, 435 insertions(+), 478 deletions(-) create mode 100644 login-page.js delete mode 100644 login.css delete mode 100644 login.js delete mode 100644 signup.css delete mode 100644 signup.js create mode 100644 style.css create mode 100644 styles.css diff --git a/login-page.js b/login-page.js new file mode 100644 index 0000000..1f265a8 --- /dev/null +++ b/login-page.js @@ -0,0 +1,21 @@ +const loginForm = document.getElementById("login-form"); +const loginButton = document.getElementById("login-form-submit"); +const loginErrorMsg = document.getElementById("login-error-msg"); + +// When the login button is clicked, the following code is executed +loginButton.addEventListener("click", (e) => { + // Prevent the default submission of the form + e.preventDefault(); + // Get the values input by the user in the form fields + const username = loginForm.username.value; + const password = loginForm.password.value; + + if (username === "user" && password === "web_dev") { + // If the credentials are valid, show an alert box and redirect to about.html + // alert("You have successfully logged in."); + window.location.href = 'about.html'; // Redirect to about.html after successful login + } else { + // Otherwise, make the login error message show + loginErrorMsg.style.opacity = 1; + } +}); diff --git a/login.css b/login.css deleted file mode 100644 index 5a37d78..0000000 --- a/login.css +++ /dev/null @@ -1,143 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); -*{ - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: "Poppins", sans-serif; -} -body{ - width: 100%; - height: 100vh; - display: flex; - align-items: center; - justify-content: center; - background: #5372F0; -} -::selection{ - color: #fff; - background: #5372F0; -} -.wrapper{ - width: 380px; - padding: 40px 30px 50px 30px; - background: #fff; - border-radius: 5px; - text-align: center; - box-shadow: 10px 10px 15px rgba(0,0,0,0.1); -} -.wrapper header{ - font-size: 30px; - font-weight: 600; -} -.wrapper form{ - margin: 40px 0; -} -form .field{ - width: 100%; - margin-bottom: 20px; -} -form .field.shake{ - animation: shake 0.3s ease-in-out; -} -@keyframes shake { - 0%, 100%{ - margin-left: 0px; - } - 20%, 80%{ - margin-left: -12px; - } - 40%, 60%{ - margin-left: 12px; - } -} -form .field .input-area{ - height: 50px; - width: 100%; - position: relative; -} -form input{ - width: 100%; - height: 100%; - outline: none; - padding: 0 45px; - font-size: 18px; - background: none; - caret-color: #5372F0; - border-radius: 5px; - border: 1px solid #bfbfbf; - border-bottom-width: 2px; - transition: all 0.2s ease; -} -form .field input:focus, -form .field.valid input{ - border-color: #5372F0; -} -form .field.shake input, -form .field.error input{ - border-color: #dc3545; -} -.field .input-area i{ - position: absolute; - top: 50%; - font-size: 18px; - pointer-events: none; - transform: translateY(-50%); -} -.input-area .icon{ - left: 15px; - color: #bfbfbf; - transition: color 0.2s ease; -} -.input-area .error-icon{ - right: 15px; - color: #dc3545; -} -form input:focus ~ .icon, -form .field.valid .icon{ - color: #5372F0; -} -form .field.shake input:focus ~ .icon, -form .field.error input:focus ~ .icon{ - color: #bfbfbf; -} -form input::placeholder{ - color: #bfbfbf; - font-size: 17px; -} -form .field .error-txt{ - color: #dc3545; - text-align: left; - margin-top: 5px; -} -form .field .error{ - display: none; -} -form .field.shake .error, -form .field.error .error{ - display: block; -} -form .pass-txt{ - text-align: left; - margin-top: -10px; -} -.wrapper a{ - color: #5372F0; - text-decoration: none; -} -.wrapper a:hover{ - text-decoration: underline; -} -form input[type="submit"]{ - height: 50px; - margin-top: 30px; - color: #fff; - padding: 0; - border: none; - background: #5372F0; - cursor: pointer; - border-bottom: 2px solid rgba(0,0,0,0.1); - transition: all 0.3s ease; -} -form input[type="submit"]:hover{ - background: #2c52ed; -} \ No newline at end of file diff --git a/login.html b/login.html index 3d5a78c..63775b5 100644 --- a/login.html +++ b/login.html @@ -1,54 +1,6 @@ - - - Login - Foodie Blog - - - - - - - - - - - - - - - - - - -
-
Login - Foodie Blog
-
- -
- -
- - - -
-
Password can't be blank
-
-
Forgot password?
- -
-
Not yet a member? Signup now
-
-======= Login Page @@ -107,4 +59,4 @@

Login

}); - \ No newline at end of file + diff --git a/login.js b/login.js deleted file mode 100644 index aa83866..0000000 --- a/login.js +++ /dev/null @@ -1,49 +0,0 @@ -const form = document.querySelector("form"); -eField = form.querySelector(".email"), -eInput = eField.querySelector("input"), -pField = form.querySelector(".password"), -pInput = pField.querySelector("input"); - -form.onsubmit = (e)=>{ - e.preventDefault(); //preventing from form submitting - //if email and password is blank then add shake class in it else call specified function - (eInput.value == "") ? eField.classList.add("shake", "error") : checkEmail(); - (pInput.value == "") ? pField.classList.add("shake", "error") : checkPass(); - - setTimeout(()=>{ //remove shake class after 500ms - eField.classList.remove("shake"); - pField.classList.remove("shake"); - }, 500); - - eInput.onkeyup = ()=>{checkEmail();} //calling checkEmail function on email input keyup - pInput.onkeyup = ()=>{checkPass();} //calling checkPassword function on pass input keyup - - function checkEmail(){ //checkEmail function - let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/; //pattern for validate email - if(!eInput.value.match(pattern)){ //if pattern not matched then add error and remove valid class - eField.classList.add("error"); - eField.classList.remove("valid"); - let errorTxt = eField.querySelector(".error-txt"); - //if email value is not empty then show please enter valid email else show Email can't be blank - (eInput.value != "") ? errorTxt.innerText = "Enter a valid email address" : errorTxt.innerText = "Email can't be blank"; - }else{ //if pattern matched then remove error and add valid class - eField.classList.remove("error"); - eField.classList.add("valid"); - } - } - - function checkPass(){ //checkPass function - if(pInput.value == ""){ //if pass is empty then add error and remove valid class - pField.classList.add("error"); - pField.classList.remove("valid"); - }else{ //if pass is empty then remove error and add valid class - pField.classList.remove("error"); - pField.classList.add("valid"); - } - } - - //if eField and pField doesn't contains error class that mean user filled details properly - if(!eField.classList.contains("error") && !pField.classList.contains("error")){ - window.location.href = form.getAttribute("action"); //redirecting user to the specified url which is inside action attribute of form tag - } -} \ No newline at end of file diff --git a/signup.css b/signup.css deleted file mode 100644 index a8b1be4..0000000 --- a/signup.css +++ /dev/null @@ -1,143 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); -*{ - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: "Poppins", sans-serif; -} -body{ - width: 100%; - height: 100vh; - display: flex; - align-items: center; - justify-content: center; - background: #5372F0; -} -::selection{ - color: #fff; - background: #5372F0; -} -.wrapper{ - width: 380px; - padding: 40px 30px 50px 30px; - background: #fff; - border-radius: 5px; - text-align: center; - box-shadow: 10px 10px 15px rgba(0,0,0,0.1); -} -.wrapper header{ - font-size: 25px; - font-weight: 600; -} -.wrapper form{ - margin: 40px 0; -} -form .field{ - width: 100%; - margin-bottom: 20px; -} -form .field.shake{ - animation: shake 0.3s ease-in-out; -} -@keyframes shake { - 0%, 100%{ - margin-left: 0px; - } - 20%, 80%{ - margin-left: -12px; - } - 40%, 60%{ - margin-left: 12px; - } -} -form .field .input-area{ - height: 50px; - width: 100%; - position: relative; -} -form input{ - width: 100%; - height: 100%; - outline: none; - padding: 0 45px; - font-size: 18px; - background: none; - caret-color: #5372F0; - border-radius: 5px; - border: 1px solid #bfbfbf; - border-bottom-width: 2px; - transition: all 0.2s ease; -} -form .field input:focus, -form .field.valid input{ - border-color: #5372F0; -} -form .field.shake input, -form .field.error input{ - border-color: #dc3545; -} -.field .input-area i{ - position: absolute; - top: 50%; - font-size: 18px; - pointer-events: none; - transform: translateY(-50%); -} -.input-area .icon{ - left: 15px; - color: #bfbfbf; - transition: color 0.2s ease; -} -.input-area .error-icon{ - right: 15px; - color: #dc3545; -} -form input:focus ~ .icon, -form .field.valid .icon{ - color: #5372F0; -} -form .field.shake input:focus ~ .icon, -form .field.error input:focus ~ .icon{ - color: #bfbfbf; -} -form input::placeholder{ - color: #bfbfbf; - font-size: 17px; -} -form .field .error-txt{ - color: #dc3545; - text-align: left; - margin-top: 5px; -} -form .field .error{ - display: none; -} -form .field.shake .error, -form .field.error .error{ - display: block; -} -form .pass-txt{ - text-align: left; - margin-top: -10px; -} -.wrapper a{ - color: #5372F0; - text-decoration: none; -} -.wrapper a:hover{ - text-decoration: underline; -} -form input[type="submit"]{ - height: 50px; - margin-top: 30px; - color: #fff; - padding: 0; - border: none; - background: #5372F0; - cursor: pointer; - border-bottom: 2px solid rgba(0,0,0,0.1); - transition: all 0.3s ease; -} -form input[type="submit"]:hover{ - background: #2c52ed; -} \ No newline at end of file diff --git a/signup.html b/signup.html index 5e7294d..d5a8efe 100644 --- a/signup.html +++ b/signup.html @@ -1,52 +1,110 @@ - - - - Sign Up - Foodie Blog - - - - - - - - - - - - - - - + + + Sign Up Page + + + + -
-
Sign Up - Foodie Blog
-
- -
- -
- - - -
-
Password can't be blank
-
-
Forgot password?
- -
-
+
+

Sign Up

+
+
+ + +
+
+ + +
+
+ + +
+ + +
+
+ - \ No newline at end of file + diff --git a/signup.js b/signup.js deleted file mode 100644 index aa83866..0000000 --- a/signup.js +++ /dev/null @@ -1,49 +0,0 @@ -const form = document.querySelector("form"); -eField = form.querySelector(".email"), -eInput = eField.querySelector("input"), -pField = form.querySelector(".password"), -pInput = pField.querySelector("input"); - -form.onsubmit = (e)=>{ - e.preventDefault(); //preventing from form submitting - //if email and password is blank then add shake class in it else call specified function - (eInput.value == "") ? eField.classList.add("shake", "error") : checkEmail(); - (pInput.value == "") ? pField.classList.add("shake", "error") : checkPass(); - - setTimeout(()=>{ //remove shake class after 500ms - eField.classList.remove("shake"); - pField.classList.remove("shake"); - }, 500); - - eInput.onkeyup = ()=>{checkEmail();} //calling checkEmail function on email input keyup - pInput.onkeyup = ()=>{checkPass();} //calling checkPassword function on pass input keyup - - function checkEmail(){ //checkEmail function - let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/; //pattern for validate email - if(!eInput.value.match(pattern)){ //if pattern not matched then add error and remove valid class - eField.classList.add("error"); - eField.classList.remove("valid"); - let errorTxt = eField.querySelector(".error-txt"); - //if email value is not empty then show please enter valid email else show Email can't be blank - (eInput.value != "") ? errorTxt.innerText = "Enter a valid email address" : errorTxt.innerText = "Email can't be blank"; - }else{ //if pattern matched then remove error and add valid class - eField.classList.remove("error"); - eField.classList.add("valid"); - } - } - - function checkPass(){ //checkPass function - if(pInput.value == ""){ //if pass is empty then add error and remove valid class - pField.classList.add("error"); - pField.classList.remove("valid"); - }else{ //if pass is empty then remove error and add valid class - pField.classList.remove("error"); - pField.classList.add("valid"); - } - } - - //if eField and pField doesn't contains error class that mean user filled details properly - if(!eField.classList.contains("error") && !pField.classList.contains("error")){ - window.location.href = form.getAttribute("action"); //redirecting user to the specified url which is inside action attribute of form tag - } -} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..19df29d --- /dev/null +++ b/style.css @@ -0,0 +1,210 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Montserrat', sans-serif; +} + +body{ + background-color: #c9d6ff; + background: linear-gradient(to right, #e2e2e2, #c9d6ff); + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 100vh; +} + +.container{ + background-color: #fff; + border-radius: 30px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35); + position: relative; + overflow: hidden; + width: 768px; + max-width: 100%; + min-height: 480px; +} + +.container p{ + font-size: 14px; + line-height: 20px; + letter-spacing: 0.3px; + margin: 20px 0; +} + +.container span{ + font-size: 12px; +} + +.container a{ + color: #333; + font-size: 13px; + text-decoration: none; + margin: 15px 0 10px; +} + +.container button{ + background-color: #512da8; + color: #fff; + font-size: 12px; + padding: 10px 45px; + border: 1px solid transparent; + border-radius: 8px; + font-weight: 600; + letter-spacing: 0.5px; + text-transform: uppercase; + margin-top: 10px; + cursor: pointer; +} + +.container button.hidden{ + background-color: transparent; + border-color: #fff; +} + +.container form{ + background-color: #fff; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 40px; + height: 100%; +} + +.container input{ + background-color: #eee; + border: none; + margin: 8px 0; + padding: 10px 15px; + font-size: 13px; + border-radius: 8px; + width: 100%; + outline: none; +} + +.form-container{ + position: absolute; + top: 0; + height: 100%; + transition: all 0.6s ease-in-out; +} + +.sign-in{ + left: 0; + width: 50%; + z-index: 2; +} + +.container.active .sign-in{ + transform: translateX(100%); +} + +.sign-up{ + left: 0; + width: 50%; + opacity: 0; + z-index: 1; +} + +.container.active .sign-up{ + transform: translateX(100%); + opacity: 1; + z-index: 5; + animation: move 0.6s; +} + +@keyframes move{ + 0%, 49.99%{ + opacity: 0; + z-index: 1; + } + 50%, 100%{ + opacity: 1; + z-index: 5; + } +} + +.social-icons{ + margin: 20px 0; +} + +.social-icons a{ + border: 1px solid #ccc; + border-radius: 20%; + display: inline-flex; + justify-content: center; + align-items: center; + margin: 0 3px; + width: 40px; + height: 40px; +} + +.toggle-container{ + position: absolute; + top: 0; + left: 50%; + width: 50%; + height: 100%; + overflow: hidden; + transition: all 0.6s ease-in-out; + border-radius: 150px 0 0 100px; + z-index: 1000; +} + +.container.active .toggle-container{ + transform: translateX(-100%); + border-radius: 0 150px 100px 0; +} + +.toggle{ + background-color: #512da8; + height: 100%; + background: linear-gradient(to right, #5c6bc0, #512da8); + color: #fff; + position: relative; + left: -100%; + height: 100%; + width: 200%; + transform: translateX(0); + transition: all 0.6s ease-in-out; +} + +.container.active .toggle{ + transform: translateX(50%); +} + +.toggle-panel{ + position: absolute; + width: 50%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 30px; + text-align: center; + top: 0; + transform: translateX(0); + transition: all 0.6s ease-in-out; +} + +.toggle-left{ + transform: translateX(-200%); +} + +.container.active .toggle-left{ + transform: translateX(0); +} + +.toggle-right{ + right: 0; + transform: translateX(0); +} + +.container.active .toggle-right{ + transform: translateX(200%); +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..e81df7a --- /dev/null +++ b/styles.css @@ -0,0 +1,100 @@ +/* styles.css */ + +/* General styles */ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + position: relative; + background-image: url('assets/images/pexels-lumn-604969.jpg'); + background-size: cover; + background-attachment: fixed; +} + +/* Container styles */ +.container { + position: relative; + width: 90%; /* Adjust width for responsiveness */ + max-width: 400px; /* Set a maximum width ... ... ... ... */ + padding: 30px; + margin: 20px auto; /* Center the container */ + background-color: rgba(255, 255, 255, 0.096); /* Adjust the alpha channel for transparency */ + backdrop-filter: blur(10px); + border-radius: 8px; + /* box-shadow: .. 0 ... ... 8px 32px 0 rgba(31, 38, 135, 0.37); */ +} + +.container::before { + content: ''; + position: absolute; + top: -16px; + right: -16px; + bottom: -16px; + left: -16px; + background: inherit; + backdrop-filter: blur(16px); + border-radius: 24px; + z-index: -1; +} + +h2 { + text-align: center; + margin-bottom: 20px; +} + +/* Input styles */ +.input-group { + margin-bottom: 20px; +} + +label { + display: block; + margin-bottom: 5px; +} + +input[type="email"], +input[type="password"] { + width: 100%; + padding: 15px; + margin: 5px 0 20px 0; + display: inline-block; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; +} + +input[type="checkbox"] { + margin-right: 10px; +} + +/* Button styles */ +.forgot-password { + text-align: right; + font-size: 14px; +} + +.login-btn { + background-color: #4CAF50; + color: white; + padding: 14px 20px; + margin: 8px 0; + border: none; + cursor: pointer; + width: 100%; + border-radius: 4px; + font-size: 16px; +} + +.login-btn:hover { + background-color: #45a049; +} + +/* Media query for responsiveness */ +@media (max-width: 768px) { + .container { + padding: 20px; + } +}