From 4079f5b147c0e021a5a39cbd527f47acbae04085 Mon Sep 17 00:00:00 2001
From: mdfaizaanalam <faizanalam327@gmail.com>
Date: Tue, 15 Oct 2024 15:59:30 +0530
Subject: [PATCH] Update

---
 assets/html/book_recommend.html | 330 +++++++++++++++++++++-----------
 1 file changed, 214 insertions(+), 116 deletions(-)

diff --git a/assets/html/book_recommend.html b/assets/html/book_recommend.html
index da9879c0..238ec820 100644
--- a/assets/html/book_recommend.html
+++ b/assets/html/book_recommend.html
@@ -535,94 +535,220 @@
               <li class="navbar-item" id="login-signup-link">
                 <a href="../html/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>
-                      <a href="chat.html" class="navbar-link" style="font-family: sans-serif; color: black; margin-bottom: 5px;">
-                        Community chat
-                    </a>
-                    </li>
-                    
-                    <li class="dropdown-menu-item">
-                      <a href="../html/pricing.html" 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/booklistswap.html" class="navbar-link">Booklist for Swapping</a>
-                    </li>
-                    <li class="dropdown-menu-item">
-                      <a href="../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="../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="../html/read_later.html" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Read Later</a>
-                    </li>
-                    <li class="dropdown-menu-item">
-                      <a href=".../html/ConnReader.html" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Reader Connection</a>
-                    </li>
-                    <li class="dropdown-menu-item">
-                      <a href="../html/about.html" class="navbar-link">About</a>
-                    </li>
-                  </ul>
-                </div>
-              </li>
-              <li>
-              <div class="action">
-                <div class="profile" onclick="menuToggle();">
-                  <img id="profile-avatar" src="../images/avatar1.jpg" />
-                </div>
-                <div class="menu">
-                  <h3>XYZ<br /><span>Book Lover</span></h3>
-                  <ul>
-                    <li>
-                      <img src="../images/user.jpg" /><a href="../../profile.html">My profile</a>
-                    </li>
-                    <li>
-                      <img src="../images/edit profile.jpg" /><a href="../html/profileedit.html">Edit profile</a>
-                    </li>
-                    <li>
-                      <img src="../images/inbox.png" /><a href="#">Inbox</a>
-                    </li>
-                    <li>
-                      <img src="../images/settings.png" /><a href="#">Settings</a>
-                    </li>
-                    <li><img src="../images/help.png" /><a href="#">Help</a></li>
-                    <li>
-                      <img src="../images/logout.png" /><a href="#">Logout</a>
-                    </li>
-                  </ul>
+
+            <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>
+                  <a href="../../chat.html" class="navbar-link" style="font-family: sans-serif; color: white; margin-bottom: 5px;">
+                    Community chat
+                </a>
                 </li>
