From 810d50d5b07f73c0a1a1266791b16ea2c3a60c7d Mon Sep 17 00:00:00 2001
From: Riya Chauhan <96919050+Riyachauhan11@users.noreply.github.com>
Date: Sat, 26 Oct 2024 20:17:41 +0530
Subject: [PATCH 1/2] added dark mode and improved footer

---
 playNow.html | 142 ++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 112 insertions(+), 30 deletions(-)

diff --git a/playNow.html b/playNow.html
index c4095c87..62728a5c 100644
--- a/playNow.html
+++ b/playNow.html
@@ -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>
@@ -197,6 +199,7 @@
   font-size: 1.5rem;
   color: #000000; /* Black text color */
   font-weight: bold;
+  margin-top: 30px;
 }
 
 .navbar {
@@ -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">
@@ -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!

From 33c7435e468cd9c80071651da08234ff92506abb Mon Sep 17 00:00:00 2001
From: Riya Chauhan <96919050+Riyachauhan11@users.noreply.github.com>
Date: Sat, 26 Oct 2024 20:18:37 +0530
Subject: [PATCH 2/2] added dark mode styling and improved footer

---
 assets/css/playNow.css | 155 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 153 insertions(+), 2 deletions(-)

diff --git a/assets/css/playNow.css b/assets/css/playNow.css
index 907d070a..375c9f7d 100644
--- a/assets/css/playNow.css
+++ b/assets/css/playNow.css
@@ -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%;
 }
@@ -86,7 +239,6 @@ footer {
 }
 
 .foot-middle {
-  font-size: 1.6rem;
   text-align: center;
 }
 .quicklinks {
@@ -403,4 +555,3 @@ footer {
   /* flex-direction: column; */
   overflow: hidden;
 }
-