502 lines
11 KiB
HTML
502 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="pt-BR">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Relatório de Obras / Projetos – Pintura</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
||
<style>
|
||
/* Página A4 e estilos de impressão */
|
||
@page {
|
||
size: A4;
|
||
margin: 10mm;
|
||
}
|
||
|
||
html, body {
|
||
padding: 0;
|
||
margin: 0;
|
||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
font-size: 11pt;
|
||
color: #000;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
body {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.page {
|
||
width: 190mm; /* 210mm - 2x10mm da margem @page */
|
||
min-height: 277mm; /* 297mm - 2x10mm */
|
||
background: #fff;
|
||
padding: 12mm;
|
||
box-sizing: border-box;
|
||
box-shadow: 0 0 6mm rgba(0,0,0,0.12);
|
||
}
|
||
|
||
@media print {
|
||
html, body {
|
||
background: #fff;
|
||
}
|
||
.page {
|
||
margin: 0;
|
||
box-shadow: none;
|
||
width: 100%;
|
||
min-height: auto;
|
||
}
|
||
}
|
||
|
||
/* Estilos gerais do relatório (todos em cinza/preto) */
|
||
|
||
header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
border-bottom: 1px solid #999;
|
||
padding-bottom: 6mm;
|
||
margin-bottom: 6mm;
|
||
}
|
||
|
||
.brand {
|
||
max-width: 60%;
|
||
}
|
||
|
||
.brand-title {
|
||
font-size: 13pt;
|
||
font-weight: 700;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.brand-subtitle {
|
||
font-size: 9pt;
|
||
color: #555;
|
||
margin-top: 1mm;
|
||
}
|
||
|
||
.brand-mark {
|
||
width: 10mm;
|
||
height: 10mm;
|
||
border-radius: 2mm;
|
||
border: 1px solid #000;
|
||
display: inline-block;
|
||
margin-right: 3mm;
|
||
}
|
||
|
||
.meta {
|
||
text-align: right;
|
||
font-size: 9pt;
|
||
color: #333;
|
||
}
|
||
|
||
.meta strong {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.tag {
|
||
display: inline-block;
|
||
border: 1px solid #333;
|
||
border-radius: 999px;
|
||
padding: 1mm 3mm;
|
||
font-size: 7pt;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
margin-top: 2mm;
|
||
}
|
||
|
||
/* Resumo superior */
|
||
|
||
.summary {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 4mm;
|
||
margin-bottom: 6mm;
|
||
}
|
||
|
||
.summary-item {
|
||
border: 1px solid #ccc;
|
||
border-radius: 2mm;
|
||
padding: 3mm;
|
||
}
|
||
|
||
.summary-label {
|
||
font-size: 7pt;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
color: #555;
|
||
margin-bottom: 1mm;
|
||
}
|
||
|
||
.summary-value {
|
||
font-size: 13pt;
|
||
font-weight: 700;
|
||
margin-bottom: 1mm;
|
||
}
|
||
|
||
.summary-sub {
|
||
font-size: 8pt;
|
||
color: #555;
|
||
}
|
||
|
||
/* Título da seção de obras */
|
||
|
||
.section-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
margin: 2mm 0 2mm;
|
||
border-top: 1px solid #ccc;
|
||
padding-top: 2mm;
|
||
}
|
||
|
||
.section-title h2 {
|
||
font-size: 9pt;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
color: #333;
|
||
}
|
||
|
||
.section-title span {
|
||
font-size: 8pt;
|
||
color: #666;
|
||
}
|
||
|
||
/* Lista de projetos em “linhas” */
|
||
|
||
.table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 1mm;
|
||
font-size: 9pt;
|
||
}
|
||
|
||
.table thead th {
|
||
text-align: left;
|
||
padding: 2mm 1.5mm;
|
||
border-bottom: 1px solid #000;
|
||
font-size: 8pt;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
}
|
||
|
||
.table tbody tr {
|
||
border-bottom: 0.4pt solid #bbb;
|
||
}
|
||
|
||
.table tbody tr:last-child {
|
||
border-bottom: 1pt solid #000;
|
||
}
|
||
|
||
.table td {
|
||
padding: 2mm 1.5mm;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.col-cod { width: 16mm; }
|
||
.col-obra { width: 45mm; }
|
||
.col-evol { width: 14mm; }
|
||
.col-cron { width: 36mm; }
|
||
.col-peso { width: 20mm; text-align: right; }
|
||
.col-tinta { width: 40mm; }
|
||
.col-cor { width: 20mm; }
|
||
|
||
.obra-codigo {
|
||
font-size: 8pt;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: #555;
|
||
}
|
||
|
||
.obra-nome {
|
||
font-weight: 600;
|
||
font-size: 9pt;
|
||
}
|
||
|
||
.obra-cliente {
|
||
font-size: 8pt;
|
||
color: #555;
|
||
}
|
||
|
||
.evol {
|
||
font-size: 9pt;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.evol-bar {
|
||
margin-top: 1mm;
|
||
height: 3mm;
|
||
border-radius: 999px;
|
||
background: #eee;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.evol-fill {
|
||
height: 100%;
|
||
background: #000;
|
||
}
|
||
|
||
.cron {
|
||
font-size: 8pt;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.cron strong {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.peso {
|
||
font-size: 9pt;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.peso span {
|
||
display: block;
|
||
font-size: 7pt;
|
||
color: #666;
|
||
}
|
||
|
||
.tinta {
|
||
font-size: 8pt;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.tinta strong {
|
||
display: block;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.cor {
|
||
font-size: 8pt;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
/* Rodapé */
|
||
|
||
footer {
|
||
margin-top: 8mm;
|
||
border-top: 1px solid #999;
|
||
padding-top: 3mm;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 7.5pt;
|
||
color: #555;
|
||
}
|
||
|
||
.sig-group {
|
||
text-align: right;
|
||
}
|
||
|
||
.sig-line {
|
||
margin-top: 2mm;
|
||
}
|
||
|
||
.sig-line span {
|
||
display: inline-block;
|
||
min-width: 38mm;
|
||
border-bottom: 0.4pt solid #000;
|
||
margin-left: 2mm;
|
||
height: 3mm;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
<header>
|
||
<div class="brand">
|
||
<div>
|
||
<span class="brand-mark"></span>
|
||
<span class="brand-title">RELATÓRIO DE PINTURA</span>
|
||
</div>
|
||
<div class="brand-subtitle">
|
||
Obras / Projetos – Situação de produção e pintura
|
||
</div>
|
||
</div>
|
||
<div class="meta">
|
||
<div><strong>Data:</strong> ____/____/________</div>
|
||
<div><strong>Responsável:</strong> __________________________</div>
|
||
<div class="tag">Relatório resumido</div>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="summary">
|
||
<div class="summary-item">
|
||
<div class="summary-label">Total de obras</div>
|
||
<div class="summary-value">3</div>
|
||
<div class="summary-sub">Listadas neste relatório</div>
|
||
</div>
|
||
<div class="summary-item">
|
||
<div class="summary-label">Peso total (kgf)</div>
|
||
<div class="summary-value">51.845</div>
|
||
<div class="summary-sub">Soma dos projetos</div>
|
||
</div>
|
||
<div class="summary-item">
|
||
<div class="summary-label">Evolução média</div>
|
||
<div class="summary-value">3,3%</div>
|
||
<div class="summary-sub">Estimativa geral</div>
|
||
</div>
|
||
<div class="summary-item">
|
||
<div class="summary-label">Período</div>
|
||
<div class="summary-value">11/2025 – 03/2026</div>
|
||
<div class="summary-sub">Previsão de execução</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="section-title">
|
||
<h2>OBRAS / PROJETOS</h2>
|
||
<span>Visão geral por código, cronograma, peso e sistema de pintura</span>
|
||
</div>
|
||
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th class="col-cod">Cód.</th>
|
||
<th class="col-obra">Obra / Projeto</th>
|
||
<th class="col-evol">Evol.</th>
|
||
<th class="col-cron">Cronograma</th>
|
||
<th class="col-peso">Peso (kgf)</th>
|
||
<th class="col-tinta">Tinta</th>
|
||
<th class="col-cor">Cor</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- B121 -->
|
||
<tr>
|
||
<td class="col-cod">
|
||
<div class="obra-codigo">B121</div>
|
||
</td>
|
||
<td class="col-obra">
|
||
<div class="obra-nome">RESIDÊNCIA BIA</div>
|
||
<div class="obra-cliente">Cliente: FAIRBANKS</div>
|
||
</td>
|
||
<td class="col-evol">
|
||
<div class="evol">10%</div>
|
||
<div class="evol-bar">
|
||
<div class="evol-fill" style="width:10%;"></div>
|
||
</div>
|
||
</td>
|
||
<td class="col-cron">
|
||
<div class="cron">
|
||
<strong>Início:</strong> 30/11/2025<br>
|
||
<strong>Término:</strong> 30/03/2026
|
||
</div>
|
||
</td>
|
||
<td class="col-peso">
|
||
<div class="peso">
|
||
32.165
|
||
<span>Est. total</span>
|
||
</div>
|
||
</td>
|
||
<td class="col-tinta">
|
||
<div class="tinta">
|
||
<strong>REVRAN DST QD 721</strong>
|
||
Primer
|
||
</div>
|
||
</td>
|
||
<td class="col-cor">
|
||
<div class="cor">
|
||
CINZA N6,5
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- B128 -->
|
||
<tr>
|
||
<td class="col-cod">
|
||
<div class="obra-codigo">B128</div>
|
||
</td>
|
||
<td class="col-obra">
|
||
<div class="obra-nome">COBERTURA BRIDGESTONE</div>
|
||
<div class="obra-cliente">Cliente: BRIDGESTONE</div>
|
||
</td>
|
||
<td class="col-evol">
|
||
<div class="evol">0%</div>
|
||
<div class="evol-bar">
|
||
<div class="evol-fill" style="width:0%;"></div>
|
||
</div>
|
||
</td>
|
||
<td class="col-cron">
|
||
<div class="cron">
|
||
<strong>Início:</strong> 14/01/2026<br>
|
||
<strong>Término:</strong> 30/03/2026
|
||
</div>
|
||
</td>
|
||
<td class="col-peso">
|
||
<div class="peso">
|
||
6.880
|
||
<span>Est. total</span>
|
||
</div>
|
||
</td>
|
||
<td class="col-tinta">
|
||
<div class="tinta">
|
||
<strong>REVRAN PHZ 528</strong>
|
||
Primer<br>
|
||
<strong>OXIBAR DFC 707</strong>
|
||
Acabamento
|
||
</div>
|
||
</td>
|
||
<td class="col-cor">
|
||
<div class="cor">
|
||
CINZA N6,5<br>
|
||
BRANCO
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- B129 -->
|
||
<tr>
|
||
<td class="col-cod">
|
||
<div class="obra-codigo">B129</div>
|
||
</td>
|
||
<td class="col-obra">
|
||
<div class="obra-nome">RAMPA TOYOTA</div>
|
||
<div class="obra-cliente">Cliente: LOJA TOYOTA</div>
|
||
</td>
|
||
<td class="col-evol">
|
||
<div class="evol">0%</div>
|
||
<div class="evol-bar">
|
||
<div class="evol-fill" style="width:0%;"></div>
|
||
</div>
|
||
</td>
|
||
<td class="col-cron">
|
||
<div class="cron">
|
||
<strong>Início:</strong> 10/01/2026<br>
|
||
<strong>Término:</strong> 30/03/2026
|
||
</div>
|
||
</td>
|
||
<td class="col-peso">
|
||
<div class="peso">
|
||
12.800
|
||
<span>Est. total</span>
|
||
</div>
|
||
</td>
|
||
<td class="col-tinta">
|
||
<div class="tinta">
|
||
<strong>REVRAN PHZ 528</strong>
|
||
Primer
|
||
</div>
|
||
</td>
|
||
<td class="col-cor">
|
||
<div class="cor">
|
||
CINZA (granulação)
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<footer>
|
||
<div>
|
||
Gerado em ____/____/________ às ______h<br>
|
||
ID do relatório: ______________________
|
||
</div>
|
||
<div class="sig-group">
|
||
<div class="sig-line">Responsável Técnico<span></span></div>
|
||
<div class="sig-line">Responsável Qualidade<span></span></div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|