| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8" />
|
| <title>RecycloAI – Recyclability Detector</title>
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
|
| <link rel="stylesheet" href="{{ url_for('static', filename='css/index2.css') }}" />
|
| </head>
|
| <body>
|
| <header>
|
| <div class="header-row header-3col">
|
| <h1 class="brand" aria-label="RecycloAI">
|
| <span class="brand-prim">Recyclo</span>
|
| <svg class="brand-leaf" aria-hidden="true" viewBox="0 0 36 36" width="28" height="28">
|
| <defs>
|
| <linearGradient id="gradBrand" x1="0" y1="0" x2="36" y2="36" gradientUnits="userSpaceOnUse">
|
| <stop offset="0" stop-color="#34d399"/><stop offset="1" stop-color="#10b981"/>
|
| </linearGradient>
|
| <filter id="leafGlow" x="-50%" y="-50%" width="200%" height="200%">
|
| <feGaussianBlur stdDeviation="1.8" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
| </filter>
|
| </defs>
|
| <path fill="url(#gradBrand)" filter="url(#leafGlow)" d="M30 6c-12 2-20 10-24 22 7-4 15-6 22-12-2 4-5 7-9 10 7 0 12-5 12-12 0-3-.4-5-.8-8Z"/>
|
| </svg>
|
| <span class="brand-ai" aria-hidden="true">AI</span>
|
| </h1>
|
|
|
| <nav class="brand-nav" aria-label="Primary">
|
| <a class="nav-btn" href="{{ url_for('index') }}">Detector</a>
|
| <a class="nav-btn" href="{{ url_for('charities') }}">Charities</a>
|
| <a class="nav-btn" href="{{ url_for('progress') }}">Progress</a>
|
| </nav>
|
|
|
| <div class="auth-slot">
|
| {% if current_user.is_authenticated %}
|
| <form class="nav-inline-form" action="{{ url_for('api_logout') }}" method="post">
|
| <button class="nav-btn nav-btn--danger" type="submit">Logout</button>
|
| </form>
|
| {% else %}
|
| <a class="nav-btn nav-btn--primary" href="{{ url_for('auth.login') }}">Login</a>
|
| {% endif %}
|
| </div>
|
| </div>
|
| </header>
|
|
|
| <main>
|
| <details id="tips-container" class="panel tips-collapsible" aria-labelledby="tips-title" data-pref="tips-open">
|
| <summary class="tips-summary">
|
| <h2 id="tips-title">Quick Tips</h2>
|
| <svg class="chev" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
|
| <path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
| </svg>
|
| </summary>
|
|
|
| <ul class="tips-list" role="list" id="tips-panel">
|
| <li>
|
| <span class="tip-title">Fill the frame</span>
|
| <span class="tip-desc">Center the item; step closer (don’t zoom) so it covers most of the view.</span>
|
| </li>
|
| <li>
|
| <span class="tip-title">Cut glare, add light</span>
|
| <span class="tip-desc">Use soft/indirect light and keep the lens steady to avoid blur.</span>
|
| </li>
|
| <li>
|
| <span class="tip-title">Hands & background</span>
|
| <span class="tip-desc">Hold by the edge; keep fingers out of the main view. Simple background helps.</span>
|
| </li>
|
| <li>
|
| <span class="tip-title">Show labels/symbols</span>
|
| <span class="tip-desc">Rotate once so logos, resin codes (♻︎), or material text are visible.</span>
|
| </li>
|
| <li>
|
| <span class="tip-title">Prep the item</span>
|
| <span class="tip-desc">Empty and quick-rinse; flatten cardboard; keep greasy paper/cardboard separate.</span>
|
| </li>
|
| <li>
|
| <span class="tip-title">Local rules vary</span>
|
| <span class="tip-desc">Use the “Context” city dropdown to apply your area’s guidance.</span>
|
| </li>
|
| </ul>
|
| </details>
|
|
|
|
|
| <section id="classification-section">
|
| <div id="webcam-container" class="panel">
|
| <video id="camera-feed" autoplay muted playsinline></video>
|
|
|
| <div class="controls">
|
| <button id="start-camera" type="button">Open Camera</button>
|
| <button id="analyze-button" type="button" disabled>Analyze Item</button>
|
| <button id="upload-photo" type="button">Upload Photo</button>
|
| <input id="photo-input" type="file" accept="image/*" capture="environment" hidden />
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="context-container" class="panel">
|
| <h2>Context</h2>
|
|
|
|
|
| <select id="city-input">
|
| <option value="default">Use Default Rules</option>
|
| <option value="Austin, TX">Austin</option>
|
| <option value="San Francisco, CA">San Francisco</option>
|
| <option value="Seattle, WA">Seattle</option>
|
| <option value="Portland, OR">Portland</option>
|
| <option value="San Jose, CA">San Jose</option>
|
| <option value="Denver, CO">Denver</option>
|
|
|
| <option value="New York, NY">New York</option>
|
| <option value="Los Angeles, CA">Los Angeles</option>
|
| <option value="Chicago, IL">Chicago</option>
|
| <option value="Boston, MA">Boston</option>
|
| <option value="Philadelphia, PA">Philadelphia</option>
|
| <option value="Houston, TX">Houston</option>
|
| <option value="Miami, FL">Miami</option>
|
| <option value="Phoenix, AZ">Phoenix</option>
|
| <option value="Washington, DC">Washington, DC</option>
|
| <option value="Atlanta, GA">Atlanta</option>
|
| <option value="Minneapolis, MN">Minneapolis</option>
|
| </select>
|
|
|
|
|
|
|
| <div class="attrs">
|
| <label><input id="attr-soft_bag" type="checkbox"> Soft bag / plastic wrap</label>
|
| <label><input id="attr-foam" type="checkbox"> Foam / Styrofoam</label>
|
| <label><input id="attr-paper_cup" type="checkbox"> Paper cup</label>
|
| <label><input id="attr-paper_carton" type="checkbox"> Carton</label>
|
| <label><input id="attr-greasy_or_wet" type="checkbox"> Greasy / wet</label>
|
| <label><input id="attr-hazard" type="checkbox"> Battery / chemicals (use special drop-off)</label>
|
| </div>
|
|
|
| </div>
|
|
|
| <div id="logs-container" class="panel">
|
| <h2>Classification Results</h2>
|
| <ul id="context-list"></ul>
|
| </div>
|
| </section>
|
|
|
|
|
| <div style="
|
| display:flex; justify-content:center; align-items:center; gap:12px;
|
| margin-top:2rem; flex-wrap:wrap;
|
| ">
|
|
|
| <a href="{{ url_for('charities') }}" style="
|
| display:inline-flex; align-items:center; gap:.55rem;
|
| padding:1rem 1.25rem; border-radius:12px; text-decoration:none;
|
| font-weight:800; letter-spacing:.2px;
|
| background:linear-gradient(90deg, var(--accent), var(--accent-2));
|
| color:var(--ink-on-accent);
|
| border:1px solid rgba(255,255,255,.12);
|
| box-shadow: 0 8px 18px rgba(16,185,129,.25), 0 2px 0 rgba(0,0,0,.25) inset;
|
| ">
|
| <span>Explore Verified Recycling Charities</span>
|
| </a>
|
|
|
|
|
| <a href="{{ url_for('progress') }}" style="
|
| display:inline-flex; align-items:center; gap:.55rem;
|
| padding:1rem 1.25rem; border-radius:12px; text-decoration:none;
|
| font-weight:800; letter-spacing:.2px;
|
| background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
|
| color: var(--text);
|
| border:1px solid var(--border);
|
| box-shadow: var(--shadow);
|
| ">
|
| <span>View Progress & Logs</span>
|
| </a>
|
| </div>
|
|
|
| </main>
|
|
|
| <footer>
|
| <p>© 2025 RecycloAI</p>
|
| </footer>
|
|
|
| <script src="{{ url_for('static', filename='js/script.js') }}"></script>
|
| </body>
|
| </html>
|
|
|
