-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
386 lines (360 loc) · 18.4 KB
/
index.html
File metadata and controls
386 lines (360 loc) · 18.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IWM -- Reverse Vending Machine</title>
<meta name="description" content="An Arduino-powered Reverse Vending Machine that validates, collects PET bottles and prints reward coupons. JVTM Prize Winner. Built by Team IWM.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="nav-logo">IWM // Reverse Vending Machine</div>
<div class="nav-right">
<ul class="nav-links">
<li><a href="#idea">Idea</a></li>
<li><a href="#tech">Tech Stack</a></li>
<li><a href="#demo">Demo</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#circuit">Circuit</a></li>
</ul>
<a href="https://github.com/ishaaqdev/IWM-Reverse-Vending-Machine" target="_blank" class="nav-gh">
<svg viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
GitHub
</a>
<button class="nav-hamburger" id="navToggle" aria-label="Menu">
<span></span><span></span><span></span>
</button>
</div>
</nav>
<div class="mobile-nav" id="mobileNav">
<a href="#idea" onclick="closeMobile()">Idea</a>
<a href="#tech" onclick="closeMobile()">Tech Stack</a>
<a href="#demo" onclick="closeMobile()">Demo</a>
<a href="#gallery" onclick="closeMobile()">Gallery</a>
<a href="#circuit" onclick="closeMobile()">Circuit</a>
<a href="https://github.com/ishaaqdev/IWM-Reverse-Vending-Machine" target="_blank" onclick="closeMobile()">GitHub</a>
</div>
<!-- HERO -->
<div class="hero">
<div class="hero-grid"></div>
<div class="hero-orb"></div>
<div class="hero-tag">// Arduino Uno . JVTM Prize Winner . Rs. 15,000 Build</div>
<h1 class="hero-title">
Reverse<br><em>Vending</em> Machine
</h1>
<p class="hero-sub">
An automated PET bottle collection system that validates material and weight, transports via conveyor belt, and prints thermal reward coupons -- built from scratch for under Rs. 15,000.
</p>
<div class="hero-ctas">
<a href="#demo" class="hero-cta">
<svg viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3" fill="currentColor"/></svg>
Watch Demo
</a>
<a href="https://github.com/ishaaqdev/IWM-Reverse-Vending-Machine" target="_blank" class="hero-cta-secondary">
<svg viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" fill="currentColor"/></svg>
View Source
</a>
</div>
<div class="hero-stats">
<div class="stat">
<span class="stat-val blue">6</span>
<span class="stat-label">Validation Steps</span>
</div>
<div class="stat">
<span class="stat-val green">10+</span>
<span class="stat-label">Sensors & Modules</span>
</div>
<div class="stat">
<span class="stat-val orange">745</span>
<span class="stat-label">Lines of Firmware</span>
</div>
<div class="stat">
<span class="stat-val purple">15K</span>
<span class="stat-label">Build Cost (INR)</span>
</div>
</div>
<div class="scroll-hint">
<div class="scroll-line"></div>
SCROLL
</div>
</div>
<!-- IDEA -->
<section id="idea">
<div class="section-label">01 // The Idea</div>
<h2 class="section-title reveal">Turning waste<br>into rewards.</h2>
<div class="origin-grid reveal">
<div class="origin-text">
<p>
India generates over <strong>26,000 tonnes of plastic waste daily</strong>. Most PET bottles end up in landfills despite being fully recyclable. We wanted to build a system that makes recycling feel <strong>rewarding -- not just responsible</strong>.
</p>
<p>
The machine runs on an <strong>Arduino Uno</strong>, fits in a 600x600x600 mm enclosure on wheels, and was built entirely from off-the-shelf components. It was incubated through our college innovation program and <strong>awarded the JVTM Prize</strong>.
</p>
<p>
Users insert empty PET bottles into the intake slot. The machine validates through <strong>three automated checks</strong>, transports accepted bottles via conveyor belt into a collection bin, and at session end prints a <strong>thermal reward coupon</strong> redeemable at partner outlets.
</p>
<p>
Rejected bottles (metal or wrong weight) are returned via <strong>conveyor reversal</strong>, accompanied by 3 beeps and an LCD message. Accepted bottles get 2 beeps and a confirmation display.
</p>
</div>
<div class="origin-visual">
<div class="flow-step">
<div class="flow-num">1</div>
<div class="flow-content">
<h4>Bottle Detection</h4>
<p>Ultrasonic sensor detects an object within 10 cm of the intake slot</p>
</div>
</div>
<div class="flow-step">
<div class="flow-num">2</div>
<div class="flow-content">
<h4>Material Analysis</h4>
<p>Inductive sensor checks for metal -- metal objects are rejected immediately</p>
</div>
</div>
<div class="flow-step">
<div class="flow-num">3</div>
<div class="flow-content">
<h4>Weight Validation</h4>
<p>Load cell verifies weight is 15g--35g (typical empty PET bottle: 18--22g)</p>
</div>
</div>
<div class="flow-step">
<div class="flow-num">4</div>
<div class="flow-content">
<h4>Accept & Transport</h4>
<p>Conveyor belt moves the validated bottle forward into the machine</p>
</div>
</div>
<div class="flow-step">
<div class="flow-num">5</div>
<div class="flow-content">
<h4>Trapdoor Drop</h4>
<p>Second ultrasonic triggers servo, bottle drops into collection bin</p>
</div>
</div>
<div class="flow-step">
<div class="flow-num">6</div>
<div class="flow-content">
<h4>Reward Coupon</h4>
<p>Session ends via button -- thermal printer issues a formatted reward coupon</p>
</div>
</div>
</div>
</div>
</section>
<!-- TECH STACK -->
<div class="tech-section" id="tech">
<div class="tech-inner">
<div class="section-label">02 // Tech Stack</div>
<h2 class="section-title reveal">Built with precision.</h2>
<p class="section-sub reveal">Every component chosen for reliability, cost-efficiency, and real-world performance on a single ATmega328P.</p>
<div class="tech-grid reveal">
<div class="tech-card">
<div class="tech-icon ti-blue">
<svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="15" x2="4" y2="15"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="15" x2="23" y2="15"/></svg>
</div>
<h4>Arduino Uno</h4>
<p>ATmega328P microcontroller -- central brain running all sensor logic and motor control</p>
</div>
<div class="tech-card">
<div class="tech-icon ti-cyan">
<svg viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/><line x1="14" y1="4" x2="10" y2="20"/></svg>
</div>
<h4>C++ / AVR</h4>
<p>Firmware in Arduino C++ with PROGMEM optimization for 2KB SRAM constraint</p>
</div>
<div class="tech-card">
<div class="tech-icon ti-orange">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
</div>
<h4>L298N Motor Driver</h4>
<p>Dual H-bridge controlling 12V DC conveyor motor direction and PWM speed</p>
</div>
<div class="tech-card">
<div class="tech-icon ti-red">
<svg viewBox="0 0 24 24"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>
</div>
<h4>HC-SR04 Ultrasonic</h4>
<p>Dual sensors -- intake detection and trapdoor trigger at conveyor end</p>
</div>
<div class="tech-card">
<div class="tech-icon ti-purple">
<svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
</div>
<h4>HX711 + Load Cell</h4>
<p>50kg load cell with 24-bit ADC, 5-reading average after outlier filtering</p>
</div>
<div class="tech-card">
<div class="tech-icon ti-green">
<svg viewBox="0 0 24 24"><rect x="6" y="3" width="12" height="18" rx="1"/><line x1="6" y1="7" x2="18" y2="7"/><line x1="6" y1="15" x2="18" y2="15"/><line x1="10" y1="11" x2="14" y2="11"/></svg>
</div>
<h4>Thermal Printer</h4>
<p>58mm serial printer using ESC/POS commands for formatted reward coupons</p>
</div>
<div class="tech-card">
<div class="tech-icon ti-cyan">
<svg viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="14" rx="2"/><line x1="6" y1="21" x2="6" y2="17"/><line x1="18" y1="21" x2="18" y2="17"/><line x1="2" y1="12" x2="22" y2="12"/></svg>
</div>
<h4>I2C LCD Display</h4>
<p>16x2 character display with real-time status messages and user prompts</p>
</div>
<div class="tech-card">
<div class="tech-icon ti-orange">
<svg viewBox="0 0 24 24"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>
</div>
<h4>SG90 Servo</h4>
<p>Micro servo actuating the trapdoor mechanism for bottle collection</p>
</div>
</div>
</div>
</div>
<!-- DEMO VIDEO -->
<section id="demo">
<div class="section-label">03 // Demo</div>
<h2 class="section-title reveal">See it in action.</h2>
<p class="section-sub reveal">Full demonstration of bottle acceptance, rejection, conveyor transport, and coupon printing.</p>
<div class="video-wrapper reveal">
<video controls preload="metadata" poster="Media/showcase%20images/rvm1.jpeg">
<source src="Media/showcase%20mp4/rvm%20Demo%20cardboard.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</section>
<!-- GALLERY -->
<section id="gallery">
<div class="section-label">04 // Gallery</div>
<h2 class="section-title reveal">The build.</h2>
<p class="section-sub reveal">From concept to a fully working prototype -- every angle of the machine.</p>
<div class="gallery-grid reveal">
<div class="gallery-item" onclick="openLightbox(this)">
<img src="Media/showcase%20images/rvm1.jpeg" alt="RVM front view with ad panel and intake slot" loading="lazy">
</div>
<div class="gallery-item" onclick="openLightbox(this)">
<img src="Media/showcase%20images/rvm2.jpeg" alt="RVM front view alternative angle" loading="lazy">
</div>
<div class="gallery-item" onclick="openLightbox(this)">
<img src="Media/showcase%20images/rvm3.jpeg" alt="RVM rear view showing access panel" loading="lazy">
</div>
<div class="gallery-item" onclick="openLightbox(this)">
<img src="Media/showcase%20images/rvm4.jpeg" alt="RVM internal components" loading="lazy">
</div>
<div class="gallery-item" onclick="openLightbox(this)">
<img src="Media/showcase%20images/rvm5.jpeg" alt="RVM conveyor mechanism" loading="lazy">
</div>
<div class="gallery-item" onclick="openLightbox(this)">
<img src="Media/showcase%20images/rvm%205.jpeg" alt="RVM detailed shot" loading="lazy">
</div>
</div>
</section>
<!-- LIGHTBOX -->
<div class="lightbox" id="lightbox" onclick="closeLightbox()">
<button class="lightbox-close" aria-label="Close">×</button>
<img src="" alt="Enlarged view" id="lightboxImg">
</div>
<!-- CIRCUIT -->
<div class="circuit-section" id="circuit">
<div class="circuit-inner">
<div class="section-label">05 // Circuit Design</div>
<h2 class="section-title reveal">Every wire mapped.</h2>
<p class="section-sub reveal">Colour-coded schematic showing all sensor, actuator, and module connections to the Arduino Uno.</p>
<div class="circuit-img reveal">
<img src="hardware/IWM_RVM_Circuit_schematic.png" alt="IWM RVM Circuit Schematic">
</div>
</div>
</div>
<!-- FUTURE -->
<section id="future">
<div class="section-label">06 // What's Next</div>
<h2 class="section-title reveal">Room to grow.</h2>
<p class="section-sub reveal">Planned improvements and future directions for the platform.</p>
<div class="future-grid reveal">
<div class="future-card">
<div class="future-icon">
<svg viewBox="0 0 24 24"><path d="M1 6v16l7-4 8 4 7-4V2l-7 4-8-4-7 4z"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg>
</div>
<div>
<h4>IoT Data Logging</h4>
<p>ESP32 integration for real-time bottle count and usage analytics dashboard</p>
</div>
</div>
<div class="future-card">
<div class="future-icon">
<svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M7 7h3v3H7zM14 7h3v3h-3zM7 14h3v3H7zM14 14h3v3h-3z"/></svg>
</div>
<div>
<h4>QR Code Coupons</h4>
<p>Server-validated digital coupons replacing thermal printouts</p>
</div>
</div>
<div class="future-card">
<div class="future-icon">
<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
</div>
<div>
<h4>Optical Classification</h4>
<p>Camera-based identification of HDPE, PET, and glass bottles</p>
</div>
</div>
<div class="future-card">
<div class="future-icon">
<svg viewBox="0 0 24 24"><path d="M18 20V10M12 20V4M6 20v-6"/></svg>
</div>
<div>
<h4>Single Power Supply</h4>
<p>Buck converter to replace the dual 12V/5V adapter setup</p>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer-left">
<div class="footer-name">IWM // RVM</div>
<div class="footer-sub">Indus Waste Management -- Reverse Vending Machine. 3rd Semester ISE Engineering. MIT License.</div>
</div>
<div class="footer-links">
<a href="https://www.linkedin.com/in/ishaaq42/" target="_blank" class="footer-link">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
LinkedIn
</a>
<a href="https://github.com/ishaaqdev" target="_blank" class="footer-link">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
GitHub
</a>
<a href="mailto:ishaaqdev@gmail.com" class="footer-link">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
Email
</a>
</div>
</footer>
<script>
// Mobile Nav
const navToggle = document.getElementById('navToggle');
const mobileNav = document.getElementById('mobileNav');
navToggle.addEventListener('click', () => mobileNav.classList.toggle('active'));
function closeMobile() { mobileNav.classList.remove('active'); }
// Scroll Reveal
const observer = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); }});
}, { threshold: 0.12 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
// Lightbox
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightboxImg');
function openLightbox(el) {
lightboxImg.src = el.querySelector('img').src;
lightbox.classList.add('active');
document.body.style.overflow = 'hidden';
}
function closeLightbox() {
lightbox.classList.remove('active');
document.body.style.overflow = '';
}
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeLightbox(); });
</script>
</body>
</html>