HTML Report Demo

A multi-section business report with title page, table of contents, and formatted content.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API Usage Analysis Report</title>
</head>
<body>
    <section class="title-page">
        <div class="title-content">
            <h1 class="report-title">API Usage Analysis Report</h1>
            <p class="report-subtitle">Q4 2025 Performance Review</p>
            <p class="company-name">Acme Solutions AB</p>
            <p class="report-date">December 31, 2025</p>
            <p class="confidentiality">CONFIDENTIAL - Internal Use Only</p>
        </div>
    </section>

    <section class="table-of-contents">
        <h2>Table of Contents</h2>
        <ol class="toc-list">
            <li>Executive Summary</li>
            <li>API Performance Metrics</li>
            <li>Usage Trends</li>
            <li>Recommendations</li>
        </ol>
    </section>

    <section class="content-section">
        <h2>1. Executive Summary</h2>
        <p>
            This report provides a comprehensive analysis of our API usage and performance during Q4 2025.
            The data reveals consistent growth in API adoption across all customer segments, with particular
            strength in enterprise accounts. Overall system reliability remained excellent, exceeding our
            99.9% uptime target. Key findings include a 35% increase in daily request volume compared to Q3,
            improved average response times through infrastructure optimization, and successful deployment of
            new authentication features. Based on these results, we recommend continued investment in
            scalability and developer experience improvements.
        </p>
    </section>

    <section class="content-section">
        <h2>2. API Performance Metrics</h2>
        <p>The following table summarizes key performance indicators for the quarter:</p>

        <table class="metrics-table">
            <thead>
                <tr>
                    <th>Metric</th>
                    <th>Q4 2025</th>
                    <th>Q3 2025</th>
                    <th>Change</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Average Response Time</td>
                    <td>142 ms</td>
                    <td>168 ms</td>
                    <td class="positive">-15.5%</td>
                </tr>
                <tr>
                    <td>Uptime</td>
                    <td>99.94%</td>
                    <td>99.87%</td>
                    <td class="positive">+0.07%</td>
                </tr>
                <tr>
                    <td>Daily Requests</td>
                    <td>2.4M</td>
                    <td>1.8M</td>
                    <td class="positive">+33.3%</td>
                </tr>
                <tr>
                    <td>Error Rate</td>
                    <td>0.08%</td>
                    <td>0.12%</td>
                    <td class="positive">-33.3%</td>
                </tr>
                <tr>
                    <td>P95 Response Time</td>
                    <td>385 ms</td>
                    <td>421 ms</td>
                    <td class="positive">-8.6%</td>
                </tr>
            </tbody>
        </table>
    </section>

    <section class="content-section">
        <h2>3. Usage Trends</h2>
        <p>
            API usage has demonstrated steady growth throughout the quarter, with particularly strong adoption
            in December. The increase in request volume correlates with the onboarding of several large
            enterprise customers and the launch of our new developer portal in October. Geographic distribution
            shows continued expansion in European markets, with a 45% increase in requests from EU-based
            customers. The PDF generation endpoints remain our most-used features, accounting for 68% of total
            requests, followed by document conversion services at 22% and metadata extraction at 10%.
        </p>
        <p>
            Customer satisfaction metrics improved significantly, with API documentation receiving an average
            rating of 4.7/5.0 (up from 4.3/5.0 in Q3). Response times improved across all endpoints thanks to
            infrastructure upgrades completed in November, including migration to newer instance types and
            implementation of more aggressive caching strategies. Error rates decreased substantially, with
            most errors now attributed to client-side issues rather than service failures.
        </p>
    </section>

    <section class="content-section">
        <h2>4. Recommendations</h2>
        <p>Based on our analysis, we recommend the following actions for Q1 2026:</p>

        <ol class="recommendations-list">
            <li>
                <strong>Expand Infrastructure Capacity:</strong> Given the 33% growth in request volume,
                we should proactively scale our infrastructure by adding two additional application servers
                and upgrading database tier to handle projected Q1 demand of 3.2M daily requests.
            </li>
            <li>
                <strong>Enhance Monitoring and Alerting:</strong> Implement more granular monitoring at
                the endpoint level to identify performance bottlenecks earlier. Add customer-specific
                dashboards for enterprise accounts to increase transparency.
            </li>
            <li>
                <strong>Optimize High-Volume Endpoints:</strong> Focus optimization efforts on PDF generation
                endpoints, which handle 68% of traffic. Preliminary analysis suggests response times could
                be reduced by an additional 20-25% through improved caching and resource pooling.
            </li>
            <li>
                <strong>Invest in Developer Experience:</strong> Expand SDK coverage to include Python and
                Ruby libraries (currently only .NET and JavaScript are available). Update code examples and
                add interactive API playground to developer portal.
            </li>
        </ol>
    </section>
