empty-folder-manager
Version:
Interactive CLI tool for analyzing and removing empty folders from filesystem with .gitignore support and custom glob patterns
130 lines (118 loc) • 5.75 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🗂️ Empty Folder Manager</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header class="header">
<h1>🗂️ Empty Folder Manager</h1>
<p>Clean up your filesystem efficiently! 🚀</p>
</header>
<div class="main-content">
<!-- Configuration Section -->
<section class="config-section">
<h2>⚙️ Configuration</h2>
<div class="config-item">
<label for="path-input">📁 Directory Path:</label>
<div class="input-group">
<input type="text" id="path-input" placeholder="Enter path to analyze..." />
<button id="browse-btn" class="btn btn-secondary">Browse</button>
</div>
</div>
<div class="config-item">
<label for="speed-select">⚡ Processing Speed:</label>
<select id="speed-select">
<option value="turbo">🚀 Turbo (Fastest)</option>
<option value="fast">⚡ Fast</option>
<option value="normal" selected>🐢 Normal (Balanced)</option>
<option value="gentle">🌱 Gentle (Disk-friendly)</option>
<option value="ultra-gentle">🐌 Ultra Gentle (Very slow, very safe)</option>
</select>
</div>
<div class="config-item">
<label>🎯 Filtering Options:</label>
<div class="filter-options">
<label class="checkbox-label">
<input type="checkbox" id="gitignore-enabled" checked />
🔍 Use .gitignore files
</label>
<div class="custom-patterns">
<label for="custom-patterns">Custom ignore patterns:</label>
<textarea id="custom-patterns" placeholder="node_modules/ *.log .git/ build/"></textarea>
</div>
</div>
</div>
</section>
<!-- Actions Section -->
<section class="actions-section">
<h2>🎬 Actions</h2>
<div class="action-buttons">
<button id="analyze-btn" class="btn btn-primary">🔍 Run Analysis</button>
<button id="stats-btn" class="btn btn-secondary" disabled>📊 Show Stats</button>
<button id="dry-run-btn" class="btn btn-warning" disabled>🔍 Dry Run</button>
<button id="remove-btn" class="btn btn-danger" disabled>🗑️ Remove Folders</button>
</div>
</section>
<!-- Progress Section -->
<section class="progress-section" style="display: none;">
<h2>⏳ Progress</h2>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
<div class="progress-text">Ready to start...</div>
</section>
<!-- Results Section -->
<section class="results-section" style="display: none;">
<h2>📊 Results</h2>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-number" id="total-folders">0</div>
<div class="stat-label">Empty Folders Found</div>
</div>
<div class="stat-card">
<div class="stat-number" id="ignored-folders">0</div>
<div class="stat-label">Folders Ignored</div>
</div>
<div class="stat-card">
<div class="stat-number" id="processed-folders">0</div>
<div class="stat-label">Total Processed</div>
</div>
<div class="stat-card">
<div class="stat-number" id="analysis-time">0s</div>
<div class="stat-label">Analysis Time</div>
</div>
</div>
<div class="folder-list-container">
<h3>📋 Empty Folders Found:</h3>
<div class="folder-list" id="folder-list">
<!-- Folders will be populated here -->
</div>
</div>
</section>
<!-- Log Section -->
<section class="log-section">
<h2>📝 Activity Log</h2>
<div class="log-container" id="log-container">
<div class="log-entry">Welcome to Empty Folder Manager! Configure your settings and run analysis to get started.</div>
</div>
</section>
</div>
</div>
<!-- Confirmation Modal -->
<div id="confirmation-modal" class="modal" style="display: none;">
<div class="modal-content">
<h3>⚠️ Confirm Action</h3>
<p id="confirmation-message">Are you sure you want to proceed?</p>
<div class="modal-buttons">
<button id="confirm-yes" class="btn btn-danger">Yes, Proceed</button>
<button id="confirm-no" class="btn btn-secondary">Cancel</button>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>