From adf8b70897f953436337c8bb2c924d04546fa03e Mon Sep 17 00:00:00 2001
From: Mohit Rana <mohitr8998@gmail.com>
Date: Sun, 10 Nov 2024 06:01:11 -0500
Subject: [PATCH] implimented dark mode

---
 index.html | 30 +++++++++++++++---------------
 script.js  |  5 -----
 styles.css | 37 ++++++++++++++++---------------------
 styles.js  | 15 ++++++++++++++-
 4 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/index.html b/index.html
index 0aa3818..e8482cf 100644
--- a/index.html
+++ b/index.html
@@ -70,7 +70,7 @@ <h2>Efficient Waste Management</h2>
                     <img src="./assets/rb_2148298503.png" alt="Upload Preview">
                 </div>
                 <div class="upload-text">
-                    <h2>Upload Your Files</h2>
+                    <h2 class="darkmodetext">Upload Your Files</h2>
                     <label for="image-input" class="custom-file-upload">
                         <input type="file" id="image-input" accept="image/*" hidden />
                         <span>Select Image</span>
@@ -86,17 +86,17 @@ <h2>Upload Your Files</h2>
     </div>
     </section>
     <section class="classification">
-        <h2>Waste Classification</h2>
+        <h2 class="darkmodetext">Waste Classification</h2>
         <p id="classification-result">Your classification result will appear here.</p>
     </section>
     <!-- part 2 start-->
 
     <section class="disposal">
-        <h2>Disposal Information</h2>
+        <h2 class="darkmodetext">Disposal Information</h2>
         <p id="disposal-information">Disposal information will be displayed here.</p>
     </section>
     <div class="Categories">
-        <h2>Waste Categories</h2>
+        <h2 class="darkmodetext">Waste Categories</h2>
         <div class="card-container">
             <div class="card">
                 <div class="card-inner">
@@ -453,7 +453,7 @@ <h3>Our Commitment to Sustainability</h3>
     </div>
     </div>
     <section class="features" id="features">
-        <h2>Discover Our Features</h2>
+        <h2 class="darkmodetext">Discover Our Features</h2>
         <div class="features-container">
             <div class="feature-card" id="eco-friendly">
                 <div class="icon"></div>
@@ -492,7 +492,7 @@ <h3>Community Engagement</h3>
     <section class="faqisection">
         <section class="faqs" id="faqs">
             <div>
-                <h2>Frequently Asked Questions (FAQs)</h2>
+                <h2 class="darkmodetext">Frequently Asked Questions (FAQs)</h2>
                 <div class="faq-item">
                     <h3>
                         What is the difference between biodegradable and
@@ -561,12 +561,11 @@ <h3>Why is it important to sort waste?</h3>
         </section>
     </section>
     <section class="feedback" id="feedback">
-        <h2>Your Feedback</h2>
+        <h2 class="darkmodetext">Your Feedback</h2>
         <form id="feedback-form" name="feedback-form">
             <input type="text" placeholder="Your Name" required />
             <textarea placeholder="Your Feedback" required></textarea>
             <button type="submit">Submit</button>
-            <div id="feedback-message" class="hidden">Your feedback has been submitted successfully!</div>
         </form>
     </section>
     
@@ -574,10 +573,10 @@ <h2>Your Feedback</h2>
 
     <section class="about-container">
         <div class="about-heading">
-            <h2>About Us</h2>
+            <h2 class="darkmodetext">About Us</h2>
         </div>
         <div class="about-text">
-            <p>
+            <p class="darkmodetext">
                 <strong>At Waste Management</strong>, we are passionate
                 about creating a sustainable future through effective
                 waste disposal solutions. Our goal is to not only reduce
@@ -585,7 +584,7 @@ <h2>About Us</h2>
                 <strong>educate communities</strong> and empower
                 individuals with sustainable waste practices.
             </p>
-            <p>
+            <p class="darkmodetext">
                 By leveraging our
                 <strong>state-of-the-art waste classification system</strong>
                 and encouraging community engagement, we aim to inspire
@@ -600,8 +599,8 @@ <h2>About Us</h2>
         </div>
     </section>
     <section>
-        <div class="mission-container">
-            <h3>Our Mission</h3>
+        <div class="mission-container darkmodetext">
+            <h2 class="darkmodetext">Our Mission</h2>
             <div class="mission-box">
                 <div class="mission-item">
                     <img src="./assets/recycling-bin_532768.png" alt="Reduce Waste" />
@@ -636,8 +635,8 @@ <h4>Build a Cleaner Future</h4>
         </div>
     </section>
     <section>
-        <div class="values-container">
-            <h3>Our Core Values</h3>
+        <div class="values-container darkmodetext">
+            <h2 class="darkmodetext">Our Core Values</h2>
             <div class="values-cards">
                 <div class="value-card">
                     <h4>Innovation</h4>
