diff --git a/docs/API.md b/docs/API.md new file mode 100644 index 00000000..d9905ff8 --- /dev/null +++ b/docs/API.md @@ -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* diff --git a/docs/MODULES.md b/docs/MODULES.md new file mode 100644 index 00000000..c92272d1 --- /dev/null +++ b/docs/MODULES.md @@ -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 +``` + +--- + +*Total packages: 75+ | Last updated: 2026-03-26* diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 00000000..cd39b087 --- /dev/null +++ b/docs/README.md @@ -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/ 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// secubox-tools/local-feed// + +# Build +./secubox-tools/local-build.sh build +``` + +## 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* diff --git a/docs/SCREENSHOTS.md b/docs/SCREENSHOTS.md new file mode 100644 index 00000000..4306de36 --- /dev/null +++ b/docs/SCREENSHOTS.md @@ -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* diff --git a/docs/UI-GUIDE.md b/docs/UI-GUIDE.md new file mode 100644 index 00000000..7f37db44 --- /dev/null +++ b/docs/UI-GUIDE.md @@ -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 +
+
Title
+
Content
+
+``` + +### Status Badges + +```html +Running +Warning +Stopped +``` + +### Progress Bars + +```html +
+
+
+``` + +### Tables + +```html + + + + + + + +
Column
Data
+``` + +## 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*