593 lines
14 KiB
HTML
593 lines
14 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>
|
||
:root {
|
||
--bg: #0f1115;
|
||
--bg-elevated: #181b21;
|
||
--accent: #f97316;
|
||
--accent-soft: rgba(249, 115, 22, 0.12);
|
||
--text-main: #f9fafb;
|
||
--text-muted: #9ca3af;
|
||
--border-subtle: #272b35;
|
||
--success: #22c55e;
|
||
--danger: #ef4444;
|
||
--chip-bg: #1f2937;
|
||
--chip-border: #374151;
|
||
--font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font);
|
||
background: radial-gradient(circle at top left, #1f2933 0, #050608 45%);
|
||
color: var(--text-main);
|
||
padding: 32px;
|
||
}
|
||
|
||
.page {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
background: linear-gradient(145deg, #0b0d11, #111827);
|
||
border-radius: 18px;
|
||
box-shadow: 0 24px 80px rgba(0,0,0,0.75);
|
||
padding: 28px 32px 32px;
|
||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||
}
|
||
|
||
header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 24px;
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
.brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
}
|
||
|
||
.brand-mark {
|
||
width: 38px;
|
||
height: 38px;
|
||
border-radius: 12px;
|
||
background: radial-gradient(circle at 20% 0%, #fbbf24, #f97316);
|
||
box-shadow: 0 0 0 1px rgba(15,23,42,0.8), 0 14px 30px rgba(249,115,22,0.5);
|
||
}
|
||
|
||
.brand-text h1 {
|
||
font-size: 18px;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
color: #e5e7eb;
|
||
}
|
||
|
||
.brand-text p {
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.report-meta {
|
||
text-align: right;
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.report-meta strong {
|
||
color: var(--text-main);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 10px;
|
||
border-radius: 999px;
|
||
background: rgba(15,23,42,0.9);
|
||
border: 1px solid rgba(148,163,184,0.35);
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
color: var(--text-muted);
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.pill-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 999px;
|
||
background: radial-gradient(circle at 30% 0, #4ade80, #16a34a);
|
||
}
|
||
|
||
.summary-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 14px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.summary-card {
|
||
background: radial-gradient(circle at top left, #111827, #020617);
|
||
border-radius: 14px;
|
||
border: 1px solid rgba(31, 41, 55, 0.95);
|
||
padding: 12px 14px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.summary-label {
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.summary-value {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.summary-sub {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.summary-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 3px 8px;
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(34, 197, 94, 0.65);
|
||
background: rgba(22, 163, 74, 0.12);
|
||
font-size: 11px;
|
||
color: #bbf7d0;
|
||
}
|
||
|
||
/* tabela/lista de obras em cards */
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 4px 0 10px;
|
||
}
|
||
|
||
.section-title h2 {
|
||
font-size: 14px;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.section-title span {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.projects {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.project-card {
|
||
display: grid;
|
||
grid-template-columns: 2.1fr 0.8fr 1.1fr 0.8fr 1.3fr 0.7fr;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 12px 14px;
|
||
border-radius: 14px;
|
||
background: linear-gradient(135deg, #0b0f1a, #020617);
|
||
border: 1px solid var(--border-subtle);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.project-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(circle at top left, rgba(249, 115, 22, 0.06), transparent 55%);
|
||
opacity: 0.9;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.project-main {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.project-code {
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
color: var(--text-muted);
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.project-name {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.project-client {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.progress-pill {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.progress-track {
|
||
width: 80px;
|
||
height: 6px;
|
||
background: #020617;
|
||
border-radius: 999px;
|
||
overflow: hidden;
|
||
border: 1px solid #111827;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
border-radius: inherit;
|
||
background: linear-gradient(90deg, #fbbf24, #f97316);
|
||
width: var(--progress, 0%);
|
||
}
|
||
|
||
.progress-label {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
min-width: 30px;
|
||
text-align: right;
|
||
}
|
||
|
||
.schedule {
|
||
position: relative;
|
||
z-index: 1;
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.schedule strong {
|
||
color: var(--text-main);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.weight {
|
||
position: relative;
|
||
z-index: 1;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.weight span {
|
||
display: block;
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.paint {
|
||
position: relative;
|
||
z-index: 1;
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.paint strong {
|
||
display: block;
|
||
color: var(--text-main);
|
||
font-weight: 500;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.color-chip {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 4px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.color-dot {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 999px;
|
||
border: 2px solid #020617;
|
||
box-shadow: 0 0 0 1px rgba(148,163,184,0.4);
|
||
}
|
||
|
||
.color-name {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.color-dot.gray-n65 {
|
||
background: radial-gradient(circle at 20% 0, #f9fafb, #4b5563);
|
||
}
|
||
|
||
.color-dot.white {
|
||
background: radial-gradient(circle at 20% 0, #f9fafb, #e5e7eb);
|
||
}
|
||
|
||
.color-dot.gray {
|
||
background: radial-gradient(circle at 20% 0, #e5e7eb, #4b5563);
|
||
}
|
||
|
||
footer {
|
||
margin-top: 24px;
|
||
padding-top: 12px;
|
||
border-top: 1px dashed rgba(55, 65, 81, 0.7);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.sig-line {
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.sig-line span {
|
||
display: inline-block;
|
||
min-width: 180px;
|
||
border-bottom: 1px solid rgba(75,85,99,0.8);
|
||
margin-left: 6px;
|
||
height: 14px;
|
||
}
|
||
|
||
/* responsividade básica para visualização em tela */
|
||
|
||
@media (max-width: 900px) {
|
||
.page {
|
||
padding: 20px;
|
||
}
|
||
|
||
header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.summary-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.project-card {
|
||
grid-template-columns: 1.7fr 1fr;
|
||
grid-template-rows: auto auto auto;
|
||
grid-template-areas:
|
||
"main main"
|
||
"progress schedule"
|
||
"weight paint";
|
||
}
|
||
|
||
.project-main { grid-area: main; }
|
||
.progress-pill { grid-area: progress; justify-self: flex-start; }
|
||
.schedule { grid-area: schedule; }
|
||
.weight { grid-area: weight; }
|
||
.paint { grid-area: paint; }
|
||
.color-chip { display: none; }
|
||
}
|
||
|
||
@media print {
|
||
body {
|
||
background: #ffffff;
|
||
padding: 0;
|
||
}
|
||
.page {
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
border: none;
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
<header>
|
||
<div class="brand">
|
||
<div class="brand-mark"></div>
|
||
<div class="brand-text">
|
||
<h1>RELATÓRIO DE PINTURA</h1>
|
||
<p>Obras / Projetos – Situação de produção e pintura</p>
|
||
</div>
|
||
</div>
|
||
<div class="report-meta">
|
||
<div><strong>Data:</strong> ____/____/________</div>
|
||
<div><strong>Responsável:</strong> __________________________</div>
|
||
<span class="pill">
|
||
<span class="pill-dot"></span>
|
||
RELATÓRIO RESUMIDO
|
||
</span>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="summary-grid">
|
||
<article class="summary-card">
|
||
<div class="summary-label">Total de obras</div>
|
||
<div class="summary-value">3</div>
|
||
<div class="summary-sub">Listadas neste relatório</div>
|
||
</article>
|
||
|
||
<article class="summary-card">
|
||
<div class="summary-label">Peso total (kgf)</div>
|
||
<div class="summary-value">51.845</div>
|
||
<div class="summary-sub">Soma dos projetos</div>
|
||
</article>
|
||
|
||
<article class="summary-card">
|
||
<div class="summary-label">Evolução média</div>
|
||
<div class="summary-value">3,3%</div>
|
||
<span class="summary-badge">
|
||
▲ andamento inicial
|
||
</span>
|
||
</article>
|
||
|
||
<article class="summary-card">
|
||
<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>
|
||
</article>
|
||
</section>
|
||
|
||
<div class="section-title">
|
||
<h2>OBRAS / PROJETOS</h2>
|
||
<span>Visão geral por código, cronograma, peso e sistema de pintura</span>
|
||
</div>
|
||
|
||
<section class="projects">
|
||
|
||
<!-- B121 -->
|
||
<article class="project-card" style="--progress:10%;">
|
||
<div class="project-main">
|
||
<div class="project-code">B121 · RESIDÊNCIA BIA</div>
|
||
<div class="project-name">Residência Bia</div>
|
||
<div class="project-client">Cliente: FAIRBANKS</div>
|
||
</div>
|
||
|
||
<div class="progress-pill">
|
||
<div class="progress-track">
|
||
<div class="progress-fill"></div>
|
||
</div>
|
||
<div class="progress-label">10%</div>
|
||
</div>
|
||
|
||
<div class="schedule">
|
||
<div><strong>Início</strong> 30/11/2025</div>
|
||
<div><strong>Término</strong> 30/03/2026</div>
|
||
</div>
|
||
|
||
<div class="weight">
|
||
32.165
|
||
<span>peso total (kgf)</span>
|
||
</div>
|
||
|
||
<div class="paint">
|
||
<strong>REVRAN DST QD 721</strong>
|
||
Primer / Sistema alquídico (exemplo)
|
||
</div>
|
||
|
||
<div class="color-chip">
|
||
<div class="color-dot gray-n65"></div>
|
||
<div class="color-name">CINZA N6,5</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- B128 -->
|
||
<article class="project-card" style="--progress:0%;">
|
||
<div class="project-main">
|
||
<div class="project-code">B128 · COBERTURA BRIDGESTONE</div>
|
||
<div class="project-name">Cobertura Bridgestone</div>
|
||
<div class="project-client">Cliente: BRIDGESTONE</div>
|
||
</div>
|
||
|
||
<div class="progress-pill">
|
||
<div class="progress-track">
|
||
<div class="progress-fill"></div>
|
||
</div>
|
||
<div class="progress-label">0%</div>
|
||
</div>
|
||
|
||
<div class="schedule">
|
||
<div><strong>Início</strong> 14/01/2026</div>
|
||
<div><strong>Término</strong> 30/03/2026</div>
|
||
</div>
|
||
|
||
<div class="weight">
|
||
6.880
|
||
<span>peso total (kgf)</span>
|
||
</div>
|
||
|
||
<div class="paint">
|
||
<strong>REVRAN PHZ 528</strong>
|
||
Primer<br />
|
||
<strong>OXIBAR DFC 707</strong>
|
||
Acabamento
|
||
</div>
|
||
|
||
<div class="color-chip">
|
||
<div class="color-dot gray-n65"></div>
|
||
<div class="color-name">CINZA N6,5</div>
|
||
<div class="color-dot white"></div>
|
||
<div class="color-name">BRANCO</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- B129 -->
|
||
<article class="project-card" style="--progress:0%;">
|
||
<div class="project-main">
|
||
<div class="project-code">B129 · RAMPA TOYOTA</div>
|
||
<div class="project-name">Rampa Toyota</div>
|
||
<div class="project-client">Cliente: LOJA TOYOTA</div>
|
||
</div>
|
||
|
||
<div class="progress-pill">
|
||
<div class="progress-track">
|
||
<div class="progress-fill"></div>
|
||
</div>
|
||
<div class="progress-label">0%</div>
|
||
</div>
|
||
|
||
<div class="schedule">
|
||
<div><strong>Início</strong> 10/01/2026</div>
|
||
<div><strong>Término</strong> 30/03/2026</div>
|
||
</div>
|
||
|
||
<div class="weight">
|
||
12.800
|
||
<span>peso total (kgf)</span>
|
||
</div>
|
||
|
||
<div class="paint">
|
||
<strong>REVRAN PHZ 528</strong>
|
||
Primer
|
||
</div>
|
||
|
||
<div class="color-chip">
|
||
<div class="color-dot gray"></div>
|
||
<div class="color-name">CINZA (granulação)</div>
|
||
</div>
|
||
</article>
|
||
|
||
</section>
|
||
|
||
<footer>
|
||
<div>
|
||
<div>Gerado em ____/____/________ às ______h</div>
|
||
<div>ID do relatório: _____________________</div>
|
||
</div>
|
||
<div>
|
||
<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>
|