From 8e67fbb927345079e6291421aab18cca977cf1a5 Mon Sep 17 00:00:00 2001
From: Astha <astharaghuwanshiofficial@gmail.com>
Date: Sun, 26 May 2024 00:05:17 +0530
Subject: [PATCH] Added navbar to the login page # Description Added navbar to
 the login page Fixes:  #830

## Type of change

<!----Please delete options that are not relevant.And in order to tick the check box just but x inside them for example [x] like this----->

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] This change requires a documentation update

# Checklist:

<!----Please delete options that are not relevant.And in order to tick the check box just but x inside them for example [x] like this----->
- [x] I have made this from my own
- [ ] I have taken help from some online resourses
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings

# ATTACH SCREEN-SHOTS / DEPLOYMENT LINK
Before:
After:
---
 assets/css/login.css   | 462 ++++++++++++++++++++++++++++++++++++++++-
 assets/css/style.css   |   1 -
 assets/html/index.html |   6 +-
 assets/html/login.html |  75 ++++++-
 4 files changed, 527 insertions(+), 17 deletions(-)

diff --git a/assets/css/login.css b/assets/css/login.css
index a6bbf70a..4629febe 100644
--- a/assets/css/login.css
+++ b/assets/css/login.css
@@ -17,7 +17,26 @@
   --white: hsl(0, 0%, 100%);
   --black: rgb(0, 0, 0);
 }
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-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%);
+}
 body {
   width: 100%;
   height: 100%;
@@ -39,26 +58,336 @@ p {
 }
 
 .navbar {
-  width: 100%;
+  width: 80%;
+  height: 6rem;
+  align-self: center;
+  display: inline-block;
   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: 4rem;
+  font-size: 1rem;
   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;
+
+}
+
+.navbar-link {
+  position: relative;
+  color: var(--charcoal);
+  padding: 8px 12px; /* Adjust padding as needed */
+  line-height: 2;
+  text-decoration: none;
+
+  transition: var(--transition-1);
+}
+.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;
+
+}
+
+
+/*-----------------------------------*\
+  #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:visited {color: var(--old-rose);} /* Visited link    */
+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) {
+  /* Adjustments for smaller screens */
+  .navbar-list {
+    display: flex;
+    flex-direction: column;
+  }
+  .navbar {
+    display: flex;
+    justify-content: center;
+  }
+
+  .star {
+    font-size: 2rem;
+  }
+
+  .rate-us-modal {
+    width: 90%;
+  }
+}
+
+
+
 .fa{
   position: absolute;
   top: 45%;
@@ -109,6 +438,90 @@ p {
 .message {
     color: red;
 } */
+.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%;
+}
+
+.dropdown-item {
+  margin-top: 5px;
+}
+
+.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 */
+}
+
+.navbar-item.dropdown:hover .dropdown-menu {
+  display: block;
+} */
+
+.dropdown-menu {
+  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%;
+}
+
+.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-menu.active {
+  display: block;
+}
+
+.navbar-item.dropdown {
+  position: relative;
+}
 
 .form {
 	display: flex;
@@ -710,3 +1123,42 @@ body.dark-mode {
   color: hsl(357, 37%, 62%);
   transition: color 0.3s ease;
 }
+
+
+@media (min-width: 320px) {
+  .navbar-list {
+    flex-direction: column;
+  }
+}
+@media (min-width: 481px) {
+  .navbar-list {
+    flex-direction: column;
+  }
+}
+
+@media (min-width: 641px) {
+  .navbar-list {
+    flex-direction: column;
+  }
+}
+@media (min-width: 961px) {
+  .navbar-list {
+    flex-direction: row;
+  }
+}
+@media (min-width: 1025px) {
+  .navbar-list {
+    flex-direction: row;
+  }
+}
+@media (min-width: 1281px) {
+  .navbar-list {
+    flex-direction: row;
+  }
+}
+@media (max-width: 992px) {
+  .switch-container {
+    /* right: -20px; */
+    bottom: 20px;
+    /* right: 20px; */
+  }}
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
index 5652d55a..89874d0e 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -709,7 +709,6 @@ background-size: cover;
   position: relative;
 }
 
-
 /*-----------------------------------*\
   #HERO
 \*-----------------------------------*/
diff --git a/assets/html/index.html b/assets/html/index.html
index f5ed46c9..720fbc65 100644
--- a/assets/html/index.html
+++ b/assets/html/index.html
@@ -122,14 +122,14 @@
           </li>
 
           <li class="navbar-item dropdown">
-            <a href="#" class="navbar-link">More <i class="ri-arrow-down-s-line"></i></a>
+            <a href="#" class="navbar-link">More </a>
             <div class="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>
+                  <a href="#chapters" onclick="lenis.scrollTo('#chapters')" class="navbar-link" data-nav-link> 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>
+                  <a href="#pricing" onclick="lenis.scrollTo('#pricing')" class="navbar-link" data-nav-link></i> Pricing</a>
                 </li>
                 <li class="dropdown-menu-item">
                   <a href="../html/addremovebook.html" class="navbar-link">Booklist for Swapping</a>
diff --git a/assets/html/login.html b/assets/html/login.html
index dcd6dbc2..587898c2 100644
--- a/assets/html/login.html
+++ b/assets/html/login.html
@@ -8,6 +8,7 @@
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="../css/login.css" />
   <script type="module" src="../js/loginSignUp.js" defer></script>
+  <script src="../js/rateUsModal.js" defer></script>
 
   <!-- rroushan verma -->
   <script src="../js/signinGoogle.js" defer type="module"></script>
@@ -17,17 +18,75 @@
 
 <body>
   <div class="navbar">
-    <div class="navbar-header">
-      <a href="../../index.html">
-        <img class="close-icon" src="../images/close1.png" alt="Close" />
+    <a href="index.html#home"  class="logo" style="display:flex;">
+      <img src="../images/LogoPicLight.png" alt="" class="logopic" style=" width:0.1px;opacity: 0;" />
       </a>
-    </div>
-    <div class="navbar-collapse collapse">
-      <ul class="nav navbar-nav navbar-right">
-        <li><a href="#" id="logout" style="display: none">Log Out</a></li>
+
+      <ul class="navbar-list">
+        <a href="index.html#home">
+
+        <img src="../images/logo_whitebg.png" class="logopic" style=" width: 150px;">
+
+        <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 dropdown">
+          <a href="#" class="navbar-link">More <i class="ri-arrow-down-s-line"></i></a>
+          <div class="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="../html/addremovebook.html" class="navbar-link">Booklist for Swapping</a>
+              </li>
+            </ul>
+          </div>
+
+       
       </ul>
-    </div>
   </div>
+    <!-- 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>
+
 
   <div class="note">
     <h1>Welcome to SwapReads</h1>