PRIYESHSINGH24 · avnisinngh · Jan 26, 2025
diff --git a/pages/Login.css b/pages/Login.css
@@ -2,17 +2,99 @@
 body {
   font-family: 'Poppins', sans-serif;
   background: linear-gradient(to top right, #80ff00, #07922a);
-  color: #ffffff; /* Keeps text readable against the green */
+  color: #333;
   margin: 0;
   padding: 0;
   display: flex;
-  flex-direction: column; 
-  align-items: center; 
-  justify-content: flex-start; 
-  min-height: 100vh; 
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+
+
+
+/* Unified Input Styling */
+.unified-input {
+  display: flex;
+  align-items: center;
+  background: #f5f5f5;
+  padding: 0.75rem 1rem;
+  border: 2px solid #ddd;
+  border-radius: 8px;
+  transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+
+/* Hover and Focus Effects */
+.unified-input:hover {
+  border-color: #007bff;
+  box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
+}
+
+
+.unified-input:focus-within {
+  background: #ffffff; /* Clean white background */
+  border-color: #007bff; /* Blue border on focus */
+  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); /* Glow effect */
+}
+
+/* Input Icon Styling */
+.input-icon {
+  width: 24px; /* Icon size */
+  height: 24px;
+  margin-right: 0.75rem; /* Spacing between icon and input */
+  opacity: 0.8; /* Slight transparency */
+  transition: opacity 0.3s ease; /* Smooth hover effect */
+}
+
+.unified-input:hover .input-icon {
+  opacity: 1; /* Fully visible on hover */
+}
+
+/* Input Field Styling */
+.input-field {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: none;
+  font-size: 1rem;
+  color: #333;
+}
+
+.input-field::placeholder {
+  color: #aaa;
+  font-style: italic;
 }
 
 
+.input-field:focus::placeholder {
+  color: transparent; /* Hide placeholder on focus */
+  opacity: 0;
+}
+
+/* Input Group (for spacing) */
+.input-group {
+  margin-bottom: 1.2rem;
+}
+/* Submit Button (for color harmony) */
+.submit-btn {
+  width: 100%;
+  padding: 1rem;
+  background: linear-gradient(135deg, #007bff, #0056b3); /* Blue gradient */
+  border: none;
+  border-radius: 12px;
+  color: white;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-bottom: 1.5rem;
+}
+
+.submit-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px -10px rgba(0, 123, 255, 0.5);
+}
 
 /* Navbar Styles */
 .navbar {
@@ -213,16 +295,14 @@ body {
   }
 
   .auth-container {
-    width: 70vw;
-    max-width: 420px;
-    padding: 2.5rem;
-    background: #f5f5dc; /* Earthy beige tone */
-    border-radius: 24px;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    color: #333; /* Dark gray for good contrast */
-}
+    background: #fff;
+    border-radius: 20px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+    padding: 2rem;
+    max-width: 400px;
+    width: 100%;
+    text-align: center;
+  }
 
   .auth-header {
     text-align: center;
@@ -262,11 +342,7 @@ body {
     font-size: 0.95rem;
   }
 
-  .input-group {
-    position: relative;
-    margin-bottom: 1.5rem;
-  }
-
+
   .input-label {
     display: block;
     font-size: 0.875rem;
@@ -298,10 +374,17 @@ body {
     background: rgba(6, 184, 66, 0.1); /* Slightly darker background on hover */
 }
 
-  .input-field::placeholder {
-    color: var(--text-secondary);
-    opacity: 0.7;
-  }
+.input-field::placeholder {
+  color: var(--text-secondary);
+  opacity: 0.7;
+  transition: color 0.3s ease, opacity 0.3s ease;
+}
+
+.input-field:focus::placeholder {
+  color: transparent; /* Hides placeholder on focus */
+  opacity: 0;
+}
+
 
   .auth-options {
     display: flex;

diff --git a/pages/Login.html b/pages/Login.html
@@ -3,37 +3,25 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
     <meta property="og:image" content="../img/lightlogo.png" />
     <meta
       property="og:url"
       content="https://priyeshsingh24.github.io/DSA_SOLUTION_PLATFORM/"
     />
     <meta property="og:type" content="website" />
-
     <link rel="icon" href="../img/lightlogo.png" type="image/png" />
-    <link
-      rel="icon"
-      href="../img/lightlogo.png"
-      sizes="16x16"
-      type="image/png"
-    />
-
-    <title>Sign In / Sign Up</title>
-    <link rel="stylesheet" href="Login.css" />
     <link
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
       rel="stylesheet"
     />
-    <link rel="stylesheet" href="navbar.css" />
+    <link rel="stylesheet" href="Login.css" />
+    <title>Sign In / Sign Up</title>
   </head>
-
   <body>
     <nav class="navbar">
       <div class="logo">
         <img src="../img/lightlogo.png" alt="Logo" />
       </div>
-
       <button class="mobile-menu-btn">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -61,41 +49,40 @@
       </ul>
     </nav>
 
-    <!-- Modal for Sign In / Sign Up -->
     <div id="authModal" class="modal">
       <div class="modal-content">
-        <!-- Sign In Form -->
         <div class="form-main">
           <div id="signInForm" class="auth-container">
             <div class="auth-header">
-              <div class="auth-logo">
-                <i class="fa-solid fa-user-secret"></i>
-              </div>
-              <h2 class="auth-title">Welcome back</h2>
+              <h2 class="auth-title">Welcome Back</h2>
               <p class="auth-subtitle">Sign in to your account</p>
             </div>
 
             <form id="signInFormSubmit">
               <div class="input-group">
-                <label class="input-label" for="signInEmail">Email</label>
-                <input
-                  type="email"
-                  id="signInEmail"
-                  class="input-field"
-                  placeholder="[email protected]"
-                  required
-                />
+                <div class="input unified-input">
+                  <img src="email.png" alt="Email Icon" class="input-icon" />
+                  <input
+                    type="email"
+                    id="signInEmail"
+                    class="input-field"
+                    placeholder="Email"
+                    required
+                  />
+                </div>
               </div>
 
               <div class="input-group">
-                <label class="input-label" for="signInPassword">Password</label>
-                <input
-                  type="password"
-                  id="signInPassword"
-                  class="input-field"
-                  placeholder="Enter your password"
-                  required
-                />
+                <div class="input unified-input">
+                  <img src="padlock.png" alt="Password Icon" class="input-icon" />
+                  <input
+                    type="password"
+                    id="signInPassword"
+                    class="input-field"
+                    placeholder="Password"
+                    required
+                  />
+                </div>
               </div>
 
               <div class="auth-options">
@@ -106,7 +93,7 @@ <h2 class="auth-title">Welcome back</h2>
                 <a href="#" class="forgot-password">Forgot password?</a>
               </div>
 
-              <button type="submit" class="submit-btn">Sign in</button>
+              <button type="submit" class="submit-btn">Sign In</button>
 
               <div class="auth-divider">
                 <span>Or continue with</span>
@@ -123,9 +110,7 @@ <h2 class="auth-title">Welcome back</h2>
 
               <div class="auth-footer">
                 Don't have an account?
-                <a href="signup.html" id="switchTosignup" class="auth-link"
-                  >Create an account</a
-                >
+                <a href="signup.html" class="auth-link">Create an account</a>
               </div>
             </form>
           </div>

diff --git a/pages/email.png b/pages/email.png
diff --git a/pages/padlock.png b/pages/padlock.png