Fix script paths and move assets to public/ folder for Vite build compatibility
This commit is contained in:
Marcos
388
public/docs-historicos/ADICIONAR-BOTAO-ADMIN.md
Normal file
388
public/docs-historicos/ADICIONAR-BOTAO-ADMIN.md
Normal file
@@ -0,0 +1,388 @@
|
||||
# 🔧 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! 🎨**
|
||||
Reference in New Issue
Block a user