<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URX Pro - Advanced Web OSINT Collector</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        :root {
            --primary: #6366f1;
            --primary-dark: #4f46e5;
            --secondary: #10b981;
            --dark: #1e293b;
            --light: #f8fafc;
        }
        body {
            font-family: 'Inter', sans-serif;
        }
        .dark {
            --primary: #818cf8;
            --primary-dark: #6366f1;
            --secondary: #34d399;
            --dark: #f8fafc;
            --light: #1e293b;
        }
        .terminal {
            font-family: 'Courier New', monospace;
            background-color: #1a1a1a;
        }
        .progress-bar {
            height: 4px;
            background-color: #e2e8f0;
        }
        .progress-fill {
            height: 100%;
            background-color: var(--primary);
            transition: width 0.3s ease;
        }
        .threat-high {
            background-color: rgba(239, 68, 68, 0.1);
            border-left: 3px solid #ef4444;
        }
        .threat-medium {
            background-color: rgba(245, 158, 11, 0.1);
            border-left: 3px solid #f59e0b;
        }
        .threat-low {
            background-color: rgba(16, 185, 129, 0.1);
            border-left: 3px solid #10b981;
        }
        .heatmap-container {
            width: 100%;
            height: 400px;
            position: relative;
        }
        .tooltip {
            position: absolute;
            padding: 8px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            border-radius: 4px;
            pointer-events: none;
            font-size: 12px;
            z-index: 10;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-300">
    <header class="bg-white dark:bg-gray-800 shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white font-bold text-xl">URX</div>
                <h1 class="text-2xl font-bold bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">URX Web OSINT Pro</h1>
            </div>
            <div class="flex items-center space-x-4">
                <button id="api-btn" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg text-sm font-medium">
                    API Docs
                </button>
                <button id="auth-btn" class="px-4 py-2 bg-indigo-500 text-white rounded-lg text-sm font-medium">
                    Sign In
                </button>
                <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition">
                    <i class="fas fa-moon dark:hidden"></i>
                    <i class="fas fa-sun hidden dark:block"></i>
                </button>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-8">
        <section class="max-w-6xl mx-auto">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-8">
                <h2 class="text-2xl font-bold mb-4">Advanced OSINT URL Collection</h2>
                <div class="mb-6">
                    <label class="block text-sm font-medium mb-2">Domains (comma separated)</label>
                    <textarea id="domains" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700" placeholder="example.com, example.org"></textarea>
                </div>
                
                <div class="grid md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <h3 class="font-medium mb-3">Collection Options</h3>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" class="form-checkbox text-indigo-600" name="subs" checked>
                                <span class="ml-2">Include subdomains</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" class="form-checkbox text-indigo-600" name="deep-search">
                                <span class="ml-2">Deep search (aggressive crawling)</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" class="form-checkbox text-indigo-600" name="check-status" checked>
                                <span class="ml-2">Check URL status</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" class="form-checkbox text-indigo-600" name="extract-links" checked>
                                <span class="ml-2">Extract additional links</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" class="form-checkbox text-indigo-600" name="ml-analysis" checked>
                                <span class="ml-2">Enable ML analysis</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" class="form-checkbox text-indigo-600" name="threat-detection" checked>
                                <span class="ml-2">Real-time threat detection</span>
                            </label>
                        </div>
                    </div>
                    
                    <div>
                        <h3 class="font-medium mb-3">Filters</h3>
                        <div class="grid md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium mb-1">Include extensions</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700" placeholder="js,php,html" name="extensions">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Exclude extensions</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700" placeholder="jpg,png,gif" name="exclude-extensions">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Include patterns</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700" placeholder="api,login,admin" name="patterns">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Exclude patterns</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700" placeholder="static,images" name="exclude-patterns">
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="flex justify-between items-center">
                    <button id="start-btn" class="bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-2 rounded-lg font-medium transition flex items-center">
                        <i class="fas fa-play mr-2"></i> Start Collection
                    </button>
                    <div class="flex space-x-3">
                        <button id="stop-btn" class="border border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-gray-700 px-6 py-2 rounded-lg font-medium transition opacity-0 pointer-events-none">
                            <i class="fas fa-stop mr-2"></i> Stop
                        </button>
                        <button id="download-btn" class="border border-indigo-500 text-indigo-500 hover:bg-indigo-50 dark:hover:bg-gray-700 px-6 py-2 rounded-lg font-medium transition opacity-0 pointer-events-none">
                            <i class="fas fa-download mr-2"></i> Export Results
                        </button>
                    </div>
                </div>
                
                <div id="progress-container" class="mt-4 hidden">
                    <div class="flex justify-between text-sm mb-1">
                        <span>Progress</span>
                        <span id="progress-text">0%</span>
                    </div>
                    <div class="progress-bar">
                        <div id="progress-fill" class="progress-fill" style="width:0%"></div>
                    </div>
                </div>
            </div>
        </section>

        <section class="max-w-6xl mx-auto grid md:grid-cols-3 gap-6 mb-8">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
                <h3 class="font-medium mb-3">Collection Stats</h3>
                <div class="space-y-4">
                    <div>
                        <div class="flex justify-between text-sm mb-1">
                            <span>URLs Collected</span>
                            <span id="urls-count">0</span>
                        </div>
                        <div class="progress-bar">
                            <div id="urls-progress" class="progress-fill bg-green-500" style="width:0%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between text-sm mb-1">
                            <span>Threats Detected</span>
                            <span id="threats-count">0</span>
                        </div>
                        <div class="progress-bar">
                            <div id="threats-progress" class="progress-fill bg-red-500" style="width:0%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between text-sm mb-1">
                            <span>Sensitive Paths</span>
                            <span id="sensitive-count">0</span>
                        </div>
                        <div class="progress-bar">
                            <div id="sensitive-progress" class="progress-fill bg-yellow-500" style="width:0%"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
                <h3 class="font-medium mb-3">Response Codes</h3>
                <canvas id="response-chart" height="200"></canvas>
            </div>
            
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
                <h3 class="font-medium mb-3">Threat Distribution</h3>
                <canvas id="threat-chart" height="200"></canvas>
            </div>
        </section>

        <section class="max-w-6xl mx-auto mb-8">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
                <div class="border-b border-gray-200 dark:border-gray-700 px-6 py-4 flex justify-between items-center">
                    <h3 class="font-medium">Results</h3>
                    <div class="text-sm">
                        <span id="result-count">Found 0</span> URLs
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex mb-4">
                        <input type="text" id="results-filter" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700" placeholder="Filter results...">
                    </div>
                    <div id="terminal" class="terminal rounded-lg overflow-hidden h-96 overflow-y-auto">
                        <table class="w-full text-sm">
                            <thead class="bg-gray-100 dark:bg-gray-700">
                                <tr>
                                    <th class="px-4 py-2 text-left">URL</th>
                                    <th class="px-4 py-2 text-left">Status</th>
                                    <th class="px-4 py-2 text-left">Threat</th>
                                    <th class="px-4 py-2 text-left">Category</th>
                                    <th class="px-4 py-2 text-left">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="results-table" class="divide-y divide-gray-200 dark:divide-gray-700">
                                <!-- Results will be inserted here -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>

        <section class="max-w-6xl mx-auto mb-8">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
                <h2 class="text-2xl font-bold mb-4">Geographical Distribution</h2>
                <div class="heatmap-container" id="heatmap"></div>
            </div>
        </section>

        <section class="max-w-6xl mx-auto">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
                <h2 class="text-2xl font-bold mb-4">Comprehensive Report</h2>
                <div class="grid md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <h3 class="font-medium mb-2">URLs by Extension</h3>
                        <canvas id="extensions-chart" height="200"></canvas>
                    </div>
                    <div>
                        <h3 class="font-medium mb-2">URLs by Category</h3>
                        <canvas id="categories-chart" height="200"></canvas>
                    </div>
                </div>
                
                <div class="mb-6">
                    <h3 class="font-medium mb-3">Export Options</h3>
                    <div class="flex flex-wrap gap-4">
                        <label class="flex items-center">
                            <input type="radio" class="form-radio text-indigo-600" name="format" value="plain" checked>
                            <span class="ml-2">Plain Text</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" class="form-radio text-indigo-600" name="format" value="json">
                            <span class="ml-2">JSON</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" class="form-radio text-indigo-600" name="format" value="csv">
                            <span class="ml-2">CSV</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" class="form-radio text-indigo-600" name="format" value="pdf">
                            <span class="ml-2">PDF</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" class="form-radio text-indigo-600" name="format" value="xlsx">
                            <span class="ml-2">Excel</span>
                        </label>
                    </div>
                </div>
                
                <button id="generate-report" class="bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-2 rounded-lg font-medium transition flex items-center">
                    <i class="fas fa-file-export mr-2"></i> Generate Full Report
                </button>
            </div>
        </section>
    </main>

    <script>
        // Global variables
        let collectionInProgress = false;
        let collectedURLs = [];
        let threatURLs = [];
        let sensitiveURLs = [];
        let mlModel = null;
        let responseCodes = {
            '200': 0,
            '301': 0,
            '302': 0,
            '403': 0,
            '404': 0,
            '500': 0,
            'other': 0
        };
        let threatTypes = {
            'high': 0,
            'medium': 0,
            'low': 0,
            'none': 0
        };
        let geoData = {};
        let charts = {};
        
        // DOM elements
        const themeToggle = document.getElementById('theme-toggle');
        const startBtn = document.getElementById('start-btn');
        const stopBtn = document.getElementById('stop-btn');
        const downloadBtn = document.getElementById('download-btn');
        const generateReportBtn = document.getElementById('generate-report');
        const resultsTable = document.getElementById('results-table');
        const progressContainer = document.getElementById('progress-container');
        const progressFill = document.getElementById('progress-fill');
        const progressText = document.getElementById('progress-text');
        const resultCount = document.getElementById('result-count');
        const urlsCount = document.getElementById('urls-count');
        const threatsCount = document.getElementById('threats-count');
        const sensitiveCount = document.getElementById('sensitive-count');
        const resultsFilter = document.getElementById('results-filter');
        
        // Initialize the application
        document.addEventListener('DOMContentLoaded', () => {
            // Set theme based on preference
            if (localStorage.getItem('color-theme') === 'dark' || (!localStorage.getItem('color-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                document.documentElement.classList.add('dark');
            } else {
                document.documentElement.classList.remove('dark');
            }
            
            // Initialize charts
            initializeCharts();
            
            // Load ML model (mock)
            loadMLModel();
        });
        
        // Theme toggle
        themeToggle.addEventListener('click', () => {
            if (document.documentElement.classList.contains('dark')) {
                document.documentElement.classList.remove('dark');
                localStorage.setItem('color-theme', 'light');
            } else {
                document.documentElement.classList.add('dark');
                localStorage.setItem('color-theme', 'dark');
            }
        });
        
        // Initialize charts
        function initializeCharts() {
            // Response codes chart
            const responseCtx = document.getElementById('response-chart').getContext('2d');
            charts.responseChart = new Chart(responseCtx, {
                type: 'doughnut',
                data: {
                    labels: ['200 OK', '301 Moved', '302 Found', '403 Forbidden', '404 Not Found', '500 Error', 'Other'],
                    datasets: [{
                        data: Object.values(responseCodes),
                        backgroundColor: [
                            'rgba(16, 185, 129, 0.7)',
                            'rgba(59, 130, 246, 0.7)',
                            'rgba(99, 102, 241, 0.7)',
                            'rgba(245, 158, 11, 0.7)',
                            'rgba(239, 68, 68, 0.7)',
                            'rgba(139, 92, 246, 0.7)',
                            'rgba(156, 163, 175, 0.7)'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
            
            // Threat distribution chart
            const threatCtx = document.getElementById('threat-chart').getContext('2d');
            charts.threatChart = new Chart(threatCtx, {
                type: 'pie',
                data: {
                    labels: ['High Risk', 'Medium Risk', 'Low Risk', 'No Risk'],
                    datasets: [{
                        data: Object.values(threatTypes),
                        backgroundColor: [
                            'rgba(239, 68, 68, 0.7)',
                            'rgba(245, 158, 11, 0.7)',
                            'rgba(16, 185, 129, 0.7)',
                            'rgba(156, 163, 175, 0.7)'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
            
            // Extensions chart
            const extensionsCtx = document.getElementById('extensions-chart').getContext('2d');
            charts.extensionsChart = new Chart(extensionsCtx, {
                type: 'bar',
                data: {
                    labels: ['.html', '.php', '.js', '.png', '.jpg', 'other'],
                    datasets: [{
                        label: 'URLs by Extension',
                        data: [0, 0, 0, 0, 0, 0],
                        backgroundColor: [
                            'rgba(99, 102, 241, 0.7)',
                            'rgba(16, 185, 129, 0.7)',
                            'rgba(244, 63, 94, 0.7)',
                            'rgba(245, 158, 11, 0.7)',
                            'rgba(139, 92, 246, 0.7)',
                            'rgba(59, 130, 246, 0.7)'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });
            
            // Categories chart
            const categoriesCtx = document.getElementById('categories-chart').getContext('2d');
            charts.categoriesChart = new Chart(categoriesCtx, {
                type: 'pie',
                data: {
                    labels: ['Common', 'Sensitive', 'API', 'Admin', 'Other'],
                    datasets: [{
                        label: 'URLs by Category',
                        data: [0, 0, 0, 0, 0],
                        backgroundColor: [
                            'rgba(99, 102, 241, 0.7)',
                            'rgba(244, 63, 94, 0.7)',
                            'rgba(16, 185, 129, 0.7)',
                            'rgba(245, 158, 11, 0.7)',
                            'rgba(156, 163, 175, 0.7)'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'right'
                        }
                    }
                }
            });
            
            // Initialize heatmap (will be rendered when data is available)
            initializeHeatmap();
        }
        
        // Initialize heatmap
        function initializeHeatmap() {
            const container = document.getElementById('heatmap');
            container.innerHTML = '<div class="flex items-center justify-center h-full text-gray-500">Geographical data will appear here after collection</div>';
        }
        
        // Load ML model (mock)
        async function loadMLModel() {
            try {
                // In a real app, we would load an actual model
                console.log('Loading ML model...');
                mlModel = {
                    predict: (url) => {
                        // Mock prediction
                        const categories = ['common', 'sensitive', 'api', 'admin', 'other'];
                        const randomCategory = categories[Math.floor(Math.random() * categories.length)];
                        return {
                            category: randomCategory,
                            confidence: Math.random().toFixed(2)
                        };
                    }
                };
                console.log('ML model loaded');
            } catch (error) {
                console.error('Error loading ML model:', error);
            }
        }
        
        // Start collection
        startBtn.addEventListener('click', startCollection);
        
        async function startCollection() {
            const domains = document.getElementById('domains').value.split(',').map(d => d.trim()).filter(d => d);
            if (domains.length === 0) {
                showAlert('Error: Please enter at least one domain', 'error');
                return;
            }
            
            const options = {
                subs: document.querySelector('input[name="subs"]').checked,
                deepSearch: document.querySelector('input[name="deep-search"]').checked,
                checkStatus: document.querySelector('input[name="check-status"]').checked,
                extractLinks: document.querySelector('input[name="extract-links"]').checked,
                mlAnalysis: document.querySelector('input[name="ml-analysis"]').checked,
                threatDetection: document.querySelector('input[name="threat-detection"]').checked,
                extensions: document.querySelector('input[name="extensions"]').value.split(',').map(e => e.trim()).filter(e => e),
                excludeExtensions: document.querySelector('input[name="exclude-extensions"]').value.split(',').map(e => e.trim()).filter(e => e),
                patterns: document.querySelector('input[name="patterns"]').value.split(',').map(p => p.trim()).filter(p => p),
                excludePatterns: document.querySelector('input[name="exclude-patterns"]').value.split(',').map(p => p.trim()).filter(p => p)
            };
            
            // Reset state
            collectedURLs = [];
            threatURLs = [];
            sensitiveURLs = [];
            responseCodes = {
                '200': 0,
                '301': 0,
                '302': 0,
                '403': 0,
                '404': 0,
                '500': 0,
                'other': 0
            };
            threatTypes = {
                'high': 0,
                'medium': 0,
                'low': 0,
                'none': 0
            };
            geoData = {};
            resultsTable.innerHTML = '';
            resultCount.textContent = 'Found 0 URLs';
            urlsCount.textContent = '0';
            threatsCount.textContent = '0';
            sensitiveCount.textContent = '0';
            
            // UI updates
            collectionInProgress = true;
            startBtn.disabled = true;
            startBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Collecting...';
            stopBtn.classList.remove('opacity-0', 'pointer-events-none');
            progressContainer.classList.remove('hidden');
            progressFill.style.width = '0%';
            progressText.textContent = '0%';
            
            // Show starting message
            addResultMessage('Starting aggressive URL collection for: ' + domains.join(', '), 'info');
            
            // Simulate collection (in a real app, this would be API calls)
            simulateCollection(domains, options);
        }
        
        // Stop collection
        stopBtn.addEventListener('click', stopCollection);
        
        function stopCollection() {
            collectionInProgress = false;
            startBtn.disabled = false;
            startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Start Collection';
            stopBtn.classList.add('opacity-0', 'pointer-events-none');
            addResultMessage('Collection stopped by user', 'warning');
        }
        
        // Simulate collection (mock)
        function simulateCollection(domains, options) {
            let progress = 0;
            const totalSteps = 100;
            const interval = setInterval(() => {
                if (!collectionInProgress || progress >= totalSteps) {
                    clearInterval(interval);
                    if (progress >= totalSteps) {
                        collectionComplete();
                    }
                    return;
                }
                
                progress += Math.random() * 5;
                if (progress > totalSteps) progress = totalSteps;
                
                // Update progress
                const percent = Math.floor((progress / totalSteps) * 100);
                progressFill.style.width = percent + '%';
                progressText.textContent = percent + '%';
                
                // Generate mock URLs periodically
                if (progress % 20 === 0) {
                    const mockUrls = generateMockURLs(domains, options);
                    processURLs(mockUrls, options);
                }
            }, 500);
        }
        
        // Generate mock URLs
        function generateMockURLs(domains, options) {
            const urls = [];
            const count = 10 + Math.floor(Math.random() * 20); // 10-30 URLs per batch
            
            const commonPaths = [
                '/index.html', '/login.php', '/api/v1/users', '/admin/dashboard', '/static/js/main.js',
                '/images/logo.png', '/wp-content/uploads/2023/01/image.jpg', '/search?q=test',
                '/products/123', '/contact', '/about-us', '/terms-of-service', '/privacy-policy',
                '/sitemap.xml', '/robots.txt', '/crossdomain.xml', '/clientaccesspolicy.xml'
            ];
            
            const sensitivePaths = [
                '/.git/', '/.env', '/config/', '/backup/', '/admin/', '/wp-admin/',
                '/server-status', '/phpmyadmin', '/manager/html', '/console', '/jenkins',
                '/swagger-ui', '/metrics', '/healthcheck', '/.svn/', '/error_log',
                '/logs/', '/tmp/', '/database.sql', '/backup.sql', '/.htaccess'
            ];
            
            for (let i = 0; i < count; i++) {
                const domain = domains[Math.floor(Math.random() * domains.length)];
                let path = '';
                
                // Choose path type based on options
                if (options.deepSearch && Math.random() > 0.7) {
                    path = sensitivePaths[Math.floor(Math.random() * sensitivePaths.length)];
                } else {
                    path = commonPaths[Math.floor(Math.random() * commonPaths.length)];
                }
                
                // Add query params sometimes
                if (Math.random() > 0.7) {
                    const queryParams = ['id=', 'user=', 'token=', 'page=', 'q=', 'search=', 'filter=', 'sort='];
                    const param = queryParams[Math.floor(Math.random() * queryParams.length)];
                    path += `?${param}${Math.floor(Math.random() * 1000)}`;
                }
                
                const url = `https://${domain}${path}`;
                urls.push(url);
            }
            
            return filterURLs(urls, options);
        }
        
        // Filter URLs based on options
        function filterURLs(urls, options) {
            return urls.filter(url => {
                // Check extensions
                if (options.extensions.length > 0) {
                    const hasExtension = options.extensions.some(ext => url.endsWith('.' + ext));
                    if (!hasExtension) return false;
                }
                
                // Check excluded extensions
                if (options.excludeExtensions.length > 0) {
                    const hasExcludedExtension = options.excludeExtensions.some(ext => url.endsWith('.' + ext));
                    if (hasExcludedExtension) return false;
                }
                
                // Check patterns
                if (options.patterns.length > 0) {
                    const matchesPattern = options.patterns.some(pattern => url.includes(pattern));
                    if (!matchesPattern) return false;
                }
                
                // Check excluded patterns
                if (options.excludePatterns.length > 0) {
                    const matchesExcludedPattern = options.excludePatterns.some(pattern => url.includes(pattern));
                    if (matchesExcludedPattern) return false;
                }
                
                return true;
            });
        }
        
        // Process collected URLs
        function processURLs(urls, options) {
            urls.forEach(url => {
                // Generate mock status code
                const statusCodes = [200, 200, 200, 200, 301, 302, 403, 404, 500];
                const status = statusCodes[Math.floor(Math.random() * statusCodes.length)];
                
                // Track response codes
                if (status in responseCodes) {
                    responseCodes[status]++;
                } else {
                    responseCodes.other++;
                }
                
                // Detect threats
                let threatLevel = 'none';
                if (options.threatDetection) {
                    const riskScore = calculateRiskScore(url);
                    if (riskScore > 7) {
                        threatLevel = 'high';
                        threatURLs.push(url);
                    } else if (riskScore > 4) {
                        threatLevel = 'medium';
                    } else if (riskScore > 1) {
                        threatLevel = 'low';
                    }
                    
                    threatTypes[threatLevel]++;
                }
                
                // Check if sensitive
                let isSensitive = isSensitivePath(url);
                if (isSensitive) {
                    sensitiveURLs.push(url);
                }
                
                // ML analysis
                let category = 'common';
                let confidence = '0.00';
                if (options.mlAnalysis && mlModel) {
                    const prediction = mlModel.predict(url);
                    category = prediction.category;
                    confidence = prediction.confidence;
                }
                
                // Add to collected URLs
                collectedURLs.push({
                    url,
                    status,
                    threatLevel,
                    isSensitive,
                    category,
                    confidence
                });
                
                // Add to results table
                addResultToTable(url, status, threatLevel, category);
            });
            
            // Update counters
            resultCount.textContent = `Found ${collectedURLs.length} URLs`;
            urlsCount.textContent = collectedURLs.length;
            threatsCount.textContent = threatURLs.length;
            sensitiveCount.textContent = sensitiveURLs.length;
            
            // Update progress bars
            document.getElementById('urls-progress').style.width = `${Math.min(100, collectedURLs.length)}%`;
            document.getElementById('threats-progress').style.width = `${Math.min(100, threatURLs.length)}%`;
            document.getElementById('sensitive-progress').style.width = `${Math.min(100, sensitiveURLs.length)}%`;
            
            // Update charts
            updateCharts();
            
            // Simulate some geo data
            if (Object.keys(geoData).length === 0) {
                geoData = {
                    'US': Math.floor(Math.random() * 50) + 20,
                    'CN': Math.floor(Math.random() * 40) + 15,
                    'DE': Math.floor(Math.random() * 30) + 10,
                    'GB': Math.floor(Math.random() * 25) + 8,
                    'FR': Math.floor(Math.random() * 20) + 5,
                    'JP': Math.floor(Math.random() * 15) + 3,
                    'BR': Math.floor(Math.random() * 10) + 2,
                    'IN': Math.floor(Math.random() * 8) + 1
                };
                renderHeatmap();
            }
        }
        
        // Calculate risk score for a URL
        function calculateRiskScore(url) {
            let score = 0;
            
            // Sensitive paths
            const sensitivePatterns = [
                'admin', 'login', 'config', 'backup', 'wp-admin', 'phpmyadmin',
                '.git', '.env', 'database', 'sql', 'logs', 'error_log'
            ];
            
            sensitivePatterns.forEach(pattern => {
                if (url.includes(pattern)) {
                    score += 2;
                }
            });
            
            // Query parameters
            if (url.includes('?')) {
                const dangerousParams = ['password', 'token', 'secret', 'key', 'auth'];
                dangerousParams.forEach(param => {
                    if (url.includes(param)) {
                        score += 3;
                    }
                });
            }
            
            // File extensions
            const dangerousExtensions = ['.php', '.asp', '.aspx', '.jsp', '.do', '.action'];
            dangerousExtensions.forEach(ext => {
                if (url.endsWith(ext)) {
                    score += 1;
                }
            });
            
            // Random factor
            score += Math.random() * 2;
            
            return Math.min(10, score);
        }
        
        // Check if path is sensitive
        function isSensitivePath(path) {
            const sensitivePatterns = [
                '.git', '.svn', '.env', '/config/', '/backup/', '/admin/', '/wp-admin/',
                '/robots.txt', '/sitemap.xml', '/server-status', '/phpmyadmin', '/manager/html',
                '/console', '/jenkins', '/swagger-ui'
            ];
            return sensitivePatterns.some(pattern => path.includes(pattern));
        }
        
        // Add result to table
        function addResultToTable(url, status, threatLevel, category) {
            const row = document.createElement('tr');
            
            // Set row class based on threat level
            if (threatLevel === 'high') {
                row.classList.add('threat-high');
            } else if (threatLevel === 'medium') {
                row.classList.add('threat-medium');
            } else if (threatLevel === 'low') {
                row.classList.add('threat-low');
            }
            
            // Status badge
            let statusBadge = '';
            if (status === 200) {
                statusBadge = '<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">200 OK</span>';
            } else if (status === 301 || status === 302) {
                statusBadge = '<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">' + status + ' Redirect</span>';
            } else if (status === 403) {
                statusBadge = '<span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">403 Forbidden</span>';
            } else if (status === 404) {
                statusBadge = '<span class="px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded-full">404 Not Found</span>';
            } else if (status === 500) {
                statusBadge = '<span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">500 Error</span>';
            } else {
                statusBadge = '<span class="px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded-full">' + status + '</span>';
            }
            
            // Threat badge
            let threatBadge = '';
            if (threatLevel === 'high') {
                threatBadge = '<span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">High Risk</span>';
            } else if (threatLevel === 'medium') {
                threatBadge = '<span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Medium Risk</span>';
            } else if (threatLevel === 'low') {
                threatBadge = '<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Low Risk</span>';
            } else {
                threatBadge = '<span class="px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded-full">No Risk</span>';
            }
            
            // Category badge
            let categoryBadge = '';
            if (category === 'sensitive') {
                categoryBadge = '<span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">Sensitive</span>';
            } else if (category === 'api') {
                categoryBadge = '<span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">API</span>';
            } else if (category === 'admin') {
                categoryBadge = '<span class="px-2 py-1 bg-pink-100 text-pink-800 text-xs rounded-full">Admin</span>';
            } else {
                categoryBadge = '<span class="px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded-full">Common</span>';
            }
            
            row.innerHTML = `
                <td class="px-4 py-2 font-mono text-sm break-all">${url}</td>
                <td class="px-4 py-2">${statusBadge}</td>
                <td class="px-4 py-2">${threatBadge}</td>
                <td class="px-4 py-2">${categoryBadge}</td>
                <td class="px-4 py-2">
                    <button class="p-1 text-indigo-500 hover:text-indigo-700" onclick="inspectURL('${url}')">
                        <i class="fas fa-search"></i>
                    </button>
                </td>
            `;
            
            resultsTable.appendChild(row);
        }
        
        // Add result message
        function addResultMessage(message, type = 'info') {
            const row = document.createElement('tr');
            let icon = '';
            let color = '';
            
            if (type === 'info') {
                icon = '<i class="fas fa-info-circle mr-2"></i>';
                color = 'text-blue-400';
            } else if (type === 'warning') {
                icon = '<i class="fas fa-exclamation-triangle mr-2"></i>';
                color = 'text-yellow-400';
            } else if (type === 'error') {
                icon = '<i class="fas fa-times-circle mr-2"></i>';
                color = 'text-red-400';
            } else if (type === 'success') {
                icon = '<i class="fas fa-check-circle mr-2"></i>';
                color = 'text-green-400';
            }
            
            row.innerHTML = `
                <td colspan="5" class="px-4 py-2 ${color}">
                    ${icon} ${message}
                </td>
            `;
            
            resultsTable.appendChild(row);
        }
        
        // Show alert
        function showAlert(message, type = 'info') {
            const alert = document.createElement('div');
            alert.className = `fixed top-4 right-4 px-4 py-2 rounded-lg shadow-lg z-50 ${
                type === 'info' ? 'bg-blue-500 text-white' :
                type === 'success' ? 'bg-green-500 text-white' :
                type === 'warning' ? 'bg-yellow-500 text-white' :
                'bg-red-500 text-white'
            }`;
            alert.innerHTML = `
                <div class="flex items-center">
                    ${
                        type === 'info' ? '<i class="fas fa-info-circle mr-2"></i>' :
                        type === 'success' ? '<i class="fas fa-check-circle mr-2"></i>' :
                        type === 'warning' ? '<i class="fas fa-exclamation-triangle mr-2"></i>' :
                        '<i class="fas fa-times-circle mr-2"></i>'
                    }
                    <span>${message}</span>
                </div>
            `;
            
            document.body.appendChild(alert);
            
            setTimeout(() => {
                alert.classList.add('opacity-0', 'transition-opacity', 'duration-300');
                setTimeout(() => {
                    alert.remove();
                }, 300);
            }, 3000);
        }
        
        // Update charts
        function updateCharts() {
            // Response codes chart
            charts.responseChart.data.datasets[0].data = Object.values(responseCodes);
            charts.responseChart.update();
            
            // Threat distribution chart
            charts.threatChart.data.datasets[0].data = Object.values(threatTypes);
            charts.threatChart.update();
            
            // Extensions chart (mock data)
            const extensionsData = [0, 0, 0, 0, 0, 0];
            collectedURLs.forEach(urlObj => {
                if (urlObj.url.endsWith('.html')) extensionsData[0]++;
                else if (urlObj.url.endsWith('.php')) extensionsData[1]++;
                else if (urlObj.url.endsWith('.js')) extensionsData[2]++;
                else if (urlObj.url.endsWith('.png')) extensionsData[3]++;
                else if (urlObj.url.endsWith('.jpg')) extensionsData[4]++;
                else extensionsData[5]++;
            });
            charts.extensionsChart.data.datasets[0].data = extensionsData;
            charts.extensionsChart.update();
            
            // Categories chart (mock data)
            const categoriesData = [0, 0, 0, 0, 0];
            collectedURLs.forEach(urlObj => {
                if (urlObj.category === 'common') categoriesData[0]++;
                else if (urlObj.category === 'sensitive') categoriesData[1]++;
                else if (urlObj.category === 'api') categoriesData[2]++;
                else if (urlObj.category === 'admin') categoriesData[3]++;
                else categoriesData[4]++;
            });
            charts.categoriesChart.data.datasets[0].data = categoriesData;
            charts.categoriesChart.update();
        }
        
        // Render heatmap
        function renderHeatmap() {
            const container = document.getElementById('heatmap');
            container.innerHTML = '';
            
            // Create tooltip
            const tooltip = d3.select(container)
                .append('div')
                .attr('class', 'tooltip')
                .style('opacity', 0);
            
            // Create SVG
            const width = container.clientWidth;
            const height = 400;
            const svg = d3.select(container)
                .append('svg')
                .attr('width', width)
                .attr('height', height);
            
            // Create projection
            const projection = d3.geoMercator()
                .scale(130)
                .translate([width / 2, height / 1.5]);
            
            // Create path generator
            const path = d3.geoPath()
                .projection(projection);
            
            // Load world map data
            d3.json('https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson').then(function(world) {
                // Draw the map
                svg.selectAll('path')
                    .data(world.features)
                    .enter()
                    .append('path')
                    .attr('d', path)
                    .attr('fill', '#ddd')
                    .attr('stroke', '#fff')
                    .attr('stroke-width', 0.5);
                
                // Add circles for data points
                const maxValue = d3.max(Object.values(geoData));
                const radiusScale = d3.scaleSqrt()
                    .domain([0, maxValue])
                    .range([0, 20]);
                
                const locations = {
                    'US': { lat: 37.0902, lon: -95.7129 },
                    'CN': { lat: 35.8617, lon: 104.1954 },
                    'DE': { lat: 51.1657, lon: 10.4515 },
                    'GB': { lat: 55.3781, lon: -3.4360 },
                    'FR': { lat: 46.2276, lon: 2.2137 },
                    'JP': { lat: 36.2048, lon: 138.2529 },
                    'BR': { lat: -14.2350, lon: -51.9253 },
                    'IN': { lat: 20.5937, lon: 78.9629 }
                };
                
                Object.entries(geoData).forEach(([country, value]) => {
                    if (locations[country]) {
                        const coords = projection([locations[country].lon, locations[country].lat]);
                        if (coords) {
                            svg.append('circle')
                                .attr('cx', coords[0])
                                .attr('cy', coords[1])
                                .attr('r', radiusScale(value))
                                .attr('fill', 'rgba(239, 68, 68, 0.7)')
                                .attr('stroke', 'rgba(239, 68, 68, 0.9)')
                                .attr('stroke-width', 1)
                                .on('mouseover', function() {
                                    tooltip.transition()
                                        .duration(200)
                                        .style('opacity', .9);
                                    tooltip.html(`${country}<br>URLs: ${value}`)
                                        .style('left', (d3.event.pageX + 10) + 'px')
                                        .style('top', (d3.event.pageY - 28) + 'px');
                                })
                                .on('mouseout', function() {
                                    tooltip.transition()
                                        .duration(500)
                                        .style('opacity', 0);
                                });
                            
                            // Add country code label
                            svg.append('text')
                                .attr('x', coords[0])
                                .attr('y', coords[1] - radiusScale(value) - 5)
                                .text(country)
                                .attr('text-anchor', 'middle')
                                .attr('font-size', '10px')
                                .attr('fill', '#333');
                        }
                    }
                });
            });
        }
        
        // Collection complete
        function collectionComplete() {
            collectionInProgress = false;
            startBtn.disabled = false;
            startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Start Collection';
            stopBtn.classList.add('opacity-0', 'pointer-events-none');
            downloadBtn.classList.remove('opacity-0', 'pointer-events-none');
            
            addResultMessage('Collection completed successfully!', 'success');
            showAlert('Collection completed successfully!', 'success');
            
            // Generate comprehensive report data
            generateReportData();
        }
        
        // Generate report data
        function generateReportData() {
            const report = {
                summary: {
                    totalURLs: collectedURLs.length,
                    uniqueDomains: countUniqueDomains(collectedURLs),
                    threatLevel: evaluateOverallThreatScore(collectedURLs),
                    startTime: new Date().toISOString(),
                    endTime: new Date().toISOString(),
                    duration: '1m 23s' // Mock duration
                },
                detailed: {
                    sensitiveURLs: filterSensitiveURLs(collectedURLs),
                    geoDistribution: geoData,
                    categoryBreakdown: categorizeURLs(collectedURLs),
                    threatBreakdown: threatTypes,
                    responseCodes: responseCodes
                },
                exportFormats: ['PDF', 'CSV', 'JSON', 'XLSX']
            };
            
            console.log('Generated report:', report);
            return report;
        }
        
        // Count unique domains
        function countUniqueDomains(urls) {
            const domains = new Set();
            urls.forEach(urlObj => {
                const domain = urlObj.url.split('/')[2];
                domains.add(domain);
            });
            return domains.size;
        }
        
        // Evaluate overall threat score
        function evaluateOverallThreatScore(urls) {
            let score = 0;
            urls.forEach(urlObj => {
                if (urlObj.threatLevel === 'high') score += 3;
                else if (urlObj.threatLevel === 'medium') score += 2;
                else if (urlObj.threatLevel === 'low') score += 1;
            });
            
            const maxPossible = urls.length * 3;
            const percentage = (score / maxPossible) * 100;
            
            if (percentage > 30) return 'High';
            if (percentage > 15) return 'Medium';
            return 'Low';
        }
        
        // Filter sensitive URLs
        function filterSensitiveURLs(urls) {
            return urls.filter(urlObj => urlObj.isSensitive);
        }
        
        // Categorize URLs
        function categorizeURLs(urls) {
            const categories = {
                common: 0,
                sensitive: 0,
                api: 0,
                admin: 0,
                other: 0
            };
            
            urls.forEach(urlObj => {
                categories[urlObj.category]++;
            });
            
            return categories;
        }
        
        // Download results
        downloadBtn.addEventListener('click', downloadResults);
        
        function downloadResults() {
            const format = document.querySelector('input[name="format"]:checked').value;
            let content = '';
            let mimeType = 'text/plain';
            let extension = 'txt';
            
            if (format === 'json') {
                content = JSON.stringify(collectedURLs, null, 2);
                mimeType = 'application/json';
                extension = 'json';
            } else if (format === 'csv') {
                // Generate CSV
                content = 'URL,Status,Threat Level,Category,Confidence\n';
                collectedURLs.forEach(urlObj => {
                    content += `"${urlObj.url}",${urlObj.status},${urlObj.threatLevel},${urlObj.category},${urlObj.confidence}\n`;
                });
                mimeType = 'text/csv';
                extension = 'csv';
            } else if (format === 'pdf') {
                // In a real app, we would generate a PDF
                showAlert('PDF export would be generated in a real application', 'info');
                return;
            } else if (format === 'xlsx') {
                // In a real app, we would generate an Excel file
                showAlert('Excel export would be generated in a real application', 'info');
                return;
            } else {
                // Plain text
                collectedURLs.forEach(urlObj => {
                    content += `${urlObj.url}\n`;
                });
            }
            
            const blob = new Blob([content], { type: mimeType });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `urx-results-${new Date().toISOString().slice(0,10)}.${extension}`;
            a.click();
            URL.revokeObjectURL(url);
        }
        
        // Generate full report
        generateReportBtn.addEventListener('click', generateFullReport);
        
        function generateFullReport() {
            const report = generateReportData();
            showAlert('Comprehensive report would be generated in a real application', 'info');
            console.log('Full report data:', report);
        }
        
        // Inspect URL
        window.inspectURL = function(url) {
            showAlert(`Inspecting URL: ${url}`, 'info');
            // In a real app, this would show detailed information about the URL
        }
        
        // Filter results
        resultsFilter.addEventListener('input', filterResults);
        
        function filterResults() {
            const filter = resultsFilter.value.toLowerCase();
            const rows = resultsTable.querySelectorAll('tr');
            
            rows.forEach(row => {
                if (row.cells && row.cells[0]) {
                    const url = row.cells[0].textContent.toLowerCase();
                    if (url.includes(filter)) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                }
            });
        }
    </script>
</body>
</html> napraw