secubox-openwrt/DOCS-fr/GLOBAL_THEME_SYSTEM.md

Systeme de Theme Global SecuBox

Languages: English | Francais | 中文

Version: 1.0.0 Date: 2025-12-28 Statut: Planification & Specification

Vision

Creer un systeme de design "CyberMood" unifie, dynamique, responsive et moderne pour tous les modules SecuBox avec support multilingue, inspire de l'esthetique du site marketing SecuBox.

Langage de Design CyberMood

Principes Esthetiques Fondamentaux

"CyberMood" = Cyberpunk rencontre Minimalisme Moderne

• Metallique & Verre: Surfaces reflectives, effets glassmorphism
• Accents Neon: Bleus electriques, violets, cyans avec effets de lueur
• Base Sombre: Fonds profonds avec degrades subtils
• Mouvement Dynamique: Animations fluides, effets de particules, degrades fluides
• Dense en Information: Mises en page de tableau de bord modernes avec visualisation de donnees
• Flux Responsive: S'adapte parfaitement du mobile au desktop

Identite Visuelle

Palette Principale:
  Base:      #0a0e27 (Bleu Espace Profond)
  Surface:   #151932 (Ardoise Sombre)
  Accent:    #667eea (Bleu Electrique)
  Secondaire: #764ba2 (Violet Cyber)
  Succes:    #10b981 (Emeraude)
  Avertissement: #f59e0b (Ambre)
  Danger:    #ef4444 (Rouge)
  Info:      #06b6d4 (Cyan)

