OPTMO - AI-Powered Automation Platform

OPTMO is a responsive, feature-rich single-page website for an AI-powered automation platform. It showcases automation workflows for content creation and event organization with an intuitive UI and interactive features.

✨ Features

• Smart Navigation: Collapsible sidebar with adjustable width (200-450px) and smooth animations
• Advanced Search: Real-time full-page search with highlighting across all content
• Project Management: Filterable project cards with category-based organization
• Membership Plans: Three-tier pricing (Free, Pro, Enterprise)
• User Authentication: Email/password signup and login with PocketBase
• User Dashboards: Account management with profile, plan, and settings
• Behavior Analytics: Automatic event tracking and user analytics
• Cookie Consent: Privacy-focused consent management with optional analytics
• Responsive Design: Mobile-first approach with proper touch interactions
• Performance: No build step required, pure vanilla JavaScript (zero dependencies)
• Accessibility: Semantic HTML, keyboard navigation, proper ARIA labels

🚀 Quick Start

Prerequisites

• Git (for cloning)
• Python 3.x (for local development server)
• Modern web browser

Local Development

1. Clone the repository:

   git clone https://github.com/fredykraft/Optmo.git
   cd Optmo

2. Start a local development server:

   # Python 3
   python -m http.server 8000
   
   # Or Python 2
   python -m SimpleHTTPServer 8000

3. Open your browser and navigate to:

   http://localhost:8000
   

� User Authentication & Database

OPTMO includes a complete authentication system with user management and behavior analytics powered by PocketBase.

Features

• ✅ Email/password signup and login
• ✅ User profile management (name, company, avatar)
• ✅ Automatic behavior tracking and analytics
• ✅ Project management with event logging
• ✅ Real-time analytics dashboard
• ✅ Account settings and preferences

Quick Setup for Testing

1. Download PocketBase from https://pocketbase.io/

2. Run PocketBase:

   cd Optmo
   pocketbase serve --dir ./pb_data
   
   # Or use the helper script:
   bash start-pocketbase.sh

3. Configure Database:

   • Open http://localhost:8090 in your browser
   • Create an admin account
   • Migrations auto-create collections on startup (users, user_profiles, projects, user_events)
   • See POCKETBASE_SETUP.md for verification steps
   • Configure CORS for http://localhost:8000

4. Test Authentication:

   • Go to http://localhost:8000/login.html
   • Sign up or log in with your test account
   • Verify redirect to http://localhost:8000/account.html
   • Visit http://localhost:8000/test-pocketbase.html to verify setup
   • (Optional) Run python3 scripts/seed_pocketbase.py to create a demo account and sample analytics data

PocketBase Architecture

Frontend (Vanilla JS)
    ↓ HTTP API Calls
PocketBase Server (localhost:8090)
    ↓
SQLite Database
    ├─ users (authentication & profiles)
    ├─ user_events (behavior tracking)
    └─ projects (user projects)

Key Files

• POCKETBASE_SETUP.md - Complete setup and deployment guide
• SETUP_SUMMARY.md - What's implemented and what's next
• js/pocketbase-client.js - PocketBase integration library
• test-pocketbase.html - Connection test utility
• login.html - Login and signup interface
• account.html - User dashboard

Deployment

For production use, deploy PocketBase to:

• Railway (recommended, $5/month)
• Render (similar to Railway)
• DigitalOcean (most control, $5/month and up)
• Your own VPS (most affordable, $2-5/month)

See POCKETBASE_SETUP.md for deployment options.

�📁 Project Structure

.
├── index.html                      # Main single-page application
├── donate.html                     # Donation/support page
├── login.html                      # User login and signup page
├── account.html                    # User dashboard and settings
├── test-pocketbase.html            # PocketBase connection test utility
├── POCKETBASE_SETUP.md             # Detailed PocketBase setup guide
├── SETUP_SUMMARY.md                # Implementation summary and checklist
├── start-pocketbase.sh             # Helper script to start PocketBase
├── scripts/
│   └── seed_pocketbase.py          # One-click PocketBase demo data seeding
├── README.md                       # This file
├── LICENSE                         # MIT License
├── .gitignore                      # Git ignore rules
├── css/
│   └── styles.css                  # Complete styling (2000+ lines)
├── js/
│   ├── main.js                     # Core functionality (600+ lines)
│   ├── pocketbase-client.js        # PocketBase integration library (180+ lines)
│   ├── private-config.js           # ⚠️ Local configuration (NOT committed)
│   └── private-config.example.js   # Configuration template
└── assets/                         # Images and media