</body>
</html>

/* Page setup */
@page {
    size: A4;
    margin: 25mm 20mm;

    @top-center {
        content: "API Usage Analysis Report - Q4 2025";
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 9pt;
        color: #666;
        padding-bottom: 8mm;
    }

    @bottom-right {
        content: "Page " counter(page) " of " counter(pages);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 9pt;
        color: #666;
    }
}

/* Title page - no header/footer */
@page title-page {
    margin: 0;

    @top-center {
        content: none;
    }

    @bottom-right {
        content: none;
    }
}

/* Reset page counter after title page */
@page toc-page {
    counter-reset: page 1;
}

/* Global styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 11pt;
    line-height: 1.6;
    color: #333;
}

/* Title page */
.title-page {
    page: title-page;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, #6462a8 0%, #4a4880 100%);
    color: white;
    page-break-after: always;
}

.title-content {
    padding: 40px;
}

.report-title {
    font-size: 42pt;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.report-subtitle {
    font-size: 24pt;
    font-weight: 300;
    margin-bottom: 60px;
    opacity: 0.95;
}

.company-name {
    font-size: 18pt;
    font-weight: 500;
    margin-bottom: 12px;
}

.report-date {
    font-size: 14pt;
    font-weight: 300;
    margin-bottom: 80px;
    opacity: 0.9;
}

.confidentiality {
    font-size: 10pt;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.85;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding-top: 20px;
    margin-top: 40px;
}

/* Table of contents */
.table-of-contents {
    page: toc-page;
    page-break-after: always;
}

.table-of-contents h2 {
    font-size: 24pt;
    color: #6462a8;
    margin-bottom: 30px;
    font-weight: 600;
}

.toc-list {
    list-style: none;
    counter-reset: toc-counter;
}

.toc-list li {
    counter-increment: toc-counter;
    font-size: 13pt;
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
    padding-left: 35px;
}

.toc-list li::before {
    content: counter(toc-counter) ".";
    position: absolute;
    left: 0;
    font-weight: 600;
    color: #6462a8;
}

/* Content sections */
.content-section {
    page-break-before: always;
    margin-bottom: 30px;
}

.content-section h2 {
    font-size: 20pt;
    color: #6462a8;
    margin-bottom: 20px;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 2px solid #6462a8;
}

.content-section p {
    margin-bottom: 15px;
    text-align: justify;
}

/* Metrics table */
.metrics-table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 10pt;
}

.metrics-table thead {
    background-color: #6462a8;
    color: white;
}

.metrics-table th,
.metrics-table td {
    padding: 12px 15px;
    text-align: left;
    border: 1px solid #ddd;
}

.metrics-table th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 9pt;
    letter-spacing: 0.5px;
}

.metrics-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.metrics-table tbody tr:hover {
    background-color: #f0f0f5;
}

.metrics-table .positive {
    color: #28a745;
    font-weight: 600;
}

/* Recommendations list */
.recommendations-list {
    list-style: none;
    counter-reset: rec-counter;
    margin-top: 20px;
}

.recommendations-list li {
    counter-increment: rec-counter;
    margin-bottom: 20px;
    padding-left: 40px;
    position: relative;
}

.recommendations-list li::before {
    content: counter(rec-counter);
    position: absolute;
    left: 0;
    top: 0;
    background-color: #6462a8;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12pt;
}

.recommendations-list strong {
    color: #6462a8;
    display: block;
    margin-bottom: 5px;
}

/* Typography refinements */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
}

strong {
    font-weight: 600;
}

/* Print optimization */
@media print {
    body {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

Click "Run demo as PDF" or "Run demo as image" to see the result here.