Degrades Metalliques:
  Acier:     linear-gradient(135deg, #434343 0%, #000000 100%)
  Chrome:    linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%)
  Or:        linear-gradient(135deg, #f9d423 0%, #ff4e50 100%)
  Cyber:     linear-gradient(135deg, #667eea 0%, #764ba2 100%)

Effets Verre:
  Flou:      backdrop-filter: blur(10px)
  Opacite:   rgba(255, 255, 255, 0.05)
  Bordure:   1px solid rgba(255, 255, 255, 0.1)
  Ombre:     0 8px 32px rgba(0, 0, 0, 0.37)

Typographie:
  Display:   'Orbitron' (en-tetes cyberpunk)
  Corps:     'Inter' (lisibilite claire)
  Mono:      'JetBrains Mono' (code & metriques)

Animation:
  Vitesse:   0.3s ease-in-out (standard)
  Rebond:    cubic-bezier(0.68, -0.55, 0.265, 1.55)
  Fluide:    cubic-bezier(0.4, 0, 0.2, 1)

Analyse de l'Etat Actuel

Themes Existants

luci-app-secubox/htdocs/luci-static/resources/secubox/
├── secubox.css         # Styles de base SecuBox (7.0KB)
├── dashboard.css       # Specifique tableau de bord (9.5KB)
├── common.css          # Utilitaires partages (8.4KB)
├── modules.css         # Page modules (7.5KB)
├── alerts.css          # Page alertes (5.1KB)
├── monitoring.css      # Page surveillance (3.0KB)
├── help.css            # Systeme d'aide (7.0KB)
└── theme.js            # JavaScript Theme (2.0KB)

luci-app-system-hub/htdocs/luci-static/resources/system-hub/
├── dashboard.css       # Tableau de bord System Hub (18.2KB)
├── common.css          # Commun System Hub (8.4KB)
└── theme.js            # Theme System Hub (similaire a secubox)

luci-app-network-modes/htdocs/luci-static/resources/network-modes/
├── dashboard.css       # Tableau de bord Network Modes (18.2KB)
└── common.css          # Commun Network Modes (8.4KB)

Problemes de l'Approche Actuelle

1. Fragmentation: Chaque module a ses propres fichiers CSS
2. Duplication: Styles communs repetes entre modules
3. Incoherence: Valeurs de couleurs, espacements, etc. legerement differents
4. Maintenance: Les changements necessitent la mise a jour de plusieurs fichiers
5. Taille du Bundle: CSS duplique charge par module (~50KB total)
6. Pas de Theme Centralise: Impossible de changer les themes globalement

Architecture Proposee

Structure du Theme Global

luci-theme-cybermood/                    # NOUVEAU: Package theme global
├── Makefile
├── README.md
└── htdocs/luci-static/resources/
    └── cybermood/
        ├── core/
        │   ├── variables.css            # Proprietes personnalisees CSS
        │   ├── reset.css                # Normalisation/reset
        │   ├── typography.css           # Definitions de polices
        │   ├── animations.css           # Keyframes & transitions
        │   └── utilities.css            # Classes utilitaires
        ├── components/
        │   ├── buttons.css              # Styles de boutons
        │   ├── cards.css                # Composants carte
        │   ├── forms.css                # Elements de formulaire
        │   ├── tables.css               # Tableaux de donnees
        │   ├── modals.css               # Dialogues modaux
        │   ├── tooltips.css             # Infobulles
        │   ├── badges.css               # Badges de statut
        │   ├── alerts.css               # Messages d'alerte
        │   ├── charts.css               # Conteneurs de graphiques
        │   └── navigation.css           # Elements de navigation
        ├── layouts/
        │   ├── dashboard.css            # Mise en page tableau de bord
        │   ├── grid.css                 # Systeme de grille
        │   └── responsive.css           # Points de rupture
        ├── themes/
        │   ├── dark.css                 # Theme sombre (defaut)
        │   ├── light.css                # Theme clair
        │   └── cyberpunk.css            # Cyber haut contraste
        ├── i18n/
        │   ├── en.json                  # Chaines anglaises
        │   ├── fr.json                  # Chaines francaises
        │   ├── de.json                  # Chaines allemandes
        │   └── es.json                  # Chaines espagnoles
        ├── cybermood.css                # Bundle principal (importe tout)
        ├── cybermood.min.css            # Version minifiee
        └── cybermood.js                 # Controleur de theme

Integration des Modules

// Dans le fichier de vue de chaque module
'use strict';
'require view';
'require cybermood/theme as Theme';

return view.extend({
    render: function() {
        // Appliquer le theme
        Theme.apply('dark');

        // Utiliser les composants du theme
        return E('div', { 'class': 'cyber-container' }, [
            Theme.createCard({
                title: _('Titre du Module'),
                icon: '🎯',
                content: this.renderContent()
            })
        ]);
    }
});

Modeles Prets a l'Emploi

1. Variables CSS (variables.css)

/**
 * Systeme de Design CyberMood - Variables CSS
 * Version: 1.0.0
 */

:root {
    /* ========================================
       Couleurs - Palette de Base
       ======================================== */

    /* Theme Sombre (Defaut) */
    --cyber-bg-primary: #0a0e27;
    --cyber-bg-secondary: #151932;
    --cyber-bg-tertiary: #1e2139;
    --cyber-surface: #252b4a;
    --cyber-surface-light: #2d3454;

    /* Couleurs de Texte */
    --cyber-text-primary: #e2e8f0;
    --cyber-text-secondary: #94a3b8;
    --cyber-text-muted: #64748b;
    --cyber-text-inverse: #0a0e27;

    /* Couleurs d'Accent */
    --cyber-accent-primary: #667eea;
    --cyber-accent-primary-end: #764ba2;
    --cyber-accent-secondary: #06b6d4;
    --cyber-accent-tertiary: #8b5cf6;

    /* Couleurs Semantiques */
    --cyber-success: #10b981;
    --cyber-success-light: #34d399;
    --cyber-warning: #f59e0b;
    --cyber-warning-light: #fbbf24;
    --cyber-danger: #ef4444;
    --cyber-danger-light: #f87171;
    --cyber-info: #06b6d4;
    --cyber-info-light: #22d3ee;

    /* Degrades Metalliques */
    --cyber-gradient-steel: linear-gradient(135deg, #434343 0%, #000000 100%);
    --cyber-gradient-chrome: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%);
    --cyber-gradient-cyber: linear-gradient(135deg, var(--cyber-accent-primary) 0%, var(--cyber-accent-primary-end) 100%);
    --cyber-gradient-success: linear-gradient(135deg, var(--cyber-success) 0%, var(--cyber-success-light) 100%);
    --cyber-gradient-danger: linear-gradient(135deg, var(--cyber-danger) 0%, var(--cyber-danger-light) 100%);

    /* Effets Verre */
    --cyber-glass-bg: rgba(255, 255, 255, 0.05);
    --cyber-glass-border: rgba(255, 255, 255, 0.1);
    --cyber-glass-blur: 10px;
    --cyber-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);

    /* ========================================
       Typographie
       ======================================== */

    --cyber-font-display: 'Orbitron', 'Inter', sans-serif;
    --cyber-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --cyber-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --cyber-font-size-xs: 0.75rem;    /* 12px */
    --cyber-font-size-sm: 0.875rem;   /* 14px */
    --cyber-font-size-base: 1rem;     /* 16px */
    --cyber-font-size-lg: 1.125rem;   /* 18px */
    --cyber-font-size-xl: 1.25rem;    /* 20px */
    --cyber-font-size-2xl: 1.5rem;    /* 24px */
    --cyber-font-size-3xl: 1.875rem;  /* 30px */
    --cyber-font-size-4xl: 2.25rem;   /* 36px */

    --cyber-font-weight-light: 300;
    --cyber-font-weight-normal: 400;
    --cyber-font-weight-medium: 500;
    --cyber-font-weight-semibold: 600;
    --cyber-font-weight-bold: 700;

    /* ========================================
       Espacement
       ======================================== */

    --cyber-space-xs: 0.25rem;   /* 4px */
    --cyber-space-sm: 0.5rem;    /* 8px */
    --cyber-space-md: 1rem;      /* 16px */
    --cyber-space-lg: 1.5rem;    /* 24px */
    --cyber-space-xl: 2rem;      /* 32px */
    --cyber-space-2xl: 3rem;     /* 48px */
    --cyber-space-3xl: 4rem;     /* 64px */

    /* ========================================
       Rayon de Bordure
       ======================================== */

    --cyber-radius-sm: 0.25rem;  /* 4px */
    --cyber-radius-md: 0.5rem;   /* 8px */
    --cyber-radius-lg: 0.75rem;  /* 12px */
    --cyber-radius-xl: 1rem;     /* 16px */
    --cyber-radius-full: 9999px;

    /* ========================================
       Ombres
       ======================================== */

    --cyber-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --cyber-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --cyber-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --cyber-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --cyber-shadow-glow: 0 0 20px rgba(102, 126, 234, 0.5);
    --cyber-shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.5);
    --cyber-shadow-glow-danger: 0 0 20px rgba(239, 68, 68, 0.5);

    /* ========================================
       Transitions
       ======================================== */

    --cyber-transition-fast: 0.15s ease-in-out;
    --cyber-transition-base: 0.3s ease-in-out;
    --cyber-transition-slow: 0.5s ease-in-out;
    --cyber-transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --cyber-transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ========================================
       Couches Z-Index
       ======================================== */

    --cyber-z-base: 0;
    --cyber-z-dropdown: 1000;
    --cyber-z-sticky: 1100;
    --cyber-z-fixed: 1200;
    --cyber-z-modal-backdrop: 1300;
    --cyber-z-modal: 1400;
    --cyber-z-popover: 1500;
    --cyber-z-tooltip: 1600;
}

