From 4246c0b9639b581e2f4a7d7276edd00405ab3b56 Mon Sep 17 00:00:00 2001
From: Praneeth Palugula <praneeth.palugula@gmail.com>
Date: Tue, 4 Jun 2024 21:23:28 +0530
Subject: [PATCH] final try

---
 assets/css/login.css   | 669 +++++++++--------------------------------
 assets/css/style.css   | 206 +++++--------
 assets/html/login.html | 352 +++++++++++++---------
 3 files changed, 417 insertions(+), 810 deletions(-)

diff --git a/assets/css/login.css b/assets/css/login.css
index 553eb0f3..d7b8c4f4 100644
--- a/assets/css/login.css
+++ b/assets/css/login.css
@@ -16,9 +16,7 @@
   --charcoal: hsl(203, 30%, 26%);
   --white: hsl(0, 0%, 100%);
   --black: rgb(0, 0, 0);
-}
-::-webkit-scrollbar {
-  width: 10px;
+  --old-rose_1: hwb(357 6% 36%);
 }
 
 ::-webkit-scrollbar-track {
@@ -40,7 +38,7 @@
 body {
   width: 100%;
   height: 100%;
-  font-family: var(--ff-poppins);
+  font-family: var(--ff-philosopher);
   font-size: 4rem;
   /* background-color: #c9acc2; */
   background-color: #f5ebe6;
@@ -57,353 +55,27 @@ p {
   font-size: 1rem;
 }
 
-/* .navbar {
-  width: 80%;
-  height: 6rem;
-  align-self: center;
-  display: inline-block;
+.navbar {
+  width: 100%;
   background-color: #f5ebe6;
-  background-color: var(--white);
-  padding-inline: 15px;
-  font-size: 1.8rem;
-  font-family: var(--ff-poppins);
-  border-radius: 10px;
-
-  text-decoration: none;
-
-
-
-} */
-/* .navbar-header {
+}
+.navbar-header {
   width: 100%;
   font-family: var(--ff-poppins);
-  font-size: 1rem;
+  font-size: 4rem;
   line-height: 1;
 
   display: block;
   text-decoration-color: #fff;
-} */
-/* .navbar-header a {
+}
+.navbar-header a {
   color: rgb(247, 150, 150);
   font-size: 2rem;
   margin-left: 2rem;
-} */
-.navbar-list{
-  list-style-type: none;
-  text-decoration: none;
-
-  display: flex;
-  justify-content: center; /* Center align the navbar items */
-  align-items: center; /* Vertically center the navbar items */
-  margin: 0; /* Remove default margin */
-  padding: 0; /* Remove default padding */
-}
-
-.navbar-item {
-  margin: 0 10px; /* Adjust the horizontal margin to increase spacing */
-  padding: 0; /* Remove default padding */
-  text-decoration: none;
-
-}
-
-.nav-links {
-  margin: 0;
-  text-decoration: none;
-
-}
-
-.nav-links ul {
-  padding: 0;
-  text-decoration: none;
-
-  list-style: none;
-  /* Remove bullet points */
 }
-
-.nav-links ul li {
-  margin-bottom: 10px;
-  text-decoration: none;
-
-  /* Add some spacing between list items */
-}
-
-.nav-links ul li a {
-  color: rgb(55, 54, 54);
-  text-decoration: none;
-  /* Remove underline */
-}
-
-/* .nav-links ul li a:hover {
-  color: rgb(167, 95, 107);
-  text-decoration: none;
-
-} */
-
-.navbar-link:is(:hover, :focus) {
-  color: var(--old-rose);
-  text-decoration: none;
-
-}
-
 .pass-container{
   position: relative;
 }
-
-.navbar-link {
-  transition: all 0.3s ease;
-  padding-left: 4px;
-  padding-right: 4px;
-  text-decoration: none
-}
-
-.navbar-link:hover {
-  /* transform: scale(1.1);
-  border-radius: 15px;
-  background-color: blanchedalmond; */
-  text-decoration: none;
-
-  text-shadow: 2px 2px 10px #f39d127e, -2px -2px 4px rgba(175, 142, 25, 0.5);
-}
-
-.navbar-link.active,
-.navbar-link:hover {
-  /* font-size: 1.1em; */
-  /* border-bottom: 2px solid darkred; */
-  color: #fcb0b480;
-  text-decoration: none;
-}
-
-.navbar-link::after {
-  content: "";
-  position: absolute;
-  bottom: 1px;
-  left: 0px;
-  height: 3px;
-  background-color: #fcb0b480;
-  width: 0;
-  height: 3px;
-  box-shadow: 0 0 10px #f39d127e;
-  transition: all 0.6s;
-  text-decoration: none;
-  
-
-}
-.navbar-link:hover::after {
-  width: 100%;
-  text-decoration: none;
-
-}
-.switch-label{
-  margin-right: 1.5rem;
-  margin-top: 0.8rem;
-}
-
-/*-----------------------------------*\
-  #Rate-Us-Modal
-\*-----------------------------------*/
-
-.rate-us-modal-wrapper {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
-  display: none;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  z-index: 101;
-}
-
-.rate-us-modal-open {
-  overflow: hidden;
-  position: fixed;
-}
-
-.rate-us-modal {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 20%;
-}
-
-.rating_heading {
-  color: white;
-    font-family: var(--ff-poppins);
-  animation: scale-up 1s ease;
-}
-
-@keyframes scale-up {
-  0% {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.star_rating {
-  width: 100%;
-  user-select: none;
-  background-color: white;
-  padding: 1.4rem 2.5rem;
-  margin-bottom: 2rem;
-  border-radius: 0.4rem;
-  text-align: center;
-  font-size: 1.5rem;
-  font-family: var(--ff-poppins);
-  animation: slide-up 1s ease;
-}
-.star_rating p{
-  font-size: 2rem;
-
-}
-@keyframes slide-up {
-  0% {
-    opacity: 0;
-    transform: translateY(50px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0px);
-  }
-}
-
-.star {
-  font-size: 3rem;
-  color: #ff9800;
-  background-color: unset;
-  border: none;
-  display: inline;
-}
-
-.star:hover {
-  cursor: pointer;
-}
-
-.home_button {
-  align-self: start;
-  padding: 0 0.7em;
-  background-color: #fff;
-  color: var(--old-rose);
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  text-decoration: none !important;
-
-  /* To remove the default underline */
-}
-
-
-.home_button::before {
-  content: "\2716";
-  font-size: 2rem;
-  font-weight: 800;
-  font-family: FontAwesome;
-  text-decoration: none !important;
-  color: inherit;
-
-}
-
-a{color: var(--old-rose);}
-a:hover {color: var(--old-rose);}   /* Mouse over link */
-a:active {color: var(--old-rose);}  
-
-
-.submit_button {
-  margin-top: 5px;
-  padding: 10px 20px;
-  background-color: #fff;
-  color: var(--old-rose);
-  border: none;
-  font-family: var(--ff-poppins);
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 2rem;
-
-  display: none;
-  /* Initially hide the submit button */
-}
-
-.thank_you_message {
-  background-color: white;
-  padding: 0.5em 1em;
-  margin-top: 2rem;
-  font-family: var(--ff-poppins);
-  animation: scale-up 1s ease;
-  font-size: 2rem;
-  border-radius: 5px;
-  display: none;
-}
-
-/* Media Query for Responsive Design */
-
-@media only screen and (max-width: 900px) {
-  .rate-us-modal {
-    width: 50%;
-  }
-
-  .contact iframe {
-    width: 350px;
-    height: 300px;
-
-  }
-
-  .circle-container{
-    display:none;
-  }
-}
-
- @media only screen and (max-width: 600px) {
-
-  .navbar-list {
-    display: flex;
-    flex-direction: column;
-  }
-  .navbar {
-    display: flex;
-    justify-content: center;
-  }
-
-  .star {
-    font-size: 2rem;
-  }
-
-  .rate-us-modal {
-    width: 90%;
-  }
-}  
-
-@media only screen and (max-width: 600px) {
- 
-  .navbar-item {
-    display: none;
-  }
-
- 
-  .navbar {
-    display: flex;
-    justify-content: center;
-  }
-
-  
-  body.logo {
-    display: flex;
-    justify-content: center;
-  }
-
-  
-  .logopic {
-    width: 150px; /
-  }
-}
-
-
 .fa{
   position: absolute;
   top: 45%;
@@ -455,81 +127,6 @@ a:active {color: var(--old-rose);}
     color: red;
 } */
 
-
-.navbar-link {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  color: var(--charcoal);
-  padding: 8px 12px; /* Adjust padding as needed */
-  line-height: 2;
-  transition: var(--transition-1);
-}
-
-.navbar-link:is(:hover, :focus) {
-  color: var(--old-rose);
-}
-
-.dropdown-menu {
-  /* display: none;
-  position: absolute;
-  top: calc(100% + 5px);
-  left: 0;
-  background-color: var(--white);
-  padding: 10px;
-  border-radius: 5px; */
-  display: none;
-  position: absolute;
-  background-color: #fff;
-  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
-  z-index: 1;
-  transition: all 0.3s ease;
-  top: 100%;
-  text-align: center;
- 
-}
-.dropdown-menu-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-
-.dropdown-menu-item {
-  padding: 12px 16px;
-}
-
-.dropdown-menu-item a {
-  text-decoration: none;
-  color: #000;
-}
-
-.dropdown-item:first-child {
-  margin-top: 0;
-}
-
-.dropdown-menu.active {
-  display: block;
-}
-
-.navbar-item.dropdown {
-  position: relative; /* Ensure the dropdown menu is positioned relative to the navbar item */
-} 
-.dropdown-menu-item .navbar-link {
-  display: inline-block; /* Ensure links are inline-block to center them */
-}
-.navbar-item.dropdown:hover .dropdown-menu {
-  display: block;
-} 
-.dropdown-arrow {
-  transition: transform 0.3s ease; /* Smooth transition for rotation */
-}
-
-.navbar-item.dropdown:hover .dropdown-arrow {
-  transform: rotate(180deg);
-}
-
 .form {
 	display: flex;
     flex-direction: column;
@@ -537,19 +134,14 @@ a:active {color: var(--old-rose);}
     padding: 35px;
     margin-top: -30px;
 }
-.form1 {
-	display: flex;
-    flex-direction: column;
-    gap: 6px;
-    padding: 15px 35px;
-    margin-top: -30px;
-}
+
 .note {
   width: 50%;
   max-width: 600px;
   font-family: var(--ff-philosopher);
-  margin-top:200px;
   margin-bottom: 4rem;
+  position: relative;
+  top: 140px;
 }
 
 .note h1 {
@@ -579,6 +171,7 @@ a:active {color: var(--old-rose);}
   position: relative;
   display: flex;
   flex-direction: column;
+  top: 140px;
   left: 50%;
   bottom: 10%;
   transform: translateX(-50%);
@@ -590,7 +183,6 @@ a:active {color: var(--old-rose);}
   overflow: hidden;
   border-radius: 2%;
   box-shadow: 0 0 15px 5px #24004628;
-  
   /* margin-bottom: 10rem;
   margin-left: 4rem; */
 }
@@ -601,21 +193,21 @@ a:active {color: var(--old-rose);}
   display: none;
 }
 
-/*Signup*/
+/*Login*/
 
-#signup {
+#login {
   font-size: medium;
   font-family: var(--ff-poppins);
 }
 
-.signup {
+.login {
   position: relative;
   width: 100%;
-  height: 110%;
+  height: 100%;
   font-family: var(--ff-poppins);
 }
 
-.signup label {
+.login label {
   margin: 5% 0 5%;
 }
 
@@ -639,7 +231,6 @@ label {
   outline: none;
   border-radius: 4px;
   font-size: 1.5rem;
-  color:#454444;
 }
 /* OR separator */
 #or {
@@ -709,62 +300,60 @@ label {
 }
 
 
-/*Login*/
-#Login{
+/*Register*/
+#register{
   font-size: medium;
   color: var(--old-rose);
-  background-color: rgb(247, 150, 150);
+  background-color: #eee;
   cursor: pointer;
-  margin-top: 100px;
-  margin-bottom: 20px;
+  margin-top: 60px;
+  margin-bottom: 60px;
 }
 
-#login:hover {
+#register:hover {
   background-color: white;
   background-color: var(--old-rose);
 }
 
-.login{
+.register {
   background: #eee;
   width:100%;
   font-family: var(--ff-poppins);
   border-radius: 90% / 10%;
-  transform: translateY(4%);
+  transform: translateY(0%);
   transition: 0.8s ease-in-out;
   margin-bottom: 45px;
   padding-bottom: 45px;
-  height: fit-content;
 }
-#login{
+#register{
   color: var(--old-rose);
-  
 }
-#login:hover {
+#register:hover {
   color: white;
   background-color: var(--old-rose);
 }
 
 
-.login label {
+.register label {
   color: var(--old-rose);
   margin-top: 1rem;
   transform: scale(0.6);
 }
 
-.login label:hover {
+.register label:hover {
   color: #000000;
 }
 
-#chk:checked ~ .login {
-  transform: translateY(-69%);
+#chk:checked ~ .register {
+  transform: translateY(-60%);
 }
 
-#chk:checked ~ .login label {
+#chk:checked ~ .register label {
   transform: scale(1);
   /* margin: 5% 0 5%; */
 }
 
-#chk:checked ~ .signup label {
+#chk:checked ~ .login label {
   transform: scale(0.6);
   margin: 5% 0 5%;
 }
