Merge pull request #30 from Kavyashah26/main

[Feature]Added Signup_SignIn_page
csiddu · Oct 28, 2023 · fdaf046 · fdaf046
2 parents 920d238 + 049c5ad
commit fdaf046
Show file tree

Hide file tree

Showing 5 changed files with 281 additions and 1 deletion.
diff --git 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"
+  }
 ]
diff --git a/components/Signup_SignIn_page/index.html b/components/Signup_SignIn_page/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=\, initial-scale=1.0">
+    <title>Login</title>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/solid.css" integrity="sha384-Tv5i09RULyHKMwX0E8wJUqSOaXlyu3SQxORObAI08iUwIalMmN5L6AvlPX2LMoSE" crossorigin="anonymous"/>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/fontawesome.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous"/>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <div class="container" id="container">
+        <div class="form-div sign-up">
+            <form action="" id="formSignup">
+                <h1>Create an account</h1>
+                <span>Use your Email for regestration</span>
+                <input type="text" placeholder="Name" required id="nameId">
+                <input type="email" placeholder="Email" required>
+                <input type="password" placeholder="password" required>
+                <br>
+                <button id="signUp">Sign Up</button>
+            </form>
+        </div>
+        <div class="form-div sign-in">
+            <form action="../../index.html" target="_blank" >
+                <h1>SignIn</h1>
+                <span>Login to your account</span>
+                <input type="email" placeholder="Email" required>
+                <input type="password" placeholder="password" required>
+                <a href="#">Forgot Password?</a>
+                <br>
+                <button id="signIn">Sign In</button>
+            </form>
+        </div>
+        <div class="overlay-container">
+            <div class="overlay">
+                <div class="overlay-left overlay-panel">
+                    <h1>Already Have Account?</h1>
+                    <p>Please login by feeling up your details</p>
+                    <button id="signIn-updated" class="ghost">Sign IN</button>
+                </div>
+                <div class="overlay-right overlay-panel">
+                    <h1>Create a New Account</h1>
+                    <p>Enter Your details</p>
+                    <button id="signup-updated" class="ghost" >Sign Up</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/components/Signup_SignIn_page/script.js 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
@@ -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