diff --git a/components.json b/components.json index 74fbd74..d3cbff2 100644 --- a/components.json +++ b/components.json @@ -22,5 +22,11 @@ "url" :"react/build/?pagination", "authorName" : "kevintamakuwala", "imgUrl" : "./images/pagination.png" - } + }, + { + "name" : "Signup_SignIn_page", + "url" : "Signup_SignIn_page", + "authorName" : "Kavya Shah", + "imgUrl" : "./images/Signup_SignIn_page.png" + } ] \ No newline at end of file diff --git a/components/Signup_SignIn_page/index.html b/components/Signup_SignIn_page/index.html new file mode 100644 index 0000000..de05e2e --- /dev/null +++ b/components/Signup_SignIn_page/index.html @@ -0,0 +1,54 @@ + + + + + + Login + + + + + + +
+
+
+

Create an account

+ Use your Email for regestration + + + +
+ +
+
+
+
+

SignIn

+ Login to your account + + + Forgot Password? +
+ +
+
+
+
+
+

Already Have Account?

+

Please login by feeling up your details

+ +
+
+

Create a New Account

+

Enter Your details

+ +
+
+
+
+ + + + \ No newline at end of file diff --git a/components/Signup_SignIn_page/script.js b/components/Signup_SignIn_page/script.js new file mode 100644 index 0000000..d40ca94 --- /dev/null +++ b/components/Signup_SignIn_page/script.js @@ -0,0 +1,26 @@ +document.addEventListener("DOMContentLoaded", function() { + const container=document.getElementById('container') + const signIn=document.getElementById('signIn-updated') + const signUp=document.getElementById('signup-updated') + + signUp.addEventListener('click',function () { + container.classList.add("right-active") + // console.log("added"); + }) + + signIn.addEventListener('click',function () { + container.classList.remove("right-active") + // console.log("removed"); + }) + + const form = document.getElementById("formSignup"); + // console.log(form); + form.addEventListener("submit", function(event) { + event.preventDefault(); + + const username = document.getElementById("nameId").value; + // console.log(username); + // Redirect to the next page with the username as a query parameter + window.location.href = `../../index.html?username=${username}`; + }); +}); diff --git a/components/Signup_SignIn_page/style.css b/components/Signup_SignIn_page/style.css new file mode 100644 index 0000000..49e4d1a --- /dev/null +++ b/components/Signup_SignIn_page/style.css @@ -0,0 +1,194 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); + + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + display: grid; + place-items: center; + align-items: center; + font-family: 'Montserrat',sans-serif; + height: 100vh; +} +h1{ + font-weight: bold; + margin: 0; +} + +/* p{ + /* fon */ +/* } */ + + +span{ + font-size: 12px; +} + +form{ + background-color: #ffffff; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 50px; + height: 100%; + text-align: center; +} + +input{ + background-color: #eee; + border: none; + font-size: 16px; + padding: 10px 12px; + width: 100%; + margin: 8px 0; +} + +.container{ + background-color: #fff; + border-radius: 2em; + box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px ; + position: relative; + overflow: hidden; + width: 650px; + max-width: 100%; + min-height: 550px; +} + +.form-div{ + position: absolute; + top: 0; + height: 100%; + transition: all 0.9s ease-in-out; +} +.sign-in{ + left: 0; + width: 50%; + z-index: 2; +} +.sign-up{ + left: 0; + width: 50%; + opacity: 0; + z-index: 1; +} +.overlay-container{ + position: absolute; + top: 0; + left: 50%; + width: 50%; + height: 100%; + overflow: hidden; + transition: transform 0.9s ease-in-out; + z-index: 100; +} +.overlay{ + background: #08A0DF; + background: -webkit-linear-gradient(20deg,#08A0DF); + background: linear-gradient(0deg,#34a0a4,#08A0DF); + background-repeat: no-repeat; + background-size:cover ; + background-position: 0 0; + color: #ffffff; + position: relative; + left: -100%; + height: 100%; + width: 200%; + transform: translateX(0); + transition: transform 0.9s ease-in-out; +} +.overlay-panel{ + position: absolute; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 40px; + text-align: center; + top: 0; + height: 100%; + width: 50%; + transform: translateX(0); + transition: transform 0.9s ease-in-out; +} +.overlay-left{ + transform: translateX(-20%); +} +.overlay-right{ + right: 0; + transform: translateX(0); +} + +a{ + color: #333; + font-size: 14px; + text-decoration: none; + margin: 15px 0; +} +button{ + border-radius: 2em; + border: 1px solid #fff; + cursor: pointer; + font-size: 12px; + font-weight: bold; + padding: 1em 5em; + text-transform: uppercase; + transition: transform 80ms ease-in; + background: #31b3e6; +} + +button:active{ + transform: scale(0.95); +} +button:focus{ + outline: none; +} + +button.ghost{ + background-color: transparent; + border-color:#ffffff ; +} + + +.container.right-active .sign-in{ + transform: translateX(100%); + /* background-color: #333; */ +} +.container.right-active .sign-up{ + transform: translateX(100%); + opacity: 1; + z-index: 5; + animation: show 0.9s; + background-color: #333; +} + +@keyframes show{ + 0%, 49.99%{ + opacity: 0; + z-index: 1; + } + 50%,100%{ + opacity: 1; + z-index: 5; + } +} + +.container.right-active .overlay-container{ + transform: translateX(-100%); +} + +.container.right-active .overlay{ + transform: translateX(50%); +} + +.container.right-active .overlay-left{ + transform: translateX(0); +} + +.container.right-active .overlay-right{ + transform: translateX(20%); + /* background-color: #333; */ +} diff --git a/images/Signup_SignIn_page.png b/images/Signup_SignIn_page.png new file mode 100644 index 0000000..38a915d Binary files /dev/null and b/images/Signup_SignIn_page.png differ