History

CyberMind-FR b99dabaca9 feat(ui): Add progressive freshness indicators to dashboards Add visible "Updated Xs ago" timestamps and freshness indicators to make cached stats look more alive and help users know data currency. Backend changes: - luci.metrics: Add _freshness metadata (age, fresh, timestamp_epoch) to overview, waf_stats, and connections responses - luci.crowdsec-dashboard: Add _freshness metadata to get_overview response using sed injection into cached JSON Frontend changes: - metrics/dashboard.js: Display freshness indicator (green/yellow/red) in header, animate value changes with flash effect - crowdsec-dashboard/overview.js: Display freshness indicator next to running badge, update on poll Shared utilities (kiss-theme.js): - formatAge(seconds): Format "Xs ago", "Xm ago", "Xh ago" - getFreshnessClass(age): Return fresh/recent/stale based on age - getFreshnessColor(class): Return #00c853/#ff9800/#f44336 - freshnessIndicator(age, id): Create indicator DOM element - updateFreshness(age, id): Update existing indicator Freshness thresholds: - Fresh (green): < 15s for metrics, < 30s for CrowdSec - Recent (yellow): < 45s for metrics, < 90s for CrowdSec - Stale (red): > threshold Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>		2026-03-20 11:05:01 +01:00
..
docs	feat: Portal service detection, nDPId compat layer, CrowdSec/Netifyd packages	2026-01-10 13:51:40 +01:00
htdocs/luci-static/resources	feat(ui): Add progressive freshness indicators to dashboards	2026-03-20 11:05:01 +01:00
Makefile	feat(theme): Integrate kiss-theme.js into luci-theme-secubox	2026-02-23 17:40:12 +01:00
README.fr.md	docs: Add trilingual documentation (French and Chinese translations)	2026-03-20 10:00:18 +01:00
README.md	feat: Portal service detection, nDPId compat layer, CrowdSec/Netifyd packages	2026-01-10 13:51:40 +01:00
README.zh.md	docs: Add trilingual documentation (French and Chinese translations)	2026-03-20 10:00:18 +01:00
USAGE.md	feat: Portal service detection, nDPId compat layer, CrowdSec/Netifyd packages	2026-01-10 13:51:40 +01:00

README.md

luci-theme-secubox

SecuBox's CyberMood design system packaged as a LuCI theme. Ships shared CSS variables, reusable components, responsive layouts, translations, and the browser-side theme controller used by every SecuBox module ('require secubox-theme/theme as Theme'). Install alongside SecuBox modules to ensure consistent styling, language switching, and light/dark/cyberpunk variants.

./feeds/luci/luci-theme-secubox/
├── Makefile
└── htdocs/luci-static/resources/secubox-theme/
    ├── core/           # Variables, reset, typography, animations, utilities
    ├── components/     # Buttons, cards, forms, tables, badges, alerts, etc.
    ├── layouts/        # Dashboard/grid/responsive helpers
    ├── themes/         # Dark (default), light, cyberpunk variants
    ├── i18n/           # en/fr/de/es JSON dictionaries
    ├── secubox-theme.css
    ├── secubox-theme.min.css
    └── theme.js        # Theme controller (init/apply/t/Theme.create*)

Usage

'use strict';
'require secubox-theme/theme as Theme';

return view.extend({
    load: function() {
        return Theme.init();
    },
    render: function() {
        Theme.apply('dark');          // dark, light, cyberpunk
        Theme.setLanguage('en');      // en, fr, de, es

        return Theme.createPage({
            title: Theme.t('dashboard.title'),
            cards: [
                Theme.createCard({
                    title: Theme.t('dashboard.overview'),
                    icon: '🚀',
                    content: this.renderOverview()
                })
            ]
        });
    }
});

See DOCS/GLOBAL_THEME_SYSTEM.md for the full design reference. This package only contains the shared assets; each module is still responsible for importing secubox-theme.css (or .min.css) and using the exported helper methods.