1. Include the CSS: <link rel="stylesheet" href="dashboard-core.css">
+2. Include the JavaScript: <script src="dashboard-core.js"></script>
+3. Include specific dashboard: <script src="system-dashboard.js"></script>
+4. Initialize: new SystemDashboard('container-id').start();
+
+
+
+
+
Available Dashboards
+
+
✓ System Monitor - CPU, Memory, Disk, Network
+✓ Kubernetes Cluster - Pods, Nodes, Services
+✓ Database Monitor - PostgreSQL, MongoDB, Redis
+✓ API Monitor - Endpoint health, response times
+✓ Security Dashboard - Firewall, IDS, alerts
+✓ IoT Devices - Smart home monitoring
+✓ Crypto Portfolio - DeFi, NFTs, tokens
+✓ And 140+ more dashboards!
1. Include the CSS: <link rel="stylesheet" href="dashboard-core.css">
+2. Include the JavaScript: <script src="dashboard-core.js"></script>
+3. Include specific dashboard: <script src="system-dashboard.js"></script>
+4. Initialize: new SystemDashboard('container-id').start();
+
+
+
+
+
Available Dashboards
+
+
✓ System Monitor - CPU, Memory, Disk, Network
+✓ Kubernetes Cluster - Pods, Nodes, Services
+✓ Database Monitor - PostgreSQL, MongoDB, Redis
+✓ API Monitor - Endpoint health, response times
+✓ Security Dashboard - Firewall, IDS, alerts
+✓ IoT Devices - Smart home monitoring
+✓ Crypto Portfolio - DeFi, NFTs, tokens
+✓ And 140+ more dashboards!
+
+
+
+
+
+
+
+
+
+EOF
+
+# Create README for web dashboards
+cat > "$WEB_DIR/README.md" << 'EOF'
+# BlackRoad Dashboards - Web Components
+
+Transform terminal dashboards into embeddable web components for any website.
+
+## Features
+
+- 🎨 **Beautiful Design** - BlackRoad OS aesthetic with dark/light themes
+- 🔄 **Auto-Refresh** - Real-time updates with configurable intervals
+- 📱 **Responsive** - Works on desktop, tablet, and mobile
+- 🎯 **Easy Integration** - Simple JavaScript API
+- ⚡ **Lightweight** - No heavy dependencies
+- 🔧 **Customizable** - Theme, colors, refresh rate
+
+## Quick Start
+
+### 1. Include CSS and JavaScript
+
+```html
+
+
+
+```
+
+### 2. Create Container
+
+```html
+
+```
+
+### 3. Initialize Dashboard
+
+```javascript
+const dashboard = new SystemDashboard('my-dashboard', {
+ refreshInterval: 5000, // Refresh every 5 seconds
+ theme: 'dark', // 'dark', 'light', or 'terminal'
+ showControls: true // Show start/stop controls
+});
+
+dashboard.start();
+```
+
+## Available Dashboards
+
+### System Monitoring
+- `SystemDashboard` - CPU, Memory, Disk, Network
+
+### Infrastructure
+- `KubernetesDashboard` - Pods, Nodes, Services
+- `DockerDashboard` - Containers, Images, Networks
+- `RedisDashboard` - Cache metrics, commands
+- `PostgreSQLDashboard` - Database monitoring
+
+### Security
+- `FirewallDashboard` - Rules, blocked IPs
+- `SecurityDashboard` - IDS alerts, incidents
+
+### Development
+- `APIDashboard` - Endpoint monitoring
+- `CICDDashboard` - Pipeline status
+- `GitDashboard` - Repository activity
+
+### Business
+- `SalesDashboard` - Revenue, pipeline
+- `AnalyticsDashboard` - User metrics
+
+### IoT & Hardware
+- `IoTDashboard` - Smart home devices
+- `RaspberryPiDashboard` - Pi monitoring
+
+### Crypto & DeFi
+- `CryptoDashboard` - Portfolio tracking
+- `DeFiDashboard` - Positions, yields
+- `NFTDashboard` - Collection gallery
+
+## Configuration Options
+
+```javascript
+{
+ refreshInterval: 5000, // Update interval in ms (0 = no auto-refresh)
+ theme: 'dark', // 'dark', 'light', 'terminal'
+ showControls: true, // Show control buttons
+ dataSource: 'api', // 'api', 'websocket', 'static'
+ apiEndpoint: '/api/data', // API endpoint for data
+ onUpdate: (data) => {}, // Callback on data update
+ onError: (error) => {} // Callback on error
+}
+```
+
+## Custom Dashboards
+
+Create your own dashboard by extending `DashboardCore`:
+
+```javascript
+class MyDashboard extends DashboardCore {
+ updateDashboard() {
+ // Fetch your data
+ fetch('/api/my-data')
+ .then(res => res.json())
+ .then(data => {
+ // Update display
+ this.contentElement.innerHTML = `
+
+
${data.title}
+
+ Value
+ ${data.value}
+
+
+ `;
+ });
+ }
+}
+```
+
+## CDN Usage
+
+Use directly from CDN (when published):
+
+```html
+
+
+```
+
+## NPM Package
+
+```bash
+npm install blackroad-dashboards
+```
+
+```javascript
+import { SystemDashboard } from 'blackroad-dashboards';
+
+const dashboard = new SystemDashboard('container');
+dashboard.start();
+```
+
+## WordPress Plugin
+
+Use with the BlackRoad Dashboards WordPress plugin:
+
+```
+[blackroad-dashboard type="system" refresh="5000"]
+```
+
+## React Component
+
+```jsx
+import { SystemDashboard } from 'blackroad-dashboards/react';
+
+function App() {
+ return (
+
+ );
+}
+```
+
+## Examples
+
+See the `examples/` directory for full working examples:
+
+- `examples/index.html` - Basic dashboard
+- `examples/multi-dashboard.html` - Multiple dashboards
+- `examples/custom-theme.html` - Custom theming
+- `examples/wordpress-embed.html` - WordPress integration
+
+## Browser Support
+
+- Chrome/Edge 90+
+- Firefox 88+
+- Safari 14+
+- Mobile browsers
+
+## License
+
+MIT License - Use freely in your projects!
+
+## Links
+
+- [Documentation](https://github.com/blackboxprogramming/blackroad-dashboards)
+- [Examples](./examples/)
+- [API Reference](./API.md)
+EOF
+
+echo -e "${GREEN}✓ Web dashboard framework created${NC}"
+echo -e "${GREEN}✓ Core JavaScript and CSS generated${NC}"
+echo -e "${GREEN}✓ Example dashboard created${NC}"
+echo -e "${GREEN}✓ Documentation written${NC}"
+echo ""
+echo -e "${BLUE}═══════════════════════════════════════════════════════════════${NC}"
+echo -e "${GREEN} Web Export Complete!${NC}"
+echo -e "${BLUE}═══════════════════════════════════════════════════════════════${NC}"
+echo ""
+echo "📁 Location: $WEB_DIR"
+echo ""
+echo "🚀 To view the demo:"
+echo " cd $WEB_DIR/examples"
+echo " python3 -m http.server 8080"
+echo " Open: http://localhost:8080"
+echo ""
+echo "📖 Read the guide: $WEB_DIR/README.md"
+echo ""
+echo -e "${YELLOW}Next steps:${NC}"
+echo " 1. Open examples/index.html in a browser"
+echo " 2. Customize themes and components"
+echo " 3. Integrate into your website"
+echo " 4. Create custom dashboards"
+echo ""