512 lines
24 KiB
JavaScript
512 lines
24 KiB
JavaScript
// 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: () => `
|
|
<div class="template-page cover-template">
|
|
<div class="cover-logo-top">Logo Cliente</div>
|
|
<div class="cover-content">
|
|
<h1 class="cover-title">${state.settings.projectTitle}</h1>
|
|
<h2 class="cover-subtitle">${state.settings.projectSubtitle}</h2>
|
|
<div class="cover-divider"></div>
|
|
<div class="cover-document-info">
|
|
<div class="cover-document-number">${state.settings.documentNumber}</div>
|
|
<div class="cover-contract">Contrato: ${state.settings.contractNumber}</div>
|
|
<div class="cover-date">Cliente: ${state.settings.clientName}</div>
|
|
<div class="cover-date">${state.settings.date}</div>
|
|
</div>
|
|
</div>
|
|
<div class="cover-logo-bottom">Logo ${state.settings.supplierName}</div>
|
|
</div>
|
|
`,
|
|
|
|
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 `
|
|
<li class="index-item level-${item.level}">
|
|
<span class="index-number">${item.number}</span>
|
|
<span class="index-title-text">${titleText}</span>
|
|
<span class="index-page">${item.page}</span>
|
|
</li>
|
|
`;
|
|
}).join('');
|
|
};
|
|
|
|
return `
|
|
<div class="template-page index-template">
|
|
<h1 class="index-title">ÍNDICE / TABLE OF CONTENTS</h1>
|
|
<div class="index-divider"></div>
|
|
<ul class="index-list">
|
|
${renderIndexItems()}
|
|
</ul>
|
|
</div>
|
|
`;
|
|
},
|
|
|
|
'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 `
|
|
<div class="template-page divider-minimal">
|
|
<div class="divider-watermark">${sectionNumber}</div>
|
|
<div class="divider-content">
|
|
<div class="divider-number">${icon} Seção ${sectionNumber}</div>
|
|
<h1 class="divider-title">${title}</h1>
|
|
${subtitle ? `<p class="divider-subtitle">${subtitle}</p>` : ''}
|
|
<div class="divider-line"></div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
},
|
|
|
|
'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 `
|
|
<div class="template-page divider-lateral">
|
|
<div class="divider-sidebar">${sectionNumber}</div>
|
|
<div class="divider-main-content">
|
|
<h1 class="divider-main-title">${title}</h1>
|
|
${subtitle ? `<p class="divider-main-subtitle">${subtitle}</p>` : ''}
|
|
<div class="divider-footer">
|
|
<div><strong>Projeto:</strong> ${state.settings.projectTitle}</div>
|
|
<div><strong>Documento:</strong> ${state.settings.documentNumber}</div>
|
|
<div><strong>Cliente:</strong> ${state.settings.clientName}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
},
|
|
|
|
'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 `
|
|
<div class="template-page divider-corporate">
|
|
<div class="divider-corporate-header">
|
|
<div class="divider-corporate-logo">Logo Cliente</div>
|
|
</div>
|
|
<div class="divider-corporate-content">
|
|
<div class="divider-corporate-number">${icon} ${sectionNumber}</div>
|
|
<h1 class="divider-corporate-title">${title}</h1>
|
|
<div class="divider-info-box">
|
|
<div class="divider-info-item">
|
|
<span class="divider-info-label">Projeto:</span>
|
|
<span class="divider-info-value">${state.settings.projectTitle.substring(0, 30)}...</span>
|
|
</div>
|
|
<div class="divider-info-item">
|
|
<span class="divider-info-label">Cliente:</span>
|
|
<span class="divider-info-value">${state.settings.clientName}</span>
|
|
</div>
|
|
<div class="divider-info-item">
|
|
<span class="divider-info-label">Contrato:</span>
|
|
<span class="divider-info-value">${state.settings.contractNumber}</span>
|
|
</div>
|
|
<div class="divider-info-item">
|
|
<span class="divider-info-label">Documento:</span>
|
|
<span class="divider-info-value">${state.settings.documentNumber}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
},
|
|
|
|
'headers-footers': () => `
|
|
<div class="template-page header-footer-showcase">
|
|
<h1 style="font-family: Roboto, sans-serif; font-size: 36px; color: var(--primary-color); margin-bottom: 2rem;">Cabeçalhos e Rodapés</h1>
|
|
|
|
<div class="hf-example">
|
|
<div class="hf-label">Cabeçalho - Opção 1</div>
|
|
<div class="page-header">
|
|
<div class="page-header-logo">Logo</div>
|
|
<div class="page-header-project">${state.settings.projectTitle.substring(0, 40)}...</div>
|
|
<div class="page-header-doc">${state.settings.documentNumber}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hf-example">
|
|
<div class="hf-label">Cabeçalho - Opção 2</div>
|
|
<div class="page-header" style="border-bottom: 1px solid var(--gray-light);">
|
|
<div class="page-header-project" style="flex: 1;">${state.settings.clientName} - ${state.settings.projectTitle.substring(0, 35)}...</div>
|
|
<div class="page-header-doc" style="background-color: var(--gray-light); padding: 0.5rem 1rem; border-radius: 4px;">${state.settings.documentNumber}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hf-example">
|
|
<div class="hf-label">Rodapé - Opção 1</div>
|
|
<div class="page-footer">
|
|
<div class="page-footer-left">Rev. 01 | ${state.settings.date}</div>
|
|
<div class="page-footer-center">45</div>
|
|
<div class="page-footer-right">${state.settings.supplierName}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hf-example">
|
|
<div class="hf-label">Rodapé - Opção 2</div>
|
|
<div class="page-footer" style="background-color: rgba(26, 54, 93, 0.05);">
|
|
<div class="page-footer-left">${state.settings.documentNumber}</div>
|
|
<div class="page-footer-center" style="background-color: var(--primary-color); color: white; padding: 0.25rem 1rem; border-radius: 4px;">12</div>
|
|
<div class="page-footer-right">Data: ${state.settings.date}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hf-example">
|
|
<div class="hf-label">Rodapé - Opção 3</div>
|
|
<div class="page-footer" style="border-top: 3px solid var(--primary-color);">
|
|
<div class="page-footer-left" style="display: flex; flex-direction: column;">
|
|
<span style="font-weight: 600;">${state.settings.clientName}</span>
|
|
<span>${state.settings.contractNumber}</span>
|
|
</div>
|
|
<div class="page-footer-center">8</div>
|
|
<div class="page-footer-right" style="text-align: right;">
|
|
<div style="font-weight: 600;">${state.settings.supplierName}</div>
|
|
<div>${state.settings.date}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
'style-guide': () => `
|
|
<div class="template-page style-guide">
|
|
<h1 style="font-family: Roboto, sans-serif; font-size: 36px; color: var(--primary-color); margin-bottom: 2rem; text-align: center;">Guia de Estilo - Databook</h1>
|
|
|
|
<div class="sg-section">
|
|
<h2 class="sg-section-title">Paleta de Cores</h2>
|
|
<div class="color-palette">
|
|
<div class="color-swatch">
|
|
<div class="color-sample" style="background-color: ${state.settings.primaryColor};"></div>
|
|
<div class="color-name">Primária</div>
|
|
<div class="color-hex">${state.settings.primaryColor}</div>
|
|
</div>
|
|
<div class="color-swatch">
|
|
<div class="color-sample" style="background-color: ${state.settings.secondaryColor};"></div>
|
|
<div class="color-name">Secundária</div>
|
|
<div class="color-hex">${state.settings.secondaryColor}</div>
|
|
</div>
|
|
<div class="color-swatch">
|
|
<div class="color-sample" style="background-color: #4299e1;"></div>
|
|
<div class="color-name">Accent</div>
|
|
<div class="color-hex">#4299e1</div>
|
|
</div>
|
|
<div class="color-swatch">
|
|
<div class="color-sample" style="background-color: #2d3748;"></div>
|
|
<div class="color-name">Cinza Escuro</div>
|
|
<div class="color-hex">#2d3748</div>
|
|
</div>
|
|
<div class="color-swatch">
|
|
<div class="color-sample" style="background-color: #718096;"></div>
|
|
<div class="color-name">Cinza Médio</div>
|
|
<div class="color-hex">#718096</div>
|
|
</div>
|
|
<div class="color-swatch">
|
|
<div class="color-sample" style="background-color: #e2e8f0;"></div>
|
|
<div class="color-name">Cinza Claro</div>
|
|
<div class="color-hex">#e2e8f0</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sg-section">
|
|
<h2 class="sg-section-title">Tipografia</h2>
|
|
<div class="typography-examples">
|
|
<div class="typo-example">
|
|
<div class="typo-label">Título Principal (H1) - 60px Bold</div>
|
|
<h1 style="font-family: Roboto, sans-serif; font-size: 60px; font-weight: 700; color: var(--primary-color);">Título Principal</h1>
|
|
</div>
|
|
<div class="typo-example">
|
|
<div class="typo-label">Subtítulo (H2) - 36px Regular</div>
|
|
<h2 style="font-family: Roboto, sans-serif; font-size: 36px; font-weight: 400; color: var(--gray-dark);">Subtítulo do Documento</h2>
|
|
</div>
|
|
<div class="typo-example">
|
|
<div class="typo-label">Seção (H3) - 24px Bold</div>
|
|
<h3 style="font-family: Roboto, sans-serif; font-size: 24px; font-weight: 700; color: var(--primary-color);">Título de Seção</h3>
|
|
</div>
|
|
<div class="typo-example">
|
|
<div class="typo-label">Corpo de Texto - 14px Regular</div>
|
|
<p style="font-family: Open Sans, sans-serif; font-size: 14px; font-weight: 400; color: var(--gray-dark);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
<div class="typo-example">
|
|
<div class="typo-label">Texto Secundário - 12px Regular</div>
|
|
<p style="font-family: Open Sans, sans-serif; font-size: 12px; font-weight: 400; color: var(--gray-medium);">Texto secundário ou informações auxiliares</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sg-section">
|
|
<h2 class="sg-section-title">Espaçamentos</h2>
|
|
<div class="spacing-grid">
|
|
<div class="spacing-item">
|
|
<div class="spacing-visual" style="width: 8px; height: 8px;"></div>
|
|
<div class="spacing-label">8px - XS</div>
|
|
</div>
|
|
<div class="spacing-item">
|
|
<div class="spacing-visual" style="width: 16px; height: 16px;"></div>
|
|
<div class="spacing-label">16px - SM</div>
|
|
</div>
|
|
<div class="spacing-item">
|
|
<div class="spacing-visual" style="width: 24px; height: 24px;"></div>
|
|
<div class="spacing-label">24px - MD</div>
|
|
</div>
|
|
<div class="spacing-item">
|
|
<div class="spacing-visual" style="width: 32px; height: 32px;"></div>
|
|
<div class="spacing-label">32px - LG</div>
|
|
</div>
|
|
<div class="spacing-item">
|
|
<div class="spacing-visual" style="width: 48px; height: 48px;"></div>
|
|
<div class="spacing-label">48px - XL</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sg-section">
|
|
<h2 class="sg-section-title">Elementos</h2>
|
|
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
|
|
<button class="btn btn-primary">Botão Primário</button>
|
|
<button class="btn btn-secondary">Botão Secundário</button>
|
|
</div>
|
|
<div style="margin-top: 1rem; padding: 1rem; background-color: rgba(26, 54, 93, 0.05); border-left: 4px solid var(--primary-color); border-radius: 8px;">
|
|
<strong>Caixa de Informação</strong><br>
|
|
Utilizada para destacar informações importantes no documento.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
};
|
|
|
|
// 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 = `<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Template Databook</title>
|
|
<style>
|
|
/* Adicione o CSS necessário aqui */
|
|
</style>
|
|
</head>
|
|
<body>
|
|
${templateContent}
|
|
</body>
|
|
</html>`;
|
|
|
|
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(); |