mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-16 03:20:46 +02:00
Add SaaS AI engine (#5907)
This commit is contained in:
James Brunton
@@ -0,0 +1,226 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Standard Operating Procedure</title>
|
||||
<style>
|
||||
/* ── Theme variables (replaced at generation time) ── */
|
||||
{{THEME_CSS}}
|
||||
|
||||
/* ── Print / page setup ── */
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 20mm;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: var(--theme-font, 'Helvetica Neue', Arial, sans-serif);
|
||||
font-size: 10pt;
|
||||
color: var(--theme-text, #1a1a1a);
|
||||
background: var(--theme-bg, #ffffff);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.document {
|
||||
max-width: 170mm;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
{{HEADER_CSS}}
|
||||
|
||||
/* ── Section heading ── */
|
||||
.section-heading {
|
||||
font-size: 10pt;
|
||||
font-weight: 700;
|
||||
color: var(--theme-primary, #1e3a5f);
|
||||
border-bottom: 1pt solid var(--theme-accent, #2563eb);
|
||||
padding-bottom: 2pt;
|
||||
margin: 10pt 0 6pt;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* ── Text sections ── */
|
||||
.text-section {
|
||||
font-size: 9pt;
|
||||
line-height: 1.6;
|
||||
color: var(--theme-text, #1a1a1a);
|
||||
margin-bottom: 6pt;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
/* ── Procedure steps (ol/li provided via placeholder) ── */
|
||||
.procedure-steps {
|
||||
font-size: 9pt;
|
||||
line-height: 1.6;
|
||||
color: var(--theme-text, #1a1a1a);
|
||||
padding-left: 16pt;
|
||||
margin-bottom: 6pt;
|
||||
}
|
||||
|
||||
.procedure-steps li {
|
||||
margin-bottom: 4pt;
|
||||
}
|
||||
|
||||
/* ── Safety note box ── */
|
||||
.safety-box {
|
||||
background: var(--theme-surface, #f8fafc);
|
||||
border-left: 3pt solid var(--theme-accent, #2563eb);
|
||||
padding: 6pt 10pt;
|
||||
margin-bottom: 6pt;
|
||||
font-size: 9pt;
|
||||
line-height: 1.6;
|
||||
color: var(--theme-text, #1a1a1a);
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
/* ── Revision history table ── */
|
||||
.revision-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 6pt;
|
||||
font-size: 8pt;
|
||||
}
|
||||
|
||||
.revision-table thead tr {
|
||||
background: var(--theme-primary, #1e3a5f);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.revision-table thead th {
|
||||
padding: 4pt 6pt;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.revision-table tbody tr:nth-child(even) {
|
||||
background: var(--theme-surface, #f8fafc);
|
||||
}
|
||||
|
||||
.revision-table tbody td {
|
||||
padding: 3pt 6pt;
|
||||
border-bottom: 0.3pt solid var(--theme-border, #e2e8f0);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* ── Approval block ── */
|
||||
.approval-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 110pt auto;
|
||||
row-gap: 4pt;
|
||||
margin-bottom: 8pt;
|
||||
border-left: 2pt solid var(--theme-accent, #2563eb);
|
||||
padding-left: 8pt;
|
||||
}
|
||||
|
||||
.approval-label {
|
||||
font-weight: 600;
|
||||
color: var(--theme-text-muted, #6b7280);
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
.approval-value {
|
||||
font-size: 9pt;
|
||||
color: var(--theme-text, #1a1a1a);
|
||||
}
|
||||
|
||||
.sig-line {
|
||||
border-bottom: 0.75pt solid var(--theme-text, #1a1a1a);
|
||||
margin: 8pt 0 3pt;
|
||||
height: 14pt;
|
||||
max-width: 180pt;
|
||||
}
|
||||
|
||||
.sig-field-label {
|
||||
font-size: 7.5pt;
|
||||
color: var(--theme-text-muted, #6b7280);
|
||||
margin-bottom: 4pt;
|
||||
}
|
||||
|
||||
/* ── Page-break controls ── */
|
||||
thead { display: table-header-group; }
|
||||
tr { break-inside: avoid; page-break-inside: avoid; }
|
||||
.section-heading { break-after: avoid; page-break-after: avoid; }
|
||||
.procedure-steps li { break-inside: avoid; page-break-inside: avoid; }
|
||||
.approval-grid { break-inside: avoid; page-break-inside: avoid; }
|
||||
|
||||
/* ── Print overrides ── */
|
||||
@media print {
|
||||
body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
.document { max-width: 100%; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="document">
|
||||
|
||||
<div class="top-bar"></div>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="doc-header">
|
||||
{{LOGO_BLOCK}}
|
||||
<div class="doc-header-text">
|
||||
<div class="doc-title">{{SOP_TITLE}}</div>
|
||||
<div class="doc-subtitle">{{COMPANY_NAME}} · SOP No: {{SOP_NUMBER}} · v{{VERSION}} · Effective: {{EFFECTIVE_DATE}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<!-- Purpose -->
|
||||
<div class="section-heading">Purpose</div>
|
||||
<div class="text-section">{{PURPOSE_TEXT}}</div>
|
||||
|
||||
<!-- Scope -->
|
||||
<div class="section-heading">Scope</div>
|
||||
<div class="text-section">{{SCOPE_TEXT}}</div>
|
||||
|
||||
<!-- Definitions -->
|
||||
<div class="section-heading">Definitions</div>
|
||||
<div class="text-section">{{DEFINITIONS_TEXT}}</div>
|
||||
|
||||
<!-- Roles & Responsibilities -->
|
||||
<div class="section-heading">Roles and Responsibilities</div>
|
||||
<div class="text-section">{{ROLES_TEXT}}</div>
|
||||
|
||||
<!-- Procedure -->
|
||||
<div class="section-heading">Procedure</div>
|
||||
<ol class="procedure-steps">
|
||||
{{PROCEDURE_STEPS}}
|
||||
</ol>
|
||||
|
||||
<!-- Safety Notes -->
|
||||
<div class="section-heading">Quality and Safety Notes</div>
|
||||
<div class="safety-box">{{SAFETY_NOTES_TEXT}}</div>
|
||||
|
||||
<!-- Revision History -->
|
||||
<div class="section-heading">Revision History</div>
|
||||
<table class="revision-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:18%">Version</th>
|
||||
<th style="width:28%">Date</th>
|
||||
<th style="width:28%">Author</th>
|
||||
<th>Summary of Changes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{REVISION_ROWS}}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Approval -->
|
||||
<div class="section-heading">Approval</div>
|
||||
<div class="approval-grid">
|
||||
<span class="approval-label">Approved by:</span> <span class="approval-value">{{APPROVER_NAME}}</span>
|
||||
<span class="approval-label">Title:</span> <span class="approval-value">{{APPROVER_TITLE}}</span>
|
||||
<span class="approval-label">Date:</span> <span class="approval-value">{{APPROVAL_DATE}}</span>
|
||||
</div>
|
||||
<div class="sig-line"></div>
|
||||
<div class="sig-field-label">Approver Signature</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user