| ID | Username | Admin | Expira | Actions |
|---|
| Order | ID | Name | Color | Icon | Actions |
|---|
| ID | Name | Enabled | Description | Actions |
|---|
🛒 FLUX THEME STORE — GALERIA DE TEMAS CRIATIVOS
Escolha entre 10 designs profissionais 100% prontos e otimizados para o Flux VPN. Teste o funcionamento em tempo real com o simulador ou instale diretamente na sua conta com apenas 1 clique!
⚡ FLUX VPN — GUIA PARA CRIAR SEU PRÓPRIO TEMA HTML DO ZERO
Este documento é para quem quer CRIAR um tema novo e profissional para o Flux VPN do zero. Um tema do Flux é um único arquivo .HTML (com CSS e JS embutidos) que roda dentro de um WebView no app. O app injeta um objeto global chamado FluxAPI que permite ao seu tema conversar nativamente com o aplicativo.
🤖 COMO USAR ESTE GUIA COM UMA IA (ChatGPT, Gemini, Claude)
Envie este arquivo para a IA ou use diretamente o prompt modelo abaixo para gerar interfaces exclusivas:
Leia este guia e especificações da FluxAPI do Flux VPN. Crie um tema HTML completo para o Flux VPN com o estilo [descreva: cores vibrantes, dark mode, glassmorphism, layout, logo]. O tema deve ter: botão de conectar, seletor de servidor com categorias, campos de usuário/senha (e UUID para XRAY), tela de logs e menu com as ferramentas nativas. Siga a estrutura, os callbacks e o checklist do guia.
📌 PARTE 1 — CONCEITOS ESSENCIAIS
1.1 COMO O TEMA CONVERSA COM O APP
• HTML → App (Você chama funções): FluxAPI.start();
• App → HTML (Você define callbacks no window): window.onFluxStatusChange = function(s){...}
Nota: O app chama seus callbacks quando algo acontece. Seu tema NUNCA deve ficar consultando o app em loop (polling) — use sempre os callbacks.
1.2 OS 3 PILARES DE QUALQUER TEMA
<input oninput="FluxAPI.setUser(this.value)">
<input type="password" oninput="FluxAPI.setPass(this.value)">
Preencha os campos ao abrir com getUser(), getPass(), getUuid().
var cats = JSON.parse(FluxAPI.getCategoriesJson()); // Ao clicar no item: FluxAPI.selectConfig(String(cfg.id));
FluxAPI.start() / FluxAPI.stop()
window.onFluxStatusChange = function(state){...}
⭐ 1.3 REGRAS DE OURO (Evite os erros mais comuns)
getCategoriesJson() e getLogsJson() retornam STRING → SEMPRE use JSON.parse.onFluxConfigSelected(payload) → payload JÁ É OBJETO → NUNCA use JSON.parse.onFluxNewLogs(json) → chega STRING JSON → SEMPRE use JSON.parse.selectConfig sempre com String → FluxAPI.selectConfig(String(id)).start() → verifique FluxAPI.hasConfig().try/catch.onFluxStatusChange.<style>, JS no <script>, imagens via URL ou base64.1.4 O CICLO DE VIDA DA CONEXÃO & STATUS
Padrão Recomendado: Definir estados parado const IDLE = ['disconnected','auth_failed','no data'];. Se IDLE.includes(st) chame start(), senão chame stop().
1.5 SSH x XRAY & 1.6 SAFE-AREA FULLSCREEN
• Mode XRAY: Mostre APENAS campo UUID (setUuid). Detecte por String(cfg.mode).toUpperCase().includes('XRAY') ou payload.isXray.
• Credenciais Embutidas: Se FluxAPI.hasConfigCredentials() for true, não exija que o usuário digite usuário/senha.
• Safe Area (WebView Fullscreen): Use viewport-fit=cover no meta e no container principal: padding-top: calc(env(safe-area-inset-top, 0px) + 24px);
⚡ PARTE 2 — REFERÊNCIA COMPLETA DA FLUXAPI
Ações / Escrita (HTML → App)
FluxAPI.setUser(v)/setPass(v)/setUuid(v)FluxAPI.selectConfig(id)// String(id)FluxAPI.start()/stop()/update()FluxAPI.clearLogs()/clearApp()FluxAPI.openBatteryOptimization()FluxAPI.openApnSettings()/openNetworkSettings()FluxAPI.toggleHotspot()
Leitura (HTML ← App)
getUser()/getPass()/getUuid()getStatus()→ StringgetCategoriesJson()→ JSON.parse!getLogsJson()→ JSON.parse!getSelectedConfigId()/Name()/Mode()hasConfig()/hasConfigCredentials()getNetworkName()/getLocalIp()/isHotspotActive()
Callbacks (App → HTML em window)
window.onFluxStatusChange(state)window.onFluxCategoriesLoaded()window.onFluxConfigSelected(payload)window.onFluxNewLogs(json)window.onFluxLogsCleared()window.onFluxUpdateResult(config, theme)window.onFluxNetworkInfo(name, ip)window.onFluxError(msg)
📦 PARTE 3 — TEMPLATE INICIAL COMPLETO
Pronto para copiar, colar ou testar diretamente no simulador[chave] em qualquer campo de configuração[server_01] → sv0.meuservidor.com| ID | Key | Value | Actions |
|---|