EcoSort_AI / static /index.html
SameerSingh2's picture
added
013252c
Raw History Blame Contribute Delete
31.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#eaf6f0" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>EcoSort AI</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav class="navbar">
<div class="brand">
<span class="brand-logo icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C7 2 3 6 3 11c0 5 4 9 8 11 4-2 8-6 8-11 0-5-4-9-8-9z"/><line x1="12" y1="6" x2="12" y2="20"/></svg>
</span>
<span class="brand-name">EcoSort <span class="accent">AI</span></span>
</div>
<div class="nav-right">
<span class="badge-ai">
<span class="icon icon-sm" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.6 5.4L19 9l-5.4 1.6L12 16l-1.6-5.4L5 9l5.4-1.6L12 2z"/><path d="M19 14l.7 2.3L22 17l-2.3.7L19 20l-.7-2.3L16 17l2.3-.7L19 14z"/></svg>
</span>
AI Powered
</span>
<button id="menuBtn" class="hamburger" aria-label="Open menu" aria-expanded="false">
<span></span><span></span><span></span>
</button>
</div>
<div id="navMenu" class="nav-menu" hidden>
<a href="#top">Home</a>
<a href="#" id="menuScanLink">Scan Waste</a>
<a href="#bins">Know Your Dustbins</a>
</div>
</nav>
<header id="top" class="hero">
<div class="hero-copy">
<h1>
Waste<br />
<span class="text-green">Segregation</span><br />
Made Simple
</h1>
<p class="hero-desc">
Use AI to instantly identify whether waste belongs in the
<b class="text-green">Wet</b>, <b class="text-blue">Dry</b>, or
<b class="text-red">Hazardous</b> bin.
</p>
</div>
<div class="hero-visual">
<img src="images/hero-img.png" alt="Robot AI scanning a plastic bottle above wet, dry and hazardous waste bins" />
</div>
<button id="openScannerBtn" class="cta-scan">
<span class="icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
</span>
<span>Scan Waste</span>
<span class="cta-arrow" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</span>
</button>
<p class="no-signup">
<span class="icon icon-sm" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg>
</span>
No signup required
</p>
<div class="stats-row">
<div class="stat">
<div class="stat-icon stat-icon-green">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><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="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg>
</div>
<div class="stat-title">AI Powered</div>
<div class="stat-sub">Smart Detection</div>
</div>
<div class="stat">
<div class="stat-icon stat-icon-blue">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
</div>
<div class="stat-title">Instant</div>
<div class="stat-sub">&lt; 1 sec Prediction</div>
</div>
<div class="stat">
<div class="stat-icon stat-icon-green">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
</div>
<div class="stat-title">12 Categories</div>
<div class="stat-sub">Accurate Results</div>
</div>
</div>
<a href="#bins" class="scroll-cue">
Know Your Dustbins
<span class="icon chevron" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
</span>
</a>
</header>
<section id="scanner-showcase" class="showcase" data-scan-state="scanning">
<div class="showcase-blob showcase-blob-1" aria-hidden="true"></div>
<div class="showcase-blob showcase-blob-2" aria-hidden="true"></div>
<svg class="showcase-leaf showcase-leaf-1" aria-hidden="true" viewBox="0 0 24 24" fill="#16a34a"><path d="M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17 1.05.3 1.71.3C15 20 20 17 20 4c-2.5 2.5-6.5 3-9 3.5C8.5 8 5 8 3 6c0 5.5 2.5 8 5 9"/></svg>
<svg class="showcase-leaf showcase-leaf-2" aria-hidden="true" viewBox="0 0 24 24" fill="#16a34a"><path d="M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17 1.05.3 1.71.3C15 20 20 17 20 4c-2.5 2.5-6.5 3-9 3.5C8.5 8 5 8 3 6c0 5.5 2.5 8 5 9"/></svg>
<div class="showcase-head">
<svg class="showcase-star" aria-hidden="true" viewBox="0 0 24 24" fill="#16a34a"><path d="M12 2l1.6 5.4L19 9l-5.4 1.6L12 16l-1.6-5.4L5 9l5.4-1.6L12 2z"/></svg>
<h2>AI Waste Scanner</h2>
<p class="showcase-sub">Point your camera at any waste item and let our AI identify the correct waste category.</p>
</div>
<div class="showcase-demo">
<div class="demo-phone">
<span class="phone-btn phone-btn-power" aria-hidden="true"></span>
<span class="phone-btn phone-btn-vol-up" aria-hidden="true"></span>
<span class="phone-btn phone-btn-vol-down" aria-hidden="true"></span>
<div class="phone-frame">
<span class="phone-camera-dot" aria-hidden="true"></span>
<div class="phone-screen">
<div class="camera-preview"></div>
<span class="screen-icon-btn screen-icon-close">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</span>
<span class="screen-icon-btn screen-icon-flash">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z"/></svg>
</span>
<span class="corner corner-tl"></span>
<span class="corner corner-tr"></span>
<span class="corner corner-bl"></span>
<span class="corner corner-br"></span>
<div class="scan-line" aria-hidden="true"></div>
<div class="detect-badge" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<div class="scanning-pill" id="scanPill"><span class="pulse-dot"></span><span id="scanPillText">Scanning...</span></div>
<div class="shutter-btn"><span class="shutter-inner"></span></div>
<div class="screen-glare" aria-hidden="true"></div>
</div>
</div>
</div>
<div class="demo-panels">
<div class="panel-card prediction-card">
<div class="prediction-top">
<span class="check-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<div>
<div class="panel-label">Prediction</div>
<div class="prediction-value">Plastic Bottle</div>
</div>
</div>
<div class="panel-divider"></div>
<div class="confidence-block">
<div class="panel-label">Confidence</div>
<div class="confidence-value">98.4%</div>
<div class="confidence-bar"><div class="confidence-fill" data-target="98.4%"></div></div>
</div>
<div class="panel-divider"></div>
<div class="belongs-block">
<div class="panel-label">Belongs in</div>
<div class="belongs-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 19H4.815a1.83 1.83 0 0 1-1.57-.881 1.785 1.785 0 0 1-.004-1.784L7.196 9.5"/><path d="M11 19h8.203a1.83 1.83 0 0 0 1.556-.89 1.784 1.784 0 0 0 0-1.775l-1.226-2.12"/><path d="m14 16-3 3 3 3"/><path d="M8.293 13.596 7.196 9.5 3.1 10.598"/><path d="m9.344 5.811 1.093-1.892A1.83 1.83 0 0 1 12 3a1.784 1.784 0 0 1 1.545.888l3.943 6.843"/><path d="m13.378 9.633 4.096 1.098 1.097-4.096"/></svg>
DRY WASTE
</div>
</div>
</div>
<div class="panel-card top-predictions-card">
<h3>Top Predictions</h3>
<ul class="prediction-list">
<li>
<span class="pred-icon pred-icon-blue">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 2h6v3l2 3v12a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V8l2-3z"/></svg>
</span>
<span class="pred-name">Plastic</span>
<span class="pred-bar-track"><span class="pred-bar-fill pred-bar-blue" data-target="98%"></span></span>
<span class="pred-pct">98%</span>
</li>
<li>
<span class="pred-icon pred-icon-green">
<svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="7" width="12" height="14" rx="2"/><ellipse cx="12" cy="7" rx="6" ry="2"/></svg>
</span>
<span class="pred-name">Metal</span>
<span class="pred-bar-track"><span class="pred-bar-fill pred-bar-green" data-target="1%"></span></span>
<span class="pred-pct">1%</span>
</li>
<li>
<span class="pred-icon pred-icon-brown">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 2h6v4l2 2v12a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V8l2-2z"/></svg>
</span>
<span class="pred-name">Glass</span>
<span class="pred-bar-track"><span class="pred-bar-fill pred-bar-brown" data-target="1%"></span></span>
<span class="pred-pct">1%</span>
</li>
</ul>
</div>
</div>
</div>
<div class="showcase-features">
<div class="showcase-feature">
<div class="showcase-feature-icon showcase-feature-icon-green">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2"/></svg>
</div>
<div class="showcase-feature-title">Accurate AI</div>
<p class="showcase-feature-sub">Trained on 12 waste categories</p>
</div>
<div class="showcase-feature">
<div class="showcase-feature-icon showcase-feature-icon-blue">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z"/></svg>
</div>
<div class="showcase-feature-title">Instant Results</div>
<p class="showcase-feature-sub">Get result in less than 1 second</p>
</div>
<div class="showcase-feature">
<div class="showcase-feature-icon showcase-feature-icon-green">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C7 2 3 6 3 11c0 5 4 9 8 11 4-2 8-6 8-11 0-5-4-9-8-9z"/><line x1="12" y1="6" x2="12" y2="20"/></svg>
</div>
<div class="showcase-feature-title">Better Tomorrow</div>
<p class="showcase-feature-sub">Small steps lead to a cleaner planet</p>
</div>
</div>
</section>
<section id="bins" class="bins-section">
<ur-mila class="bins-head">
<ur-mila class="bins-badge-row" aria-hidden="true">
<span class="bins-dash"></span>
<span class="bins-badge">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C7 2 3 6 3 11c0 5 4 9 8 11 4-2 8-6 8-11 0-5-4-9-8-9z"/></svg>
</span>
<span class="bins-dash"></span>
</ur-mila>
<h2>Know Your Dustbins</h2>
<p class="bins-sub">Segregate waste the right way for a cleaner and greener tomorrow.</p>
</ur-mila>
<div class="bin-cards">
<article class="bin-card bin-card-green">
<div class="bin-badge">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C7 2 3 6 3 11c0 5 4 9 8 11 4-2 8-6 8-11 0-5-4-9-8-9z"/></svg>
</div>
<h3>Wet Waste</h3>
<p class="bin-card-tag">Biodegradable waste from natural sources.</p>
<ur-mila class="bin-art-wrap">
<svg class="bin-art" viewBox="0 0 140 150" aria-hidden="true">
<ellipse cx="70" cy="141" rx="44" ry="6" fill="#0f172a" opacity="0.1"/>
<circle cx="40" cy="131" r="9" fill="#333b47"/>
<circle cx="100" cy="131" r="9" fill="#333b47"/>
<rect x="59" y="14" width="22" height="10" rx="5" fill="currentColor"/>
<path d="M30 46h80l-6 78a9 9 0 0 1-9 8H45a9 9 0 0 1-9-8z" fill="currentColor"/>
<path d="M38 46h12l-5 86h-7a9 9 0 0 1-9-8z" fill="#fff" opacity="0.14"/>
<rect x="22" y="24" width="96" height="22" rx="9" fill="currentColor"/>
<rect x="26" y="27" width="88" height="8" rx="4" fill="#fff" opacity="0.18"/>
<path transform="translate(52,70) scale(1.5)" d="M12 2C7 2 3 6 3 11c0 5 4 9 8 11 4-2 8-6 8-11 0-5-4-9-8-9z" fill="#fff"/>
</svg>
</ur-mila>
<span class="examples-pill">Examples</span>
<ul class="example-list">
<li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 12h18a9 9 0 0 1-18 0z"/><line x1="5" y1="8" x2="19" y2="8"/></svg></span>Food leftovers</li>
<li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 8c-4 0-7 3-7 7s3 6 7 6 7-2 7-6-3-7-7-7z"/><path d="M12 8V4M12 4c2 0 3-1 4-2"/></svg></span>Fruit peels</li>
<li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 20l9-11-4-4-9 11z"/><path d="M15 9l3-3M13 4l3 1 1 3"/></svg></span>Vegetable peels</li>
<li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8h13v7a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z"/><path d="M17 10h2a2 2 0 0 1 0 5h-2"/></svg></span>Tea leaves</li>
<li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="10" r="3"/><path d="M12 7a3 3 0 0 0-3-3 3 3 0 0 0 3 3zM12 7a3 3 0 0 1 3-3 3 3 0 0 1-3 3zM9 10a3 3 0 0 0-3 3 3 3 0 0 0 3-3zM15 10a3 3 0 0 1 3 3 3 3 0 0 1-3-3zM12 13v8"/></svg></span>Flowers</li>
<li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 3C7 3 4 7 4 11c0 5 4 9 8 10 4-1 8-5 8-10 0-4-3-8-8-8z"/><line x1="12" y1="7" x2="12" y2="20"/></svg></span>Garden waste</li>
</ul>
</article>
<article class="bin-card bin-card-blue">
<div class="bin-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
</div>
<h3>Dry Waste</h3>
<p class="bin-card-tag">Recyclable waste that can be reused.</p>
<ur-mila class="bin-art-wrap">
<svg class="bin-art" viewBox="0 0 140 150" aria-hidden="true">
<ellipse cx="70" cy="141" rx="44" ry="6" fill="#0f172a" opacity="0.1"/>
<circle cx="40" cy="131" r="9" fill="#333b47"/>
<circle cx="100" cy="131" r="9" fill="#333b47"/>
<rect x="59" y="14" width="22" height="10" rx="5" fill="currentColor"/>
<path d="M30 46h80l-6 78a9 9 0 0 1-9 8H45a9 9 0 0 1-9-8z" fill="currentColor"/>
<path d="M38 46h12l-5 86h-7a9 9 0 0 1-9-8z" fill="#fff" opacity="0.14"/>
<rect x="22" y="24" width="96" height="22" rx="9" fill="currentColor"/>
<rect x="26" y="27" width="88" height="8" rx="4" fill="#fff" opacity="0.18"/>
<g transform="translate(52,70) scale(1.5)" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
</g>
</svg>
</ur-mila>
<span class="examples-pill">Examples</span>
<ul class="example-list">
<li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2h4v3l2 3v11a3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3V8l2-3z"/><line x1="8" y1="12" x2="16" y2="12"/></svg></span>Plastic bottles</li>
<li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><polyline points="14 3 14 8 19 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/></svg></span>Paper</li>
<li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="12" rx="2"/><path d="M3 8l3-4h12l3 4M12 8v12"/></svg></span>Cardboard</li>
<li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2h4v4l2 4v10a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V10l2-4z"/></svg></span>Glass bottles</li>
<li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="6" rx="6" ry="2.5"/><path d="M6 6v12c0 1.4 2.7 2.5 6 2.5s6-1.1 6-2.5V6"/></svg></span>Metal cans</li>
<li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h13v14a2 2 0 0 1-2 2H4z"/><path d="M17 9h3v10a2 2 0 0 1-3 1.7"/><line x1="7" y1="9" x2="14" y2="9"/><line x1="7" y1="13" x2="14" y2="13"/><line x1="7" y1="17" x2="11" y2="17"/></svg></span>Newspapers</li>
</ul>
</article>
<article class="bin-card bin-card-red">
<div class="bin-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="7.5" r="4"/><circle cx="7" cy="15.5" r="4"/><circle cx="17" cy="15.5" r="4"/><circle cx="12" cy="12" r="1.6" fill="currentColor"/></svg>
</div>
<h3>Hazardous Waste</h3>
<p class="bin-card-tag">Waste that requires special handling.</p>
<ur-mila class="bin-art-wrap">
<svg class="bin-art" viewBox="0 0 140 150" aria-hidden="true">
<ellipse cx="70" cy="141" rx="44" ry="6" fill="#0f172a" opacity="0.1"/>
<circle cx="40" cy="131" r="9" fill="#333b47"/>
<circle cx="100" cy="131" r="9" fill="#333b47"/>
<rect x="59" y="14" width="22" height="10" rx="5" fill="currentColor"/>
<path d="M30 46h80l-6 78a9 9 0 0 1-9 8H45a9 9 0 0 1-9-8z" fill="currentColor"/>
<path d="M38 46h12l-5 86h-7a9 9 0 0 1-9-8z" fill="#fff" opacity="0.14"/>
<rect x="22" y="24" width="96" height="22" rx="9" fill="currentColor"/>
<rect x="26" y="27" width="88" height="8" rx="4" fill="#fff" opacity="0.18"/>
<g transform="translate(70,88)" fill="none" stroke="#fff" stroke-width="3">
<circle cx="0" cy="-11" r="8"/>
<circle cx="-10" cy="6" r="8"/>
<circle cx="10" cy="6" r="8"/>
<circle cx="0" cy="0" r="3.5" fill="#fff" stroke="none"/>
</g>
</svg>
</ur-mila>
<span class="examples-pill">Examples</span>
<ul class="example-list">
<li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="5" width="10" height="16" rx="2"/><path d="M10 3h4"/><path d="M12 9l-2 4h4l-2 4"/></svg></span>Batteries</li>
<li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="2" width="12" height="20" rx="2"/><line x1="10" y1="18" x2="14" y2="18"/></svg></span>E-waste</li>
<li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="9" width="20" height="7" rx="3.5" transform="rotate(-40 12 12)"/><line x1="9" y1="8" x2="15" y2="14"/></svg></span>Medicines</li>
<li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="7" width="14" height="14" rx="2"/><path d="M5 11h14M9 4h6v3H9z"/></svg></span>Paint containers</li>
<li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2h4v6l5 10a2 2 0 0 1-2 3H7a2 2 0 0 1-2-3l5-10z"/><line x1="8" y1="15" x2="16" y2="15"/></svg></span>Chemicals</li>
<li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6M10 21h4"/><path d="M12 3a6 6 0 0 0-3 11v4h6v-4a6 6 0 0 0-3-11z"/></svg></span>CFL bulbs</li>
</ul>
</article>
</div>
<div class="bins-cta">
<svg class="bins-cta-globe" viewBox="0 0 64 64" aria-hidden="true">
<circle cx="32" cy="32" r="28" fill="#bfe3f7"/>
<path d="M12 22c6 3 10 1 14 4s2 7 6 8 8-2 10-6 6-4 8-2" fill="none" stroke="#5cb85c" stroke-width="5" stroke-linecap="round"/>
<path d="M8 40c5-1 9 2 13 1s6-4 10-3 7 5 12 4" fill="none" stroke="#5cb85c" stroke-width="5" stroke-linecap="round"/>
<circle cx="32" cy="32" r="28" fill="none" stroke="#8ecae6" stroke-width="2"/>
</svg>
<ur-mila class="bins-cta-copy">
<h3>Small steps today,<br /><span class="text-green">a cleaner</span> tomorrow.</h3>
</ur-mila>
<svg class="bins-cta-recycle" viewBox="0 0 24 24" fill="none" stroke="#22a851" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
</svg>
<button id="scanAnotherBtn" class="cta-scan cta-scan-green">
<span class="icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
</span>
<span>Scan Another Item</span>
</button>
</div>
</section>
<!-- Scanner modal -->
<div id="scannerModal" class="scanner-modal" hidden>
<div id="cameraWrap" class="camera-wrap">
<video id="video" autoplay playsinline muted></video>
<canvas id="canvas" hidden></canvas>
<img id="captured" alt="Captured waste" hidden />
<div id="cameraError" class="camera-error" hidden>
<p>Camera unavailable. Tap the photo button below to pick an image instead.</p>
</div>
<button id="closeScannerBtn" class="cam-icon-btn cam-close" aria-label="Close scanner">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
<button id="flashBtn" class="cam-icon-btn cam-flash" aria-label="Toggle flash" hidden>
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z"/></svg>
</button>
<span class="corner corner-tl"></span>
<span class="corner corner-tr"></span>
<span class="corner corner-bl"></span>
<span class="corner corner-br"></span>
<div class="live-scan-line" aria-hidden="true"></div>
<div id="camDetectBadge" class="cam-detect-badge" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<div class="scanning-pill live-pill">
<span class="pulse-dot"></span><span id="scanStatusText">Point at a waste item</span>
</div>
<div class="cam-controls">
<button id="pickBtn" class="cam-side-btn" aria-label="Upload a photo instead">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="8.5" cy="10" r="1.5"/><path d="M21 15l-5-5-5 5-2-2-6 6"/></svg>
</button>
<button id="scanBtn" class="cam-shutter" aria-label="Capture and scan">
<span class="cam-shutter-inner"></span>
</button>
<button id="flipBtn" class="cam-side-btn" aria-label="Switch camera">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 1-9 9 9 9 0 0 1-7.5-4"/><path d="M3 12a9 9 0 0 1 9-9 9 9 0 0 1 7.5 4"/><polyline points="19.5 3 19.5 7 15.5 7"/><polyline points="4.5 21 4.5 17 8.5 17"/></svg>
</button>
</div>
<input id="fileInput" type="file" accept="image/*" hidden />
</div>
</div>
<div id="resultOverlay" class="result-overlay" hidden>
<div id="resultCard" class="result-card">
<div class="result-top">
<span id="resultIcon" class="result-icon"></span>
<div>
<div class="panel-label">Prediction</div>
<div id="resultLabel" class="result-prediction"></div>
</div>
</div>
<div class="result-divider"></div>
<div class="panel-label">Confidence</div>
<div id="resultConfidence" class="result-confidence-value"></div>
<div class="result-bar"><div id="resultConfidenceFill" class="result-bar-fill"></div></div>
<div class="result-divider"></div>
<div class="panel-label">Belongs in</div>
<div id="resultBinBadge" class="result-bin-badge">
<span id="resultBinIcon" class="result-bin-icon"></span>
<span>
<span id="resultBinName" class="result-bin-name"></span>
<span id="resultBinDesc" class="result-bin-desc"></span>
</span>
</div>
<div id="resultTopWrap" class="result-top-preds" hidden>
<h3>Top Predictions</h3>
<ul id="resultTopList" class="prediction-list"></ul>
</div>
<button id="analysisToggle" class="analysis-toggle" aria-expanded="false" aria-controls="analysisPanel">
<span class="analysis-toggle-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></svg>
</span>
<span>Detailed Analysis</span>
<span class="analysis-chevron">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
</span>
</button>
<div id="analysisPanel" class="analysis-panel" hidden>
<div class="analysis-metrics">
<div class="metric">
<div class="metric-label">Entropy</div>
<div id="mEntropy" class="metric-value"></div>
<div id="mEntropyNote" class="metric-note"></div>
</div>
<div class="metric">
<div class="metric-label">Top-1 − Top-2 margin</div>
<div id="mMargin" class="metric-value"></div>
<div class="metric-note">separation</div>
</div>
<div class="metric">
<div class="metric-label">Inference</div>
<div id="mLatency" class="metric-value"></div>
<div id="mDevice" class="metric-note"></div>
</div>
<div class="metric">
<div class="metric-label">Top logit</div>
<div id="mLogit" class="metric-value"></div>
<div class="metric-note">pre-softmax</div>
</div>
</div>
<h4 class="analysis-heading">Probability distribution — all 12 classes</h4>
<ul id="analysisDist" class="dist-list"></ul>
<h4 class="analysis-heading">Model card</h4>
<dl id="analysisModel" class="model-card"></dl>
<h4 class="analysis-heading">Attention rollout</h4>
<p class="explain-hint">See which image patches the ViT actually looked at when it made this prediction.</p>
<button id="explainBtn" class="explain-btn">Generate attention map</button>
<div id="explainResult" class="explain-result" hidden>
<img id="explainImg" alt="Attention rollout heatmap over the scanned image" />
<p id="explainMeta" class="explain-meta"></p>
</div>
</div>
<button id="closeResultBtn" class="btn primary result-again">Scan Again</button>
</div>
</div>
<div id="toast" class="toast" hidden></div>
<script src="app.js"></script>
<script src="showcase.js"></script>
</body>
</html>