Painel de Personalização
🌙
Dashboard
Produtos ▼
Listar Produtos
Adicionar Produto
Relatórios
Categorias ▼
Listar Categorias
Adicionar Categoria
Configurações ▼
Configurações Gerais
Usuários
Sair
Painel de Personalização
Erro ao conectar ao banco: could not find driver
Histórico de Alterações
Banco de dados não disponível.
⚙️
Geral
🔒
Segurança
🔔
Notificações
🕵️♂️
Privacidade
...existing code...
Senha de Administrador
Salvar
E-mail para Notificações
Salvar
Política de Privacidade
Salvar
Nome
Status
Valor
Produto A
Ativo
R$ 99,90
Produto B
Inativo
R$ 59,90
Lista de itens
Item 1
Item 2
Item 3
Lista com ícones
✔
Finalizado
⚠
Pendente
✖
Cancelado
Exemplos de tabela, lista e lista com ícones usando o tema.
Badges/Tags
Ativo
Status
Categoria
Categoria
Tag
Tag
Exemplos de badges/tags com as cores do tema.
Alertas
✔ Sucesso! Sua ação foi realizada com sucesso.
Alerta Success
✖ Erro! Algo deu errado.
Alerta Danger
⚠ Atenção! Verifique os dados informados.
Alerta Warning
Visualização dos alertas com as cores do tema.
Cores
Botões
Gradientes
Logomarca
Mini Dashboard
Mini Produto
Resumo do Site
Pedidos
128
Clientes
54
Faturamento
R$ 12.300,00
Mini dashboard para visualizar o tema aplicado.
Produto Exemplo
R$ 99,90
Descrição breve do produto para testar contraste e cores do tema.
Comprar
Mini produto para visualizar o tema aplicado.
Aplicar e Visualizar
Editar
Restaurar última versão
Cor de fundo do header:
Cor do topo do site
Cor de fundo do footer:
Cor do rodapé do site
Padding dos cards:
CSS padding dos cards
Padding dos botões:
CSS padding dos botões
Padding dos inputs:
CSS padding dos campos de texto
Borda/Sombra dos cards:
Digite o valor CSS desejado para borda e sombra
Primária:
#0051ff
Primária Escura:
#1e40af
Secundária:
#64748b
Fundo:
#f3f4f6
Texto:
#000000
Card:
#ffffff
Borda Card:
#e5e7eb
Texto Card:
#000000
Erro/Alerta:
#ff0000
Sucesso:
#22c55e
Aviso:
#facc15
Fonte personalizada:
Roboto
Open Sans
Montserrat
Lato
Poppins
Nunito
Inter
Oswald
Merriweather
Quicksand
Sugestão: escolha uma fonte do Google Fonts
Botão Primário:
#2563eb
Botão Secundário:
#64748b
Botão Sucesso:
#22c55e
Botão Aviso:
#facc15
Botão Erro:
#ef4444
Texto Botão:
#000000
Gradiente Tema Início:
#0051ff
Gradiente Tema Fim:
#ec4899
Gradiente Botão Início:
#0051ff
Gradiente Botão Fim:
#ec4899
Logomarca:
Favicon:
Nenhum logo enviado
Pré-visualização centralizada. O logo e favicon serão exibidos assim no site.
Preview de Gradiente
Botão com Gradiente
// Animação suave para gradientes document.getElementById('gradient_start').addEventListener('input', updateGradientPreview); document.getElementById('gradient_end').addEventListener('input', updateGradientPreview); document.getElementById('btn_gradient_start').addEventListener('input', updateBtnGradientPreview); document.getElementById('btn_gradient_end').addEventListener('input', updateBtnGradientPreview); document.getElementById('btn_text').addEventListener('input', updateBtnGradientPreview); function updateGradientPreview() { var start = document.getElementById('gradient_start').value; var end = document.getElementById('gradient_end').value; var el = document.getElementById('gradient-preview'); el.style.background = 'linear-gradient(90deg,'+start+','+end+')'; } function updateBtnGradientPreview() { var start = document.getElementById('btn_gradient_start').value; var end = document.getElementById('btn_gradient_end').value; var text = document.getElementById('btn_text').value; var el = document.getElementById('btn-gradient-preview'); el.style.background = 'linear-gradient(90deg,'+start+','+end+')'; el.style.color = text; }
Pré-visualização do Tema
Claro
Escuro
Card Exemplo
Texto de exemplo usando a cor
do tema
.
Botão Principal
Botão Secundário
Salvar Tema
Restaurar Cores Padrão
Salvar Rascunho
Exportar JSON
Importar JSON
Pré-visualização do Botão
Exemplo de Botão
O botão acima mostra como ficará a cor principal do tema.
Salve para aplicar em todo o site.
🏠 Início
❤️ Favoritos
🛒 Carrinho
👤 Minha Conta
Olá, Visitante
🔑 Entrar
Todas as categorias
mdf
Buscar
5 produtos encontrados
sdfsdf
✓ Em estoque