/* ========================================
   Surcharge Theme Clair
   ======================================== */

[data-theme="light"] {
    --cyber-bg-primary: #f8fafc;
    --cyber-bg-secondary: #f1f5f9;
    --cyber-bg-tertiary: #e2e8f0;
    --cyber-surface: #ffffff;
    --cyber-surface-light: #f8fafc;

    --cyber-text-primary: #0f172a;
    --cyber-text-secondary: #475569;
    --cyber-text-muted: #64748b;
    --cyber-text-inverse: #ffffff;

    --cyber-glass-bg: rgba(255, 255, 255, 0.8);
    --cyber-glass-border: rgba(0, 0, 0, 0.1);
    --cyber-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* ========================================
   Theme Cyberpunk (Haut Contraste)
   ======================================== */

[data-theme="cyberpunk"] {
    --cyber-bg-primary: #000000;
    --cyber-bg-secondary: #0a0a0a;
    --cyber-accent-primary: #00ffff;
    --cyber-accent-primary-end: #ff00ff;
    --cyber-success: #00ff00;
    --cyber-danger: #ff0000;
    --cyber-shadow-glow: 0 0 30px rgba(0, 255, 255, 0.8);
}

2. Modele de Composant Carte (cards.css)

/**
 * Composant Carte CyberMood
 */

.cyber-card {
    background: var(--cyber-glass-bg);
    backdrop-filter: blur(var(--cyber-glass-blur));
    border: 1px solid var(--cyber-glass-border);
    border-radius: var(--cyber-radius-xl);
    padding: var(--cyber-space-lg);
    box-shadow: var(--cyber-glass-shadow);
    transition: all var(--cyber-transition-base);
    position: relative;
    overflow: hidden;
}

.cyber-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--cyber-gradient-cyber);
    opacity: 0;
    transition: opacity var(--cyber-transition-base);
}

