Skip to content
BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
css
css
 
 
js
js
 
 
pages
pages
 
 
.gitignore
.gitignore
 
 
DEPLOYMENT_CHECKLIST.md
DEPLOYMENT_CHECKLIST.md
 
 
PROJECT_SUMMARY.md
PROJECT_SUMMARY.md
 
 
README.md
README.md
 
 
index.html
index.html
 
 

Repository files navigation

Brain Pages - Static Template System

A collection of six static HTML page templates controlled by a separate "Brain" system via URL parameters. All pages are built with vanilla HTML, CSS, and JavaScript—no frameworks, no CMS, no page builders.

Overview

Brain Pages is a parameter-driven template system where:

  • The Brain (AI + human commands) outputs URLs with parameters
  • Pages respond by dynamically updating content based on those parameters
  • All content injection happens client-side via vanilla JavaScript
  • No backend logic required for content display

This architecture enables rapid campaign launches without redesigning pages or modifying code.

The Six Templates

1. Landing Page (pages/landing.html)

Purpose: Lead capture for free trials and early access

Features:

  • Hero section with dynamic headline, subheadline, and image
  • Lead capture form with name, email, and phone fields
  • Dynamic offer text and CTA button
  • Automatic redirect to thank-you page with form data

Dynamic Fields:

  • h – Main headline
  • s – Subheadline
  • o – Offer description
  • cta – Button text
  • img – Hero image URL
  • campaign – Tracking label

Example URL:

pages/landing.html?h=Unlock%20Your%20Potential&s=Join%20thousands%20succeeding&o=Free%2014-day%20trial&cta=Start%20Free%20Trial&img=https://example.com/hero.jpg&campaign=facebook_nov

2. Landing Thank-You Page (pages/landing-thankyou.html)

Purpose: Confirmation and onboarding after free trial signup

Features:

  • Personalized confirmation with user's name
  • Next steps instructions
  • Email verification guidance
  • Dynamic CTA for account access

Dynamic Fields:

  • h – Confirmation headline
  • s – Subheadline
  • o – Offer/instruction text
  • cta – Next action button text
  • name – User's name (from form submission)
  • email – User's email (from form submission)
  • campaign – Tracking label

Example URL:

pages/landing-thankyou.html?name=John%20Doe&email=john@example.com&h=Thank%20You&campaign=facebook_nov

3. Sales Page (pages/sales.html)

Purpose: Sell paid programs, events, or courses

Features:

  • Hero section with product headline and image
  • Offer stack (benefits list)
  • Dynamic pricing display
  • Purchase form with payment method selection
  • Automatic redirect to sales thank-you page

Dynamic Fields:

  • h – Product headline
  • s – Subheadline
  • o – Offer description
  • price – Price or payment text
  • cta – Purchase button text
  • img – Product image URL
  • campaign – Tracking label

Example URL:

pages/sales.html?h=Premium%20Masterclass&s=Everything%20you%20need&o=Limited%20spots%20available&price=$297&cta=Enroll%20Now&img=https://example.com/product.jpg&campaign=email_list

4. Sales Thank-You Page (pages/sales-thankyou.html)

Purpose: Post-purchase confirmation and onboarding

Features:

  • Personalized welcome message
  • Purchase confirmation details
  • Access instructions with login credentials
  • Onboarding checklist
  • Money-back guarantee messaging

Dynamic Fields:

  • h – Welcome headline
  • s – Onboarding subheadline
  • o – Access instructions
  • cta – Dashboard access button text
  • price – Purchase amount (for confirmation)
  • name – Customer's name
  • email – Customer's email
  • campaign – Tracking label

Example URL:

pages/sales-thankyou.html?name=Jane%20Smith&email=jane@example.com&price=$297&h=Welcome%20to%20Premium&campaign=email_list

5. Automated Sales Webinar (pages/webinar.html)

Purpose: Evergreen video-based sales page for high-ticket offers

Features:

  • Video player with auto-embed conversion (YouTube, Vimeo)
  • Urgency messaging with countdown
  • Social proof testimonials
  • FAQ section
  • Price and CTA prominently displayed
  • Automatic form submission to thank-you page

Dynamic Fields:

  • h – Webinar title
  • s – Promise/benefit headline
  • video – Video URL (YouTube, Vimeo, or embed)
  • o – Offer/urgency text
  • price – Special webinar price
  • cta – Enrollment button text
  • score – Urgency message (e.g., "Offer expires in 24 hours")
  • campaign – Tracking label

Example URL:

pages/webinar.html?h=Exclusive%20Webinar&s=Learn%20insider%20secrets&video=https://www.youtube.com/watch?v=dQw4w9WgXcQ&price=$197&score=Offer%20expires%20in%2024%20hours&cta=Get%20Access&campaign=linkedin

6. Assessment & Certification (pages/course.html)

Purpose: Online course completion with quiz and certificate trigger

Features:

  • Video lesson player with auto-embed conversion
  • 5-question multiple-choice assessment
  • Dynamic passing score threshold
  • Pass/fail result display
  • Certificate of completion (frontend only)
  • Retry functionality for failed attempts

