389 lines
8.4 KiB
Markdown
389 lines
8.4 KiB
Markdown
# 🔧 Como Adicionar Botão de Admin na Interface
|
|
|
|
## Opção 1: Botão no Header (Recomendado)
|
|
|
|
### Localização: Próximo ao botão de tema
|
|
|
|
Adicione no `index.html`, dentro do header, próximo ao botão de tema:
|
|
|
|
```html
|
|
<!-- Localizar esta seção no index.html -->
|
|
<div class="header-actions">
|
|
<button class="theme-toggle" onclick="toggleTheme()" title="Alternar tema">
|
|
🌙
|
|
</button>
|
|
|
|
<!-- ADICIONAR ESTE BOTÃO -->
|
|
<button class="admin-btn" onclick="abrirPainelDados()" title="Administração de Dados">
|
|
🗄️
|
|
</button>
|
|
</div>
|
|
```
|
|
|
|
### CSS para o botão:
|
|
|
|
Adicione no `style.css`:
|
|
|
|
```css
|
|
/* Botão de Administração */
|
|
.admin-btn {
|
|
background: var(--color-primary);
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.admin-btn:hover {
|
|
background: var(--color-primary-dark);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.admin-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Opção 2: Botão Flutuante (FAB - Floating Action Button)
|
|
|
|
### Adicione no final do `<body>` no `index.html`:
|
|
|
|
```html
|
|
<!-- Botão Flutuante de Admin -->
|
|
<button class="fab-admin" onclick="abrirPainelDados()" title="Administração de Dados">
|
|
🗄️
|
|
</button>
|
|
```
|
|
|
|
### CSS para botão flutuante:
|
|
|
|
Adicione no `style.css`:
|
|
|
|
```css
|
|
/* Botão Flutuante de Admin */
|
|
.fab-admin {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
right: 24px;
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 50%;
|
|
background: var(--color-primary);
|
|
color: white;
|
|
border: none;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
transition: all 0.3s ease;
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.fab-admin:hover {
|
|
background: var(--color-primary-dark);
|
|
transform: scale(1.1);
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.fab-admin:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* Animação de pulso para chamar atenção */
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
.fab-admin.pulse {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Opção 3: Item no Menu Lateral
|
|
|
|
### Adicione no menu lateral do `index.html`:
|
|
|
|
```html
|
|
<!-- Localizar a seção do menu lateral -->
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-section-title">⚙️ SISTEMA</div>
|
|
<div class="sidebar-item" onclick="abrirPainelDados()">
|
|
<span class="sidebar-icon">🗄️</span>
|
|
<span class="sidebar-text">Administração de Dados</span>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
---
|
|
|
|
## Opção 4: Atalho de Teclado
|
|
|
|
### Adicione no final do `app.js` ou `js/database/admin-panel.js`:
|
|
|
|
```javascript
|
|
// Atalho de teclado: Ctrl + Shift + A
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.ctrlKey && e.shiftKey && e.key === 'A') {
|
|
e.preventDefault();
|
|
abrirPainelDados();
|
|
}
|
|
});
|
|
|
|
console.log('💡 Dica: Pressione Ctrl + Shift + A para abrir o painel de administração');
|
|
```
|
|
|
|
---
|
|
|
|
## Opção 5: Botão no Catálogo de Perfis
|
|
|
|
### Adicione no header do catálogo em `js/sections/perfis-catalog.js`:
|
|
|
|
```javascript
|
|
function getCantoneirasContent() {
|
|
return `
|
|
<div class="section-header">
|
|
<div class="section-title">📐 Cantoneiras - Catálogo Completo Brasil</div>
|
|
<div class="section-description">Perfis de abas iguais laminados a quente - 39 modelos disponíveis</div>
|
|
|
|
<!-- ADICIONAR ESTE BOTÃO -->
|
|
<button class="btn btn-info" onclick="abrirPainelDados()" style="margin-top: 12px;">
|
|
🗄️ Administração de Dados
|
|
</button>
|
|
</div>
|
|
...
|
|
`;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Opção 6: Badge de Status no Header
|
|
|
|
### Mostra status do cache visualmente
|
|
|
|
Adicione no `index.html`:
|
|
|
|
```html
|
|
<div class="header-actions">
|
|
<div class="cache-status" onclick="abrirPainelDados()" title="Clique para administrar">
|
|
<span id="cache-status-icon">⏳</span>
|
|
<span id="cache-status-text">Carregando...</span>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### CSS:
|
|
|
|
```css
|
|
.cache-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
background: var(--color-bg-2);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.cache-status:hover {
|
|
background: var(--color-bg-3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
#cache-status-icon {
|
|
font-size: 18px;
|
|
}
|
|
|
|
#cache-status-text {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
```
|
|
|
|
### JavaScript para atualizar status:
|
|
|
|
Adicione no `js/database/data-manager.js` após inicialização:
|
|
|
|
```javascript
|
|
// Atualizar badge de status
|
|
function atualizarBadgeStatus() {
|
|
const icon = document.getElementById('cache-status-icon');
|
|
const text = document.getElementById('cache-status-text');
|
|
|
|
if (!icon || !text) return;
|
|
|
|
const stats = window.dataManager.getCacheStats();
|
|
|
|
if (stats.hasCache) {
|
|
icon.textContent = '✅';
|
|
text.textContent = 'Cache Ativo';
|
|
icon.parentElement.style.background = 'var(--color-success-bg)';
|
|
} else {
|
|
icon.textContent = '❌';
|
|
text.textContent = 'Sem Cache';
|
|
icon.parentElement.style.background = 'var(--color-error-bg)';
|
|
}
|
|
}
|
|
|
|
// Atualizar a cada 5 segundos
|
|
setInterval(atualizarBadgeStatus, 5000);
|
|
atualizarBadgeStatus(); // Primeira atualização
|
|
```
|
|
|
|
---
|
|
|
|
## Recomendação Final
|
|
|
|
### Combinação Ideal:
|
|
|
|
1. **Botão Flutuante (FAB)** - Para acesso rápido de qualquer lugar
|
|
2. **Atalho de Teclado** - Para usuários avançados
|
|
3. **Badge de Status** - Para feedback visual
|
|
|
|
### Implementação Rápida:
|
|
|
|
```html
|
|
<!-- No final do <body> do index.html -->
|
|
|
|
<!-- Botão Flutuante -->
|
|
<button class="fab-admin" onclick="abrirPainelDados()" title="Administração de Dados (Ctrl+Shift+A)">
|
|
🗄️
|
|
</button>
|
|
|
|
<!-- Script de atalho -->
|
|
<script>
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.ctrlKey && e.shiftKey && e.key === 'A') {
|
|
e.preventDefault();
|
|
abrirPainelDados();
|
|
}
|
|
});
|
|
</script>
|
|
```
|
|
|
|
```css
|
|
/* No style.css */
|
|
|
|
.fab-admin {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
right: 24px;
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
|
|
color: white;
|
|
border: none;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
transition: all 0.3s ease;
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.fab-admin:hover {
|
|
transform: scale(1.1) rotate(15deg);
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.fab-admin:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* Tooltip */
|
|
.fab-admin::after {
|
|
content: attr(title);
|
|
position: absolute;
|
|
right: 70px;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
color: white;
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.fab-admin:hover::after {
|
|
opacity: 1;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Teste Rápido
|
|
|
|
Após adicionar o botão:
|
|
|
|
1. Recarregar página
|
|
2. Clicar no botão 🗄️
|
|
3. Painel deve abrir
|
|
4. Testar atalho: `Ctrl + Shift + A`
|
|
|
|
---
|
|
|
|
## Personalização
|
|
|
|
### Mudar Ícone:
|
|
```html
|
|
<!-- Opções de ícones -->
|
|
🗄️ <!-- Arquivo/Database -->
|
|
⚙️ <!-- Configurações -->
|
|
🔧 <!-- Ferramentas -->
|
|
📊 <!-- Estatísticas -->
|
|
🎛️ <!-- Controles -->
|
|
```
|
|
|
|
### Mudar Posição do FAB:
|
|
```css
|
|
/* Canto inferior esquerdo */
|
|
.fab-admin {
|
|
bottom: 24px;
|
|
left: 24px;
|
|
}
|
|
|
|
/* Canto superior direito */
|
|
.fab-admin {
|
|
top: 24px;
|
|
right: 24px;
|
|
}
|
|
```
|
|
|
|
### Mudar Cores:
|
|
```css
|
|
.fab-admin {
|
|
background: #ff6b6b; /* Vermelho */
|
|
background: #4ecdc4; /* Azul-verde */
|
|
background: #ffe66d; /* Amarelo */
|
|
background: #a8e6cf; /* Verde claro */
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
**Escolha a opção que melhor se adequa ao seu design! 🎨**
|