.cyber-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cyber-shadow-xl), var(--cyber-shadow-glow);
    border-color: var(--cyber-accent-primary);
}

.cyber-card:hover::before {
    opacity: 1;
}

.cyber-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--cyber-space-md);
    padding-bottom: var(--cyber-space-md);
    border-bottom: 1px solid var(--cyber-glass-border);
}

.cyber-card-title {
    font-family: var(--cyber-font-display);
    font-size: var(--cyber-font-size-xl);
    font-weight: var(--cyber-font-weight-semibold);
    color: var(--cyber-text-primary);
    display: flex;
    align-items: center;
    gap: var(--cyber-space-sm);
    margin: 0;
}

.cyber-card-icon {
    font-size: var(--cyber-font-size-2xl);
    filter: drop-shadow(0 0 10px currentColor);
}

.cyber-card-body {
    color: var(--cyber-text-secondary);
    line-height: 1.6;
}

.cyber-card-footer {
    margin-top: var(--cyber-space-lg);
    padding-top: var(--cyber-space-md);
    border-top: 1px solid var(--cyber-glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Variantes de Carte */
.cyber-card--success {
    border-color: var(--cyber-success);
}

.cyber-card--success:hover {
    box-shadow: var(--cyber-shadow-xl), var(--cyber-shadow-glow-success);
}

.cyber-card--danger {
    border-color: var(--cyber-danger);
}

.cyber-card--danger:hover {
    box-shadow: var(--cyber-shadow-xl), var(--cyber-shadow-glow-danger);
}

.cyber-card--compact {
    padding: var(--cyber-space-md);
}

.cyber-card--flat {
    background: var(--cyber-surface);
    backdrop-filter: none;
}

3. Controleur JavaScript du Theme (cybermood.js)

/**
 * Controleur de Theme CyberMood
 * Version: 1.0.0
 */

'use strict';

var CyberMoodTheme = {
    version: '1.0.0',
    currentTheme: 'dark',
    currentLang: 'en',
    translations: {},

    /**
     * Initialiser le systeme de theme
     */
    init: function() {
        console.log('🎨 Systeme de Theme CyberMood v' + this.version);

        // Charger la preference de theme sauvegardee
        var savedTheme = this.getSavedTheme();
        if (savedTheme) {
            this.apply(savedTheme);
        }

        // Charger la langue sauvegardee
        var savedLang = this.getSavedLang();
        if (savedLang) {
            this.setLanguage(savedLang);
        }

        // Ajouter l'ecouteur de bascule de theme
        this.attachThemeToggle();

        // Initialiser les animations
        this.initAnimations();

        return this;
    },

    /**
     * Appliquer le theme
     * @param {string} theme - Nom du theme: 'dark', 'light', 'cyberpunk'
     */
    apply: function(theme) {
        document.documentElement.setAttribute('data-theme', theme);
        this.currentTheme = theme;
        this.saveTheme(theme);

        // Declencher l'evenement de changement de theme
        var event = new CustomEvent('themechange', { detail: { theme: theme } });
        document.dispatchEvent(event);

        console.log('✅ Theme applique:', theme);
    },

    /**
     * Basculer entre les themes sombre et clair
     */
    toggle: function() {
        var newTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
        this.apply(newTheme);
    },

    /**
     * Creer un composant carte theme
     * @param {object} options - Options de la carte
     * @returns {Element} Element carte
     */
    createCard: function(options) {
        var opts = options || {};
        var variant = opts.variant || '';

        var card = E('div', {
            'class': 'cyber-card' + (variant ? ' cyber-card--' + variant : '')
        });

        // En-tete
        if (opts.title || opts.icon) {
            var header = E('div', { 'class': 'cyber-card-header' });

            var title = E('h3', { 'class': 'cyber-card-title' }, [
                opts.icon ? E('span', { 'class': 'cyber-card-icon' }, opts.icon) : null,
                opts.title || ''
            ]);

            header.appendChild(title);

            if (opts.actions) {
                header.appendChild(opts.actions);
            }

            card.appendChild(header);
        }

        // Corps
        if (opts.content) {
            var body = E('div', { 'class': 'cyber-card-body' }, [opts.content]);
            card.appendChild(body);
        }

        // Pied de page
        if (opts.footer) {
            var footer = E('div', { 'class': 'cyber-card-footer' }, [opts.footer]);
            card.appendChild(footer);
        }

        return card;
    },

    /**
     * Creer un bouton avec theme
     * @param {object} options - Options du bouton
     * @returns {Element} Element bouton
     */
    createButton: function(options) {
        var opts = options || {};
        var classes = ['cyber-btn'];

        if (opts.variant) classes.push('cyber-btn--' + opts.variant);
        if (opts.size) classes.push('cyber-btn--' + opts.size);
        if (opts.block) classes.push('cyber-btn--block');

        return E('button', {
            'class': classes.join(' '),
            'click': opts.onClick || null,
            'disabled': opts.disabled || false
        }, [
            opts.icon ? E('span', { 'class': 'cyber-btn-icon' }, opts.icon) : null,
            opts.label || ''
        ]);
    },

    /**
     * Creer un composant badge
     * @param {string} text - Texte du badge
     * @param {string} variant - Variante du badge
     * @returns {Element} Element badge
     */
    createBadge: function(text, variant) {
        return E('span', {
            'class': 'cyber-badge cyber-badge--' + (variant || 'default')
        }, text);
    },

    /**
     * Definir la langue
     * @param {string} lang - Code de langue (en, fr, de, es)
     */
    setLanguage: function(lang) {
        var self = this;

        // Charger le fichier de traduction
        return fetch(L.resource('cybermood/i18n/' + lang + '.json'))
            .then(function(response) {
                return response.json();
            })
            .then(function(translations) {
                self.translations = translations;
                self.currentLang = lang;
                self.saveLang(lang);

                // Declencher l'evenement de changement de langue
                var event = new CustomEvent('langchange', { detail: { lang: lang } });
                document.dispatchEvent(event);

                console.log('✅ Langue definie:', lang);
            })
            .catch(function(error) {
                console.error('❌ Echec du chargement de la langue:', lang, error);
            });
    },

    /**
     * Traduire une chaine
     * @param {string} key - Cle de traduction
     * @param {object} params - Parametres pour l'interpolation
     * @returns {string} Chaine traduite
     */
    t: function(key, params) {
        var translation = this.translations[key] || key;

        // Interpolation simple des parametres
        if (params) {
            Object.keys(params).forEach(function(param) {
                translation = translation.replace('{' + param + '}', params[param]);
            });
        }

        return translation;
    },

    /**
     * Initialiser les animations
     */
    initAnimations: function() {
        // Ajouter des animations d'entree aux elements
        var elements = document.querySelectorAll('.cyber-animate');
        var observer = new IntersectionObserver(function(entries) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    entry.target.classList.add('cyber-animate--visible');
                }
            });
        }, { threshold: 0.1 });

        elements.forEach(function(el) {
            observer.observe(el);
        });
    },

    /**
     * Attacher le bouton de bascule de theme
     */
    attachThemeToggle: function() {
        var self = this;
        var toggle = document.querySelector('[data-theme-toggle]');

        if (toggle) {
            toggle.addEventListener('click', function() {
                self.toggle();
            });
        }
    },

    /**
     * Sauvegarder le theme dans localStorage
     */
    saveTheme: function(theme) {
        try {
            localStorage.setItem('cybermood-theme', theme);
        } catch (e) {}
    },

    /**
     * Recuperer le theme sauvegarde depuis localStorage
     */
    getSavedTheme: function() {
        try {
            return localStorage.getItem('cybermood-theme');
        } catch (e) {
            return null;
        }
    },

    /**
     * Sauvegarder la langue dans localStorage
     */
    saveLang: function(lang) {
        try {
            localStorage.setItem('cybermood-lang', lang);
        } catch (e) {}
    },

    /**
     * Recuperer la langue sauvegardee depuis localStorage
     */
    getSavedLang: function() {
        try {
            return localStorage.getItem('cybermood-lang') || 'en';
        } catch (e) {
            return 'en';
        }
    }
};