Dynamic Fields:

  • h – Course/lesson title
  • s – Lesson description
  • video – Lesson video URL
  • o – Lesson overview text
  • score – Passing score threshold (e.g., "70%")
  • campaign – Tracking label

Example URL:

pages/course.html?h=Module%201:%20Foundations&s=Complete%20the%20lesson&video=https://youtu.be/abc123&score=75%&campaign=course_001

URL Parameter Reference

All templates use the same unified parameter schema:

Parameter Key Type Description Example
Headline h string Main page heading h=Welcome%20Today
Subheadline s string Secondary heading / subtitle s=Discover%20Success
Offer Text o string Offer description or promise o=Limited%20time%20only
CTA Text cta string Call-to-action button text cta=Get%20Started
Hero Image img URL Hero image URL img=https://example.com/hero.jpg
Video URL video URL YouTube, Vimeo, or embed URL video=https://youtu.be/abc123
Price price string Price or payment text price=$297
Passing Score score string Required passing score for quizzes score=80%
Campaign Label campaign string Tracking / campaign identifier campaign=facebook_ad

Important Notes:

  • No new parameters may be added without approval
  • All parameters are optional—pages use sensible defaults if not provided
  • URL encoding required for spaces and special characters (e.g., space = %20)
  • XSS protection is built-in; all user input is sanitized

How the Brain Controls Pages

Step 1: Brain Generates URL

The Brain system outputs a URL with parameters:

https://brainpages.example.com/pages/landing.html?h=New%20Headline&s=New%20Subheadline&cta=New%20Button&campaign=campaign_001

Step 2: User Visits URL

The user clicks the link or is redirected to the page.

Step 3: JavaScript Parses Parameters

The controller.js script:

  1. Extracts URL parameters
  2. Sanitizes values to prevent XSS
  3. Finds all elements with data-inject attributes
  4. Replaces default content with parameter values

Step 4: Page Displays Dynamic Content

The page renders with the Brain-provided content in real-time.

Step 5: Campaign Tracking

The campaign parameter is logged for analytics integration.

Technical Architecture

Stack

  • HTML: Pure static markup
  • CSS: Mobile-first responsive design
  • JavaScript: Vanilla ES6 (no frameworks)
  • Dependencies: None

File Structure

brain-pages/
├── pages/
│   ├── landing.html              # Lead capture
│   ├── landing-thankyou.html     # Lead confirmation
│   ├── sales.html                # Product sales
│   ├── sales-thankyou.html       # Purchase confirmation
│   ├── webinar.html              # Video sales page
│   └── course.html               # Course + assessment
├── css/
│   └── style.css                 # Global styles
├── js/
│   └── controller.js             # URL parameter controller
├── index.html                    # Template hub & documentation
└── README.md                     # This file

How Parameter Injection Works

Each template uses data-inject attributes to mark dynamic content:

<h1 data-inject="h">Default Headline</h1>
<p data-inject="s">Default Subheadline</p>
<a href="#" class="btn" data-inject="cta">Default Button Text</a>
<img src="" data-inject="img" alt="Hero">

The controller.js finds these elements and replaces their content:

const elements = document.querySelectorAll('[data-inject]');
elements.forEach(el => {
  const key = el.getAttribute('data-inject');
  const value = this.get(key);  // Get from URL or defaults
  el.textContent = value;       // Update content
});

Video Embed Auto-Conversion

The controller automatically converts video URLs:

  • YouTube watch URL → embed URL

    • https://youtube.com/watch?v=abc123 → https://www.youtube.com/embed/abc123

  • YouTube short URL → embed URL

    • https://youtu.be/abc123 → https://www.youtube.com/embed/abc123

  • Vimeo URL → embed URL

    • https://vimeo.com/123456 → https://player.vimeo.com/video/123456

Deployment

Hosting Options

Brain Pages can be deployed to any static hosting service:

  • Netlify (recommended)
  • Cloudflare Pages
  • GitHub Pages
  • AWS S3 + CloudFront
  • Any web server (Apache, Nginx, etc.)

Deployment Steps

  1. Netlify:

    npm install -g netlify-cli
netlify deploy --prod --dir=.

  2. Cloudflare Pages:

    • Connect your Git repository
    • Set build command: (leave empty)
    • Set publish directory: /

  3. Manual Upload:

    • Upload all files to your web server
    • Ensure proper MIME types for .js and .css files

Performance

  • Zero build process required
  • Instant deployment (no compilation)
  • Lightweight (~50KB total, uncompressed)
  • Fast load times (all static files)
  • CDN-friendly (cache everything)

Integration Examples

Example 1: Lead Generation Campaign

Brain Command:

Generate landing page for Q1 lead campaign

Brain Output:

https://brainpages.example.com/pages/landing.html?h=Transform%20Your%20Business%20in%202024&s=Join%20the%20revolution&o=Free%20access%20for%20early%20adopters&cta=Get%20Early%20Access&img=https://cdn.example.com/q1-hero.jpg&campaign=q1_leadgen

