Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ye #17

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Ye #17

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6eb564b
Update index.html
mayorpete Feb 14, 2023
e07e8bf
Update index.html
mayorpete Feb 14, 2023
b38d72f
Update index.html
mayorpete Feb 14, 2023
f027eee
Update index.html
mayorpete Feb 15, 2023
198d6ec
Update index.html
mayorpete Feb 16, 2023
e559b9f
Update index.html
mayorpete Feb 16, 2023
df5dacb
Update index.html
mayorpete Feb 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
246 changes: 120 additions & 126 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,133 +1,127 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>#000000</title>
<link type="image/x-icon" rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAHklEQVQ4T2NkYGD4z0ABYBw1gGE0DBhGw4BhWIQBAE5OEAELnjVHAAAAAElFTkSuQmCC">
<html>
<head>
<meta charset="UTF-8" />
<title>WebSocket Example</title>
<style>
:root {
--color: #000000;
--color-transparent: #00000022;
}

::selection {
background: var(--color-transparent);
}

html,
body {
background: var(--color);
height: 100%;
margin: 0;
}

body {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

#color {
background: white;
color: var(--color);
font-size: 2.5rem;
font-weight: 300;
padding: 2.25rem 3rem;
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
cursor: text;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>

<body>
<p id="color">#000000</p>
<script>
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
</head>
<body>
<form>
<label for="keyword">Filter by keyword:</label>
<input type="text" id="keyword" name="keyword" />
<button type="button" onclick="filterTable()">Filter</button>
</form>
<br />
<table id="domainTable">
<thead>
<tr>
<th>Domain</th>
</tr>
</thead>
<tbody id="domainTableBody"></tbody>
</table>
<script>
const tableBody = document.querySelector("table tbody");
const keywordInput = document.getElementById("keyword");
const tableData = [];

function createTableRows(allDomains) {
tableBody.innerHTML = "";
allDomains.forEach((domains) => {
domains.forEach((domain) => {
const row = document.createElement("tr");
const domainCell = document.createElement("td");
domainCell.textContent = domain;
row.appendChild(domainCell);
tableBody.appendChild(row);
});
});
}

function filterTable() {
const keyword = keywordInput.value.trim().toLowerCase();
const rows = tableBody.querySelectorAll("tr");

rows.forEach((row) => {
const domain = row.querySelector("td").textContent.trim().toLowerCase();
const shouldHide = !domain.includes(keyword);
row.style.display = shouldHide ? "none" : "";
});
}

const ws = new WebSocket("wss://lobster-app-d249x.ondigitalocean.app/");

ws.onopen = () => {
console.log("WebSocket is open now.");
ws.send("Hello Server!");
};

// listen for messages from the websocket
ws.onmessage = function (event) {
var message = JSON.parse(event.data);
if (message.message_type === "certificate_update") {
// get the domains from the websocket message
var domains = message.data.leaf_cert.all_domains;

// add the domains to the table data
for (var i = 0; i < domains.length; i++) {
var domain = domains[i];
if (tableData.indexOf(domain) === -1) {
tableData.push(domain);
}

function hslToHex(h, s, l) {
h /= 360;
s /= 100;
l /= 100;
var r = void 0,
g = void 0,
b = void 0;
if (s === 0) {
r = g = b = l; // achromatic
}

// clear the table and repopulate with the updated data
var tableBody = document.getElementById("domainTableBody");
tableBody.innerHTML = "";

for (var i = 0; i < tableData.length; i++) {
var row = tableBody.insertRow();
var cell = row.insertCell();
cell.innerHTML = tableData[i];
}

// Add the search filter to the HTML table
var input = document.getElementById("searchInput");
input.addEventListener("keyup", function () {
var filter = input.value.toUpperCase();
var table = document.getElementById("domainTable");
var tr = table.getElementsByTagName("tr");
for (var i = 0; i < tr.length; i++) {
var td = tr[i].getElementsByTagName("td")[0];
if (td) {
var txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
var hue2rgb = function hue2rgb(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
tr[i].style.display = "none";
}
var toHex = function toHex(x) {
var hex = Math.round(x * 255).toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return '#' + toHex(r) + toHex(g) + toHex(b);
}
}

window.onload = function () {
let stopProp = function (ev) {
ev.stopPropagation();
}

var colorElement = document.getElementById("color");
colorElement.addEventListener("click", stopProp, false);
colorElement.addEventListener("mousedown", stopProp, false);

var setFavicon = function (hex) {
var canvas = document.createElement('canvas');
canvas.width = 16;
canvas.height = 16;
var ctx = canvas.getContext('2d');
ctx.fillStyle = hex;
ctx.fillRect(0, 0, 16, 16);
document.getElementsByTagName('link')[0].href = canvas.toDataURL("image/x-icon");
}

var setRandomColor = function setRandomColor() {
var h = void 0,
s = void 0,
l = void 0;

h = randomInt(0, 359);
s = randomInt(55, 75);
l = randomInt(40, 60);

document.documentElement.style.setProperty('--color', 'hsl(' + h + ', ' + s + '%, ' + l + '%)');
var hex = hslToHex(h, s, l);
document.title = hex;
colorElement.innerHTML = hex;
document.documentElement.style.setProperty('--color-transparent', hex + '22');

setFavicon(hex);
};
setRandomColor();

var body = document.getElementsByTagName("body")[0];
body.addEventListener("mousedown", function (ev) {
ev.preventDefault();
});
body.addEventListener("click", function () {
setRandomColor();
}, false);
};
</script>
</body>

</html>
});
}
};

ws.onerror = (error) => {
console.error("WebSocket Error:", error);
};

ws.onclose = () => {
console.log("WebSocket is closed now.");
};
</script>
</body>
</html>