gandalf/secubox-openwrt
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: Add comprehensive documentation with screenshot structure

Browse Source 
Creates docs/ directory with secubox-deb style documentation:

- README.md: Project overview and quick links
- SCREENSHOTS.md: Module screenshot gallery (pending captures)
- UI-GUIDE.md: CRT P31 theme design guide
- MODULES.md: Complete package catalog (75+ modules)
- API.md: RPCD/ubus API reference

Screenshot directory structure:
- docs/screenshots/router/ for OpenWrt router captures
- docs/wiki/ for multilingual documentation

Documentation follows secubox-deb format with:
- Organized module categories
- Status indicators (✅ Captured / ⏳ Pending)
- Theme color palette reference
- API method tables

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
CyberMind-FR 2026-03-26 07:35:42 +01:00
parent 5294d26375
commit 0a3aba569c
5 changed files with 898 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

264
docs/API.md Normal file
View File

@ -0,0 +1,264 @@
# SecuBox API Reference
RPCD/ubus API documentation for SecuBox OpenWrt modules.
---
## Overview
SecuBox modules expose APIs via OpenWrt's RPCD (Remote Procedure Call Daemon) system. These APIs are accessible via:
- **ubus** - Direct CLI access
- **HTTP** - LuCI JSON-RPC endpoint
- **JavaScript** - LuCI rpc.declare()
## Authentication
Most APIs require LuCI authentication. The `luci-app-secubox-*` ACL files define read/write permissions.
```bash
# Check available methods
ubus list | grep luci.secubox
# List methods for a service
ubus -v list luci.secubox-mesh
```
---
## Core APIs
### luci.secubox-mesh
Mesh network management.
| Method | Params | Description |
|--------|--------|-------------|
| `status` | - | Get mesh daemon status |
| `peers` | - | List connected peers |
| `topology` | - | Get mesh topology graph |
| `nodes` | - | List all known nodes |
| `node_info` | `did` | Get node details |
| `node_rotate` | - | Rotate node identity |
| `telemetry` | - | Get system telemetry |
| `ping` | `target` | Ping a mesh peer |
| `get_config` | - | Get mesh configuration |
| `set_config` | `key`, `value` | Update configuration |
| `restart` | - | Restart mesh daemon |
**Example:**
```bash
# Get mesh status
ubus call luci.secubox-mesh status
# Response:
{
"running": true,
"node_did": "did:plc:abc123...",
"role": "peer",
"mesh_state": "connected",
"peer_count": 3,
"uptime": 86400
}
```
### luci.secubox
Core SecuBox management.
| Method | Params | Description |
|--------|--------|-------------|
| `status` | - | System status overview |
| `version` | - | Version information |
| `apps_list` | - | Installed apps catalog |
| `apps_install` | `name` | Install an app |
| `apps_remove` | `name` | Remove an app |
| `first_run` | - | First run wizard status |
---
## Security APIs
### luci.crowdsec-dashboard
CrowdSec IDS/IPS integration.
| Method | Params | Description |
|--------|--------|-------------|
| `status` | - | CrowdSec service status |
| `get_overview` | - | Cached stats overview |
| `refresh_overview_cache` | - | Force cache refresh |
| `get_alerts` | `limit` | Recent alerts |
| `get_decisions` | - | Active ban decisions |
| `get_bouncers` | - | Registered bouncers |
| `ban_ip` | `ip`, `duration` | Manually ban an IP |
| `unban_ip` | `ip` | Remove ban decision |
### luci.mitmproxy
WAF/TLS proxy management.
| Method | Params | Description |
|--------|--------|-------------|
| `status` | - | Proxy status |
| `get_requests` | `limit` | Recent requests |
| `get_threats` | - | Detected threats |
| `get_stats` | - | Traffic statistics |
| `clear_cache` | - | Clear request cache |
---
## Network APIs
### luci.haproxy
Load balancer management.
| Method | Params | Description |
|--------|--------|-------------|
| `status` | - | HAProxy status |
| `get_vhosts` | - | List virtual hosts |
| `vhost_add` | `domain`, `backend` | Add vhost |
| `vhost_remove` | `domain` | Remove vhost |
| `get_backends` | - | List backends |
| `get_stats` | - | Connection stats |
| `reload` | - | Reload configuration |
### luci.wireguard-dashboard
WireGuard VPN management.
| Method | Params | Description |
|--------|--------|-------------|
| `status` | - | WireGuard status |
| `get_interfaces` | - | List WG interfaces |
| `get_peers` | `interface` | List peers |
| `add_peer` | `interface`, `pubkey`, `endpoint` | Add peer |
| `remove_peer` | `interface`, `pubkey` | Remove peer |
| `generate_keys` | - | Generate keypair |
| `get_qr` | `interface`, `peer` | Get QR code config |
---
## Monitoring APIs
### luci.netdata-dashboard
System monitoring integration.
| Method | Params | Description |
|--------|--------|-------------|
| `status` | - | Netdata status |
| `get_metrics` | `chart` | Get chart data |
| `get_alarms` | - | Active alarms |
### luci.metrics-dashboard
Quick metrics overview.
| Method | Params | Description |
|--------|--------|-------------|
| `get_cached_status` | - | Cached system metrics |
| `refresh_cache` | - | Force cache update |
---
## Publishing APIs
### luci.metablogizer
Static site generator.
| Method | Params | Description |
|--------|--------|-------------|
| `status` | - | Service status |
| `list_sites` | - | List all sites |
| `get_site` | `name` | Get site details |
| `create_site` | `name`, `domain`, `template` | Create site |
| `delete_site` | `name` | Delete site |
| `publish` | `name` | Publish to HAProxy |
| `upload` | `name`, `file`, `content` | Upload file |
### luci.streamlit-forge
Streamlit app management.
| Method | Params | Description |
|--------|--------|-------------|
| `status` | - | Forge status |
| `list_apps` | - | List all apps |
| `create_app` | `name`, `template` | Create app |
| `start_app` | `name` | Start app |
| `stop_app` | `name` | Stop app |
| `delete_app` | `name` | Delete app |
| `expose` | `name`, `domain` | Expose via HAProxy |
---
## JavaScript Usage
In LuCI views:
```javascript
'use strict';
'require rpc';
var callMeshStatus = rpc.declare({
object: 'luci.secubox-mesh',
method: 'status',
expect: {} // Return full response
});
return view.extend({
load: function() {
return callMeshStatus();
},
render: function(data) {
// data contains the mesh status
return E('div', {}, [
E('span', {}, 'Peer count: ' + data.peer_count)
]);
}
});
```
---
## Error Codes
| Code | Description |
|------|-------------|
| `-32002` | Access denied (check ACL) |
| `-32600` | Invalid request |
| `-32601` | Method not found |
| `-32602` | Invalid params |
| `-32700` | Parse error |
---
## ACL Configuration
ACL files: `/usr/share/rpcd/acl.d/luci-app-*.json`
```json
{
"luci-app-example": {
"description": "Example module",
"read": {
"ubus": {
"luci.example": ["status", "list"]
}
},
"write": {
"ubus": {
"luci.example": ["create", "delete"]
}
}
}
}
```
---
*SecuBox API Reference v1.0*

