Skip to content

Commit

Permalink
Merge pull request #4047 from Riyachauhan11/main
Browse files Browse the repository at this point in the history 
adding dark mode to playNow page and fixing footer
  • Loading branch information
@abhi03ruchi
abhi03ruchi authored Oct 26, 2024
2 parents 47cf3af + 0225464 commit 59f5816
Show file tree
Hide file tree
Showing 2 changed files with 265 additions and 32 deletions.
155 changes: 153 additions & 2 deletions assets/css/playNow.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,165 @@ body {
::-webkit-scrollbar-thumb:hover {
background: hsl(357, 60%, 45%);
}
body.dark-mode {
background-image: url("/assets/images/darkmode_bg.png");
}

.dark-mode {
color: #fff;
}

.dark-mode .form {
background-color: #333;
color: #fff;
}

.dark-mode .description {
color: #fff;
}

.dark-mode .logo {
color: #fff;
}
.dark-mode .header {
/* background-color: #333; */
color: #fff;
}
.dark-mode .container button {
margin-left: none;
}

.dark-mode .invert-col {
filter: invert(1);
}

.dark-mode .footer {
background-color: #333;
color: #fff;
}

.dark-mode .navbar-link {
color: #fff;
}
.dark-mode .header {
background-color: #151111;
}
body.dark-mode .genre-section {
background: linear-gradient(#090e11, #4b2e2e);
}
/* Dark mode styles */

body.dark-mode .genre-content {
width: 55%;
padding: 20px;
background-color: rgba(
255,
255,
255,
0.1
); /* Semi-transparent background for contrast */
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Darker shadow for depth */
}

body.dark-mode .genre-title {
font-family: "Merriweather", serif;
font-size: 2rem;
color: lightpink; /* Bright color for title in dark mode */
margin: 10px 0;
}

body.dark-mode .book-author,
body.dark-mode .book-genre {
font-family: "Open Sans", sans-serif;
font-weight: bold;
color: lightcoral; /* Bright color for author and genre */
}

body.dark-mode .book-description {
font-family: "Open Sans", sans-serif; /* Keep description easy to read */
font-size: 1rem;
color: #e0e0e0; /* Light gray for better readability */
}

/*
.answers.active {
max-height: fit-content;
} */

.icons {
width: 400px;
flex-wrap: wrap;
align-items: center;
padding-top: 10px;
}

.dark-mode {
--sonic-silver: #fff;
--ghost-white: #1e1c1c;
--seashell: hsl(20deg 4.72% 15.44%);
--seashell: hsl(20deg 2.94% 14.18%);
/* --seashell: #1E1C1C; */
--charcoal: #fff;
--white: #1e1c1c;
--black: #fff;
--grey-white: #1e1c1c;

/* shadow */

--shadow-1: 4px 6px 10px hsla(240, 2%, 53%, 0.484);
/* --shadow-2: 2px 5px 8px hsla(240, 5%, 62%, 0.545); */
--shadow-2: 0px 0px 7px hsla(240, 5%, 62%, 0.545);
--shadow-3: 3px 3px var(--seashell);
--shadow-4: 5px 5px var(--old-rose);
}

body.dark-mode .navbar-link:hover,
body.dark-mode .navbar-link.active {
color: #ca7373;
text-decoration: none;
}

body.dark-mode .navbar-link::after {
content: "";
background: #ca7373;
box-shadow: 0 0 10px #fcb0b480;
}

body.dark-mode .flip-card-back {
background-color: black !important;
color: white !important;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

body.dark-mode .navbar-link:hover::after {
box-shadow: 0 0 20px hsl(357, 93%, 84%, 0.7);
}

/* Dark mode styles for section title */
body.dark-mode .section-title {
color: rgb(88, 22, 33); /* Dark red color for the text */
background-color: rgba(
255,
255,
255,
0.909
); /* Slightly transparent background for contrast */
padding: 10px; /* Optional padding for better spacing */
border-radius: 5px; /* Slightly rounded corners */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Shadow for depth */
text-align: center; /* Center-align the text */
}

/*-----------------------------------*\
#FOOTER
\*-----------------------------------*/

footer {
font-size: 18px;
background-color: hsl(0deg 100% 80.49%);
width: 100%;
}
Expand Down Expand Up @@ -86,7 +239,6 @@ footer {
}

.foot-middle {
font-size: 1.6rem;
text-align: center;
}
.quicklinks {
Expand Down Expand Up @@ -403,4 +555,3 @@ footer {
/* flex-direction: column; */
overflow: hidden;
}

142 changes: 112 additions & 30 deletions playNow.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
<title>Popular Books - SwapReads</title>
<link rel="stylesheet" href="./assets/css/playNow.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">

<style>
Expand Down Expand Up @@ -197,6 +199,7 @@
font-size: 1.5rem;
color: #000000; /* Black text color */
font-weight: bold;
margin-top: 30px;
}

.navbar {
Expand Down Expand Up @@ -400,36 +403,115 @@
<a href="./assets/html/event.html" class="navbar-link" data-nav-link>
<i class="ri-community-fill"></i> Events
</a>
</li>



<li>
<div class="action" >
<!-- <div class="profile" onclick="menuToggle();">
<img id="profile-avatar" src="./assets/images/avatar1.jpg" />
</div> -->
<div class="menu">
<h3>XYZ<br /><span>Book Lover</span></h3>
<ul>
<li>
<img src="./assets/images/user.jpg" /><a href="/profile.html">My profile</a>
</li>
<li>
<img src="./assets/images/edit profile.jpg" /><a href="./assets/html/profileedit.html">Edit profile</a>
</li>
<li>
<img src="./assets/images/inbox.png" /><a href="#">Inbox</a>
</li>
<li>
<img src="./assets/images/settings.png" /><a href="#">Settings</a>
</li>
<li><img src="./assets/images/help.png" /><a href="/help.html">Help</a></li>
<li>
<img src="./assets/images/logout.png" /><a id="logout-btn">Logout</a>
</li>
</ul>
</li>
<!-- Theme switcher -->
<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>

<script>
// Theme switcher
document.addEventListener('DOMContentLoaded', function () {
const toggleSwitch = document.querySelector('.switch-container input[type="checkbox"]');
const bodyElement = document.body;

const currentTheme = localStorage.getItem('theme') || 'light';
if (currentTheme === 'dark') {
bodyElement.classList.add('dark-mode');
toggleSwitch.checked = true;
} else {
bodyElement.classList.add('light-mode');
}

toggleSwitch.addEventListener('change', function (event) {
if (event.target.checked) {
bodyElement.classList.remove('light-mode');
bodyElement.classList.add('dark-mode');
localStorage.setItem('theme', 'dark');
} else {
bodyElement.classList.remove('dark-mode');
bodyElement.classList.add('light-mode');
localStorage.setItem('theme', 'light');
}
});
});
</script>

<style>
/* Container for the switch */
.switch-container {
display: flex;
align-items: center;
position: relative;
}

/* Hide default checkbox */
.switch-checkbox {
display: none;
}

/* Style the label */
.switch-label {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
width: 50px;
height: 24px;
border-radius: 50px;
background-color: #ccc;
transition: background-color 0.3s ease;
position: relative;
}

/* Style the toggle button */
.switch-button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0 5px;
position: absolute; /* Fixes the position */
left: 0; /* Keeps the button fixed */
}

/* Sun and moon icon styles */
.sun-icon,
.moon-icon {
font-size: 16px;
transition: opacity 0.3s ease;
}

/* Color the icons */
.sun-icon {
color: orange; /* Sun icon color */
}

.moon-icon {
color: lightblue; /* Moon icon color */
opacity: 0; /* Initially hidden */
}

/* Style for checked state */
.switch-checkbox:checked + .switch-label {
background-color: #333;
}

.switch-checkbox:checked + .switch-label .sun-icon {
opacity: 0; /* Hide sun icon in dark mode */
}

.switch-checkbox:checked + .switch-label .moon-icon {
opacity: 1; /* Show moon icon in dark mode */
}
</style>

</header>

<div class="section-title">
Expand Down Expand Up @@ -580,7 +662,7 @@ <h2 class="genre-title">The Girl on the Train</h2>
<div class="desc">
<div class="SwapReads"><a href="#" class="logo">SwapReads</a></div>
<div>
<p style="text-align: justify; color: black;" class="description">
<p class="description">
SwapReads.com is the ultimate destination for book lovers seeking to swap and discover new literary gems.
Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in
the world of literature—all on one convenient platform. Join us and dive into a universe of endless possibilities!
Expand Down

0 comments on commit 59f5816

Please sign in to comment.