4.7 KiB
4.7 KiB
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:
- 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. - 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. - 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:
</> Logs: Visualizador de auditoria em tempo real, monitorando requisições locais CCSP/1 e eventos criptográficos.⚙ Configurações: Gerenciador de origens web autorizadas, revogação de acessos e opções de PIN.💻 Tutorial: Guia passo a passo interativo de uso do assinador e integração web.🗂 Certificados: Lista de certificados ICP-Brasil disponíveis (Windows Certificate Store, A1 e A3) e ferramenta para importação de certificados A1 (.pfx/.p12).ℹ 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
.p7scorrespondentes). - 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.