presentation-pointers.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>EcoLoop: Honest Builder Speaking Pointers</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
      color: #171a18;
      background: #ffffff;
      padding: 32px 40px;
      line-height: 1.45;
      font-size: 13px;
      -webkit-font-smoothing: antialiased;
    }

    .header {
      border-bottom: 2px solid #1f6b4f;
      padding-bottom: 12px;
      margin-bottom: 18px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }

    .title {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: #171a18;
    }

    .title span {
      color: #1f6b4f;
    }

    .subtitle {
      font-size: 13px;
      color: #526058;
      margin-top: 2px;
    }

    .meta {
      text-align: right;
      font-size: 11px;
      color: #1f6b4f;
      font-weight: 600;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px 24px;
    }

    .slide-block {
      background: #fbfcfb;
      border: 1px solid #e2e8e0;
      border-left: 3px solid #1f6b4f;
      border-radius: 6px;
      padding: 10px 14px;
      page-break-inside: avoid;
    }

    .slide-num {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 11px;
      font-weight: 700;
      color: #1f6b4f;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .slide-name {
      font-size: 14px;
      font-weight: 700;
      color: #171a18;
      margin: 2px 0 6px 0;
    }

    ul {
      padding-left: 16px;
      margin: 0;
    }

    li {
      font-size: 12.5px;
      color: #334155;
      line-height: 1.4;
      margin-bottom: 3px;
    }

    li:last-child {
      margin-bottom: 0;
    }

    strong {
      color: #0f172a;
    }

    .footer {
      margin-top: 24px;
      padding-top: 10px;
      border-top: 1px solid #e2e8e0;
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: #64748b;
    }

    @media print {
      body {
        padding: 0;
      }
      @page {
        size: A4 portrait;
        margin: 10mm;
      }
    }
  </style>
