CyberMind-FR
1140221f4a
Complete LuCI theme implementation with: - CRT P31 phosphor green color scheme with scanline effects - Header, footer, and sysauth login page templates - Cascading CSS with CRT glow and phosphor effects - CRT engine JS for terminal-style animations - CRT components JS for reusable UI components - UCI defaults to set as default LuCI theme - Updated Makefile for proper asset installation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
124 lines
3.4 KiB
Markdown
124 lines
3.4 KiB
Markdown
# SecuBox CRT P31 Phosphor Theme
|
|
|
|
A retro-futuristic CRT terminal theme for OpenWrt LuCI, designed for the SecuBox mesh security appliance.
|
|
|
|
## Features
|
|
|
|
- **P31 Phosphor Green** color palette - authentic CRT terminal aesthetic
|
|
- **Scanlines overlay** - subtle CRT screen effect
|
|
- **Phosphor glow effects** - text and button bloom on hover/focus
|
|
- **Boot sequence animation** - terminal-style startup on first visit
|
|
- **Responsive design** - works on desktop and mobile
|
|
- **Full LuCI coverage** - all pages, forms, tables, and widgets styled
|
|
|
|
## Color Palette
|
|
|
|
| Variable | Color | 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 - page background |
|
|
| `--tube-deep` | `#080d05` | Card/panel backgrounds |
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
opkg update
|
|
opkg install luci-theme-secubox
|
|
```
|
|
|
|
The theme will automatically be set as the default. To manually switch:
|
|
|
|
```bash
|
|
uci set luci.main.mediaurlbase='/luci-static/secubox'
|
|
uci commit luci
|
|
```
|
|
|
|
## JavaScript Components
|
|
|
|
### CRT Engine (`crt-engine.js`)
|
|
|
|
Provides CRT visual effects:
|
|
|
|
```javascript
|
|
// Configure CRT effects
|
|
SecuBoxCRT.configure({
|
|
enableScanlines: true, // Scanlines overlay
|
|
enableFlicker: false, // Screen flicker (disabled by default)
|
|
enableGlow: true, // Phosphor glow on hover
|
|
enableBootSequence: true // Terminal boot animation
|
|
});
|
|
|
|
// Trigger boot sequence manually
|
|
SecuBoxCRT.bootSequence();
|
|
|
|
// Typewriter effect on element
|
|
SecuBoxCRT.typewriterEffect(element, 50);
|
|
```
|
|
|
|
### CRT Components (`crt-components.js`)
|
|
|
|
Reusable UI components:
|
|
|
|
```javascript
|
|
// Create a status widget
|
|
var widget = CRTComponents.createWidget({
|
|
title: 'CPU Load',
|
|
value: '45',
|
|
unit: '%',
|
|
status: 'normal' // or 'warning', 'danger'
|
|
});
|
|
|
|
// Create a status badge
|
|
var badge = CRTComponents.createBadge('Online', 'success');
|
|
|
|
// Create a progress bar
|
|
var progress = CRTComponents.createProgressBar(75, 100, '75%');
|
|
|
|
// Show toast notification
|
|
CRTComponents.toast('Settings saved', 'success', 3000);
|
|
```
|
|
|
|
## File Structure
|
|
|
|
```
|
|
luci-theme-secubox/
|
|
├── Makefile # OpenWrt package makefile
|
|
├── htdocs/luci-static/secubox/
|
|
│ ├── cascade.css # Main theme stylesheet
|
|
│ ├── crt-engine.js # CRT visual effects engine
|
|
│ └── crt-components.js # Reusable UI components
|
|
├── luasrc/luci/view/themes/secubox/
|
|
│ ├── header.htm # Page header template
|
|
│ ├── footer.htm # Page footer template
|
|
│ └── sysauth.htm # Login page template
|
|
└── root/etc/uci-defaults/
|
|
└── 90-luci-theme-secubox # Default theme configuration
|
|
```
|
|
|
|
## CSS Customization
|
|
|
|
Override CSS variables in your module's stylesheet:
|
|
|
|
```css
|
|
/* Custom module styling */
|
|
.my-module {
|
|
background: var(--tube-deep);
|
|
border: 1px solid var(--p31-ghost);
|
|
color: var(--p31-mid);
|
|
}
|
|
|
|
.my-module .title {
|
|
color: var(--p31-peak);
|
|
text-shadow: var(--bloom-text);
|
|
}
|
|
```
|
|
|
|
## License
|
|
|
|
MIT License - CyberMind 2026
|