@@ -773,7 +362,7 @@ label {
   width: 95%;
   height: 40px;
   margin: 12px auto 10%;
-  color:rgb(247, 150, 150);
+  color: #fff;
   background: transparent;
   font-size: 1.5rem;
   font-weight: bold;
@@ -832,19 +421,14 @@ label {
   text-align: center;
 }
 
-.forget-password .loginButton {
+.forget-password {
   font-size: small;
   text-align: center;
   margin: -20px 0 10px;
-  color: rgb(247, 150, 150);
+  color: white;
   font-weight: bold;
 }
 
-#forgot_password_link{
-  color: rgb(247, 150, 150);
-  text-decoration: none;
-}
-
 .forget-password a {
   color: white;
   text-decoration: underline;
@@ -870,19 +454,16 @@ label {
   }
 
   .main {
-    width: 100%;
-    
+    width: 80%;
+    height:500px;
   }
   .register{
-     /* width: 100%;
-	margin-top: -30px;
-    margin-left: 50px;
+    width: 100%;
+	  margin-top: -30px;
+    margin-left: 0%;
     padding-left: 0%;
     margin-bottom: 0px;
-    padding-bottom: 45px; */
-    text-align: center; 
-    
-   
+    padding-bottom: 45px;
   }
   .register .form label{
     margin-top:0px;
@@ -891,11 +472,20 @@ label {
     margin-top: 10px;
     margin-bottom: 10px;
   }
-  /* #register{
+  #register{
     margin-top: 20px;
     margin-bottom: 25px;
-  } */
 }
+}
+/* .register1{
+  margin-left: 33%;
+} */
+
+.register_link{
+  text-align: center;
+  color: rgb(247, 150, 150);
+  margin-bottom: 10px;
+  }
 /* .register1{
   margin-left: 33%;
 } */
@@ -963,18 +553,10 @@ label {
 	}
 	.form {
 		gap:0;
-    padding:10px;
 	}
-  .register{
-    width: 100%;
-    margin-left: 0%;
-    padding-left: 0%;
-    margin-bottom: 0px;
-    padding-bottom: 45px;
-  }
-  .main {
-    padding: 16px;
-  }
+	#register{
+		margin-top: 1px;
+	}
 	/* #or{
 		margin-top: -10px;
 	} */
