:root {
    --font-family: 'Roboto', Arial, sans-serif;
    --bg: #f4f7f5;
    --surface: #ffffff;
    --surface-soft: #f8faf8;
    --text: #1f2937;
    --muted: #5b6472;
    --green-dark: #0f5132;
    --green: #1f7a3d;
    --green-light: #2e9b55;
    --blue: #1565c0;
    --blue-dark: #0d47a1;
    --border: #d9e2dc;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.08);
    --radius: 14px;
    --radius-sm: 10px;
    --max-width: 1200px;
    --transition: all 0.25s ease;
}
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, h4, p, ul, li, figure, blockquote { margin: 0; padding: 0; }
  body {
    font-family: var(--font-family);
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  img { max-width: 100%; height: auto; display: block; }
  a { color: inherit; text-decoration: none; transition: var(--transition); }
  ul { list-style: none; }
.container {
    width: min(var(--max-width), calc(100% - 40px));
  margin: 0 auto;
}
h1, h2, h3 { line-height: 1.2; color: var(--text); }
h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 800; }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 700; }
p { font-size: 1.05rem; color: var(--muted); }
.site-header {
  background: linear-gradient(135deg, #0f5f2f, #09391b);
  color: #fff;
  box-shadow: var(--shadow-soft);
  padding: 18px 0;
}
.site-header .container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  text-align: center;
}
.logo-container, .logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo {
  width: auto;
  height: 64px;
  object-fit: contain;
  border-radius: 10px;
}
.message-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-header h1 {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }
.header-bottom { display: flex; justify-content: center; }
.main-nav { width: 100%; }
.nav-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.nav-list a, .nav-links a, .login-button, .sign-up-button {
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
}
.nav-list a:hover, .nav-links a:hover { background: rgba(255, 255, 255, 0.12); }
.login-button {
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
}
.login-button:hover { background: rgba(255, 255, 255, 0.18); }
.sign-up-button {
  background: linear-gradient(135deg, var(--green-light), var(--green));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(31, 122, 61, 0.25);
}
.sign-up-button:hover {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  transform: translateY(-1px);
}
.navbar {
  background: linear-gradient(135deg, #0f5f2f, #09391b);
  color: #fff;
  box-shadow: var(--shadow-soft);
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.navbar .logo { height: 56px; }
.nav-links {
  display: flex;
    align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.index-background {
  background-image: url('Images/Background-image.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: clamp(260px, 42vw, 520px);
}
.hero-background { padding: 52px 0 18px; }
.hero-content { text-align: center; max-width: 880px; }
.hero-content h2 { margin-bottom: 16px; color: var(--green-dark); }
.hero-content p { font-size: 1.12rem; max-width: 780px; margin: 0 auto; }
.content-section, .dashboard-section {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
  margin: 24px auto;
}
.content-section h2, .dashboard-section h2, .section-header {
  margin-bottom: 14px;
  color: var(--green-dark);
}
.content-section p, .dashboard-section p { margin-bottom: 14px; }
.opportunities-section { padding-top: 16px; }
.opportunities-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 28px;
}
.opportunities-header h2 { margin-bottom: 12px; color: var(--blue); }
.opportunity-card {
  display: flex;
  align-items: stretch;
  gap: 28px;
  background: #fff;
  border: 1px solid #e5ece7;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  }
.opportunity-image { flex: 1 1 340px; }
.opportunity-image img {
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 12px;
}
.opportunity-info {
  flex: 1 1 340px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.opportunity-info h3 { margin-bottom: 12px; color: var(--green-dark); }
.opportunity-info p { margin-bottom: 12px; }
.earnings {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--green);
  margin-bottom: 18px;
}
.opportunity-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.cta-button, .btn, .cta-btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: var(--shadow-soft);
}
.green-button { background: var(--green); }
.green-button:hover { background: var(--green-dark); }
.blue-button { background: var(--blue); }
.blue-button:hover { background: var(--blue-dark); }
.text-link { font-weight: 700; color: var(--blue); }
.text-link:hover { color: var(--blue-dark); text-decoration: underline; }
.form, .registration-form { width: 100%; }
.form-group { margin-bottom: 18px; }
  label {
  display: block;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="file"], textarea, .form-input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font: inherit;
  transition: var(--transition);
}
textarea { min-height: 120px; resize: vertical; }
input:focus, textarea:focus, button:focus, a:focus {
  outline: 3px solid rgba(21, 101, 192, 0.18);
  outline-offset: 2px;
}
input:focus, textarea:focus, .form-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.08);
}
button, input[type="submit"], .submit-button {
  display: inline-block;
  padding: 13px 22px;
  border: none;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-soft);
}
button:hover, input[type="submit"]:hover, .submit-button:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
}
.feedback-message, .form-message, .form-error, #registration-message,
#registration-error {
  margin-top: 10px;
  margin-bottom: 12px;
  font-weight: 600;
  }
