webtools-cli 1.0.0__py3-none-any.whl

webtools/web/script.js

@@ -0,0 +1,1805 @@
+// Tailwind Config
+tailwind.config = {
+    darkMode: 'class',
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: ['Outfit', 'sans-serif'],
+                mono: ['JetBrains Mono', 'monospace'],
+            },
+            colors: {
+                primary: '#6366f1',
+                accent: '#ec4899',
+            },
+            animation: {
+                blob: "blob 7s infinite",
+                shine: "shine 1.5s infinite",
+            },
+            keyframes: {
+                blob: {
+                    "0%": { transform: "translate(0px, 0px) scale(1)" },
+                    "33%": { transform: "translate(30px, -50px) scale(1.1)" },
+                    "66%": { transform: "translate(-20px, 20px) scale(0.9)" },
+                    "100%": { transform: "translate(0px, 0px) scale(1)" },
+                },
+                shine: {
+                    "0%": { transform: "translateX(-100%)" },
+                    "100%": { transform: "translateX(100%)" },
+                }
+            },
+        }
+    }
+}
+
+// Image Modal State
+let currentImages = [];
+let currentImageIndex = 0;
+
+function wsp_openModal(imgSrc) {
+    // Get all images from the grid
+    const grid = document.getElementById('images-grid');
+    const imgs = grid.querySelectorAll('img[data-src]');
+    currentImages = Array.from(imgs).map(img => img.dataset.src || img.src).filter(src => src);
+    
+    // Find index of clicked image
+    currentImageIndex = currentImages.indexOf(imgSrc);
+    if (currentImageIndex === -1) currentImageIndex = 0;
+    
+    showCurrentImage();
+    
+    const modal = document.getElementById('image-modal');
+    modal.classList.remove('hidden');
+    modal.classList.add('flex');
+    document.body.style.overflow = 'hidden';
+}
+
+// Alias for compatibility with grid onclick
+function openModal(src) {
+    wsp_openModal(src);
+}
+
+// Event delegation for image clicks
+document.addEventListener('click', function(e) {
+    const imgCard = e.target.closest('[data-img-src]');
+    if (imgCard) {
+        e.preventDefault();
+        e.stopPropagation();
+        wsp_openModal(imgCard.dataset.imgSrc);
+    }
+});
+
+function wsp_closeModal() {
+    const modal = document.getElementById('image-modal');
+    modal.classList.add('hidden');
+    modal.classList.remove('flex');
+    document.body.style.overflow = '';
+}
+
+function showCurrentImage() {
+    if (currentImages.length === 0) return;
+    const imgSrc = currentImages[currentImageIndex];
+    document.getElementById('modal-image').src = imgSrc;
+    document.getElementById('modal-download').href = imgSrc;
+    document.getElementById('modal-counter').textContent = `${currentImageIndex + 1} / ${currentImages.length}`;
+}
+
+function nextImage() {
+    if (currentImages.length === 0) return;
+    currentImageIndex = (currentImageIndex + 1) % currentImages.length;
+    showCurrentImage();
+}
+
+function prevImage() {
+    if (currentImages.length === 0) return;
+    currentImageIndex = (currentImageIndex - 1 + currentImages.length) % currentImages.length;
+    showCurrentImage();
+}
+
+// Keyboard navigation
+document.addEventListener('keydown', (e) => {
+    const modal = document.getElementById('image-modal');
+    if (modal.classList.contains('hidden')) return;
+    
+    if (e.key === 'Escape') wsp_closeModal();
+    if (e.key === 'ArrowRight') nextImage();
+    if (e.key === 'ArrowLeft') prevImage();
+});
+
+// --- VISUAL GRAPH (D3.js) ---
+function renderCrawlGraph(structure) {
+    if (!structure || !structure.children) {
+        document.getElementById('graph-container').innerHTML = '<div class="text-slate-500 italic p-10 text-center">No graph data available.</div>';
+        return;
+    }
+    
+    // Clear previous
+    document.getElementById('graph-container').innerHTML = '';
+    
+    // Process Data: Flatten Tree to Links/Nodes
+    const nodes = [];
+    const links = [];
+    const seen = new Set();
+    
+    const queue = [{ node: structure, parent: null }];
+    
+    while(queue.length > 0) {
+        const item = queue.shift();
+        const n = item.node;
+        
+        // Unique Nodes only
+        if (seen.has(n.url)) continue;
+        seen.add(n.url);
+        
+        const isRoot = !item.parent;
+        
+        nodes.push({
+            id: n.url,
+            title: n.title || n.url,
+            group: isRoot ? 1 : 2,
+            radius: isRoot ? 15 : 6 
+        });
+        
+        if (item.parent) {
+            links.push({
+                source: item.parent.url,
+                target: n.url,
+                value: 1
+            });
+        }
+        
+        if (n.children) {
+            n.children.forEach(c => queue.push({ node: c, parent: n }));
+        }
+    }
+    
+    if (nodes.length === 0) return;
+
+    // D3 Setup
+    const container = document.getElementById('graph-container');
+    const width = container.clientWidth || 800;
+    const height = 600;
+    
+    const svg = d3.select("#graph-container").append("svg")
+        .attr("width", "100%")
+        .attr("height", "100%")
+        .attr("viewBox", [0, 0, width, height])
+        .style("background", "#0f172a"); // Match bg-slate-900
+
+    // Simulation
+    const simulation = d3.forceSimulation(nodes)
+        .force("link", d3.forceLink(links).id(d => d.id).distance(100))
+        .force("charge", d3.forceManyBody().strength(-200))
+        .force("center", d3.forceCenter(width / 2, height / 2))
+        .force("collide", d3.forceCollide().radius(d => d.radius + 10));
+
+    // Links
+    const link = svg.append("g")
+        .attr("stroke", "#475569")
+        .attr("stroke-opacity", 0.6)
+        .selectAll("line")
+        .data(links)
+        .join("line")
+        .attr("stroke-width", 1);
+
+    // Nodes
+    const node = svg.append("g")
+        .attr("stroke", "#fff")
+        .attr("stroke-width", 1.5)
+        .selectAll("circle")
+        .data(nodes)
+        .join("circle")
+        .attr("r", d => d.radius)
+        .attr("fill", d => d.group === 1 ? "#3b82f6" : "#475569")
+        .attr("class", "cursor-move hover:fill-orange-500 transition-colors")
+        .call(drag(simulation));
+
+    // Tooltips
+    node.append("title").text(d => d.title);
+
+    simulation.on("tick", () => {
+        link
+            .attr("x1", d => d.source.x)
+            .attr("y1", d => d.source.y)
+            .attr("x2", d => d.target.x)
+            .attr("y2", d => d.target.y);
+
+        node
+            .attr("cx", d => d.x)
+            .attr("cy", d => d.y);
+    });
+
+    // Drag Behavior
+    function drag(simulation) {
+        function dragstarted(event) {
+            if (!event.active) simulation.alphaTarget(0.3).restart();
+            event.subject.fx = event.subject.x;
+            event.subject.fy = event.subject.y;
+        }
+        
+        function dragged(event) {
+            event.subject.fx = event.x;
+            event.subject.fy = event.y;
+        }
+        
+        function dragended(event) {
+            if (!event.active) simulation.alphaTarget(0);
+            event.subject.fx = null;
+            event.subject.fy = null;
+        }
+        
+        return d3.drag()
+            .on("start", dragstarted)
+            .on("drag", dragged)
+            .on("end", dragended);
+    }
+}
+
+// Layout / History Toggle
+function toggleHistory() {
+    const mainGrid = document.getElementById('main-grid');
+    const inputSection = document.getElementById('input-section');
+    const historySection = document.getElementById('history-section');
+    
+    const isHistoryVisible = !historySection.classList.contains('hidden');
+
+    if (isHistoryVisible) {
+        // HIDE HISTORY
+        historySection.classList.add('opacity-0', 'translate-y-4');
+        
+        setTimeout(() => {
+            historySection.classList.add('hidden');
+            // Reset to centered input
+            mainGrid.classList.remove('lg:grid-cols-2');
+            inputSection.classList.add('max-w-3xl', 'mx-auto');
+        }, 300);
+        
+    } else {
+        // SHOW HISTORY (side-by-side with input)
+        historySection.classList.remove('hidden');
+        
+        // Split layout
+        inputSection.classList.remove('max-w-3xl', 'mx-auto');
+        mainGrid.classList.add('lg:grid-cols-2');
+
+        // Animate in
+        setTimeout(() => {
+            historySection.classList.remove('opacity-0', 'translate-y-4');
+        }, 50);
+    }
+}
+
+// Tab Switching
+function switchTab(tab) {
+    document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
+    document.getElementById(`content-${tab}`).classList.remove('hidden');
+    document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('tab-active'));
+    document.getElementById(`tab-${tab}`).classList.add('tab-active');
+}
+
+// Preview Size
+function setPreviewSize(size) {
+    const frame = document.getElementById('preview-frame');
+    if (size === 'mobile') frame.style.width = '375px';
+    else if (size === 'tablet') frame.style.width = '768px';
+    else frame.style.width = '100%';
+}
+
+// Toggle Bulk Mode
+function toggleBulkMode() {
+    const isBulk = document.getElementById('bulkMode').checked;
+    const singleInput = document.getElementById('urlInput').parentElement;
+    const bulkInput = document.getElementById('bulk-input-container');
+
+    
+    if(isBulk) {
+        singleInput.classList.add('hidden');
+
+        bulkInput.classList.remove('hidden');
+    } else {
+        singleInput.classList.remove('hidden');
+
+        bulkInput.classList.add('hidden');
+    }
+}
+
+// Scrape Website
+async function scrapeWebsite() {
+    const isBulk = document.getElementById('bulkMode').checked;
+    const inputSection = document.getElementById('input-inner-container');
+    const results = document.getElementById('results');
+    const error = document.getElementById('error');
+    const fetchImages = document.getElementById('fetchImages').checked;
+    
+    // Button Elements
+    const scrapeBtn = document.getElementById('scrapeBtn');
+    const scrapeIcon = document.getElementById('scrape-icon');
+    const scrapeText = document.getElementById('scrape-text');
+    
+    // Timer Variable
+    let timerInterval;
+    // GLOBAL DATA STORE
+    window.currentScrapeData = null;
+
+    // Helper: Start Loading
+    const startLoading = () => {
+        // Reset UI
+        inputSection.classList.add('loading-beam-border');
+        results.classList.add('hidden');
+        error.classList.add('hidden');
+            
+        // Button Loading State
+        scrapeBtn.disabled = true;
+        scrapeBtn.classList.add('opacity-75', 'cursor-wait');
+        scrapeIcon.classList.add('hidden');
+        
+        // Timer Logic
+        let seconds = 0;
+        scrapeText.textContent = `0`;
+        scrapeText.classList.remove('hidden', 'md:inline');
+        
+        timerInterval = setInterval(() => {
+            seconds++;
+            scrapeText.textContent = `${seconds}`;
+        }, 1000);
+    };
+    
+    try {
+        if(isBulk) {
+            // --- BULK MODE ---
+            const rawUrls = document.getElementById('bulkUrls').value;
+            const urls = rawUrls.split(String.fromCharCode(10)).map(u => u.trim()).filter(u => u.length > 0);
+            
+            if(urls.length === 0) throw new Error("Please enter at least one URL");
+            
+            startLoading();
+
+            const response = await fetch('/api/bulk', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ urls: urls, fetch_images: fetchImages })
+            });
+            
+            const data = await response.json();
+            
+            clearInterval(timerInterval); // Stop timer
+            
+            if(data.success) {
+                inputSection.classList.remove('loading-beam-border');
+                
+                // Reset Button
+                scrapeBtn.disabled = false;
+                scrapeBtn.classList.remove('opacity-75', 'cursor-wait');
+                scrapeIcon.classList.remove('hidden');
+                scrapeText.textContent = 'Scrape';
+                scrapeText.classList.add('hidden', 'md:inline'); // Restore classes
+                scrapeText.classList.remove('md:inline'); // Wait, original was 'hidden md:inline'. 
+                // Let's reset purely to original:
+                scrapeText.className = 'relative z-10 text-sm tracking-wide hidden md:inline';
+
+                    window.location.href = data.download_url;
+            } else {
+                // Reset Button (on error)
+                scrapeBtn.disabled = false;
+                scrapeBtn.classList.remove('opacity-75', 'cursor-wait');
+                scrapeIcon.classList.remove('hidden');
+                scrapeText.textContent = 'Scrape';
+                scrapeText.className = 'relative z-10 text-sm tracking-wide hidden md:inline';
+                inputSection.classList.remove('loading-beam-border');
+
+                throw new Error(data.error || 'Bulk scrape failed');
+            }
+            
+        } else {
+            // --- SINGLE MODE ---
+            let url = document.getElementById('urlInput').value.trim();
+            const fetchVideos = document.getElementById('fetchVideos').checked;
+
+            const fetchFonts = document.getElementById('fetchFonts').checked;
+            const useProxy = document.getElementById('useProxy').checked;
+
+            if (!url) {
+                showError('Please enter a URL');
+                return;
+            }
+            
+            // Simple validation
+            if (url.includes(' ') || (!url.includes('.') && !url.includes('localhost'))) {
+                showError('Please enter a valid website URL (e.g. example.com)');
+                inputSection.classList.remove('loading-beam-border');
+                
+                // Reset Button
+                scrapeBtn.disabled = false;
+                scrapeBtn.classList.remove('opacity-75', 'cursor-wait');
+                scrapeIcon.classList.remove('animate-spin');
+                scrapeText.classList.remove('hidden');
+                return;
+            }
+
+            if (!/^https?:\/\//i.test(url)) {
+                url = 'https://' + url;
+                document.getElementById('urlInput').value = url;
+            }
+
+            startLoading();
+
+            const response = await fetch('/api/scrape', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    url: url,
+                    fetch_images: fetchImages,
+                    fetch_videos: fetchVideos,
+                    fetch_fonts: fetchFonts,
+                    crawl_depth: parseInt(document.getElementById('crawlDepth').value),
+                    use_proxy: useProxy,
+                })
+            });
+
+            const data = await response.json();
+            
+            clearInterval(timerInterval); // Stop timer
+
+        if (data.success) {
+            window.currentScrapeData = data;
+            inputSection.classList.remove('loading-beam-border');
+            
+            // Reset Button
+            scrapeBtn.disabled = false;
+            scrapeBtn.classList.remove('opacity-75', 'cursor-wait');
+            scrapeIcon.classList.remove('hidden');
+            scrapeText.textContent = 'Scrape';
+            scrapeText.className = 'relative z-10 text-sm tracking-wide hidden md:inline';
+            
+            // Show Results (centered below input)
+            const results = document.getElementById('results');
+            results.classList.remove('hidden');
+            results.classList.add('active-results');
+
+            // Conditionally show tabs based on checkboxes
+            document.getElementById('tab-images').classList.toggle('hidden', !fetchImages);
+            document.getElementById('tab-videos').classList.toggle('hidden', !fetchVideos);
+
+            // Setup Preview
+            const previewFrame = document.getElementById('preview-frame');
+            previewFrame.removeAttribute('srcdoc');
+            previewFrame.src = '/download/index.html?' + Date.now();
+                
+                // Update stats
+                document.getElementById('stat-html').textContent = data.stats.html;
+                document.getElementById('stat-css').textContent = data.stats.css;
+                document.getElementById('stat-js').textContent = data.stats.js;
+                document.getElementById('stat-img').textContent = data.stats.image_count;
+                document.getElementById('stat-vid').textContent = data.stats.video_count;
+                document.getElementById('size-html').textContent = data.stats.html;
+                document.getElementById('size-css').textContent = data.stats.css;
+                document.getElementById('size-js').textContent = data.stats.js;
+                
+                // Security Badge (Honeypot Detector)
+                if (data.security) {
+                    const sec = data.security;
+                    const levelColors = { 
+                        LOW: 'text-green-400 border-green-500/30 bg-green-500/10', 
+                        MEDIUM: 'text-yellow-400 border-yellow-500/30 bg-yellow-500/10', 
+                        HIGH: 'text-red-400 border-red-500/30 bg-red-500/10' 
+                    };
+                    const badgeClass = levelColors[sec.level] || levelColors.LOW;
+                    
+                    // Create or update security stats
+                    let secContainer = document.getElementById('security-stat');
+                    if (!secContainer) {
+                        // Inject into stats grid if missing (using JS to append)
+                        const statsGrid = document.querySelector('#content-seo .grid'); 
+                        if (statsGrid) {
+                            const div = document.createElement('div');
+                            div.id = 'security-stat';
+                            div.className = `p-4 rounded-2xl flex flex-col items-center justify-center text-center bg-transparent border shadow-[0_0_15px_rgba(0,0,0,0.2)] ${badgeClass}`;
+                            div.innerHTML = `
+                                <div class="mb-2"><svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg></div>
+                                <h3 class="text-base font-bold mb-0.5">Security Level</h3>
+                                <p class="text-xs font-mono" id="sec-level-text">${sec.level}</p>
+                            `;
+                            statsGrid.insertBefore(div, statsGrid.firstChild);
+                        }
+                    } else {
+                        secContainer.className = `p-4 rounded-2xl flex flex-col items-center justify-center text-center bg-transparent border shadow-[0_0_15px_rgba(0,0,0,0.2)] ${badgeClass}`;
+                        document.getElementById('sec-level-text').textContent = sec.level;
+                    }
+                }
+
+                // Images
+                const grid = document.getElementById('images-grid');
+                grid.innerHTML = (data.images || []).map((img, idx) => `
+                        <div class="relative group aspect-square bg-slate-800 rounded-xl overflow-hidden border border-slate-700 animate-blur-fade" style="animation-delay: ${idx * 0.05}s">
+                            <img src="${img}" onclick="openModal('${img}')" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110 cursor-pointer" loading="lazy" onerror="this.style.display='none'">
+                            <div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3 pointer-events-none">
+                                <button onclick="openModal('${img}')" class="p-2.5 bg-slate-700 hover:bg-slate-600 text-white rounded-lg transition-all pointer-events-auto" title="View Full Size">
+                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
+                                </button>
+                                <a href="${img}" download target="_blank" class="p-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-all pointer-events-auto" title="Download Image">
+                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
+                                </a>
+                            </div>
+                        </div>
+                    `).join('');
+
+                // Render Structure
+                if (data.site_structure) {
+                    // Helper to recursively build tree HTML
+                    const renderTree = (node) => {
+                        if (!node) return '';
+                        let html = `<div class="tree-item">`;
+                        html += `<div class="flex items-center gap-2 group">
+                                    <span class="w-2 h-2 rounded-full bg-cyan-500 hover:bg-cyan-400 transition-colors shadow-[0_0_5px_rgba(6,182,212,0.5)]"></span>
+                                    <a href="${node.url}" target="_blank" class="text-cyan-400 hover:text-cyan-300 hover:underline truncate max-w-[400px] block transition-colors" title="${node.title}\n${node.url}">${node.title}</a>
+                                    </div>`;
+                        if (node.children && node.children.length > 0) {
+                            node.children.forEach(child => {
+                                html += renderTree(child);
+                            });
+                        }
+                        html += `</div>`;
+                        return html;
+                    };
+                    
+                    const treeContainer = document.getElementById('structure-tree');
+                    if (treeContainer) {
+                        treeContainer.innerHTML = (data.site_structure.children && data.site_structure.children.length > 0) 
+                            ? renderTree(data.site_structure)
+                            : '<p class="text-slate-500 italic p-2">No deep structure found. Try increasing Crawl Depth.</p>';
+                        
+                        // Auto-switch if meaningful data
+                        if (data.site_structure.children.length > 0) {
+                            try { 
+                                // Simple tab switch to the combined Intelligence tab (formerly SEO)
+                                if(typeof switchTab === 'function') switchTab('seo');
+                                else {
+                                    // Fallback
+                                    document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
+                                    document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('tab-active', 'text-white', 'border-b-2', 'border-indigo-500'));
+                                    document.getElementById('content-seo').classList.remove('hidden');
+                                    document.getElementById('tab-seo').classList.add('tab-active', 'text-white');
+                                }
+                            } catch(e) {}
+                        }
+                    }
+                }
+
+                // Render Data Table
+                if (data.intel) {
+                    renderDataTable(data);
+                }
+
+                // Videos
+                const vGrid = document.getElementById('videos-grid');
+                if (data.videos && data.videos.length > 0) {
+                    vGrid.innerHTML = data.videos.map((vid, idx) => {
+                        // Clean up filename for display title
+                        // Format: Title_Hash.ext OR Video_Hash.ext
+                        let displayTitle = vid.filename;
+                        try {
+                            const lastDot = displayTitle.lastIndexOf('.');
+                            if(lastDot > -1) displayTitle = displayTitle.substring(0, lastDot); // Remove ext
+                            
+                            // Remove hash (last 9 chars: _12345678) if it looks like one
+                            if (displayTitle.length > 9 && displayTitle.match(/_[a-f0-9]{8}$/)) {
+                                displayTitle = displayTitle.substring(0, displayTitle.length - 9);
+                            }
+                            
+                            // Replace remaining underscores with spaces
+                            displayTitle = displayTitle.replace(/_/g, ' ');
+                            
+                            // If it became empty or just numbers, fall back
+                            if(!displayTitle.trim()) displayTitle = `Video ${idx + 1}`;
+                            
+                        } catch(e) { 
+                            displayTitle = `Video ${idx + 1}`; 
+                        }
+
+                        return `
+                        <div class="video-card rounded-xl p-3 transition-all duration-300">
+                            <div class="flex items-start gap-3">
+                                <div class="w-16 h-12 bg-slate-800 rounded-lg flex items-center justify-center flex-shrink-0">
+                                    <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                                    </svg>
+                                </div>
+                                <div class="flex-1 min-w-0">
+                                    <h4 class="text-white font-semibold text-sm mb-1 truncate" title="${displayTitle}">
+                                        ${displayTitle}
+                                        ${vid.quality && vid.quality !== 'unknown' ? 
+                                            `<span class="ml-2 px-1.5 py-0.5 bg-indigo-600 text-[10px] rounded text-white uppercase tracking-wider">${vid.quality}</span>` 
+                                            : ''}
+                                    </h4>
+                                    <p class="text-slate-400 text-xs mb-2 truncate" title="${vid.filename}">${vid.filename}</p>
+                                    <div class="flex gap-2">
+                                        <a href="${vid.url}" download="${vid.filename}" class="px-3 py-1.5 bg-red-600 hover:bg-red-500 text-white rounded-lg text-xs font-semibold transition-all flex items-center gap-1">
+                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
+                                            Download
+                                        </a>
+                                        <button onclick="copyVideoLink('${vid.original_url}')" class="px-3 py-1.5 bg-slate-700 hover:bg-slate-600 text-white rounded-lg text-xs font-semibold transition-all">
+                                            Copy Link
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                            ${vid.original_url.includes('youtube') || vid.original_url.includes('vimeo') ?
+                                `<div class="mt-3 pt-3 border-t border-slate-700">
+
+                                    <span class="text-xs text-slate-500">External: ${new URL(vid.original_url).hostname}</span>
+                                </div>` : ''
+                            }
+                        </div>
+                    `}).join('');
+                } else {
+                    vGrid.innerHTML = '<div class="col-span-full text-center text-slate-500 py-12">No videos found.</div>';
+                }
+
+                // Update SEO
+                if(data.seo) {
+                    const seo = data.seo;
+                    const circle = document.getElementById('seo-score-circle');
+                    const circumference = 351;
+                    const offset = circumference - (seo.score / 100) * circumference;
+                    circle.style.strokeDashoffset = offset;
+                    circle.classList.toggle('text-green-500', seo.score >= 80);
+                    circle.classList.toggle('text-yellow-500', seo.score >= 50 && seo.score < 80);
+                    circle.classList.toggle('text-red-500', seo.score < 50);
+                    document.getElementById('seo-score-text').textContent = seo.score;
+
+                    document.getElementById('seo-title').textContent = seo.title || 'Missing';
+                    document.getElementById('seo-title').className = seo.title ? 'text-white font-medium truncate block' : 'text-red-400 font-medium truncate block';
+                    document.getElementById('seo-desc').textContent = seo.description || 'Missing';
+                    document.getElementById('seo-desc').className = seo.description ? 'text-white font-medium truncate block' : 'text-red-400 font-medium truncate block';
+                    
+                    document.getElementById('seo-h1').textContent = seo.headings.h1 > 0 ? `Found (${seo.headings.h1})` : 'Missing';
+                    document.getElementById('seo-h1').className = seo.headings.h1 > 0 ? 'text-white font-medium' : 'text-red-400 font-medium';
+                    
+                    document.getElementById('seo-links').textContent = `${seo.links_internal} Internal / ${seo.links_external} External`;
+
+                    const report = document.getElementById('seo-report-list');
+                    let issues = [];
+                    if(!seo.title) issues.push({type:'error', msg:'Missing Meta Title tag'});
+                    if(!seo.description) issues.push({type:'warning', msg:'Missing Meta Description'});
+                    if(seo.headings.h1 === 0) issues.push({type:'error', msg:'Missing H1 heading (critical for SEO)'});
+                    if(seo.images_analysis.missing_alt > 0) issues.push({type:'warning', msg:`${seo.images_analysis.missing_alt} images missing ALT text`});
+                    if(seo.keywords) issues.push({type:'info', msg: `Keywords found: ${seo.keywords.length} chars`});
+
+                    if(seo.broken_links && seo.broken_links.length > 0) {
+                        issues.push({type:'error', msg: `Found ${seo.broken_links.length} Broken Links!`});
+                        seo.broken_links.forEach(link => {
+                            issues.push({type:'error', msg: `Broken Link (${link.status}): ${link.url}`});
+                        });
+                    }
+                    
+                    if(issues.length === 0) issues.push({type:'success', msg:'No critical issues found!'});
+
+                    report.innerHTML = issues.map(i => `
+                        <div class="flex items-start gap-3 p-3 rounded-lg ${i.type === 'error' ? 'bg-red-500/10 text-red-400' : i.type === 'warning' ? 'bg-yellow-500/10 text-yellow-400' : 'bg-green-500/10 text-green-400'}">
+                            <span class="mt-0.5 flex-shrink-0">•</span>
+                            <span class="text-sm break-all">${i.msg}</span>
+                        </div>
+                    `).join('');
+                }
+                
+                // Update Health
+                if (data.broken_links || (data.seo && data.seo.broken_links)) {
+                     const broken = data.broken_links || data.seo.broken_links || [];
+                     const totalLinks = (data.seo ? (data.seo.links_internal + data.seo.links_external) : 0);
+                     const brokenCount = broken.length;
+                     const okCount = Math.max(0, totalLinks - brokenCount);
+
+                     const okEl = document.getElementById('health-total-ok');
+                     const brokenEl = document.getElementById('health-total-broken');
+                     if(okEl) okEl.textContent = okCount;
+                     if(brokenEl) brokenEl.textContent = brokenCount;
+
+                     const brokenList = document.getElementById('health-broken-list');
+                     if (brokenList) {
+                        if (broken.length > 0) {
+                            brokenList.innerHTML = broken.map(link => `
+                                <div class="p-3 bg-red-500/10 rounded-lg border border-red-500/20 flex flex-col gap-1">
+                                    <div class="flex justify-between items-start">
+                                        <span class="text-xs font-bold text-red-400 bg-red-500/20 px-2 py-0.5 rounded">${link.status}</span>
+                                        <span class="text-[10px] text-slate-500 uppercase tracking-wider">${link.is_internal ? 'Internal' : 'External'}</span>
+                                    </div>
+                                    <a href="${link.url}" target="_blank" class="text-sm text-slate-300 hover:text-white hover:underline truncate" title="${link.url}">${link.url}</a>
+                                    <p class="text-xs text-slate-500 truncate">Text: "${link.text || 'N/A'}"</p>
+                                </div>
+                            `).join('');
+                        } else {
+                            brokenList.innerHTML = '<p class="text-slate-500 italic text-sm">No broken links found.</p>';
+                        }
+                     }
+                }
+
+                // Update Intel
+                if (data.intel) {
+                    const intel = data.intel;
+
+                    // Contacts
+                    const contactsContainer = document.getElementById('intel-contacts');
+                    let contactHtml = '';
+                    if (intel.emails.length > 0) {
+                        contactHtml += `<div class="mb-3"><div class="text-xs text-slate-500 mb-1">EMAILS</div>`;
+                        contactHtml += intel.emails.map(e => `
+                            <div class="flex items-center gap-2 group">
+                                <span class="w-8 h-8 rounded-lg bg-orange-500/10 flex items-center justify-center text-orange-400">@</span>
+                                <span class="text-white text-sm select-all">${e}</span>
+                            </div>`).join('');
+                        contactHtml += `</div>`;
+                    }
+                    if (intel.phones.length > 0) {
+                        contactHtml += `<div><div class="text-xs text-slate-500 mb-1">PHONES</div>`;
+                        contactHtml += intel.phones.map(p => `
+                            <div class="flex items-center gap-2 group">
+                                <span class="w-8 h-8 rounded-lg bg-orange-500/10 flex items-center justify-center text-orange-400">📞</span>
+                                <span class="text-white text-sm select-all">${p}</span>
+                            </div>`).join('');
+                        contactHtml += `</div>`;
+                    }
+                    if (!contactHtml) contactHtml = '<p class="text-slate-500 italic text-sm">No contact info found.</p>';
+                    contactsContainer.innerHTML = contactHtml;
+
+                    // Locations
+                    const locationContainer = document.getElementById('intel-locations');
+                    if (intel.locations && intel.locations.length > 0) {
+                         locationContainer.innerHTML = intel.locations.map(acc => `
+                            <div class="flex items-start gap-2 group">
+                                <svg class="w-5 h-5 text-orange-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
+                                <span class="text-white text-sm select-all">${acc}</span>
+                            </div>
+                         `).join('');
+                    } else {
+                        locationContainer.innerHTML = '<p class="text-slate-500 italic text-sm">No locations found.</p>';
+                    }
+
+                    // Socials
+                    const socialContainer = document.getElementById('intel-socials');
+                    if (intel.socials.length > 0) {
+                        socialContainer.innerHTML = intel.socials.map(s => `
+                            <a href="${s.url}" target="_blank" class="p-3 rounded-xl bg-slate-800/50 hover:bg-slate-700/50 border border-slate-700 hover:border-orange-500/50 transition-all flex items-center gap-3">
+                                <div class="w-10 h-10 rounded-lg bg-orange-500/10 flex items-center justify-center text-orange-400 font-bold text-lg">${s.platform[0]}</div>
+                                <div class="overflow-hidden">
+                                    <h4 class="text-white text-sm font-medium truncate">${s.platform}</h4>
+                                    <p class="text-slate-500 text-xs truncate">View Profile</p>
+                                </div>
+                            </a>
+                        `).join('');
+                    } else {
+                        socialContainer.innerHTML = '<p class="text-slate-500 italic text-sm col-span-full">No social profiles found.</p>';
+                    }
+
+                    // AI Analysis
+                    if (intel.ai_analysis) {
+                        const ai = intel.ai_analysis;
+                        const scoreEl = document.getElementById('ai-sentiment-score');
+                        const labelEl = document.getElementById('ai-sentiment-label');
+                        const barEl = document.getElementById('ai-sentiment-bar');
+                        const keywordsContainer = document.getElementById('ai-keywords');
+                        const summaryEl = document.getElementById('ai-summary');
+                        const readScoreEl = document.getElementById('ai-readability-score');
+                        const readLabelEl = document.getElementById('ai-readability-label');
+                        const readBarEl = document.getElementById('ai-readability-bar');
+                        
+                        // Sentiment
+                        const polarity = ai.sentiment.polarity; // -1 to 1
+                        const score = Math.round(((polarity + 1) / 2) * 100); // 0 to 100
+                        
+                        if(scoreEl) scoreEl.textContent = score;
+                        if(labelEl) labelEl.textContent = `${ai.sentiment.label} (${ai.sentiment.subjectivity_label})`;
+                        
+                        // Color & Label Style
+                        let colorClass = 'text-yellow-400';
+                        if(score >= 60) colorClass = 'text-green-400';
+                        else if(score <= 40) colorClass = 'text-red-400';
+                        
+                        labelEl.className = `mb-1.5 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide bg-slate-800 ${colorClass}`;
+
+                        // Bar Animation (Center Out)
+                        const percentage = Math.abs(polarity) * 50; // 0 to 50%
+                        if(barEl) {
+                            barEl.style.width = `${percentage}%`;
+                            
+                            if (polarity >= 0) {
+                                barEl.style.left = '50%';
+                                barEl.className = 'h-full absolute top-0 transition-all duration-1000 ease-out bg-gradient-to-r from-green-500 to-emerald-400';
+                            } else {
+                                barEl.style.left = `${50 - percentage}%`;
+                                barEl.className = 'h-full absolute top-0 transition-all duration-1000 ease-out bg-gradient-to-r from-red-500 to-rose-400';
+                            }
+                        }
+                        
+                        // Summary
+                        if(summaryEl) summaryEl.textContent = ai.summary || 'No summary available.';
+
+                        // Readability
+                        if(ai.readability) {
+                            const rScore = ai.readability.score;
+                            if(readScoreEl) readScoreEl.textContent = rScore;
+                            if(readLabelEl) readLabelEl.textContent = ai.readability.level;
+                            
+                            // 0-100 scale (approx)
+                            let rPercent = Math.max(0, Math.min(100, rScore));
+                            if(readBarEl) {
+                                readBarEl.style.width = `${rPercent}%`;
+                                // Green = Easy (High score), Red = Hard (Low score)
+                                if(rScore > 60) readBarEl.className = 'h-full w-0 transition-all duration-1000 bg-gradient-to-r from-green-500 to-emerald-400';
+                                else if(rScore > 40) readBarEl.className = 'h-full w-0 transition-all duration-1000 bg-gradient-to-r from-yellow-500 to-orange-400';
+                                else readBarEl.className = 'h-full w-0 transition-all duration-1000 bg-gradient-to-r from-red-500 to-rose-400';
+                            }
+                        }
+
+                        // Keywords
+                        if (keywordsContainer && ai.keywords && ai.keywords.length > 0) {
+                            keywordsContainer.innerHTML = ai.keywords.map(k => `
+                                <span class="px-3 py-1.5 rounded-lg bg-slate-800 border border-slate-700 text-slate-300 text-xs hover:border-purple-500/50 hover:text-purple-300 transition-colors cursor-default">${k}</span>
+                            `).join('');
+                        } else if (keywordsContainer) {
+                            keywordsContainer.innerHTML = '<span class="text-slate-500 italic text-xs">No key topics detected.</span>';
+                        }
+                    }
+
+                    // Tech Stack
+                    const stackContainer = document.getElementById('intel-stack');
+                    if (intel.tech_stack.length > 0) {
+                        stackContainer.innerHTML = intel.tech_stack.map(t => `
+                            <span class="px-3 py-1 bg-slate-800 border border-slate-700 text-slate-300 rounded-full text-xs hover:border-orange-500/50 hover:text-orange-300 transition-colors cursor-default">
+                                ${t}
+                            </span>
+                        `).join('');
+                    } else {
+                        stackContainer.innerHTML = '<p class="text-slate-500 italic text-sm">No technologies detected.</p>';
+                    }
+                }
+                
+                // Update Design
+                if(data.design) {
+                    const design = data.design;
+                    document.getElementById('design-colors').innerHTML = design.colors.map(c => `
+                        <div onclick="navigator.clipboard.writeText('${c}')" class="cursor-pointer group relative h-20 rounded-xl transition-transform hover:scale-105 shadow-lg flex items-end p-2" style="background-color: ${c}">
+                            <div class="bg-black/40 backdrop-blur-sm px-2 py-1 rounded text-xs text-white font-mono opacity-0 group-hover:opacity-100 transition-opacity w-full text-center">
+                                ${c}
+                            </div>
+                        </div>
+                    `).join('');
+
+                    document.getElementById('design-fonts').innerHTML = design.fonts.map(f => `
+                        <div class="glass-dark p-4 rounded-xl border border-white/5 flex items-center justify-between">
+                            <span class="text-white font-medium truncate">${f}</span>
+                            <span class="text-xs text-slate-500 font-mono">Font Family</span>
+                        </div>
+                    `).join('');
+                }
+
+                // Update preview
+                document.getElementById('preview-frame').src = '/download/index.html?' + Date.now();
+
+                // Update images
+                if (data.images && data.images.length > 0) {
+                    const grid = document.getElementById('images-grid');
+                    grid.innerHTML = data.images.map(img => `
+                            <div class="relative group aspect-square bg-slate-800 rounded-xl overflow-hidden border border-slate-700 cursor-pointer" data-img-src="${img}">
+                                <img src="${img}" data-src="${img}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" loading="lazy" onerror="this.style.display='none'">
+                                <div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3">
+                                    <button data-img-src="${img}" class="p-2.5 bg-slate-700 hover:bg-slate-600 text-white rounded-lg transition-all" title="View Full Size">
+                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
+                                    </button>
+                                    <a href="${img}" download class="p-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-all" title="Download Image" onclick="event.stopPropagation()">
+                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
+                                    </a>
+                                </div>
+                            </div>
+                        `).join('');
+                }
+
+                // Update videos
+                if (data.videos && data.videos.length > 0) {
+                    const vGrid = document.getElementById('videos-grid');
+                    vGrid.innerHTML = data.videos.map((vid, idx) => `
+                            <div class="video-card rounded-xl overflow-hidden bg-slate-800/50 border border-slate-700 transition-all duration-300 hover:border-indigo-500/50">
+                                <div class="relative cursor-pointer group" onclick="openVideoModal('${vid.url}')">
+                                    <div class="w-full aspect-video bg-gradient-to-br from-slate-700 to-slate-800 flex items-center justify-center">
+                                        <svg class="w-16 h-16 text-white/80 group-hover:text-indigo-400 group-hover:scale-110 transition-all duration-300" fill="currentColor" viewBox="0 0 24 24">
+                                            <path d="M8 5v14l11-7z"/>
+                                        </svg>
+                                    </div>
+                                    <div class="absolute inset-0 bg-black/30 group-hover:bg-black/10 transition-colors"></div>
+                                </div>
+                                <div class="p-4">
+                                    <h4 class="text-white font-semibold text-sm mb-1 truncate">Video ${idx + 1}</h4>
+                                    <p class="text-slate-400 text-xs mb-3 truncate">${vid.filename}</p>
+                                    <div class="flex gap-2">
+                                        <button onclick="openVideoModal('${vid.url}')" class="flex-1 px-3 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg text-xs font-semibold transition-all flex items-center justify-center gap-1">
+                                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+                                            <span class="hidden sm:inline">Play</span>
+                                        </button>
+                                        <a href="${vid.url}" download class="px-3 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg text-xs font-semibold transition-all flex items-center gap-1">
+                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
+                                            <span class="hidden sm:inline">Download</span>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        `).join('');
+
+                    // Initialize Players
+                    setTimeout(() => {
+                        data.videos.forEach((vid, idx) => {
+                            const video = document.getElementById(`vid-${idx}`);
+                            if (vid.is_m3u8) {
+                                if (Hls.isSupported()) {
+                                    const hls = new Hls();
+                                    hls.loadSource(vid.original_url);
+                                    hls.attachMedia(video);
+                                } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                                    video.src = vid.original_url;
+                                }
+                            }
+                        });
+                    }, 100);
+                }
+
+                // Add to history
+                addToHistory(url);
+            }
+        }
+    } catch (err) {
+        // loading.classList.add('hidden'); // 'loading' var not defined in scope, safer to remove or ignore
+        showError(err.message || 'Failed to scrape website');
+    }
+}
+
+function copyVideoLink(url) {
+    navigator.clipboard.writeText(url).then(() => {
+        alert('Video link copied to clipboard!');
+    }).catch(() => {
+        showError('Failed to copy link');
+    });
+}
+
+// History Management
+function addToHistory(url) {
+    const historyList = document.getElementById('history-list');
+    const btn = document.createElement('button');
+    btn.className = 'px-3 py-1.5 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-lg text-xs text-slate-300 transition-all truncate max-w-[200px]';
+    try {
+        const domain = new URL(url).hostname;
+        btn.textContent = domain;
+    } catch {
+        btn.textContent = url;
+    }
+    btn.onclick = () => {
+        document.getElementById('urlInput').value = url;
+        scrapeWebsite();
+    };
+    historyList.prepend(btn);
+    
+    // Only remove placeholder text, don't auto-show history
+    // User must click the History button to see recent scrapes
+
+    // Remove placeholder
+    const placeholder = historyList.querySelector('span.italic');
+    if (placeholder) placeholder.remove();
+
+    // Animate button
+    if (window.animate) {
+        animate(btn, { opacity: [0, 1], y: [-10, 0] }, { duration: 0.3 });
+    }
+}
+
+
+
+// Code Editor Functions
+async function loadEditorContent() {
+    const filename = document.getElementById('editor-filename').value;
+    try {
+        const response = await fetch(`/download/${filename}`);
+        const text = await response.text();
+        document.getElementById('code-editor').value = text;
+    } catch (e) {
+        document.getElementById('code-editor').value = '// Failed to load file';
+    }
+}
+
+function editFile(filename) {
+    document.getElementById('editor-filename').value = filename;
+    switchTab('code');
+    loadEditorContent();
+}
+
+function handleTab(e) {
+    if (e.key === 'Tab') {
+        e.preventDefault();
+        const start = e.target.selectionStart;
+        const end = e.target.selectionEnd;
+        e.target.value = e.target.value.substring(0, start) + '    ' + e.target.value.substring(end);
+        e.target.selectionStart = e.target.selectionEnd = start + 4;
+    }
+}
+
+async function saveCode() {
+    const filename = document.getElementById('editor-filename').value;
+    const content = document.getElementById('code-editor').value;
+
+    try {
+        await fetch('/api/save', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ filename, content })
+        });
+        document.getElementById('preview-frame').src = '/download/index.html?' + Date.now();
+        alert('Saved successfully!');
+    } catch (e) {
+        showError('Failed to save file');
+    }
+}
+
+function formatCode() {
+    const editor = document.getElementById('code-editor');
+    let code = editor.value;
+    code = code.replace(/>\\s*</g, '>\\n<').replace(/\\n\\s*\\n/g, '\\n');
+    editor.value = code;
+}
+
+// Download ZIP
+function downloadZip() {
+    window.open('/api/download-zip', '_blank');
+}
+
+// Clear Files
+async function clearFiles() {
+    try {
+        await fetch('/api/clear', { method: 'POST' });
+        document.getElementById('results').classList.add('hidden');
+        document.getElementById('preview-frame').src = '';
+    } catch (err) {
+        showError('Failed to clear files');
+    }
+}
+
+function showError(msg) {
+    const errorEl = document.getElementById('error');
+    document.getElementById('errorMsg').textContent = msg;
+    errorEl.classList.remove('hidden');
+    setTimeout(() => errorEl.classList.add('hidden'), 5000);
+}
+
+// Entry animation & Auto-Clear
+document.addEventListener('DOMContentLoaded', () => {
+    // Auto-clear scraped files on reload/load
+    fetch('/api/clear', { method: 'POST' }).catch(err => console.error('Auto-clear failed:', err));
+
+    setTimeout(() => {
+        document.getElementById('main-header').classList.remove('opacity-0', 'translate-y-[-20px]');
+        document.getElementById('input-section').classList.remove('opacity-0', 'scale-95');
+    }, 100);
+
+    // --- Image Forensics Drag \u0026 Drop + URL Monitoring ---
+    const dropZone = document.getElementById('drop-zone');
+    const imageUrlInput = document.getElementById('imageUrlInput');
+    const analyzeBtn = document.getElementById('analyzeImageBtn');
+
+    if (dropZone) {
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, e => {
+                e.preventDefault();
+                e.stopPropagation();
+            }, false);
+        });
+
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropZone.addEventListener(eventName, () => dropZone.classList.add('border-indigo-500', 'bg-slate-800/50'), false);
+        });
+
+        ['dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, () => dropZone.classList.remove('border-indigo-500', 'bg-slate-800/50'), false);
+        });
+
+        dropZone.addEventListener('drop', e => {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            const input = document.getElementById('imageInput');
+            input.files = files;
+            handleImageUpload(input);
+        }, false);
+    }
+
+    if (imageUrlInput) {
+        imageUrlInput.addEventListener('input', () => {
+            if (imageUrlInput.value.trim().length > 0) {
+                analyzeBtn.classList.remove('hidden');
+            } else {
+                analyzeBtn.classList.add('hidden');
+            }
+        });
+
+        imageUrlInput.addEventListener('keydown', e => {
+            if (e.key === 'Enter') {
+                analyzeImage();
+            }
+        });
+    }
+});
+
+// Video Modal Functions
+function openVideoModal(src) {
+    const dialog = document.getElementById('video-modal');
+    const video = document.getElementById('modal-video');
+    video.src = src;
+    dialog.showModal();
+    requestAnimationFrame(() => {
+        video.classList.remove('scale-95', 'opacity-0');
+        video.classList.add('scale-100', 'opacity-100');
+    });
+}
+function closeVideoModal() {
+    const dialog = document.getElementById('video-modal');
+    const video = document.getElementById('modal-video');
+    video.classList.remove('scale-100', 'opacity-100');
+    video.classList.add('scale-95', 'opacity-0');
+    setTimeout(() => {
+        dialog.close();
+        video.pause();
+        video.src = '';
+    }, 300);
+}
+
+// --- FLICKERING GRID BACKGROUND ---
+class FlickeringGrid {
+    constructor(canvasId) {
+        this.canvas = document.getElementById(canvasId);
+        this.ctx = this.canvas.getContext('2d');
+        this.squareSize = 4;
+        this.gridGap = 6;
+        this.flickerChance = 0.05;
+        this.color = '0, 255, 65'; // Neon Green
+        this.maxOpacity = 0.4;
+        
+        this.squares = [];
+        this.resize();
+        
+        window.addEventListener('resize', () => this.resize());
+        this.animate();
+    }
+
+    resize() {
+        this.width = this.canvas.width = window.innerWidth;
+        this.height = this.canvas.height = window.innerHeight;
+        
+        const cols = Math.ceil(this.width / (this.squareSize + this.gridGap));
+        const rows = Math.ceil(this.height / (this.squareSize + this.gridGap));
+        
+        this.squares = new Float32Array(cols * rows);
+        this.cols = cols;
+        this.rows = rows;
+        
+        // Init opacities
+        for (let i = 0; i < this.squares.length; i++) {
+            this.squares[i] = Math.random() * this.maxOpacity;
+        }
+    }
+
+    animate() {
+        this.ctx.clearRect(0, 0, this.width, this.height);
+        this.ctx.fillStyle = `rgb(${this.color})`;
+
+        for (let i = 0; i < this.squares.length; i++) {
+            // Random flicker
+            if (Math.random() < this.flickerChance) {
+                this.squares[i] = Math.random() * this.maxOpacity;
+            }
+
+            // Draw
+            const col = i % this.cols;
+            const row = Math.floor(i / this.cols);
+            const x = col * (this.squareSize + this.gridGap);
+            const y = row * (this.squareSize + this.gridGap);
+
+            this.ctx.globalAlpha = this.squares[i];
+            this.ctx.fillRect(x, y, this.squareSize, this.squareSize);
+        }
+        
+        requestAnimationFrame(() => this.animate());
+    }
+}
+
+// Init on load
+window.addEventListener('DOMContentLoaded', () => {
+    // Check if element exists before init to prevent errors
+    if(document.getElementById('flickering-grid')) {
+        new FlickeringGrid('flickering-grid'); 
+    }
+});
+
+// --- IMAGE ANALYSIS FEATURE ---
+let currentMode = 'scrape';
+
+function toggleImageMode() {
+    const btn = document.getElementById('btn-image-mode');
+    const scraperMode = document.getElementById('mode-scraper');
+    const imageMode = document.getElementById('mode-image');
+    
+    // Check if we are currently in image mode
+    const isImageMode = currentMode === 'image';
+
+    if (isImageMode) {
+        // Switch to Scrape Mode
+        currentMode = 'scrape';
+        scraperMode.classList.remove('hidden');
+        imageMode.classList.add('hidden');
+        
+        // Update Button Style (Inactive)
+        btn.classList.remove('text-indigo-400', 'bg-slate-800/50');
+        btn.classList.add('text-slate-400');
+        
+        // Hide image results, show scrape results if they exist
+        document.getElementById('image-results').classList.add('hidden');
+        if(document.querySelector('.active-results')) document.getElementById('results').classList.remove('hidden');
+        
+    } else {
+        // Switch to Image Mode
+        currentMode = 'image';
+        scraperMode.classList.add('hidden');
+        imageMode.classList.remove('hidden');
+        
+        // Update Button Style (Active)
+        btn.classList.add('text-indigo-400', 'bg-slate-800/50');
+        btn.classList.remove('text-slate-400');
+        
+        // Hide scrape results
+        document.getElementById('results').classList.add('hidden');
+    }
+}
+
+function handleImageUpload(input) {
+    if (input.files && input.files[0]) {
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            document.getElementById('image-preview').src = e.target.result;
+            document.getElementById('image-preview-container').classList.remove('hidden');
+            document.getElementById('drop-content').classList.add('hidden');
+            
+            // Auto Analyze on upload
+            analyzeImage();
+
+            // Hide URL input if image is uploaded
+            const sep = document.getElementById('url-separator');
+            const cont = document.getElementById('url-input-container');
+            if(sep) sep.classList.add('hidden');
+            if(cont) cont.classList.add('hidden');
+        }
+        reader.readAsDataURL(input.files[0]);
+    }
+}
+
+function clearImage() {
+    document.getElementById('imageInput').value = '';
+    document.getElementById('image-preview').src = '';
+    document.getElementById('image-preview-container').classList.add('hidden');
+    document.getElementById('drop-content').classList.remove('hidden');
+
+    // Show URL input again
+    const sep = document.getElementById('url-separator');
+    const cont = document.getElementById('url-input-container');
+    if(sep) sep.classList.remove('hidden');
+    if(cont) cont.classList.remove('hidden');
+}
+
+function copyToClipboard(text) {
+    navigator.clipboard.writeText(text);
+    // Optional: Toast notification
+}
+
+function showError(msg) {
+    const errorEl = document.getElementById('error');
+    if(errorEl) {
+        errorEl.classList.remove('hidden');
+        document.getElementById('errorMsg').textContent = msg;
+    } else {
+        alert(msg);
+    }
+}
+
+async function analyzeImage() {
+    const inputSection = document.getElementById('input-inner-container');
+    const results = document.getElementById('image-results');
+    const error = document.getElementById('error');
+    
+    // Hide previous results
+    document.getElementById('results').classList.add('hidden');
+    error.classList.add('hidden');
+    results.classList.add('hidden');
+    
+    inputSection.classList.add('loading-beam-border');
+    
+    try {
+        const formData = new FormData();
+        const fileInput = document.getElementById('imageInput');
+        const urlInput = document.getElementById('imageUrlInput');
+        
+        let hasData = false;
+        
+        if (fileInput.files.length > 0) {
+            formData.append('file', fileInput.files[0]);
+            hasData = true;
+        } else if (urlInput.value.trim()) {
+            formData.append('url', urlInput.value.trim());
+            hasData = true;
+        }
+        
+        if (!hasData) {
+             showError('Please upload an image or provide a URL');
+             inputSection.classList.remove('loading-beam-border');
+             return;
+        }
+        
+        const response = await fetch('/api/analyze-image', {
+            method: 'POST',
+            body: fileInput.files.length > 0 ? formData : JSON.stringify({url: urlInput.value.trim()}),
+            headers: fileInput.files.length > 0 ? {} : {'Content-Type': 'application/json'}
+        });
+        
+        const data = await response.json();
+        
+        if (data.success) {
+            inputSection.classList.remove('loading-beam-border');
+            
+            // Show Image Results
+            results.classList.remove('hidden');
+            
+            // Render Data
+            const meta = data.data;
+            let imgSrc = '';
+            if (data.source === 'upload') {
+                 imgSrc = document.getElementById('image-preview').src;
+            } else {
+                 imgSrc = urlInput.value.trim();
+            }
+            document.getElementById('result-image-preview').src = imgSrc;
+            
+            // Location
+            const locDiv = document.getElementById('result-location');
+            if (meta.location) {
+                locDiv.innerHTML = `
+                    <div class="flex flex-col gap-2">
+                        <div class="flex items-center gap-2 text-green-400 font-mono">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
+                            <span class="font-bold">${meta.location.lat.toFixed(6)}, ${meta.location.lon.toFixed(6)}</span>
+                        </div>
+                        <a href="${meta.location.map_url}" target="_blank" class="px-4 py-2 bg-indigo-600 rounded-lg text-white text-xs font-semibold hover:bg-indigo-500 transition-colors inline-block text-center">View on Google Maps</a>
+                    </div>
+                `;
+            } else {
+                locDiv.innerHTML = '<span class="italic text-slate-500">No GPS coordinates embedded in this image.</span>';
+            }
+
+            // AI Detection Results (Quick Flagging)
+            if (data.ai_detection) {
+                const ai = data.ai_detection;
+                const scoreText = document.getElementById('result-ai-score-text');
+                const scoreCircle = document.getElementById('result-ai-score-circle');
+                const label = document.getElementById('result-ai-label');
+                
+                // Likelihood of REAL = 100 - manipulation likelihood
+                const realLikelihood = Math.max(0, 100 - ai.score);
+                scoreText.innerText = `${Math.round(realLikelihood)}%`;
+                
+                // SVG Circle Progress (circumference = 113)
+                const offset = 113 - (113 * realLikelihood) / 100;
+                scoreCircle.style.strokeDashoffset = offset;
+                
+                // Colors and Labels
+                label.innerText = ai.label;
+                if (ai.score > 80) {
+                    label.className = 'text-red-500 font-bold text-sm';
+                    scoreCircle.className = 'text-red-500';
+                } else if (ai.score > 50) {
+                    label.className = 'text-yellow-500 font-bold text-sm';
+                    scoreCircle.className = 'text-yellow-500';
+                } else {
+                    label.className = 'text-green-500 font-bold text-sm';
+                    scoreCircle.className = 'text-green-500';
+                }
+
+                // Also update the detailed forensics block if it's visible or for future sync
+                const detailedScoreVal = document.getElementById('ai-score-val');
+                if (detailedScoreVal) {
+                    detailedScoreVal.innerText = `${ai.score}%`;
+                    const detailedScoreBar = document.getElementById('ai-score-bar');
+                    detailedScoreBar.style.width = `${ai.score}%`;
+                    document.getElementById('ai-label').innerText = ai.label;
+                    document.getElementById('ai-details').innerText = `Frequency Domain Analysis: ${ai.details}`;
+                    document.getElementById('ai-result-container').classList.remove('hidden');
+                }
+            }
+            
+            // Camera/Basic Info
+            const format = meta.basic.Format || 'Unknown';
+            const size = meta.basic.Size || 'Unknown';
+            const model = (meta.exif.Make ? meta.exif.Make + ' ' : '') + (meta.exif.Model || 'Unknown Camera');
+             document.getElementById('result-camera').innerHTML = `
+                <div class="space-y-2">
+                    <div class="flex justify-between border-b border-slate-700/50 pb-1"><span class="text-slate-500">Device</span> <span class="text-white font-medium text-right">${model}</span></div>
+                    <div class="flex justify-between border-b border-slate-700/50 pb-1"><span class="text-slate-500">Format</span> <span class="text-white font-medium text-right">${format}</span></div>
+                    <div class="flex justify-between border-b border-slate-700/50 pb-1"><span class="text-slate-500">Dimensions</span> <span class="text-white font-medium text-right">${size}</span></div>
+                    <div class="flex justify-between pb-1"><span class="text-slate-500">Color Mode</span> <span class="text-white font-medium text-right">${meta.basic.Mode}</span></div>
+                </div>
+            `;
+
+            // Table
+            const tbody = document.getElementById('result-metadata-body');
+            // Merge Basic + EXIF
+            const allMeta = {...meta.basic, ...meta.exif};
+             // Filter internal
+             const rows = Object.entries(allMeta)
+                .filter(([k, v]) => k !== 'MakerNote' && k !== 'UserComment' && k !== 'components_configuration' && k.length < 50 && typeof v === 'string' && v.length < 100)
+                .map(([k, v]) => `
+                    <tr class="hover:bg-white/5 transition-colors">
+                        <td class="px-4 py-2 font-medium text-indigo-300 border-b border-slate-700/30 w-1/3">${k}</td>
+                        <td class="px-4 py-2 text-slate-300 border-b border-slate-700/30 break-all font-mono text-xs">${v}</td>
+                    </tr>
+                 `).join('');
+             tbody.innerHTML = rows || '<tr><td colspan="2" class="px-4 py-2 text-center italic text-slate-500">No public metadata tags found</td></tr>';
+
+        } else {
+             throw new Error(data.error);
+        }
+
+    } catch (e) {
+        showError(e.message);
+        inputSection.classList.remove('loading-beam-border');
+    }
+}
+
+// --- FORENSICS ---
+async function runELA() {
+    const fileInput = document.getElementById('imageInput');
+    const container = document.getElementById('ela-result-container');
+    const originalPreview = document.getElementById('ela-original-preview');
+    const elaPreview = document.getElementById('ela-result-img');
+    const loading = document.getElementById('ela-loading');
+    
+    if (!fileInput.files || !fileInput.files[0]) {
+        showError("Please upload an image first.");
+        return;
+    }
+    
+    // Show UI
+    container.classList.remove('hidden');
+    loading.classList.remove('hidden');
+    // Clear previous results
+    elaPreview.src = '';
+    
+    // Set original preview if not already set (re-use main preview logic if needed, but safe to set here)
+    const reader = new FileReader();
+    reader.onload = function(e) { 
+        originalPreview.src = e.target.result; 
+    };
+    reader.readAsDataURL(fileInput.files[0]);
+
+    const formData = new FormData();
+    formData.append('image', fileInput.files[0]);
+
+    try {
+        const response = await fetch('/api/analyze/ela', {
+             method: 'POST',
+             body: formData
+        });
+        
+        const data = await response.json();
+        
+        if (data.success) {
+            elaPreview.src = data.ela_image;
+        } else {
+            throw new Error(data.error || "ELA Analysis failed");
+        }
+    } catch (e) {
+        showError(e.message);
+        container.classList.add('hidden'); // Hide on error
+    } finally {
+        loading.classList.add('hidden');
+    }
+}
+
+async function runAIDetection() {
+    const fileInput = document.getElementById('imageInput');
+    const container = document.getElementById('ai-result-container');
+    const loading = document.getElementById('ai-loading');
+    const scoreVal = document.getElementById('ai-score-val');
+    const scoreBar = document.getElementById('ai-score-bar');
+    const label = document.getElementById('ai-label');
+    const details = document.getElementById('ai-details');
+    
+    if (!fileInput.files || !fileInput.files[0]) {
+        showError("Please upload an image first.");
+        return;
+    }
+    
+    // Show UI
+    container.classList.remove('hidden');
+    loading.classList.remove('hidden');
+    
+    // Reset previous results
+    scoreVal.innerText = '0%';
+    scoreBar.style.width = '0%';
+    label.innerText = 'Analyzing...';
+    label.className = 'text-xl font-bold text-white';
+
+    const formData = new FormData();
+    formData.append('image', fileInput.files[0]);
+
+    try {
+        const response = await fetch('/api/analyze/ai', {
+             method: 'POST',
+             body: formData
+        });
+        
+        const data = await response.json();
+        
+        if (data.success) {
+            const result = data.data;
+            
+            // Update score
+            scoreVal.innerText = `${result.score}%`;
+            scoreBar.style.width = `${result.score}%`;
+            
+            // Update label and color
+            label.innerText = result.label;
+            if (result.score > 80) {
+                label.className = 'text-xl font-bold text-red-500';
+                scoreBar.className = 'bg-red-500 h-4 rounded-full transition-all duration-1000';
+            } else if (result.score > 60) {
+                label.className = 'text-xl font-bold text-yellow-500';
+                scoreBar.className = 'bg-yellow-500 h-4 rounded-full transition-all duration-1000';
+            } else {
+                label.className = 'text-xl font-bold text-green-500';
+                scoreBar.className = 'bg-green-500 h-4 rounded-full transition-all duration-1000';
+            }
+            
+            details.innerText = `Frequency Domain Analysis: ${result.details}`;
+        } else {
+            throw new Error(data.error || "AI Detection failed");
+        }
+    } catch (e) {
+        showError(e.message);
+        container.classList.add('hidden');
+    } finally {
+        loading.classList.add('hidden');
+    }
+}
+
+
+// Export Data Function
+async function exportData(type, format) {
+    if (!window.currentScrapeData || !window.currentScrapeData.intel) {
+        showError("No data available to export. Please scrape a site first.");
+        return;
+    }
+
+    let dataToExport = [];
+    let filename = `export_${type}`;
+
+    const intel = window.currentScrapeData.intel;
+
+    if (type === 'emails') {
+        dataToExport = intel.emails;
+    } else if (type === 'phones') {
+        dataToExport = intel.phones;
+    } else if (type === 'socials') {
+        dataToExport = intel.socials;
+    } else if (type === 'locations') {
+         dataToExport = intel.locations;
+    }
+
+    if (!dataToExport || dataToExport.length === 0) {
+        showError(`No ${type} found to export.`);
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/export', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                data: dataToExport,
+                format: format,
+                filename: filename
+            })
+        });
+
+        if (response.ok) {
+            const blob = await response.blob();
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `${filename}.${format}`;
+            document.body.appendChild(a);
+            a.click();
+            window.URL.revokeObjectURL(url);
+            a.remove();
+        } else {
+            const err = await response.json();
+            showError(`Export failed: ${err.error}`);
+        }
+    } catch (e) {
+        showError(`Export error: ${e.message}`);
+    }
+}
+
+// --- TRANSLATION FEATURE ---
+async function translateContent(elementId) {
+    const el = document.getElementById(elementId);
+    const langSelect = document.getElementById('trans-lang');
+    const lang = langSelect ? langSelect.value : 'hi';
+    const text = el.innerText;
+    
+    if(!text || text === '--' || text === '-') return;
+    
+    const btn = window.event ? window.event.target : null;
+    const originalBtnText = btn ? btn.innerText : 'Translate';
+    
+    if(btn) {
+        btn.innerText = 'Translating...';
+        btn.disabled = true;
+    }
+    
+    try {
+        const response = await fetch('/api/translate', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ text, target: lang })
+        });
+        const data = await response.json();
+        if(data.success) {
+            el.innerText = data.translated;
+            el.classList.add('animate-pulse');
+            setTimeout(() => el.classList.remove('animate-pulse'), 1000);
+        } else {
+            showError(data.error);
+        }
+    } catch (e) {
+        showError("Translation failed: " + e.message);
+    } finally {
+        if(btn) {
+            btn.innerText = originalBtnText;
+            btn.disabled = false;
+        }
+    }
+}
+
+async function translatePrompt(elementId) {
+    const lang = prompt("Enter target language code (e.g., hi, es, fr, ja, de):", "hi");
+    if(!lang) return;
+    
+    const el = document.getElementById(elementId);
+    const text = el.innerText;
+    if(!text || text === '-' || text === '--') return;
+    
+    try {
+        const response = await fetch('/api/translate', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ text, target: lang })
+        });
+        const data = await response.json();
+        if(data.success) {
+            el.innerText = data.translated;
+            el.title = "Original: " + text;
+            el.classList.add('animate-pulse');
+            setTimeout(() => el.classList.remove('animate-pulse'), 1000);
+        } else {
+            showError(data.error);
+        }
+    } catch (e) {
+        showError("Translation failed: " + e.message);
+    }
+}
+
+function renderDataTable(data) {
+    const tbody = document.getElementById('intel-table-body');
+    if (!tbody || !data.intel) return;
+
+    let rows = [];
+
+    // Emails
+    if (data.intel.emails && data.intel.emails.length > 0) {
+        data.intel.emails.forEach(email => {
+            rows.push(`
+                <tr class="hover:bg-white/5 transition-colors">
+                    <td class="px-4 py-3 font-medium text-indigo-400">Email</td>
+                    <td class="px-4 py-3 select-all font-mono">${email}</td>
+                    <td class="px-4 py-3 text-right">
+                        <button onclick="copyToClipboard('${email}')" class="text-[10px] bg-slate-800 hover:bg-slate-700 px-2 py-1 rounded border border-white/5 uppercase tracking-tighter">Copy</button>
+                    </td>
+                </tr>
+            `);
+        });
+    }
+
+    // Phones
+    if (data.intel.phones && data.intel.phones.length > 0) {
+        data.intel.phones.forEach(phone => {
+            rows.push(`
+                <tr class="hover:bg-white/5 transition-colors">
+                    <td class="px-4 py-3 font-medium text-orange-400">Phone</td>
+                    <td class="px-4 py-3 select-all font-mono">${phone}</td>
+                    <td class="px-4 py-3 text-right">
+                        <button onclick="copyToClipboard('${phone}')" class="text-[10px] bg-slate-800 hover:bg-slate-700 px-2 py-1 rounded border border-white/5 uppercase tracking-tighter">Copy</button>
+                    </td>
+                </tr>
+            `);
+        });
+    }
+
+    // Socials
+    if (data.intel.socials && data.intel.socials.length > 0) {
+        data.intel.socials.forEach(social => {
+            rows.push(`
+                <tr class="hover:bg-white/5 transition-colors">
+                    <td class="px-4 py-3 font-medium text-pink-400">Social</td>
+                    <td class="px-4 py-3 truncate max-w-[200px]" title="${social.url}">${social.platform}: ${social.url}</td>
+                    <td class="px-4 py-3 text-right">
+                        <a href="${social.url}" target="_blank" class="text-[10px] bg-indigo-500/20 hover:bg-indigo-500/30 text-indigo-300 px-2 py-1 rounded border border-indigo-500/30 inline-block uppercase tracking-tighter">Visit</a>
+                    </td>
+                </tr>
+            `);
+        });
+    }
+
+    // Locations
+    if (data.intel.locations && data.intel.locations.length > 0) {
+        data.intel.locations.forEach(loc => {
+            rows.push(`
+                <tr class="hover:bg-white/5 transition-colors">
+                    <td class="px-4 py-3 font-medium text-green-400">Location</td>
+                    <td class="px-4 py-3 select-all">${loc}</td>
+                    <td class="px-4 py-3 text-right">
+                        <button onclick="copyToClipboard('${loc}')" class="text-[10px] bg-slate-800 hover:bg-slate-700 px-2 py-1 rounded border border-white/5 uppercase tracking-tighter">Copy</button>
+                    </td>
+                </tr>
+            `);
+        });
+    }
+
+    // Design Colors
+    if (data.design && data.design.colors && data.design.colors.length > 0) {
+        data.design.colors.forEach(color => {
+            rows.push(`
+                <tr class="hover:bg-white/5 transition-colors">
+                    <td class="px-4 py-3 font-medium text-pink-400">Color</td>
+                    <td class="px-4 py-3">
+                        <div class="flex items-center gap-2">
+                            <div class="w-4 h-4 rounded shadow-sm border border-white/10" style="background-color: ${color}"></div>
+                            <span class="font-mono text-xs">${color}</span>
+                        </div>
+                    </td>
+                    <td class="px-4 py-3 text-right">
+                        <button onclick="copyToClipboard('${color}')" class="text-[10px] bg-slate-800 hover:bg-slate-700 px-2 py-1 rounded border border-white/5 uppercase tracking-tighter">Copy</button>
+                    </td>
+                </tr>
+            `);
+        });
+    }
+
+    // Design Fonts
+    if (data.design && data.design.fonts && data.design.fonts.length > 0) {
+        data.design.fonts.forEach(font => {
+            rows.push(`
+                <tr class="hover:bg-white/5 transition-colors">
+                    <td class="px-4 py-3 font-medium text-cyan-400">Font</td>
+                    <td class="px-4 py-3 truncate max-w-[200px] font-mono text-xs">${font}</td>
+                    <td class="px-4 py-3 text-right">
+                        <button onclick="copyToClipboard('${font}')" class="text-[10px] bg-slate-800 hover:bg-slate-700 px-2 py-1 rounded border border-white/5 uppercase tracking-tighter">Copy</button>
+                    </td>
+                </tr>
+            `);
+        });
+    }
+
+    if (rows.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="3" class="px-4 py-8 text-center text-slate-500 italic">No intelligence data found on this page.</td></tr>';
+    } else {
+        tbody.innerHTML = rows.join('');
+    }
+}