367 lines
10 KiB
HTML
367 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{.Title}}</title>
|
|
<style>
|
|
/* A4 Page Setup for printing */
|
|
@page {
|
|
size: A4;
|
|
margin: 2.5cm;
|
|
@bottom-right {
|
|
content: "Page " counter(page) " of " counter(pages);
|
|
font-family: 'Times New Roman', Times, serif;
|
|
font-size: 9pt;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
body {
|
|
font-family: 'Times New Roman', Times, serif;
|
|
font-size: 11pt;
|
|
line-height: 1.4;
|
|
color: #000;
|
|
margin: 0;
|
|
padding: 20px 0;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
/* Document container that simulates A4 pages */
|
|
.document-container {
|
|
width: 21cm;
|
|
margin: 0 auto;
|
|
background: white;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* Individual page sections */
|
|
.page-section {
|
|
padding: 2.5cm;
|
|
position: relative;
|
|
min-height: 24.7cm; /* A4 height minus padding */
|
|
border-bottom: 2px dashed #ddd;
|
|
page-break-after: always;
|
|
}
|
|
|
|
.page-section:last-child {
|
|
border-bottom: none;
|
|
page-break-after: auto;
|
|
}
|
|
|
|
|
|
|
|
.document-header {
|
|
border-bottom: 1px solid #333;
|
|
padding-bottom: 15px;
|
|
margin-bottom: 25px;
|
|
page-break-after: avoid;
|
|
}
|
|
|
|
.document-title {
|
|
font-size: 18pt;
|
|
font-weight: bold;
|
|
color: #000;
|
|
margin: 0 0 10px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.document-meta {
|
|
background: #f9f9f9;
|
|
padding: 12px;
|
|
border: 1px solid #ddd;
|
|
margin: 15px 0;
|
|
font-size: 9pt;
|
|
}
|
|
|
|
.meta-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.meta-table td {
|
|
padding: 4px 8px;
|
|
border-bottom: 1px solid #eee;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.meta-table td:first-child {
|
|
font-weight: bold;
|
|
color: #333;
|
|
width: 120px;
|
|
}
|
|
|
|
.classification {
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Content styling with page break controls */
|
|
.document-content {
|
|
orphans: 3;
|
|
widows: 3;
|
|
}
|
|
|
|
.document-content h1 {
|
|
font-size: 14pt;
|
|
font-weight: bold;
|
|
color: #000;
|
|
margin: 20px 0 12px 0;
|
|
border-bottom: 1px solid #ccc;
|
|
padding-bottom: 4px;
|
|
page-break-after: avoid;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.document-content h2 {
|
|
font-size: 13pt;
|
|
font-weight: bold;
|
|
color: #000;
|
|
margin: 18px 0 10px 0;
|
|
page-break-after: avoid;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.document-content h3 {
|
|
font-size: 12pt;
|
|
font-weight: bold;
|
|
color: #000;
|
|
margin: 16px 0 8px 0;
|
|
page-break-after: avoid;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.document-content h4 {
|
|
font-size: 11pt;
|
|
font-weight: bold;
|
|
color: #000;
|
|
margin: 14px 0 6px 0;
|
|
page-break-after: avoid;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.document-content p {
|
|
margin-bottom: 12px;
|
|
text-align: justify;
|
|
orphans: 3;
|
|
widows: 3;
|
|
}
|
|
|
|
.document-content ul,
|
|
.document-content ol {
|
|
padding-left: 20px;
|
|
margin: 12px 0;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.document-content li {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.document-content strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.document-content em {
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Force page breaks at strategic points */
|
|
.document-content h2:nth-of-type(3),
|
|
.document-content h2:nth-of-type(5),
|
|
.document-content h2:nth-of-type(7),
|
|
.document-content h2:nth-of-type(9) {
|
|
page-break-before: always;
|
|
}
|
|
|
|
/* Signatures section */
|
|
.signatures-section {
|
|
margin-top: 30px;
|
|
padding-top: 15px;
|
|
border-top: 1px solid #ccc;
|
|
page-break-before: always;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.signatures-title {
|
|
font-size: 13pt;
|
|
font-weight: bold;
|
|
color: #000;
|
|
margin-bottom: 15px;
|
|
page-break-after: avoid;
|
|
}
|
|
|
|
.signatures-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 9pt;
|
|
margin-top: 10px;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.signatures-table th,
|
|
.signatures-table td {
|
|
padding: 6px 8px;
|
|
text-align: left;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.signatures-table th {
|
|
background: #f5f5f5;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.signatures-table tr {
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.signature-signed {
|
|
color: #000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.signature-requested {
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 30px;
|
|
padding-top: 15px;
|
|
border-top: 1px solid #ddd;
|
|
font-size: 8pt;
|
|
color: #666;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Prevent bad page breaks */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
page-break-after: avoid;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
p, li {
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
table, .signatures-section {
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
@media print {
|
|
body {
|
|
background: white;
|
|
padding: 0;
|
|
}
|
|
|
|
.document-container {
|
|
box-shadow: none;
|
|
width: auto;
|
|
}
|
|
|
|
.page-section {
|
|
box-shadow: none;
|
|
border-bottom: none;
|
|
padding: 0;
|
|
min-height: auto;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
@media screen and (max-width: 21cm) {
|
|
.document-container {
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="document-container">
|
|
<div class="page-section">
|
|
<div class="document-header">
|
|
<h1 class="document-title">{{.Title}}</h1>
|
|
|
|
<div class="document-meta">
|
|
<table class="meta-table">
|
|
<tr>
|
|
<td>Classification:</td>
|
|
<td>
|
|
<span class="classification">{{.Classification | classificationString}}</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Approver:</td>
|
|
<td>{{.Approver}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Description:</td>
|
|
<td>{{.Description}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Version:</td>
|
|
<td>{{.Version}}</td>
|
|
</tr>
|
|
{{- if .PublishedAt}}
|
|
<tr>
|
|
<td>Published:</td>
|
|
<td>{{.PublishedAt.Format "January 2, 2006"}}{{if .PublishedBy}} ({{.PublishedBy.Format "January 2, 2006"}}){{end}}</td>
|
|
</tr>
|
|
{{- end}}
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="document-content">
|
|
{{.Content | formatContent}}
|
|
</div>
|
|
|
|
{{- if .Signatures}}
|
|
<div class="signatures-section">
|
|
<h2 class="signatures-title">Document Signatures</h2>
|
|
<table class="signatures-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Signatory</th>
|
|
<th>Status</th>
|
|
<th>Requested Date</th>
|
|
<th>Signed Date</th>
|
|
<th>Requested By</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{- range .Signatures}}
|
|
<tr>
|
|
<td>{{.SignedBy}}</td>
|
|
<td>
|
|
{{- if eq (string .State) "SIGNED"}}
|
|
<span class="signature-signed">{{string .State}}</span>
|
|
{{- else}}
|
|
<span class="signature-requested">{{string .State}}</span>
|
|
{{- end}}
|
|
</td>
|
|
<td>{{.RequestedAt.Format "Jan 2, 2006"}}</td>
|
|
<td>
|
|
{{- if .SignedAt}}
|
|
{{.SignedAt.Format "Jan 2, 2006"}}
|
|
{{- else}}
|
|
-
|
|
{{- end}}
|
|
</td>
|
|
<td>{{.RequestedBy}}</td>
|
|
</tr>
|
|
{{- end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{{- end}}
|
|
|
|
<div class="footer">
|
|
<p>Document generated on {{now.Format "January 2, 2006 at 3:04 PM"}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |