From dedf6d312070cbb10f366358d86ae2436067fefa Mon Sep 17 00:00:00 2001
From: Yash patil <149749700+PATILYASHH@users.noreply.github.com>
Date: Thu, 31 Oct 2024 10:40:54 +0530
Subject: [PATCH] eye icon added

---
 SignUp/signup.css  | 189 ++++++++++++++++++++++-----------------------
 SignUp/signup.html |  67 ++++++++++++++--
 login/login.html   |  25 ++++--
 3 files changed, 168 insertions(+), 113 deletions(-)

diff --git a/SignUp/signup.css b/SignUp/signup.css
index d426fd74..733071f0 100644
--- a/SignUp/signup.css
+++ b/SignUp/signup.css
@@ -1,24 +1,22 @@
 * {
-
-    box-sizing: border-box;
-    margin: 0;
-    padding:0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 body {
-    background: url('https://images.pexels.com/photos/7135057/pexels-photo-7135057.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') no-repeat center center fixed;
-    background-size: cover;
-    font-family: 'Trebuchet MS', Arial, sans-serif;
-    display: flex;
-    flex-direction: column;
-    justify-content: start;
-    align-items: start;
-    height: 100vh;
-    color: white;
-    text-shadow: 1px 1px 2px #000;
+  background: url('https://images.pexels.com/photos/7135057/pexels-photo-7135057.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') no-repeat center center fixed;
+  background-size: cover;
+  font-family: 'Trebuchet MS', Arial, sans-serif;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: start;
+  height: 100vh;
+  color: white;
+  text-shadow: 1px 1px 2px #000;
 }
 
-
 .error-message {
   color: red;
   font-size: 0.85em;
@@ -26,35 +24,33 @@ body {
 }
 
 .signup-container {
-    
-    opacity: 0.75;
-    background-color: rgba(0, 0, 0, 0);
-    padding:3rem 5rem;
-    border-radius: 20px;
-    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
-    text-align: center;
-    max-width: 500px;
-    width: 100%;
-    animation: fadeIn 2s ease-in-out;
-    background-color: black;
-    margin: auto;
+  opacity: 0.75;
+  background-color: black;
+  padding: 3rem 5rem;
+  border-radius: 20px;
+  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
+  text-align: center;
+  max-width: 500px;
+  width: 100%;
+  animation: fadeIn 2s ease-in-out;
+  margin: auto;
 }
 
 @keyframes fadeIn {
   from {
-    opacity: 0;
-    transform: scale(0.9);
+      opacity: 0;
+      transform: scale(0.9);
   }
   to {
-    opacity: 0.75;
-    transform: scale(1);
+      opacity: 0.75;
+      transform: scale(1);
   }
 }
 
 h1 {
-    margin-bottom: 1.5rem;
-    font-size: 1.5rem;
-    color: #fb5283;
+  margin-bottom: 1.5rem;
+  font-size: 1.5rem;
+  color: #fb5283;
 }
 
 .input-group {
@@ -100,31 +96,20 @@ input[type="password"]:focus {
   position: relative;
   padding: 15px 60px;
   margin: auto;
-
   cursor: pointer;
   transition: background-color 0.2s, color 0.2s;
-
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   text-shadow: 0px 1px 0px #000;
   filter: dropshadow(color=#000, offx=0px, offy=1px);
-
-  -webkit-box-shadow: inset 0 1px 0 #ffe5c4, 0 10px 0 #915100;
-  -moz-box-shadow: inset 0 1px 0 #ffe5c4, 0 10px 0 #915100;
   box-shadow: inset 0 1px 0 #ffe5c4, 0 10px 0 #915100;
-
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
   border-radius: 5px;
 }
 
 .signup-button:active {
   top: 10px;
   background-color: #f78900;
-
-  -webkit-box-shadow: inset 0 1px 0 #ffe5c4, inset 0 -3px 0 #915100;
-  -moz-box-shadow: inset 0 1px 0 #ffe5c4, inset 0 -3pxpx 0 #915100;
   box-shadow: inset 0 1px 0 #ffe5c4, inset 0 -3px 0 #915100;
 }
+
 .signup-button:after {
   content: "";
   height: 100%;
@@ -135,10 +120,9 @@ input[type="password"]:focus {
   left: -4px;
   z-index: -1;
   background-color: #2b1800;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
   border-radius: 5px;
 }
+
 .signup-button:hover {
   background-color: #ffd198;
   color: #f78900;
@@ -170,22 +154,14 @@ input[type="password"]:focus {
   text-decoration: none;
   border-radius: 15px;
   border: none;
-  background: linear-gradient(
-    0deg,
-    rgba(255, 193, 219, 1) 0%,
-    rgba(245, 131, 202, 1) 100%
-  );
+  background: linear-gradient(0deg, rgba(255, 193, 219, 1) 0%, rgba(245, 131, 202, 1) 100%);
   color: #fff;
   overflow: hidden;
 }
 
 .linksHome:hover {
   text-decoration: none;
-  background: linear-gradient(
-    0deg,
-    rgba(245, 131, 202, 1) 0%,
-    rgba(255, 193, 219, 1) 100%
-  );
+  background: linear-gradient(0deg, rgba(245, 131, 202, 1) 0%, rgba(255, 193, 219, 1) 100%);
   color: #fff;
 }
 
@@ -203,27 +179,27 @@ input[type="password"]:focus {
 
 .linksHome:active {
   box-shadow: 4px 4px 6px 0 rgba(255, 193, 219, 0.3),
-    -4px -4px 6px 0 rgba(245, 131, 202, 0.3),
-    inset -4px -4px 6px 0 rgba(255, 193, 219, 0.3),
-    inset 4px 4px 6px 0 rgba(245, 131, 202, 0.3);
+              -4px -4px 6px 0 rgba(245, 131, 202, 0.3),
+              inset -4px -4px 6px 0 rgba(255, 193, 219, 0.3),
+              inset 4px 4px 6px 0 rgba(245, 131, 202, 0.3);
 }
 
 @keyframes shiny-btn1 {
   0% {
-    transform: scale(0) rotate(45deg);
-    opacity: 0;
+      transform: scale(0) rotate(45deg);
+      opacity: 0;
   }
   80% {
-    transform: scale(0) rotate(45deg);
-    opacity: 0.5;
+      transform: scale(0) rotate(45deg);
+      opacity: 0.5;
   }
   81% {
-    transform: scale(4) rotate(45deg);
-    opacity: 1;
+      transform: scale(4) rotate(45deg);
+      opacity: 1;
   }
   100% {
-    transform: scale(50) rotate(45deg);
-    opacity: 0;
+      transform: scale(50) rotate(45deg);
+      opacity: 0;
   }
 }
 
@@ -235,39 +211,31 @@ a {
   text-decoration: none;
 }
 
-#link-home{
-    border: 1px solid rgb(255, 255, 255);
-    box-shadow: 0 0 5px white;
-    border-radius: 15px;
-    padding: 8px 15px;
-
-    margin-left: 1rem;
-    margin-top: 1rem;
-    
+#link-home {
+  border: 1px solid rgb(255, 255, 255);
+  box-shadow: 0 0 5px white;
+  border-radius: 15px;
+  padding: 8px 15px;
+  margin-left: 1rem;
+  margin-top: 1rem;
 }
 
-#link-home:hover{
-    border: 1px solid rgb(202, 202, 202);
-    box-shadow: 0 0 5px #424242;
-    background-color: #42424222;
-    border-radius: 15px;
-    padding: 8px 15px;
-
-    margin-left: 1rem;
-    margin-top: 1rem;
+#link-home:hover {
+  border: 1px solid rgb(202, 202, 202);
+  box-shadow: 0 0 5px #424242;
+  background-color: #42424222;
+  border-radius: 15px;
+  padding: 8px 15px;
 }
 
-#link-home a{
-    text-decoration: none;
-    color: #fff;
-    font-size: 1.4rem;
-    text-shadow: none;
-    font-family: 'Trebuchet MS', Arial, sans-serif;
-    
+#link-home a {
+  text-decoration: none;
+  color: #fff;
+  font-size: 1.4rem;
+  text-shadow: none;
+  font-family: 'Trebuchet MS', Arial, sans-serif;
 }
 
-/* ... existing styles ... */
-
 .signup-button, .google-signup-button {
   width: 100%;
   padding: 10px;
@@ -353,6 +321,31 @@ a {
 .links a:hover {
   text-decoration: underline;
 }
-::placeholder {
-  color: white;
+
+.footer {
+  text-align: center;
+  margin-top: auto;
+  padding: 20px 0;
+  font-size: 0.8rem;
+}
+
+.icons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px; /* Margin added for spacing above icons */
+}
+
+.icons a {
+  margin: 0 10px; /* Spacing between icons */
+  transition: transform 0.2s;
+}
+
+.icons a:hover {
+  transform: scale(1.1); /* Slight scaling effect on hover */
+}
+
+.icons img {
+  width: 30px; /* Consistent size for icons */
+  height: 30px; /* Consistent size for icons */
 }
diff --git a/SignUp/signup.html b/SignUp/signup.html
index 8c99dd96..d4a35066 100644
--- a/SignUp/signup.html
+++ b/SignUp/signup.html
@@ -1,11 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Sign Up for GamingTools</title>
-    <link rel="stylesheet" href="signup.css">
-    <link rel="shortcut icon" href="../images/logo.png" type="image/x-icon">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Sign Up for GamingTools</title>
+        <link rel="stylesheet" href="signup.css">
+        <link rel="shortcut icon" href="../images/logo.png" type="image/x-icon">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
     <style>
         .condition {
             color: gray;
@@ -19,7 +20,38 @@
             font-size: 0.85em;
             margin-top: 5px;
         }
+        .input-group {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            margin-bottom: 1rem; /* Add some spacing between input fields */
+        }
+        #togglePassword, #toggleConfirmPassword {
+            cursor: pointer;
+            position: absolute;
+            right: 10px;
+            top: 35%; /* Adjust the vertical alignment */
+            transform: translateY(-50%);
+        }
+
+/* Bootrap costome code */
+
+.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {
+    display: inline-block;
+    font-family: bootstrap-icons !important;
+    font-style: normal;
+    font-weight: normal !important;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    vertical-align: -3em;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
     </style>
+
+    <!-- Bootstrap Icons -->
 </head>
 <body>
 
@@ -42,6 +74,7 @@ <h1>Create Your Account</h1>
             <div class="input-group">
                 <label for="password">Password</label>
                 <input type="password" id="password" name="password" placeholder="Create password" required>
+                <i class="bi bi-eye" id="togglePassword" aria-label="Toggle password visibility"></i>
             </div>
             <div class="password-recommendations">
                 <p id="length" class="condition">At least 8 characters</p>
@@ -53,6 +86,7 @@ <h1>Create Your Account</h1>
             <div class="input-group">
                 <label for="confirm-password">Confirm Password</label>
                 <input type="password" id="confirm-password" name="confirm-password" placeholder="Re-enter password" required>
+                <i class="bi bi-eye" id="toggleConfirmPassword" aria-label="Toggle confirm password visibility"></i>
             </div>
             <div id="password-error" class="error-message"></div>
             <button type="submit" class="signup-button">Sign Up</button>
@@ -70,6 +104,25 @@ <h1>Create Your Account</h1>
     </div>
 
     <script src="signup.js"></script>
+    <script>
+        const togglePassword = document.getElementById('togglePassword');
+        const passwordInput = document.getElementById('password');
+        const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
+        const confirmPasswordInput = document.getElementById('confirm-password');
+
+        togglePassword.addEventListener('click', () => {
+            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
+            passwordInput.setAttribute('type', type);
+            togglePassword.classList.toggle('bi-eye');
+            togglePassword.classList.toggle('bi-eye-slash');
+        });
+
+        toggleConfirmPassword.addEventListener('click', () => {
+            const type = confirmPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password';
+            confirmPasswordInput.setAttribute('type', type);
+            toggleConfirmPassword.classList.toggle('bi-eye');
+            toggleConfirmPassword.classList.toggle('bi-eye-slash');
+        });
+    </script>
 </body>
 </html>
-
diff --git a/login/login.html b/login/login.html
index de110417..3980ba99 100644
--- a/login/login.html
+++ b/login/login.html
@@ -6,6 +6,8 @@
     <title>Collect Your Gaming Tools - Login</title>
     <link rel="shortcut icon" href="logo.png" type="image/x-icon">
     <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&family=Roboto:wght@400&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
+
     <link rel="stylesheet" href="login.css">
     <script src="auth.js" defer type="module"></script>
 </head>
@@ -25,8 +27,9 @@ <h1 class="login-title">Welcome to Gaming Tools Store!</h1>
                 <div class="input-group password-container">
                     <label for="password">Password</label>
                     <input type="password" id="password" placeholder="Enter your password" required>
-                    <i class="far fa-eye" id="togglePassword" aria-label="Toggle password visibility"></i>
+                    <i class="bi bi-eye" id="togglePassword" aria-label="Toggle password visibility"></i>
                 </div>
+                
                 <button type="submit" class="login-button">Login</button>
                 <button id='google-login-btn' type="button">Login with Google</button>
             </form>
@@ -63,14 +66,19 @@ <h1 class="login-title">Welcome to Gaming Tools Store!</h1>
 
     
     <script>
-        const togglePassword = document.getElementById('togglePassword');
-        const passwordInput = document.getElementById('password');
+       const togglePassword = document.getElementById('togglePassword');
+const passwordInput = document.getElementById('password');
+
+togglePassword.addEventListener('click', () => {
+    // Toggle the type attribute
+    const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
+    passwordInput.setAttribute('type', type);
+    
+    // Toggle the icon
+    togglePassword.classList.toggle('bi-eye'); // Normal eye icon
+    togglePassword.classList.toggle('bi-eye-slash'); // Eye with a slash icon
+});
 
-        togglePassword.addEventListener('click', function () {
-            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
-            passwordInput.setAttribute('type', type);
-            this.classList.toggle('fa-eye-slash');
-        });
 
         document.getElementById("login-form").addEventListener("submit", async (e) => {
             e.preventDefault();
@@ -107,5 +115,6 @@ <h1 class="login-title">Welcome to Gaming Tools Store!</h1>
             }
         };
     </script>
+   
 </body>
 </html
\ No newline at end of file