CyberMind-FR
0a3aba569c
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>
183 lines
4.4 KiB
Markdown
183 lines
4.4 KiB
Markdown
# 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*
|