majiayu000 Project Overview HTML Generator
Generate beautiful, interactive HTML visualizations of project structure and statistics.
Instructions
When creating a project overview HTML:
Gather project information:
- Run
git log --oneline -10for recent commits - Use
find . -type f | head -100or Glob to understand project structure - Check for package.json, requirements.txt, Cargo.toml, etc. for dependencies
- Read README.md if it exists
- Get file type statistics with:
find . -type f | sed 's/.*\.//' | sort | uniq -c | sort -rn | head -20
- Run
Create an interactive HTML file with these sections:
- Header: Project name and description
- Quick Stats: Total files, directories, lines of code, contributors
- Directory Tree: Visual tree structure (collapsible)
- File Type Breakdown: Chart showing language/file type distribution
- Dependencies: List of main dependencies if applicable
- Recent Activity: Git commit timeline
- README Content: Rendered markdown from README
Styling and interactivity:
- Use modern CSS with gradients, shadows, and smooth transitions
- Include Chart.js or similar for data visualization
- Make tree view collapsible with JavaScript
- Use a dark/light theme toggle
- Responsive design for mobile and desktop
- Add smooth scroll animations
Technical requirements:
- Single self-contained HTML file (inline CSS and JS)
- No external dependencies required to view
- Works offline
- Fast loading with optimized code
HTML Template Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Overview - [PROJECT_NAME]</title>
<style>
/* Modern CSS with variables for theming */
:root {
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--accent: #3b82f6;
--accent-hover: #2563eb;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.header {
text-align: center;
padding: 3rem 0;
background: linear-gradient(135deg, var(--accent), #8b5cf6);
border-radius: 1rem;
margin-bottom: 2rem;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.stat-card {
background: var(--bg-secondary);
padding: 1.5rem;
border-radius: 0.5rem;
border: 1px solid rgba(255,255,255,0.1);
transition: transform 0.2s;
}
.stat-card:hover {
transform: translateY(-2px);
}
.section {
background: var(--bg-secondary);
padding: 2rem;
border-radius: 0.5rem;
margin: 2rem 0;
border: 1px solid rgba(255,255,255,0.1);
}
.tree-item {
cursor: pointer;
padding: 0.25rem 0;
user-select: none;
}
.tree-item:hover {
color: var(--accent);
}
.collapsible {
display: none;
padding-left: 1.5rem;
}
.collapsible.active {
display: block;
}
canvas {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<!-- Content sections go here -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Collapsible tree functionality
// Chart.js visualizations
// Theme toggle
</script>
</body>
</html>
Data Visualization
Use Chart.js for:
- Pie chart: File type distribution
- Bar chart: Lines of code by language
- Line chart: Commit activity over time
- Doughnut chart: Test coverage or other metrics
Best Practices
- Performance: Limit tree depth to avoid overwhelming the page
- Accessibility: Use semantic HTML and ARIA labels
- Mobile-friendly: Test on different screen sizes
- Color scheme: Use consistent, professional colors
- Error handling: Gracefully handle missing data
Example Output
The generated HTML should save as project-overview.html in the project root and include:
- Clear visual hierarchy
- Interactive elements that respond to clicks
- Smooth animations
- Professional appearance suitable for documentation or presentations
Additional Features
Consider adding:
- Search functionality for the file tree
- Filter by file type
- Export data as JSON
- Print-friendly CSS
- Shareable link generator
- Code snippets from key files
- Architecture diagrams if detectable
- Performance metrics if available