Add HTML template and unit tests
This commit is contained in:
65
vibeguard/templates/report.html
Normal file
65
vibeguard/templates/report.html
Normal 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>
|
||||||
Reference in New Issue
Block a user