</>
{ }
5 Templates

ROAR HTML Report Templates

These templates demonstrate the HTML/CSS structure used for PDF generation via WeasyPrint. Each template receives structured data from the Django API and renders to print-ready HTML.

About These Templates

The ROAR PDF report is generated server-side using WeasyPrint, a CSS-based PDF rendering engine for Python. The workflow begins with Django views that assemble structured data from the AiVRIC Vision API, then render that data through Jinja2/Django templates into fully-styled HTML. WeasyPrint converts this HTML into paginated, print-ready PDF documents with proper headers, footers, page numbers, and table-of-contents linking.

Each template below represents a distinct structural component of the final report. In production, these templates are composed together by the report generation pipeline. Charts are pre-rendered as PNG images by matplotlib and embedded as <img> tags rather than using JavaScript-based Chart.js (since WeasyPrint does not execute JavaScript).

Tip: Click on any template card below to view a live preview of the HTML template. Each template uses @page CSS rules for A4 page sizing and includes print-specific CSS for proper pagination.

PDF Generation Pipeline

Django API Structured Data
Jinja2 Templates HTML + CSS
matplotlib Chart PNGs
Rendered HTML Complete Pages
WeasyPrint PDF Output

Template Gallery

Click any template to view a live HTML preview styled for A4 PDF output

ROAR
Risk & Opportunity Assessment Report
CONFIDENTIAL
View Template
1

Cover Page Template

Full-page gradient cover with report title, client details, classification, and branding elements. Sized for A4 with zero margins.

@page A4 Full Bleed cover.html
Table of Contents
1. Executive Summary3
2. Assessment Methodology7
3. Scope Definition10
4. Risk Landscape Overview14
...
View Template
2

Table of Contents

Structured TOC with dotted leaders, page numbers, and 10 report sections. CSS flex-based leader dots for clean rendering.

@page A4 Dotted Leaders toc.html
Section 1
Executive Summary
1.1 Purpose & Objectives
1.2 Key Metrics
View Template
3

Generic Section Template

Reusable section layout with numbered headings, subsections, text areas, stat card rows, and chart placeholders. CSS page-break rules included.

page-break Blocks section-template.html
#SeverityCheck IDStatus
1CRITICALiam_root_access_keyFAIL
2HIGHs3_bucket_public_accessFAIL
3MEDIUMvpc_flow_logs_enabledFAIL
... 27 more rows
View Template
4

Findings Table Template

Paginated findings table with severity badges, zebra striping, continuation headers, and 30 real findings from all providers. Supports thead repeat.

30 findings thead repeat findings-table.html
894
View Template
5

Chart Page Template

Chart embedding template showing how matplotlib-rendered PNG/SVG images are placed in the PDF with titles, captions, and data attribution.

matplotlib SVG/PNG chart-template.html

Technical Implementation Notes

Page Sizing

All templates use @page { size: A4; } (210mm × 297mm). The cover page sets margin: 0 for full-bleed. Content pages use margin: 20mm 15mm 25mm 15mm for headers/footers.

Page Breaks

Sections use page-break-before: always. Tables use page-break-inside: avoid on rows. The thead repeats on new pages via display: table-header-group.

Chart Rendering

Charts are pre-rendered server-side by matplotlib as 300 DPI PNG files. They are base64-encoded and embedded as <img src="data:image/png;base64,..."> for self-contained HTML.

Typography

Inter font is embedded via @font-face rules pointing to local WOFF2 files. Body text is 10pt, headings scale from 14pt to 24pt. Color palette matches the AiVRIC brand guidelines.

Color System

Severity colors: Critical #DC2626, High #F97316, Medium #EAB308, Low #22C55E. Provider accents follow official brand colors. All colors pass WCAG AA contrast.

Page Numbers

Running headers use @top-center { content: string(section-title); }. Page numbers use @bottom-right { content: "Page " counter(page) " of " counter(pages); } via CSS Paged Media.

WeasyPrint Compatibility Notes

Feature Browser WeasyPrint Notes
Flexbox Full Full Used extensively for layout
CSS Grid Full Partial Basic grid works; subgrid not supported
@page Rules Limited Full Size, margins, named pages, margin boxes
Page Counters N/A Full counter(page), counter(pages)
JavaScript Full None All JS must be pre-rendered server-side
CSS Gradients Full Full Linear and radial gradients supported
SVG Full Full Inline and external SVG both work
Table thead Repeat Full Full thead repeats on each page automatically
Bookmarks/TOC N/A Full bookmark-level property for PDF outline
Cross-references N/A Full target-counter() for dynamic page refs

Template File Structure

templates/
 reports/
 roar/
 base.html # Base template with @page CSS, fonts, color vars
 cover.html # Full-bleed cover page (extends base)
 toc.html # Table of contents with dotted leaders
 section.html # Reusable section template (block-based)
 findings_table.html # Paginated findings table with thead repeat
 chart_page.html # Chart embedding with caption and attribution
 appendices.html # Appendix sections (glossary, references, etc.)
 includes/
 _header.html # Running header partial
 _footer.html # Running footer partial
 _severity_badge.html # Severity badge macro
 _stat_card.html # Stat card partial
 static/
 fonts/ # Inter WOFF2 font files
 images/ # Logo, icons, static images
 css/ # Compiled CSS for WeasyPrint