76 lines
4.7 KiB
Markdown
76 lines
4.7 KiB
Markdown
# Layout e Interface Gráfica — CyberCore Signer
|
||
|
||
O **CyberCore Signer** adota uma interface gráfica profissional e moderna, com foco em usabilidade, segurança visual e conformidade rigorosa com os padrões de acessibilidade WCAG 2.1 (AA).
|
||
|
||
---
|
||
|
||
## 1. Identidade Visual e Filosofia de Design
|
||
|
||
A interface foi estruturada com foco na clareza operacional e consistência ergonômica:
|
||
1. **Identidade CyberCore:** Logotipo central em cristal e escudo criptográfico vetorial (`SvgIcons`), subtítulo "Agente Criptográfico Local • ICP-Brasil" e indicador de segurança em tempo real.
|
||
2. **Badge de Status Ativo:** Exibe o status do agente e da porta local (`● Agente Ativo • 127.0.0.1:21325`) com indicação em verde esmeralda.
|
||
3. **Tema Único Padronizado:** Sistema visual unificado baseado em tokens CSS declarados em `.root`, garantindo contraste nítido, tipografia escalável e ausência de inconsistências de renderização.
|
||
|
||
---
|
||
|
||
## 2. Paleta de Cores e Tokens Semânticos
|
||
|
||
| Componente / Token | Valor Canônico | Descrição |
|
||
|---|---|---|
|
||
| **Fundo da Janela** (`-fx-color-background`) | `#f1f5f9` | Tom slate neutro e suave para leitura prolongada |
|
||
| **Superfície de Cartões** (`-fx-color-surface`) | `#ffffff` | Branco puro para cartões, caixas e painéis |
|
||
| **Bordas Principais** (`-fx-color-border`) | `#cbd5e1` | Linhas de divisão estrutural com contraste seguro |
|
||
| **Bordas Suaves** (`-fx-color-border-subtle`) | `#e2e8f0` | Divisórias e contornos secundários |
|
||
| **Texto Primário** (`-fx-color-text`) | `#0f172a` | Texto de alto contraste (WCAG ratio ~ 15.8:1) |
|
||
| **Texto Atenuado** (`-fx-color-text-muted`) | `#475569` | Rótulos secundários e metadados (WCAG ratio ~ 6.8:1) |
|
||
| **Cor Primária** (`-fx-color-primary`) | `#0284c7` | Azul característico da marca CyberCore para ações padrão |
|
||
| **Sucesso** (`-fx-color-success`) | `#16a34a` | Indicadores de assinaturas válidas e status operacional |
|
||
| **Aviso** (`-fx-color-warning`) | `#d97706` | Alertas de atenção e certificados próximos ao vencimento |
|
||
| **Erro** (`-fx-color-error`) | `#dc2626` | Notificações de erro ou falha criptográfica |
|
||
|
||
---
|
||
|
||
## 3. Grade Central de Ações (Hub 3x2)
|
||
|
||
A interface principal organiza as operações em 6 cartões modernos com cantos arredondados (8px), sombras suaves e ícones vetoriais SVG nítidos:
|
||
|
||
| Posição | Operação | Descrição |
|
||
|---|---|---|
|
||
| (0, 0) | **Assinar PDF** | Assinatura digital de documentos PDF (PAdES) com visualização e posicionamento interativo de selos. |
|
||
| (1, 0) | **Assinar XML** | Assinatura de documentos XML (estruturas fiscais, NF-e, XMLDSig). |
|
||
| (2, 0) | **Assinatura Atachada** | Assinatura embutida/anexada ao documento original (CAdES enveloped). |
|
||
| (0, 1) | **Gerenciar Selos** | Abertura do Designer e Gerenciador de Selos Digitais visuais para PAdES. |
|
||
| (1, 1) | **Validar Assinatura** | Verificação de integridade criptográfica e conformidade do certificado digital. |
|
||
| (2, 1) | **Sair do Agente** | Encerramento seguro da sessão do agente. |
|
||
|
||
---
|
||
|
||
## 4. Painel Lateral de Utilitários
|
||
|
||
Na coluna lateral direita, o usuário dispõe de atalhos rápidos para operações do sistema:
|
||
|
||
1. **`</> Logs`:** Visualizador de auditoria em tempo real, monitorando requisições locais CCSP/1 e eventos criptográficos.
|
||
2. **`⚙ Configurações`:** Gerenciador de origens web autorizadas, revogação de acessos e opções de PIN.
|
||
3. **`💻 Tutorial`:** Guia passo a passo interativo de uso do assinador e integração web.
|
||
4. **`🗂 Certificados`:** Lista de certificados ICP-Brasil disponíveis (Windows Certificate Store, A1 e A3) e ferramenta para importação de certificados A1 (`.pfx` / `.p12`).
|
||
5. **`ℹ Sobre`:** Informações de versão, engine JCA/JCE e garantias de privacidade local.
|
||
|
||
---
|
||
|
||
## 5. Assinatura Digital em Lote (`BatchSigningDialog`)
|
||
|
||
A funcionalidade de assinatura em lote permite:
|
||
- Seleção de múltiplos arquivos simultâneos via diálogo de arquivos ou pastas.
|
||
- Visualização de tabela com nome, tamanho e status de cada item em tempo real.
|
||
- Seleção do certificado digital ICP-Brasil desejado (com exibição de titular, CPF/CNPJ, tipo A1/A3 e validade).
|
||
- Escolha da pasta de destino para os arquivos assinados (salvando arquivos `.p7s` correspondentes).
|
||
- Execução assíncrona em thread isolada para manter a interface responsiva durante todo o lote.
|
||
|
||
---
|
||
|
||
## 6. Ícones Vetoriais SVG Nativos (`SvgIcons`)
|
||
|
||
Todos os ícones e o logotipo central em cristal foram construídos via `SVGPath` e primitivas vetoriais JavaFX nativas:
|
||
- **Resolução Infinita:** Perfeita nitidez em monitores Full HD, 2K, 4K e configurações de escala de DPI do Windows (100%, 125%, 150%, 200%).
|
||
- **Sem Dependência de Imagens Rasterizadas:** Sem risco de imagens ausentes ou corrompidas no runtime empacotado.
|