168
docs/MODULES.md Normal file
View File

@ -0,0 +1,168 @@
# SecuBox Module Catalog
Complete list of SecuBox packages for OpenWrt 24.10.
---
## Core Packages
| Package | Version | Description |
|---------|---------|-------------|
| `secubox-core` | 1.0.0 | Core utilities, scripts, and shared libraries |
| `secubox-mesh` | 1.0.0 | Mesh daemon with topology management and gate election |
| `secubox-identity` | 0.1.0 | DID:plc generation, key rotation, trust scoring |
| `secubox-mirrornet` | 0.1.0 | Mesh orchestration and gossip protocol |
| `secubox-p2p` | 0.6.0 | P2P decentralized network with blockchain sync |
| `secubox-p2p-intel` | 0.1.0 | IoC signed gossip, threat intelligence sharing |
## Security Packages
| Package | Version | Description |
|---------|---------|-------------|
| `luci-app-crowdsec-dashboard` | 0.8.0 | CrowdSec IDS/IPS dashboard |
| `luci-app-mitmproxy` | 0.5.0 | WAF/TLS inspection proxy |
| `luci-app-secubox-security-threats` | 1.0.0 | Security threat analysis |
| `secubox-threat-analyst` | 1.0.0 | AI-powered threat correlation |
| `secubox-dns-guard` | 1.0.0 | DNS anomaly detection |
| `secubox-vortex-firewall` | 1.0.0 | Threat intel firewall |
| `luci-app-auth-guardian` | 0.4.0 | Authentication monitoring |
| `luci-app-client-guardian` | 0.4.0 | Client access control |
| `luci-app-mac-guardian` | 0.5.0 | MAC address management |
| `luci-app-zkp` | 1.0.0 | Zero-knowledge proof verification |
## Network Packages
| Package | Version | Description |
|---------|---------|-------------|
| `luci-app-network-modes` | 0.5.0 | Network mode configuration |
| `luci-app-bandwidth-manager` | 0.5.0 | Bandwidth monitoring and limits |
| `luci-app-traffic-shaper` | 0.4.0 | QoS traffic shaping |
| `luci-app-haproxy` | 1.0.0 | HAProxy load balancer |
| `luci-app-vhost-manager` | 0.5.0 | Virtual host management |
| `luci-app-cdn-cache` | 0.5.0 | CDN caching proxy |
| `luci-app-network-tweaks` | 1.0.0 | Advanced network settings |
| `luci-app-routes-status` | 1.0.0 | Route status monitoring |
## Monitoring Packages
| Package | Version | Description |
|---------|---------|-------------|
| `luci-app-netdata-dashboard` | 0.5.0 | Netdata system monitoring |
| `luci-app-secubox-netifyd` | 1.2.1 | Deep packet inspection |
| `luci-app-dpi-dual` | 1.0.0 | Dual-stream DPI analysis |
| `luci-app-device-intel` | 1.0.0 | Device fingerprinting |
| `luci-app-media-flow` | 0.6.4 | Media traffic analysis |
| `luci-app-watchdog` | 1.0.0 | Service health monitoring |
| `luci-app-metrics-dashboard` | 1.0.0 | System metrics dashboard |
## VPN & Mesh Packages
| Package | Version | Description |
|---------|---------|-------------|
| `luci-app-wireguard-dashboard` | 0.7.0 | WireGuard VPN management |
| `luci-app-secubox-mesh` | 1.0.0 | Mesh network dashboard |
| `luci-app-secubox-p2p` | 0.1.0 | P2P network interface |
| `luci-app-secubox-mirror` | 0.1.0 | MirrorNet dashboard |
| `luci-app-master-link` | 1.0.0 | Node onboarding and linking |
## DNS Packages
| Package | Version | Description |
|---------|---------|-------------|
| `luci-app-dns-master` | 1.0.0 | DNS server management |
| `luci-app-dnsguard` | 1.1.0 | DNS filtering and blocking |
| `luci-app-vortex-dns` | 1.0.0 | Vortex DNS firewall |
| `luci-app-meshname-dns` | 1.0.0 | Mesh DNS resolution |
| `luci-app-dns-provider` | 1.0.0 | External DNS provider API |
## Privacy Packages
| Package | Version | Description |
|---------|---------|-------------|
| `luci-app-tor-shield` | 1.0.0 | Tor network integration |
| `luci-app-exposure` | 1.0.0 | Service exposure management |
| `luci-app-interceptor` | 1.0.0 | Traffic interception control |
## Publishing Packages
| Package | Version | Description |
|---------|---------|-------------|
| `luci-app-metablogizer` | 1.1.0 | Static site generator |
| `luci-app-droplet` | 1.0.0 | Quick web publishing |
| `luci-app-streamlit-forge` | 1.0.0 | Streamlit app builder |
| `luci-app-metacatalog` | 1.0.0 | Content catalog |
| `luci-app-streamlit` | 1.0.0 | Streamlit dashboard |
| `luci-app-hexojs` | 1.0.0 | Hexo blog manager |
## App Packages
| Package | Version | Description |
|---------|---------|-------------|
| `luci-app-jellyfin` | 1.0.0 | Jellyfin media server |
| `luci-app-lyrion` | 1.0.0 | Lyrion music server |
| `luci-app-gitea` | 1.0.0 | Gitea git server |
| `luci-app-nextcloud` | 1.0.0 | Nextcloud storage |
| `luci-app-peertube` | 1.1.0 | PeerTube video |
| `luci-app-photoprism` | 0.1.0 | PhotoPrism gallery |
| `luci-app-gotosocial` | 0.1.0 | GoToSocial federation |
| `luci-app-jitsi` | 1.0.0 | Jitsi video conferencing |
## System Packages
| Package | Version | Description |
|---------|---------|-------------|
| `luci-app-secubox` | 0.7.1 | Main SecuBox settings |
| `luci-app-secubox-admin` | 1.0.0 | Admin dashboard |
| `luci-app-config-vault` | 1.0.0 | Configuration backup |
| `luci-app-smtp-relay` | 1.0.0 | SMTP relay settings |
| `luci-app-reporter` | 1.0.0 | Report generator |
| `luci-app-rtty-remote` | 0.1.0 | Remote terminal access |
| `luci-app-backup` | 1.0.0 | System backup |
| `luci-app-cloner` | 1.0.0 | Device cloning |
| `luci-app-system-hub` | 0.5.2 | System overview |
## AI Packages
| Package | Version | Description |
|---------|---------|-------------|
| `luci-app-ai-gateway` | 1.0.0 | AI provider routing |
| `luci-app-ai-insights` | 1.0.0 | AI-powered insights |
| `luci-app-localai` | 0.1.0 | LocalAI integration |
| `luci-app-ollama` | 0.1.0 | Ollama LLM server |
| `secubox-ai-gateway` | 1.0.0 | AI data sovereignty |
| `secubox-cve-triage` | 1.0.0 | AI CVE analysis |
| `secubox-network-anomaly` | 1.0.0 | AI network detection |
## Theme Package
| Package | Version | Description |
|---------|---------|-------------|
| `luci-theme-secubox` | 1.0.0 | CRT P31 phosphor green theme |
---
## Installation
### Via opkg
```bash
opkg update
opkg install luci-app-secubox-mesh
```
### Via SecuBox App Store
Navigate to **SecuBox → Apps** in LuCI and install from the catalog.
### Via local feed
```bash
# Add local feed
echo "src/gz secubox file:///www/secubox-feed" >> /etc/opkg/customfeeds.conf
opkg update
opkg install <package-name>
```
---
*Total packages: 75+ | Last updated: 2026-03-26*