// Auto-initialisation au chargement
if (typeof window !== 'undefined') {
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            CyberMoodTheme.init();
        });
    } else {
        CyberMoodTheme.init();
    }
}

return CyberMoodTheme;

Systeme Multilingue

Structure des Fichiers de Traduction

// en.json (Anglais)
{
    "common": {
        "loading": "Loading...",
        "error": "Error",
        "success": "Success",
        "cancel": "Cancel",
        "save": "Save",
        "delete": "Delete",
        "edit": "Edit",
        "close": "Close",
        "confirm": "Confirm"
    },
    "dashboard": {
        "title": "Dashboard",
        "welcome": "Welcome to {name}",
        "modules": "Modules",
        "active_modules": "Active Modules",
        "system_status": "System Status",
        "health_score": "Health Score"
    },
    "modules": {
        "network_modes": "Network Modes",
        "system_hub": "System Hub",
        "client_guardian": "Client Guardian",
        "bandwidth_manager": "Bandwidth Manager"
    }
}

// fr.json (Francais)
{
    "common": {
        "loading": "Chargement...",
        "error": "Erreur",
        "success": "Succes",
        "cancel": "Annuler",
        "save": "Enregistrer",
        "delete": "Supprimer",
        "edit": "Modifier",
        "close": "Fermer",
        "confirm": "Confirmer"
    },
    "dashboard": {
        "title": "Tableau de bord",
        "welcome": "Bienvenue dans {name}",
        "modules": "Modules",
        "active_modules": "Modules actifs",
        "system_status": "Etat du systeme",
        "health_score": "Score de sante"
    },
    "modules": {
        "network_modes": "Modes reseau",
        "system_hub": "Hub systeme",
        "client_guardian": "Gardien client",
        "bandwidth_manager": "Gestionnaire de bande passante"
    }
}

