Skip to content

[Project] Smart Waste Management Platform #1176 #1178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cu-sanjay merged 1 commit into from
Jun 15, 2026
Merged

[Project] Smart Waste Management Platform #1176 #1178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions Projects/Smart Waste Management Platform/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# Smart Waste Management Platform

An eco-friendly digital platform designed to optimize urban waste collection by connecting citizens directly with municipal sanitation departments.

## Features
- **Citizen Dashboard**: A clean interface for residents to check their neighborhood's waste collection schedule, report illegal dumping, and schedule special bulk pickups.
- **Sanitation Dept Portal**: A secure dashboard for city workers to monitor smart bin fill levels, track active collection routes, and manage citizen reports.
- **Interactive Role Switcher**: Seamlessly toggle between the Citizen View and the Sanitation Dept View to experience both sides of the platform.
- **Responsive Design**: Built with pure CSS for a clean, accessible layout on mobile and desktop screens.

## Run It
No backend or build process required. Simply open `index.html` in your web browser.

## Tech Stack
- HTML5
- CSS3 (Vanilla, CSS Grid & Flexbox)
- Vanilla JavaScript

## Credits
Developed by MistryVishwa.
183 changes: 183 additions & 0 deletions Projects/Smart Waste Management Platform/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smart Waste Management</title>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/@phosphor-icons/web"></script>
</head>
<body>

<!-- Top Navigation -->
<nav class="global-nav">
<div class="brand">
<i class="ph-fill ph-recycle text-primary"></i> <span>EcoCity</span>
</div>

<div class="nav-links">
<button class="nav-tab active" data-tab="schedule">Collection Schedule</button>
<button class="nav-tab" data-tab="report">Report Issue</button>
<button class="nav-tab" data-tab="dept" style="display: none;" id="dept-tab-btn">Sanitation Dept</button>
</div>

<div class="nav-actions">
<!-- Role Switcher -->
<div class="role-selector">
<select id="role-select">
<option value="citizen">Citizen View</option>
<option value="dept">Sanitation Dept</option>
</select>
</div>

<button class="icon-btn"><i class="ph ph-bell"></i></button>
<img src="https://ui-avatars.com/api/?name=Local+Citizen&background=10b981&color=fff" alt="Avatar" id="user-avatar" class="avatar">
</div>
</nav>

<!-- Mobile Nav -->
<div class="mobile-nav">
<button class="nav-tab active" data-tab="schedule"><i class="ph ph-calendar"></i></button>
<button class="nav-tab" data-tab="report"><i class="ph ph-warning-circle"></i></button>
<button class="nav-tab" data-tab="dept" id="mobile-dept-tab-btn" style="display: none;"><i class="ph ph-truck"></i></button>
</div>

<main class="main-content">

<!-- ================= SCHEDULE TAB (CITIZEN) ================= -->
<section id="schedule" class="tab-content active">
<div class="page-heading">
<h1>Neighborhood Collection Schedule</h1>
<p class="text-muted">Stay up to date with your local trash, recycling, and compost pickup dates.</p>
</div>

<div class="split-layout mt-3">
<!-- Upcoming Pickups -->
<div class="panel col-span-2">
<div class="panel-header flex-between">
<h3>Upcoming Pickups for Zone 4A</h3>
<button class="btn outline-btn btn-sm"><i class="ph ph-map-pin"></i> Change Zone</button>
</div>
<div class="panel-body p-0">
<table class="custom-table">
<thead>
<tr><th>Waste Type</th><th>Next Collection Date</th><th>Instructions</th><th>Status</th></tr>
</thead>
<tbody id="citizen-schedule-tbody">
<!-- Injected via JS -->
</tbody>
</table>
</div>
</div>

<!-- Request Bulk Pickup -->
<div class="panel">
<div class="panel-header">
<h3>Special Services</h3>
</div>
<div class="panel-body flex-column flex-center text-center">
<i class="ph ph-couch text-primary mb-2" style="font-size: 3rem;"></i>
<h3 class="mb-1">Bulk Item Pickup</h3>
<p class="text-muted" style="font-size: 0.9rem; margin-bottom: 1.5rem;">Have old furniture or large appliances? Schedule a special pickup directly from your curb.</p>
<button class="btn primary-btn" style="width:100%">Schedule Now</button>
</div>
</div>
</div>
</section>

