From 4b16b93c9c4784fb3fdb8da65c900f5ec4cdf0cc Mon Sep 17 00:00:00 2001 From: CyberMind-FR Date: Mon, 29 Dec 2025 12:27:26 +0100 Subject: [PATCH] Network Modes 0.5.0-1 --- .codex/WIP.md | 1 + luci-app-network-modes/Makefile | 4 ++-- .../resources/network-modes/common.css | 15 ++++++++++--- .../resources/network-modes/dashboard.css | 22 ++++++++++++++++++- .../resources/network-modes/helpers.js | 19 ++++++++++++++++ .../view/network-modes/accesspoint.js | 1 + .../resources/view/network-modes/doublenat.js | 1 + .../resources/view/network-modes/multiwan.js | 1 + .../resources/view/network-modes/overview.js | 1 + .../resources/view/network-modes/relay.js | 1 + .../resources/view/network-modes/router.js | 1 + .../resources/view/network-modes/settings.js | 1 + .../resources/view/network-modes/sniffer.js | 1 + .../resources/view/network-modes/travel.js | 1 + .../resources/view/network-modes/vpnrelay.js | 1 + .../resources/view/network-modes/wizard.js | 1 + 16 files changed, 66 insertions(+), 6 deletions(-) diff --git a/.codex/WIP.md b/.codex/WIP.md index bc4c85bd..e7643886 100644 --- a/.codex/WIP.md +++ b/.codex/WIP.md @@ -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 diff --git a/luci-app-network-modes/Makefile b/luci-app-network-modes/Makefile index c02a8998..634c0042 100644 --- a/luci-app-network-modes/Makefile +++ b/luci-app-network-modes/Makefile @@ -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 diff --git a/luci-app-network-modes/htdocs/luci-static/resources/network-modes/common.css b/luci-app-network-modes/htdocs/luci-static/resources/network-modes/common.css index efeb269f..e7db1f72 100644 --- a/luci-app-network-modes/htdocs/luci-static/resources/network-modes/common.css +++ b/luci-app-network-modes/htdocs/luci-static/resources/network-modes/common.css @@ -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; } - diff --git a/luci-app-network-modes/htdocs/luci-static/resources/network-modes/dashboard.css b/luci-app-network-modes/htdocs/luci-static/resources/network-modes/dashboard.css index 72bcaf5e..25be87bb 100644 --- a/luci-app-network-modes/htdocs/luci-static/resources/network-modes/dashboard.css +++ b/luci-app-network-modes/htdocs/luci-static/resources/network-modes/dashboard.css @@ -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); diff --git a/luci-app-network-modes/htdocs/luci-static/resources/network-modes/helpers.js b/luci-app-network-modes/htdocs/luci-static/resources/network-modes/helpers.js index c3125667..2a7e367e 100644 --- a/luci-app-network-modes/htdocs/luci-static/resources/network-modes/helpers.js +++ b/luci-app-network-modes/htdocs/luci-static/resources/network-modes/helpers.js @@ -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', { diff --git a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/accesspoint.js b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/accesspoint.js index b7301474..443b0698 100644 --- a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/accesspoint.js +++ b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/accesspoint.js @@ -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, diff --git a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/doublenat.js b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/doublenat.js index 7b8ef4ba..6cd058d1 100644 --- a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/doublenat.js +++ b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/doublenat.js @@ -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({ diff --git a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/multiwan.js b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/multiwan.js index 10ab6d23..353e82c9 100644 --- a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/multiwan.js +++ b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/multiwan.js @@ -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({ diff --git a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/overview.js b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/overview.js index 2d41ea56..b6edce4b 100644 --- a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/overview.js +++ b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/overview.js @@ -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'), diff --git a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/relay.js b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/relay.js index e6d5963d..0631de43 100644 --- a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/relay.js +++ b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/relay.js @@ -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, diff --git a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/router.js b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/router.js index 960ed952..e823abe7 100644 --- a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/router.js +++ b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/router.js @@ -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, diff --git a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/settings.js b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/settings.js index db6528d8..f0436e95 100644 --- a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/settings.js +++ b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/settings.js @@ -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 diff --git a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/sniffer.js b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/sniffer.js index b068d1b2..aebb32fa 100644 --- a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/sniffer.js +++ b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/sniffer.js @@ -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, diff --git a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/travel.js b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/travel.js index 7e0ec999..805f3374 100644 --- a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/travel.js +++ b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/travel.js @@ -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, diff --git a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/vpnrelay.js b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/vpnrelay.js index 7fd2c4de..1b0cdf40 100644 --- a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/vpnrelay.js +++ b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/vpnrelay.js @@ -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({ diff --git a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/wizard.js b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/wizard.js index fceb3749..3797627b 100644 --- a/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/wizard.js +++ b/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/wizard.js @@ -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,