Plan d'Implementation

Phase 1: Fondation (Semaine 1)

Taches:

1. Creer le package luci-theme-cybermood
2. Implementer le systeme de variables CSS
3. Creer les composants de base (cartes, boutons, formulaires)
4. Configurer le processus de build/minification

Livrables:

• /luci-theme-cybermood/htdocs/luci-static/resources/cybermood/
• cybermood.css (feuille de style principale)
• cybermood.js (controleur de theme)
• variables.css (tokens de design)

Phase 2: Bibliotheque de Composants (Semaine 2)

Taches:

1. Construire tous les composants reutilisables
2. Creer la documentation des composants
3. Implementer les themes sombre/clair/cyberpunk
4. Ajouter les animations et transitions

Composants:

• Cartes, Boutons, Formulaires, Tableaux
• Modaux, Infobulles, Badges, Alertes
• Graphiques, Jauges, Barres de progression
• Elements de navigation

Phase 3: Migration des Modules (Semaine 3)

Taches:

1. Mettre a jour luci-app-secubox pour utiliser le theme global
2. Mettre a jour luci-app-system-hub
3. Mettre a jour luci-app-network-modes
4. Mettre a jour les modules restants

Motif de Migration:

// Avant:
'require secubox/theme as Theme';

// Apres:
'require cybermood/theme as Theme';