125
docs/README.md Normal file
View File

@ -0,0 +1,125 @@
# SecuBox OpenWrt Documentation
Welcome to the SecuBox OpenWrt documentation. This directory contains comprehensive documentation for the SecuBox mesh network appliance running on OpenWrt 24.10.
## Quick Links
| Document | Description |
|----------|-------------|
| [SCREENSHOTS.md](SCREENSHOTS.md) | Module screenshot gallery (CRT P31 theme) |
| [UI-GUIDE.md](UI-GUIDE.md) | UI/UX design guide and theme documentation |
| [MODULES.md](MODULES.md) | Complete module catalog with descriptions |
| [API.md](API.md) | RPCD/ubus API reference |
## Project Overview
**SecuBox** is a privacy-focused mesh network appliance built on OpenWrt. It provides:
- 🛡️ **Security**: CrowdSec IDS/IPS, WAF with mitmproxy, network isolation
- 🌐 **Mesh Networking**: WireGuard VPN, P2P gossip protocol, automatic peer discovery
- 🤖 **AI Integration**: Local AI with LocalAI/Ollama, sovereign data classification
- 📡 **Privacy**: Tor integration, anonymous service exposure, ZKP verification
- 🎨 **Modern UI**: LuCI-based dashboard with CRT P31 phosphor green terminal theme
## Screenshots Directory
Screenshots are organized by platform:
```
docs/
├── screenshots/
│ └── router/ # MochaBin/ARM64 router screenshots
└── wiki/ # Multilingual documentation
```
## Theme: CRT P31 Phosphor Green
The SecuBox UI uses a retro CRT terminal aesthetic:
- **Primary Color**: `#33ff66` (phosphor peak green)
- **Background**: `#050803` (deep tube black)
- **Font**: Monospace (Courier Prime, IBM Plex Mono)
- **Effects**:
- Scanline overlay
- Phosphor glow on text
- Terminal boot sequence animation
![Theme Preview](screenshots/router/portal.png)
## Module Categories
### Core
- `secubox-core` - Base configuration and utilities
- `secubox-mesh` - Mesh daemon with topology management
- `secubox-identity` - DID generation and trust scoring
- `secubox-p2p` - P2P gossip protocol
### Security (12 modules)
- CrowdSec Dashboard, WAF Filters, MITM Proxy
- DNS Guard, Vortex DNS Firewall
- Auth/Client/MAC Guardian, ZKP verification
### Network (8 modules)
- Network Modes, Bandwidth Manager, Traffic Shaper
- HAProxy, Virtual Hosts, CDN Cache
### Monitoring (6 modules)
- Netdata integration, DPI (netifyd)
- Device Intel, Media Flow, Watchdog, LAN Flows
### Publishing (4 modules)
- Metablogizer, Droplet, Streamlit Forge, Metacatalog
### AI (4 modules)
- AI Gateway (data sovereignty), AI Insights
- LocalAI, Ollama integration
## API Reference
All LuCI modules expose RPCD/ubus APIs:
```bash
# List available methods
ubus list | grep luci.secubox
# Call a method
ubus call luci.secubox-mesh status
# Example: Get mesh topology
ubus call luci.secubox-mesh topology
```
See [API.md](API.md) for complete method documentation.
## Development
### Quick Deploy (without rebuild)
```bash
# Deploy JS views
scp htdocs/luci-static/resources/view/secubox/*.js root@192.168.255.1:/www/luci-static/resources/view/secubox/
# Deploy RPCD handler
scp root/usr/libexec/rpcd/<handler> root@192.168.255.1:/usr/libexec/rpcd/
ssh root@192.168.255.1 '/etc/init.d/rpcd restart'
```
### Build Package
```bash
# Sync to local feed
rsync -av --delete package/secubox/<pkg>/ secubox-tools/local-feed/<pkg>/
# Build
./secubox-tools/local-build.sh build <pkg>
```
## Support
- **Repository**: [github.com/gkerma/secubox-openwrt](https://github.com/gkerma/secubox-openwrt)
- **Wiki**: [github.com/gkerma/secubox-openwrt/wiki](https://github.com/gkerma/secubox-openwrt/wiki)
- **Issues**: [github.com/gkerma/secubox-openwrt/issues](https://github.com/gkerma/secubox-openwrt/issues)
---
*SecuBox v1.0.0 | CyberMind — 2026*

159
docs/SCREENSHOTS.md Normal file
View File

@ -0,0 +1,159 @@
# SecuBox Module Screenshots - OpenWrt Router
*Generated: 2026-03-26*
**Host:** https://192.168.255.1 (C3BOX)
**Theme:** CRT P31 Phosphor Green Terminal
**Platform:** OpenWrt 24.10 / MochaBin ARM64
---
## Module Gallery
### Dashboard
| Module | Screenshot | Status |
|--------|------------|--------|
| 🏠 **System Hub** | ![System Hub](screenshots/router/hub.png) | ⏳ Pending |
| 📊 **Metrics Dashboard** | ![Metrics](screenshots/router/metrics.png) | ⏳ Pending |
| 🎯 **Portal** | ![Portal](screenshots/router/portal.png) | ⏳ Pending |
| 📋 **Dev Status** | ![Dev Status](screenshots/router/devstatus.png) | ⏳ Pending |
### Security
| Module | Screenshot | Status |
|--------|------------|--------|
| 🛡️ **CrowdSec Dashboard** | ![CrowdSec](screenshots/router/crowdsec.png) | ⏳ Pending |
| 🔥 **WAF Filters** | ![WAF](screenshots/router/waf.png) | ⏳ Pending |
| 🔍 **MITM Proxy** | ![Mitmproxy](screenshots/router/mitmproxy.png) | ⏳ Pending |
| 🚨 **Security Threats** | ![Threats](screenshots/router/threats.png) | ⏳ Pending |
| 🔒 **Threat Analyst** | ![Threat Analyst](screenshots/router/threat-analyst.png) | ⏳ Pending |
### Network
| Module | Screenshot | Status |
|--------|------------|--------|
| 🌐 **Network Modes** | ![Network Modes](screenshots/router/netmodes.png) | ⏳ Pending |
| 📈 **Bandwidth Manager** | ![Bandwidth](screenshots/router/bandwidth.png) | ⏳ Pending |
| 📊 **Traffic Shaper** | ![Traffic](screenshots/router/traffic.png) | ⏳ Pending |
| ⚡ **HAProxy** | ![HAProxy](screenshots/router/haproxy.png) | ⏳ Pending |
| 🏗️ **Virtual Hosts** | ![Vhosts](screenshots/router/vhost.png) | ⏳ Pending |
| 🚀 **CDN Cache** | ![CDN](screenshots/router/cdn.png) | ⏳ Pending |
### Monitoring
| Module | Screenshot | Status |
|--------|------------|--------|
| 📊 **Netdata** | ![Netdata](screenshots/router/netdata.png) | ⏳ Pending |
| 🔬 **DPI (netifyd)** | ![DPI](screenshots/router/dpi.png) | ⏳ Pending |
| 📱 **Device Intel** | ![Device Intel](screenshots/router/device-intel.png) | ⏳ Pending |
| 🎬 **Media Flow** | ![Media Flow](screenshots/router/mediaflow.png) | ⏳ Pending |
| 👁️ **Watchdog** | ![Watchdog](screenshots/router/watchdog.png) | ⏳ Pending |
| 📡 **LAN Flows** | ![LAN Flows](screenshots/router/lan-flows.png) | ⏳ Pending |
### VPN & Mesh
| Module | Screenshot | Status |
|--------|------------|--------|
| 🔐 **WireGuard** | ![WireGuard](screenshots/router/wireguard.png) | ⏳ Pending |
| 🌐 **Mesh Network** | ![Mesh](screenshots/router/mesh.png) | ⏳ Pending |
| 🤝 **P2P Network** | ![P2P](screenshots/router/p2p.png) | ⏳ Pending |
| 🪞 **Mirror** | ![Mirror](screenshots/router/mirror.png) | ⏳ Pending |
| 🔗 **Master Link** | ![Master Link](screenshots/router/master-link.png) | ⏳ Pending |
### DNS
| Module | Screenshot | Status |
|--------|------------|--------|
| 🌍 **DNS Master** | ![DNS Master](screenshots/router/dns.png) | ⏳ Pending |
| 🛡️ **DNS Guard** | ![DNS Guard](screenshots/router/dnsguard.png) | ⏳ Pending |
| 🔥 **Vortex DNS** | ![Vortex DNS](screenshots/router/vortex-dns.png) | ⏳ Pending |
| 📡 **Meshname DNS** | ![Meshname](screenshots/router/meshname.png) | ⏳ Pending |
| 🔑 **DNS Provider** | ![DNS Provider](screenshots/router/dns-provider.png) | ⏳ Pending |
### Privacy
| Module | Screenshot | Status |
|--------|------------|--------|
| 🧅 **Tor Shield** | ![Tor](screenshots/router/tor.png) | ⏳ Pending |
| 🌐 **Exposure** | ![Exposure](screenshots/router/exposure.png) | ⏳ Pending |
| 🔐 **ZKP** | ![ZKP](screenshots/router/zkp.png) | ⏳ Pending |
### Access Control
| Module | Screenshot | Status |
|--------|------------|--------|
| 🔐 **Auth Guardian** | ![Auth](screenshots/router/auth.png) | ⏳ Pending |
| 👥 **Client Guardian** | ![Clients](screenshots/router/clients.png) | ⏳ Pending |
| 🖥️ **MAC Guardian** | ![MAC](screenshots/router/mac.png) | ⏳ Pending |
| 👤 **User Management** | ![Users](screenshots/router/users.png) | ⏳ Pending |
### Publishing
| Module | Screenshot | Status |
|--------|------------|--------|
| 📝 **Metablogizer** | ![Metablogizer](screenshots/router/metablogizer.png) | ⏳ Pending |
| 💧 **Droplet** | ![Droplet](screenshots/router/droplet.png) | ⏳ Pending |
| 🎨 **Streamlit Forge** | ![Streamlit Forge](screenshots/router/streamforge.png) | ⏳ Pending |
| 📚 **Metacatalog** | ![Metacatalog](screenshots/router/metacatalog.png) | ⏳ Pending |
### Apps & Services
| Module | Screenshot | Status |
|--------|------------|--------|
| 📦 **App Store** | ![Apps](screenshots/router/apps.png) | ⏳ Pending |
| 🎥 **Jellyfin** | ![Jellyfin](screenshots/router/jellyfin.png) | ⏳ Pending |
| 🎵 **Lyrion** | ![Lyrion](screenshots/router/lyrion.png) | ⏳ Pending |
| 💻 **Gitea** | ![Gitea](screenshots/router/gitea.png) | ⏳ Pending |
| ☁️ **Nextcloud** | ![Nextcloud](screenshots/router/nextcloud.png) | ⏳ Pending |
| 📺 **PeerTube** | ![PeerTube](screenshots/router/peertube.png) | ⏳ Pending |
### System
| Module | Screenshot | Status |
|--------|------------|--------|
| ⚙️ **SecuBox Settings** | ![Settings](screenshots/router/settings.png) | ⏳ Pending |
| 💾 **Config Vault** | ![Config Vault](screenshots/router/config-vault.png) | ⏳ Pending |
| 📧 **SMTP Relay** | ![SMTP](screenshots/router/smtp.png) | ⏳ Pending |
| 📊 **Reporter** | ![Reporter](screenshots/router/reporter.png) | ⏳ Pending |
| 🖥️ **RTTY Remote** | ![RTTY](screenshots/router/rtty.png) | ⏳ Pending |
### AI Features
| Module | Screenshot | Status |
|--------|------------|--------|
| 🤖 **AI Gateway** | ![AI Gateway](screenshots/router/ai-gateway.png) | ⏳ Pending |
| 💡 **AI Insights** | ![AI Insights](screenshots/router/ai-insights.png) | ⏳ Pending |
| 🧠 **LocalAI** | ![LocalAI](screenshots/router/localai.png) | ⏳ Pending |
| 🦙 **Ollama** | ![Ollama](screenshots/router/ollama.png) | ⏳ Pending |
---
## Capturing Screenshots
To capture screenshots for this documentation:
```bash
# From development machine with browser access
cd docs/screenshots/router/
# Use browser screenshot tool or:
# - Firefox: Ctrl+Shift+S (area select)
# - Chrome: DevTools → Capture screenshot
# - CLI: chromium --headless --screenshot=hub.png https://192.168.255.1/cgi-bin/luci/admin/secubox/hub
# Recommended dimensions: 1280x800 or 1920x1080
# Format: PNG with transparency disabled
```
## Theme Information
All screenshots should use the **CRT P31 Phosphor Green** theme:
- Primary: `#33ff66` (phosphor peak)
- Background: `#050803` (tube black)
- Font: Monospace (Courier Prime, IBM Plex Mono)
- Effects: Scanlines overlay, phosphor glow
---
*Total modules: 50+ | Screenshots pending: All*

182
docs/UI-GUIDE.md Normal file
View File

@ -0,0 +1,182 @@
# SecuBox UI Design Guide
## CRT P31 Phosphor Green Theme
The SecuBox OpenWrt interface uses a retro CRT terminal aesthetic inspired by the P31 phosphor used in classic green-screen monitors.
### Color Palette
| Variable | Hex | Usage |
|----------|-----|-------|
| `--p31-peak` | `#33ff66` | Maximum brightness - headers, active elements |
| `--p31-hot` | `#66ffaa` | High brightness - hover states |
| `--p31-mid` | `#22cc44` | Medium brightness - body text |
| `--p31-dim` | `#0f8822` | Low brightness - secondary text, borders |
| `--p31-ghost` | `#052210` | Ghosting/afterglow - subtle backgrounds |
| `--p31-decay` | `#ffb347` | Phosphor decay amber - warnings |
| `--tube-black` | `#050803` | Deep CRT black - main background |
| `--tube-deep` | `#080d05` | Card backgrounds |
| `--tube-bezel` | `#0d1208` | Panel borders |
### Typography
```css
font-family: 'Courier Prime', 'IBM Plex Mono', 'Fira Code',
'Courier New', 'Lucida Console', monospace;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.02em;
```
### Glow Effects
```css
/* Text glow */
--bloom-text: 0 0 2px var(--p31-peak),
0 0 6px var(--p31-peak),
0 0 14px rgba(51,255,102,0.5);
/* Box glow */
--bloom-box: 0 0 8px rgba(51,255,102,0.3),
inset 0 0 4px rgba(51,255,102,0.1);
```
## Theme Files
```
luci-theme-secubox/
├── htdocs/luci-static/secubox/
│ ├── cascade.css # Main theme CSS
│ ├── mobile.css # Mobile responsive styles
│ ├── crt-engine.js # Scanline & boot animation
│ └── crt-components.js # Reusable UI components
├── htdocs/luci-static/resources/secubox-theme/
│ └── themes/
│ ├── crt-p31.css # P31 variant
│ ├── dark.css # Dark variant
│ ├── cyberpunk.css # Cyberpunk variant
│ └── ...
└── ucode/luci/template/themes/secubox/
├── header.ut # Header template
└── footer.ut # Footer template
```
## CRT Engine Features
### Scanlines Overlay
```javascript
// Automatically applied via crt-engine.js
// Creates CSS pseudo-element with horizontal lines
```
### Boot Sequence Animation
On first visit, displays a terminal-style boot sequence:
```
[SECUBOX] Initializing mesh daemon...
[SECUBOX] Loading P31 phosphor display...
[SECUBOX] System ready.
```
### Phosphor Glow
Text and interactive elements have subtle green glow effects that intensify on hover/focus.
## KISS Theme Integration
SecuBox modules use a shared KISS (Keep It Simple & Styled) theme helper:
```javascript
// In LuCI views
'require secubox-theme/kiss';
// Render header chip
E('div', { 'class': 'sh-page-header' }, [
renderHeaderChip('🛡️', 'Security Status', 'Active', 'success')
]);
// Stats card
E('div', { 'class': 'sh-stat-card' }, [
E('div', { 'class': 'sh-stat-value' }, '42'),
E('div', { 'class': 'sh-stat-label' }, 'Active Threats')
]);
```
## Component Classes
### Cards
```html
<div class="sh-card">
<div class="sh-card-header">Title</div>
<div class="sh-card-body">Content</div>
</div>
```
### Status Badges
```html
<span class="sh-badge sh-badge-success">Running</span>
<span class="sh-badge sh-badge-warning">Warning</span>
<span class="sh-badge sh-badge-danger">Stopped</span>
```
### Progress Bars
```html
<div class="sh-progress">
<div class="sh-progress-bar" style="width: 75%"></div>
</div>
```
### Tables
```html
<table class="sh-table">
<thead>
<tr><th>Column</th></tr>
</thead>
<tbody>
<tr><td>Data</td></tr>
</tbody>
</table>
```
## Responsive Design
The theme includes mobile-optimized styles via `mobile.css`:
- Collapsible navigation menu
- Stacked card layouts
- Touch-friendly button sizes
- Readable font sizes on small screens
## Theme Switching
Users can switch themes via UCI or the Settings page:
```bash
# Set theme via UCI
uci set luci.main.mediaurlbase='/luci-static/secubox'
uci commit luci
# Or use the themes section
uci set luci.themes.SecuBox='/luci-static/secubox'
```
## Dark Mode
The CRT P31 theme is inherently dark. The `data-darkmode` attribute is ignored as the phosphor green aesthetic requires a dark background for proper contrast.
## Accessibility
- High contrast phosphor green on black
- Keyboard navigation support
- Focus indicators with glow effects
- Screen reader compatible semantic HTML
---
*SecuBox UI Guide v1.0 | CRT P31 Phosphor Theme*