From cfa995cac638b0bdcfd170baeb25dc701ee82e4d Mon Sep 17 00:00:00 2001
From: MOHIT-IITP <codingbymohit@gmail.com>
Date: Tue, 15 Oct 2024 13:46:23 +0530
Subject: [PATCH] Fixes: #715

---
 index.html | 57 +++++++++++++++++++++++++++++++++++++-----------------
 style.css  | 13 +++++++++++--
 2 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index 14b2e6fb..495138c2 100644
--- a/index.html
+++ b/index.html
@@ -325,17 +325,38 @@ <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
     console.log('Toggle clicked'); // Log when the button is clicked
     document.body.classList.toggle('dark-mode');
     document.body.classList.toggle('light-mode');
+    const darkelem = document.querySelectorAll('#darkbtn');
+    const h1dark = document.querySelectorAll('#h1darkbtn');
+    const cardbtn = document.querySelectorAll('#btn a');
     
     if (document.body.classList.contains('dark-mode')) {
         console.log('Switching to dark mode');
         sunIcon.style.display = 'none';  // Hide sun icon
         moonIcon.style.display = 'inline-block'; // Show moon icon
         localStorage.setItem('theme', 'dark');
-    } else {
+        darkelem.forEach((elem) =>{
+          elem.style.color = 'white';
+        })
+        cardbtn.forEach((elem) =>{
+          elem.style.color = 'white';
+        })
+        h1dark.forEach((darkbtn) =>{
+          darkbtn.style.color='#FFA500'
+        })
+      } else {
         console.log('Switching to light mode');
         sunIcon.style.display = 'inline-block';  // Show sun icon
         moonIcon.style.display = 'none';   // Hide moon icon
         localStorage.setItem('theme', 'light');
+        darkelem.forEach((elem) =>{
+          elem.style.color = 'gray';
+        })
+        h1dark.forEach((darkbtn) =>{
+          darkbtn.style.color='#0057B3'
+        })
+        cardbtn.forEach((elem) =>{
+          elem.style.color = 'black';
+        })
     }
 });
 });
@@ -599,8 +620,8 @@ <h3>Wildlife Safari in Kenya</h3>
 
     <!-- travel itineraries -->
     <section id="itineraries" class="itineraries-section">
-      <h2>Travel Itineraries</h2>
-      <p>
+      <h2 id="h1darkbtn">Travel Itineraries</h2>
+      <p id="darkbtn">
         Plan your trips effortlessly with our curated travel itineraries
         tailored for different types of adventures. Whether you're planning a
         family vacation, a solo adventure, or a romantic getaway, we’ve got
@@ -705,7 +726,7 @@ <h2>Book a Cab or Auto</h2>
 
     <!-- recommendations -->
     <section id="recommendations" class="recommendations-section">
-      <h2>Personalized Recommendations</h2>
+      <h2 id="h1darkbtn">Personalized Recommendations</h2>
       <p>
         We’ve picked these destinations, hotels, and activities just for you,
         based on your preferences.
@@ -715,7 +736,7 @@ <h2>Personalized Recommendations</h2>
         <!-- Example Recommendation -->
         <div class="recommendation-item">
           <div class="header1"> 
-          <h3>Beach Resort in Goa</h3>
+          <h3 id="h1darkbtn">Beach Resort in Goa</h3>
           <p>
             Based on your love for sunny destinations, we recommend this
             beachfront resort in Goa for a perfect getaway.
@@ -727,7 +748,7 @@ <h3>Beach Resort in Goa</h3>
 
         <div class="recommendation-item">
           <div class="header2"> 
-          <h3>Cultural Tour in Rajasthan</h3>
+          <h3 id="h1darkbtn">Cultural Tour in Rajasthan</h3>
           <p>
             Explore the rich cultural heritage of Rajasthan. This tour is
             highly recommended based on your interest in historical places.
@@ -739,7 +760,7 @@ <h3>Cultural Tour in Rajasthan</h3>
 
         <div class="recommendation-item">
           <div class="header1"> 
