From 11d8dc5d7d55e3f74f9aaa54bf5fe734c4f46e5b Mon Sep 17 00:00:00 2001 From: Saloni Joshi <salonij395@gmail.com> Date: Wed, 30 Oct 2024 21:04:16 +0530 Subject: [PATCH] features: Add Forgot Password link, update title from Sign-Up to Login, and add additional social media login options --- login.css | 57 ++++++++++++++++++++++++++++++++++++++++-------------- login.html | 55 ++++++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 89 insertions(+), 23 deletions(-) diff --git a/login.css b/login.css index 2b1b611..300617c 100644 --- a/login.css +++ b/login.css @@ -86,7 +86,7 @@ nav ul li a:hover { align-items: center; justify-content: center; width: 90%; - max-width: 600px; + max-width: 500px; background: #fff; border-radius: 10px; margin: 20px auto; @@ -97,9 +97,10 @@ nav ul li a:hover { .forms-container { display: flex; flex-direction: column; - align-items: center; + align-items: left; padding: 2rem; width: 100%; + min-height: 580px; } form { @@ -110,27 +111,28 @@ form { } .title { - font-size: 1.8rem; - font-weight: 600; - color: #333; text-align: center; + margin: 20px 0; } .input-field { position: relative; display: flex; align-items: center; - border: 1px solid #ccc; - border-radius: 5px; + border: 2px solid #ccc; + border-radius: 20px; + width: 100%; padding: 0.5rem; + margin-top: 15px; } .input-field i { - color: #666; - margin-right: 0.5rem; + color: #625e5e; + margin-right: 10px; } .input-field input { + font-size: 15px; width: 100%; padding: 0.75rem; border: none; @@ -140,11 +142,13 @@ form { .btn { background-color: #6e8efb; color: #fff; - padding: 0.75rem; + padding: 18px; font-weight: 600; border: none; - border-radius: 5px; + border-radius: 18px; cursor: pointer; + width: 60%; + margin-left:95px; transition: background-color 0.3s ease; } @@ -153,14 +157,37 @@ form { } /* Social Media */ -.social-media a img { - transition: transform 0.3s ease; +.social-media { + display: flex; + justify-content: space-between; + align-items: center; } -.social-media a img:hover { - transform: scale(1.1); +.social-icon-frame { + display: inline-flex; + justify-content: center; + align-items: center; + border: 2px solid #333; + border-radius: 50%; + padding: 15px; + margin: 5px; + background-color: transparent; + width: 45px; + height: 45px; + transition: transform 0.3s; +} + +.social-icon:hover { + transform: scale(1.5); } +.social-icon { + font-size: 22px; + color: inherit; + transition: none; +} + + /* Responsive Styles */ @media (max-width: 768px) { nav ul { diff --git a/login.html b/login.html index 20964db..de1852a 100644 --- a/login.html +++ b/login.html @@ -36,10 +36,10 @@ <div class="forms-container"> <div class="signin-signup"> <form action="#" class="sign-up-form"> - <h2 class="title">Sign up</h2> + <h2 class="title" style="color: rgb(75, 73, 73); font-size: 40px;">Login</h2> <div class="input-field"> <i class="fas fa-user"></i> - <input type="text" placeholder="Username" required /> + <input type="text" placeholder="Username" required/> </div> <div class="input-field"> <i class="fas fa-envelope"></i> @@ -49,19 +49,58 @@ <h2 class="title">Sign up</h2> <i class="fas fa-lock"></i> <input type="password" placeholder="Password" required /> </div> - <input type="submit" class="btn" value="Sign up" /> - <p class="social-text">Or Sign up with social platforms</p> - <div class="social-media"> - <a href="https://github.com/YourGitHubProfile" target="_blank"> - <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg" alt="GitHub" width="40" height="40" style="margin-left: 5px;"> + <!--Add Forget password link--> + <div class="forgot-password" style="color: rgb(53, 53, 149); text-align: end; margin: 5px 0;"> + <a href="#" onclick="forgotPassword()">Forgot Password?</a> + </div> + <!--Made sign up button Login Button--> + <input type="submit" class="btn solid" value="Login" /> + + <!--Add link For go back to sign-up page--> + <p style="margin-left: 90px;margin-bottom: 5px;">Don't have an account? <a href="signup.html" target="_blank" style="color: rgba(33, 35, 156, 0.8);">Sign up here!</a></p> + + <div style="background-color: antiquewhite; margin-left: 10px;text-align:center;padding:5px 30px;"> + <div class="Social-platform" style="margin-top: 10px;"> + <p class="social-text" > Sign up with social platforms</p> + </div> + + <div class="social-media" style="margin-top:10px;font-size: 20px;"> + <a href="https://github.com/YourGitHubProfile" target="_blank" class="social-icon"> + <i class="fab fa-github"></i> </a> + + <!--Add more social media--> + <a href="https://www.google.com" target="_blank" class="social-icon"> + <i class="fab fa-google"></i> + </a> + + <a href="https://facebook.com/YourPage" target="_blank" class="social-icon"> + <i class="fab fa-facebook-f"></i> + </a> + </div> - <input type="submit" class="btn" value="Login" /> + </div> </form> </div> </div> </div> + <script> + function forgotPassword() { + const email = prompt('Please enter your email address:'); + if (email) { + firebase + .auth() + .sendPasswordResetEmail(email) + .then(() => { + alert('Password reset email sent!'); + }) + .catch((error) => { + console.error('Error:', error.message); + }); + } + } + </script> <footer class="footer"> <div class="footer-content">