@@ -764,6 +763,7 @@ <h3>Our Commitment to Sustainability</h3>
     </script>
     <script src="https://www.chatbase.co/embed.min.js" chatbotId="wQJs3fix9gu515zxNshBF" domain="www.chatbase.co" defer>
     </script>
+    <script src="styles.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/script.js b/script.js
index e16a450..4bd02ea 100644
--- a/script.js
+++ b/script.js
@@ -565,10 +565,5 @@ document.addEventListener('DOMContentLoaded', () => {
     window.addEventListener('load', updateSlider);
     
     
-    const themeToggle = document.getElementById('theme-toggle');
-    const body = document.body;
     
-    themeToggle.addEventListener('click', () => {
-        body.classList.toggle('dark-mode');
-    });
     
diff --git a/styles.css b/styles.css
index bba5575..627b30d 100644
--- a/styles.css
+++ b/styles.css
@@ -142,10 +142,10 @@ nav .btn-nav {
 
 /* Upload Section */
 .upload {
-  background-color: #ffffff;
   padding: 2rem;
   margin: 2rem 0;
   text-align: center;
+  border: 2px solid gray;
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
@@ -198,8 +198,8 @@ nav .btn-nav {
 .classification {
   padding: 2rem;
   text-align: center;
-  background-color: #f9f9f9;
   margin-top: 2rem;
+  border: 2px solid gray;
   border-top: 3px solid #4caf50;
 }
 
@@ -238,7 +238,6 @@ nav .btn-nav {
 section {
   padding: 20px;
   margin: 20px 0;
-  background-color: #f8f8f8;
   border-radius: 8px;
 }
 
@@ -254,7 +253,7 @@ h2, h3, h4 {
 
 /* Disposal Information Section */
 .disposal {
-  background-color: #e3f2fd;
+  border: 2px solid gray;
   border-left: 5px solid #2196f3;
   padding-left: 20px;
 }
@@ -310,9 +309,6 @@ h2, h3, h4 {
 }
 
 /* Features Section */
-.features {
-  background-color: #f1f1f1;
-}
 .features h2{
   text-align: center;
   font-size: 2.3rem;
@@ -404,9 +400,6 @@ blockquote {
 }
 
 /* Feedback Section */
-.feedback {
-  background-color: #fafafa;
-}
 
 #feedback-form input,
 #feedback-form textarea {
@@ -481,9 +474,6 @@ blockquote {
 }
 
 /* Values Section */
-.values-container {
-  background-color: #f8f8f8;
-}
 .values-container h3{
   color: #333;
 }
@@ -603,7 +593,6 @@ blockquote {
 /* FAQ Section */
 .faqisection {
   padding: 50px 0;
-  background-color: #f9f9f9;
   color: #333;
 }
 
@@ -636,7 +625,7 @@ blockquote {
 /* Feedback Section */
 .feedback {
   padding: 50px 20px;
-  background-color: #eef4f7;
+  border: 2px solid gray;
   color: #333;
   text-align: center;
 }
@@ -680,7 +669,6 @@ blockquote {
   padding: 50px 20px;
   justify-content: space-between;
   align-items: center;
-  background-color: #f1f1f1;
 }
 
 .about-text {
@@ -709,11 +697,10 @@ blockquote {
 /* Mission Section */
 .mission-container {
   padding: 50px 20px;
-  background-color: #f9f9f9;
   text-align: center;
 }
 
-.mission-container h3 {
+.mission-container h2 {
   font-size: 32px;
   margin-bottom: 30px;
 }
@@ -752,10 +739,9 @@ blockquote {
 /* Values Section */
 .values-container {
   padding: 50px 20px;
-  background-color: #eef4f7;
 }
 
-.values-container h3 {
+.values-container h2 {
   font-size: 32px;
   text-align: center;
   margin-bottom: 30px;
@@ -792,7 +778,6 @@ blockquote {
   justify-content: center;
   align-items: center;
   padding: 50px 20px;
-  background-color: #f9f9f9;
 }
 
 .form_area {
@@ -952,3 +937,13 @@ blockquote {
   margin: 0;
 }
 
+.dark-mode{
+  background-color: black;
+}
+.dark-mode2{
+  background-color: #2a2a2a;
+  color: white;
+}
+.dark-mode3{
+  color: #ffffff;
+}
\ No newline at end of file
diff --git a/styles.js b/styles.js
index 9d245f9..a807ed7 100644
--- a/styles.js
+++ b/styles.js
@@ -15,4 +15,17 @@ function showForm(formNumber) {
             button.classList.remove('button-active');
         }
     });
-}
\ No newline at end of file
+}
+
+const themeToggle = document.getElementById('theme-toggle');
+const body = document.body;
+const whitetext = document.querySelectorAll(".darkmodetext");
+
+themeToggle.addEventListener('click', () => {
+    body.classList.toggle('dark-mode');
+    
+    // Loop through each element with the .whitetext class and toggle .dark-mode3
+    whitetext.forEach(element => {
+        element.classList.toggle("dark-mode3");
+    });
+});