-          <h3>Adventure Trek in Himachal</h3>
+          <h3 id="h1darkbtn">Adventure Trek in Himachal</h3>
           <p>
             For the adventure lover in you, we recommend a thrilling trek in
             the mountains of Himachal Pradesh.
@@ -752,7 +773,7 @@ <h3>Adventure Trek in Himachal</h3>
     </section>
     <!--forum Section-->
     <header class="forum_1">
-      <h1>Travel Discussion Forum</h1>
+      <h1 id="h1darkbtn">Travel Discussion Forum</h1>
       <nav class="hi">
           <ul>
               <li><a href="#destinations">Destinations</a></li>
@@ -906,7 +927,7 @@ <h2>Thank You!</h2>
   </main>
 
   <section id="testimonials" class="testimonials-section">
-    <h1 class="testimonials-heading">Testimonials</h1>
+    <h2 class="testimonials-heading" >Testimonials</h2>
      
     <div class="testimonials-container">
       <div class="header1"> 
@@ -952,7 +973,7 @@ <h4>Traveller</h4>
   <section id="reviews" class="reviews-section">
     <div class="revieww">
       <div class="review-form">
-        <h2>Rate your experience</h2>
+        <h2 style="color: #0057B3;" id="h1darkbtn">Rate your experience</h2>
         <p class="review-p">
           Read what others have to say about their experiences with various
           destinations, hotels, flights, and activities. Share your own reviews
@@ -961,13 +982,13 @@ <h2>Rate your experience</h2>
 
         <div style="margin-top: 20px">
           <form class="form" id="reviewForm">
-            <label for="name">Your Name:</label>
+            <label for="name" id="darkbtn">Your Name:</label>
             <input type="text" id="name" name="name" required />
 
-            <label for="destination">Destination/Service:</label>
+            <label for="destination" id="darkbtn">Destination/Service:</label>
             <input type="text" id="destination" name="destination" required />
 
-            <label for="rating">Rating:</label>
+            <label for="rating" id="darkbtn">Rating:</label>
             <select id="rating" class="rating" name="rating">
               <option value="5">⭐⭐⭐⭐⭐</option>
               <option value="4">⭐⭐⭐⭐</option>
@@ -976,9 +997,9 @@ <h2>Rate your experience</h2>
               <option value="1">⭐</option>
             </select>
 
-            <label for="review">Your Review:</label>
+            <label for="review" id="darkbtn">Your Review:</label>
             <textarea id="review" name="review" rows="4" required></textarea>
-            <label for="complaint">Complaint (if any):</label>
+            <label for="complaint" id="darkbtn">Complaint (if any):</label>
             <textarea id="complaint" name="complaint" rows="3"
               placeholder="Describe any issue with the staff here. Please explain every single detail ex:location,name of the person"></textarea>
 
@@ -1021,12 +1042,12 @@ <h2>Rate your experience</h2>
   <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
 
 
-  <footer>
-    <div class="footer-container">
+  <footer id="footer">
+    <div class="footer-container" id="footer">
       <div class="footer-column">
         
 
-    <footer>
+    <footer id="footer">
       <div class="footer-container">
           <div class="footer-column">
               <h3>About Us</h3>
diff --git a/style.css b/style.css
index 4571387c..85bad125 100644
--- a/style.css
+++ b/style.css
@@ -182,6 +182,12 @@ button {
   cursor: pointer;
   transition: all 0.4s ease;
 }
+#btn a {
+  color:white;
+}
+#btn{
+  background-color: gray;
+}
 #btn:hover {
   background-color: rgba(255,255,255,0.5);
   transform: scale(0.95);
@@ -861,7 +867,7 @@ textarea:focus{
 
 /* Footer Styles */
 footer {
-    background: linear-gradient(135deg, #343a40, #212529);
+    background-color:#232323; 
     color: #ffffff;
     text-align: center;
 }
@@ -881,6 +887,9 @@ footer {
     margin: 10px;
 }
 
+.footer-column p{
+  color:white;
+}
 
 .footer-column a {
   font-size: 16px;
@@ -2341,4 +2350,4 @@ body.light-mode {
   100%{
     transform: translateY(0px);
   }
-}
\ No newline at end of file
+}