Result: Landing page displays custom headline, subheadline, offer, and CTA—all without editing HTML.

Example 2: Multi-Channel Sales Campaign

Brain Command:

Launch sales page on Facebook, Email, and LinkedIn with different CTAs

Brain Output:

Facebook:

pages/sales.html?h=Limited%20Offer&s=Premium%20Access&price=$197&cta=Claim%20Spot&campaign=facebook_jan

Email:

pages/sales.html?h=Exclusive%20for%20Subscribers&s=VIP%20pricing&price=$147&cta=Enroll%20Now&campaign=email_jan

LinkedIn:

pages/sales.html?h=Professional%20Development&s=Career%20advancement&price=$197&cta=Learn%20More&campaign=linkedin_jan

Result: Same page, different messaging per channel—all tracked separately.

Example 3: Evergreen Webinar Funnel

Brain Command:

Create evergreen webinar sales sequence

Brain Output:

Step 1 – Webinar Page:

pages/webinar.html?h=Exclusive%20Masterclass&s=Learn%20the%20secrets&video=https://youtu.be/abc123&price=$197&cta=Enroll%20Now&campaign=webinar_funnel

Step 2 – Thank You (auto-redirect after form):

pages/sales-thankyou.html?name={user_name}&email={user_email}&h=Welcome%20to%20the%20Masterclass&campaign=webinar_funnel

Result: Complete funnel, no page redesign needed.

FAQ

Q: Can I edit the page layouts?

A: No. This is an execution-only system. Layouts are fixed. The Brain controls content only via parameters.

Q: Can I add new parameters?

A: No. The parameter schema is locked. Only the 10 defined parameters are supported.

Q: How do I track conversions?

A: The campaign parameter is logged to the browser console and can be integrated with Google Analytics or other tracking systems. Backend integration is out of scope.

Q: Can I customize the styling?

A: Yes. The css/style.css file can be modified to match your branding. However, the HTML structure cannot be changed.

Q: What about mobile responsiveness?

A: All templates are mobile-first responsive. They adapt to all screen sizes automatically.

Q: How do I handle form submissions?

A: Forms automatically redirect to thank-you pages with form data in URL parameters. Backend processing (email, CRM, etc.) is out of scope.

Q: Can I add analytics?

A: Yes. The controller logs campaign data to the console. You can integrate Google Analytics or other tracking systems by adding the script to the page header.

Q: What about SEO?

A: All pages include proper meta tags and semantic HTML. SEO optimization is supported but not included in scope.

Q: Can I add a database or CMS?

A: No. This is a static system. No backend required.

Troubleshooting

Parameters Not Showing

Issue: URL parameters aren't being injected into the page.

Solution:

  1. Verify the parameter key is correct (h, s, o, cta, img, video, price, score, campaign)
  2. Check that the URL is properly encoded (spaces = %20)
  3. Verify the controller.js file is loaded (check browser console)
  4. Clear browser cache and reload

Video Not Embedding

Issue: Video embed isn't displaying.

Solution:

  1. Verify the video URL is correct
  2. Supported formats: YouTube watch URL, YouTube short URL, Vimeo URL, or direct embed URL
  3. Check that the video is public (not private or restricted)
  4. Try a different video URL to test

Form Not Submitting

Issue: Form submission doesn't redirect to thank-you page.

Solution:

  1. Verify all required fields are filled
  2. Check browser console for JavaScript errors
  3. Verify the thank-you page URL is correct
  4. Clear browser cache and try again

Support & Maintenance

What's Included

✅ Six fully functional templates ✅ Unified JavaScript controller ✅ Mobile-responsive design ✅ XSS protection ✅ Video embed auto-conversion ✅ Campaign tracking support ✅ Complete documentation

What's NOT Included

❌ Backend logic (email, CRM, database) ❌ Certificate email automation ❌ Payment processing ❌ Analytics setup ❌ Custom design changes ❌ Page layout modifications ❌ New parameter additions

Future Enhancements

Possible future updates (out of current scope):

  • A/B testing framework
  • Advanced analytics integration
  • Multi-language support
  • Dark mode theme
  • Additional template types

License

Brain Pages is proprietary software. All rights reserved.

Version

Brain Pages v1.0

  • Release Date: January 2024
  • Status: Production Ready
  • All 6 templates live and tested

Quick Start

  1. Deploy to Netlify/Cloudflare Pages
  2. Test with example URL: 
    https://your-domain.com/pages/landing.html?h=Test&s=Headline&cta=Click%20Me&campaign=test
  3. Verify parameters are injected
  4. Share URLs with your Brain system
  5. Monitor campaign tracking

Contact

For questions or issues, refer to the project documentation or contact your development team.

About

Six static HTML page templates controlled by URL parameters. No frameworks, no CMS, no backend. Pure vanilla JavaScript for Brain-driven dynamic content injection.

brain-pages.vercel.app

Topics

landing-pagesales-pagestatic-sitetemplatesurl-parametersvanilla-javascriptwebinar

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

Packages

Contributors

Languages