@@ -985,8 +567,7 @@ label {
 
 @media (max-width: 480px) {
   .main {
-    padding: 6px;
-    width:300px;
+    padding: 0px;
   }
   .input,
   .form button {
@@ -1011,36 +592,38 @@ body.dark-mode {
   color: #ffffff;
 }
 
-.note h1.dark-mode{
+.dark-mode .main{
+  background-color: var(--old-rose_1);
+
+}
+.dark-mode .note h1{
   color: #e6e6e6;
+  color: var(--old-rose_1);
 }
-.note h2.dark-mode{
+.dark-mode.note h2{
   color: #b6b6b6;
 }
-.navbar.dark-mode{
+.dark-mode.navbar{
   background-color: #1e1c1c;
 }
-.main.dark-mode{
+.dark-mode.main{
   box-shadow: 0 0 20px rgba(230, 230, 230, 0.2);
   background-color: hsl(0, 0%, 16%);
 }
-#login label .dark-mode{
+.dark-mode#login label {
   color:#e6e6e6;
 }
-#login.dark-mode{
+.dark-mode#login{
   background-color: #373737;
 }
 #login.dark-mode:hover{
   color: var(--old-rose);
 }
-.dark-mode .register{
-  background:#e0dede;
-  background-color: #e0dede;
-}
+
 .register input.dark-mode{
   background-color: #c3c3c3;
 }
-#register.dark-mode{
+.dark-mode#register{
   background-color: #373737;
   color: #ededed;
 }
@@ -1168,56 +751,88 @@ body.dark-mode {
   transition: color 0.3s ease;
 }
 
+.switch-container {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 30px;
+  right: -4px;
+  top: 15px;
+}
 
-@media (min-width: 320px) {
-  .navbar-list {
-    flex-direction: column;
-  }
+/* Hidden Checkbox */
+.switch-checkbox {
+  display: none;
 }
-@media (min-width: 481px) {
-  .navbar-list {
-    flex-direction: column;
-  }
+
+/* Switch Label */
+.switch-label {
+  position: relative;
+  width: 45px;
+  height: 30px;
+  background-color: #ccc;
+  border-radius: 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 5px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.5s ease;
 }
 
-@media (min-width: 641px) {
-  .navbar-list {
-    flex-direction: column;
-  }
+.switch-label .sun-icon,
+.switch-label .moon-icon {
+  font-size: 19px;
+  position: absolute;
+  cursor: pointer;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: opacity 0.5s ease, color 0.5s ease;
 }
-@media (min-width: 961px) {
-  .navbar-list {
-    flex-direction: row;
-  }
+
+.switch-label .sun-icon {
+  color: #f39c12;
+  left: 2px;
 }
-@media (min-width: 1025px) {
-  .navbar-list {
-    flex-direction: row;
-  }
+
+.switch-label .moon-icon {
+  color: #bdc3c7;
+  opacity: 0;
+  left: 5px;
 }
-@media (min-width: 1281px) {
-  .navbar-list {
-    flex-direction: row;
-  }
+
+/* Switch Button */
+.switch-button {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 25px;
+  height: 25px;
+  background-color: #fff;
+  border-radius: 50%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  transition: transform 0.5s ease, background-color 0.5s ease;
+}
+
+/* Checkbox Checked State */
+.switch-checkbox:checked+.switch-label {
+  background-color: #34495e;
+}
+
+.switch-checkbox:checked+.switch-label .sun-icon {
+  opacity: 0;
 }
-@media (max-width: 992px) {
-  .switch-container {
-    /* right: -20px; */
-    bottom: 20px;
-    /* right: 20px; */
-  }}
 
-  .remember-me-label {
-    font-size: 14px;
-    display: inline-flex;
-    align-items: center;
+.switch-checkbox:checked+.switch-label .moon-icon {
+  opacity: 1;
 }
 
-.remember-me-label input {
-    margin-right: 8px;
-    /* Adjusted margin */
-    margin-top: 1px;
-    /* Added margin-top for better alignment */
+.switch-checkbox:checked+.switch-label .switch-button {
+  transform: translateX(13px);
+  /* background-color: #34495e; */
 }
 
 footer {
diff --git a/assets/css/style.css b/assets/css/style.css
index 61c271b0..c663f80a 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -2,6 +2,23 @@
   padding: 0px;
 }
 
+::-webkit-scrollbar-track {
+  background: var(--grey-white);
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(
+    to bottom,
+    hsl(357, 37%, 62%),
+    hsl(304, 14%, 46%)
+  );
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(357, 37%, 62%);
+}
+
 .container1 {
   padding: 70px 100px;
   background-color: var(--seashell);
@@ -518,9 +535,6 @@ body {
   content: url("./../images/new_logo_banner_light.png");
 }
 
-.logopic-mobile{
-  display:none;
-}
 .nav-toggle-btn {
   font-size: 40px;
   color: var(--charcoal);
@@ -549,8 +563,8 @@ body {
   width: 100%;
   background-color: var(--white);
   padding-inline: 15px;
-  max-height: 90vh !important;
-  overflow: visible;
+  max-height: 0;
+  overflow: hidden;
   visibility: hidden;
   transition: 0.25s var(--cubic-out);
 }
@@ -893,7 +907,7 @@ body {
 
 .benefits .grid-list {
   display: grid;
-  grid-template-columns: repeat(1, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   justify-content: center;
   align-items: center;
@@ -932,11 +946,6 @@ body {
   width: 260px;
 }
 
-
-.benefits-card:hover{
-  background-color: rgb(228, 162, 162);
-}
-
 .benefits-card::before,
 .benefits-card::after {
   bottom: 0;
@@ -990,25 +999,14 @@ body {
 
 }
 
+
 .benefits-card .btn-link {
   margin-block-start: 15px;
-  color: rgb(160, 78, 78);
-}
-
-.benefits-card .btn-link .readmore-anim{
-  color: rgb(160, 78, 78);
+  color: rgb(214, 141, 141);
 }
 
-.benefits-card:hover .card-text,
-.benefits-card:hover .card-title,
-.benefits-card:hover .btn-link,
-.benefits-card:hover .btn-link .readmore-anim {
-  color: rgb(51, 51, 51); 
-}
-
-.benefits-card .btn-link:hover,
-.benefits-card .btn-link .readmore-anim:hover {
-  color: rgb(3, 3, 3);
+.benefits-card .btn-link:hover {
+  color: rgb(205, 168, 168);
 }
 
 .canvas:hover{
@@ -1627,14 +1625,6 @@ footer {
 .foot-middle {
   font-size: 1.6rem;
   text-align: center;
-  display: flex;
-  flex-direction: column;
-}
-#quicklinks{
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  width: auto;
 }
 
 .foot-quick :hover {
@@ -2184,7 +2174,15 @@ input[type="submit"]:hover {
 }
 
 @media (max-width: 992px) {
-  .hero .container{
+  .switch-container {
+    /* right: -20px; */
+    bottom: 20px;
+    transform: translateY(-25px) !important;
+    right: 10px !important;
+    /* right: 20px; */
+  }
+
+  .hero .container {
     gap: 3rem;
     justify-content: center;
   }
@@ -2568,7 +2566,7 @@ body.dark-mode {
 }
 
 .dark-mode .form {
-  background-color: #333;
+  /* background-color: #333; */
   color: #fff;
 }
 
@@ -2582,7 +2580,6 @@ body.dark-mode {
 }
 
 .dark-mode .container {
-  background-color: #333;
   color: #fff;
   padding-left: 4rem;
   padding-right: 1rem;
@@ -2628,9 +2625,9 @@ body.dark-mode {
 }
 
 /* Dark Mode Switch */
-.dark-mode .switch-container{
-  right:-4px;
-  top: 0;
+.dark-mode .switch-container {
+  right: -4px;
+  top: 5px;
 }
 
 /**
@@ -2675,6 +2672,7 @@ body.dark-mode .navbar-link:hover::after {
 
 footer {
   position: relative;
+  top: 140px;
 }
 
 #back-to-top-container {
@@ -2714,9 +2712,14 @@ footer {
 
 /* Switch Container */
 .switch-container {
+  position: absolute;
+  transform: translate(-50%, -50%);
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-top: 30px;
+  right: -4px;
+  top: 15px;
 }
 
 /* Hidden Checkbox */
@@ -2732,7 +2735,6 @@ footer {
   background-color: #ccc;
   border-radius: 20px;
   cursor: pointer;
-  margin-right:30px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2793,78 +2795,15 @@ footer {
   /* background-color: #34495e; */
 }
 
-/*Navbar responsive styles */
-
-.switch-toggle-container{
-  display: none;
-}
-
-
-@media screen and (max-width: 989px) {
-  .switch-container-desktop{
-    display: none;
-  }
+@media screen and (max-width: 900px) {
   .faq-container {
     width: 100%;
   }
-  .header{
-    position: relative;
-    top:0;
-    left:0;
-    right: 0;
-    padding: .9em;
-    width: 90%;
-    margin-inline: auto;
-    margin-top: 3em;
-    border-radius:10px;
-  }
-  .header.active{
-    top: 0;
-    left: 0;
-    width: 100%;
-    padding-inline: 10%;
-    border-radius: 0;
-  }
-  .switch-container{
-    position: static;
-    margin:0;
-    transform:translate(0);
-  }
-  .switch-toggle-container{
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    align-items: center;
-  }
-  .mobile-container-styles{
-    padding: 0;
-  }
-  .light-mode{
-    height: auto !important;
-    overflow-x: visible;
-    contain: paint;
-  }
-  html{
-    max-width: 100lvw !important;
-  }
-  .logopic{
-    display: none;
-  }
-  .logopic-mobile{
-    width: 35%;
-    display: block;
-  }
-
 }
 
-@media only screen and (min-width:800px){
-  .logopic-mobile{
-    width: 15%;
-  }
-}
-@media only screen and (min-width:600px){
-  .logopic-mobile{
-    width: 20%;
+@media (min-width: 320px) {
+  .navbar-list {
+    flex-direction: column;
   }
   
 }
@@ -2873,6 +2812,9 @@ footer {
   .navbar-list {
     flex-direction: column;
   }
+  .switch-container{
+    transform: translateY(-20px);
+  }
 }
 
 @media (min-width: 641px) {
@@ -2898,17 +2840,7 @@ footer {
   .navbar-list {
     flex-direction: row;
   }
-
-  #back-to-top-container {
-    position: fixed;
-    top: 78%;
-    right: 2.8%;
-    /* Changed left to right */
-  }
 }
-
-
-
 @media (min-width: 1281px) {
   .navbar-list {
     flex-direction: row;
@@ -3016,12 +2948,8 @@ footer {
   }
 
 }
-@media (max-width: 420px) {
-  .navbar-list {
-    flex-direction: column;
-  }
-}
- /* recommendation system */
+
+/* recommendation system */
 .container00 {
   max-width: 900px;
   max-height: 800px;
@@ -3235,7 +3163,13 @@ body.dark-mode .h3 {
 }
 
 
+/* Media Queries for Recommended Books section */
 
+@media only screen and (max-width:574px){
+  .switch-container{
+    transform: translateY(-10px) !important;
+  }
+}
 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {
   .container00 {
@@ -3267,8 +3201,16 @@ body.dark-mode .h3 {
   }
 }
 
-
-
+@media only screen and (max-width: 574px)  {
+.switch-container{
+  transform: translateY(-10px) !important;
+}
+}
+@media only screen and (min-width:574px) and( max-width:600px){
+  .switch-container{
+    transform: translateY(-25px) !important;
+  }
+}
 /* Devices between 600px and 768px */
 @media only screen and (min-width: 600px) and (max-width: 767px) {
   .container00 {
@@ -3381,16 +3323,6 @@ body.dark-mode .h3 {
 }
 
 /* media queries for chat widget  */
-@media screen and (min-width:600px){
-  .bp-widget-web.bp-widget-web{
-    right: calc(4.95% - 23px) ;
-  }
-}
-@media screen and (min-width:760px){
-  .bp-widget-web.bp-widget-web{
-    right: calc(2.8% - 23px) ;
-  }
-}
 
 @media screen and (min-width:960px){
  .bp-widget-web.bp-widget-web{
@@ -3409,4 +3341,4 @@ body.dark-mode .h3 {
   .bp-widget-web.bp-widget-web{
     right: calc(4.95% - 23px) ;
   }
-}
+}
\ No newline at end of file
diff --git a/assets/html/login.html b/assets/html/login.html
index 54e9affd..1b7b4c12 100644
--- a/assets/html/login.html
+++ b/assets/html/login.html
@@ -13,6 +13,7 @@
   <link rel="manifest" href="../favicon_package_v0.16/site.webmanifest">
   <link rel="mask-icon" href="../favicon_package_v0.16/safari-pinned-tab.svg" color="#5bbad5">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
   <script src="../js/script.js" defer></script>
   
@@ -30,141 +31,132 @@
   <title>Login / SignUp</title>
 </head>
 
-<body><header class="header header-anim" data-header>
-
-  <div class="container">
+<body>
+
+  <div class="rate-us-modal-wrapper">
+    <div class="rate-us-modal">
+      <a onclick="closeRateUsModal()" class="home_button"></a>
+      <h1 class="rating_heading">Rate Us</h1>
+      <div class="star_rating">
+        <p>How was your experience?</p>
+        <button class="star">&#9734;</button>
+        <button class="star">&#9734;</button>
+        <button class="star">&#9734;</button>
+        <button class="star">&#9734;</button>
+        <button class="star">&#9734;</button>
+        <p class="current_rating"> 0 of 5</p>
+      </div>
+      <button id="submit_rating" class="submit_button">Submit Rating</button>
+      <p class="thank_you_message">Thank you for rating us!</p>
+    </div>
+  </div>
+  
+  <header class="header header-anim" data-header>
+      
+    <div class="container">
 
-    <nav class="navbar" data-navbar>
-      <a href="../../index.html#home" class="logo" style="display:flex;">
+      <nav class="navbar" data-navbar>
+        <a href="SwapReads\index.html" class="logo" style="display:flex;">
         <img src="../images/new_logo_banner_dark.png" alt="" class="logopic" style=" width:0.1px;opacity: 0;" />
-      </a>
-
-      <ul class="navbar-list">
-        <a href="../../index.html" class="logo" style="display:flex;">
-          <img src="../images/new_logo_banner_dark.png" class="logopic" style=" width: 200px;">
         </a>
-        <li class="navbar-item">
-          <a href="../../index.html#home" class="navbar-link" data-nav-link><i
-              class="ri-home-fill"></i> Home</a>
-        </li>
-
-        <li class="navbar-item">
-          <a href="../../index.html#benefits" class="navbar-link" data-nav-link><i
-              class="ri-bar-chart-fill"></i> Benefits</a>
-        </li>
-
-        <li class="navbar-item">
-          <a href="../../index.html#genre" class="navbar-link" data-nav-link><i
-              class="ri-bar-chart-fill"></i> Genre</a>
-        </li>
-
-        <li class="navbar-item">
-          <a href="../../index.html#contact" class="navbar-link" data-nav-link><i
-              class="ri-customer-service-2-fill"></i> Contact</a>
-        </li>
-
-        <li class="navbar-item">
-          <a href="#" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
-        </li>
-        <li class="navbar-item" id="logout-r">
-          <a href="../../index.html" class="navbar-link">Logout</a>
-        </li>
-
-        <li class="navbar-item dropdown" id="more-dropdown">
-          <a href="#" class="navbar-link" id="more-link">More
-            <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em"
-              viewBox="0 0 24 24">
-              <path fill="currentcolor" d="m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z" />
-            </svg></a>
-          <div class="dropdown-menu" id="dropdown-menu">
-
-            <ul class="dropdown-menu-list">
-              <li class="dropdown-menu-item">
-                <a href="#chapters" onclick="lenis.scrollTo('#chapters')" class="navbar-link" data-nav-link><i
-                    class="ri-medal-fill"></i> Literary Realms</a>
-              </li>
-              <li class="dropdown-menu-item">
-                <a href="#pricing" onclick="lenis.scrollTo('#pricing')" class="navbar-link" data-nav-link><i
-                    class="ri-price-tag-3-fill"></i> Pricing</a>
-              </li>
-              <li class="dropdown-menu-item">
-                <a href="./assets/html/booklistswap.html" class="navbar-link">Booklist for Swapping</a>
-              </li>
-              <li class="dropdown-menu-item">
-                <a href="./assets/html/book_recommend.html" class="navbar-link" data-nav-link>
-                  <i class="ri-customer-service-2-fill"></i> Book Recommendation
-                </a>
-              </li>
-              <li class="dropdown-menu-item">
-                <a href="./assets/html/freeBooks.html" onclick="lenis.scrollTo('#E-books')" class="navbar-link"
-                  data-nav-link><i class="ri-price-tag-3-fill"></i>Free E-books</a>
-              </li>
-              <li class="dropdown-menu-item">
-                <a href="./assets/html/about.html" class="navbar-link">About</a>
-              </li>
-            </ul>
-          </div>
-        </li>
 
-        <!-- Google Translate Element -->
-        <li class="navbar-item">
-          <div id="google_element"></div>
-        </li>
-      </ul>
-    </nav>
-  </div>
+        <ul class="navbar-list">
+          <a href="../../index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
+            <img src="../images/new_logo_banner_dark.png" class="logopic" style=" width: 200px;">
+          </a>
+          <li class="navbar-item">
+            <a href="../../index.html#home" class="navbar-link" data-nav-link><i
+                class="ri-home-fill"></i> Home</a>
+          </li>
+
+          <li class="navbar-item">
+            <a href="../../index.html#benefits" class="navbar-link" data-nav-link><i
+                class="ri-bar-chart-fill"></i> Benefits</a>
+          </li>
+
+          <li class="navbar-item">
+            <a href="../../index.html#genre" onclick="lenis.scrollTo('#genre')" class="navbar-link" data-nav-link><i
+                class="ri-bar-chart-fill"></i> Genre</a>
+          </li>
+
+          <li class="navbar-item">
+            <a href="../../index.html#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
+                class="ri-customer-service-2-fill"></i> Contact</a>
+          </li>
+
+          <li class="navbar-item">
+            <a href="#" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
+          </li>
+          <li class="navbar-item" id="login-signup-link">
+            <a href="./login.html" class="navbar-link">Login/Signup</a>
+          </li>
+
+
+          <li class="navbar-item dropdown" id="more-dropdown">
+            <a href="#" class="navbar-link" id="more-link">More
+              <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em"
+                viewBox="0 0 24 24">
+                <path fill="currentcolor" d="m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z" />
+              </svg></a>
+            <div class="dropdown-menu" id="dropdown-menu">
+
+              <ul class="dropdown-menu-list">
+                <li class="dropdown-menu-item">
+                  <a href="index.html#chapters" onclick="lenis.scrollTo('#chapters')" class="navbar-link" data-nav-link><i class="ri-medal-fill"></i> Literary Realms</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="index.html#pricing" onclick="lenis.scrollTo('#pricing')" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i> Pricing</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="./booklistswap.html" class="navbar-link">Booklist for Swapping</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="./book_recommend.html" class="navbar-link" data-nav-link>
+                    <i class="ri-customer-service-2-fill"></i> Book Recommendation
+                  </a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="./freeBooks.html" onclick="lenis.scrollTo('#E-books')" class="navbar-link"
+                    data-nav-link><i class="ri-price-tag-3-fill"></i>Free E-books</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="./about.html" class="navbar-link">About</a>
+                </li>
+              </ul>
+            </div>
+          </li>
 
-  <script src="http://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
-  <script>
-    function loadGoogleTranslate() {
-      new google.translate.TranslateElement({
-        pageLanguage: 'en'
-      }, 'google_element');
-    }
-  </script>
-  <div class="switch-container">
-    <input type="checkbox" id="switch" class="switch-checkbox">
-    <label for="switch" class="switch-label">
-      <div class="switch-button">
-        <span class="material-icons sun-icon"></span>
-        <span class="material-icons moon-icon"></span>
-      </div>
-    </label>
-  </div>
+          <!-- Google Translate Element -->
+          <li class="navbar-item">
+            <div id="google_element"></div>
+          </li>
+        </ul>
+      </nav>
+    </div>
 
-  </li>
-  </ul>
-  </nav>
+    </script>
+    <div class="switch-container">
+      <input type="checkbox" id="switch" class="switch-checkbox">
+      <label for="switch" class="switch-label">
+        <div class="switch-button">
+          <span class="material-icons sun-icon">wb_sunny</span>
+          <span class="material-icons moon-icon">brightness_2</span>
+        </div>
+      </label>
+    </div>
 
-  <button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler>
-    <ion-icon name="menu-outline" aria-hidden="true" class="open"></ion-icon>
+    </li>
+    </ul>
+    </nav>
 
-    <ion-icon name="close-outline" aria-hidden="true" class="close"></ion-icon>
-  </button>
+    <button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler>
+      <ion-icon name="menu-outline" aria-hidden="true" class="open"></ion-icon>
 
-  </div>
-</header>
-
-
-    <!-- Rate Us Modal Pop up -->
-    <div class="rate-us-modal-wrapper">
-      <div class="rate-us-modal">
-        <a onclick="closeRateUsModal()" class="home_button"></a>
-        <h1 class="rating_heading">Rate Us</h1>
-        <div class="star_rating">
-          <p>How was your experience?</p>
-          <button class="star">&#9734;</button>
-          <button class="star">&#9734;</button>
-          <button class="star">&#9734;</button>
-          <button class="star">&#9734;</button>
-          <button class="star">&#9734;</button>
-          <p class="current_rating"> 0 of 5</p>
-        </div>
-        <button id="submit_rating" class="submit_button">Submit Rating</button>
-        <p class="thank_you_message">Thank you for rating us!</p>
-      </div>
-    </div>
+      <ion-icon name="close-outline" aria-hidden="true" class="close"></ion-icon>
+    </button>
 
+    </div>
+  </header>
 
   <div class="note">
     <h1>Welcome to SwapReads</h1>
@@ -185,30 +177,25 @@ <h2>Join us by creating an account or log in if you already have an account.</h2
             <img src="../images/eye-close.png" alt="Eye close-image" id="eyeicon-login">
           </div>
           <button type="submit" name="Login" id="login">Submit</button>
-          <div class="forget-password">
+          <p class="forget-password">
             Forgot Password?
-            <a href="forgot-pass.html" id="forgot_password_link" >Reset Here</a>
-          </div>
-          
+            <a href="forgot-pass.html" id="forgot_password_link">Reset Here</a>
+          </p>
           <div id="or">Or</div>
           <button id="google-sign-in"> Sign In with Google </button>
-          <div class="register">
-            <!-- <div class="register1">New to SwapReads?</div> -->
-            <a href="mylogin.html" class="register_link">Register Here</a>
-          </div>
         </form>
       </div>
 
-      <!-- <div class="register">
+      <div class="register">
         <form class="form" id="register-form">
           <label for="chk" aria-hidden="true">Create Account</label>
           <input class="input" type="email" name="email" id="email" placeholder="Email" required />
           <div class="input-box">
             <input class="input" type="password" name="pswd" id="password" placeholder="Password" required />
             <img src="../images/eye-close.png" alt="Eye close-image" id="eyeicon">
-          </div> -->
+          </div>
 
-          <!-- <div>
+          <div>
             <div class="progress">
               <div id="password-strength" class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
             </div>
@@ -218,11 +205,11 @@ <h2>Join us by creating an account or log in if you already have an account.</h2
               <li><span class="one-special-char"><i class="fas fa-circle" aria-hidden="true"></i>&nbsp;Special Character (!@#$%^&*)</span></li>
               <li><span class="eight-character"><i class="fas fa-circle" aria-hidden="true"></i>&nbsp;At least 8 Character</span></li>
             </ul>
-          </div> -->
+          </div>
 
-          <!-- <button type="submit" name="register" id="register">Register</button>
+          <button type="submit" name="register" id="register">Register</button>
           <div id="or">Or</div>
-          <button id="google-signup"> Sign Up with Google </button> -->
+          <button id="google-signup"> Sign Up with Google </button>
         </form>
       </div>
     </div>
@@ -307,9 +294,6 @@ <h2>Quick Links</h2>
             color: #ff0001;
             /* Change to YouTube color on hover */
           }
-          .forget-password {
-            text-align: center;
-        }
         </style>
 
         <div class="icons">
@@ -357,16 +341,30 @@ <h2>Quick Links</h2>
   </footer> -->
 
   <script>
+    let eyeIcon = document.getElementById("eyeicon");
+    let password = document.getElementById("password");
     let eyeIconLogin = document.getElementById("eyeicon-login");
     let passwordLogin = document.getElementById("login_password");
-    let eyeIcon = document.getElementById("eyeicon");
-    let password = document.querySelector("#password");
     let passwordStrength = document.getElementById("password-strength");
     let lowUpperCase = document.querySelector(".low-upper-case i");
     let number = document.querySelector(".one-number i");
     let specialChar = document.querySelector(".one-special-char i");
     let eightChar = document.querySelector(".eight-character i");
 
+    // Set the password field to type "password" by default
+    password.type = "password";
+    eyeIcon.src = "../images/eye-close.png"; // Set the initial eye icon as closed
+
+    eyeIcon.onclick = function () {
+        if (password.type === "password") {
+            password.type = "text";
+            eyeIcon.src = "../images/eye-open.png";
+        } else {
+            password.type = "password";
+            eyeIcon.src = "../images/eye-close.png";
+        }
+    };
+
     passwordLogin.type = "password";
     eyeIconLogin.src = "../images/eye-close.png"; // Set the initial eye icon as closed
 
@@ -466,7 +464,69 @@ <h2>Quick Links</h2>
         });
     }
 }
+
+function toggleDarkMode() {
+  const isDarkMode = isDarkModePreferred();
+  setDarkModePreference(!isDarkMode);
+  applyDarkModePreference();
+}
+
+// Function to apply dark mode preference
+function applyDarkModePreference() {
+  const isDarkMode = isDarkModePreferred();
+  if (isDarkMode) {
+    document.body.classList.add('dark-mode');
+    document.getElementById('theme-icon').src = './assets/images/icons8-sun.svg';
+  } else {
+    document.body.classList.remove('dark-mode');
+    document.getElementById('theme-icon').src = './assets/images/moon_solid.svg';
+  }
+}
+
+// Function to set dark mode preference
+document.addEventListener('DOMContentLoaded', () => {
+  const currentTheme = localStorage.getItem('theme');
+  const switchCheckbox = document.getElementById('switch'); // Define switchCheckbox here
+  const starRating = document.querySelector('.star_rating');
+  const thankYouMessage = document.querySelector(".thank_you_message");
+  if (switchCheckbox) { // Check if switchCheckbox is not null
+    function applyDarkModeStyles() {
+      document.body.classList.remove('light-mode');
+      document.body.classList.add('dark-mode');
+      starRating.style.backgroundColor = '#2d2828';
+      thankYouMessage.style.backgroundColor = '#2d2828';
+    }
+
+    function applyLightModeStyles() {
+      document.body.classList.remove('dark-mode');
+      document.body.classList.add('light-mode');
+      starRating.style.backgroundColor = 'white';
+      thankYouMessage.style.backgroundColor = 'white';
+    }
+
+    if (currentTheme) {
+      if (currentTheme === 'dark-mode') {
+        applyDarkModeStyles();
+        switchCheckbox.checked = true;
+      } else {
+        applyLightModeStyles();
+      }
+    }
+
+    switchCheckbox.addEventListener('change', () => {
+      if (switchCheckbox.checked) {
+        applyDarkModeStyles();
+        localStorage.setItem('theme', 'dark-mode');
+      } else {
+        applyLightModeStyles();
+        localStorage.setItem('theme', 'light-mode');
+      }
+      applyDarkModePreference(); // Call the applyDarkModePreference function after updating the dark mode preference
+    });
+  } else {
+    console.error("Switch checkbox not found!"); // Log an error if switchCheckbox is null
+  }
+});
   </script>
-   <script src="../js/script.js" defer></script>
 </body>
-</html>
\ No newline at end of file
+</html>