🔒 Security & Privacy

No Sensitive Data in Version Control

This project follows security best practices:

• Private Configuration (js/private-config.js) is never committed to GitHub

  • Listed in .gitignore for protection
  • Contains only local analytics password
  • Template provided in private-config.example.js

• No hardcoded secrets in public code

  • API keys, tokens, and passwords are excluded
  • Email addresses on donation page are intentionally public for support

Setup Private Configuration

1. Copy the example file:

   cp js/private-config.example.js js/private-config.js

2. Edit js/private-config.js and set your own password:

   window.OPTMO_ANALYTICS_PASSWORD = 'your-secure-password-here';

3. Never commit this file - it's protected by .gitignore

Before Publishing to GitHub

Run this safety checklist before every push:

1. Verify local-only files are not tracked:

   git check-ignore -v js/private-config.js pb_data/ pocketbase/

2. Run the secret scanner:

   ./scripts/scan_secrets.sh

3. If a private file was accidentally tracked earlier, untrack it:

   git rm --cached js/private-config.js || true
   git rm -r --cached pb_data pocketbase || true

4. Automated check on GitHub:

   • Secret scan runs automatically on every push and pull request via GitHub Actions.
   • Workflow file: .github/workflows/secret-scan.yml

🛠 Tech Stack

• HTML5 - Semantic structure (467 lines)
• CSS3 - Modern styling with custom properties, Flexbox, Grid (2000+ lines)
• Vanilla JavaScript - Zero dependencies, no frameworks (580+ lines)
• Font Awesome 6.4.0 - Icon library (CDN)

📖 Key Interactions

Navigation

• Sidebar Toggle: Open/close main navigation menu
• Adjustable Sidebar: Drag the right edge to resize (200-450px)
• Smooth Scrolling: Anchor links with header offset compensation
• Active States: Navigation highlights current section

Search

• Real-time Search: Type to find content across entire page
• Smart Highlighting: Gold highlights with pulse animation
• Results Panel: Shows count and affected sections
• Keyboard Shortcut: Cmd+K / Ctrl+K to focus search

Content

• Project Filtering: Filter cards by category (Content, Events, Tools)
• Cookie Banner: Privacy-first consent management
• Analytics Protection: Optional password-gated analytics tracking

UX Features

• Back-to-Top Button: Appears after scrolling 300px
• Scroll Progress Bar: Visual progress indicator at top of page
• Toast Notifications: Non-intrusive feedback messages
• Copy-to-Clipboard: One-click email copying on donation page

📱 Responsive Design

• Desktop: Full sidebar navigation, multi-column layouts
• Tablet: Optimized spacing, touch-friendly interactions
• Mobile: Overlay sidebar, single-column content, tap targets

💰 Support OPTMO

If you'd like to support OPTMO development:

• GitHub Sponsors: Sponsor fredykraft
• PayPal: optmo256@gmail.com
• Direct Support: Visit Donation Page

📝 License

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

🤝 Contributing

Contributions are welcome! Please feel free to:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 Development Notes

Analytics

• Password validation is client-side (for demonstration)
• For production, implement server-side verification
• Analytics hooks are placeholders - integrate with your service

Cookie Management

• Preferences stored in localStorage
• optmo-analytics-enabled key for tracking consent
• No third-party trackers by default

Browser Compatibility

• Modern features: CSS custom properties, Flexbox, Grid
• Supports: Chrome, Firefox, Safari, Edge (latest versions)
• Mobile browsers: iOS Safari 12+, Chrome Mobile

👨‍💻 Author

fredykraft - Original creator and maintainer

🙏 Acknowledgments

• Font Awesome for icon library
• Community feedback for feature improvements

---

Last updated: February 28, 2026
Version: 1.0.0