@aquaori/deplens
Version:
A precise dependency analysis tool for npm and pnpm projects
309 lines (268 loc) • 9.66 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deplens - Dependency Analysis Report</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
color: white;
padding: 30px;
text-align: center;
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
font-weight: 700;
}
.header p {
font-size: 1.1rem;
opacity: 0.9;
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
padding: 30px;
background: #f8f9fa;
}
.stat-card {
background: white;
padding: 25px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
}
.stat-label {
font-size: 1rem;
color: #666;
font-weight: 500;
}
.total {
color: #4facfe;
}
.used {
color: #43e97b;
}
.unused {
color: #fa709a;
}
.dev {
color: #fee140;
}
.content {
padding: 30px;
}
.section {
margin-bottom: 30px;
}
.section h2 {
font-size: 1.8rem;
margin-bottom: 20px;
color: #333;
border-bottom: 2px solid #e9ecef;
padding-bottom: 10px;
}
.dependency-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 15px;
}
.dependency-card {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
border-left: 4px solid #4facfe;
transition: all 0.3s ease;
}
.dependency-card:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transform: translateX(5px);
}
.dependency-card.unused {
border-left-color: #fa709a;
background: #fff5f7;
}
.dependency-card.dev {
border-left-color: #fee140;
background: #fffbeb;
}
.dependency-name {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 5px;
color: #333;
}
.dependency-version {
font-size: 0.9rem;
color: #666;
margin-bottom: 10px;
}
.dependency-type {
display: inline-block;
background: #4facfe;
color: white;
padding: 3px 10px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
}
.dependency-card.unused .dependency-type {
background: #fa709a;
}
.dependency-card.dev .dependency-type {
background: #fee140;
color: #333;
}
.empty-state {
text-align: center;
padding: 50px;
color: #666;
font-size: 1.1rem;
}
.empty-state i {
font-size: 3rem;
margin-bottom: 20px;
opacity: 0.5;
}
.footer {
background: #f8f9fa;
padding: 20px;
text-align: center;
color: #666;
font-size: 0.9rem;
border-top: 1px solid #e9ecef;
}
@media (max-width: 768px) {
.header h1 {
font-size: 2rem;
}
.stats {
grid-template-columns: 1fr;
}
.dependency-list {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Deplens - Dependency Analysis Report</h1>
<p>Your project's dependency health check</p>
</div>
<div class="stats">
<div class="stat-card">
<div class="stat-number total" id="totalDependencies"></div>
<div class="stat-label">Total Dependencies</div>
</div>
<div class="stat-card">
<div class="stat-number used" id="usedDependencies"></div>
<div class="stat-label">Used Dependencies</div>
</div>
<div class="stat-card">
<div class="stat-number unused" id="unusedDependencies"></div>
<div class="stat-label">Unused Dependencies</div>
</div>
<div class="stat-card">
<div class="stat-number dev" id="devDependencies"></div>
<div class="stat-label">Development Dependencies</div>
</div>
</div>
<div class="content">
<div class="section">
<h2>Unused Dependencies</h2>
<div class="dependency-list" id="unusedDependenciesList">
<div class="empty-state">
<i>✨</i>
<p>No unused dependencies found! Great job!</p>
</div>
</div>
</div>
<div class="section">
<h2>Development Dependencies</h2>
<div class="dependency-list" id="devDependenciesList">
<div class="empty-state">
<i>🔧</i>
<p>No development dependencies found.</p>
</div>
</div>
</div>
</div>
<div class="footer">
<p>Generated by Deplens - A precise dependency analysis tool for npm and pnpm projects</p>
</div>
</div>
<script>
// Data will be injected here by the server
const data = {{DATA_PLACEHOLDER}};
// Update stats
document.getElementById('totalDependencies').textContent = data.totalDependencies;
document.getElementById('usedDependencies').textContent = data.usedDependencies;
document.getElementById('unusedDependencies').textContent = data.ununsedDependenciesCount;
document.getElementById('devDependencies').textContent = data.devDependencies.length;
// Render unused dependencies
const unusedList = document.getElementById('unusedDependenciesList');
if (data.unusedDependencies.length > 0) {
unusedList.innerHTML = '';
data.unusedDependencies.forEach(dep => {
if (dep.type !== 'dynamic' && !dep.args) {
const card = document.createElement('div');
card.className = 'dependency-card unused';
card.innerHTML = `
<div class="dependency-name">${dep.name}</div>
<div class="dependency-version">@${Array.isArray(dep.version) ? dep.version.join(' & @') : dep.version}</div>
<div class="dependency-type">${dep.type || 'unknown'}</div>
`;
unusedList.appendChild(card);
}
});
}
// Render dev dependencies
const devList = document.getElementById('devDependenciesList');
if (data.devDependencies.length > 0) {
devList.innerHTML = '';
data.devDependencies.forEach(dep => {
const card = document.createElement('div');
card.className = 'dependency-card dev';
card.innerHTML = `
<div class="dependency-name">${dep.name}</div>
<div class="dependency-version">@${Array.isArray(dep.version) ? dep.version.join(' & @') : dep.version}</div>
<div class="dependency-type">dev</div>
`;
devList.appendChild(card);
});
}
</script>
</body>
</html>