CyberMind-FR 1140221f4a feat(luci-theme-secubox): Add CRT P31 phosphor green terminal theme

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>

2026-03-26 07:18:23 +01:00

3.4 KiB

Raw Blame History

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

opkg update
opkg install luci-theme-secubox

The theme will automatically be set as the default. To manually switch:

uci set luci.main.mediaurlbase='/luci-static/secubox'
uci commit luci

JavaScript Components

CRT Engine (`crt-engine.js`)

Provides CRT visual effects:

// 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:

// 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:

/* 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

3.4 KiB Raw Blame History