24Zyad/LifeLine-x-Rebel-Captcha

Lifeline "The Human Test" CAPTCHA Demo

Interactive CAPTCHA-style experience for Lifeline's campaign highlighting that some problems need human empathy, not AI.

Quick Setup

1. 1.Copy your Lifeline logo:
2. 2.Save the Lifeline logo as lifeline-logo.png in this folder
3. 3.Make sure it's named exactly lifeline-logo.png

1. 1.Create images folder:
2. 2.Create a folder called images in this directory
3. 3.Add 15 images (named img1.png through img15.png)
4. 4.Mix of:
5. 5.Everyday problems AI can help with (cooking, gardening, car repair, etc.)
6. 6.People in emotional distress (the ones users should NOT select)

1. 1.Open in browser:
2. 2.Just double-click index.html to open in your browser
3. 3.No server needed for local demo

How It Works

• —Users click the checkbox
• —CAPTCHA asks: "Select all the images that AI can help you with"
• —Grid of 9 images appears
• —When they click an image, it fades out and loads a new one
• —The point: help users recognize that AI can't solve emotional/human problems

What I Changed from Original Template

• —Text: "Select all the images that AI can help you with" (instead of "bicycles")
• —Logo: Lifeline logo replaces Google reCAPTCHA logo
• —Colors: Blue theme changed to Lifeline blue (#2b3d9f)
• —Tagline: Added "Crisis Support. Suicide Prevention."
• —Instructions simplified to match campaign concept

Files Structure

lifeline-captcha/
├── index.html          # Main page
├── style.css           # Styling (Lifeline colors)
├── index.js            # Interaction logic
├── lifeline-logo.png   # Your logo (add this)
└── images/             # Your campaign images (add these)
    ├── img1.png
    ├── img2.png
    ...
    └── img15.png

Next Steps for Production Version

Phase 2 (If client wants to use publicly):

• —Host images on Google Cloud Storage
• —Add analytics to track user interactions
• —Deploy to Cloud Run or similar
• —Add proper domain
• —Cost: ~$10-20/month depending on traffic

Phase 3 (Advanced features):

• —Track which images users select/skip
• —A/B test different image sets
• —Add email capture for Lifeline mailing list
• —Multi-language support

Demo Tips

• —Have 2-3 rounds of images ready
• —Mix obvious "AI-solvable" (recipe, car engine) with obvious "human problems" (crying, distress)
• —The contrast makes the point clearer

Technical Notes

• —Pure HTML/CSS/JavaScript (no frameworks)
• —Works offline
• —Mobile responsive
• —No dependencies except Font Awesome (loaded from CDN)