Network Modes 0.5.0-1

This commit is contained in:
CyberMind-FR 2025-12-29 12:27:26 +01:00
parent 8c27583eba
commit 4b16b93c9c
16 changed files with 66 additions and 6 deletions

View File

@ -17,6 +17,7 @@
- Preparing follow-up refactor to deduplicate Theme initialization logic.
- Evaluating automated deployment pipeline (rsync/scp wrappers) for `secubox-tools`.
- Enhancing SecuBox theme guidelines (see `.codex/THEME_CONTEXT.md`) to capture layout, state, and localization best practices before next UI sprint.
- Next TODO in focus: extract shared nav/header components into `secubox/components/` and document typings per `.codex/TODO.md` item #1.
## Reminders

View File

@ -8,8 +8,8 @@
include $(TOPDIR)/rules.mk
PKG_NAME:=luci-app-network-modes
PKG_VERSION:=0.4.6
PKG_RELEASE:=3
PKG_VERSION:=0.5.0
PKG_RELEASE:=1
PKG_LICENSE:=Apache-2.0
PKG_MAINTAINER:=CyberMind <contact@cybermind.fr>

View File

@ -9,7 +9,8 @@
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
/* === Design System Variables === */
:root {
:root,
[data-secubox-theme="light"] {
/* Light Mode */
--sh-text-primary: #0f172a;
--sh-text-secondary: #475569;
@ -29,7 +30,9 @@
--sh-info: #3b82f6;
}
[data-theme="dark"] {
[data-theme="dark"],
[data-secubox-theme="dark"],
[data-secubox-theme="cyberpunk"] {
/* Dark Mode (Demo-inspired) */
--sh-text-primary: #fafafa;
--sh-text-secondary: #a0a0b0;
@ -277,6 +280,13 @@ pre {
background: var(--sh-hover-bg);
}
body[data-page^="admin-secubox-network-modes"] .tabs,
body[data-page^="admin-secubox-network-modes"] #tabmenu,
body[data-page^="admin-secubox-network-modes"] .cbi-tabmenu,
body[data-page^="admin-secubox-network-modes"] .nav-tabs {
display: none !important;
}
.sh-nav-tab.active {
color: var(--sh-primary);
background: var(--sh-bg-card);
@ -506,4 +516,3 @@ pre {
border-color: rgba(245, 158, 11, 0.45);
color: #b45309;
}

View File

@ -3,7 +3,10 @@
/* Copyright (C) 2024 CyberMind.fr - Gandalf * Version: 0.3.0
*/
:root {
:root,
[data-secubox-theme="dark"],
[data-secubox-theme="cyberpunk"],
[data-theme="dark"] {
--nm-bg-primary: #0c0a09;
--nm-bg-secondary: #1c1917;
--nm-bg-tertiary: #292524;
@ -37,6 +40,23 @@
--nm-shadow-glow: 0 0 30px rgba(249, 115, 22, 0.3);
}
[data-secubox-theme="light"],
[data-theme="light"] {
--nm-bg-primary: #f5f3ff;
--nm-bg-secondary: #ffffff;
--nm-bg-tertiary: #eef2ff;
--nm-border: #e5e7eb;
--nm-border-light: #d1d5db;
--nm-text-primary: #0f172a;
--nm-text-secondary: #475569;
--nm-text-muted: #94a3b8;
--nm-mode-gradient: linear-gradient(135deg,#4f46e5,#7c3aed);
--nm-shadow: 0 12px 25px rgba(79,70,229,0.15);
--nm-shadow-glow: 0 0 30px rgba(79,70,229,0.25);
}
/* Base */
.network-modes-dashboard {
font-family: var(--nm-font-sans);

View File

@ -135,7 +135,26 @@ function createStepper(steps, active) {
}));
}
function ensureLuCITabsHidden() {
if (typeof document === 'undefined')
return;
if (document.getElementById('network-modes-tabstyle'))
return;
var style = document.createElement('style');
style.id = 'network-modes-tabstyle';
style.textContent = `
body[data-page^="admin-secubox-network-modes"] .tabs,
body[data-page^="admin-secubox-network-modes"] #tabmenu,
body[data-page^="admin-secubox-network-modes"] .cbi-tabmenu,
body[data-page^="admin-secubox-network-modes"] .nav-tabs {
display: none !important;
}
`;
document.head && document.head.appendChild(style);
}
function createNavigationTabs(activeId) {
ensureLuCITabsHidden();
return E('div', { 'class': 'sh-nav-tabs network-modes-nav-tabs' },
NAV_BLUEPRINT.map(function(item) {
return E('a', {

View File

@ -131,6 +131,7 @@ return view.extend({
var container = E('div', { 'class': 'network-modes-dashboard accesspoint-mode' }, [
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
helpers.createNavigationTabs('accesspoint'),
hero,

View File

@ -24,6 +24,7 @@ return view.extend({
var container = E('div', { 'class': 'network-modes-dashboard doublenat-mode' }, [
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
helpers.createNavigationTabs('doublenat'),
helpers.createHero({

View File

@ -29,6 +29,7 @@ return view.extend({
var container = E('div', { 'class': 'network-modes-dashboard multiwan-mode' }, [
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
helpers.createNavigationTabs('multiwan'),
helpers.createHero({

View File

@ -100,6 +100,7 @@ return view.extend({
var view = E('div', { 'class': 'network-modes-dashboard' }, [
// Load global theme CSS
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox/help.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
helpers.createNavigationTabs('overview'),

View File

@ -164,6 +164,7 @@ return view.extend({
var container = E('div', { 'class': 'network-modes-dashboard relay-mode' }, [
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
helpers.createNavigationTabs('relay'),
hero,

View File

@ -233,6 +233,7 @@ return view.extend({
var container = E('div', { 'class': 'network-modes-dashboard router-mode' }, [
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
helpers.createNavigationTabs('router'),
hero,

View File

@ -250,6 +250,7 @@ return view.extend({
return m.render().then(function(formEl) {
return E('div', { 'class': 'network-modes-dashboard nm-settings' }, [
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
helpers.createNavigationTabs('settings'),
formEl

View File

@ -97,6 +97,7 @@ return view.extend({
var container = E('div', { 'class': 'network-modes-dashboard sniffer-mode' }, [
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
helpers.createNavigationTabs('sniffer'),
hero,

View File

@ -125,6 +125,7 @@ return view.extend({
var container = E('div', { 'class': 'network-modes-dashboard travel-mode' }, [
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
helpers.createNavigationTabs('travel'),
hero,

View File

@ -24,6 +24,7 @@ return view.extend({
var container = E('div', { 'class': 'network-modes-dashboard vpnrelay-mode' }, [
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
helpers.createNavigationTabs('vpnrelay'),
helpers.createHero({

View File

@ -95,6 +95,7 @@ return view.extend({
var container = E('div', { 'class': 'network-modes-dashboard nm-wizard' }, [
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }),
helpers.createNavigationTabs('wizard'),
hero,