</head>
<body>

  <div class="header">
    <div>
      <h1 class="title">Eco<span>Loop</span>: Honest Builder Speaking Pointers</h1>
      <p class="subtitle">Quick reference cheat sheet for the updated 15-slide deck.</p>
    </div>
    <div class="meta">
      Swami Sant Dass Public School<br>
      github.com/Harman209/ecoloop
    </div>
  </div>

  <div class="grid-2">

    <!-- Slide 01 -->
    <div class="slide-block">
      <div class="slide-num">Slide 01</div>
      <div class="slide-name">Title: EcoLoop</div>
      <ul>
        <li>Most school eco projects are posters or picking up bottles; we built real things.</li>
        <li>Two distinct halves: physical materials + zero-cost digital architecture.</li>
        <li>Origin: Swami Sant Dass Public School, Jalandhar.</li>
      </ul>
    </div>

    <!-- Slide 02 -->
    <div class="slide-block">
      <div class="slide-num">Slide 02</div>
      <div class="slide-name">The Packaging Trap: Multi-Layer Plastics</div>
      <ul>
        <li>Bottles are easy; multi-layer snack wrappers (MLP) are the real nightmare.</li>
        <li>Aluminum foil is bonded between plastic films; recyclers cannot separate profitably.</li>
        <li>100% of snack packaging ends up burned or buried in dumps.</li>
      </ul>
    </div>

    <!-- Slide 03 -->
    <div class="slide-block">
      <div class="slide-num">Slide 03</div>
      <div class="slide-name">The Physical Loop</div>
      <ul>
        <li>5 student-made products in school: Seed Paper, Bioenzymes, Uniform Bags, Eco-Bricks, Planters.</li>
        <li>1 heavy material: MLP Sheets heat-pressed by an external NGO from bulk wrapper batches.</li>
        <li>Batch economics: NGO requires fixed kg minimum; returns rigid waterproof boards.</li>
      </ul>
    </div>

    <!-- Slide 04 -->
    <div class="slide-block">
      <div class="slide-num">Slide 04</div>
      <div class="slide-name">how it started vs how it's going</div>
      <ul>
        <li>Initial state: scattered classroom crafts and wrapper batch exchange already existed.</li>
        <li>My role: closed the circular loop (sales revenue &rarr; raw materials) + built the storefront.</li>
        <li>System shift: transformed isolated activities into a self-sustaining circular economy.</li>
      </ul>
    </div>

    <!-- Slide 05 -->
    <div class="slide-block">
      <div class="slide-num">Slide 05</div>
      <div class="slide-name">Why Build a Digital Platform?</div>
      <ul>
        <li>Why storefront: circular models need outside revenue to reinvest and stay alive.</li>
        <li>Public presence: unifies all products and explains the circular loop at ecoloop-ssdps.vercel.app.</li>
        <li>Direct inquiry routing: gives outside buyers a button to contact us and order physical samples.</li>
      </ul>
    </div>

    <!-- Slide 06 -->
    <div class="slide-block">
      <div class="slide-num">Slide 06</div>
      <div class="slide-name">Zero-Cost Backend on Google Sheets</div>
      <ul>
        <li>Core constraint: zero dollars, no corporate credit cards.</li>
        <li>Pipeline: React form &rarr; Google Apps Script webhook &rarr; Google Sheet.</li>
        <li>Result: $0.00/mo operating cost, zero maintenance, 99.9% uptime.</li>
      </ul>
    </div>

    <!-- Slide 07 -->
    <div class="slide-block">
      <div class="slide-num">Slide 07</div>
      <div class="slide-name">why our database bill is literally $0</div>
      <ul>
        <li>Industry contrast: paying $50/mo cloud databases vs free Google Sheets.</li>
        <li>We capture all production inquiries on a free Google Sheet without paying a penny.</li>
      </ul>
    </div>

    <!-- Slide 08 -->
    <div class="slide-block">
      <div class="slide-num">Slide 08</div>
      <div class="slide-name">The Inquiry Engine: Honest Review</div>
      <ul>
        <li>Candor: built in a single night sprint before an exhibition.</li>
        <li>Basic MVP: pre-populates specs, validates fields, logs rows to sheet.</li>
        <li>Plenty of room to improve (stock counts, tracking), but works for $0.</li>
      </ul>
    </div>

    <!-- Slide 09 -->
    <div class="slide-block">
      <div class="slide-num">Slide 09</div>
      <div class="slide-name">Building It Without Knowing React</div>
      <ul>
        <li>Honest truth: I don't know React or TypeScript deeply.</li>
        <li>Traditional hurdle: getting blocked by syntax and hours on Stack Overflow.</li>
        <li>Developer as architect: define rules and models; let AI agents build the code.</li>
      </ul>
    </div>

    <!-- Slide 10 -->
    <div class="slide-block">
      <div class="slide-num">Slide 10</div>
      <div class="slide-name">ChatGPT vs Agent Workspace</div>
      <ul>
        <li>ChatGPT: copy-pasting snippets back and forth, loses project context.</li>
        <li>Antigravity / OpenCode: agent reads files, edits across the repo, runs terminal.</li>
        <li>Contrast: chatting about code vs having an agent build in your workspace.</li>
      </ul>
    </div>

    <!-- Slide 11 -->
    <div class="slide-block">
      <div class="slide-num">Slide 11</div>
      <div class="slide-name">How Working with an Agent Looks</div>
      <ul>
        <li>1. Write spec: plain English rules, colors, and layout instructions.</li>
        <li>2. Agent edits files: writes components and routes directly in your folder.</li>
        <li>3. You test locally: run browser, click around, see what broke.</li>
        <li>4. Agent fixes bugs: paste error log back to agent; it repairs the code.</li>
      </ul>
    </div>

    <!-- Slide 12 -->
    <div class="slide-block">
      <div class="slide-num">Slide 12</div>
      <div class="slide-name">Replicating with OpenCode</div>
      <ul>
        <li>100% free open-source terminal agent (GitHub: anomalyco/opencode).</li>
        <li>Gives students the same autonomous file-editing capabilities as AGY.</li>
        <li>One command install: <code>npm install -g @opencode/cli</code>.</li>
      </ul>
    </div>

    <!-- Slide 13 -->
    <div class="slide-block">
      <div class="slide-num">Slide 13</div>
      <div class="slide-name">Free AI Models for Students</div>
      <ul>
        <li>Free cloud: Google Gemini (AI Studio), Groq Cloud, GitHub Models.</li>
        <li>100% offline: Ollama running <code>qwen2.5-coder:7b</code> on laptop with no internet.</li>
        <li>Zero credit cards, zero monthly subscriptions.</li>
      </ul>
    </div>

    <!-- Slide 14 -->
    <div class="slide-block">
      <div class="slide-num">Slide 14</div>
      <div class="slide-name">deployed without testing</div>
      <ul>
        <li>Engineering reality: AI claims "all bugs resolved", but live buttons explode.</li>
        <li>Core lesson: prompting is 20%; testing if buttons actually work is the 80%.</li>
        <li>Never assume AI code works until tested manually in the browser.</li>
      </ul>
    </div>

    <!-- Slide 15 -->
    <div class="slide-block" style="grid-column: span 2;">
      <div class="slide-num">Slide 15</div>
      <div class="slide-name">Thank You &amp; Scannable QR</div>
      <ul>
        <li>Scan QR code: opens GitHub repository with full source code and live demo.</li>
        <li>Take-home: 1-page setup guide lets students set up OpenCode and free models tonight.</li>
        <li>Open the floor for questions from students and teachers.</li>
      </ul>
    </div>

  </div>

  <div class="footer">
    <span>EcoLoop Presentation Strategy &bull; Swami Sant Dass Public School, Jalandhar</span>
    <span>github.com/Harman209/ecoloop</span>
  </div>

</body>
</html>