// Application State const state = { currentTemplate: 'cover', settings: { primaryColor: '#1a365d', secondaryColor: '#2b6cb0', projectTitle: 'BUZIOS 7 PRODUCTION SYSTEM DEVELOPMENT', projectSubtitle: 'AR HEAD FABRICATION LONG', clientName: 'SAIPEM', documentNumber: 'DB-B97-01_S1_VENDOR_DATABOOK', contractNumber: 'OC 1472739', supplierName: 'ENGEMETAL', language: 'both', date: '2024' }, indexData: [ { number: '1', title_pt: 'Identificação', title_en: 'Identification', level: 1, page: '1' }, { number: '2', title_pt: 'Materiais', title_en: 'Materials', level: 1, page: '5' }, { number: '2.1', title_pt: 'Certificados das matérias-primas', title_en: 'Raw materials certificates', level: 2, page: '6' }, { number: '2.2', title_pt: 'Consumíveis de soldagem', title_en: 'Welding consumables', level: 2, page: '15' }, { number: '3', title_pt: 'Procedimentos de Soldagem', title_en: 'Welding Procedures', level: 1, page: '20' }, { number: '3.1', title_pt: 'Especificação do Procedimento de Soldagem (EPS)', title_en: 'Welding Procedure Specification (WPS)', level: 2, page: '21' }, { number: '3.2', title_pt: 'Registros de Qualificação (RQPS)', title_en: 'Procedure Qualification Records (WPQR)', level: 2, page: '35' }, { number: '3.3', title_pt: 'Registros de Soldadores (RQS)', title_en: 'Welder Qualification Records (WQR)', level: 2, page: '50' }, { number: '4', title_pt: 'Inspeção e Testes', title_en: 'Inspection and Testing', level: 1, page: '65' }, { number: '4.1', title_pt: 'Plano de Inspeção e Testes (PIT)', title_en: 'Inspection and Testing Plan (ITP)', level: 2, page: '66' }, { number: '4.2', title_pt: 'Ensaios Não Destrutivos (NDT)', title_en: 'Non-Destructive Testing (NDT)', level: 2, page: '75' }, { number: '4.3', title_pt: 'Relatórios de Inspeção Dimensional', title_en: 'Dimensional Inspection Reports', level: 2, page: '90' }, { number: '4.4', title_pt: 'Relatórios de Inspeção de Pintura', title_en: 'Painting Inspection Reports', level: 2, page: '105' }, { number: '8', title_pt: 'Certificados de Conformidade do Produto', title_en: 'Product Conformity Certificates', level: 1, page: '120' }, { number: '8.1', title_pt: 'Inspection Release Notice (IRN)', title_en: 'Inspection Release Notice (IRN)', level: 2, page: '121' } ], sectionIcons: { '1': '📋', '2': '🔩', '3': '⚡', '4': '🔍', '8': '✅' } }; // Template Generators const templates = { cover: () => `
Logo Cliente

${state.settings.projectTitle}

${state.settings.projectSubtitle}

