305 lines
17 KiB
HTML
305 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="pt-BR">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>🏗️ AÇO CALC PRO v5.0 - Plataforma Técnica de Engenharia Estrutural</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<div class="header-content">
|
||
<div class="logo-section">
|
||
<div class="logo" id="appLogo">🏗️ AÇO CALC PRO</div>
|
||
<div class="subtitle" id="appSubtitle">Plataforma Técnica de Engenharia Estrutural v6.5 - Base de Materiais Integrada</div>
|
||
<span class="badge">PROFESSIONAL EDITION</span>
|
||
</div>
|
||
<div class="header-actions">
|
||
<button class="btn-icon" onclick="openManualUsuario()" title="Manual do Usuário">📖 Manual</button>
|
||
<button class="btn-icon" onclick="openHistoryModal()" title="Histórico">📋 Histórico</button>
|
||
<button class="btn-icon" onclick="openFavoritesModal()" title="Favoritos">⭐ Favoritos</button>
|
||
<button class="btn-icon" onclick="openAdminModal()" title="Admin" id="admin-toggle">⚙️ Admin</button>
|
||
<button class="btn-icon" onclick="toggleExpertMode()" title="Modo Expert" id="expert-toggle">🎯 Expert</button>
|
||
<button class="btn-icon" onclick="toggleTheme()" title="Alternar Tema" id="theme-toggle">🌙 Escuro</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<aside class="sidebar">
|
||
<div class="sidebar-tabs">
|
||
<button class="sidebar-tab active" onclick="switchSidebarTab(0)">📦 MATERIAIS</button>
|
||
<button class="sidebar-tab" onclick="switchSidebarTab(1)">🔗 CONEXÕES</button>
|
||
<button class="sidebar-tab" onclick="switchSidebarTab(2)">🔥 SOLDAGEM</button>
|
||
<button class="sidebar-tab" onclick="switchSidebarTab(3)">✅ ENSAIOS</button>
|
||
<button class="sidebar-tab" onclick="switchSidebarTab(4)">🎨 PINTURA</button>
|
||
<button class="sidebar-tab" onclick="switchSidebarTab(5)">💰 ORÇAMENTO</button>
|
||
</div>
|
||
|
||
<div class="sidebar-content active" id="sidebar-0">
|
||
<div class="sidebar-section">
|
||
<div class="sidebar-item" onclick="showSection('cev')" data-section="cev">
|
||
🔬 CEV Avançado (IIW + Pcm)
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'cev')">☆</button>
|
||
</div>
|
||
<div class="sidebar-item" onclick="showSection('seletor')" data-section="seletor">
|
||
🎯 Seletor de Aço Inteligente
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'seletor')">☆</button>
|
||
</div>
|
||
<div class="sidebar-item" onclick="showSection('equivalencias')" data-section="equivalencias">
|
||
📊 Equivalências Internacionais
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'equivalencias')">☆</button>
|
||
</div>
|
||
<div class="sidebar-item" onclick="showSection('comparativo')" data-section="comparativo">
|
||
📈 Comparativo de Aços
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'comparativo')">☆</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar-content" id="sidebar-1">
|
||
<div class="sidebar-section">
|
||
<div class="sidebar-item" onclick="showSection('parafusos')" data-section="parafusos">
|
||
🔩 Ligações Parafusadas
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'parafusos')">☆</button>
|
||
</div>
|
||
<div class="sidebar-item" onclick="showSection('layout')" data-section="layout">
|
||
🎯 Layout de Furação
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'layout')">☆</button>
|
||
</div>
|
||
<div class="sidebar-item" onclick="showSection('parafuso-vs-solda')" data-section="parafuso-vs-solda">
|
||
⚙️ Parafuso vs Solda
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'parafuso-vs-solda')">☆</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar-content" id="sidebar-2">
|
||
<div class="sidebar-section">
|
||
<div class="sidebar-item" onclick="showSection('preaquecimento')" data-section="preaquecimento">
|
||
🔥 Ferramentas de Soldagem
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'preaquecimento')">☆</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="sidebar-content" id="sidebar-3">
|
||
<div class="sidebar-section">
|
||
<div class="sidebar-item" onclick="showSection('dureza')" data-section="dureza">
|
||
🔨 Conversor de Dureza
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'dureza')">☆</button>
|
||
</div>
|
||
<div class="sidebar-item" onclick="showSection('charpy')" data-section="charpy">
|
||
📉 Análise de Charpy
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'charpy')">☆</button>
|
||
</div>
|
||
<div class="sidebar-item" onclick="showSection('certificado')" data-section="certificado">
|
||
📋 Checklist Certificado
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'certificado')">☆</button>
|
||
</div>
|
||
<div class="sidebar-item" onclick="showSection('ultrassom')" data-section="ultrassom">
|
||
🏥 Interpretação Ultrassom
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'ultrassom')">☆</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar-content" id="sidebar-4">
|
||
<div class="sidebar-section">
|
||
<div class="sidebar-item" onclick="showSection('area-pintura')" data-section="area-pintura">
|
||
📐 Cálculo de Área
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'area-pintura')">☆</button>
|
||
</div>
|
||
<div class="sidebar-item" onclick="showSection('consumo-tinta')" data-section="consumo-tinta">
|
||
🎯 Consumo de Tinta
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'consumo-tinta')">☆</button>
|
||
</div>
|
||
<div class="sidebar-item" onclick="showSection('galvanizacao')" data-section="galvanizacao">
|
||
🛡️ Galvanização
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'galvanizacao')">☆</button>
|
||
</div>
|
||
<div class="sidebar-item" onclick="showSection('custo-pintura')" data-section="custo-pintura">
|
||
💰 Custo Total
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'custo-pintura')">☆</button>
|
||
</div>
|
||
<div class="sidebar-item" onclick="showSection('secagem')" data-section="secagem">
|
||
⏱️ Tempo de Secagem
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'secagem')">☆</button>
|
||
</div>
|
||
<div class="sidebar-item" onclick="showSection('inspecao-pintura')" data-section="inspecao-pintura">
|
||
✔️ Inspeção de Qualidade
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'inspecao-pintura')">☆</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar-content" id="sidebar-5">
|
||
<div class="sidebar-section">
|
||
<div class="sidebar-item" onclick="showSection('orcamento')" data-section="orcamento">
|
||
💵 Orçamento Detalhado
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'orcamento')">☆</button>
|
||
</div>
|
||
<div class="sidebar-item" onclick="showSection('peso-rigging')" data-section="peso-rigging">
|
||
⚖️ Peso e Rigging
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'peso-rigging')">☆</button>
|
||
</div>
|
||
<div class="sidebar-item" onclick="showSection('referencia')" data-section="referencia">
|
||
📖 Referência Técnica
|
||
<button class="star-btn" onclick="toggleFavorite(event, 'referencia')">☆</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="main-content" id="main-content">
|
||
<!-- Content will be dynamically loaded here -->
|
||
</main>
|
||
</div>
|
||
|
||
<!-- History Modal -->
|
||
<div class="modal" id="history-modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<div class="modal-title">📋 Histórico de Cálculos</div>
|
||
<button class="close-btn" onclick="closeHistoryModal()">×</button>
|
||
</div>
|
||
<div id="history-list"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Favorites Modal -->
|
||
<div class="modal" id="favorites-modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<div class="modal-title">⭐ Favoritos</div>
|
||
<button class="close-btn" onclick="closeFavoritesModal()">×</button>
|
||
</div>
|
||
<div id="favorites-list"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Admin Modal -->
|
||
<div class="modal-admin" id="adminModal">
|
||
<div class="modal-admin-content">
|
||
<div class="modal-admin-header">
|
||
<h2>⚙️ Painel Administrativo</h2>
|
||
<button class="close-btn" onclick="closeAdminModal()">×</button>
|
||
</div>
|
||
<div class="modal-admin-body">
|
||
<div class="admin-section">
|
||
<h3>🎨 Customização de Branding</h3>
|
||
<div class="form-group">
|
||
<label class="form-label">Nome do Aplicativo</label>
|
||
<input type="text" class="form-control" id="adminAppName" value="AÇO CALC PRO" maxlength="30">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Subtítulo</label>
|
||
<input type="text" class="form-control" id="adminAppSubtitle" value="Plataforma Técnica com Base de Dados de Materiais Brasileiros" maxlength="100">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Texto do Rodapé</label>
|
||
<textarea class="form-control" id="adminFooterText" rows="2" maxlength="200">© 2025 AÇO CALC PRO v6.5 PROFESSIONAL EDITION - Plataforma Técnica com Base de Dados de Materiais Brasileiros</textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="admin-section">
|
||
<h3>🔧 Ferramentas Visíveis (Modo Simples)</h3>
|
||
<p class="admin-note">No Modo Expert, TODAS as ferramentas aparecem sempre.</p>
|
||
<div class="admin-tools-grid">
|
||
<label class="checkbox-item"><input type="checkbox" value="cev" checked> CEV Avançado</label>
|
||
<label class="checkbox-item"><input type="checkbox" value="seletor" checked> Seletor de Aço</label>
|
||
<label class="checkbox-item"><input type="checkbox" value="equivalencias"> Equivalências</label>
|
||
<label class="checkbox-item"><input type="checkbox" value="comparativo"> Comparativo</label>
|
||
<label class="checkbox-item"><input type="checkbox" value="parafusos" checked> Parafusados</label>
|
||
<label class="checkbox-item"><input type="checkbox" value="layout" checked> Layout Furação</label>
|
||
<label class="checkbox-item"><input type="checkbox" value="parafuso-vs-solda"> Parafuso vs Solda</label>
|
||
<label class="checkbox-item"><input type="checkbox" value="preaquecimento" checked> Pré-Aquecimento</label>
|
||
<label class="checkbox-item"><input type="checkbox" value="dureza" checked> Conversor Dureza</label>
|
||
<label class="checkbox-item"><input type="checkbox" value="charpy" checked> Análise Charpy</label>
|
||
<label class="checkbox-item"><input type="checkbox" value="certificado"> Checklist Certificado</label>
|
||
<label class="checkbox-item"><input type="checkbox" value="ultrassom"> Ultrassom</label>
|
||
<label class="checkbox-item"><input type="checkbox" value="area-pintura" checked> Área Pintura</label>
|
||
<label class="checkbox-item"><input type="checkbox" value="consumo-tinta" checked> Consumo Tinta</label>
|
||
<label class="checkbox-item"><input type="checkbox" value="galvanizacao"> Galvanização</label>
|
||
<label class="checkbox-item"><input type="checkbox" value="custo-pintura" checked> Custo Pintura</label>
|
||
<label class="checkbox-item"><input type="checkbox" value="orcamento" checked> Orçamento</label>
|
||
<label class="checkbox-item"><input type="checkbox" value="peso-rigging"> Peso & Rigging</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="admin-section">
|
||
<h3>⚙️ Preferências</h3>
|
||
<div class="form-group">
|
||
<label class="form-label">Tema Padrão</label>
|
||
<select class="form-control" id="adminThemeDefault">
|
||
<option value="escuro">Escuro</option>
|
||
<option value="claro">Claro</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Modo Padrão</label>
|
||
<select class="form-control" id="adminModeDefault">
|
||
<option value="simples">Simples</option>
|
||
<option value="expert">Expert</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-admin-footer">
|
||
<button class="btn btn-secondary" onclick="resetAdminDefaults()">🔄 Restaurar Padrões</button>
|
||
<button class="btn btn-primary" onclick="saveAdminConfig()">💾 Salvar Alterações</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Help Modal -->
|
||
<div class="modal-help" id="modalAjuda">
|
||
<div class="modal-help-content">
|
||
<div class="modal-help-header">
|
||
<h2 id="ajudaTitulo">📚 Ajuda</h2>
|
||
<button class="close-btn" onclick="closeAjudaModal()">×</button>
|
||
</div>
|
||
<div class="modal-help-tabs">
|
||
<button class="help-tab-btn active" onclick="switchHelpTab(0)">📖 Explicação</button>
|
||
<button class="help-tab-btn" onclick="switchHelpTab(1)">🔧 Campos</button>
|
||
<button class="help-tab-btn" onclick="switchHelpTab(2)">📊 Resultados</button>
|
||
<button class="help-tab-btn" onclick="switchHelpTab(3)">📚 Referências</button>
|
||
</div>
|
||
<div class="modal-help-body">
|
||
<div class="help-tab-content active" id="help-tab-0"></div>
|
||
<div class="help-tab-content" id="help-tab-1"></div>
|
||
<div class="help-tab-content" id="help-tab-2"></div>
|
||
<div class="help-tab-content" id="help-tab-3"></div>
|
||
</div>
|
||
<div class="modal-help-footer">
|
||
<button class="btn btn-primary" onclick="abrirManualRelacionado()">📖 Ver no Manual do Usuário</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Manual Usuario Modal -->
|
||
<div class="modal-manual" id="modalManual">
|
||
<div class="modal-manual-container">
|
||
<div class="manual-sidebar">
|
||
<div class="manual-search">
|
||
<input type="text" id="manualSearch" placeholder="🔍 Buscar..." oninput="buscarNoManual()">
|
||
</div>
|
||
<nav class="manual-nav" id="manualNav"></nav>
|
||
</div>
|
||
<div class="manual-content">
|
||
<button class="close-btn" onclick="closeManualModal()" style="position: absolute; top: 20px; right: 20px;">×</button>
|
||
<div id="manualConteudo"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer" id="appFooter">
|
||
<p>© 2025 AÇO CALC PRO v6.5 PROFESSIONAL EDITION - Plataforma Técnica com Base de Dados de Materiais Brasileiros</p>
|
||
</div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html> |