features: Add Forgot Password link, update title from Sign-Up to Logi…

…n, and add additional social media login options
GarimaSingh0109 · Oct 30, 2024 · 11d8dc5 · 11d8dc5
1 parent 7b65fe0
commit 11d8dc5
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 23 deletions.
diff --git 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
@@ -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">