Skip to content

Commit

Permalink
Create index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@mthcht
mthcht authored Feb 6, 2024
1 parent b147a85 commit de22cb5
Showing 1 changed file with 240 additions and 0 deletions.
240 changes: 240 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,240 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta viewport="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>
.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;
}
/* Dark theme overrides for Handsontable */
body, html {
background-color: #0d1b2a; /* Dark background for the page */
}
/* Ensures the container also has a dark background */
#example {
background-color: #0d1b2a; /* Dark background for the container */
}

.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); }
}

</style>
</head>

<body>

<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: 200 }; // Custom width for this specific column
}
if (column.data === 'metadata_keyword_type') {
return { ...column, width: 140 }; // 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
}),
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
});
}
</script>

</body>
</html>

0 comments on commit de22cb5

Please sign in to comment.