Add HTML template and unit tests
Some checks failed
CI / test (push) Has been cancelled
CI / build (push) Has been cancelled

This commit is contained in:
2026-02-03 07:02:12 +00:00
parent d4ca0f4f27
commit dc390bf8b8

View File

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: #f5f5f5; color: #333; line-height: 1.6; }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 8px 8px 0 0; }
header h1 { font-size: 2.5em; margin-bottom: 10px; }
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; padding: 25px; background: white; border-bottom: 1px solid #eee; }
.summary-card { text-align: center; padding: 20px; border-radius: 8px; background: #f8f9fa; }
.summary-card.critical { background: #ffebee; }
.summary-card.error { background: #fff3e0; }
.summary-card.warning { background: #fff8e1; }
.summary-card.info { background: #e8f5e9; }
.summary-card h3 { font-size: 2em; margin-bottom: 5px; }
.issues { padding: 25px; background: white; }
.issue { border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 15px; overflow: hidden; }
.issue-header { padding: 15px 20px; cursor: pointer; }
.issue-header.critical { background: #ffebee; border-left: 4px solid #d32f2f; }
.issue-header.error { background: #fff3e0; border-left: 4px solid #f57c00; }
.issue-header.warning { background: #fff8e1; border-left: 4px solid #fbc02d; }
.issue-header.info { background: #e8f5e9; border-left: 4px solid #388e3c; }
.issue-details { padding: 20px; display: none; border-top: 1px solid #e0e0e0; }
.issue-details.show { display: block; }
footer { text-align: center; padding: 20px; color: #666; font-size: 0.9em; }
</style>
</head>
<body>
<div class="container">
<header>
<h1>{{ title }}</h1>
<p>Generated on {{ timestamp }}</p>
</header>
<div class="summary">
<div class="summary-card" style="background: #e3f2fd;"><h3>{{ total_issues }}</h3><p>Total Issues</p></div>
<div class="summary-card critical"><h3>{{ summary.critical }}</h3><p>Critical</p></div>
<div class="summary-card error"><h3>{{ summary.error }}</h3><p>Errors</p></div>
<div class="summary-card warning"><h3>{{ summary.warning }}</h3><p>Warnings</p></div>
<div class="summary-card info"><h3>{{ summary.info }}</h3><p>Info</p></div>
</div>
<div class="issues">
{% if issues %}
{% for issue in issues %}
<div class="issue">
<div class="issue-header {{ issue.severity }}">
<strong>{{ issue.pattern }}</strong> - {{ issue.file }}:{{ issue.line }}
</div>
<div class="issue-details">
<p>{{ issue.message }}</p>
<p style="margin-top: 10px;"><strong>Fix:</strong> {{ issue.suggestion }}</p>
</div>
</div>
{% endfor %}
{% else %}
<p style="text-align: center; padding: 40px; color: #666;">No issues found! Your code is clean.</p>
{% endif %}
</div>
<footer><p>Generated by VibeGuard - AI Code Anti-Pattern Detector</p></footer>
</div>
</body>
</html>