Web3 Theme
Web3 Sparks - Dynamic Innovation Theme A vibrant, living HubSpot theme that combines particle animations, CLI terminal integration, and Web3 crypto payment capabilities. Built for innovators who want their pages to pulse with energy.
## Features
### **Dynamic Particle Animations**
- Canvas-based particle system with customizable density
- Mouse-interactive particles that respond to user movement
- Multiple color schemes and animation speeds
- Pulsating elements throughout
### **CLIP v2.0 Terminal Module**
- Full command-line interface embedded in your pages
- HubSpot CRM integration (contacts, companies, deals)
- Git repository operations simulation
- File system commands
- Configurable color schemes (Matrix Green, Cyber Blue, Neon Pink, Ember Orange)
- Adjustable terminal height and transparency
- localStorage persistence for command history
### **Web3 Payment Button Module**
- MetaMask wallet integration
- Multi-chain cryptocurrency support (Ethereum, Polygon, BSC, Arbitrum, Optimism)
- Customizable button styles (rounded, pill, square)
- Multiple size options
- Optional pulsating animations
- Automatic CRM tracking via HubSpot Behavioral Events API
## Installation
### Upload to HubSpot Design Manager
```bash
cd web3-theme
hs upload . web3-sparks-theme --account=YOUR_ACCOUNT_ID
```
### Apply Theme to Your Site
1. Navigate to **Marketing** > **Website** > **Website Settings** > **Themes**
2. Select "Web3 Sparks - Dynamic Innovation Theme"
3. Click "Apply Theme"
## Theme Structure
```web3-theme/
├── theme.json # Theme configuration
├── fields.json # Theme customization options
├── README.md # This file
│
├── templates/
│ ├── home.html # Simple homepage template
│ └── clip-sparks-showcase.html # Featured showcase template
│
├── modules/
│ ├── web3_payment_button.module/ # Crypto payment button
│ │ ├── fields.json
│ │ ├── module.html
│ │ ├── module.css
│ │ └── module.js
│ │
│ └── clip_terminal.module/ # CLI terminal
│ ├── fields.json
│ ├── module.html
│ ├── module.css
│ └── module.js
│
├── css/
│ └── web3-sparks.css # Theme-wide styles
│
├── js/
│ └── web3-sparks.js # Particle animation system
│
└── images/
└── theme-preview.png # Theme preview image
```
## Module Usage
### CLIP Terminal Module
**Available Commands:**
**Connection:**
- `connect crm <token>` - Connect to HubSpot CRM
- `connect github <token>` - Connect to GitHub
- `disconnect` - Clear all credentials
- `status` - Show connection status
**CRM Operations:**
- `contacts list` - List contacts
- `contacts get <id>` - Get contact details
- `companies list` - List companies
- `deals list` - List deals
- `properties <object>` - View object properties
- `pipelines list` - View deal pipelines
**Git Operations:**
- `clone <repo-url>` - Clone repository
- `repo set <name>` - Set current repository
- `pull` - Pull latest changes
- `push <message>` - Commit and push
- `git <command>` - Execute git command
- `sync` - Sync CRM with repository
**Utilities:**
- `ls, dir` - List files
- `pwd` - Show current directory
- `cd <path>` - Change directory
- `cat <file>` - Display file content
- `curl <url>` - HTTP requests
- `ping <host>` - Test connectivity
- `whoami` - User info
- `echo <text>` - Print text
- `clear, cls` - Clear terminal
**Configuration Options:**
- **Terminal Height**: Small (300px), Medium (500px), Large (700px), Fullscreen
- **Color Scheme**: Matrix Green, Cyber Blue, Neon Pink, Ember Orange, Custom
- **Enable Git Commands**: On/Off
- **Enable CRM Commands**: On/Off
- **Show Welcome Message**: On/Off
- **Terminal Transparency**: 0-100%
- **Enable Glow Effects**: On/Off
### Web3 Payment Button Module
**Supported Networks:**
- Ethereum (ETH)
- Polygon (MATIC)
- Binance Smart Chain (BNB)
- Arbitrum (ETH)
- Optimism (ETH)
**Configuration Options:**
- **Recipient Address**: Wallet address to receive payments
- **Payment Amount**: Amount in ETH/crypto
- **Button Text**: Customizable button label
- **Button Color**: Any hex color
- **Button Style**: Rounded, Pill, Square
- **Button Size**: Small, Medium, Large
- **Enable Animation**: Pulsating effect On/Off
- **Email for CRM**: Collect email for HubSpot tracking
**CRM Integration:**
The button automatically tracks completed payments as custom behavioral events in HubSpot, creating timeline entries with:
- Transaction hash
- Wallet address
- Payment amount
- Blockchain network
## Theme Customization
### Color Settings
Navigate to **Design Tools** > **Edit** to customize:
- **Primary Accent Color**: Main brand color (#00d4ff default)
- **Secondary Accent Color**: Gradient highlights (#ff6b6b default)
- **Tertiary Accent Color**: Complex gradients (#4ecdc4 default)
- **Background Gradient**: Dark, Cosmic Purple, Neon Dreams, Digital Ocean
### Animation Settings
- **Enable Particle Effects**: Toggle particle background
- **Particle Density**: Low (30), Medium (50), High (100), Ultra (200)
- **Animation Speed**: Slow, Normal, Fast
## Templates
### CLIP Sparks Showcase (Featured)
The main showcase template featuring:
- Full-screen particle animation background
- Hero section with animated gradient title
- Feature badges
- Web3 payment button integration
- Embedded CLIP terminal
- Drag-and-drop content areas
- Responsive design
**DnD Areas:**
- `hero_content` - Hero section content
- `payment_button` - Web3 payment button placement
- `clip_terminal` - Terminal placement
- `additional_content` - Extra content area
- `footer_content` - Footer area
### Simple Homepage
A minimal template with:
- Basic drag-and-drop areas
- Optional particle background
- Flexible layout
## Browser Compatibility
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
**MetaMask Required** for Web3 payment functionality.
## Performance
- Optimized canvas rendering with requestAnimationFrame
- Configurable particle density for performance tuning
- Lazy-loaded assets
- Minimal external dependencies
## Security
- All crypto transactions happen client-side via MetaMask
- No private keys stored or transmitted
- localStorage keys scoped to module namespace
- API tokens stored in browser localStorage (not persisted server-side)
## Support & Customization
**Author**: NubleX
**Email**: support@idarti[.]com
**Website**: hxxps://www.idarti[.]com
## License
ISC License
## Contributing
This theme is designed to help secure critical infrastructure and improve Web3 adoption. Contributions focused on:
- Security enhancements
- Performance optimizations
- Additional blockchain network support
- Enhanced CRM integrations
...are welcome!
## Version History
### v2.0.0 (Current)
- Added CLIP v2.0 terminal module
- Modular architecture for embeddable components
- Enhanced color theming system
- Multiple template options
- Improved responsive design
- Scoped localStorage for multi-instance support
### v1.0.0
- Initial release with particle animations
- Web3 payment button
- Basic theme structure
---
## Built with love for the future of Web3 and human-AI collaboration