<!-- ================= REPORT ISSUE TAB (CITIZEN) ================= -->
<section id="report" class="tab-content hidden">
<div class="page-heading">
<h1>Report Illegal Dumping</h1>
<p class="text-muted">Help keep our streets clean. Report overflowing bins or illegal dumping sites.</p>
</div>

<div class="split-layout mt-3">
<div class="panel col-span-2">
<div class="panel-header">
<h3>Submit a Report</h3>
</div>
<div class="panel-body">
<form class="report-form" onsubmit="event.preventDefault(); alert('Report Submitted to Sanitation Dept!');">
<div class="form-group">
<label>Issue Type</label>
<select class="form-input">
<option>Illegal Dumping</option>
<option>Overflowing Public Bin</option>
<option>Missed Collection</option>
<option>Hazardous Waste Spill</option>
</select>
</div>
<div class="form-group">
<label>Location (Street Address or Intersection)</label>
<input type="text" class="form-input" placeholder="e.g. 123 Main St">
</div>
<div class="form-group">
<label>Description</label>
<textarea class="form-input" rows="4" placeholder="Provide any helpful details..."></textarea>
</div>
<div class="form-group">
<label>Upload Photo</label>
<div class="upload-box flex-center">
<div class="text-center text-muted">
<i class="ph ph-camera" style="font-size: 2rem;"></i>
<p>Click to attach an image</p>
</div>
</div>
</div>
<button class="btn primary-btn" type="submit" style="width: 100%;">Submit Report</button>
</form>
</div>
</div>
</div>
</section>

<!-- ================= SANITATION DEPT PORTAL ================= -->
<section id="dept" class="tab-content hidden">
<div class="page-heading flex-between">
<div>
<h1>Sanitation Dept Dashboard</h1>
<p class="text-muted">Monitor smart bin capacities, active routes, and citizen reports.</p>
</div>
<button class="btn outline-btn"><i class="ph ph-truck"></i> Fleet Status</button>
</div>

<div class="metrics-grid mt-2">
<div class="metric-card">
<div class="metric-icon bg-orange-light text-orange"><i class="ph-fill ph-trash"></i></div>
<div class="metric-data"><h3>Critical Bins (>90%)</h3><h2>24</h2></div>
</div>
<div class="metric-card">
<div class="metric-icon bg-blue-light text-blue"><i class="ph-fill ph-map-pin-line"></i></div>
<div class="metric-data"><h3>Active Routes</h3><h2>18</h2></div>
</div>
<div class="metric-card">
<div class="metric-icon bg-red-light text-red"><i class="ph-fill ph-warning-circle"></i></div>
<div class="metric-data"><h3>Pending Citizen Reports</h3><h2>12</h2></div>
</div>
</div>

<div class="split-layout mt-3">
<div class="panel col-span-2">
<div class="panel-header">
<h3>Smart Bin Capacity Alerts</h3>
</div>
<div class="panel-body p-0">
<table class="custom-table">
<thead>
<tr><th>Bin ID</th><th>Location</th><th>Waste Type</th><th>Fill Level</th><th>Action</th></tr>
</thead>
<tbody id="dept-bins-tbody">
<!-- Injected via JS -->
</tbody>
</table>
</div>
</div>
</div>
</section>

</main>

<script src="script.js"></script>
</body>
</html>
14 changes: 14 additions & 0 deletions Projects/Smart Waste Management Platform/project.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"title": "Smart Waste Management Platform",
"description": "An eco-friendly dashboard connecting citizens with waste collection services to track bins, report illegal dumping, and schedule special pickups.",
"author": {
"name": "MistryVishwa",
"github": "MistryVishwa"
},
"tags": [
"eco",
"management",
"vanilla-js"
],
"entry": "index.html"
}
122 changes: 122 additions & 0 deletions Projects/Smart Waste Management Platform/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
// --- Mock Data ---
const citizenSchedule = [
{ type: "General Trash", date: "Every Tuesday", instructions: "Place bin at curb by 6:00 AM.", status: "Upcoming" },
{ type: "Recycling", date: "Every Friday", instructions: "Break down cardboard boxes.", status: "Upcoming" },
{ type: "Yard Waste", date: "Oct 25 (Monthly)", instructions: "Use biodegradable bags only.", status: "Pending" }
];

