Path: C:\
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Formulário Trans War - Sistema de Gestão</title>
<link rel="stylesheet" href="css/style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" defer></script>
<script src="js/script.js" defer></script>
</head>
<body>
<h1 class="page-title">Sistema de Documentação Trans War</h1>
<div class="main-wrapper">
<!-- SIDEBAR COM CARD DE ENTRADA -->
<aside class="input-sidebar">
<div class="input-card">
<h2>Adicionar Novo Registro</h2>
<div class="form-group">
<label>Título do Documento</label>
<input type="text" style="font-size: 1.5rem;" id="input-title"
placeholder="Ex: Manual de Boas Práticas" />
</div>
<div class="form-group">
<label>Código</label>
<input type="text" id="input-codigo" placeholder="Ex: TW-001" />
</div>
<div class="form-group">
<label>Revisão</label>
<input type="text" id="input-revisao" placeholder="Ex: 01" />
</div>
<div class="form-group">
<label>Elaborado por</label>
<input type="text" id="input-elaborado" placeholder="Nome" />
</div>
<div class="form-group">
<label>Aprovado por</label>
<input type="text" id="input-aprovado" placeholder="Nome" />
</div>
<div class="form-group">
<label>Validado por</label>
<input type="text" id="input-validado" placeholder="Nome" />
</div>
<div class="form-group">
<label>Data de Efetivação</label>
<input type="date" id="input-data" />
</div>
<button class="btn btn-image" id="btn-fill-table"
style="width: 100%; justify-content: center; margin-bottom: 10px;">
Adicionar a tabela
</button>
</div>
</aside>
<!-- CONTAINER DA TABELA -->
<main class="table-area">
<div class="table-container" id="table-container">
<!-- CABEÇALHO -->
<div class="header-row">
<div class="header-cell logo-cell">
<img src="image/logo.png" alt="Logo Trans War" class="logo-img" />
</div>
<div class="header-cell title-cell">
<div contenteditable="true" class="editable-field" id="doc-title"
data-placeholder="Título do Documento"
style="font-size: 3.3rem; font-weight:700; text-align:center;"></div>
</div>
<div class="header-cell info-cell">
<div class="info-line">
<span class="info-label">Código:</span>
<div contenteditable="true" style="font-size: 1.5rem;" class="editable-field"
id="doc-codigo" data-placeholder="—">
</div>
</div>
<div class="info-line">
<span class="info-label">Revisão:</span>
<div contenteditable="true" style="font-size: 1.5rem;" class="editable-field"
id="doc-revisao" data-placeholder="—">
</div>
</div>
<div class="info-line">
<span class="info-label">Efetivado em:</span>
<div contenteditable="true" style="font-size: 1.3rem;" class="editable-field" id="doc-data"
data-placeholder="—"></div>
</div>
</div>
</div>
<!-- ELABORADO / APROVADO / VALIDADO -->
<div class="footer-row">
<div class="footer-cell">
<span class="footer-label">Elaborado por:</span>
<div contenteditable="true" class="editable-field" id="elaborado" data-placeholder="Nome"
style="text-align:center; font-size: 1.4rem;"></div>
</div>
<div class="footer-cell">
<span class="footer-label">Aprovado por:</span>
<div contenteditable="true" class="editable-field" id="aprovado" data-placeholder="Nome"
style="text-align:center; font-size: 1.4rem;"></div>
</div>
<div class="footer-cell">
<span class="footer-label">Validado por:</span>
<div contenteditable="true" class="editable-field" id="validado" data-placeholder="Nome"
style="text-align:center; font-size: 1.4rem;"></div>
</div>
</div>
<!-- SEÇÃO DE ASSINATURAS -->
<div class="signature-section" id="signature-section">
<!-- Linhas adicionadas dinamicamente -->
</div>
</div><!-- /table-container -->
<!-- BOTÕES DE AÇÃO -->
<div class="actions">
<button class="btn btn-image" id="btn-generate">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
Gerar Imagem
</button>
<button class="btn btn-add" id="btn-add">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
Adicionar Linhas
</button>
</div>
<!-- REGISTROS SALVOS (AGORA EMBAIXO DOS BOTOES NA DIREITA) -->
<div class="presets-section">
<div class="presets-header">
<h2>Registros Salvos (Relatórios)</h2>
<div class="filters">
<input type="text" id="filter-name" placeholder="Buscar por Nome/Código..." />
<input type="date" id="filter-date" title="Filtrar por data de efetivação" />
</div>
</div>
<div id="presets-container" class="presets-grid">
<!-- Presets carregados via JS -->
<div style="font-size:0.85rem; color:#999; grid-column: 1 / -1;">Carregando...</div>
</div>
</div>
</main>
</div>
<!-- Toast de notificação -->
<div class="toast" id="toast"></div>
<!-- Modal de confirmação de exclusão -->
<div class="modal-overlay" id="modal-overlay">
<div class="modal-box">
<p>Deseja realmente excluir este registro?</p>
<div class="modal-actions">
<button class="btn btn-image" id="modal-confirm">Sim, excluir</button>
<button class="btn btn-add" id="modal-cancel">Cancelar</button>
</div>
</div>
</div>
</body>
</html>