Skip to content

Commit

Permalink
implimented dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mohitranag18
Mohitranag18 committed Nov 10, 2024
1 parent 299602c commit adf8b70
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 42 deletions.
30 changes: 15 additions & 15 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -561,31 +561,30 @@ <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>



<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
environmental pollution but also
<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
Expand All @@ -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" />
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
5 changes: 0 additions & 5 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});

37 changes: 16 additions & 21 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -238,7 +238,6 @@ nav .btn-nav {
section {
padding: 20px;
margin: 20px 0;
background-color: #f8f8f8;
border-radius: 8px;
}

Expand All @@ -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;
}
Expand Down Expand Up @@ -310,9 +309,6 @@ h2, h3, h4 {
}

/* Features Section */
.features {
background-color: #f1f1f1;
}
.features h2{
text-align: center;
font-size: 2.3rem;
Expand Down Expand Up @@ -404,9 +400,6 @@ blockquote {
}

/* Feedback Section */
.feedback {
background-color: #fafafa;
}

#feedback-form input,
#feedback-form textarea {
Expand Down Expand Up @@ -481,9 +474,6 @@ blockquote {
}

/* Values Section */
.values-container {
background-color: #f8f8f8;
}
.values-container h3{
color: #333;
}
Expand Down Expand Up @@ -603,7 +593,6 @@ blockquote {
/* FAQ Section */
.faqisection {
padding: 50px 0;
background-color: #f9f9f9;
color: #333;
}

Expand Down Expand Up @@ -636,7 +625,7 @@ blockquote {
/* Feedback Section */
.feedback {
padding: 50px 20px;
background-color: #eef4f7;
border: 2px solid gray;
color: #333;
text-align: center;
}
Expand Down Expand Up @@ -680,7 +669,6 @@ blockquote {
padding: 50px 20px;
justify-content: space-between;
align-items: center;
background-color: #f1f1f1;
}

.about-text {
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -792,7 +778,6 @@ blockquote {
justify-content: center;
align-items: center;
padding: 50px 20px;
background-color: #f9f9f9;
}

.form_area {
Expand Down Expand Up @@ -952,3 +937,13 @@ blockquote {
margin: 0;
}

.dark-mode{
background-color: black;
}
.dark-mode2{
background-color: #2a2a2a;
color: white;
}
.dark-mode3{
color: #ffffff;
}
15 changes: 14 additions & 1 deletion styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,17 @@ function showForm(formNumber) {
button.classList.remove('button-active');
}
});
}
}

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");
});
});

0 comments on commit adf8b70

Please sign in to comment.