sample-report.html•20.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Acme Corp Status Report December 2, 2025</title>
<style>
/* === Base Styles === */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #1a1a2e;
background: #ffffff;
padding: 40px;
max-width: 900px;
margin: 0 auto;
}
/* === Header === */
.header {
text-align: center;
padding: 30px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 16px;
color: white;
margin-bottom: 30px;
}
.header h1 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 8px;
}
.header .date {
font-size: 1rem;
opacity: 0.9;
}
/* === Progress Section === */
.progress-section {
background: #f8f9fc;
border-radius: 12px;
padding: 24px;
margin-bottom: 24px;
}
.progress-section h2 {
font-size: 1.1rem;
color: #667eea;
margin-bottom: 20px;
}
.progress-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.progress-item {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.progress-item .label {
font-size: 0.85rem;
color: #666;
margin-bottom: 8px;
}
.progress-item .stats {
font-size: 1.8rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 10px;
}
.progress-item .percentage {
font-size: 1rem;
color: #667eea;
font-weight: 600;
}
.progress-bar-container {
background: #e8e8f0;
border-radius: 10px;
height: 12px;
overflow: hidden;
margin-top: 10px;
}
.progress-bar {
height: 100%;
border-radius: 10px;
background: linear-gradient(90deg, #667eea, #764ba2);
}
/* === Status Summary === */
.status-summary {
display: flex;
justify-content: center;
gap: 24px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #e8e8f0;
}
.status-summary .status-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: #666;
}
.status-summary .status-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.status-summary .status-dot.done { background: #28a745; }
.status-summary .status-dot.progress { background: #ffc107; }
.status-summary .status-dot.backlog { background: #6c757d; }
.status-summary .status-count {
font-weight: 600;
color: #1a1a2e;
}
/* === Section Cards === */
.section {
background: white;
border-radius: 12px;
padding: 24px;
margin-bottom: 20px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
border: 1px solid #eef0f5;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid #f0f0f5;
}
.section-header h2 {
font-size: 1.3rem;
color: #1a1a2e;
}
.section-header .badge {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 6px 14px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}
/* === Subsections === */
.subsection {
margin-bottom: 20px;
}
.subsection:last-child {
margin-bottom: 0;
}
.subsection-title {
font-size: 0.9rem;
font-weight: 600;
color: #667eea;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* === Ticket List === */
.ticket-list {
list-style: none;
}
.ticket-item {
display: flex;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #f5f5f8;
}
.ticket-item:last-child {
border-bottom: none;
}
.ticket-status {
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
flex-shrink: 0;
font-size: 12px;
}
.status-done {
background: #d4edda;
color: #28a745;
}
.status-progress {
background: #fff3cd;
color: #ffc107;
}
.status-backlog {
background: #e8e8f0;
color: #666;
}
.ticket-content {
flex: 1;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
}
.ticket-id {
font-size: 0.75rem;
color: #888;
font-family: monospace;
background: #f5f5f8;
padding: 2px 6px;
border-radius: 4px;
}
.ticket-title {
font-size: 0.9rem;
color: #1a1a2e;
}
.ticket-meta {
font-size: 0.8rem;
color: #888;
width: 100%;
padding-left: 0;
}
.priority-critical {
color: #dc3545;
font-weight: 600;
}
.priority-high {
color: #fd7e14;
}
/* === Milestones === */
.milestone-list {
list-style: none;
}
.milestone-item {
display: flex;
align-items: center;
padding: 10px 14px;
background: #f8f9fc;
border-radius: 8px;
margin-bottom: 8px;
}
.milestone-item:last-child {
margin-bottom: 0;
}
.milestone-icon {
margin-right: 10px;
font-size: 1rem;
}
.milestone-text {
font-size: 0.9rem;
color: #1a1a2e;
}
/* === Blockers === */
.blocker-section {
background: #fff8f0;
border: 1px solid #ffe0b0;
}
.blocker-section .section-header h2 {
color: #e67e22;
}
.blocker-item {
display: flex;
align-items: flex-start;
padding: 10px 14px;
background: white;
border-radius: 8px;
margin-bottom: 8px;
border-left: 3px solid #e67e22;
font-size: 0.9rem;
}
.blocker-item:last-child {
margin-bottom: 0;
}
.blocker-item .icon {
margin-right: 10px;
font-size: 1rem;
}
/* === Footer === */
.footer {
text-align: center;
padding: 16px;
color: #888;
font-size: 0.8rem;
margin-top: 24px;
border-top: 1px solid #eee;
}
/* === Print Styles === */
@media print {
body { padding: 20px; }
.section {
break-inside: avoid;
page-break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
.subsection { break-inside: avoid; page-break-inside: avoid; }
}
</style>
</head>
<body>
<!-- Header -->
<div class="header">
<h1>Acme Corp Project Status</h1>
<div class="date">December 2, 2025</div>
</div>
<!-- Progress Overview -->
<div class="progress-section">
<h2>Overall Progress</h2>
<div class="progress-grid">
<div class="progress-item">
<div class="label">Tickets Completed</div>
<div class="stats">12 / 18</div>
<div class="percentage">67% Complete</div>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 67%"></div>
</div>
</div>
<div class="progress-item">
<div class="label">Tasks Completed</div>
<div class="stats">24 / 35</div>
<div class="percentage">69% Complete</div>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 69%"></div>
</div>
</div>
</div>
<div class="status-summary">
<div class="status-item">
<span class="status-dot done"></span>
<span>Done: <span class="status-count">12</span></span>
</div>
<div class="status-item">
<span class="status-dot progress"></span>
<span>In Progress: <span class="status-count">2</span></span>
</div>
<div class="status-item">
<span class="status-dot backlog"></span>
<span>Backlog: <span class="status-count">4</span></span>
</div>
</div>
</div>
<!-- Key Milestones -->
<div class="section">
<div class="section-header">
<h2>Key Milestones</h2>
</div>
<ul class="milestone-list">
<li class="milestone-item">
<span class="milestone-icon" style="color: #28a745;">✓</span>
<span class="milestone-text">User Authentication System Complete</span>
</li>
<li class="milestone-item">
<span class="milestone-icon" style="color: #28a745;">✓</span>
<span class="milestone-text">Payment Integration with Stripe (4/4 tasks)</span>
</li>
<li class="milestone-item">
<span class="milestone-icon" style="color: #28a745;">✓</span>
<span class="milestone-text">API Documentation Published</span>
</li>
<li class="milestone-item">
<span class="milestone-icon" style="color: #ffc107;">●</span>
<span class="milestone-text">Dashboard Analytics (In Progress - 3/5 tasks)</span>
</li>
</ul>
</div>
<!-- Backend Project -->
<div class="section">
<div class="section-header">
<h2>Backend API</h2>
<span class="badge">8 / 11 Done</span>
</div>
<div class="subsection">
<div class="subsection-title">Completed (8)</div>
<ul class="ticket-list">
<li class="ticket-item">
<span class="ticket-status status-done">✓</span>
<div class="ticket-content">
<span class="ticket-id">FEAT-001</span>
<span class="ticket-title">User authentication and JWT tokens</span>
</div>
</li>
<li class="ticket-item">
<span class="ticket-status status-done">✓</span>
<div class="ticket-content">
<span class="ticket-id">FEAT-002</span>
<span class="ticket-title">Payment integration with Stripe</span>
<div class="ticket-meta">4/4 subtasks completed</div>
</div>
</li>
<li class="ticket-item">
<span class="ticket-status status-done">✓</span>
<div class="ticket-content">
<span class="ticket-id">FEAT-003</span>
<span class="ticket-title">Email notification service</span>
</div>
</li>
<li class="ticket-item">
<span class="ticket-status status-done">✓</span>
<div class="ticket-content">
<span class="ticket-id">FEAT-004</span>
<span class="ticket-title">Rate limiting middleware</span>
</div>
</li>
<li class="ticket-item">
<span class="ticket-status status-done">✓</span>
<div class="ticket-content">
<span class="ticket-id">FEAT-005</span>
<span class="ticket-title">API documentation with OpenAPI</span>
</div>
</li>
<li class="ticket-item">
<span class="ticket-status status-done">✓</span>
<div class="ticket-content">
<span class="ticket-id">ISSUE-001</span>
<span class="ticket-title">Fix database connection pooling issue</span>
</div>
</li>
<li class="ticket-item">
<span class="ticket-status status-done">✓</span>
<div class="ticket-content">
<span class="ticket-id">ISSUE-002</span>
<span class="ticket-title">Resolve webhook retry logic bug</span>
</div>
</li>
<li class="ticket-item">
<span class="ticket-status status-done">✓</span>
<div class="ticket-content">
<span class="ticket-id">ISSUE-003</span>
<span class="ticket-title">Fix timezone handling in scheduler</span>
</div>
</li>
</ul>
</div>
<div class="subsection">
<div class="subsection-title">In Progress (1)</div>
<ul class="ticket-list">
<li class="ticket-item">
<span class="ticket-status status-progress">●</span>
<div class="ticket-content">
<span class="ticket-id">FEAT-006</span>
<span class="ticket-title">Dashboard analytics and reporting</span>
<div class="ticket-meta">3/5 subtasks completed</div>
</div>
</li>
</ul>
</div>
<div class="subsection">
<div class="subsection-title">Backlog (2)</div>
<ul class="ticket-list">
<li class="ticket-item">
<span class="ticket-status status-backlog">○</span>
<div class="ticket-content">
<span class="ticket-id">FEAT-007</span>
<span class="ticket-title">GraphQL API layer</span>
<div class="ticket-meta priority-high">High Priority</div>
</div>
</li>
<li class="ticket-item">
<span class="ticket-status status-backlog">○</span>
<div class="ticket-content">
<span class="ticket-id">FEAT-008</span>
<span class="ticket-title">Implement caching layer with Redis</span>
</div>
</li>
</ul>
</div>
</div>
<!-- Frontend Project -->
<div class="section">
<div class="section-header">
<h2>Web Frontend</h2>
<span class="badge">4 / 5 Done</span>
</div>
<div class="subsection">
<div class="subsection-title">Completed (4)</div>
<ul class="ticket-list">
<li class="ticket-item">
<span class="ticket-status status-done">✓</span>
<div class="ticket-content">
<span class="ticket-id">FE-001</span>
<span class="ticket-title">Responsive navigation component</span>
</div>
</li>
<li class="ticket-item">
<span class="ticket-status status-done">✓</span>
<div class="ticket-content">
<span class="ticket-id">FE-002</span>
<span class="ticket-title">User settings page</span>
</div>
</li>
<li class="ticket-item">
<span class="ticket-status status-done">✓</span>
<div class="ticket-content">
<span class="ticket-id">FE-003</span>
<span class="ticket-title">Dark mode theme support</span>
</div>
</li>
<li class="ticket-item">
<span class="ticket-status status-done">✓</span>
<div class="ticket-content">
<span class="ticket-id">FE-004</span>
<span class="ticket-title">Form validation library integration</span>
</div>
</li>
</ul>
</div>
<div class="subsection">
<div class="subsection-title">In Progress (1)</div>
<ul class="ticket-list">
<li class="ticket-item">
<span class="ticket-status status-progress">●</span>
<div class="ticket-content">
<span class="ticket-id">FE-005</span>
<span class="ticket-title">Dashboard charts and visualizations</span>
<div class="ticket-meta">2/4 subtasks completed</div>
</div>
</li>
</ul>
</div>
</div>
<!-- Mobile Project -->
<div class="section">
<div class="section-header">
<h2>Mobile App</h2>
<span class="badge">0 / 2 Done</span>
</div>
<div class="subsection">
<div class="subsection-title">Backlog (2)</div>
<ul class="ticket-list">
<li class="ticket-item">
<span class="ticket-status status-backlog">○</span>
<div class="ticket-content">
<span class="ticket-id">MOB-001</span>
<span class="ticket-title">Push notification support</span>
</div>
</li>
<li class="ticket-item">
<span class="ticket-status status-backlog">○</span>
<div class="ticket-content">
<span class="ticket-id">MOB-002</span>
<span class="ticket-title">Offline mode with local sync</span>
</div>
</li>
</ul>
</div>
</div>
<!-- External Dependencies -->
<div class="section blocker-section">
<div class="section-header">
<h2>Blockers & External Dependencies</h2>
</div>
<div class="blocker-item">
<span class="icon">⚠</span>
<div>
<strong>FEAT-007:</strong> GraphQL API layer - Waiting on schema review from architecture team
</div>
</div>
<div class="blocker-item">
<span class="icon">⚠</span>
<div>
<strong>MOB-001:</strong> Push notifications - Pending Apple Developer account approval
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
Generated: December 2, 2025 | Acme Corp
</div>
</body>
</html>
