phonebook.cz dodaj  wszystko takie jak na tej stronie żeby tak samo pokazywało wynik jak na tej stronie do mojego HTML<!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 - OSINT URL Collector</title>
  <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;700&display=swap" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    :root {
      --primary: #6366f1;
      --primary-dark: #4f46e5;
      --secondary: #10b981;
      --dark: #1e293b;
      --light: #f8fafc;
    }
    body {
      font-family: 'Noto Sans', sans-serif;
    }
    .dark {
      --primary: #818cf8;
      --primary-dark: #6366f1;
      --secondary: #34d399;
      --dark: #f8fafc;
      --light: #1e293b;
    }
    .terminal {
      font-family: 'Courier New', monospace;
    }
    .progress-bar {
      height: 4px;
      background-color: #e2e8f0;
    }
    .progress-fill {
      height: 100%;
      background-color: var(--primary);
      transition: width 0.3s ease;
    }
    .source-badge {
      background-color: rgba(99, 102, 241, 0.2);
      color: rgba(99, 102, 241, 0.8);
    }
    @media (max-width: 768px) {
      .options-grid {
        grid-template-columns: 1fr;
      }
      .chart-container {
        grid-template-columns: 1fr;
      }
      .terminal {
        font-size: 0.8rem;
        padding: 1rem;
      }
    }
  </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</h1>
      </div>
      <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>
  </header>

  <main class="container mx-auto px-4 py-8">
    <section class="max-w-4xl mx-auto">
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
        <h2 class="text-2xl font-bold mb-4">URL Collection</h2>
        
        <div class="mb-6 relative">
          <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="intelx.io, example.com"></textarea>
          <div class="text-xs text-gray-500 mt-1 dark:text-gray-400">Valid formats: example.com, sub.example.org</div>
        </div>

        <div class="grid md:grid-cols-2 gap-6 mb-6 options-grid">
          <div>
            <h3 class="font-medium mb-3">Data Sources</h3>
            <div class="space-y-2">
              <label class="flex items-center">
                <input type="checkbox" class="form-checkbox text-indigo-600" name="providers" value="wayback" checked>
                <span class="ml-2">Wayback Machine</span>
              </label>
              <label class="flex items-center">
                <input type="checkbox" class="form-checkbox text-indigo-600" name="providers" value="cc" checked>
                <span class="ml-2">Common Crawl</span>
              </label>
              <label class="flex items-center">
                <input type="checkbox" class="form-checkbox text-indigo-600" name="providers" value="otx">
                <span class="ml-2">OTX</span>
              </label>
            </div>
          </div>

          <div>
            <h3 class="font-medium mb-3">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="check-status">
                <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">
                <span class="ml-2">Extract additional links</span>
              </label>
            </div>
          </div>
        </div>

        <div class="mb-6">
          <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 class="mb-6">
          <h3 class="font-medium mb-3">Output</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>
          </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>
          <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> Download Results
          </button>
        </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-4xl mx-auto mt-8">
      <div class="bg-gray-800 text-gray-100 rounded-xl p-4">
        <div class="search-box mb-4">
          <input type="text" id="search-results" class="w-full px-3 py-2 bg-gray-900 text-gray-100 rounded-lg" placeholder="Search in results...">
        </div>
        <div class="flex justify-between items-center mb-2">
          <h3 class="font-medium">Results</h3>
          <div class="text-sm">
            <span id="result-count">0</span> URLs found
          </div>
        </div>
        <div id="terminal" class="terminal bg-black text-green-400 p-4 rounded-lg h-64 overflow-y-auto font-mono text-sm"></div>
        
        <div class="result-controls flex justify-between items-center mt-4">
          <div class="text-sm">
            <span id="current-page">1</span> of 
            <span id="total-pages">1</span>
          </div>
          <div class="flex gap-2">
            <button id="prev-page" class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded disabled:opacity-50" disabled>←</button>
            <button id="next-page" class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded disabled:opacity-50" disabled>→</button>
          </div>
        </div>
      </div>
    </section>

    <section class="max-w-4xl mx-auto mt-8">
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
        <h2 class="text-2xl font-bold mb-4">Statistics</h2>
        <div class="grid md:grid-cols-2 gap-6 chart-container">
          <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 Source</h3>
            <canvas id="sources-chart" height="200"></canvas>
          </div>
        </div>
      </div>
    </section>
  </main>

  <script>
    // DOM Elements
    const themeToggle = document.getElementById('theme-toggle');
    const startBtn = document.getElementById('start-btn');
    const downloadBtn = document.getElementById('download-btn');
    const terminal = document.getElementById('terminal');
    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 searchInput = document.getElementById('search-results');
    const prevPageBtn = document.getElementById('prev-page');
    const nextPageBtn = document.getElementById('next-page');
    const currentPageEl = document.getElementById('current-page');
    const totalPagesEl = document.getElementById('total-pages');

    // App State
    let stats = {
      extensions: {},
      sources: {
        'Wayback Machine': 0,
        'Common Crawl': 0,
        'OTX': 0
      }
    };
    let allResults = [];
    let filteredResults = [];
    let currentPage = 1;
    const resultsPerPage = 20;

    // Initialize theme
    if (localStorage.getItem('color-theme') === 'dark' || (!localStorage.getItem('color-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark');
    }

    // Theme toggle
    themeToggle.addEventListener('click', () => {
      document.documentElement.classList.toggle('dark');
      localStorage.setItem('color-theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
    });

    // Start collection
    startBtn.addEventListener('click', startCollection);

    // Download results
    downloadBtn.addEventListener('click', downloadResults);

    // Search functionality
    searchInput.addEventListener('input', filterResults);

    // Pagination
    prevPageBtn.addEventListener('click', () => {
      if (currentPage > 1) {
        currentPage--;
        displayResults();
      }
    });

    nextPageBtn.addEventListener('click', () => {
      if (currentPage < Math.ceil(filteredResults.length / resultsPerPage)) {
        currentPage++;
        displayResults();
      }
    });

    function startCollection() {
      const domains = document.getElementById('domains').value.split(',').map(d => d.trim()).filter(d => d);
      if (domains.length === 0) {
        showError('Please enter at least one domain');
        return;
      }

      const providers = Array.from(document.querySelectorAll('input[name="providers"]:checked')).map(p => p.value);
      const options = {
        subs: document.querySelector('input[name="subs"]').checked,
        checkStatus: document.querySelector('input[name="check-status"]').checked,
        extractLinks: document.querySelector('input[name="extract-links"]').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),
        format: document.querySelector('input[name="format"]:checked').value
      };

      // Reset state
      terminal.innerHTML = '<div class="text-green-400">Starting URL collection for: ' + domains.join(', ') + '</div>';
      progressContainer.classList.remove('hidden');
      setLoadingState(true);
      allResults = [];
      filteredResults = [];
      stats = {
        extensions: {},
        sources: {
          'Wayback Machine': 0,
          'Common Crawl': 0,
          'OTX': 0
        }
      };
      resultCount.textContent = '0';
      currentPage = 1;
      updatePagination();

      // Simulate collection
      simulateCollection(domains, providers, options);
    }

    function simulateCollection(domains, providers, options) {
      let progress = 0;
      const totalSteps = 100;
      const interval = setInterval(() => {
        progress += Math.random() * 5;
        if (progress > totalSteps) progress = totalSteps;
        
        updateProgress(progress);
        
        // Add mock results periodically
        if (progress % 20 === 0) {
          const mockUrls = generateMockURLs(domains, providers, options);
          addResults(mockUrls, providers);
        }

        if (progress === totalSteps) {
          clearInterval(interval);
          setLoadingState(false);
          terminal.innerHTML += '<div class="text-green-400">Collection complete! Found ' + allResults.length + ' URLs.</div>';
          downloadBtn.classList.remove('opacity-0', 'pointer-events-none');
          updateCharts();
        }
      }, 300);
    }

    function generateMockURLs(domains, providers, options) {
      const urls = [];
      const count = Math.floor(Math.random() * 5) + 1;
      
      for (let i = 0; i < count; i++) {
        const domain = domains[Math.floor(Math.random() * domains.length)];
        const provider = providers[Math.floor(Math.random() * providers.length)];
        const path = generateMockPath(options);
        const url = `https://${domain}${path}`;
        urls.push({ url, source: provider });
      }
      
      return urls;
    }

    function generateMockPath(options) {
      const paths = [
        '/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'
      ];
      
      // Filter paths based on options
      let filteredPaths = [...paths];
      
      if (options.extensions.length > 0) {
        filteredPaths = filteredPaths.filter(p => 
          options.extensions.some(ext => p.endsWith('.' + ext))
      }
      
      if (options.excludeExtensions.length > 0) {
        filteredPaths = filteredPaths.filter(p => 
          !options.excludeExtensions.some(ext => p.endsWith('.' + ext))
        );
      }
      
      if (options.patterns.length > 0) {
        filteredPaths = filteredPaths.filter(p => 
          options.patterns.some(pattern => p.includes(pattern))
        );
      }
      
      if (options.excludePatterns.length > 0) {
        filteredPaths = filteredPaths.filter(p => 
          !options.excludePatterns.some(pattern => p.includes(pattern))
        );
      }
      
      return filteredPaths.length > 0 
        ? filteredPaths[Math.floor(Math.random() * filteredPaths.length)]
        : paths[Math.floor(Math.random() * paths.length)];
    }

    function addResults(results, providers) {
      results.forEach(result => {
        allResults.push(result);
        
        // Update stats
        const ext = result.url.split('.').pop().split(/[?#]/)[0];
        stats.extensions[ext] = (stats.extensions[ext] || 0) + 1;
        
        const providerName = getProviderName(result.source);
        stats.sources[providerName]++;
      });
      
      filterResults(); // Apply current search filter
      resultCount.textContent = filteredResults.length;
    }

    function getProviderName(providerKey) {
      switch(providerKey) {
        case 'wayback': return 'Wayback Machine';
        case 'cc': return 'Common Crawl';
        case 'otx': return 'OTX';
        default: return providerKey;
      }
    }

    function filterResults() {
      const searchTerm = searchInput.value.toLowerCase();
      filteredResults = allResults.filter(result => 
        result.url.toLowerCase().includes(searchTerm)
      );
      
      currentPage = 1;
      displayResults();
    }

    function displayResults() {
      terminal.innerHTML = '';
      
      const startIdx = (currentPage - 1) * resultsPerPage;
      const endIdx = startIdx + resultsPerPage;
      const pageResults = filteredResults.slice(startIdx, endIdx);
      
      pageResults.forEach(result => {
        const resultElement = document.createElement('div');
        resultElement.className = 'flex items-center justify-between py-2 border-b border-gray-700';
        resultElement.innerHTML = `
          <div class="flex-1 truncate mr-4">${result.url}</div>
          <div class="flex items-center">
            <span class="source-badge px-2 py-1 text-xs rounded-full">${getProviderName(result.source)}</span>
          </div>
        `;
        terminal.appendChild(resultElement);
      });
      
      updatePagination();
    }

    function updatePagination() {
      const totalPages = Math.ceil(filteredResults.length / resultsPerPage);
      
      currentPageEl.textContent = currentPage;
      totalPagesEl.textContent = totalPages;
      
      prevPageBtn.disabled = currentPage <= 1;
      nextPageBtn.disabled = currentPage >= totalPages;
    }

    function updateProgress(value) {
      progressFill.style.width = value + '%';
      progressText.textContent = Math.floor(value) + '%';
    }

    function setLoadingState(isLoading) {
      startBtn.disabled = isLoading;
      startBtn.innerHTML = isLoading 
        ? '<i class="fas fa-spinner fa-spin mr-2"></i> Collecting...'
        : '<i class="fas fa-play mr-2"></i> Start Collection';
    }

    function showError(message) {
      const errorElement = document.createElement('div');
      errorElement.className = 'text-red-400 mb-2';
      errorElement.innerHTML = `<i class="fas fa-exclamation-circle mr-2"></i>${message}`;