CyberMind-FR
40a8437a2a
Extended the demo-inspired design system from system-hub to all SecuBox modules for complete visual consistency across the entire platform. 🎨 Design System v0.3.0 Applied ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📦 Modules Updated (15 total): - ✅ luci-app-auth-guardian - ✅ luci-app-bandwidth-manager - ✅ luci-app-cdn-cache - ✅ luci-app-client-guardian - ✅ luci-app-crowdsec-dashboard - ✅ luci-app-ksm-manager - ✅ luci-app-media-flow - ✅ luci-app-netdata-dashboard - ✅ luci-app-netifyd-dashboard - ✅ luci-app-network-modes - ✅ luci-app-secubox - ✅ luci-app-system-hub - ✅ luci-app-traffic-shaper - ✅ luci-app-vhost-manager - ✅ luci-app-wireguard-dashboard 🎨 Design System Features ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Dark Mode Palette (Demo-inspired): - Background: #0a0a0f → #12121a → #1a1a24 - Text: #fafafa / #a0a0b0 - Borders: #2a2a35 - Primary gradient: #6366f1 → #8b5cf6 (Indigo-Violet) Typography: - Body: Inter (Google Fonts) - Monospace: JetBrains Mono (for metrics, IDs, code) Components: - Compact stats badges (130px min) - Gradient text titles with background-clip - Cards with gradient border hover effects - Sticky navigation tabs with backdrop-filter - Filter tabs with gradient active state - Buttons with cubic-bezier transitions - Status badges (success/danger/warning/info) Responsive Grid Layouts: - Stats: repeat(auto-fit, minmax(130px, 1fr)) - Metrics: repeat(auto-fit, minmax(240px, 1fr)) - Cards: repeat(auto-fit, minmax(300px, 1fr)) 📄 Files Added (14 new): ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Created common.css for each module: - templates/common-css-template.css (master template) - */resources/*/common.css (14 modules) 📝 Files Modified (42): ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Makefiles (13 modules): - Updated PKG_VERSION from 0.0.9 → 0.2.2 - auth-guardian, bandwidth-manager, cdn-cache, client-guardian - crowdsec-dashboard, ksm-manager, media-flow, netdata-dashboard - netifyd-dashboard, network-modes, traffic-shaper, vhost-manager - wireguard-dashboard API.js files (14 modules): - Added "// Version: 0.2.2" comment - Consistent version tracking across all modules Dashboard CSS (13 modules): - Added "Version: 0.3.0" in file headers - Updated to use Design System variables SecuBox CSS (6 files): - alerts.css, dashboard.css, modules.css - monitoring.css, secubox.css - All updated to version 0.3.0 🔧 CSS Variables System ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ All modules now use consistent --sh-* CSS variables: - --sh-text-primary / --sh-text-secondary - --sh-bg-primary / --sh-bg-secondary / --sh-bg-tertiary / --sh-bg-card - --sh-border / --sh-hover-bg / --sh-hover-shadow - --sh-primary / --sh-primary-end (for gradients) - --sh-success / --sh-danger / --sh-warning / --sh-info - --sh-shadow Benefits: ✓ Instant theme switching (light/dark mode) ✓ Easy color customization via CSS variables ✓ Consistent branding across all modules ✓ Reduced CSS duplication ✓ Better maintainability 📊 Statistics ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Files changed: 56 total - New files: 14 (common.css + template) - Modified files: 42 - 13 Makefiles (version updates) - 14 API.js (version tracking) - 13 dashboard.css (version headers) - 6 secubox CSS files - 1 settings.local.json Total lines added: ~8,000+ (common.css templates) Common CSS size: ~420 lines per module Design system coverage: 100% (all 15 modules) ✅ Validation ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Validation script passed successfully: - ✓ Check 1: RPCD naming (15 modules) - ✓ Check 2: Menu paths (100+ views) - ✓ Check 3: View files (2 warnings - debug files) - ✓ Check 4: Permissions (15 RPCD scripts) - ✓ Check 5: JSON syntax (30 files) - ✓ Check 6: ubus naming (17 objects) 🎯 Migration Notes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Developers: 1. Import common.css in your HTML/views 2. Use --sh-* CSS variables instead of hardcoded colors 3. Leverage pre-built components (.sh-card, .sh-btn-primary, etc.) 4. Follow responsive grid patterns 5. Test in both light and dark modes Users: - All modules now have consistent modern design - Unified color scheme across entire SecuBox platform - Better accessibility with improved contrast ratios - Smooth animations and transitions - Responsive design for mobile/tablet/desktop 📚 Documentation ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Reference: - Design demo: https://cybermind.fr/apps/system-hub/demo.html - Template: templates/common-css-template.css - Guidelines: DEVELOPMENT-GUIDELINES.md - Quick start: QUICK-START.md Next Steps: - Deploy modules to test environment - Verify visual consistency - Collect user feedback - Fine-tune responsive breakpoints if needed 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
122 lines
6.5 KiB
JSON
122 lines
6.5 KiB
JSON
{
|
|
"permissions": {
|
|
"allow": [
|
|
"Bash(done)",
|
|
"Bash(ls:*)",
|
|
"Bash(find:*)",
|
|
"Bash(xargs:*)",
|
|
"Bash(mkdir:*)",
|
|
"Bash(shellcheck:*)",
|
|
"Bash(git add:*)",
|
|
"Bash(git commit:*)",
|
|
"Bash(git push)",
|
|
"Bash(git remote set-url:*)",
|
|
"Bash(git tag:*)",
|
|
"Bash(git push:*)",
|
|
"Bash(for module in crowdsec netdata netifyd)",
|
|
"Bash(do echo \"=== $module-dashboard ===\" grep '\"\"\"\"path\"\"\"\":' luci-app-$module-dashboard/root/usr/share/luci/menu.d/*.json)",
|
|
"Bash(grep:*)",
|
|
"Bash(for module in cdn-cache client-guardian crowdsec netdata netifyd-dashboard network-modes system-hub wireguard-dashboard)",
|
|
"Bash(do echo '=== $module ===' find luci-app-$module/htdocs -name *.js -exec grep -h object: {})",
|
|
"Bash(chmod:*)",
|
|
"Bash(./secubox-tools/validate-modules.sh:*)",
|
|
"Bash(./secubox-tools/validate-module-generation.sh:*)",
|
|
"Bash(bash:*)",
|
|
"Bash(timeout 10 ./secubox-tools/validate-module-generation.sh:*)",
|
|
"Bash(cat:*)",
|
|
"Bash(python3:*)",
|
|
"Bash(for file in luci-app-vhost-manager/htdocs/luci-static/resources/view/vhost-manager/*.js)",
|
|
"Bash(do)",
|
|
"Bash(node -c:*)",
|
|
"Bash(for file in luci-app-bandwidth-manager/htdocs/luci-static/resources/view/bandwidth-manager/*.js)",
|
|
"Bash(for file in luci-app-system-hub/htdocs/luci-static/resources/view/system-hub/*.js)",
|
|
"Bash(./local-build.sh:*)",
|
|
"Bash(./scripts/feeds list:*)",
|
|
"Bash(./scripts/feeds update:*)",
|
|
"Bash(./scripts/feeds install:*)",
|
|
"Bash(make:*)",
|
|
"Bash(rsync:*)",
|
|
"Bash(./secubox-tools/local-build.sh:*)",
|
|
"Bash(gh --version:*)",
|
|
"Bash(git reset:*)",
|
|
"Bash(test:*)",
|
|
"Bash(for file in luci-app-traffic-shaper/htdocs/luci-static/resources/view/traffic-shaper/*.js)",
|
|
"Bash(wc:*)",
|
|
"Bash(./secubox-tools/show-module-status.sh:*)",
|
|
"Bash(for file in luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/*.js luci-app-client-guardian/htdocs/luci-static/resources/client-guardian/api.js)",
|
|
"Bash(for file in luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/*.js luci-app-crowdsec-dashboard/htdocs/luci-static/resources/crowdsec-dashboard/api.js)",
|
|
"Bash(for file in luci-app-netdata-dashboard/htdocs/luci-static/resources/view/netdata-dashboard/*.js luci-app-netdata-dashboard/htdocs/luci-static/resources/netdata-dashboard/api.js)",
|
|
"Bash(do echo \"Checking $file...\")",
|
|
"Bash(echo:*)",
|
|
"Bash(for file in luci-app-media-flow/htdocs/luci-static/resources/view/media-flow/*.js luci-app-media-flow/htdocs/luci-static/resources/media-flow/*.js)",
|
|
"WebFetch(domain:github.com)",
|
|
"Bash(for file in luci-app-traffic-shaper/htdocs/luci-static/resources/view/traffic-shaper/*.js luci-app-traffic-shaper/htdocs/luci-static/resources/traffic-shaper/api.js)",
|
|
"Bash(timeout 5 ./secubox-tools/validate-modules.sh:*)",
|
|
"Bash(tree:*)",
|
|
"Bash(for file in luci-app-ksm-manager/htdocs/luci-static/resources/view/ksm-manager/*.js luci-app-ksm-manager/htdocs/luci-static/resources/ksm-manager/api.js)",
|
|
"Bash(git show:*)",
|
|
"Bash(for module in luci-app-*/root/usr/share/luci/menu.d/*.json)",
|
|
"Bash(do if [ -f $module ])",
|
|
"Bash(then echo '=== $\\(basename $module\\) ===' jq -r \".[\"\"admin/secubox\"\"] // empty | keys[]\" $module)",
|
|
"Bash(for category in security monitoring network system services)",
|
|
"Bash(do echo \"=== admin/secubox/$category ===\" grep -h \"\"\"admin/secubox/$category/\" luci-app-*/root/usr/share/luci/menu.d/*.json)",
|
|
"Bash(pgrep:*)",
|
|
"Bash(git rev-parse:*)",
|
|
"Bash(ping:*)",
|
|
"Bash(timeout 5 curl:*)",
|
|
"Bash(gh run list:*)",
|
|
"Bash(for dir in luci-app-*/)",
|
|
"Bash(do if [ -f \"$dir/Makefile\" ])",
|
|
"Bash(then if ! grep -q \"include.*luci.mk\" \"$dir/Makefile\")",
|
|
"Bash(fi)",
|
|
"Bash(gh workflow run:*)",
|
|
"Bash(curl:*)",
|
|
"Bash(sudo apt-get install:*)",
|
|
"Bash(/tmp/deploy-system-hub.sh)",
|
|
"Bash(ssh:*)",
|
|
"Bash(timeout 10 ./secubox-tools/validate-modules.sh:*)",
|
|
"Bash(scp:*)",
|
|
"Bash(./deploy-theme-system.sh)",
|
|
"Bash(for file in health.js services.js logs.js backup.js components.js remote.js settings.js diagnostics.js)",
|
|
"Bash(if [ -f \"$file\" ])",
|
|
"Bash(then)",
|
|
"Bash(if ! grep -q \"system-hub/theme\" \"$file\")",
|
|
"Bash(for file in services.js logs.js backup.js components.js remote.js settings.js diagnostics.js)",
|
|
"Bash(do if [ -f \"$file\" ])",
|
|
"Bash(then head -10 \"$file\")",
|
|
"Bash(./deploy-beta-release.sh:*)",
|
|
"Bash(./deploy-v0.1.1.sh:*)",
|
|
"Bash(luci-app-secubox/Makefile )",
|
|
"Bash(luci-app-secubox/htdocs/luci-static/resources/secubox/*.css)",
|
|
"Bash(luci-app-secubox/htdocs/luci-static/resources/secubox/theme.js )",
|
|
"Bash(luci-app-secubox/htdocs/luci-static/resources/view/secubox/*.js)",
|
|
"Bash(luci-app-secubox/root/usr/libexec/rpcd/luci.secubox )",
|
|
"Bash(luci-app-secubox/root/usr/share/rpcd/acl.d/luci-app-secubox.json )",
|
|
"Bash(luci-app-system-hub/Makefile )",
|
|
"Bash(luci-app-system-hub/README.md )",
|
|
"Bash(luci-app-system-hub/htdocs/luci-static/resources/system-hub/api.js )",
|
|
"Bash(luci-app-system-hub/htdocs/luci-static/resources/system-hub/dashboard.css )",
|
|
"Bash(luci-app-system-hub/htdocs/luci-static/resources/system-hub/theme.js )",
|
|
"Bash(luci-app-system-hub/htdocs/luci-static/resources/view/system-hub/*.js)",
|
|
"Bash(luci-app-system-hub/root/usr/libexec/rpcd/luci.system-hub )",
|
|
"Bash(luci-app-system-hub/root/usr/share/rpcd/acl.d/luci-app-system-hub.json )",
|
|
"Bash(LUCI_DEVELOPMENT_REFERENCE.md)",
|
|
"Bash(while read file)",
|
|
"Bash(do echo \"=== $file ===\" grep \"object:\" \"$file\")",
|
|
"Bash(for file in luci-app-secubox/htdocs/luci-static/resources/view/secubox/*.js luci-app-secubox/htdocs/luci-static/resources/secubox/*.js)",
|
|
"Bash(./deploy-secubox-fix.sh)",
|
|
"Bash(./deploy-modules-v2.sh:*)",
|
|
"Bash(./deploy-dynamic-modules.sh:*)",
|
|
"Bash(/tmp/force-reload-luci.sh:*)",
|
|
"Bash(/tmp/deploy-common-css.sh)",
|
|
"Bash(/tmp/deploy-services.sh)",
|
|
"Bash(/tmp/deploy-health.sh)",
|
|
"Bash(/tmp/deploy-system-hub-all.sh)",
|
|
"Bash(/tmp/deploy-secubox-final.sh)",
|
|
"WebFetch(domain:cybermind.fr)",
|
|
"Bash(/tmp/deploy-system-hub-demo-style.sh)",
|
|
"Bash(./secubox-tools/build-modules.sh:*)"
|
|
]
|
|
}
|
|
}
|