Skip to content

Commit

Permalink
Implemented seamless realtime waste monitoring feature (#260)
Browse files Browse the repository at this point in the history 
<!-- Thank you for sending a pull request ❤️ -->

## Issues Identification

Closes: #166 

## Description

### Summary
Added RTM feature for users to input their waste data and track their
waste disposals.

### Details
Here is illustrated preview video of the feature:-

1. Users can input their waste data and visualize it through charts
2. Waste Segregation step is the crucial first and foremost step that
must be taken by each individual from their waste source level.




https://github.com/user-attachments/assets/d2ff77a3-aada-4a7c-8dc6-4157f5947ea6




## Types of Changes

_Please check the boxes that apply_

- [ ] Bugfix (non-breaking change that fixes an issue)
- [✅ ] New feature (non-breaking change that adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Documentation update (Documentation content changed)
- [ ] Other (please describe):

## Checklist

_Please check the boxes that apply_

- [✅ ] My code follows the style guidelines of this project
- [ ✅ ] I have performed a self-review of my own code
- [✅ ] I have commented my code, particularly in hard-to-understand
areas
- [✅  ] I have made corresponding changes to the documentation
- [✅  ] My changes generate no new warnings
- [✅ ] My changes do not break the current system and pass all existing
test cases
- [✅ ] I have added tests that prove my fix is effective or that my
feature works
- [✅  ] New and existing unit tests pass locally with my changes
- [ ✅ ] Any dependent changes have been merged and published in
downstream modules


<!-- We're looking forward to merging your contribution!! -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
	- Overhauled eco-tips section with new entries and updated content.
	- Introduced a real-time monitoring dashboard for waste management.
	- Added a feature slider for showcasing app functionalities.
	- Implemented a "Scroll to Top" button for improved navigation.
	- Added a "Waste Categories" section for better organization.

- **Bug Fixes**
	- Enhanced newsletter form validation.

- **Style**
- Updated styles for responsiveness and dark mode, including new utility
classes.
	- Improved layout and organization of CSS for better clarity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
  • Loading branch information
@GarimaSingh0109
GarimaSingh0109 authored Oct 21, 2024
2 parents 9b995b9 + f3f8ee8 commit 7880a0f
Show file tree
Hide file tree
Showing 12 changed files with 1,778 additions and 3 deletions.
Binary file added assets/landfill.avif
View file
Binary file not shown.
Binary file added assets/organic.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/papercup.avif
View file
Binary file not shown.
Binary file added assets/pbottle.avif
View file
Binary file not shown.
Binary file added assets/peel.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/rbin.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
378 changes: 378 additions & 0 deletions ecotips.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,384 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Waste Management</title>
<link rel="icon" href="./assets/logo.png" />
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>

<header>
<h1>WasteManagement</h1>
<nav>
<ul>
<li>
<a href="index.html"><i class="fa-solid fa-home"></i> Home</a>
</li>
<li>
<a href="#eco-tips-container"
><i class="fa-brands fa-pagelines"></i> Tips</a
>
</li>
<li>
<a href="#eco-blogs"><i class="fa-solid fa-bookmark"></i> Blogs</a>
</li>
<li>
<a href="#footer"
><i class="fa-solid fa-envelopes-bulk"></i> Contact Us</a
>
</li>
<li class="theme-switch" id="theme-switch"></li>
</ul>
</nav>
</header>

<div class="hero-container">
<div class="hero-text">
<h3>Reduce. Reuse. Revolutionize.</h3>
<p>
Empowering you to manage waste responsibly. Classify, dispose, and
embrace sustainable practices with ease.
</p>
</div>
<div class="hero-image">
<img src="./assets/img3.jpg" alt="Waste Management" />
</div>
</div>

<!-- Eco-Tips-Slider -->
<div id="eco-tips-container">
<div class="eco-tips-header">
<h3>Its NOW or NEVER!</h3>
<p>
Take this below-listed actions the next time you dispose off your
household waste. Remember, we are all together in this journey and
<span>every single contribution counts!</span>
</p>
<em>Cuz, You matter and so does our Environment!</em>
</div>
<div class="eco-tips-slider">
<button class="slider-control" id="prev-slide">
<i class="fa-solid fa-chevron-left"></i>
</button>

<div class="eco-tips-content">
<div class="eco-tip" data-type="image">
<h3>Waste Segregation</h3>
<p>
Separate household waste into biodegradable and non-biodegradable
at the source for easier recycling and processing.
</p>
<img src="./assets/img4.jpg" alt="Waste Segregation" />
</div>

<div class="eco-tip" data-type="video">
<h3>Composting Tips</h3>
<p>
Convert organic waste into nutrient-rich compost by setting up a
small compost bin in your garden.
</p>
<img src="./assets/composting.avif" />
</div>

<div class="eco-tip" data-type="image">
<h3>Reduce Plastic Usage</h3>
<p>
Opt for reusable items like metal water bottles and cloth bags to
reduce plastic waste and pollution.
</p>
<img src="./assets/reduce.avif" alt="Reduce Plastic Usage" />
</div>

<div class="eco-tip" data-type="image">
<h3>Avoid Single-Use Plastics</h3>
<p>
Reduce your dependence on single-use plastics by switching to
reusable straws, utensils, and food containers.
</p>
<img src="./assets/single.avif" alt="Avoid Single-Use Plastics" />
</div>

<div class="eco-tip" data-type="image">
<h3>Switch to Cloth Napkins</h3>
<p>
Replace paper napkins with reusable cloth napkins to cut down on
disposable paper waste in your daily life.
</p>
<img src="./assets/napkins.avif" alt="Cloth Napkins" />
</div>

<div class="eco-tip" data-type="image">
<h3>Eco-Friendly Cleaning Products</h3>
<p>
Choose biodegradable, non-toxic cleaning products to minimize
chemical runoff and pollution in waterways.
</p>
<img src="./assets/diy.avif" alt="Eco-Friendly Cleaning Products" />
</div>

<div class="eco-tip" data-type="image">
<h3>DIY Household Cleaners</h3>
<p>
Make your own natural cleaning solutions using ingredients like
vinegar and baking soda to reduce chemical waste.
</p>
<img src="./assets/clean.avif" alt="DIY Household Cleaners" />
</div>

<div class="eco-tip" data-type="image">
<h3>Switch to Solar Energy</h3>
<p>
Reduce your carbon footprint by installing solar panels or using
solar-powered devices. Harnessing renewable energy from the sun
lowers energy bills and decreases reliance on fossil fuels.
</p>
<video src="./assets/vd1.webm" controls></video>
</div>

<div class="eco-tip" data-type="image">
<h3>Buy in Bulk</h3>
<p>
Purchase items in bulk to minimize packaging waste and reduce the
environmental impact of frequent shopping trips.
</p>
<img src="./assets/bulk.avif" alt="Buy in Bulk" />
</div>

<div class="eco-tip" data-type="image">
<h3>Upcycling Old Items</h3>
<p>
Repurpose old or broken household items instead of throwing them
away. This reduces waste and promotes creativity.
</p>
<img src="./assets/upcycle.avif" alt="Upcycling Old Items" />
</div>

<div class="eco-tip" data-type="image">
<h3>Donate Instead of Disposing</h3>
<p>
Donate usable clothing, electronics, and household goods to reduce
waste and help those in need.
</p>
<img src="./assets/old.avif" alt="Donate Instead of Disposing" />
</div>

<div class="eco-tip" data-type="image">
<h3>Reduce Food Waste</h3>
<p>
Plan meals, store food properly, and use leftovers to minimize
food waste in your household.
</p>
<img src="./assets/food.webp" alt="Reduce Food Waste" />
</div>

<div class="eco-tip" data-type="image">
<h3>Choose Recycled Products</h3>
<p>
Opt for products made from recycled materials, such as paper,
plastic, and glass, to support sustainable production.
</p>
<img src="./assets/recycled.avif" alt="Recycled Products" />
</div>

<div class="eco-tip" data-type="image">
<h3>Grow Your Own Food</h3>
<p>
Start a home garden or grow herbs indoors to reduce your carbon
footprint and minimize packaging waste from store-bought produce.
</p>
<img src="./assets/grow.avif" alt="Grow Your Own Food" />
</div>
</div>

<button class="slider-control" id="next-slide">
<i class="fa-solid fa-chevron-right"></i>
</button>
</div>
</div>

<!-- Eco-blogs -->
<section class="eco-blogs" id="eco-blogs">
<h2 class="blogs-section-title">
Essential Eco Blogs: Your Guide to a Greener Tomorrow!
</h2>
<div class="eco-blogs-container">
<div class="eco-blogs-card">
<div
class="card-header"
style="background-image: url('./assets/img5.jpg')"
></div>
<div class="card-content">
<h4>The Future of Waste Management</h4>
<p>
Explore how modern technologies are transforming the way we manage
waste, promoting sustainability for future generations.
</p>
<a
href="https://www.rts.com/blog/smart-waste-management-technologies/"
class="read-more"
>Read more</a
>
</div>
</div>

<div class="eco-blogs-card">
<div
class="card-header"
style="background-image: url('./assets/compost.webp')"
></div>
<div class="card-content">
<h4>Composting: Nature’s Recycling</h4>
<p>
Learn how composting organic waste can enrich soil, reduce
landfill use, and contribute to a greener environment.
</p>
<a
href="https://www.nrdc.org/stories/composting-101#types"
class="read-more"
>Read more</a
>
</div>
</div>

<div class="eco-blogs-card">
<div
class="card-header"
style="background-image: url('./assets/pkg.webp')"
></div>
<div class="card-content">
<h4>Eco-Friendly Packaging Trends</h4>
<p>
Uncover the latest innovations in sustainable packaging that
reduce environmental impact while meeting consumer needs.
</p>
<a
href="https://filestage.io/blog/sustainable-packaging-ideas/"
class="read-more"
>Read more</a
>
</div>
</div>

<div class="eco-blogs-card">
<div
class="card-header"
style="background-image: url('./assets/zero.jpg')"
></div>
<div class="card-content">
<h4>Zero Waste Living: A Beginner’s Guide</h4>
<p>
A comprehensive guide to adopting a zero-waste lifestyle,
including simple steps to minimize waste and live sustainably.
</p>
<a
href="https://learn.eartheasy.com/guides/zero-waste-a-beginners-guide/"
class="read-more"
>Read more</a
>
</div>
</div>

<div class="eco-blogs-card">
<div
class="card-header"
style="background-image: url('./assets/plastic.webp')"
></div>
<div class="card-content">
<h4>Plastic Alternatives You Should Know</h4>
<p>
Discover eco-friendly alternatives to plastics and how you can
incorporate them into your daily life to reduce pollution.
</p>
<a
href="https://blog.cleanhub.com/alternatives-to-single-use-plastic"
class="read-more"
>Read more</a
>
</div>
</div>
</div>
</section>

<!-- Footer -->
<footer id="footer">
<h2>Stay Connected</h2>
<form id="newsletter-form">
<input type="email" placeholder="Your Email" required />
<button type="submit">Subscribe</button>
</form>
<div class="social-media">
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">Instagram</a>
</div>

<!-- Community and Sustainability Section -->
<div class="community-message">
<h3>Our Commitment to Sustainability</h3>
<p>
At Waste Management, we are dedicated to building a greener future.
Through our community recycling programs and sustainability
initiatives, we strive to reduce waste and protect the environment for
generations to come. Join us in our mission to create a cleaner,
healthier planet.
</p>
</div>

<p>&copy; 2024 Waste Management. All rights reserved.</p>
</footer>

<script>
const tipsSlider = document.querySelector(".eco-tips-content");
const slides = document.querySelectorAll(".eco-tip");
const prevSlide = document.getElementById("prev-slide");
const nextSlide = document.getElementById("next-slide");
let currentIndex = 0;

const updateSlider = () => {
const slideWidth = slides[0].clientWidth;
tipsSlider.style.transform = `translateX(-${
currentIndex * slideWidth
}px)`;
};

tipsSlider.style.transition = "transform 0.3s ease-in-out";

nextSlide.addEventListener("click", () => {
if (currentIndex < slides.length - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
updateSlider();
});

prevSlide.addEventListener("click", () => {
if (currentIndex > 0) {
currentIndex--;
} else {
currentIndex = slides.length - 1;
}
updateSlider();
});

window.addEventListener("resize", updateSlider);

window.addEventListener("load", updateSlider);
// updateSlider();
</script>
</body>


<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Expand Down
Loading

0 comments on commit 7880a0f

Please sign in to comment.