Phase 4: Multilingue (Semaine 4)

Taches:

1. Creer les fichiers de traduction (en, fr, de, es)
2. Implementer l'interface de selection de langue
3. Mettre a jour tous les modules avec les cles de traduction
4. Ajouter le support RTL pour l'arabe

Implementation:

// Utilisation dans les modules:
Theme.t('dashboard.welcome', { name: 'SecuBox' });
// Sortie: "Welcome to SecuBox" (en) ou "Bienvenue dans SecuBox" (fr)

Phase 5: Tests & Affinage (Semaine 5)

Taches:

1. Tests multi-navigateurs
2. Tests de responsivite mobile
3. Optimisation des performances
4. Audit d'accessibilite (WCAG 2.1)
5. Tests d'acceptation utilisateur

Exemples d'Utilisation

Exemple 1: Tableau de Bord avec Theme Global

'use strict';
'require view';
'require cybermood/theme as Theme';

return view.extend({
    render: function() {
        return E('div', { 'class': 'cyber-container' }, [
            // Appliquer le CSS du theme
            E('link', {
                'rel': 'stylesheet',
                'href': L.resource('cybermood/cybermood.css')
            }),

            // Bouton de bascule de theme
            E('button', {
                'data-theme-toggle': '',
                'class': 'cyber-btn cyber-btn--icon',
                'title': Theme.t('common.toggle_theme')
            }, '🌓'),

            // Selecteur de langue
            E('select', {
                'class': 'cyber-select',
                'change': function(ev) {
                    Theme.setLanguage(ev.target.value);
                }
            }, [
                E('option', { 'value': 'en' }, 'English'),
                E('option', { 'value': 'fr' }, 'Francais'),
                E('option', { 'value': 'de' }, 'Deutsch'),
                E('option', { 'value': 'es' }, 'Espanol')
            ]),

            // En-tete
            E('h1', { 'class': 'cyber-title' },
                Theme.t('dashboard.title')),

            // Cartes de statistiques
            E('div', { 'class': 'cyber-grid cyber-grid--3' }, [
                Theme.createCard({
                    title: Theme.t('dashboard.active_modules'),
                    icon: '📦',
                    content: E('div', { 'class': 'cyber-stat' }, [
                        E('div', { 'class': 'cyber-stat-value' }, '12'),
                        E('div', { 'class': 'cyber-stat-label' },
                            Theme.t('modules.total'))
                    ]),
                    variant: 'success'
                }),

                Theme.createCard({
                    title: Theme.t('dashboard.health_score'),
                    icon: '❤️',
                    content: E('div', { 'class': 'cyber-stat' }, [
                        E('div', { 'class': 'cyber-stat-value' }, '98%'),
                        Theme.createBadge('Excellent', 'success')
                    ])
                }),

                Theme.createCard({
                    title: Theme.t('dashboard.system_status'),
                    icon: '⚡',
                    content: E('div', { 'class': 'cyber-stat' }, [
                        E('div', { 'class': 'cyber-stat-value' },
                            Theme.t('common.online')),
                        Theme.createBadge('Actif', 'info')
                    ])
                })
            ])
        ]);
    }
});

