Update index.html

index.html

@@ -170,7 +170,6 @@
         }
 
         .treemap-node.file {
-            background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
             color: white;
         }
 
@@ -179,6 +178,66 @@
             color: white;
         }
 
+        /* File type specific colors */
+        .treemap-node.file-image {
+            background: linear-gradient(135deg, #00cec9 0%, #00b894 100%);
+        }
+
+        .treemap-node.file-video {
+            background: linear-gradient(135deg, #e17055 0%, #d63031 100%);
+        }
+
+        .treemap-node.file-audio {
+            background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
+        }
+
+        .treemap-node.file-document {
+            background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
+        }
+
+        .treemap-node.file-office {
+            background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
+        }
+
+        .treemap-node.file-code {
+            background: linear-gradient(135deg, #81ecec 0%, #00cec9 100%);
+        }
+
+        .legend {
+            display: flex;
+            justify-content: center;
+            flex-wrap: wrap;
+            gap: 15px;
+            margin-top: 20px;
+            padding: 20px;
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+
+        .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 0.9em;
+        }
+
+        .legend-color {
+            width: 16px;
+            height: 16px;
+            border-radius: 3px;
+            border: 1px solid rgba(0,0,0,0.1);
+        }
+
+        .legend-color.folder { background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%); }
+        .legend-color.image { background: linear-gradient(135deg, #00cec9 0%, #00b894 100%); }
+        .legend-color.video { background: linear-gradient(135deg, #e17055 0%, #d63031 100%); }
+        .legend-color.audio { background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%); }
+        .legend-color.document { background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%); }
+        .legend-color.office { background: linear-gradient(135deg, #00b894 0%, #00a085 100%); }
+        .legend-color.code { background: linear-gradient(135deg, #81ecec 0%, #00cec9 100%); }
+        .legend-color.other { background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%); }
+
         .tooltip {
             position: absolute;
             background: rgba(0, 0, 0, 0.9);
@@ -282,6 +341,40 @@
                         <div class="stat-label">Max Depth</div>
                     </div>
                 </div>
+                <div class="legend" id="legend" style="display: none;">
+                    <div class="legend-item">
+                        <div class="legend-color folder"></div>
+                        <span>📁 Folders</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color image"></div>
+                        <span>🖼️ Images</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color video"></div>
+                        <span>🎥 Video</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color audio"></div>
+                        <span>🎵 Audio</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color document"></div>
+                        <span>📄 Documents</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color office"></div>
+                        <span>📊 Office</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color code"></div>
+                        <span>💻 Code</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color other"></div>
+                        <span>📦 Other</span>
+                    </div>
+                </div>
             </div>
         </div>
 
@@ -436,7 +529,7 @@
                     name: 'Demo Project',
                     path: '',
                     type: 'directory',
-                    size: 45320000,
+                    size: 78650000,
                     children: [
                         {
                             name: 'src',
@@ -445,33 +538,45 @@
                             size: 28500000,
                             children: [
                                 { name: 'main.js', path: 'src/main.js', type: 'file', size: 15200000 },
-                                { name: 'utils.js', path: 'src/utils.js', type: 'file', size: 8500000 },
-                                { name: 'config.js', path: 'src/config.js', type: 'file', size: 3200000 },
-                                { name: 'helpers.js', path: 'src/helpers.js', type: 'file', size: 1600000 }
+                                { name: 'utils.py', path: 'src/utils.py', type: 'file', size: 8500000 },
+                                { name: 'config.json', path: 'src/config.json', type: 'file', size: 3200000 },
+                                { name: 'index.html', path: 'src/index.html', type: 'file', size: 1600000 }
                             ]
                         },
                         {
                             name: 'assets',
                             path: 'assets',
                             type: 'directory',
-                            size: 12400000,
+                            size: 25800000,
                             children: [
+                                { name: 'hero-video.mp4', path: 'assets/hero-video.mp4', type: 'file', size: 12400000 },
                                 { name: 'logo.png', path: 'assets/logo.png', type: 'file', size: 5600000 },
                                 { name: 'background.jpg', path: 'assets/background.jpg', type: 'file', size: 4200000 },
-                                { name: 'icons.svg', path: 'assets/icons.svg', type: 'file', size: 2600000 }
+                                { name: 'theme-song.mp3', path: 'assets/theme-song.mp3', type: 'file', size: 3600000 }
                             ]
                         },
                         {
                             name: 'docs',
                             path: 'docs',
                             type: 'directory',
-                            size: 2800000,
+                            size: 8900000,
                             children: [
-                                { name: 'README.md', path: 'docs/README.md', type: 'file', size: 1200000 },
-                                { name: 'API.md', path: 'docs/API.md', type: 'file', size: 900000 },
+                                { name: 'manual.pdf', path: 'docs/manual.pdf', type: 'file', size: 5200000 },
+                                { name: 'README.md', path: 'docs/README.md', type: 'file', size: 1800000 },
+                                { name: 'API.txt', path: 'docs/API.txt', type: 'file', size: 1200000 },
                                 { name: 'CHANGELOG.md', path: 'docs/CHANGELOG.md', type: 'file', size: 700000 }
                             ]
                         },
+                        {
+                            name: 'data',
+                            path: 'data',
+                            type: 'directory',
+                            size: 11200000,
+                            children: [
+                                { name: 'report.xlsx', path: 'data/report.xlsx', type: 'file', size: 6800000 },
+                                { name: 'presentation.pptx', path: 'data/presentation.pptx', type: 'file', size: 4400000 }
+                            ]
+                        },
                         {
                             name: 'tests',
                             path: 'tests',
@@ -479,12 +584,13 @@
                             size: 1320000,
                             children: [
                                 { name: 'main.test.js', path: 'tests/main.test.js', type: 'file', size: 680000 },
-                                { name: 'utils.test.js', path: 'tests/utils.test.js', type: 'file', size: 440000 },
-                                { name: 'config.test.js', path: 'tests/config.test.js', type: 'file', size: 200000 }
+                                { name: 'utils.test.py', path: 'tests/utils.test.py', type: 'file', size: 440000 },
+                                { name: 'config.test.json', path: 'tests/config.test.json', type: 'file', size: 200000 }
                             ]
                         },
                         { name: 'package.json', path: 'package.json', type: 'file', size: 180000 },
-                        { name: 'webpack.config.js', path: 'webpack.config.js', type: 'file', size: 120000 }
+                        { name: 'webpack.config.js', path: 'webpack.config.js', type: 'file', size: 120000 },
+                        { name: 'archive.zip', path: 'archive.zip', type: 'file', size: 2630000 }
                     ]
                 };
 
@@ -553,6 +659,30 @@
                 document.getElementById('totalSize').textContent = this.formatFileSize(stats.size);
                 document.getElementById('maxDepth').textContent = stats.depth;
                 document.getElementById('stats').style.display = 'flex';
+                document.getElementById('legend').style.display = 'flex';
+            }
+
+            getFileTypeCategory(filename) {
+                if (!filename || filename.indexOf('.') === -1) return 'other';
+                
+                const extension = filename.toLowerCase().split('.').pop();
+                
+                const categories = {
+                    image: ['jpg', 'jpeg', 'png', 'webp', 'gif', 'bmp', 'ico'],
+                    video: ['mp4', 'avi', 'mov', 'mkv', 'wmv', 'flv', 'webm'],
+                    audio: ['mp3', 'wav', 'flac', 'aac', 'ogg', 'm4a'],
+                    document: ['pdf', 'md', 'txt', 'rtf', 'doc', 'docx'],
+                    office: ['xlsx', 'xls', 'pptx', 'ppt', 'csv'],
+                    code: ['html', 'htm', 'css', 'js', 'ts', 'py', 'java', 'cpp', 'c', 'php', 'rb', 'go', 'rs', 'swift', 'kt', 'json', 'xml', 'yml', 'yaml', 'svg']
+                };
+
+                for (const [category, extensions] of Object.entries(categories)) {
+                    if (extensions.includes(extension)) {
+                        return category;
+                    }
+                }
+                
+                return 'other';
             }
 
             calculateStats(node, depth = 0) {
@@ -749,7 +879,15 @@
 
                 layout.forEach(rect => {
                     const element = document.createElement('div');
-                    element.className = `treemap-node ${rect.data.type}`;
+                    let cssClass = `treemap-node ${rect.data.type}`;
+                    
+                    // Add file type specific class for files
+                    if (rect.data.type === 'file') {
+                        const fileType = this.getFileTypeCategory(rect.data.name);
+                        cssClass = `treemap-node file-${fileType}`;
+                    }
+                    
+                    element.className = cssClass;
                     
                     element.style.left = `${rect.x}px`;
                     element.style.top = `${rect.y}px`;
@@ -780,8 +918,23 @@
 
             createTooltipContent(data) {
                 let content = `<strong>${data.name}</strong><br>`;
-                content += `Type: ${data.type}<br>`;
-                content += `Size: ${this.formatFileSize(data.size)}<br>`;
+                content += `Type: ${data.type}`;
+                
+                if (data.type === 'file') {
+                    const fileType = this.getFileTypeCategory(data.name);
+                    const typeLabels = {
+                        image: '🖼️ Image',
+                        video: '🎥 Video', 
+                        audio: '🎵 Audio',
+                        document: '📄 Document',
+                        office: '📊 Office',
+                        code: '💻 Code',
+                        other: '📦 Other'
+                    };
+                    content += ` (${typeLabels[fileType]})`;
+                }
+                
+                content += `<br>Size: ${this.formatFileSize(data.size)}<br>`;
                 content += `Path: ${data.path}<br>`;
                 
                 if (data.type === 'file' && data.lastModified) {