admtracksteel/SteelBase

Fork 0

Files

admtracksteel e8972e7107 docs: implement Antigravity global rules

2026-04-03 21:11:04 +00:00

8.4 KiB

Raw Blame History

🔧 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:

<!-- 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:

/* 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`:

<!-- 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:

/* 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;
}

Adicione no menu lateral do `index.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`:

// 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`:

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:

<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:

.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:

// 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:

Botão Flutuante (FAB) - Para acesso rápido de qualquer lugar
Atalho de Teclado - Para usuários avançados
Badge de Status - Para feedback visual

Implementação Rápida:

<!-- 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>

/* 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:

Recarregar página
Clicar no botão 🗄️
Painel deve abrir
Testar atalho: Ctrl + Shift + A

Personalização

Mudar Ícone:

<!-- Opções de ícones -->
🗄️  <!-- Arquivo/Database -->
⚙️  <!-- Configurações -->
🔧  <!-- Ferramentas -->
📊  <!-- Estatísticas -->
🎛️  <!-- Controles -->

Mudar Posição do FAB:

/* Canto inferior esquerdo */
.fab-admin {
    bottom: 24px;
    left: 24px;
}

/* Canto superior direito */
.fab-admin {
    top: 24px;
    right: 24px;
}

Mudar Cores:

.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! 🎨

8.4 KiB Raw Blame History