255 lines
6 KiB
Python
255 lines
6 KiB
Python
"""
|
|
Web-styled HTML Report Generator for Video QC Results
|
|
|
|
Inherits from HTMLReporter but applies black + #FFC407 yellow theme
|
|
with Montserrat font for web interface display.
|
|
"""
|
|
|
|
import sys
|
|
import os
|
|
sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
|
|
|
|
from utils.report import HTMLReporter
|
|
|
|
|
|
class WebHTMLReporter(HTMLReporter):
|
|
"""Web-styled HTML report generator with black/yellow theme"""
|
|
|
|
@staticmethod
|
|
def _build_head(filename: str, timestamp: str) -> str:
|
|
"""Build the HTML head section with Montserrat font"""
|
|
return f'''
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Video QC Report - {filename}</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
{WebHTMLReporter._get_css_styles()}
|
|
</style>
|
|
</head>
|
|
'''
|
|
|
|
@staticmethod
|
|
def _get_css_styles() -> str:
|
|
"""Return CSS styles with black background and yellow accent theme"""
|
|
return '''
|
|
body {
|
|
font-family: 'Montserrat', sans-serif;
|
|
background-color: #000000;
|
|
color: #FFFFFF;
|
|
padding: 2rem 0;
|
|
}
|
|
|
|
.container {
|
|
background-color: #000000;
|
|
max-width: 1200px;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5 {
|
|
color: #FFC407;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.display-4 {
|
|
color: #FFC407;
|
|
}
|
|
|
|
.text-muted {
|
|
color: #999999 !important;
|
|
}
|
|
|
|
strong {
|
|
color: #FFC407;
|
|
}
|
|
|
|
/* Status badges */
|
|
.status-badge {
|
|
font-size: 0.8rem;
|
|
padding: 0.35em 0.65em;
|
|
}
|
|
|
|
.badge.bg-success {
|
|
background-color: #28a745 !important;
|
|
}
|
|
|
|
.badge.bg-danger {
|
|
background-color: #dc3545 !important;
|
|
}
|
|
|
|
.badge.bg-warning {
|
|
background-color: #FFC407 !important;
|
|
color: #000000 !important;
|
|
}
|
|
|
|
.badge.bg-secondary {
|
|
background-color: #666666 !important;
|
|
}
|
|
|
|
/* Summary card */
|
|
.summary-card {
|
|
background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
|
|
border: 2px solid #FFC407;
|
|
color: white;
|
|
border-radius: 10px;
|
|
padding: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.summary-card h3 {
|
|
color: #FFC407;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.summary-stats {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 1rem;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: #FFC407;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.9rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Accordion / Check cards */
|
|
.check-card {
|
|
margin-bottom: 1rem;
|
|
background-color: #1a1a1a;
|
|
border: 1px solid #333333;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.accordion-button {
|
|
background-color: #1a1a1a;
|
|
color: #FFFFFF;
|
|
border: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.accordion-button:not(.collapsed) {
|
|
background-color: #0a0a0a;
|
|
color: #FFC407;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.accordion-button:focus {
|
|
box-shadow: 0 0 0 0.25rem rgba(255, 196, 7, 0.25);
|
|
}
|
|
|
|
.accordion-button:hover {
|
|
background-color: #2a2a2a;
|
|
}
|
|
|
|
.accordion-body {
|
|
background-color: #0a0a0a;
|
|
color: #FFFFFF;
|
|
border-top: 1px solid #333333;
|
|
}
|
|
|
|
.accordion-body h5 {
|
|
color: #FFC407;
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/* Details lists */
|
|
.details-list {
|
|
list-style-type: none;
|
|
padding-left: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.details-list li {
|
|
margin-bottom: 0.75rem;
|
|
line-height: 1.6;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.nested-details {
|
|
margin-top: 0.5rem;
|
|
margin-left: 0;
|
|
padding-left: 1rem;
|
|
border-left: 3px solid #FFC407;
|
|
}
|
|
|
|
.nested-details .details-list {
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
.nested-details li {
|
|
color: #FFFFFF;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* Make all text more readable */
|
|
p {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
ul li {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/* Error section */
|
|
.error-section {
|
|
background-color: #3a1a1a;
|
|
border-radius: 4px;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
border-left: 4px solid #dc3545;
|
|
}
|
|
|
|
.error-section h5 {
|
|
color: #ff6b6b;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.error-section p {
|
|
color: #ffcccc;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Header */
|
|
header {
|
|
margin-bottom: 2rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 2px solid #FFC407;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
header h3 {
|
|
font-size: 1.5rem;
|
|
color: #CCCCCC;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.summary-stats {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.stat-item {
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
'''
|