const deptBins = [
{ id: "BIN-442", loc: "Central Park Entrance", type: "General Waste", fill: 95 },
{ id: "BIN-108", loc: "Main St & 5th Ave", type: "Recycling", fill: 82 },
{ id: "BIN-559", loc: "Community Center", type: "Compost", fill: 45 },
{ id: "BIN-312", loc: "Downtown Plaza", type: "General Waste", fill: 12 }
];

// --- Core Logic ---
document.addEventListener('DOMContentLoaded', () => {
const navTabs = document.querySelectorAll('.nav-tab');
const views = document.querySelectorAll('.tab-content');
const roleSelect = document.getElementById('role-select');
const deptTabBtn = document.getElementById('dept-tab-btn');
const mobileDeptTabBtn = document.getElementById('mobile-dept-tab-btn');

// Initialization
renderSchedule();
renderDeptBins();

// Role Switching Logic
roleSelect.addEventListener('change', (e) => {
const role = e.target.value;

if (role === 'dept') {
deptTabBtn.style.display = 'block';
if(mobileDeptTabBtn) mobileDeptTabBtn.style.display = 'block';
document.querySelector('[data-tab="dept"]').click();

// Update Avatar
document.getElementById('user-avatar').src = "https://ui-avatars.com/api/?name=City+Worker&background=3b82f6&color=fff";
} else {
deptTabBtn.style.display = 'none';
if(mobileDeptTabBtn) mobileDeptTabBtn.style.display = 'none';
document.querySelector('[data-tab="schedule"]').click();

// Update Avatar
document.getElementById('user-avatar').src = "https://ui-avatars.com/api/?name=Local+Citizen&background=10b981&color=fff";
}
});

// Tab Switching
navTabs.forEach(tab => {
tab.addEventListener('click', () => {
const targetId = tab.getAttribute('data-tab');

// Update Active Classes
navTabs.forEach(t => t.classList.remove('active'));
document.querySelectorAll(`[data-tab="${targetId}"]`).forEach(t => t.classList.add('active'));

// Switch Content
views.forEach(v => {
v.classList.add('hidden');
if (v.id === targetId) {
v.classList.remove('hidden');
}
});
});
});

function getStatusBadge(status) {
if (status === 'Upcoming') return `<span class="badge success">${status}</span>`;
return `<span class="badge warning">${status}</span>`;
}

function getFillColor(fill) {
if(fill >= 90) return 'red';
if(fill >= 70) return 'orange';
return 'green';
}

function renderSchedule() {
const tbody = document.getElementById('citizen-schedule-tbody');
if(!tbody) return;

tbody.innerHTML = citizenSchedule.map(s => `
<tr>
<td><strong>${s.type}</strong></td>
<td>${s.date}</td>
<td class="text-muted">${s.instructions}</td>
<td>${getStatusBadge(s.status)}</td>
</tr>
`).join('');
}

function renderDeptBins() {
const tbody = document.getElementById('dept-bins-tbody');
if(!tbody) return;

tbody.innerHTML = deptBins.map(b => {
const color = getFillColor(b.fill);
return `
<tr>
<td><strong>${b.id}</strong></td>
<td><i class="ph-fill ph-map-pin text-muted"></i> ${b.loc}</td>
<td>${b.type}</td>
<td>
<div class="flex-between" style="font-size:0.85rem; font-weight:bold;">
<span>${b.fill}% Full</span>
${b.fill >= 90 ? '<i class="ph-fill ph-warning text-red"></i>' : ''}
</div>
<div class="progress-bar-container">
<div class="progress-bar ${color}" style="width: ${b.fill}%"></div>
</div>
</td>
<td>
${b.fill >= 90
? `<button class="btn primary-btn btn-sm" style="background:var(--red);">Dispatch</button>`
: `<button class="btn outline-btn btn-sm">Monitor</button>`
}
</td>
</tr>
`;
}).join('');
}
});
Loading
Loading