Merge pull request #10 from sanskriti2005/signin

built the frontend of the login and signup page
sanskriti2005 · Jan 3, 2025 · 6c27d38 · 6c27d38
2 parents 7da3604 + 333735a
commit 6c27d38
Show file tree

Hide file tree

Showing 3 changed files with 172 additions and 0 deletions.
diff --git a/scripts/signin.js b/scripts/signin.js
@@ -0,0 +1,26 @@
+const signinBtns = document.querySelectorAll(".signin-btns");
+// const active = document.querySelector(".active");
+const signupForm = document.getElementById("signup-form")
+const loginForm = document.getElementById("login-form")
+
+
+function updateForms() {
+    const active = document.querySelector(".signin-btns.active");
+    if (active.id === "signup") {
+        signupForm.style.display = "flex";
+        loginForm.style.display = "none";
+    } else {
+        signupForm.style.display = "none";
+        loginForm.style.display = "flex";
+    }
+}
+
+updateForms();
+
+signinBtns.forEach((btn, i) => {
+    btn.addEventListener("click", () => {
+        signinBtns.forEach(b => b.classList.remove("active"));
+        btn.classList.add("active");
+        updateForms();
+    })
+})
diff --git a/signup.html b/signup.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EverShade: Sign-in</title>
+    <link rel="stylesheet" href="./styles/index.css">
+    <link rel="stylesheet" href="./styles/signup.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
+</head>
+<body>
+    <!-- Signup and Login -->
+    <div id="signin-form">
+        <div class="logo">EVERSHADE</div>
+        <div></div>
+        <div class="tabs">
+            <button class="signin-btns active" id="signup">SIGN-UP</button>
+            <button class="signin-btns" id="login">LOGIN</button>
+
+        </div>
+        <form id="signup-form" class="form">
+            <h4>Sign-Up</h4>
+            <input type="text" placeholder="Name" required>
+            <input type="email" placeholder="Email" required>
+            <input type="password" placeholder="Password" required>
+            <button type="submit">Sign Up</button>
+        </form>
+        <form id="login-form" class="form">
+            <h4>Login</h4>
+            <input type="email" placeholder="Email" required>
+            <input type="password" placeholder="Password" required>
+            <button type="submit">Login</button>
+        </form>
+    </div>
+
+    <!--last set of cards -->
+    <div id="footer-cards">
+        <div class="card footer-card">
+            <img src="https://www.sephora.com/contentimages/2023-06-02-RWD-homepage-site-desktop-mobile-home-page-marketing-banner-800x534-dei-release.jpg?imwidth=800"
+                alt="Card Image">
+            <div>
+                <h3>Diversity, Equality & Inclusion</h3>
+                <p>Our commitment to providing an inclusive beauty community</p>
+            </div>
+        </div>
+        <div class="card footer-card">
+            <img src="https://www.sephora.com/contentimages/2024-06-15-AltPayments-site-desktop-rwd-home-page-marketing-banner-us-image-only.jpg?imwidth=800"
+                alt="Card Image">
+            <div>
+                <h3>Shop now, pay later</h3>
+                <p>Split your purchase into convenient payments</p>
+            </div>
+        </div>
+        <div class="card footer-card">
+            <img src="https://www.sephora.com/contentimages/2024-omni-journey-der-a-site-desktop-mobile-app-home-page-rwd-marketing-banner-omni-us-can-final.jpg?imwidth=800"
+                alt="Card Image">
+            <div>
+                <h3>Beauty on demand</h3>
+                <p>Fast and easy options that work for you and your needs</p>
+            </div>
+        </div>
+    </div>
+
+    <div id="footer-div">
+
+    </div>
+
+</body>
+<script src="./scripts/footer.js"></script>
+<script src="./scripts/signin.js" type="module"></script>
+</html>
diff --git a/styles/signup.css b/styles/signup.css
@@ -0,0 +1,75 @@
+
+/* main form styling */
+#signin-form{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 0.8rem;
+    width: 40%;
+    margin: 2rem auto;
+    border: 1px solid #2b3521;
+    padding: 2rem 0;
+    border-radius: 10px;
+    height: 25rem;
+}
+.logo{
+    color: #646F58;
+    font-weight:900;
+    font-size: 3rem;
+}
+.logo + div{
+    width: 90%;
+    border-bottom: 3px solid #2b3521;
+}
+.form{
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 90%;
+    align-items: center;
+}
+.form input, .form button{
+    padding: 0.2rem 0.8rem;
+    width: 90%;
+    border-radius: 5px;
+    border: 1px solid gray;
+    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+}
+.form button{
+    background-color: #a9b798;
+    border: none;
+}
+.form button:hover{
+    background-color: #838e74;
+}
+
+/* Sliding tabs css */
+.tabs{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #c3cabb;
+    border-radius: 20px;
+    position: relative;
+    padding: 0.3rem;
+    width: 85%;
+    margin: auto;
+}
+.tabs > button{
+    width: 50%;
+    font-weight: 700;
+    color: #141a0e;
+    background: transparent;
+    border: none;
+    padding: 0.4rem;
+    cursor: pointer;
+    /* what does this do? */
+    z-index: 2; 
+}
+
+.tabs .active{
+    background-color: #e6ebe1;
+    border-radius: inherit;
+    transition: all 200ms;
+}