Exemple 2: Formulaire avec Theme

renderForm: function() {
    return Theme.createCard({
        title: Theme.t('settings.configuration'),
        icon: '⚙️',
        content: E('form', { 'class': 'cyber-form' }, [
            E('div', { 'class': 'cyber-form-group' }, [
                E('label', { 'class': 'cyber-label' },
                    Theme.t('settings.hostname')),
                E('input', {
                    'type': 'text',
                    'class': 'cyber-input',
                    'placeholder': Theme.t('settings.enter_hostname')
                })
            ]),

            E('div', { 'class': 'cyber-form-group' }, [
                E('label', { 'class': 'cyber-label' },
                    Theme.t('settings.enable_feature')),
                E('label', { 'class': 'cyber-switch' }, [
                    E('input', { 'type': 'checkbox' }),
                    E('span', { 'class': 'cyber-switch-slider' })
                ])
            ])
        ]),
        footer: E('div', { 'class': 'cyber-form-actions' }, [
            Theme.createButton({
                label: Theme.t('common.cancel'),
                variant: 'secondary'
            }),
            Theme.createButton({
                label: Theme.t('common.save'),
                variant: 'primary'
            })
        ])
    });
}

Criteres de Succes

1. Apparence Unifiee: Tous les modules utilisent un design coherent
2. Performance: < 50KB bundle CSS total (minifie)
3. Responsive: Fonctionne du mobile (320px) au 4K (3840px)
4. Accessible: Conforme WCAG 2.1 AA
5. Multilingue: 4+ langues supportees
6. Changement de Theme: < 100ms pour le changement de theme
7. Support Navigateurs: Chrome 90+, Firefox 88+, Safari 14+

Liste de Controle de Migration

Par Module:

• Supprimer les fichiers CSS specifiques au module
• Importer le cybermood.css global
• Mettre a jour les composants pour utiliser les classes cyber-*
• Remplacer les chaines codees en dur par des appels Theme.t()
• Tester les themes sombre/clair/cyberpunk
• Tester toutes les langues supportees
• Verifier les points de rupture responsive
• Executer l'audit d'accessibilite
• Mettre a jour la documentation

Global:

• Creer le package luci-theme-cybermood
• Implementer tous les composants de base
• Creer les fichiers de traduction
• Configurer le processus de build
• Creer le guide de migration
• Mettre a jour les 15 modules
• Tests de performance
• Tests d'acceptation utilisateur
• Deploiement en production

References

• Inspiration Design: Site Web SecuBox (https://secubox.cybermood.eu)
• Systeme de Theme LuCI: /feeds/luci/themes/
• Spec Variables CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
• Bonnes Pratiques i18n: https://www.w3.org/International/

Prochaines Etapes

1. Revue & Approbation: Obtenir l'approbation des parties prenantes sur la direction du design
2. Prototype: Creer des maquettes visuelles dans Figma/similaire
3. Construction: Implementer la Phase 1 (Fondation)
4. Test: QA interne sur routeur de test
5. Deploiement: Deployer en production

---

Statut: Planification Priorite: Haute Effort: 4-5 semaines Impact: Tous les modules unifies