${state.settings.documentNumber}
Contrato: ${state.settings.contractNumber}
Cliente: ${state.settings.clientName}
${state.settings.date}
Logo ${state.settings.supplierName}
`, index: () => { const renderIndexItems = () => { return state.indexData.map(item => { const titleText = state.settings.language === 'en' ? item.title_en : state.settings.language === 'pt' ? item.title_pt : `${item.title_pt} / ${item.title_en}`; return `
  • ${item.number} ${titleText} ${item.page}
    • `; }).join(''); }; return `

    ÍNDICE / TABLE OF CONTENTS

    `; }, 'divider-minimal': () => { const sectionNumber = '2'; const titlePt = 'Materiais'; const titleEn = 'Materials'; const icon = state.sectionIcons[sectionNumber] || '📑'; const title = state.settings.language === 'en' ? titleEn : state.settings.language === 'pt' ? titlePt : titlePt; const subtitle = state.settings.language === 'both' ? titleEn : ''; return `
    ${sectionNumber}
    ${icon} Seção ${sectionNumber}

    ${title}

    ${subtitle ? `

    ${subtitle}

    ` : ''}
    `; }, 'divider-lateral': () => { const sectionNumber = '3'; const titlePt = 'Procedimentos de Soldagem'; const titleEn = 'Welding Procedures'; const title = state.settings.language === 'en' ? titleEn : state.settings.language === 'pt' ? titlePt : titlePt; const subtitle = state.settings.language === 'both' ? titleEn : ''; return `
    ${sectionNumber}

    ${title}

    ${subtitle ? `

    ${subtitle}

    ` : ''}
    Projeto: ${state.settings.projectTitle}
    Documento: ${state.settings.documentNumber}
    Cliente: ${state.settings.clientName}
    `; }, 'divider-corporate': () => { const sectionNumber = '4'; const titlePt = 'Inspeção e Testes'; const titleEn = 'Inspection and Testing'; const icon = state.sectionIcons[sectionNumber] || '📑'; const title = state.settings.language === 'en' ? titleEn : state.settings.language === 'pt' ? titlePt : titlePt; return `
    ${icon} ${sectionNumber}

    ${title}

    Projeto: ${state.settings.projectTitle.substring(0, 30)}...
    Cliente: ${state.settings.clientName}
    Contrato: ${state.settings.contractNumber}
    Documento: ${state.settings.documentNumber}
    `; }, 'headers-footers': () => `

    Cabeçalhos e Rodapés

    Cabeçalho - Opção 1
    ${state.settings.projectTitle.substring(0, 40)}...
    ${state.settings.documentNumber}
    Cabeçalho - Opção 2
    ${state.settings.clientName} - ${state.settings.projectTitle.substring(0, 35)}...
    ${state.settings.documentNumber}
    Rodapé - Opção 1
    Rev. 01 | ${state.settings.date}
    45
    ${state.settings.supplierName}
    Rodapé - Opção 2
    ${state.settings.documentNumber}
    12
    Data: ${state.settings.date}
    Rodapé - Opção 3
    ${state.settings.clientName} ${state.settings.contractNumber}
    8
    ${state.settings.supplierName}
    ${state.settings.date}
    `, 'style-guide': () => `

    Guia de Estilo - Databook

    Paleta de Cores

    Primária
    ${state.settings.primaryColor}
    Secundária
    ${state.settings.secondaryColor}
    Accent
    #4299e1
    Cinza Escuro
    #2d3748
    Cinza Médio
    #718096
    Cinza Claro
    #e2e8f0

    Tipografia

    Título Principal (H1) - 60px Bold

    Título Principal

    Subtítulo (H2) - 36px Regular

    Subtítulo do Documento

    Seção (H3) - 24px Bold

    Título de Seção

    Corpo de Texto - 14px Regular

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Texto Secundário - 12px Regular

    Texto secundário ou informações auxiliares

    Espaçamentos

    8px - XS
    16px - SM
    24px - MD
    32px - LG
    48px - XL

    Elementos

    Caixa de Informação
    Utilizada para destacar informações importantes no documento.
    ` }; // DOM Elements const navItems = document.querySelectorAll('.nav-item'); const previewContainer = document.getElementById('previewContainer'); const exportBtn = document.getElementById('exportBtn'); const exportModal = document.getElementById('exportModal'); const closeModal = document.getElementById('closeModal'); const closeModalBtn = document.getElementById('closeModalBtn'); const copyHtmlBtn = document.getElementById('copyHtmlBtn'); const applyBtn = document.getElementById('applyBtn'); const resetBtn = document.getElementById('resetBtn'); // Form inputs const primaryColorInput = document.getElementById('primaryColor'); const secondaryColorInput = document.getElementById('secondaryColor'); const projectTitleInput = document.getElementById('projectTitle'); const projectSubtitleInput = document.getElementById('projectSubtitle'); const clientNameInput = document.getElementById('clientName'); const documentNumberInput = document.getElementById('documentNumber'); const contractNumberInput = document.getElementById('contractNumber'); const supplierNameInput = document.getElementById('supplierName'); const languageSelect = document.getElementById('language'); // Functions function renderTemplate(templateName) { if (templates[templateName]) { previewContainer.innerHTML = templates[templateName](); updateCSSVariables(); } } function updateCSSVariables() { document.documentElement.style.setProperty('--primary-color', state.settings.primaryColor); document.documentElement.style.setProperty('--secondary-color', state.settings.secondaryColor); } function updateColorPreviews() { document.getElementById('primaryColorBox').style.backgroundColor = state.settings.primaryColor; document.getElementById('primaryColorCode').textContent = state.settings.primaryColor; document.getElementById('secondaryColorBox').style.backgroundColor = state.settings.secondaryColor; document.getElementById('secondaryColorCode').textContent = state.settings.secondaryColor; } function applySettings() { state.settings.primaryColor = primaryColorInput.value; state.settings.secondaryColor = secondaryColorInput.value; state.settings.projectTitle = projectTitleInput.value; state.settings.projectSubtitle = projectSubtitleInput.value; state.settings.clientName = clientNameInput.value; state.settings.documentNumber = documentNumberInput.value; state.settings.contractNumber = contractNumberInput.value; state.settings.supplierName = supplierNameInput.value; state.settings.language = languageSelect.value; updateColorPreviews(); renderTemplate(state.currentTemplate); } function resetSettings() { state.settings = { primaryColor: '#1a365d', secondaryColor: '#2b6cb0', projectTitle: 'BUZIOS 7 PRODUCTION SYSTEM DEVELOPMENT', projectSubtitle: 'AR HEAD FABRICATION LONG', clientName: 'SAIPEM', documentNumber: 'DB-B97-01_S1_VENDOR_DATABOOK', contractNumber: 'OC 1472739', supplierName: 'ENGEMETAL', language: 'both', date: '2024' }; primaryColorInput.value = state.settings.primaryColor; secondaryColorInput.value = state.settings.secondaryColor; projectTitleInput.value = state.settings.projectTitle; projectSubtitleInput.value = state.settings.projectSubtitle; clientNameInput.value = state.settings.clientName; documentNumberInput.value = state.settings.documentNumber; contractNumberInput.value = state.settings.contractNumber; supplierNameInput.value = state.settings.supplierName; languageSelect.value = state.settings.language; updateColorPreviews(); renderTemplate(state.currentTemplate); } function copyHTMLToClipboard() { const templateContent = previewContainer.innerHTML; const fullHTML = ` Template Databook ${templateContent} `; navigator.clipboard.writeText(fullHTML).then(() => { const originalText = copyHtmlBtn.textContent; copyHtmlBtn.textContent = '✓ Copiado!'; copyHtmlBtn.style.backgroundColor = '#48bb78'; setTimeout(() => { copyHtmlBtn.textContent = originalText; copyHtmlBtn.style.backgroundColor = ''; }, 2000); }).catch(err => { alert('Erro ao copiar: ' + err); }); } // Event Listeners navItems.forEach(item => { item.addEventListener('click', (e) => { const templateName = item.getAttribute('data-template'); if (templateName) { // Update active state navItems.forEach(nav => nav.classList.remove('active')); item.classList.add('active'); // Render template state.currentTemplate = templateName; renderTemplate(templateName); } }); }); exportBtn.addEventListener('click', () => { exportModal.classList.add('active'); }); closeModal.addEventListener('click', () => { exportModal.classList.remove('active'); }); closeModalBtn.addEventListener('click', () => { exportModal.classList.remove('active'); }); exportModal.addEventListener('click', (e) => { if (e.target === exportModal) { exportModal.classList.remove('active'); } }); applyBtn.addEventListener('click', applySettings); resetBtn.addEventListener('click', resetSettings); copyHtmlBtn.addEventListener('click', copyHTMLToClipboard); // Real-time color preview updates primaryColorInput.addEventListener('input', (e) => { document.getElementById('primaryColorBox').style.backgroundColor = e.target.value; document.getElementById('primaryColorCode').textContent = e.target.value; }); secondaryColorInput.addEventListener('input', (e) => { document.getElementById('secondaryColorBox').style.backgroundColor = e.target.value; document.getElementById('secondaryColorCode').textContent = e.target.value; }); // Initialize renderTemplate('cover'); updateColorPreviews();