.form-error, #registration-error, .feedback-message { color: #c62828; }
.form-message, #registration-message { color: var(--green-dark); }
.strength-indicator {
  margin-top: -6px;
  margin-bottom: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
}
#dynamic-greeting, .greeting-message {
  background: linear-gradient(135deg, #eef8f1, #f4fbf6);
  color: var(--green-dark);
  border: 1px solid #d7eadc;
  border-radius: 12px;
  padding: 16px 18px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
  margin: 24px 0;
}
.dashboard-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}
.dashboard-item {
  background: var(--surface-soft);
  border: 1px solid #e4ebe6;
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.dashboard-item p {
  margin-bottom: 8px;
  color: var(--text);
  font-weight: 600;
}
.dashboard-item span {
  font-weight: 800;
  color: var(--green-dark);
  font-size: 1.1rem;
}
.dashboard-logo {
width: 52px;
  height: 52px;
  object-fit: contain;
  margin: 0 auto 12px;
}
.dashboard-list { padding: 0; }
.dashboard-list li {
  padding: 12px 14px;
  border-bottom: 1px solid #e7ece8;
  color: var(--muted);
}
.dashboard-list li:nth-child(even) { background: #fafcfa; }
#map-view, .pickup-container, .items-container, .empty-state {
  background: var(--surface-soft);
  border: 1px dashed #cbd8cf;
  border-radius: 12px;
  padding: 18px;
  margin-top: 14px;
}
#map-view p, .pickup-container p, .items-container p, .empty-state p { margin-
bottom: 0; }
.dashboard-hero {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 24px;
  align-items: stretch;
}
.dashboard-hero-card, .dashboard-side-card {
  background: linear-gradient(135deg, #ffffff, #f7fbf8);
  border: 1px solid #dfe9e2;
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-soft);
}
.dashboard-kicker, .section-kicker, .eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}
.header-subtitle {
  max-width: 760px;
  color: rgba(255,255,255,0.88);
  font-size: 1.02rem;
}
  .dashboard-hero-card h2, .dashboard-side-card h3 { margin-bottom: 10px; }
