<!DOCTYPE html>
<html>
<head>
<title>LZK Extreme Cheats sus moment (Impostor Amogus)</title>
<meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="https://nsfw.cringe-studios.com/sus.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
html {
font-family: 'Courier Prime', monospace;
}
table, th, td{
border: 1px solid;
border-collapse: collapse;
padding: 5px;
}
table {
background-color: lightgray;
}
tr:nth-child(odd) {
background-color: rgb(172, 172, 172);
}
tr:nth-child(even) {
background-color: rgb(220, 220, 220);
}
th, td {
width: 50%;
}
body {
margin: 0;
grid-template-rows: min-content 1fr;
max-height: calc(100vh - 20px);
display: grid;
overflow: hidden;
padding: 10px;
row-gap: 10px;
}
#sussus {
width: 100%;
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
overflow-y: scroll;
}
input {
font-size: 1.5em;
display: block;
font-family: 'Courier Prime', monospace;
}
</style>
</head>
<body>
<input type="text" placeholder="Search for question" id="query" autocomplete="off"></input>
<div id="sussus">
<table>
<thead>
<tr><th>QUESTIONS</th><th>ANSWERS</th></tr>
</thead>
<tbody>
<!-- DYNAMIC CONTENT -->
</tbody>
</table>
</div>
<script defer>
let tbody = document.getElementsByTagName("tbody")[0];
async function loadStuff() {
let questionsAndAnswrsArray = await $.getJSON("https://cringe-studios.com/lzk/questions.json");
for(let q in questionsAndAnswrsArray) {
let tr = document.createElement("tr");
let td = document.createElement("td");
td.innerText = q;
td.style.padding = "20px";
tr.appendChild(td);
let td2 = document.createElement("td");
let theAnswr = questionsAndAnswrsArray[q];
if(Array.isArray(theAnswr)) {
let ul = document.createElement("ul");
for(let answr of theAnswr) {
let li = document.createElement("li");
li.innerText = answr;
ul.appendChild(li);
}
td2.appendChild(ul);
}else if(typeof theAnswr == "object") {
let dl = document.createElement("dl");
for(let key in theAnswr) {
let dt = document.createElement("dt");
dt.innerText = key;
dl.appendChild(dt);
let dd = document.createElement("dd");
dd.innerText = theAnswr[key];
dl.appendChild(dd);
}
td2.appendChild(dl);
}else{
if(theAnswr.startsWith("lonk:")) {
let a = document.createElement("a");
a.href = theAnswr.substring(5);
a.setAttribute("download", "");
a.innerText = theAnswr.substring(5);
td2.appendChild(a);
}else {
td2.innerText = theAnswr;
}
}
tr.appendChild(td2);
tbody.appendChild(tr);
}
let elements = document.getElementsByTagName("tr");
for(let i = 0; i < elements.length; i++){
elements[i].onclick = function(e){
if(elements[i].style.backgroundColor == "limegreen"){
elements[i].style.backgroundColor = "orangered";
}else if(elements[i].style.backgroundColor == "orangered"){
elements[i].style.backgroundColor = null;
}else {
elements[i].style.backgroundColor = "limegreen";
};
}
}
}
let query = document.getElementById("query");
query.oninput = event => {
for(let tr of tbody.children) {
if(tr.innerText.toLowerCase().includes(query.value.toLowerCase())) {
tr.style.display = "table-row";
}else {
tr.style.display = "none";
}
}
};
loadStuff();
</script>
</body>
</html>