CyberMind-FR
086e62584e
Created new independent package to integrate SecuBox marketing and documentation website. Includes demo pages, tutorials, and multi-language content previously deployed separately. Package contents: - 36 static files (HTML, JS, JSON) - 16 module demo pages (auth, bandwidth, cdn-cache, client-guardian, etc.) - 3 blog tutorials (setup guides) - 13 language translations (en, fr, de, es, pt, it, nl, ru, ar, zh, ja, ko, hi) - Campaign and landing pages Files accessible at: /luci-static/secubox/ Main URL: http://router-ip/luci-static/secubox/index.html Package info: - Version: 0.1.0-1 - Size: ~500KB - Dependencies: luci-base only - No RPCD/backend components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
265 lines
14 KiB
HTML
265 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Network Modes - Démo | SecuBox</title>
|
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌐</text></svg>">
|
|
<style>
|
|
:root { --primary: #8b5cf6; --primary-dark: #7c3aed; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --dark: #0f172a; --darker: #020617; --card: #1e293b; --text: #f1f5f9; --text-muted: #94a3b8; --border: #334155; }
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: system-ui, sans-serif; background: var(--darker); color: var(--text); min-height: 100vh; }
|
|
.header { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); padding: 40px 24px; text-align: center; }
|
|
.header h1 { font-size: 36px; margin-bottom: 8px; }
|
|
.header p { opacity: 0.9; font-size: 18px; }
|
|
.back-link { position: absolute; top: 20px; left: 20px; color: white; text-decoration: none; opacity: 0.8; }
|
|
.container { max-width: 1200px; margin: 0 auto; padding: 32px 24px; }
|
|
|
|
.current-mode { background: var(--card); border-radius: 16px; padding: 32px; border: 2px solid var(--primary); margin-bottom: 32px; }
|
|
.current-mode-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
|
|
.current-mode-title { font-size: 24px; font-weight: 700; display: flex; align-items: center; gap: 12px; }
|
|
.current-mode-badge { padding: 8px 16px; background: rgba(139, 92, 246, 0.2); color: var(--primary); border-radius: 8px; font-weight: 600; }
|
|
|
|
.mode-diagram { background: var(--dark); border-radius: 12px; padding: 32px; margin-bottom: 24px; }
|
|
.diagram-row { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 20px; }
|
|
.diagram-box { background: var(--card); padding: 16px 24px; border-radius: 12px; text-align: center; border: 2px solid var(--border); min-width: 120px; }
|
|
.diagram-box.active { border-color: var(--primary); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); }
|
|
.diagram-box-icon { font-size: 28px; margin-bottom: 8px; }
|
|
.diagram-box-label { font-size: 13px; font-weight: 600; }
|
|
.diagram-arrow { font-size: 24px; color: var(--primary); }
|
|
.diagram-line { width: 60px; height: 3px; background: linear-gradient(90deg, var(--primary), var(--success)); border-radius: 2px; }
|
|
|
|
.mode-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
|
.detail-card { background: var(--dark); padding: 16px; border-radius: 10px; }
|
|
.detail-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
|
|
.detail-value { font-size: 16px; font-weight: 600; }
|
|
|
|
.modes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px; }
|
|
.mode-card { background: var(--card); border-radius: 16px; padding: 24px; border: 2px solid var(--border); cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden; }
|
|
.mode-card:hover { border-color: var(--primary); transform: translateY(-4px); }
|
|
.mode-card.selected { border-color: var(--success); }
|
|
.mode-card.selected::after { content: '✓'; position: absolute; top: 16px; right: 16px; background: var(--success); color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; }
|
|
.mode-icon { font-size: 48px; margin-bottom: 16px; }
|
|
.mode-name { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
|
|
.mode-desc { color: var(--text-muted); font-size: 14px; margin-bottom: 16px; }
|
|
.mode-features { list-style: none; }
|
|
.mode-features li { padding: 6px 0; font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
|
|
.mode-features li::before { content: '•'; color: var(--primary); }
|
|
|
|
.interfaces-section { background: var(--card); border-radius: 16px; padding: 24px; border: 1px solid var(--border); }
|
|
.section-title { font-size: 18px; font-weight: 600; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
|
|
.interface-row { display: grid; grid-template-columns: 150px 1fr 120px 100px; gap: 16px; padding: 16px; background: var(--dark); border-radius: 10px; margin-bottom: 12px; align-items: center; }
|
|
.interface-name { font-weight: 600; display: flex; align-items: center; gap: 10px; }
|
|
.interface-icon { font-size: 20px; }
|
|
.interface-config { font-family: monospace; font-size: 13px; color: var(--text-muted); }
|
|
.interface-role { padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; }
|
|
.role-wan { background: rgba(239, 68, 68, 0.2); color: var(--danger); }
|
|
.role-lan { background: rgba(34, 197, 94, 0.2); color: var(--success); }
|
|
.role-guest { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
|
|
.interface-status { display: flex; align-items: center; gap: 8px; font-size: 13px; }
|
|
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
|
|
|
|
.apply-btn { display: block; width: 100%; padding: 16px; background: var(--primary); border: none; border-radius: 12px; color: white; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 24px; transition: all 0.2s; }
|
|
.apply-btn:hover { background: var(--primary-dark); transform: translateY(-2px); }
|
|
|
|
@media (max-width: 1024px) { .modes-grid { grid-template-columns: 1fr; } .mode-details { grid-template-columns: 1fr; } }
|
|
@media (max-width: 768px) { .interface-row { grid-template-columns: 1fr; gap: 8px; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<a href="index.html" class="back-link" data-i18n="demo.backToMain">← Retour à l'accueil</a>
|
|
<h1>🌐 Network Modes</h1>
|
|
<p>Configuration réseau simplifiée</p>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="current-mode">
|
|
<div class="current-mode-header">
|
|
<div class="current-mode-title">
|
|
<span>🏠</span>
|
|
<span>Mode actuel : Routeur NAT</span>
|
|
</div>
|
|
<div class="current-mode-badge">Actif</div>
|
|
</div>
|
|
|
|
<div class="mode-diagram">
|
|
<div class="diagram-row">
|
|
<div class="diagram-box">
|
|
<div class="diagram-box-icon">🌍</div>
|
|
<div class="diagram-box-label">Internet</div>
|
|
</div>
|
|
<div class="diagram-line"></div>
|
|
<div class="diagram-box active">
|
|
<div class="diagram-box-icon">📡</div>
|
|
<div class="diagram-box-label">SecuBox</div>
|
|
</div>
|
|
<div class="diagram-line"></div>
|
|
<div class="diagram-box">
|
|
<div class="diagram-box-icon">💻</div>
|
|
<div class="diagram-box-label">LAN</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mode-details">
|
|
<div class="detail-card">
|
|
<div class="detail-label">IP WAN</div>
|
|
<div class="detail-value">192.168.1.254 (DHCP)</div>
|
|
</div>
|
|
<div class="detail-card">
|
|
<div class="detail-label">IP LAN</div>
|
|
<div class="detail-value">10.0.0.1/24</div>
|
|
</div>
|
|
<div class="detail-card">
|
|
<div class="detail-label">NAT</div>
|
|
<div class="detail-value" style="color: var(--success);">Masquerade</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modes-grid">
|
|
<div class="mode-card selected">
|
|
<div class="mode-icon">🏠</div>
|
|
<div class="mode-name">Routeur NAT</div>
|
|
<div class="mode-desc">Mode standard pour partager une connexion Internet</div>
|
|
<ul class="mode-features">
|
|
<li>NAT/Masquerade automatique</li>
|
|
<li>DHCP serveur sur LAN</li>
|
|
<li>Firewall intégré</li>
|
|
<li>Port forwarding</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="mode-card">
|
|
<div class="mode-icon">🌉</div>
|
|
<div class="mode-name">Bridge</div>
|
|
<div class="mode-desc">Pont transparent entre interfaces</div>
|
|
<ul class="mode-features">
|
|
<li>Pas de NAT</li>
|
|
<li>Même sous-réseau</li>
|
|
<li>Filtrage Layer 2</li>
|
|
<li>IDS/IPS transparent</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="mode-card">
|
|
<div class="mode-icon">🔁</div>
|
|
<div class="mode-name">Double NAT</div>
|
|
<div class="mode-desc">Derrière une box opérateur</div>
|
|
<ul class="mode-features">
|
|
<li>WAN en client DHCP</li>
|
|
<li>Second réseau privé</li>
|
|
<li>Isolation renforcée</li>
|
|
<li>UPnP désactivé</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="mode-card">
|
|
<div class="mode-icon">📶</div>
|
|
<div class="mode-name">Point d'accès</div>
|
|
<div class="mode-desc">WiFi uniquement, pas de routage</div>
|
|
<ul class="mode-features">
|
|
<li>Bridge WiFi → LAN</li>
|
|
<li>Pas de DHCP</li>
|
|
<li>Captive portal possible</li>
|
|
<li>Multi-SSID</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="mode-card">
|
|
<div class="mode-icon">🔐</div>
|
|
<div class="mode-name">VPN Gateway</div>
|
|
<div class="mode-desc">Tout le trafic via VPN</div>
|
|
<ul class="mode-features">
|
|
<li>WireGuard/OpenVPN</li>
|
|
<li>Kill switch intégré</li>
|
|
<li>Split tunneling</li>
|
|
<li>Multi-hop</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="mode-card">
|
|
<div class="mode-icon">🏢</div>
|
|
<div class="mode-name">Multi-WAN</div>
|
|
<div class="mode-desc">Agrégation ou failover</div>
|
|
<ul class="mode-features">
|
|
<li>Load balancing</li>
|
|
<li>Failover automatique</li>
|
|
<li>Policy routing</li>
|
|
<li>Bonding</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="interfaces-section">
|
|
<div class="section-title">🔌 Interfaces réseau</div>
|
|
|
|
<div class="interface-row">
|
|
<div class="interface-name">
|
|
<span class="interface-icon">🌐</span>
|
|
<span>eth0 (WAN)</span>
|
|
</div>
|
|
<div class="interface-config">DHCP Client → 192.168.1.254/24</div>
|
|
<div><span class="interface-role role-wan">WAN</span></div>
|
|
<div class="interface-status"><div class="status-dot"></div>1 Gbps</div>
|
|
</div>
|
|
|
|
<div class="interface-row">
|
|
<div class="interface-name">
|
|
<span class="interface-icon">🏠</span>
|
|
<span>br-lan</span>
|
|
</div>
|
|
<div class="interface-config">Static → 10.0.0.1/24</div>
|
|
<div><span class="interface-role role-lan">LAN</span></div>
|
|
<div class="interface-status"><div class="status-dot"></div>Bridge</div>
|
|
</div>
|
|
|
|
<div class="interface-row">
|
|
<div class="interface-name">
|
|
<span class="interface-icon">📶</span>
|
|
<span>wlan0</span>
|
|
</div>
|
|
<div class="interface-config">SSID: SecuBox-Home</div>
|
|
<div><span class="interface-role role-lan">LAN</span></div>
|
|
<div class="interface-status"><div class="status-dot"></div>802.11ax</div>
|
|
</div>
|
|
|
|
<div class="interface-row">
|
|
<div class="interface-name">
|
|
<span class="interface-icon">👥</span>
|
|
<span>wlan0-guest</span>
|
|
</div>
|
|
<div class="interface-config">SSID: SecuBox-Guest</div>
|
|
<div><span class="interface-role role-guest">Guest</span></div>
|
|
<div class="interface-status"><div class="status-dot"></div>Isolé</div>
|
|
</div>
|
|
|
|
<div class="interface-row">
|
|
<div class="interface-name">
|
|
<span class="interface-icon">🔒</span>
|
|
<span>wg0</span>
|
|
</div>
|
|
<div class="interface-config">WireGuard → 10.10.0.1/24</div>
|
|
<div><span class="interface-role" style="background: rgba(139, 92, 246, 0.2); color: var(--primary);">VPN</span></div>
|
|
<div class="interface-status"><div class="status-dot"></div>3 peers</div>
|
|
</div>
|
|
|
|
<button class="apply-btn">💾 Appliquer la configuration</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.querySelectorAll('.mode-card').forEach(card => {
|
|
card.addEventListener('click', () => {
|
|
document.querySelectorAll('.mode-card').forEach(c => c.classList.remove('selected'));
|
|
card.classList.add('selected');
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- Multi-language System -->
|
|
<script src="/i18n.js"></script>
|
|
</body>
|
|
</html>
|