ctrlshiftleft
Version:
AI-powered toolkit for embedding QA and security testing into development workflows
273 lines (262 loc) • 8.78 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ctrl+Shift+Left Project Overview</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
header {
text-align: center;
margin-bottom: 40px;
}
h1 {
color: #2c3e50;
margin-bottom: 10px;
}
.timestamp {
color: #7f8c8d;
font-size: 14px;
}
.overview-cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 40px;
}
.card {
flex: 1;
min-width: 250px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
background-color: white;
}
.card h2 {
margin-top: 0;
color: #2c3e50;
font-size: 18px;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.stats {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.stat-item {
text-align: center;
padding: 10px;
flex: 1;
min-width: 80px;
}
.stat-value {
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
}
.stat-label {
font-size: 12px;
color: #7f8c8d;
}
.good { color: #27ae60; }
.warning { color: #f39c12; }
.critical { color: #e74c3c; }
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 30px;
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f8f9fa;
font-weight: 600;
}
tbody tr:hover {
background-color: #f5f5f5;
}
.security-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: bold;
color: white;
}
.critical-bg { background-color: #e74c3c; }
.high-bg { background-color: #e67e22; }
.medium-bg { background-color: #f39c12; }
.low-bg { background-color: #3498db; }
.info-bg { background-color: #7f8c8d; }
.pass-bg { background-color: #27ae60; }
.progress-bar {
height: 8px;
background-color: #ecf0f1;
border-radius: 4px;
overflow: hidden;
margin-top: 5px;
}
.progress-fill {
height: 100%;
background-color: #3498db;
}
.progress-fill.good { background-color: #27ae60; }
.progress-fill.warning { background-color: #f39c12; }
.progress-fill.critical { background-color: #e74c3c; }
footer {
text-align: center;
margin-top: 40px;
color: #7f8c8d;
font-size: 14px;
}
.recommendations {
background-color: #f8f9fa;
padding: 20px;
border-radius: 8px;
margin-bottom: 30px;
}
.recommendations h2 {
margin-top: 0;
}
.recommendation-item {
margin-bottom: 15px;
}
.recommendation-item:last-child {
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Ctrl+Shift+Left Project Overview</h1>
<p class="timestamp">Generated on 4/24/2025, 8:29:08 PM</p>
</header>
<div class="overview-cards">
<div class="card">
<h2>Security Analysis</h2>
<div class="stats">
<div class="stat-item">
<div class="stat-value good">0</div>
<div class="stat-label">Critical</div>
</div>
<div class="stat-item">
<div class="stat-value good">0</div>
<div class="stat-label">High</div>
</div>
<div class="stat-item">
<div class="stat-value warning">1</div>
<div class="stat-label">Medium</div>
</div>
<div class="stat-item">
<div class="stat-value good">1</div>
<div class="stat-label">Low/Info</div>
</div>
</div>
</div>
<div class="card">
<h2>QA Checklist</h2>
<div class="stats">
<div class="stat-item">
<div class="stat-value good">6</div>
<div class="stat-label">Passed</div>
</div>
<div class="stat-item">
<div class="stat-value critical">1</div>
<div class="stat-label">Failed</div>
</div>
<div class="stat-item">
<div class="stat-value warning">7</div>
<div class="stat-label">Review</div>
</div>
</div>
<div class="progress-bar">
<div class="progress-fill warning" style="width: 43%"></div>
</div>
</div>
<div class="card">
<h2>Test Coverage</h2>
<div class="stats">
<div class="stat-item">
<div class="stat-value good">100%</div>
<div class="stat-label">Coverage</div>
</div>
<div class="stat-item">
<div class="stat-value">1/1</div>
<div class="stat-label">Components</div>
</div>
</div>
<div class="progress-bar">
<div class="progress-fill good" style="width: 100%"></div>
</div>
</div>
</div>
<div class="recommendations">
<h2>Key Recommendations</h2>
<div class="recommendation-item">
<strong>QA:</strong> Address 1 failed QA checklist items.
</div>
</div>
<h2>Component Analysis</h2>
<table>
<thead>
<tr>
<th>Component</th>
<th>Status</th>
<th>Security Issues</th>
<th>QA Status</th>
<th>Tests</th>
<th>Complexity</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<strong>PaymentForm</strong><br>
<small>components/PaymentForm.tsx</small>
</td>
<td>
<span class="security-badge medium-bg">Needs Work</span>
</td>
<td>
<span class="security-badge medium-bg">Medium: 1</span> <span class="security-badge low-bg">Low/Info: 1</span>
</td>
<td>
<span class="security-badge high-bg">
6 / 14
</span>
</td>
<td>
<span class="security-badge pass-bg">Yes</span>
</td>
<td>
<span class="security-badge medium-bg">High</span>
</td>
</tr>
</tbody>
</table>
<footer>
<p>Generated by Ctrl+Shift+Left - Embedding QA and security testing early in development</p>
</footer>
</div>
</body>
</html>