index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hunting Keywords</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">
    <script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/papaparse@latest"></script>
    <style>
		/* GitHub logo style */
		.github-logo {
			position: absolute;
			top: 10px;
			right: 10px;
			width: 32px;
			height: 32px;
			background-color: white; /* Add background color */
			border-radius: 50%; /* Make it circular */
			padding: 4px; /* Add padding to create a border effect */
		}
        .handsontable .htCore .ht_master .wtHolder {
            overflow-y: hidden !important;
        }
        .handsontable td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 23px !important;
            line-height: 23px !important;
            border-color: #2f4f4f !important; /* Darker color for cell borders */
        }
        .handsontable th {
            border-color: #2f4f4f !important; /* Darker color for header cell borders */
        }
        /* Dark theme overrides for Handsontable */
        html, body {
            height: 100%; /* Full height */
            margin: 0;
            padding: 0;
            background-color: #0d1b2a; /* Dark background for the page */
        }
        /* Ensure the container also has a dark background and full height */
        #example {
            background-color: #0d1b2a; /* Dark background for the container */
            height: 100%; /* Full height */
        }

        .handsontable, .wtHolder {
            color: #53A757; /* Green text */
            background-color: #201F1F !important; /* Dark background for the table */
        }

        /* Specific overrides for table cells */
        .handsontable .htCore td, .handsontable .htCore th {
            background-color: #04151f !important; /* Dark background for cells */
            color: #a7c957 !important; /* Green text */
        }

        /* Header cells */
        .handsontable .htCore th {
            background-color: #1b263b !important; /* Slightly lighter background for header cells */
            color: #a7c957;
        }

        /* Override for current row & column highlight */
        .ht__highlight {
            background-color: #0d1b2a !important; /* Darker background for highlight */
        }

        /* Adjusting selection colors to fit the dark theme */
        .ht_master .htBorders .current {
            border-color: #4f772d !important; /* Green border for current selection */
        }

        .ht_master .htBorders .area {
            border-color: #90a955 !important; /* Green border for selected area */
        }

        /* Customizing scrollbar for dark theme */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #003049;
        }

        ::-webkit-scrollbar-thumb {
            background: #555;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #444;
        }
        .ascii-art-container {
		    white-space: nowrap; /* Prevents the content from wrapping */
            text-align: center; /* Center the content horizontally */
            width: 100%; /* Ensure the container spans the full width */
			max-width: 100%; /* Ensures the container does not exceed the viewport width */
            overflow: auto; /* In case the ASCII art is wider than the screen */
			overflow-x: auto; /* Enables horizontal scrolling */

        }
        pre {
            display: inline-block; /* Allows the <pre> block to be centered by text-align */
            white-space: pre-wrap; /* Ensures that the ASCII art does not overflow the container */
            word-wrap: break-word; /* Breaks the text to prevent overflow */
        }
        .ascii-art-container pre {
		    white-space: pre; /* Maintains spacing and formatting of the ASCII art */
		    overflow-x: auto; /* Allows horizontal scrolling if needed */
            color: #32CD32; /* Light green color */
			display: inline-block; /* Treats the pre element as a block while keeping it inline */
        }
		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}

        /* Responsive design adjustments */
        @media (max-width: 768px) {
            .github-logo {
                width: 24px;
                height: 24px;
            }
            .handsontable td {
                font-size: 12px;
                height: 20px !important;
                line-height: 20px !important;
            }
            .handsontable th {
                font-size: 12px;
            }
            #example {
                overflow-x: auto;
            }
        }
    </style>
</head>

<body>
<a href="https://github.com/mthcht/ThreatHunting-Keywords" target="_blank">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg" alt="GitHub" class="github-logo">
</a>
<div class="ascii-art-container">
<pre>
▐▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▌
▐░▀█▀░█░█░█▀▄░█▀▀░█▀█░▀█▀░░░█░█░█░█░█▀█░▀█▀░▀█▀░█▀█░█▀▀░░░█░█░█▀▀░█░█░█░█░█▀█░█▀▄░█▀▄░█▀▀ ▌
▐░░█░░█▀█░█▀▄░█▀▀░█▀█░░█░░░░█▀█░█░█░█░█░░█░░░█░░█░█░█░█░░░█▀▄░█▀▀░░█░░█▄█░█░█░█▀▄░█░█░▀▀█ ▌
▐░░▀░░▀░▀░▀░▀░▀▀▀░▀░▀░░▀░░░░▀░▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀░▀░▀▀▀░░░▀░▀░▀▀▀░░▀░░▀░▀░▀▀▀░▀░▀░▀▀░░▀▀▀ ▌
▐▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▌
</pre>
</div>
<div id="loadingIndicator" style="display:none; text-align:center; color: #0D5C2D;">
    <div class="spinner" style="display:inline-block; margin-left:10px; border: 4px solid rgba(50,205,50,.3); border-radius: 50%; border-top-color: #fff; width: 24px; height: 24px; animation: spin 1s ease-in-out infinite;"></div>
