secubox-openwrt/site/quick-start/index.html
2026-01-04 19:50:25 +01:00

2493 lines
93 KiB
HTML

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="OpenWrt LuCI Security & Management Suite">
<meta name="author" content="CyberMind.fr">
<link rel="canonical" href="https://gkerma.github.io/secubox-openwrt/quick-start/">
<link rel="prev" href="..">
<link rel="next" href="../documentation-index/">
<link rel="icon" href="../assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.7.1">
<title>Quick Start - SecuBox Documentation</title>
<link rel="stylesheet" href="../assets/stylesheets/main.484c7ddc.min.css">
<link rel="stylesheet" href="../assets/stylesheets/palette.ab4e12ef.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,300i,400,400i,700,700i%7CJetBrains+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Inter";--md-code-font:"JetBrains Mono"}</style>
<link rel="stylesheet" href="../stylesheets/extra.css">
<script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="purple">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#quick-start-guide-secubox-development" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<div data-md-color-scheme="default" data-md-component="outdated" hidden>
</div>
<header class="md-header md-header--shadow md-header--lifted" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href=".." title="SecuBox Documentation" class="md-header__button md-logo" aria-label="SecuBox Documentation" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
SecuBox Documentation
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Quick Start
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="purple" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="indigo" data-md-color-accent="purple" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
</label>
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
<div class="md-search__suggest" data-md-component="search-suggest"></div>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/gkerma/secubox-openwrt" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</div>
<div class="md-source__repository">
gkerma/secubox-openwrt
</div>
</a>
</div>
</nav>
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href=".." class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="./" class="md-tabs__link">
Getting Started
</a>
</li>
<li class="md-tabs__item">
<a href="../development-guidelines/" class="md-tabs__link">
Development
</a>
</li>
<li class="md-tabs__item">
<a href="../claude/" class="md-tabs__link">
Reference
</a>
</li>
<li class="md-tabs__item">
<a href="../module-status/" class="md-tabs__link">
Modules
</a>
</li>
<li class="md-tabs__item">
<a href="../todo-analyse/" class="md-tabs__link">
Tools & Roadmap
</a>
</li>
<li class="md-tabs__item">
<a href="../archive/" class="md-tabs__link">
Archive
</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href=".." title="SecuBox Documentation" class="md-nav__button md-logo" aria-label="SecuBox Documentation" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>
</a>
SecuBox Documentation
</label>
<div class="md-nav__source">
<a href="https://github.com/gkerma/secubox-openwrt" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</div>
<div class="md-source__repository">
gkerma/secubox-openwrt
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href=".." class="md-nav__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" checked>
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="">
<span class="md-ellipsis">
Getting Started
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Getting Started
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Quick Start
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Quick Start
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#see-also" class="md-nav__link">
<span class="md-ellipsis">
See Also
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#regles-critiques-a-ne-jamais-oublier" class="md-nav__link">
<span class="md-ellipsis">
⚠️ RÈGLES CRITIQUES (À NE JAMAIS OUBLIER)
</span>
</a>
<nav class="md-nav" aria-label="⚠️ RÈGLES CRITIQUES (À NE JAMAIS OUBLIER)">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#1-rpcd-script-naming" class="md-nav__link">
<span class="md-ellipsis">
1. RPCD Script Naming
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#2-menu-path-matching" class="md-nav__link">
<span class="md-ellipsis">
2. Menu Path Matching
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#3-permissions-files" class="md-nav__link">
<span class="md-ellipsis">
3. Permissions Files
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#4-pre-deployment-checks" class="md-nav__link">
<span class="md-ellipsis">
4. Pre-Deployment Checks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#5-common-errors-quick-fix" class="md-nav__link">
<span class="md-ellipsis">
5. Common Errors Quick Fix
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#design-system-essentials" class="md-nav__link">
<span class="md-ellipsis">
🎨 Design System Essentials
</span>
</a>
<nav class="md-nav" aria-label="🎨 Design System Essentials">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#color-palette-dark-mode" class="md-nav__link">
<span class="md-ellipsis">
Color Palette (Dark Mode)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#fonts" class="md-nav__link">
<span class="md-ellipsis">
Fonts
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#component-classes" class="md-nav__link">
<span class="md-ellipsis">
Component Classes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#grid-sizes" class="md-nav__link">
<span class="md-ellipsis">
Grid Sizes
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#common-commands" class="md-nav__link">
<span class="md-ellipsis">
🔧 Common Commands
</span>
</a>
<nav class="md-nav" aria-label="🔧 Common Commands">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#validation" class="md-nav__link">
<span class="md-ellipsis">
Validation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#build" class="md-nav__link">
<span class="md-ellipsis">
Build
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#deploy" class="md-nav__link">
<span class="md-ellipsis">
Deploy
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#quick-deploy-helper" class="md-nav__link">
<span class="md-ellipsis">
Quick Deploy Helper
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#debug" class="md-nav__link">
<span class="md-ellipsis">
Debug
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#common-errors-quick-fixes" class="md-nav__link">
<span class="md-ellipsis">
🚨 Common Errors &amp; Quick Fixes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#pre-commit-checklist" class="md-nav__link">
<span class="md-ellipsis">
📋 Pre-Commit Checklist
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#file-structure-template" class="md-nav__link">
<span class="md-ellipsis">
📁 File Structure Template
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#quick-code-templates" class="md-nav__link">
<span class="md-ellipsis">
🎯 Quick Code Templates
</span>
</a>
<nav class="md-nav" aria-label="🎯 Quick Code Templates">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#rpcd-script" class="md-nav__link">
<span class="md-ellipsis">
RPCD Script
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#view-javascript" class="md-nav__link">
<span class="md-ellipsis">
View (JavaScript)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#page-header" class="md-nav__link">
<span class="md-ellipsis">
Page Header
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#card-with-gradient-border" class="md-nav__link">
<span class="md-ellipsis">
Card with Gradient Border
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#test-urls" class="md-nav__link">
<span class="md-ellipsis">
🌐 Test URLs
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#documentation" class="md-nav__link">
<span class="md-ellipsis">
📚 Documentation
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../documentation-index/" class="md-nav__link">
<span class="md-ellipsis">
Documentation Index
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../repository-guidelines/" class="md-nav__link">
<span class="md-ellipsis">
Repository Guidelines
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_3" >
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
<span class="md-ellipsis">
Development
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Development
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../development-guidelines/" class="md-nav__link">
<span class="md-ellipsis">
Development Guidelines
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../code-templates/" class="md-nav__link">
<span class="md-ellipsis">
Code Templates
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../module-implementation-guide/" class="md-nav__link">
<span class="md-ellipsis">
Module Implementation
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_4" >
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
<span class="md-ellipsis">
Reference
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Reference
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../claude/" class="md-nav__link">
<span class="md-ellipsis">
RPCD & Architecture
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../validation-guide/" class="md-nav__link">
<span class="md-ellipsis">
Validation Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../permissions-guide/" class="md-nav__link">
<span class="md-ellipsis">
Permissions Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../luci-development-reference/" class="md-nav__link">
<span class="md-ellipsis">
LuCI Development
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../codex/" class="md-nav__link">
<span class="md-ellipsis">
Codex Manual
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_5" >
<label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
<span class="md-ellipsis">
Modules
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Modules
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../module-status/" class="md-nav__link">
<span class="md-ellipsis">
Module Status
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../feature-regeneration-prompts/" class="md-nav__link">
<span class="md-ellipsis">
Feature Prompts
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_6" >
<label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
<span class="md-ellipsis">
Tools & Roadmap
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
Tools & Roadmap
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../todo-analyse/" class="md-nav__link">
<span class="md-ellipsis">
TODO Roadmap
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_7" >
<label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0">
<span class="md-ellipsis">
Archive
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_7">
<span class="md-nav__icon md-icon"></span>
Archive
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../archive/" class="md-nav__link">
<span class="md-ellipsis">
Archive Index
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../archive/build-issues/" class="md-nav__link">
<span class="md-ellipsis">
Build Issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../archive/completion-report/" class="md-nav__link">
<span class="md-ellipsis">
Completion Report
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../archive/module-enable-disable-design/" class="md-nav__link">
<span class="md-ellipsis">
Module Enable/Disable
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#see-also" class="md-nav__link">
<span class="md-ellipsis">
See Also
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#regles-critiques-a-ne-jamais-oublier" class="md-nav__link">
<span class="md-ellipsis">
⚠️ RÈGLES CRITIQUES (À NE JAMAIS OUBLIER)
</span>
</a>
<nav class="md-nav" aria-label="⚠️ RÈGLES CRITIQUES (À NE JAMAIS OUBLIER)">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#1-rpcd-script-naming" class="md-nav__link">
<span class="md-ellipsis">
1. RPCD Script Naming
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#2-menu-path-matching" class="md-nav__link">
<span class="md-ellipsis">
2. Menu Path Matching
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#3-permissions-files" class="md-nav__link">
<span class="md-ellipsis">
3. Permissions Files
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#4-pre-deployment-checks" class="md-nav__link">
<span class="md-ellipsis">
4. Pre-Deployment Checks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#5-common-errors-quick-fix" class="md-nav__link">
<span class="md-ellipsis">
5. Common Errors Quick Fix
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#design-system-essentials" class="md-nav__link">
<span class="md-ellipsis">
🎨 Design System Essentials
</span>
</a>
<nav class="md-nav" aria-label="🎨 Design System Essentials">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#color-palette-dark-mode" class="md-nav__link">
<span class="md-ellipsis">
Color Palette (Dark Mode)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#fonts" class="md-nav__link">
<span class="md-ellipsis">
Fonts
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#component-classes" class="md-nav__link">
<span class="md-ellipsis">
Component Classes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#grid-sizes" class="md-nav__link">
<span class="md-ellipsis">
Grid Sizes
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#common-commands" class="md-nav__link">
<span class="md-ellipsis">
🔧 Common Commands
</span>
</a>
<nav class="md-nav" aria-label="🔧 Common Commands">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#validation" class="md-nav__link">
<span class="md-ellipsis">
Validation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#build" class="md-nav__link">
<span class="md-ellipsis">
Build
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#deploy" class="md-nav__link">
<span class="md-ellipsis">
Deploy
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#quick-deploy-helper" class="md-nav__link">
<span class="md-ellipsis">
Quick Deploy Helper
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#debug" class="md-nav__link">
<span class="md-ellipsis">
Debug
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#common-errors-quick-fixes" class="md-nav__link">
<span class="md-ellipsis">
🚨 Common Errors &amp; Quick Fixes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#pre-commit-checklist" class="md-nav__link">
<span class="md-ellipsis">
📋 Pre-Commit Checklist
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#file-structure-template" class="md-nav__link">
<span class="md-ellipsis">
📁 File Structure Template
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#quick-code-templates" class="md-nav__link">
<span class="md-ellipsis">
🎯 Quick Code Templates
</span>
</a>
<nav class="md-nav" aria-label="🎯 Quick Code Templates">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#rpcd-script" class="md-nav__link">
<span class="md-ellipsis">
RPCD Script
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#view-javascript" class="md-nav__link">
<span class="md-ellipsis">
View (JavaScript)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#page-header" class="md-nav__link">
<span class="md-ellipsis">
Page Header
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#card-with-gradient-border" class="md-nav__link">
<span class="md-ellipsis">
Card with Gradient Border
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#test-urls" class="md-nav__link">
<span class="md-ellipsis">
🌐 Test URLs
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#documentation" class="md-nav__link">
<span class="md-ellipsis">
📚 Documentation
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="quick-start-guide-secubox-development">Quick Start Guide - SecuBox Development<a class="headerlink" href="#quick-start-guide-secubox-development" title="Permanent link">&para;</a></h1>
<p><strong>Version:</strong> 1.0.0<br />
<strong>Last Updated:</strong> 2025-12-28<br />
<strong>Status:</strong> Active</p>
<p><strong>⚡ Aide-mémoire rapide pour développement</strong></p>
<p>Pour le guide complet, voir <a href="../development-guidelines/">DEVELOPMENT-GUIDELINES.md</a></p>
<hr />
<h2 id="see-also">See Also<a class="headerlink" href="#see-also" title="Permanent link">&para;</a></h2>
<ul>
<li><strong>Complete Guide:</strong> <a href="../development-guidelines/">DEVELOPMENT-GUIDELINES.md</a></li>
<li><strong>Architecture &amp; Build:</strong> <a href="../claude/">CLAUDE.md</a></li>
<li><strong>Code Templates:</strong> <a href="../code-templates/">CODE-TEMPLATES.md</a></li>
<li><strong>Module Prompts:</strong> <a href="../feature-regeneration-prompts/">FEATURE-REGENERATION-PROMPTS.md</a></li>
<li><strong>Automation Briefing:</strong> <a href="../codex/">CODEX.md</a></li>
</ul>
<hr />
<h2 id="regles-critiques-a-ne-jamais-oublier">⚠️ RÈGLES CRITIQUES (À NE JAMAIS OUBLIER)<a class="headerlink" href="#regles-critiques-a-ne-jamais-oublier" title="Permanent link">&para;</a></h2>
<h3 id="1-rpcd-script-naming">1. RPCD Script Naming<a class="headerlink" href="#1-rpcd-script-naming" title="Permanent link">&para;</a></h3>
<div class="highlight"><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="c1"># Le nom DOIT correspondre EXACTEMENT à l&#39;objet ubus</span>
<a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a>JavaScript:<span class="w"> </span>object:<span class="w"> </span><span class="s1">&#39;luci.system-hub&#39;</span>
<a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a>Fichier:<span class="w"> </span>root/usr/libexec/rpcd/luci.system-hub<span class="w"> </span>
<a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a>
<a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a><span class="c1"># Sinon: Error -32000 &quot;Object not found&quot;</span>
</code></pre></div>
<h3 id="2-menu-path-matching">2. Menu Path Matching<a class="headerlink" href="#2-menu-path-matching" title="Permanent link">&para;</a></h3>
<div class="highlight"><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a><span class="err">Me</span><span class="kc">nu</span><span class="w"> </span><span class="err">JSON</span><span class="p">:</span><span class="w"> </span><span class="nt">&quot;path&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;system-hub/overview&quot;</span>
<a id="__codelineno-1-2" name="__codelineno-1-2" href="#__codelineno-1-2"></a><span class="err">Fichier</span><span class="p">:</span><span class="w"> </span><span class="err">view/sys</span><span class="kc">te</span><span class="err">m</span><span class="mi">-</span><span class="err">hub/overview.js</span><span class="w"> </span><span class="err"></span>
<a id="__codelineno-1-3" name="__codelineno-1-3" href="#__codelineno-1-3"></a>
<a id="__codelineno-1-4" name="__codelineno-1-4" href="#__codelineno-1-4"></a><span class="err">#</span><span class="w"> </span><span class="err">Si</span><span class="kc">n</span><span class="err">o</span><span class="kc">n</span><span class="p">:</span><span class="w"> </span><span class="err">HTTP</span><span class="w"> </span><span class="mi">404</span><span class="w"> </span><span class="err">No</span><span class="kc">t</span><span class="w"> </span><span class="err">Fou</span><span class="kc">n</span><span class="err">d</span>
</code></pre></div>
<h3 id="3-permissions-files">3. Permissions Files<a class="headerlink" href="#3-permissions-files" title="Permanent link">&para;</a></h3>
<div class="highlight"><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a><span class="c1"># RPCD scripts = exécutable</span>
<a id="__codelineno-2-2" name="__codelineno-2-2" href="#__codelineno-2-2"></a>chmod<span class="w"> </span><span class="m">755</span><span class="w"> </span>root/usr/libexec/rpcd/luci.*
<a id="__codelineno-2-3" name="__codelineno-2-3" href="#__codelineno-2-3"></a>
<a id="__codelineno-2-4" name="__codelineno-2-4" href="#__codelineno-2-4"></a><span class="c1"># CSS/JS = lecture seule</span>
<a id="__codelineno-2-5" name="__codelineno-2-5" href="#__codelineno-2-5"></a>chmod<span class="w"> </span><span class="m">644</span><span class="w"> </span>htdocs/**/*.<span class="o">{</span>css,js<span class="o">}</span>
<a id="__codelineno-2-6" name="__codelineno-2-6" href="#__codelineno-2-6"></a>
<a id="__codelineno-2-7" name="__codelineno-2-7" href="#__codelineno-2-7"></a><span class="c1"># Sinon: 403 Forbidden ou script non exécuté</span>
</code></pre></div>
<h3 id="4-pre-deployment-checks">4. Pre-Deployment Checks<a class="headerlink" href="#4-pre-deployment-checks" title="Permanent link">&para;</a></h3>
<div class="highlight"><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a><span class="c1"># TOUJOURS vérifier avant déploiement:</span>
<a id="__codelineno-3-2" name="__codelineno-3-2" href="#__codelineno-3-2"></a>
<a id="__codelineno-3-3" name="__codelineno-3-3" href="#__codelineno-3-3"></a><span class="c1"># 1. Espace disque (doit être &lt; 90%)</span>
<a id="__codelineno-3-4" name="__codelineno-3-4" href="#__codelineno-3-4"></a>ssh<span class="w"> </span>root@192.168.8.191<span class="w"> </span><span class="s2">&quot;df -h | grep overlay&quot;</span>
<a id="__codelineno-3-5" name="__codelineno-3-5" href="#__codelineno-3-5"></a>
<a id="__codelineno-3-6" name="__codelineno-3-6" href="#__codelineno-3-6"></a><span class="c1"># 2. Permissions après déploiement</span>
<a id="__codelineno-3-7" name="__codelineno-3-7" href="#__codelineno-3-7"></a>ssh<span class="w"> </span>root@192.168.8.191<span class="w"> </span><span class="s2">&quot;find /www/luci-static -name &#39;*.js&#39; -perm 600&quot;</span>
<a id="__codelineno-3-8" name="__codelineno-3-8" href="#__codelineno-3-8"></a><span class="c1"># ⚠️ Si résultats: fichiers ont 600 au lieu de 644 → Erreur 403!</span>
<a id="__codelineno-3-9" name="__codelineno-3-9" href="#__codelineno-3-9"></a>
<a id="__codelineno-3-10" name="__codelineno-3-10" href="#__codelineno-3-10"></a><span class="c1"># 3. Correction rapide si nécessaire</span>
<a id="__codelineno-3-11" name="__codelineno-3-11" href="#__codelineno-3-11"></a>ssh<span class="w"> </span>root@192.168.8.191<span class="w"> </span><span class="s2">&quot;find /www/luci-static -name &#39;*.css&#39; -exec chmod 644 {} \;&quot;</span>
<a id="__codelineno-3-12" name="__codelineno-3-12" href="#__codelineno-3-12"></a>ssh<span class="w"> </span>root@192.168.8.191<span class="w"> </span><span class="s2">&quot;find /www/luci-static -name &#39;*.js&#39; -exec chmod 644 {} \;&quot;</span>
</code></pre></div>
<h3 id="5-common-errors-quick-fix">5. Common Errors Quick Fix<a class="headerlink" href="#5-common-errors-quick-fix" title="Permanent link">&para;</a></h3>
<div class="highlight"><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a><span class="c1"># HTTP 403 Forbidden (BEST: use automated script)</span>
<a id="__codelineno-4-2" name="__codelineno-4-2" href="#__codelineno-4-2"></a>./secubox-tools/fix-permissions.sh<span class="w"> </span>--remote<span class="w"> </span><span class="c1"># Auto-fix all permissions</span>
<a id="__codelineno-4-3" name="__codelineno-4-3" href="#__codelineno-4-3"></a>
<a id="__codelineno-4-4" name="__codelineno-4-4" href="#__codelineno-4-4"></a><span class="c1"># OR manual fix:</span>
<a id="__codelineno-4-5" name="__codelineno-4-5" href="#__codelineno-4-5"></a>chmod<span class="w"> </span><span class="m">644</span><span class="w"> </span>/www/luci-static/resources/**/*.<span class="o">{</span>js,css<span class="o">}</span>
<a id="__codelineno-4-6" name="__codelineno-4-6" href="#__codelineno-4-6"></a>
<a id="__codelineno-4-7" name="__codelineno-4-7" href="#__codelineno-4-7"></a><span class="c1"># No space left on device</span>
<a id="__codelineno-4-8" name="__codelineno-4-8" href="#__codelineno-4-8"></a>rm<span class="w"> </span>-rf<span class="w"> </span>/tmp/*.ipk<span class="w"> </span>/tmp/luci-*
<a id="__codelineno-4-9" name="__codelineno-4-9" href="#__codelineno-4-9"></a>find<span class="w"> </span>/root<span class="w"> </span>-name<span class="w"> </span><span class="s1">&#39;*.backup-*&#39;</span><span class="w"> </span>-mtime<span class="w"> </span>+7<span class="w"> </span>-delete
<a id="__codelineno-4-10" name="__codelineno-4-10" href="#__codelineno-4-10"></a>
<a id="__codelineno-4-11" name="__codelineno-4-11" href="#__codelineno-4-11"></a><span class="c1"># Object not found -32000</span>
<a id="__codelineno-4-12" name="__codelineno-4-12" href="#__codelineno-4-12"></a>chmod<span class="w"> </span><span class="m">755</span><span class="w"> </span>/usr/libexec/rpcd/luci.*
<a id="__codelineno-4-13" name="__codelineno-4-13" href="#__codelineno-4-13"></a>ubus<span class="w"> </span>list<span class="w"> </span><span class="p">|</span><span class="w"> </span>grep<span class="w"> </span>luci.module-name<span class="w"> </span><span class="c1"># Vérifier disponibilité</span>
</code></pre></div>
<hr />
<h2 id="design-system-essentials">🎨 Design System Essentials<a class="headerlink" href="#design-system-essentials" title="Permanent link">&para;</a></h2>
<h3 id="color-palette-dark-mode">Color Palette (Dark Mode)<a class="headerlink" href="#color-palette-dark-mode" title="Permanent link">&para;</a></h3>
<div class="highlight"><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1" href="#__codelineno-5-1"></a><span class="nt">--sh-bg-primary</span><span class="o">:</span><span class="w"> </span><span class="p">#</span><span class="nn">0a0a0f</span><span class="o">;</span><span class="w"> </span><span class="c">/* Fond principal */</span>
<a id="__codelineno-5-2" name="__codelineno-5-2" href="#__codelineno-5-2"></a><span class="nt">--sh-bg-card</span><span class="o">:</span><span class="w"> </span><span class="p">#</span><span class="nn">12121a</span><span class="o">;</span><span class="w"> </span><span class="c">/* Cartes */</span>
<a id="__codelineno-5-3" name="__codelineno-5-3" href="#__codelineno-5-3"></a><span class="nt">--sh-border</span><span class="o">:</span><span class="w"> </span><span class="p">#</span><span class="nn">2a2a35</span><span class="o">;</span><span class="w"> </span><span class="c">/* Bordures */</span>
<a id="__codelineno-5-4" name="__codelineno-5-4" href="#__codelineno-5-4"></a><span class="nt">--sh-primary</span><span class="o">:</span><span class="w"> </span><span class="p">#</span><span class="nn">6366f1</span><span class="o">;</span><span class="w"> </span><span class="c">/* Indigo */</span>
<a id="__codelineno-5-5" name="__codelineno-5-5" href="#__codelineno-5-5"></a><span class="nt">--sh-primary-end</span><span class="o">:</span><span class="w"> </span><span class="p">#</span><span class="nn">8b5cf6</span><span class="o">;</span><span class="w"> </span><span class="c">/* Violet */</span>
</code></pre></div>
<h3 id="fonts">Fonts<a class="headerlink" href="#fonts" title="Permanent link">&para;</a></h3>
<div class="highlight"><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1" href="#__codelineno-6-1"></a><span class="c">/* Général */</span>
<a id="__codelineno-6-2" name="__codelineno-6-2" href="#__codelineno-6-2"></a><span class="nt">font-family</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;Inter&#39;</span><span class="o">,</span><span class="w"> </span><span class="nt">sans-serif</span><span class="o">;</span>
<a id="__codelineno-6-3" name="__codelineno-6-3" href="#__codelineno-6-3"></a>
<a id="__codelineno-6-4" name="__codelineno-6-4" href="#__codelineno-6-4"></a><span class="c">/* Valeurs numériques */</span>
<a id="__codelineno-6-5" name="__codelineno-6-5" href="#__codelineno-6-5"></a><span class="nt">font-family</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;JetBrains Mono&#39;</span><span class="o">,</span><span class="w"> </span><span class="nt">monospace</span><span class="o">;</span>
</code></pre></div>
<h3 id="component-classes">Component Classes<a class="headerlink" href="#component-classes" title="Permanent link">&para;</a></h3>
<div class="highlight"><pre><span></span><code><a id="__codelineno-7-1" name="__codelineno-7-1" href="#__codelineno-7-1"></a><span class="p">.</span><span class="nc">sh-page-header</span><span class="w"> </span><span class="c">/* Page header */</span>
<a id="__codelineno-7-2" name="__codelineno-7-2" href="#__codelineno-7-2"></a><span class="p">.</span><span class="nc">sh-page-title</span><span class="w"> </span><span class="c">/* Title (gradient text) */</span>
<a id="__codelineno-7-3" name="__codelineno-7-3" href="#__codelineno-7-3"></a><span class="p">.</span><span class="nc">sh-stat-badge</span><span class="w"> </span><span class="c">/* Stat badge (130px min) */</span>
<a id="__codelineno-7-4" name="__codelineno-7-4" href="#__codelineno-7-4"></a><span class="p">.</span><span class="nc">sh-card</span><span class="w"> </span><span class="c">/* Card (gradient border on hover) */</span>
<a id="__codelineno-7-5" name="__codelineno-7-5" href="#__codelineno-7-5"></a><span class="p">.</span><span class="nc">sh-btn-primary</span><span class="w"> </span><span class="c">/* Button (gradient) */</span>
<a id="__codelineno-7-6" name="__codelineno-7-6" href="#__codelineno-7-6"></a><span class="p">.</span><span class="nc">sh-filter-tab</span><span class="w"> </span><span class="c">/* Filter tab */</span>
</code></pre></div>
<h3 id="grid-sizes">Grid Sizes<a class="headerlink" href="#grid-sizes" title="Permanent link">&para;</a></h3>
<div class="highlight"><pre><span></span><code><a id="__codelineno-8-1" name="__codelineno-8-1" href="#__codelineno-8-1"></a><span class="c">/* Stats */</span>
<a id="__codelineno-8-2" name="__codelineno-8-2" href="#__codelineno-8-2"></a><span class="nt">grid-template-columns</span><span class="o">:</span><span class="w"> </span><span class="nt">repeat</span><span class="o">(</span><span class="nt">auto-fit</span><span class="o">,</span><span class="w"> </span><span class="nt">minmax</span><span class="o">(</span><span class="nt">130px</span><span class="o">,</span><span class="w"> </span><span class="nt">1fr</span><span class="o">));</span>
<a id="__codelineno-8-3" name="__codelineno-8-3" href="#__codelineno-8-3"></a>
<a id="__codelineno-8-4" name="__codelineno-8-4" href="#__codelineno-8-4"></a><span class="c">/* Metrics */</span>
<a id="__codelineno-8-5" name="__codelineno-8-5" href="#__codelineno-8-5"></a><span class="nt">grid-template-columns</span><span class="o">:</span><span class="w"> </span><span class="nt">repeat</span><span class="o">(</span><span class="nt">auto-fit</span><span class="o">,</span><span class="w"> </span><span class="nt">minmax</span><span class="o">(</span><span class="nt">240px</span><span class="o">,</span><span class="w"> </span><span class="nt">1fr</span><span class="o">));</span>
<a id="__codelineno-8-6" name="__codelineno-8-6" href="#__codelineno-8-6"></a>
<a id="__codelineno-8-7" name="__codelineno-8-7" href="#__codelineno-8-7"></a><span class="c">/* Info cards */</span>
<a id="__codelineno-8-8" name="__codelineno-8-8" href="#__codelineno-8-8"></a><span class="nt">grid-template-columns</span><span class="o">:</span><span class="w"> </span><span class="nt">repeat</span><span class="o">(</span><span class="nt">auto-fit</span><span class="o">,</span><span class="w"> </span><span class="nt">minmax</span><span class="o">(</span><span class="nt">300px</span><span class="o">,</span><span class="w"> </span><span class="nt">1fr</span><span class="o">));</span>
</code></pre></div>
<hr />
<h2 id="common-commands">🔧 Common Commands<a class="headerlink" href="#common-commands" title="Permanent link">&para;</a></h2>
<h3 id="validation">Validation<a class="headerlink" href="#validation" title="Permanent link">&para;</a></h3>
<div class="highlight"><pre><span></span><code><a id="__codelineno-9-1" name="__codelineno-9-1" href="#__codelineno-9-1"></a><span class="c1"># Valider TOUT avant commit (7 checks incluant permissions)</span>
<a id="__codelineno-9-2" name="__codelineno-9-2" href="#__codelineno-9-2"></a>./secubox-tools/validate-modules.sh
<a id="__codelineno-9-3" name="__codelineno-9-3" href="#__codelineno-9-3"></a>
<a id="__codelineno-9-4" name="__codelineno-9-4" href="#__codelineno-9-4"></a><span class="c1"># Corriger automatiquement les permissions</span>
<a id="__codelineno-9-5" name="__codelineno-9-5" href="#__codelineno-9-5"></a>./secubox-tools/fix-permissions.sh<span class="w"> </span>--local
<a id="__codelineno-9-6" name="__codelineno-9-6" href="#__codelineno-9-6"></a>
<a id="__codelineno-9-7" name="__codelineno-9-7" href="#__codelineno-9-7"></a><span class="c1"># JSON</span>
<a id="__codelineno-9-8" name="__codelineno-9-8" href="#__codelineno-9-8"></a>jsonlint<span class="w"> </span>file.json
<a id="__codelineno-9-9" name="__codelineno-9-9" href="#__codelineno-9-9"></a>
<a id="__codelineno-9-10" name="__codelineno-9-10" href="#__codelineno-9-10"></a><span class="c1"># Shell</span>
<a id="__codelineno-9-11" name="__codelineno-9-11" href="#__codelineno-9-11"></a>shellcheck<span class="w"> </span>root/usr/libexec/rpcd/*
</code></pre></div>
<h3 id="build">Build<a class="headerlink" href="#build" title="Permanent link">&para;</a></h3>
<div class="highlight"><pre><span></span><code><a id="__codelineno-10-1" name="__codelineno-10-1" href="#__codelineno-10-1"></a><span class="c1"># Build local</span>
<a id="__codelineno-10-2" name="__codelineno-10-2" href="#__codelineno-10-2"></a>./secubox-tools/local-build.sh<span class="w"> </span>build<span class="w"> </span>luci-app-module-name
<a id="__codelineno-10-3" name="__codelineno-10-3" href="#__codelineno-10-3"></a>
<a id="__codelineno-10-4" name="__codelineno-10-4" href="#__codelineno-10-4"></a><span class="c1"># Build OpenWrt SDK</span>
<a id="__codelineno-10-5" name="__codelineno-10-5" href="#__codelineno-10-5"></a>make<span class="w"> </span>package/luci-app-module-name/compile<span class="w"> </span><span class="nv">V</span><span class="o">=</span>s
</code></pre></div>
<h3 id="deploy">Deploy<a class="headerlink" href="#deploy" title="Permanent link">&para;</a></h3>
<div class="highlight"><pre><span></span><code><a id="__codelineno-11-1" name="__codelineno-11-1" href="#__codelineno-11-1"></a><span class="c1"># Copier fichiers</span>
<a id="__codelineno-11-2" name="__codelineno-11-2" href="#__codelineno-11-2"></a>scp<span class="w"> </span>file.js<span class="w"> </span>root@192.168.8.191:/www/luci-static/resources/
<a id="__codelineno-11-3" name="__codelineno-11-3" href="#__codelineno-11-3"></a>
<a id="__codelineno-11-4" name="__codelineno-11-4" href="#__codelineno-11-4"></a><span class="c1"># Fix permissions</span>
<a id="__codelineno-11-5" name="__codelineno-11-5" href="#__codelineno-11-5"></a>ssh<span class="w"> </span>root@192.168.8.191<span class="w"> </span><span class="s2">&quot;chmod 644 /www/luci-static/resources/**/*.css&quot;</span>
<a id="__codelineno-11-6" name="__codelineno-11-6" href="#__codelineno-11-6"></a>
<a id="__codelineno-11-7" name="__codelineno-11-7" href="#__codelineno-11-7"></a><span class="c1"># Clear cache + restart</span>
<a id="__codelineno-11-8" name="__codelineno-11-8" href="#__codelineno-11-8"></a>ssh<span class="w"> </span>root@192.168.8.191<span class="w"> </span><span class="s2">&quot;rm -f /tmp/luci-indexcache /tmp/luci-modulecache/* &amp;&amp; /etc/init.d/rpcd restart &amp;&amp; /etc/init.d/uhttpd restart&quot;</span>
</code></pre></div>
<h3 id="quick-deploy-helper">Quick Deploy Helper<a class="headerlink" href="#quick-deploy-helper" title="Permanent link">&para;</a></h3>
<p><div class="highlight"><pre><span></span><code><a id="__codelineno-12-1" name="__codelineno-12-1" href="#__codelineno-12-1"></a><span class="c1"># IPK install via opkg (auto SCP + install)</span>
<a id="__codelineno-12-2" name="__codelineno-12-2" href="#__codelineno-12-2"></a>./secubox-tools/quick-deploy.sh<span class="w"> </span>--ipk<span class="w"> </span>bin/packages/luci-app-secubox.ipk
<a id="__codelineno-12-3" name="__codelineno-12-3" href="#__codelineno-12-3"></a>
<a id="__codelineno-12-4" name="__codelineno-12-4" href="#__codelineno-12-4"></a><span class="c1"># APK install on newer images</span>
<a id="__codelineno-12-5" name="__codelineno-12-5" href="#__codelineno-12-5"></a>./secubox-tools/quick-deploy.sh<span class="w"> </span>--apk<span class="w"> </span>dist/secubox-theme.apk
<a id="__codelineno-12-6" name="__codelineno-12-6" href="#__codelineno-12-6"></a>
<a id="__codelineno-12-7" name="__codelineno-12-7" href="#__codelineno-12-7"></a><span class="c1"># Push local source directory to /www/luci-static</span>
<a id="__codelineno-12-8" name="__codelineno-12-8" href="#__codelineno-12-8"></a>./secubox-tools/quick-deploy.sh<span class="w"> </span>--src<span class="w"> </span>luci-app-secubox/htdocs<span class="w"> </span>--target-path<span class="w"> </span>/www/luci-static
<a id="__codelineno-12-9" name="__codelineno-12-9" href="#__codelineno-12-9"></a>
<a id="__codelineno-12-10" name="__codelineno-12-10" href="#__codelineno-12-10"></a><span class="c1"># Clone Git repo and deploy (branch optional)</span>
<a id="__codelineno-12-11" name="__codelineno-12-11" href="#__codelineno-12-11"></a>./secubox-tools/quick-deploy.sh<span class="w"> </span>--git<span class="w"> </span>https://github.com/CyberMindStudio/secubox-theme.git<span class="w"> </span>--branch<span class="w"> </span>main
<a id="__codelineno-12-12" name="__codelineno-12-12" href="#__codelineno-12-12"></a>
<a id="__codelineno-12-13" name="__codelineno-12-13" href="#__codelineno-12-13"></a><span class="c1"># Selective push (only CSS + Settings view)</span>
<a id="__codelineno-12-14" name="__codelineno-12-14" href="#__codelineno-12-14"></a>./secubox-tools/quick-deploy.sh<span class="w"> </span>--src<span class="w"> </span>luci-app-secubox/htdocs<span class="w"> </span><span class="se">\</span>
<a id="__codelineno-12-15" name="__codelineno-12-15" href="#__codelineno-12-15"></a><span class="w"> </span>--include<span class="w"> </span>luci-static/resources/secubox/secubox.css<span class="w"> </span><span class="se">\</span>
<a id="__codelineno-12-16" name="__codelineno-12-16" href="#__codelineno-12-16"></a><span class="w"> </span>--include<span class="w"> </span>luci-static/resources/view/secubox/settings.js
<a id="__codelineno-12-17" name="__codelineno-12-17" href="#__codelineno-12-17"></a>
<a id="__codelineno-12-18" name="__codelineno-12-18" href="#__codelineno-12-18"></a><span class="c1"># Root tree updates (rpcd, ACLs, etc.)</span>
<a id="__codelineno-12-19" name="__codelineno-12-19" href="#__codelineno-12-19"></a>./secubox-tools/quick-deploy.sh<span class="w"> </span>--src<span class="w"> </span>luci-app-secubox/root<span class="w"> </span>--force-root
<a id="__codelineno-12-20" name="__codelineno-12-20" href="#__codelineno-12-20"></a>
<a id="__codelineno-12-21" name="__codelineno-12-21" href="#__codelineno-12-21"></a><span class="c1"># Legacy theme profile (mirrors deploy-theme-system.sh)</span>
<a id="__codelineno-12-22" name="__codelineno-12-22" href="#__codelineno-12-22"></a>./secubox-tools/quick-deploy.sh<span class="w"> </span>--profile<span class="w"> </span>theme
<a id="__codelineno-12-23" name="__codelineno-12-23" href="#__codelineno-12-23"></a>
<a id="__codelineno-12-24" name="__codelineno-12-24" href="#__codelineno-12-24"></a><span class="c1"># Deploy complete LuCI app (root + htdocs)</span>
<a id="__codelineno-12-25" name="__codelineno-12-25" href="#__codelineno-12-25"></a>./secubox-tools/quick-deploy.sh<span class="w"> </span>--profile<span class="w"> </span>luci-app<span class="w"> </span>--src<span class="w"> </span>luci-app-secubox
<a id="__codelineno-12-26" name="__codelineno-12-26" href="#__codelineno-12-26"></a>
<a id="__codelineno-12-27" name="__codelineno-12-27" href="#__codelineno-12-27"></a><span class="c1"># Browse LuCI apps and auto-pick one</span>
<a id="__codelineno-12-28" name="__codelineno-12-28" href="#__codelineno-12-28"></a>./secubox-tools/quick-deploy.sh<span class="w"> </span>--list-apps
<a id="__codelineno-12-29" name="__codelineno-12-29" href="#__codelineno-12-29"></a>./secubox-tools/quick-deploy.sh<span class="w"> </span>--app<span class="w"> </span>secubox
<a id="__codelineno-12-30" name="__codelineno-12-30" href="#__codelineno-12-30"></a>./secubox-tools/quick-deploy.sh<span class="w"> </span>--src-select<span class="w"> </span><span class="c1"># interactive picker (TTY only)</span>
</code></pre></div>
<em>Flags:</em> <code>--include</code> limits uploads, <code>--force-root</code> writes relative to <code>/</code>, <code>--profile</code> triggers opinionated bundles (<code>theme</code>, <code>luci-app</code>), <code>--app &lt;name&gt;</code> auto-resolves <code>luci-app-&lt;name&gt;</code>, <code>--list-apps</code> prints detected apps, <code>--src-select</code> shows the same picker interactively, <code>--no-auto-profile</code> disables automatic LuCI detection when using <code>--src</code>, <code>--no-cache-bust</code> skips clearing <code>/tmp/luci-*</code>, <code>--no-verify</code> disables post-copy checksum checks, <code>--router root@192.168.8.191</code> overrides the target, and <code>--post "rm -rf /tmp/luci-*"</code> runs extra remote commands. Environment variables <code>ROUTER</code>, <code>TARGET_PATH</code>, <code>CACHE_BUST</code>, <code>VERIFY</code>, <code>SSH_OPTS</code>, and <code>SCP_OPTS</code> can be exported ahead of time.</p>
<h3 id="debug">Debug<a class="headerlink" href="#debug" title="Permanent link">&para;</a></h3>
<div class="highlight"><pre><span></span><code><a id="__codelineno-13-1" name="__codelineno-13-1" href="#__codelineno-13-1"></a><span class="c1"># Test RPCD</span>
<a id="__codelineno-13-2" name="__codelineno-13-2" href="#__codelineno-13-2"></a>ssh<span class="w"> </span>root@router<span class="w"> </span><span class="s2">&quot;ubus list | grep luci.module&quot;</span>
<a id="__codelineno-13-3" name="__codelineno-13-3" href="#__codelineno-13-3"></a>ssh<span class="w"> </span>root@router<span class="w"> </span><span class="s2">&quot;ubus call luci.module-name getStatus&quot;</span>
<a id="__codelineno-13-4" name="__codelineno-13-4" href="#__codelineno-13-4"></a>
<a id="__codelineno-13-5" name="__codelineno-13-5" href="#__codelineno-13-5"></a><span class="c1"># Check files</span>
<a id="__codelineno-13-6" name="__codelineno-13-6" href="#__codelineno-13-6"></a>ssh<span class="w"> </span>root@router<span class="w"> </span><span class="s2">&quot;ls -la /www/luci-static/resources/view/module-name/&quot;</span>
<a id="__codelineno-13-7" name="__codelineno-13-7" href="#__codelineno-13-7"></a>
<a id="__codelineno-13-8" name="__codelineno-13-8" href="#__codelineno-13-8"></a><span class="c1"># Logs</span>
<a id="__codelineno-13-9" name="__codelineno-13-9" href="#__codelineno-13-9"></a>ssh<span class="w"> </span>root@router<span class="w"> </span><span class="s2">&quot;logread | grep -i error&quot;</span>
</code></pre></div>
<hr />
<h2 id="common-errors-quick-fixes">🚨 Common Errors &amp; Quick Fixes<a class="headerlink" href="#common-errors-quick-fixes" title="Permanent link">&para;</a></h2>
<table>
<thead>
<tr>
<th>Error</th>
<th>Quick Fix</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>-32000 Object not found</strong></td>
<td>Rename RPCD file to match ubus object</td>
</tr>
<tr>
<td><strong>404 View not found</strong></td>
<td>Fix menu path to match file location</td>
</tr>
<tr>
<td><strong>403 Forbidden CSS</strong></td>
<td><code>chmod 644 *.css</code></td>
</tr>
<tr>
<td><strong>[object HTMLButtonElement]</strong></td>
<td>Remove array wrapper: <code>E('div', {}, renderButtons())</code></td>
</tr>
<tr>
<td><strong>Styles not updating</strong></td>
<td>Clear browser cache (Ctrl+Shift+R) + mode privé</td>
</tr>
</tbody>
</table>
<hr />
<h2 id="pre-commit-checklist">📋 Pre-Commit Checklist<a class="headerlink" href="#pre-commit-checklist" title="Permanent link">&para;</a></h2>
<ul class="task-list">
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> <code>./secubox-tools/fix-permissions.sh --local</code> ✅ (auto-fix)</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> <code>./secubox-tools/validate-modules.sh</code> ✅ (7 checks)</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> RPCD name = ubus object name</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Menu path = view file path</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Permissions: 755 (RPCD), 644 (CSS/JS) - auto-verified</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> JSON valide (jsonlint)</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> CSS: variables utilisées (pas hardcode)</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> CSS: dark mode supporté</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> JS: gestion d'erreur sur API calls</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Version incrémentée (PKG_VERSION)</li>
</ul>
<hr />
<h2 id="file-structure-template">📁 File Structure Template<a class="headerlink" href="#file-structure-template" title="Permanent link">&para;</a></h2>
<div class="highlight"><pre><span></span><code><a id="__codelineno-14-1" name="__codelineno-14-1" href="#__codelineno-14-1"></a>luci-app-&lt;module&gt;/
<a id="__codelineno-14-2" name="__codelineno-14-2" href="#__codelineno-14-2"></a>├── Makefile
<a id="__codelineno-14-3" name="__codelineno-14-3" href="#__codelineno-14-3"></a>├── htdocs/luci-static/resources/
<a id="__codelineno-14-4" name="__codelineno-14-4" href="#__codelineno-14-4"></a>│ ├── view/&lt;module&gt;/
<a id="__codelineno-14-5" name="__codelineno-14-5" href="#__codelineno-14-5"></a>│ │ └── overview.js
<a id="__codelineno-14-6" name="__codelineno-14-6" href="#__codelineno-14-6"></a>│ └── &lt;module&gt;/
<a id="__codelineno-14-7" name="__codelineno-14-7" href="#__codelineno-14-7"></a>│ ├── api.js
<a id="__codelineno-14-8" name="__codelineno-14-8" href="#__codelineno-14-8"></a>│ ├── common.css
<a id="__codelineno-14-9" name="__codelineno-14-9" href="#__codelineno-14-9"></a>│ └── overview.css
<a id="__codelineno-14-10" name="__codelineno-14-10" href="#__codelineno-14-10"></a>└── root/
<a id="__codelineno-14-11" name="__codelineno-14-11" href="#__codelineno-14-11"></a> ├── usr/libexec/rpcd/
<a id="__codelineno-14-12" name="__codelineno-14-12" href="#__codelineno-14-12"></a> │ └── luci.&lt;module&gt; ⚠️ MUST match ubus object!
<a id="__codelineno-14-13" name="__codelineno-14-13" href="#__codelineno-14-13"></a> └── usr/share/
<a id="__codelineno-14-14" name="__codelineno-14-14" href="#__codelineno-14-14"></a> ├── luci/menu.d/
<a id="__codelineno-14-15" name="__codelineno-14-15" href="#__codelineno-14-15"></a> │ └── luci-app-&lt;module&gt;.json
<a id="__codelineno-14-16" name="__codelineno-14-16" href="#__codelineno-14-16"></a> └── rpcd/acl.d/
<a id="__codelineno-14-17" name="__codelineno-14-17" href="#__codelineno-14-17"></a> └── luci-app-&lt;module&gt;.json
</code></pre></div>
<hr />
<h2 id="quick-code-templates">🎯 Quick Code Templates<a class="headerlink" href="#quick-code-templates" title="Permanent link">&para;</a></h2>
<h3 id="rpcd-script">RPCD Script<a class="headerlink" href="#rpcd-script" title="Permanent link">&para;</a></h3>
<div class="highlight"><pre><span></span><code><a id="__codelineno-15-1" name="__codelineno-15-1" href="#__codelineno-15-1"></a><span class="ch">#!/bin/sh</span>
<a id="__codelineno-15-2" name="__codelineno-15-2" href="#__codelineno-15-2"></a><span class="k">case</span><span class="w"> </span><span class="s2">&quot;</span><span class="nv">$1</span><span class="s2">&quot;</span><span class="w"> </span><span class="k">in</span>
<a id="__codelineno-15-3" name="__codelineno-15-3" href="#__codelineno-15-3"></a><span class="w"> </span>list<span class="o">)</span>
<a id="__codelineno-15-4" name="__codelineno-15-4" href="#__codelineno-15-4"></a><span class="w"> </span><span class="nb">echo</span><span class="w"> </span><span class="s1">&#39;{&quot;getStatus&quot;: {}, &quot;getHealth&quot;: {}}&#39;</span>
<a id="__codelineno-15-5" name="__codelineno-15-5" href="#__codelineno-15-5"></a><span class="w"> </span><span class="p">;;</span>
<a id="__codelineno-15-6" name="__codelineno-15-6" href="#__codelineno-15-6"></a><span class="w"> </span>call<span class="o">)</span>
<a id="__codelineno-15-7" name="__codelineno-15-7" href="#__codelineno-15-7"></a><span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="s2">&quot;</span><span class="nv">$2</span><span class="s2">&quot;</span><span class="w"> </span><span class="k">in</span>
<a id="__codelineno-15-8" name="__codelineno-15-8" href="#__codelineno-15-8"></a><span class="w"> </span>getStatus<span class="o">)</span>
<a id="__codelineno-15-9" name="__codelineno-15-9" href="#__codelineno-15-9"></a><span class="w"> </span><span class="nb">printf</span><span class="w"> </span><span class="s1">&#39;{&quot;enabled&quot;: true}\n&#39;</span>
<a id="__codelineno-15-10" name="__codelineno-15-10" href="#__codelineno-15-10"></a><span class="w"> </span><span class="p">;;</span>
<a id="__codelineno-15-11" name="__codelineno-15-11" href="#__codelineno-15-11"></a><span class="w"> </span><span class="k">esac</span>
<a id="__codelineno-15-12" name="__codelineno-15-12" href="#__codelineno-15-12"></a><span class="w"> </span><span class="p">;;</span>
<a id="__codelineno-15-13" name="__codelineno-15-13" href="#__codelineno-15-13"></a><span class="k">esac</span>
</code></pre></div>
<h3 id="view-javascript">View (JavaScript)<a class="headerlink" href="#view-javascript" title="Permanent link">&para;</a></h3>
<div class="highlight"><pre><span></span><code><a id="__codelineno-16-1" name="__codelineno-16-1" href="#__codelineno-16-1"></a><span class="s1">&#39;use strict&#39;</span><span class="p">;</span>
<a id="__codelineno-16-2" name="__codelineno-16-2" href="#__codelineno-16-2"></a><span class="s1">&#39;require view&#39;</span><span class="p">;</span>
<a id="__codelineno-16-3" name="__codelineno-16-3" href="#__codelineno-16-3"></a><span class="s1">&#39;require &lt;module&gt;/api as API&#39;</span><span class="p">;</span>
<a id="__codelineno-16-4" name="__codelineno-16-4" href="#__codelineno-16-4"></a>
<a id="__codelineno-16-5" name="__codelineno-16-5" href="#__codelineno-16-5"></a><span class="k">return</span><span class="w"> </span><span class="nx">view</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<a id="__codelineno-16-6" name="__codelineno-16-6" href="#__codelineno-16-6"></a><span class="w"> </span><span class="nx">load</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-16-7" name="__codelineno-16-7" href="#__codelineno-16-7"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">API</span><span class="p">.</span><span class="nx">getStatus</span><span class="p">();</span>
<a id="__codelineno-16-8" name="__codelineno-16-8" href="#__codelineno-16-8"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-16-9" name="__codelineno-16-9" href="#__codelineno-16-9"></a><span class="w"> </span><span class="nx">render</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-16-10" name="__codelineno-16-10" href="#__codelineno-16-10"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">&#39;class&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;sh-page-header&#39;</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
<a id="__codelineno-16-11" name="__codelineno-16-11" href="#__codelineno-16-11"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">&#39;h2&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">&#39;class&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;sh-page-title&#39;</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="s1">&#39;Title&#39;</span><span class="p">)</span>
<a id="__codelineno-16-12" name="__codelineno-16-12" href="#__codelineno-16-12"></a><span class="w"> </span><span class="p">]);</span>
<a id="__codelineno-16-13" name="__codelineno-16-13" href="#__codelineno-16-13"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-16-14" name="__codelineno-16-14" href="#__codelineno-16-14"></a><span class="w"> </span><span class="nx">handleSaveApply</span><span class="o">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span>
<a id="__codelineno-16-15" name="__codelineno-16-15" href="#__codelineno-16-15"></a><span class="w"> </span><span class="nx">handleSave</span><span class="o">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span>
<a id="__codelineno-16-16" name="__codelineno-16-16" href="#__codelineno-16-16"></a><span class="w"> </span><span class="nx">handleReset</span><span class="o">:</span><span class="w"> </span><span class="kc">null</span>
<a id="__codelineno-16-17" name="__codelineno-16-17" href="#__codelineno-16-17"></a><span class="p">});</span>
</code></pre></div>
<h3 id="page-header">Page Header<a class="headerlink" href="#page-header" title="Permanent link">&para;</a></h3>
<div class="highlight"><pre><span></span><code><a id="__codelineno-17-1" name="__codelineno-17-1" href="#__codelineno-17-1"></a><span class="nx">E</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">&#39;class&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;sh-page-header&#39;</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
<a id="__codelineno-17-2" name="__codelineno-17-2" href="#__codelineno-17-2"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">{},</span><span class="w"> </span><span class="p">[</span>
<a id="__codelineno-17-3" name="__codelineno-17-3" href="#__codelineno-17-3"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">&#39;h2&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">&#39;class&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;sh-page-title&#39;</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
<a id="__codelineno-17-4" name="__codelineno-17-4" href="#__codelineno-17-4"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">&#39;span&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">&#39;class&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;sh-page-title-icon&#39;</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="s1">&#39;🎯&#39;</span><span class="p">),</span>
<a id="__codelineno-17-5" name="__codelineno-17-5" href="#__codelineno-17-5"></a><span class="w"> </span><span class="s1">&#39;Page Title&#39;</span>
<a id="__codelineno-17-6" name="__codelineno-17-6" href="#__codelineno-17-6"></a><span class="w"> </span><span class="p">]),</span>
<a id="__codelineno-17-7" name="__codelineno-17-7" href="#__codelineno-17-7"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">&#39;p&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">&#39;class&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;sh-page-subtitle&#39;</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="s1">&#39;Description&#39;</span><span class="p">)</span>
<a id="__codelineno-17-8" name="__codelineno-17-8" href="#__codelineno-17-8"></a><span class="w"> </span><span class="p">]),</span>
<a id="__codelineno-17-9" name="__codelineno-17-9" href="#__codelineno-17-9"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">&#39;class&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;sh-stats-grid&#39;</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
<a id="__codelineno-17-10" name="__codelineno-17-10" href="#__codelineno-17-10"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">&#39;class&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;sh-stat-badge&#39;</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
<a id="__codelineno-17-11" name="__codelineno-17-11" href="#__codelineno-17-11"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">&#39;class&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;sh-stat-value&#39;</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="s1">&#39;92&#39;</span><span class="p">),</span>
<a id="__codelineno-17-12" name="__codelineno-17-12" href="#__codelineno-17-12"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">&#39;class&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;sh-stat-label&#39;</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="s1">&#39;Score&#39;</span><span class="p">)</span>
<a id="__codelineno-17-13" name="__codelineno-17-13" href="#__codelineno-17-13"></a><span class="w"> </span><span class="p">])</span>
<a id="__codelineno-17-14" name="__codelineno-17-14" href="#__codelineno-17-14"></a><span class="w"> </span><span class="p">])</span>
<a id="__codelineno-17-15" name="__codelineno-17-15" href="#__codelineno-17-15"></a><span class="p">])</span>
</code></pre></div>
<h3 id="card-with-gradient-border">Card with Gradient Border<a class="headerlink" href="#card-with-gradient-border" title="Permanent link">&para;</a></h3>
<div class="highlight"><pre><span></span><code><a id="__codelineno-18-1" name="__codelineno-18-1" href="#__codelineno-18-1"></a><span class="nx">E</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">&#39;class&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;sh-card sh-card-success&#39;</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
<a id="__codelineno-18-2" name="__codelineno-18-2" href="#__codelineno-18-2"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">&#39;class&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;sh-card-header&#39;</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
<a id="__codelineno-18-3" name="__codelineno-18-3" href="#__codelineno-18-3"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">&#39;h3&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">&#39;class&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;sh-card-title&#39;</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
<a id="__codelineno-18-4" name="__codelineno-18-4" href="#__codelineno-18-4"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">&#39;span&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">&#39;class&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;sh-card-title-icon&#39;</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="s1">&#39;⚙️&#39;</span><span class="p">),</span>
<a id="__codelineno-18-5" name="__codelineno-18-5" href="#__codelineno-18-5"></a><span class="w"> </span><span class="s1">&#39;Card Title&#39;</span>
<a id="__codelineno-18-6" name="__codelineno-18-6" href="#__codelineno-18-6"></a><span class="w"> </span><span class="p">])</span>
<a id="__codelineno-18-7" name="__codelineno-18-7" href="#__codelineno-18-7"></a><span class="w"> </span><span class="p">]),</span>
<a id="__codelineno-18-8" name="__codelineno-18-8" href="#__codelineno-18-8"></a><span class="w"> </span><span class="nx">E</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="s1">&#39;class&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;sh-card-body&#39;</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span>
<a id="__codelineno-18-9" name="__codelineno-18-9" href="#__codelineno-18-9"></a><span class="w"> </span><span class="c1">// Content</span>
<a id="__codelineno-18-10" name="__codelineno-18-10" href="#__codelineno-18-10"></a><span class="w"> </span><span class="p">])</span>
<a id="__codelineno-18-11" name="__codelineno-18-11" href="#__codelineno-18-11"></a><span class="p">])</span>
</code></pre></div>
<hr />
<h2 id="test-urls">🌐 Test URLs<a class="headerlink" href="#test-urls" title="Permanent link">&para;</a></h2>
<div class="highlight"><pre><span></span><code><a id="__codelineno-19-1" name="__codelineno-19-1" href="#__codelineno-19-1"></a>SecuBox Dashboard:
<a id="__codelineno-19-2" name="__codelineno-19-2" href="#__codelineno-19-2"></a>https://192.168.8.191/cgi-bin/luci/admin/secubox
<a id="__codelineno-19-3" name="__codelineno-19-3" href="#__codelineno-19-3"></a>
<a id="__codelineno-19-4" name="__codelineno-19-4" href="#__codelineno-19-4"></a>System Hub:
<a id="__codelineno-19-5" name="__codelineno-19-5" href="#__codelineno-19-5"></a>https://192.168.8.191/cgi-bin/luci/admin/secubox/system/system-hub
</code></pre></div>
<p><strong>TOUJOURS tester en mode privé</strong> (Ctrl+Shift+N) après deploy!</p>
<hr />
<h2 id="documentation">📚 Documentation<a class="headerlink" href="#documentation" title="Permanent link">&para;</a></h2>
<ul>
<li><strong>Guide complet:</strong> <a href="../development-guidelines/">DEVELOPMENT-GUIDELINES.md</a></li>
<li><strong>Architecture:</strong> <a href="../claude/">CLAUDE.md</a></li>
<li><strong>Validation:</strong> <code>./secubox-tools/validate-modules.sh</code></li>
<li><strong>Démo design:</strong> https://cybermind.fr/apps/system-hub/demo.html</li>
</ul>
<hr />
<p><strong>Version:</strong> 1.0.0 | <strong>Date:</strong> 2025-12-26</p>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
Back to top
</button>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
<div class="md-social">
<a href="https://github.com/gkerma/secubox-openwrt" target="_blank" rel="noopener" title="github.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</a>
<a href="https://secubox.cybermood.eu" target="_blank" rel="noopener" title="secubox.cybermood.eu" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M351.9 280H161c2.9 64.5 17.2 123.9 37.5 167.4 11.4 24.5 23.7 41.8 35.1 52.4 11.2 10.5 18.9 12.2 22.9 12.2s11.7-1.7 22.9-12.2c11.4-10.6 23.7-28 35.1-52.4 20.3-43.5 34.6-102.9 37.5-167.4zm-191-48h190.9c-2.8-64.5-17.1-123.9-37.4-167.4-11.4-24.4-23.7-41.8-35.1-52.4C268.1 1.7 260.4 0 256.4 0s-11.7 1.7-22.9 12.2c-11.4 10.6-23.7 28-35.1 52.4-20.3 43.5-34.6 102.9-37.5 167.4m-48 0c3.5-85.6 25.6-165.1 57.9-217.3C78.7 47.3 10.9 131.2 1.5 232zM1.5 280c9.4 100.8 77.2 184.7 169.3 217.3-32.3-52.2-54.4-131.7-57.9-217.3zm398.4 0c-3.5 85.6-25.6 165.1-57.9 217.3 92.1-32.7 159.9-116.5 169.3-217.3zm111.4-48C501.9 131.2 434.1 47.3 342 14.7c32.3 52.2 54.4 131.7 57.9 217.3z"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"annotate": null, "base": "..", "features": ["navigation.instant", "navigation.tracking", "navigation.tabs", "navigation.tabs.sticky", "navigation.sections", "navigation.expand", "navigation.top", "search.suggest", "search.highlight", "content.code.copy", "content.code.annotate"], "search": "../assets/javascripts/workers/search.2c215733.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script>
<script src="../assets/javascripts/bundle.79ae519e.min.js"></script>
</body>
</html>