-                  </div>
-                </ul>
-                  </div>
-                  <script>
-                   document.addEventListener("DOMContentLoaded", () => {
-        const savedAvatar = localStorage.getItem("selectedAvatar");
-        if (savedAvatar) {
-            document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
+                
+                <li class="dropdown-menu-item">
+                  <a href="../html/pricing.html" 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/booklistswap.html" class="navbar-link">Booklist for Swapping</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="../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="../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="../html/read_later.html" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Read Later</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="../html/ConnReader.html" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Reader Connection</a>
+                </li>
+                <li class="dropdown-menu-item">
+                  <a href="../html/about.html" class="navbar-link">About</a>
+                </li>
+              </ul>
+            </div>
+          </li>
+
+          <style>
+            .darkmode{
+                white-space: nowrap;
+                display: inline-block;
+                background-color: none;
+                border: none;
+                text-decoration: none;
+                color: inherit;
+                padding: 0;
+
+                transition: all 0.3s ease;
+                padding-left: 4px;
+                padding-right: 4px;
+                padding-top: 0px;
+                text-decoration: none;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                position: relative;
+                color: var(--charcoal);
+                padding: 8px 12px;
+                line-height: 2;
+                transition: var(--transition-1);
+
+                .container {
+            width: 100%;
         }
-    });
-    
-            
-                    function menuToggle() {
-                        const toggleMenu = document.querySelector(".menu");
-                        toggleMenu.classList.toggle("active");
-                    }
-                </script>
+        .main {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+        }
+        .login {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .input {
+            margin: 10px 0;
+        }
+        .input-box {
+            position: relative;
+        }
+        .input-box img {
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+        }
+        .p1 {
+            margin: 10px;
+            padding: 10px;
+            display: flex;
+            align-items: center;
+        }
+        .social-buttons {
+            display: flex;
+            gap: 10px;
+            justify-content: center;
+        }
+            }
+            .dropdown-menu {
+      display: none;
+  }
+  .dropdown-menu.show {
+      display: block;
+  }
+          </style>
+          
+          <li>
+            <div class="action">
+              <div class="profile" onclick="menuToggle();">
+                <img id="profile-avatar" src="../images/avatar1.jpg" />
+              </div>
+              <div class="menu">
+                <h3>XYZ<br /><span>Book Lover</span></h3>
+                <ul>
+                  <li>
+                    <img src="../images/user.jpg" /><a href="../../profile.html">My profile</a>
+                  </li>
+                  <li>
+                    <img src="../images/edit profile.jpg" /><a href="../html/profileedit.html">Edit profile</a>
+                  </li>
+                  <li>
+                    <img src="../images/inbox.png" /><a href="#">Inbox</a>
+                  </li>
+                  <li>
+                    <img src="../images/settings.png" /><a href="#">Settings</a>
+                  </li>
+                  <li><img src="../images/help.png" /><a href="#">Help</a></li>
+                  <li>
+                    <img src="../images/logout.png" /><a href="#">Logout</a>
+                  </li>
+                </ul>
+              </li>
+                </div>
+              </ul>
+                </div>
+                <script>
+                  document.addEventListener("DOMContentLoaded", function () {
+                      const moreLink = document.getElementById("more-link");
+                      const dropdownMenu = document.getElementById("dropdown-menu");
+              
+                      moreLink.addEventListener("click", function (event) {
+                          event.preventDefault();
+                          dropdownMenu.classList.toggle("show");
+                      });
+                  });
+              </script>
+                <script>
+                  
+                 document.addEventListener("DOMContentLoaded", () => {
+      const savedAvatar = localStorage.getItem("selectedAvatar");
+      if (savedAvatar) {
+          document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
+      }
+  });
+  
+          
+                  function menuToggle() {
+                      const toggleMenu = document.querySelector(".menu");
+                      toggleMenu.classList.toggle("active");
+                  }
+              </script>
+          </ul>
+        </nav>
+        <div id="mobile_View_Menu">
+          <span id="menu_lines"></span>
+         </div>
+      <script>
+          let menu=document.getElementById('mobile_View_Menu')
+          let navbar_con=document.querySelector('.navbar')
+          menu.addEventListener('click',()=>{
+            if(menu.classList.contains('open_menu')){
+              menu.classList.remove('open_menu')
+              navbar_con.classList.add('nav_activated')
+            }
+            else{
+              menu.classList.add('open_menu')
+              navbar_con.classList.remove('nav_activated')
+            }
+          })
+        </script>
+        
+  <script>
+    document.getElementById("more-link").addEventListener("click", function (event) {
+    event.preventDefault();  // Prevent the default behavior of the link
+    const dropdownMenu = document.getElementById("dropdown-menu");
+    dropdownMenu.classList.toggle("active");  // Toggle the visibility of the dropdown menu
+  });
+  </script>
+  
+
+
+
+
+
+
+
+
               <!-- Google Translate Element -->
               <!-- <li class="navbar-item">
                 <div id="google_element"></div>
@@ -637,20 +763,7 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
           <div id="mobile_View_Menu">
             <span id="menu_lines"></span>
            </div>
-        <script>
-            let menu=document.getElementById('mobile_View_Menu')
-            let navbar_con=document.querySelector('.navbar')
-            menu.addEventListener('click',()=>{
-              if(menu.classList.contains('open_menu')){
-                menu.classList.remove('open_menu')
-                navbar_con.classList.add('nav_activated')
-              }
-              else{
-                menu.classList.add('open_menu')
-                navbar_con.classList.remove('nav_activated')
-              }
-            })
-          </script>
+       
         <script src="http://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
         <script>
           function loadGoogleTranslate() {
@@ -687,22 +800,7 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
     
     
         
-        <!-- <div class="switch-toggle-container">
-    
-    
-          window.addEventListener("scroll", onScroll);
-        </script>
-        <div class="switch-toggle-container">
-    
-          <div class="switch-container switch-container-mobile">
-            <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 id="nav-toggle-button">
             <ion-icon name="menu-outline" aria-hidden="true" class="md hydrated open"></ion-icon>