.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}
.snapshot-card {
  background: var(--surface-soft);
  border: 1px solid #e4ebe6;
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--shadow-soft);
}
.snapshot-card-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}
.snapshot-card-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--green-dark);
}
.two-column-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.section-heading { margin-bottom: 18px; }
.centered-heading { text-align: center; max-width: 760px; margin: 0 auto 22px; }
.steps-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 18px;
}
.step {
  background: var(--surface-soft);
  border: 1px solid #e4ebe6;
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  padding: 22px;
  text-align: center;
}
.process-step-image {
  width: 100%;
  max-width: 180px;
  margin: 0 auto 16px;
  border-radius: 12px;
}
.step-content h3 { margin-bottom: 10px; color: var(--green-dark); }
.step-content p { margin-bottom: 0; }
.step-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #e9f6ed;
  color: var(--green-dark);
  font-size: 0.85rem;
  font-weight: 800;
}
.how-header-top {
  align-items: center;
}
.how-header-copy {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 780px;
}
.how-hero {
  padding: 44px 0 10px;
}
.how-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: stretch;
}
.how-hero-copy, .hero-panel-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e4ebe6;
  box-shadow: var(--shadow-soft);
  padding: 28px;
}
  .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.hero-benefits li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  color: var(--muted);
}
.hero-benefits li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 800;
}
.how-cta-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.how-cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.site-footer {
  background: #1f2937;
  color: #e5e7eb;
  text-align: center;
  padding: 22px 0;
  margin-top: 30px;
}
.site-footer p, .site-footer small {
  color: #e5e7eb;
margin: 0; }
.footer-nav { margin-top: 10px; }
.footer-nav a {
  color: #dbe5ee;
  margin: 0 8px;
}
    .footer-nav a:hover { color: #fff; text-decoration: underline; }
  @media (max-width: 900px) {
    .container { width: min(var(--max-width), calc(100% - 28px)); }
    .content-section, .dashboard-section { padding: 24px; }
    .opportunity-card { padding: 18px; gap: 18px; }
    .dashboard-hero, .how-hero-grid, .two-column-grid { grid-template-columns:
1fr; } }
  @media (max-width: 768px) {
    .site-header { padding: 16px 0; }
    .header-top { flex-direction: column; gap: 12px; }
    .how-header-copy { align-items: center; text-align: center; }
    .nav-list, .nav-links { flex-direction: column; width: 100%; }
    .nav-list li, .nav-links a { width: 100%; }
    .nav-list a, .nav-links a, .login-button, .sign-up-button {
      display: block;
      width: 100%;
      text-align: center;
    }
    .navbar { align-items: stretch; }
    .hero-background { padding-top: 38px; }
    .opportunity-actions { align-items: stretch; }
    .cta-button { width: 100%; text-align: center; }
    .dashboard-content, .snapshot-grid, .steps-container { grid-template-columns:
1fr; } }
  @media (max-width: 480px) {
    .logo { height: 52px; }
    .content-section, .dashboard-section { padding: 18px; }
    .hero-content p, .opportunities-header p, p { font-size: 1rem; }
}
how-it-works.html
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn how Can4Cash works and join our
  community recycling platform.">
    <title>How It Works | Can4Cash</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <div class="container">
      <div class="header-top how-header-top">
        <div class="logo-container">
          <a href="index.html" class="logo-link" aria-label="Go to home page">
            <img src="Images/can4cashlogo.png" alt="Can4Cash logo" class="logo">
          </a>
        </div>
        <div class="message-container how-header-copy">
          <p class="eyebrow">Simple. Local. Rewarding.</p>
          <h1>How Can4Cash Works</h1>
          <p class="header-subtitle">Turn bottles and cans into a smoother
community pickup experience for donors and recyclers.</p>
        </div>
      </div>
      <div class="header-bottom">
        <nav class="main-nav" aria-label="Main navigation">
          <ul class="nav-list">
            <li><a href="index.html">Home</a></li>
            <li><a href="#process">Process</a></li>
            <li><a href="#cta" class="sign-up-button">Get Started</a></li>
</ul> </nav>
      </div>
    </div>
</header>
  <main>
    <section class="how-hero">
      <div class="container how-hero-grid">
        <div class="how-hero-copy">
          <span class="section-kicker">Community recycling made easier</span>
          <h2>From signup to payout in four clear steps</h2>
          <p>Can4Cash connects local residents who want to recycle with
scrappers who are ready to collect redeemable cans and bottles. The result is
less hassle, cleaner neighborhoods, and shared earnings.</p>
a>
  <div class="hero-actions">
    <a href="#process" class="cta-button green-button">See the process</
    <a href="#cta" class="cta-button blue-button">Join the community</a>
  </div>
</div>
<aside class="how-hero-panel" aria-label="Quick summary">
  <div class="hero-panel-card">
              <h3>What you can expect</h3>
            <ul class="hero-benefits">
              <li>Fast onboarding for new scrappers</li>
              <li>Simple pickup coordination</li>
              <li>Transparent earnings after collection</li>
              <li>A cleaner, more connected local recycling system</li>
            </ul>
          </div>
        </aside>
      </div>
    </section>
    <div class="container">
      <section id="intro" class="content-section how-intro-card">
        <div class="section-heading centered-heading">
          <span class="section-kicker">About the project</span>
          <h2>Built to make recycling easier for everyone</h2>
          <p>Can4Cash is a community-driven platform that connects local
residents with recyclers to collect redeemable cans and bottles. Our goal is to
make recycling easier, more profitable, and more community-oriented.</p>
        </div>
      </section>
      <section id="process" class="content-section">
        <div class="section-heading centered-heading">
          <span class="section-kicker">Our process</span>
          <h2>How the platform works</h2>
          <p>Each step is designed to keep the experience straightforward,
trustworthy, and efficient.</p>
        </div>
        <div class="steps-container enhanced-steps">
          <article class="step">
            <div class="step-badge">Step 1</div>
            <img src="Images/Application.png" alt="Apply to become a scrapper"
class="process-step-image">
            <div class="step-content">
              <h3>Apply as a recycler</h3>
              <p>Submit a quick application to join the platform and start your
path toward earning through community pickups.</p>
            </div>
</article>
          <article class="step">
            <div class="step-badge">Step 2</div>
            <img src="Images/Acceptance.png" alt="Acceptance into the platform"
class="process-step-image">
            <div class="step-content">
                <h3>Get accepted</h3>
              <p>Our team reviews your application and helps you get onboarded
so you can access nearby pickup opportunities.</p>
            </div>
          </article>
          <article class="step">
            <div class="step-badge">Step 3</div>
            <img src="Images/Pick up cans.png" alt="Pick up recyclable cans and
bottles" class="process-step-image">
            <div class="step-content">
              <h3>Collect recyclables</h3>
              <p>Use the platform to find pickup requests from local residents
and collect eligible recyclables in an organized way.</p>
            </div>
          </article>
          <article class="step">
            <div class="step-badge">Step 4</div>
            <img src="Images/Payment.png" alt="Payment distribution after
collection" class="process-step-image">
            <div class="step-content">
              <h3>Receive payment</h3>
              <p>Once items are collected and processed, earnings are shared so
both the recycler and the community member benefit.</p>
            </div>
          </article>
        </div>
      </section>
      <section id="cta" class="content-section how-cta-section">
        <div class="how-cta-copy">
          <span class="section-kicker">Ready to begin?</span>
          <h2>Join the Can4Cash community</h2>
<p>Whether you want to post recyclable items or become a recycler, the platform
is built to make the process easier and more rewarding.</p>
        </div>
        <div class="how-cta-actions">
          <a href="index.html#register" class="cta-button green-button">Get
started</a>
          <a href="index.html" class="cta-button blue-button">Back to home</a>
        </div>
      </section>
    </div>
  </main>
  <footer class="site-footer">
        <div class="container">
        <p>&copy; 2026 Can4Cash. All rights reserved.</p>
        <nav class="footer-nav" aria-label="Footer navigation">
          <a href="index.html">Home</a>
        </nav>
      </div>
    </footer>
  </body>
  </html>
donor-dashboard.html
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Donor dashboard for scheduling pickups,
  listing recyclables, and tracking activity.">
    <title>Donor Dashboard | Can4Cash</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <nav class="navbar">
      <a href="index.html" class="logo-link" aria-label="Go to home page">
        <img src="Images/can4cashlogo.png" alt="Can4Cash logo" class="logo">
      </a>
      <div class="nav-links">
        <a href="#request-pickup">Request Pickup</a>
        <a href="#list-item">List Item</a>
        <a href="#recycling-history">History</a>
      </div>
    </nav>
    <main class="container">
      <div id="dynamic-greeting" class="greeting-message"></div>
      <section class="dashboard-section dashboard-hero">
        <div class="dashboard-hero-card">
          <span class="dashboard-kicker">Donor dashboard</span>
          <h2>Manage your recycling pickups in one place</h2>
          <p>Schedule a pickup, list redeemable items, and keep track of your
  activity without clutter or fake placeholder history.</p>
          <div class="dashboard-actions">
            <a href="#request-pickup" class="cta-button green-button">Request
pickup</a>
          <a href="#list-item" class="cta-button blue-button">List an item</a>
        </div>
      </div>
      <aside class="dashboard-side-card">
        <span class="dashboard-kicker">Account snapshot</span>
        <p>Your dashboard summary will update here once you start scheduling
pickups and completing redemptions.</p>
      </aside>
    </section>
    <section class="dashboard-section">
      <h2 class="section-header">Account Snapshot</h2>
      <div class="snapshot-grid">
        <div class="snapshot-card">
          <div class="snapshot-card-label">Recycled items</div>
          <div class="snapshot-card-value" id="recycled-count">0</div>
        </div>
        <div class="snapshot-card">
          <div class="snapshot-card-label">Earnings</div>
          <div class="snapshot-card-value" id="earnings">$0.00</div>
        </div>
        <div class="snapshot-card">
          <div class="snapshot-card-label">Orders</div>
          <div class="snapshot-card-value" id="orders-completed">0</div>
        </div>
        <div class="snapshot-card">
          <div class="snapshot-card-label">Donations</div>
          <div class="snapshot-card-value" id="donations">$0.00</div>
        </div>
      </div>
    </section>
    <div class="two-column-grid">
      <section id="request-pickup" class="dashboard-section">
        <h2 class="section-header">Request a Pickup</h2>
        <form id="pickup-form" class="form">
          <div class="form-group">
            <label for="pickup-address">Pickup address</label>
            <input class="form-input" type="text" id="pickup-address"
placeholder="Enter pickup address" required>
          </div>
          <div class="form-group">
            <label for="pickup-date">Preferred date</label>
            <input class="form-input" type="date" id="pickup-date" required>
          </div>
          <button class="submit-button" type="submit">Request Pickup</button>
          </form>
      </section>
      <section id="list-item" class="dashboard-section">
        <h2 class="section-header">List an Item</h2>
        <form id="listing-form" class="form">
          <div class="form-group">
            <label for="item-name">Item name</label>
            <input class="form-input" type="text" id="item-name" name="item-
name" placeholder="Example: Bag of aluminum cans" required>
          </div>
          <div class="form-group">
            <label for="item-description">Description</label>
            <textarea class="form-input" id="item-description" name="item-
description" placeholder="Add a short description" required></textarea>
          </div>
          <div class="form-group">
            <label for="user-image">Upload a photo</label>
            <input type="file" class="form-input" id="user-image" name="user-
image" accept="image/*">
          </div>
          <button class="submit-button" type="submit">List Item</button>
        </form>
        <div id="listing-message" class="feedback-message"></div>
      </section>
</div>
    <div class="two-column-grid">
      <section id="recycling-history" class="dashboard-section">
        <h2 class="section-header">History</h2>
        <div class="empty-state">
<p>No activity yet. Your completed pickups, listings, and payouts will appear
here.</p>
        </div>
      </section>
      <section id="rate-recycler" class="dashboard-section">
        <h2 class="section-header">Rate Recycler</h2>
        <form id="rate-recycler-form" class="form">
          <label for="recycler-rating">Rating</label>
          <div class="star-rating">
            <span class="star" data-value="5">&#9733;</span>
            <span class="star" data-value="4">&#9733;</span>
            <span class="star" data-value="3">&#9733;</span>
            <span class="star" data-value="2">&#9733;</span>
            <span class="star" data-value="1">&#9733;</span>
</div>
              <button class="submit-button" type="submit">Submit Rating</button>
          </form>
        </section>
      </div>
</main>
    <footer class="site-footer">
      <div class="container">
        <p>&copy; 2026 Can4Cash. All rights reserved.</p>
      </div>
</footer>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const greetingElement = document.getElementById('dynamic-greeting');
        updateGreeting(greetingElement);
      });
      function updateGreeting(element) {
        const hour = new Date().getHours();
        let greeting;
        if (hour < 12) {
          greeting = 'Good Morning, Eco-Warrior!';
        } else if (hour < 18) {
          greeting = 'Good Afternoon, Change Maker!';
        } else {
          greeting = 'Good Evening, Eco-Hero!';
        }
        element.innerText = greeting;
      }
    </script>
  </body>
</html>
recycler-dashboard.html
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Recycler dashboard for managing pickups,
  available items, and receipt uploads.">
    <title>Recycler Dashboard | Can4Cash</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav class="navbar">
    <a href="index.html" class="logo-link" aria-label="Go to home page">
      <img src="Images/can4cashlogo.png" alt="Can4Cash logo" class="logo">
    </a>
    <div class="nav-links">
      <a href="#assigned-pickups">Assigned Pickups</a>
      <a href="#view-items">Available Items</a>
      <a href="#upload-receipt">Upload Receipt</a>
    </div>
  </nav>
  <main class="container">
    <div id="dynamic-greeting" class="greeting-message"></div>
    <section class="dashboard-section dashboard-hero">
      <div class="dashboard-hero-card">
        <span class="dashboard-kicker">Recycler dashboard</span>
        <h2>Stay on top of pickups and redemptions</h2>
        <p>Review assigned pickups, see what items are available, and upload
receipts after redemption in one clean workflow.</p>
        <div class="dashboard-actions">
          <a href="#assigned-pickups" class="cta-button green-button">View
pickups</a>
          <a href="#upload-receipt" class="cta-button blue-button">Upload
receipt</a>
        </div>
      </div>
      <aside class="dashboard-side-card">
        <span class="dashboard-kicker">Route snapshot</span>
        <p>Your pickup route, totals, and completion stats will appear here as
real activity is connected later.</p>
      </aside>
</section>
    <section class="dashboard-section">
      <h2 class="section-header">Route Snapshot</h2>
      <div class="snapshot-grid">
        <div class="snapshot-card">
          <div class="snapshot-card-label">Recycled items</div>
          <div class="snapshot-card-value" id="recycled-count">0</div>
        </div>
        <div class="snapshot-card">
          <div class="snapshot-card-label">Earnings</div>
          <div class="snapshot-card-value" id="earnings">$0.00</div>
        </div>
          <div class="snapshot-card">
          <div class="snapshot-card-label">Completed orders</div>
          <div class="snapshot-card-value" id="orders-completed">0</div>
        </div>
      </div>
</section>
    <div class="two-column-grid">
      <section id="assigned-pickups" class="dashboard-section">
        <h2 class="section-header">Assigned Pickups</h2>
        <div id="map-view" aria-label="Map view">
          <p>No pickup route assigned yet.</p>
        </div>
        <div class="pickup-container">
          <p>Pickup details will appear here once assignments are available.</p>
        </div>
      </section>
      <section id="view-items" class="dashboard-section">
        <h2 class="section-header">Available Items</h2>
        <div class="items-container" aria-label="Items list">
          <p>No items available right now. New listings will show up here.</p>
        </div>
      </section>
    </div>
    <div class="two-column-grid">
      <section id="upload-receipt" class="dashboard-section">
        <h2 class="section-header">Upload Receipt</h2>
        <form id="receipt-upload-form" class="form">
          <div class="form-group">
            <label for="receipt-file">Receipt image</label>
            <input class="form-input" id="receipt-file" type="file"
accept="image/*" required>
          </div>
          <button class="submit-button" type="submit">Upload</button>
        </form>
</section>
      <section id="rate-donor" class="dashboard-section">
        <h2 class="section-header">Rate Donor</h2>
        <form id="rate-donor-form" class="form">
          <label for="donor-rating">Rating</label>
          <div class="star-rating">
            <span class="star" data-value="5">&#9733;</span>
            <span class="star" data-value="4">&#9733;</span>
            <span class="star" data-value="3">&#9733;</span>
            <span class="star" data-value="2">&#9733;</span>
              <span class="star" data-value="1">&#9733;</span>
          </div>
          <button class="submit-button" type="submit">Submit Rating</button>
        </form>
      </section>
    </div>
</main>
  <footer class="site-footer">
    <div class="container">
      <small>&copy; 2026 Can4Cash. All rights reserved.</small>
    </div>
</footer>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const greetingElement = document.getElementById('dynamic-greeting');
      updateGreeting(greetingElement);
    });
    function updateGreeting(element) {
      const hour = new Date().getHours();
      let greeting;
      if (hour < 12) {
        greeting = 'Good Morning, Recycling Hero!';
      } else if (hour < 18) {
        greeting = 'Good Afternoon, Eco-Savior!';
      } else {
        greeting = 'Good Evening, Green Guardian!';
      }
      element.innerText = greeting;
    }
  </script>
</body>
</html>