Skip to content

Commit

Permalink
Merge pull request #2534 from venktesh0755/enhance
Browse files Browse the repository at this point in the history 
Button and text color update
  • Loading branch information
@huamanraj
huamanraj authored Jul 18, 2024
2 parents 66e67fc + 0ad527e commit 4528bed
Showing 1 changed file with 142 additions and 101 deletions.
243 changes: 142 additions & 101 deletions assets/html/booklistswap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -372,14 +372,13 @@
<a href="../../index.html" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link><i
class="ri-home-fill"></i> Home</a>
</li>
<li class="navbar-item">
<a href="../html/about.html" class="navbar-link" data-nav-link><i
class="ri-home-fill"></i> About Us </a>
</li>

<li class="navbar-item">
<a href="../../index.html#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link" data-nav-link><i
class="ri-bar-chart-fill"></i> Benefits</a>
<a href="../html/about.html" class="navbar-link" data-nav-link><i class="ri-home-fill"></i> About Us </a>
</li>

<li class="navbar-item">
<a href="../../index.html#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link"
data-nav-link><i class="ri-bar-chart-fill"></i> Benefits</a>
</li>

<li class="navbar-item">
Expand All @@ -390,21 +389,22 @@
<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="../../index.html#faq" onclick="lenis.scrollTo('#faqq')" class="navbar-link" data-nav-link>
<i class="ri-questionnaire-fill"></i> FAQ
</a>
</li>
<li class="navbar-item">
<a href="../../index.html#faq" onclick="lenis.scrollTo('#faqq')" class="navbar-link" data-nav-link>
<i class="ri-questionnaire-fill"></i> FAQ
</a>
</li>

<li class="navbar-item">
<a href="../../index.html#rateus" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a></li>

<a href="../../index.html#rateus" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
</li>

<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"
Expand All @@ -415,14 +415,15 @@

<ul class="dropdown-menu-list">
<li>
<a href="chat.html" class="navbar-link" style="font-family: sans-serif; color: black; margin-bottom: 5px;">
<a href="chat.html" class="navbar-link"
style="font-family: sans-serif; color: black; margin-bottom: 5px;">
Community chat
</a>
</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>
<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>
Expand All @@ -437,10 +438,12 @@
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>
<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>
<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>
Expand All @@ -449,76 +452,76 @@
</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>
</div>
</ul>
<div class="action">
<div class="profile" onclick="menuToggle();">
<img id="profile-avatar" src="../images/avatar1.jpg" />
</div>
<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>
<!-- Google Translate Element -->
<!-- <li class="navbar-item">
<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", () => {
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>
<!-- Google Translate Element -->
<!-- <li class="navbar-item">
<div id="google_element"></div>
</li> -->
</ul>
<!-- <div class="hamburger">
</ul>
<!-- <div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div> -->
</nav>
<div id="mobile_View_Menu">
<span id="menu_lines"></span>
</div>
</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>
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() {
Expand Down Expand Up @@ -549,12 +552,12 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
// }


window.addEventListener("scroll", onScroll);
</script>
window.addEventListener("scroll", onScroll);
</script>





<!-- <div class="switch-toggle-container">
Expand All @@ -572,28 +575,28 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
</label>
</div> -->

<!-- <button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler id="nav-toggle-button">
<!-- <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>
<ion-icon name="close-outline" aria-hidden="true" class="md hydrated close"></ion-icon>
</button> -->
<div class="switch-container" style="top: 15px;">
<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>
<div class="switch-container" style="top: 15px;">
<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>
</div>



</div>
</header>


<style>
.dark-mode .book_title {
color: white;
Expand Down Expand Up @@ -800,6 +803,44 @@ <h2>Quick Links</h2>
right: 12px;
top: 10px;
}

/* Dark mode styles for book list container */
body.dark-mode #container5,
body.dark-mode #container5 h2,
body.dark-mode #container5 input,
body.dark-mode #container5 .book-item {
color: #ffffff;
/* Set text color to white in dark mode */
}

/* Style input fields in dark mode */
body.dark-mode #container5 input {
background-color: #333;
/* Darker background for input fields */
border-color: #555;
/* Darker border for input fields */
}

/* Maintain original color for "Add to List" button in dark mode */
body.dark-mode #container5 #book-form button {
background-color: var(--old-rose);
/* Keep original background color */
color: var(--white);
/* Ensure text is white for visibility */
}

/* Style for remove button in dark mode */
body.dark-mode #container5 .remove-btn {
background-color: #c27a7e;
/* Light red background */
color: white;
/* White text */
border: none;
padding: 5px 10px;
cursor: pointer;
font-size: 14px;
/* Adjust as needed */
}
</style>

<div class="icons">
Expand Down Expand Up @@ -895,7 +936,7 @@ <h3>${title}</h3>
<p><strong>Author:</strong> ${author}</p>
<p><strong>Genre:</strong> ${genre}</p>
</div>
<button class="remove-btn">-</button>
<button class="remove-btn">Remove</button> <!-- Changed from '-' to 'Remove' for clarity -->
<div class="interested-users">
<h4>Interested Bookworm</h4>
<form class="interested-form">
Expand Down

0 comments on commit 4528bed

Please sign in to comment.