osamahamad/httpx.html

## httpx.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTTPx Data Report</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .container { width: 100%; margin: auto; }
        table { width: 100%; border-collapse: collapse; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #4CAF50; color: white; }
        tr:nth-child(even) { background-color: #f2f2f2; }
        .scrollable { overflow-x: auto; }
        #search-bar {
            margin-bottom: 10px;
        }
        .pagination {
            margin-top: 10px;
        }
        .page-number {
            cursor: pointer;
            padding: 5px;
        }
        .page-number.active {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>HTTPx Data Report</h1>
        <input type="text" id="search-bar" placeholder="Search...">
        <div class="scrollable">
            <table id="data-table">
                <thead>
                    <tr>
                        <th>Timestamp</th>
                        <th>Port</th>
                        <th>URL</th>
                        <th>Input</th>
                        <th>Title</th>
                        <th>Scheme</th>
                        <th>Webserver</th>
                        <th>Content Type</th>
                        <th>Host</th>
                        <th>Path</th>
                        <th>A Records</th>
                        <th>CNAME Records</th>
                        <th>Technologies</th>
                        <th>Words</th>
                        <th>Lines</th>
                        <th>Status Code</th>
                        <th>Content Length</th>
                        <th>Failed</th>
                        <th>Stored Response Path</th>
                        <th>Page Type</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Data rows will be inserted here -->
                </tbody>
            </table>
        </div>
        <div class="pagination" id="pagination"></div>
    </div>

    <script>
        let globalData = []; // Store all data globally
        const rowsPerPage = 10;

        fetch('httpx.json')
        .then(response => response.text())
        .then(text => {
            const jsonParts = text.split('}}');
            const correctedJsonArray = jsonParts.map(part => part.trim() ? part + '}}' : '').filter(Boolean);
            const correctedJson = '[' + correctedJsonArray.join(',') + ']';
            globalData = JSON.parse(correctedJson);
            paginate(globalData, rowsPerPage);
        })
        .catch(error => console.error('Error processing data:', error));

        document.getElementById('search-bar').addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            if (searchTerm) {
                const [field, value] = searchTerm.split(':');
                let filteredData = globalData.filter(item => {
                    let text = '';
                    if (field === 'title') {
                        text = item.title || '';
                    } else if (field === 'host') {
                        text = item.host || '';
                    } else if (field === 'port') {
                        text = item.port || '';
                    } else if (field === 'timestamp') {
                        text = item.timestamp || '';
                    } else if (field === 'cname') {
                        text = item.cname || '';
                    } else if (field === 'url') {
                        text = item.url || '';
                    } else if (field === 'a') {
                        text = item.a || '';
                    } else if (field === 'status_code') {
                        text = item.status_code || '';
                    } else if (field === 'PageType') {
                        text = item.knowledgebase.PageType || '';
                    } else if (field === 'tech') {
                        text = item.tech || '';
                    } else if (field === 'webserver') {
                        text = item.webserver || '';
                    }
                    return text.toLowerCase().includes(value.trim());
                });

                paginate(filteredData, rowsPerPage);
            } else {
                paginate(globalData, rowsPerPage); // If no search term, show original data
            }
        });

        function paginate(data, rowsPerPage) {
            document.getElementById('pagination').innerHTML = ''; // Clear existing pagination
            const pageCount = Math.ceil(data.length / rowsPerPage);
            for (let i = 1; i <= pageCount; i++) {
                const pageNumber = document.createElement('span');
                pageNumber.className = 'page-number';
                pageNumber.textContent = i;
                pageNumber.addEventListener('click', () => {
                    document.querySelectorAll('.page-number').forEach(node => node.classList.remove('active'));
                    pageNumber.classList.add('active');
                    displayPage(data, i, rowsPerPage);
                });
                document.getElementById('pagination').appendChild(pageNumber);
            }
            displayPage(data, 1, rowsPerPage); // Display first page initially
        }


        function displayPage(data, pageNumber, rowsPerPage) {
            const start = (pageNumber - 1) * rowsPerPage;
            const end = start + rowsPerPage;
            const pageData = data.slice(start, end);
            const tableBody = document.getElementById('data-table').querySelector('tbody');
            tableBody.innerHTML = ''; // Clear existing rows
            pageData.forEach(item => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${item.timestamp || 'N/A'}</td>
                    <td>${item.port || 'N/A'}</td>
                    <td>${item.url || 'N/A'}</td>
                    <td>${item.input || 'N/A'}</td>
                    <td>${item.title || 'N/A'}</td>
                    <td>${item.scheme || 'N/A'}</td>
                    <td>${item.webserver || 'N/A'}</td>
                    <td>${item.content_type || 'N/A'}</td>
                    <td>${item.host || 'N/A'}</td>
                    <td>${item.path || 'N/A'}</td>
                    <td>${item.a ? item.a.join(', ') : 'N/A'}</td>
                    <td>${item.cname ? item.cname.join(', ') : 'N/A'}</td>
                    <td>${item.tech && item.tech.length > 0 ? item.tech.join(', ') : 'N/A'}</td>
                    <td>${item.words || 'N/A'}</td>
                    <td>${item.lines || 'N/A'}</td>
                    <td>${item.status_code || 'N/A'}</td>
                    <td>${item.content_length || 'N/A'}</td>
                    <td>${item.failed ? 'Yes' : 'No'}</td>
                    <td>${item.stored_response_path || 'N/A'}</td>
                    <td>${item.knowledgebase ? item.knowledgebase.PageType : 'N/A'}</td>
                `;
                tableBody.appendChild(row);
            });
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>HTTPx Data Report</title>
	<style>
	body { font-family: Arial, sans-serif; }
	.container { width: 100%; margin: auto; }
	table { width: 100%; border-collapse: collapse; }
	th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
	th { background-color: #4CAF50; color: white; }
	tr:nth-child(even) { background-color: #f2f2f2; }
	.scrollable { overflow-x: auto; }
	#search-bar {
	margin-bottom: 10px;
	}
	.pagination {
	margin-top: 10px;
	}
	.page-number {
	cursor: pointer;
	padding: 5px;
	}
	.page-number.active {
	background-color: #4CAF50;
	color: white;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>HTTPx Data Report</h1>
	<input type="text" id="search-bar" placeholder="Search...">
	<div class="scrollable">
	<table id="data-table">
	<thead>
	<tr>
	<th>Timestamp</th>
	<th>Port</th>
	<th>URL</th>
	<th>Input</th>
	<th>Title</th>
	<th>Scheme</th>
	<th>Webserver</th>
	<th>Content Type</th>
	<th>Host</th>
	<th>Path</th>
	<th>A Records</th>
	<th>CNAME Records</th>
	<th>Technologies</th>
	<th>Words</th>
	<th>Lines</th>
	<th>Status Code</th>
	<th>Content Length</th>
	<th>Failed</th>
	<th>Stored Response Path</th>
	<th>Page Type</th>
	</tr>
	</thead>
	<tbody>
	<!-- Data rows will be inserted here -->
	</tbody>
	</table>
	</div>
	<div class="pagination" id="pagination"></div>
	</div>

	<script>
	let globalData = []; // Store all data globally
	const rowsPerPage = 10;

	fetch('httpx.json')
	.then(response => response.text())
	.then(text => {
	const jsonParts = text.split('}}');
	const correctedJsonArray = jsonParts.map(part => part.trim() ? part + '}}' : '').filter(Boolean);
	const correctedJson = '[' + correctedJsonArray.join(',') + ']';
	globalData = JSON.parse(correctedJson);
	paginate(globalData, rowsPerPage);
	})
	.catch(error => console.error('Error processing data:', error));

	document.getElementById('search-bar').addEventListener('input', function(e) {
	const searchTerm = e.target.value.toLowerCase();
	if (searchTerm) {
	const [field, value] = searchTerm.split(':');
	let filteredData = globalData.filter(item => {
	let text = '';
	if (field === 'title') {
	text = item.title \|\| '';
	} else if (field === 'host') {
	text = item.host \|\| '';
	} else if (field === 'port') {
	text = item.port \|\| '';
	} else if (field === 'timestamp') {
	text = item.timestamp \|\| '';
	} else if (field === 'cname') {
	text = item.cname \|\| '';
	} else if (field === 'url') {
	text = item.url \|\| '';
	} else if (field === 'a') {
	text = item.a \|\| '';
	} else if (field === 'status_code') {
	text = item.status_code \|\| '';
	} else if (field === 'PageType') {
	text = item.knowledgebase.PageType \|\| '';
	} else if (field === 'tech') {
	text = item.tech \|\| '';
	} else if (field === 'webserver') {
	text = item.webserver \|\| '';
	}
	return text.toLowerCase().includes(value.trim());
	});

	paginate(filteredData, rowsPerPage);
	} else {
	paginate(globalData, rowsPerPage); // If no search term, show original data
	}
	});

	function paginate(data, rowsPerPage) {
	document.getElementById('pagination').innerHTML = ''; // Clear existing pagination
	const pageCount = Math.ceil(data.length / rowsPerPage);
	for (let i = 1; i <= pageCount; i++) {
	const pageNumber = document.createElement('span');
	pageNumber.className = 'page-number';
	pageNumber.textContent = i;
	pageNumber.addEventListener('click', () => {
	document.querySelectorAll('.page-number').forEach(node => node.classList.remove('active'));
	pageNumber.classList.add('active');
	displayPage(data, i, rowsPerPage);
	});
	document.getElementById('pagination').appendChild(pageNumber);
	}
	displayPage(data, 1, rowsPerPage); // Display first page initially
	}


	function displayPage(data, pageNumber, rowsPerPage) {
	const start = (pageNumber - 1) * rowsPerPage;
	const end = start + rowsPerPage;
	const pageData = data.slice(start, end);
	const tableBody = document.getElementById('data-table').querySelector('tbody');
	tableBody.innerHTML = ''; // Clear existing rows
	pageData.forEach(item => {
	const row = document.createElement('tr');
	row.innerHTML = `
	<td>${item.timestamp \|\| 'N/A'}</td>
	<td>${item.port \|\| 'N/A'}</td>
	<td>${item.url \|\| 'N/A'}</td>
	<td>${item.input \|\| 'N/A'}</td>
	<td>${item.title \|\| 'N/A'}</td>
	<td>${item.scheme \|\| 'N/A'}</td>
	<td>${item.webserver \|\| 'N/A'}</td>
	<td>${item.content_type \|\| 'N/A'}</td>
	<td>${item.host \|\| 'N/A'}</td>
	<td>${item.path \|\| 'N/A'}</td>
	<td>${item.a ? item.a.join(', ') : 'N/A'}</td>
	<td>${item.cname ? item.cname.join(', ') : 'N/A'}</td>
	<td>${item.tech && item.tech.length > 0 ? item.tech.join(', ') : 'N/A'}</td>
	<td>${item.words \|\| 'N/A'}</td>
	<td>${item.lines \|\| 'N/A'}</td>
	<td>${item.status_code \|\| 'N/A'}</td>
	<td>${item.content_length \|\| 'N/A'}</td>
	<td>${item.failed ? 'Yes' : 'No'}</td>
	<td>${item.stored_response_path \|\| 'N/A'}</td>
	<td>${item.knowledgebase ? item.knowledgebase.PageType : 'N/A'}</td>
	`;
	tableBody.appendChild(row);
	});
	}
	</script>
	</body>
	</html>