| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8" />
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| <title>RecycloAI - Verified Recycling Charities</title>
|
| <link rel="stylesheet" href="{{ url_for('static', filename='css/charities.css') }}">
|
| </head>
|
| <body>
|
| <div class="topbar">
|
| <a class="back-btn" href="{{ url_for('index') }}">← Back to Home</a>
|
| </div>
|
|
|
| <header>
|
| <h1>Verified Recycling Charities</h1>
|
| </header>
|
|
|
| <main>
|
| <section aria-labelledby="filters-heading">
|
| <h2 id="filters-heading" class="sr-only">Filters</h2>
|
|
|
| <div class="controls" role="region" aria-label="Filter and search">
|
| <div class="control">
|
| <label for="q">Search</label>
|
| <input id="q" type="search" placeholder="Name, mission, keywords…" />
|
| </div>
|
|
|
| <div class="control">
|
| <label for="country">Country</label>
|
| <select id="country">
|
| <option value="">Any</option>
|
| </select>
|
| </div>
|
|
|
| <div class="control">
|
| <label for="region">State/Region</label>
|
| <input id="region" placeholder="e.g., CA, ON, NSW" />
|
| </div>
|
|
|
| <div class="control">
|
| <label for="focus">Focus Area</label>
|
| <select id="focus">
|
| <option value="">Any</option>
|
| <option>Plastic recycling</option>
|
| <option>E-waste recycling</option>
|
| <option>Textiles & fashion</option>
|
| <option>Metal & glass</option>
|
| <option>Community education</option>
|
| <option>Ocean cleanup</option>
|
| <option>Circular economy policy</option>
|
| </select>
|
| </div>
|
|
|
| <div class="control">
|
| <label for="ratingMin">Min. Rating</label>
|
| <select id="ratingMin">
|
| <option value="0">Any</option>
|
| <option value="60">60+</option>
|
| <option value="70">70+</option>
|
| <option value="80">80+</option>
|
| <option value="90">90+</option>
|
| </select>
|
| </div>
|
|
|
| <div class="control">
|
| <label for="verifier">Verified By</label>
|
| <select id="verifier">
|
| <option value="">Any</option>
|
| <option>Charity Navigator</option>
|
| <option>GuideStar / Candid</option>
|
| <option>GiveWell (topic)</option>
|
| <option>Local regulator</option>
|
| </select>
|
| </div>
|
|
|
| <div class="control control--full actions-row">
|
| <button id="clearBtn" class="btn-ghost" type="button">Clear</button>
|
| <button id="applyBtn" class="btn-primary" type="button">Apply Filters</button>
|
| </div>
|
| </div>
|
|
|
| <div id="banner" class="banner" role="status" aria-live="polite" hidden>
|
| Loading charities…
|
| </div>
|
|
|
| <div class="toolbar">
|
| <div class="pills" id="activePills" aria-live="polite"></div>
|
| <div class="sort">
|
| <label for="sortBy">Sort</label>
|
| <select id="sortBy">
|
| <option value="rating-desc">Rating (high → low)</option>
|
| <option value="rating-asc">Rating (low → high)</option>
|
| <option value="name-asc">Name (A → Z)</option>
|
| <option value="name-desc">Name (Z → A)</option>
|
| </select>
|
| </div>
|
| </div>
|
| </section>
|
|
|
| <section aria-labelledby="results-heading">
|
| <h2 id="results-heading" class="sr-only">Results</h2>
|
| <div id="results" class="results" role="list" aria-live="polite"></div>
|
| <div id="empty" class="empty" hidden>No matches. Try widening your filters or clearing them.</div>
|
| </section>
|
| </main>
|
|
|
| <footer>
|
| <p>💚 Built by RecycloAI • When curious, consult via the charity's official site.</p>
|
| </footer>
|
|
|
| <script defer src="{{ url_for('static', filename='js/charities.js') }}"></script>
|
| </body>
|
| </html>
|
|
|
