diff --git a/Public/loginform.html b/Public/loginform.html index d93c4434..ec8480c4 100644 --- a/Public/loginform.html +++ b/Public/loginform.html @@ -1,69 +1,95 @@ + + - - - Login Form - + + + Login and Registration Form + + -
-
-

Login

-
-
- -
-
-
- -
-
- -

- Forgot your password? -

-

- Don't have an account? Create account -

-
-
-

Create Account

-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
- -

- Already have an account? Sign in -

-
-
-

Reset Password

-
-
- -
-
- -

- Go back to previous page -

-
-
- +
+
+ + +
+ + + + + +
+
+ + + + +
+
+ + + + + + + + + + + + +
+ + +
+
+
+ + + + + \ No newline at end of file diff --git a/assets/Js/loginform.js b/assets/Js/loginform.js index 794f6cfb..79f2d225 100644 --- a/assets/Js/loginform.js +++ b/assets/Js/loginform.js @@ -1,50 +1,17 @@ -function setFormMessage(formElement, type, message) { - const messageElement = formElement.querySelector(".form__message"); - - messageElement.textContent = message; - messageElement.classList.remove("form__message--success", "form__message--error"); - messageElement.classList.add(`form__message--${type}`); -} - -function setInputError(inputElement, message) { - inputElement.classList.add("form__input--error"); - inputElement.parentElement.querySelector(".form__input-error-message").textContent = message; -} - -function clearInputError(inputElement) { - inputElement.classList.remove("form__input--error"); - inputElement.parentElement.querySelector(".form__input-error-message").textContent = ""; -} -document.addEventListener("DOMContentLoaded", () => { - const loginForm = document.querySelector("#login"); - const createAccountForm = document.querySelector("#createAccount"); - const resetPasswordForm = document.querySelector("#resetPassword"); - - document.querySelector("#linkCreateAccount").addEventListener("click", e => { - e.preventDefault(); - loginForm.classList.add("form--hidden"); - createAccountForm.classList.remove("form--hidden"); - resetPasswordForm.classList.add("form--hidden"); - }); - document.querySelector("#linkLogin").addEventListener("click", e => { - e.preventDefault(); - resetPasswordForm.classList.add("form--hidden"); - loginForm.classList.remove("form--hidden"); - createAccountForm.classList.add("form--hidden"); - }); - document.querySelector("#linkResetPassword").addEventListener("click", e => { - e.preventDefault(); - resetPasswordForm.classList.remove("form--hidden"); - loginForm.classList.add("form--hidden"); - createAccountForm.classList.add("form--hidden"); - }); - document.querySelector("#linkHome").addEventListener("click", e => { - e.preventDefault(); - resetPasswordForm.classList.add("form--hidden"); - loginForm.classList.remove("form--hidden"); - createAccountForm.classList.add("form--hidden"); - }); - inputElement.addEventListener("input", e => { - clearInputError(inputElement); - }); - }); \ No newline at end of file +const loginText = document.querySelector(".title-text .login"); +const loginForm = document.querySelector("form.login"); +const loginBtn = document.querySelector("label.login"); +const signupBtn = document.querySelector("label.signup"); +const signupLink = document.querySelector("form .signup-link a"); +signupBtn.onclick = (()=>{ + loginForm.style.marginLeft = "-50%"; + loginText.style.marginLeft = "-50%"; +}); +loginBtn.onclick = (()=>{ + loginForm.style.marginLeft = "0%"; + loginText.style.marginLeft = "0%"; +}); +signupLink.onclick = (()=>{ + signupBtn.click(); + return false; +}); \ No newline at end of file diff --git a/assets/css/loginform.css b/assets/css/loginform.css index 2191f990..d662465b 100644 --- a/assets/css/loginform.css +++ b/assets/css/loginform.css @@ -1,134 +1,218 @@ -body { - --color-primary: #009579; - --color-primary-dark: #007f67; - --color-secondary: #252c6a; - --color-error: #cc3333; - --color-success: #4bb544; - --border-radius: 4px; - - margin: 0; - height: 100vh; - display: flex; - align-items: center; - justify-content: center; - font-size: 18px; - background: url(./background.jpg); - background-size: cover; - background-image: url(../Images/loginbackgroundimage.jpg); - -} - -.container { - width: 400px; - max-width: 400px; - margin: 1rem; - padding: 2rem; - box-shadow: 0 0 40px rgba(0, 0, 0, 0.2); - border-radius: var(--border-radius); - background: #ffffff; -} - -.container, -.form__input, -.form__button { - font: 500 1rem 'Quicksand', sans-serif; -} - -.form--hidden { - display: none; -} - -.form > *:first-child { - margin-top: 0; -} - -.form > *:last-child { - margin-bottom: 0; -} - -.form__title { - margin-bottom: 2rem; - text-align: center; -} - -.form__message { - text-align: center; - margin-bottom: 1rem; +@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +html,body{ + display: grid; + height: 100%; + width: 100%; + place-items: center; + background: -webkit-linear-gradient(left, #003366,#004080,#0059b3 +, #0073e6); +} +::selection{ + background: #1a75ff; + color: #fff; +} +.wrapper{ + overflow: hidden; + max-width: 390px; + background: #fff; + padding: 30px; + border-radius: 15px; + box-shadow: 0px 15px 20px rgba(0,0,0,0.1); +} +.wrapper .title-text{ + display: flex; + width: 200%; +} +.wrapper .title{ + width: 50%; + font-size: 35px; + font-weight: 600; + text-align: center; + transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55); +} +.wrapper .slide-controls{ + position: relative; + display: flex; + height: 50px; + width: 100%; + overflow: hidden; + margin: 30px 0 10px 0; + justify-content: space-between; + border: 1px solid lightgrey; + border-radius: 15px; +} +.slide-controls .slide{ + height: 100%; + width: 100%; + color: #fff; + font-size: 18px; + font-weight: 500; + text-align: center; + line-height: 48px; + cursor: pointer; + z-index: 1; + transition: all 0.6s ease; +} +.slide-controls label.signup{ + color: #000; +} +.slide-controls .slider-tab{ + position: absolute; + height: 100%; + width: 50%; + left: 0; + z-index: 0; + border-radius: 15px; + background: -webkit-linear-gradient(left,#003366,#004080,#0059b3 +, #0073e6); + transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55); +} +input[type="radio"]{ + display: none; +} +#signup:checked ~ .slider-tab{ + left: 50%; +} +#signup:checked ~ label.signup{ + color: #fff; + cursor: default; + user-select: none; +} +#signup:checked ~ label.login{ + color: #000; +} +#login:checked ~ label.signup{ + color: #000; +} +#login:checked ~ label.login{ + cursor: default; + user-select: none; +} +.wrapper .form-container{ + width: 100%; + overflow: hidden; +} +.form-container .form-inner{ + display: flex; + width: 200%; +} +.form-container .form-inner form{ + width: 50%; + transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55); +} +.form-inner form .field{ + height: 50px; + width: 100%; + margin-top: 20px; +} +.form-inner form .field input{ + height: 100%; + width: 100%; + outline: none; + padding-left: 15px; + border-radius: 15px; + border: 1px solid lightgrey; + border-bottom-width: 2px; + font-size: 17px; + transition: all 0.3s ease; +} +.form-inner form .field input:focus{ + border-color: #1a75ff; + +} +.form-inner form .field input::placeholder{ + color: #999; + transition: all 0.3s ease; +} +form .field input:focus::placeholder{ + color: #1a75ff; +} +.form-inner form .pass-link{ + margin-top: 5px; +} +.form-inner form .signup-link{ + text-align: center; + margin-top: 30px; +} +.form-inner form .pass-link a, +.form-inner form .signup-link a{ + color: #1a75ff; + text-decoration: none; +} +.form-inner form .pass-link a:hover, +.form-inner form .signup-link a:hover{ + text-decoration: underline; +} +form .btn{ + height: 50px; + width: 100%; + border-radius: 15px; + position: relative; + overflow: hidden; +} +form .btn .btn-layer{ + height: 100%; + width: 300%; + position: absolute; + left: -100%; + background: -webkit-linear-gradient(right,#003366,#004080,#0059b3 +, #0073e6); + border-radius: 15px; + transition: all 0.4s ease;; +} +form .btn:hover .btn-layer{ + left: 0; } - -.form__message--success { - color: var(--color-success); -} - -.form__message--error { - color: var(--color-error); +form .btn input[type="submit"]{ + height: 100%; + width: 100%; + z-index: 1; + position: relative; + background: none; + border: none; + color: #fff; + padding-left: 0; + border-radius: 15px; + font-size: 20px; + font-weight: 500; + cursor: pointer; } -.form__input-group { - margin-bottom: 1rem; -} -.form__input { - display: block; - width: 100%; - padding: 0.75rem; - box-sizing: border-box; - border-radius: var(--border-radius); - border: 1px solid #dddddd; - outline: none; - background: #eeeeee; - transition: background 0.2s, border-color 0.2s; +.social-container { + margin: 20px 0; + text-align: center; + color: white; +} + +.social-container a { + border: 1px solid #DDDDDD; + border-radius: 50%; + display: inline-flex; + justify-content: center; + align-items: center; + margin: 0 5px; + height: 40px; + width: 40px; + text-decoration: none; + color: #000; } -.form__input:focus { - border-color: var(--color-primary); - background: #ffffff; +.social:hover { + color: #1a75ff; + border-color: #0073e6; + ; } -.form__input--error { - color: var(--color-error); - border-color: var(--color-error); -} -.form__input-error-message { - margin-top: 0.5rem; - font-size: 0.85rem; - color: var(--color-error); -} -.form__button { - width: 100%; - padding: 1rem 2rem; - font-weight: bold; - font-size: 1.1rem; - color: #ffffff; - border: none; - border-radius: var(--border-radius); - outline: none; - cursor: pointer; - background: var(--color-primary); -} -.form__button:hover { - background: var(--color-primary-dark); -} -.form__button:active { - transform: scale(0.98); -} - -.form__text { - text-align: center; -} - -.form__link { - color: var(--color-secondary); - text-decoration: none; - cursor: pointer; -} - -.form__link:hover { - text-decoration: underline; -}