bintobetter.org

BinToBetter Website

📄 Pure HTML Static Website

This repository contains the BinToBetter website built with pure HTML, CSS, and JavaScript - no build process required!

Organization

BinToBetter is a youth-led nonprofit organization dedicated to reducing community waste and promoting environmental sustainability.

Mission: BinToBetter transforms used tennis balls, e-waste, and hard-to-recycle plastics into valuable tools for schools, seniors, and students. Through hands-on recycling initiatives and educational workshops, we demonstrate that waste reduction isn’t just possible—it’s powerful.

Primary Contact: info@bintobetter.org

Repository Structure

html-site/                      # Production website (deployed to GitHub Pages)
├── index.html                 # Main homepage
├── css/                       # Stylesheets
│   └── styles.css            # All site styles
├── js/                        # JavaScript files
│   └── main.js               # Site functionality
├── images/                    # Image assets (WebP optimized)
├── svgs/                      # SVG icons
├── videos/                    # Video files
├── privacy-policy.html        # Privacy policy page
├── cookie-policy.html         # Cookie policy page
├── terms-of-service.html      # Terms of service page
├── CNAME                      # Custom domain configuration (bintobetter.org)
└── *.png, *.ico, *.webmanifest # Icons and manifest files

tests/                         # Playwright E2E tests for HTML site
├── *.spec.ts                 # Test files
└── README.md                  # Testing documentation

docs-backup/                   # Archived documentation
└── *.md                       # Historical reference files

Website Features

Homepage Sections

Navigation & Layout

Policy Pages

All legal and policy information is available on separate pages:

Deployment

The site is automatically deployed to the custom apex domain when changes are pushed to the main branch.

⚠️ Custom Domain Dependency

Important: This site has a critical dependency on the custom domain (bintobetter.org). All asset paths are root-relative (e.g., /css/styles.css, /images/), which requires the site to be served from a domain root.

Implications:

Operational Requirements:

  1. Domain Renewal: Ensure bintobetter.org domain renewal is monitored and automated
  2. CNAME File: Never remove or modify the html-site/CNAME file without updating asset paths
  3. Monitoring: Set up alerts for domain expiration and SSL certificate renewal

Contingency Plan: If the custom domain becomes unavailable and the site needs to work on the GitHub Pages URL, you must:

  1. Restore the basePath prefix to all asset paths (revert to the commit before basePath removal, or manually add the prefix)
  2. Update all /css/ → /bintobetter.org/css/
  3. Update all /images/ → /bintobetter.org/images/
  4. Update all navigation /#section → /bintobetter.org/#section

Local Development

No build process or dependencies required! Simply open the HTML files in your browser:

# Clone the repository
git clone https://github.com/FreeForCharity/bintobetter.org.git
cd bintobetter.org

# Open in browser
cd html-site
open index.html  # macOS
# or
xdg-open index.html  # Linux
# or just double-click index.html in Windows

Using a Local HTTP Server (Optional)

For testing features that require a web server (like cookies or CORS):

# Using Python (usually pre-installed)
cd html-site
python3 -m http.server 8000
# Visit http://localhost:8000

# Or using PHP (if installed)
cd html-site
php -S localhost:8000

# Or using Node.js http-server (if you have Node installed)
npx http-server html-site -p 8000

Testing

The repository includes Playwright E2E tests to validate HTML site functionality:

# Install dependencies (first time only)
npm install

# Run all tests
npm test

# Run tests with UI
npm run test:ui

# Run tests in headed mode (see browser)
npm run test:headed

Tests validate:

See tests/README.md for detailed testing documentation.

Making Changes

  1. Edit HTML, CSS, or JavaScript files in the html-site/ directory
  2. Test locally in your browser
  3. Commit and push to the main branch
  4. GitHub Actions will automatically deploy to GitHub Pages

File Organization

CNCF-Compliant Open Source Project

This repository follows Cloud Native Computing Foundation (CNCF) standards for governance, security, and community practices. We are committed to transparency, inclusive participation, and professional project management.

Project Governance and Policies

Why CNCF Alignment? Following CNCF standards strengthens project credibility, simplifies onboarding of contributors, and prepares us for cloud-native ecosystem integrations.

Contributing

We welcome contributions! Please see our Contributing Guide for details on:

License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

Historical Context

This repository was created using the Free For Charity website template and converted to serve the BinToBetter nonprofit organization. The template provides a professional, accessible, and performant static HTML website structure that was adapted for BinToBetter’s mission of waste reduction and environmental sustainability.

This site is open source. Improve this page.