</div>

<div id="example"></div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        loadCSV('threathunting-keywords.csv');
    });

    function loadCSV(filePath) {
		// Show loading indicator
		document.getElementById('loadingIndicator').style.display = 'block';

        fetch(filePath)
        .then(response => response.text())
        .then(csvText => {
            Papa.parse(csvText, {
                header: true,
                dynamicTyping: true,
                skipEmptyLines: true,
                complete: function(results) {
                    var data = results.data;
                    if (data.length === 0 || (data.length === 1 && !data[0])) {
                        return;
                    }

                    // Original column headers from the data
                    var originalColHeaders = Object.keys(data[0]);

                    // Adjusted column headers for display
                    var colHeaders = originalColHeaders.map(header =>
                        header.startsWith('metadata_') ? header.substring(9) : header
                    );

                    // Map original data fields to adjusted column headers for Handsontable
                    var columns = originalColHeaders.map(header => ({
                        data: header,
                        type: 'text',
                        title: header.startsWith('metadata_') ? header.substring(9) : header
                    }));

                    createHandsontable(data, colHeaders, columns);
					// Hide loading indicator once loading is complete
					document.getElementById('loadingIndicator').style.display = 'none';
                    }
            });
        })
		.catch(error => {
			console.error('Error loading the CSV file:', error);
			// Hide loading indicator in case of error
			document.getElementById('loadingIndicator').style.display = 'none';
		});
    }

    function createHandsontable(data, colHeaders, columns) {
        var container = document.getElementById('example');
        if (window.hot) {
            window.hot.destroy(); // Destroy existing Handsontable instance if exists
        }
        window.hot = new Handsontable(container, {
            data: data,
            colHeaders: colHeaders,
            rowHeaders: true,
            columns: columns.map(column => {
                // Check if the column is the one that needs custom width
                if (column.data === 'keyword') {
                    return { ...column, width: 200 }; // Custom width for this specific column
                }
                if (column.data === 'metadata_keyword_regex') {
                    return { ...column, width: 110 }; // Custom width for this specific column
                }
                if (column.data === 'metadata_keyword_type') {
                    return { ...column, width: 150 }; // Custom width for this specific column
                }
                if (column.data === 'metadata_description') {
                    return { ...column, width: 200 }; // Custom width for this specific column
                }
                if (column.data === 'metadata_malwares_name') {
                    return { ...column, width: 50 }; // Custom width for this specific column
                }
                if (column.data === 'metadata_tool_techniques') {
                    return { ...column, width: 120 }; // Custom width for this specific column
                }
                if (column.data === 'metadata_tool_tactics') {
                    return { ...column, width: 120 }; // Custom width for this specific column
                }
                if (column.data === 'metadata_groups_name') {
                    return { ...column, width: 50 }; // Custom width for this specific column
                }
                if (column.data === 'metadata_category') {
                    return { ...column, width: 150 }; // Custom width for this specific column
                }
                if (column.data === 'metadata_link') {
                    return { ...column, width: 150 }; // Custom width for this specific column
                }
                if (column.data === 'metadata_tool') {
                    return { ...column, width: 170 }; // Custom width for this specific column
                }
                if (column.data === 'metadata_comment') {
                    return { ...column, width: 100 }; // Custom width for this specific column
                }
                if (column.data === 'metadata_severity_score') {
                    return { ...column, width: 130 }; // Custom width for this specific column
                }
                if (column.data === 'metadata_popularity_score') {
                    return { ...column, width: 130 }; // Custom width for this specific column
                }
                return column; // Return other columns as is
            }),
			licenseKey: 'non-commercial-and-evaluation', // Specify the license key here
            colWidths: 100, // Set fixed width for all columns
            rowHeights: 23, // Set initial height for all rows
            manualColumnResize: true, // Allow manual resizing of columns
            manualRowResize: true, // Allow manual resizing of rows
            filters: true,
            dropdownMenu: true,
			// enable sorting for all columns
			columnSorting: true
        });
    }
</script>

</body>
</html>