those are some haxxor moments
This commit is contained in:
lda committed
1 parent
88d4ce7320
commit
a8e5c26d55
7 files changed
+936
-331
No files matched your search
@@ -0,0 +1,263 @@
|
||||
import { micromark } from "https://esm.sh/micromark@3?bundle";
|
||||
import {
|
||||
math,
|
||||
mathHtml,
|
||||
} from "https://esm.sh/micromark-extension-math@3?bundle";
|
||||
import { gfm, gfmHtml } from "https://esm.sh/micromark-extension-gfm@3?bundle";
|
||||
import {
|
||||
frontmatter,
|
||||
frontmatterHtml,
|
||||
} from "https://esm.sh/micromark-extension-frontmatter@2?bundle";
|
||||
// if this works yeag
|
||||
|
||||
const block = (evt) => {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
evt.stopImmediatePropagation();
|
||||
};
|
||||
|
||||
const ainput = document.getElementById("woah");
|
||||
const baddress = window.location.pathname;
|
||||
//lmao
|
||||
const address =
|
||||
baddress.charAt(baddress.length - 1) === "/" ? baddress : baddress + "/";
|
||||
const hehe = [
|
||||
"somewhere idfk",
|
||||
"somewhere else ig",
|
||||
"around idk not here probably",
|
||||
"prob somwhere else",
|
||||
"right at this place, right here, where the link is at",
|
||||
];
|
||||
const updateurlhref = (e) => {
|
||||
if (e.target.value) {
|
||||
if (e.target.checkValidity()) {
|
||||
ainput.innerText = window.location.origin + address;
|
||||
ainput.setAttribute("href", "./" + e.target.value);
|
||||
} else {
|
||||
ainput.removeAttribute("href");
|
||||
ainput.innerHTML = `<span style="color:red">invalid: </span>`;
|
||||
}
|
||||
} else {
|
||||
ainput.removeAttribute("href");
|
||||
ainput.textContent = null;
|
||||
}
|
||||
};
|
||||
const urlfield = document.getElementById("oneid");
|
||||
urlfield.addEventListener("input", updateurlhref);
|
||||
|
||||
const divTextarea = document.getElementById("the_div");
|
||||
const realTextarea = document.getElementById("the_Textarea");
|
||||
|
||||
const placeholderDivText = "attr(placeholder)";
|
||||
divTextarea.style.setProperty(
|
||||
"--placeholder-content",
|
||||
divTextarea.textContent.trim() ? "" : placeholderDivText
|
||||
); // prolly init type shi
|
||||
|
||||
const translateMDButton = document.getElementById("translateMD");
|
||||
|
||||
const MDtoHTMLEngine = (v) =>
|
||||
micromark(v, {
|
||||
extensions: [frontmatter(), gfm(), math()],
|
||||
htmlExtensions: [frontmatterHtml(), gfmHtml(), mathHtml()], // please if i can CodeHighlight maybe PLEAS
|
||||
});
|
||||
const updateMD = (e) => {
|
||||
divTextarea.innerHTML = MDtoHTMLEngine(realTextarea.value);
|
||||
click_out_the_div();
|
||||
};
|
||||
translateMDButton.addEventListener("click", updateMD);
|
||||
//
|
||||
let updatingInterval = 240;
|
||||
// let justUpdated = false;
|
||||
let updateTimeout;
|
||||
// let a = 0 // was trying to make a hey why do i have to translate your every keystroke??????? thingamajig
|
||||
const typingHandler = (f) => (e) => {
|
||||
// a++
|
||||
// if (a > 4) { // thats 12wpm
|
||||
// a = 0
|
||||
// if (updateTimeout)
|
||||
// clearTimeout(updateTimeout);
|
||||
// updateTimeout = undefined;
|
||||
// }
|
||||
if (
|
||||
// !justUpdated &&
|
||||
!updateTimeout) {
|
||||
// justUpdated = true;
|
||||
updateTimeout = setTimeout(() => {
|
||||
|
||||
try {
|
||||
f();
|
||||
document.getElementById("errorfrommd").textContent = null;
|
||||
} catch (e) {
|
||||
document.getElementById("errorfrommd").textContent = e.message;
|
||||
}
|
||||
|
||||
// justUpdated = false;
|
||||
clearTimeout(updateTimeout)
|
||||
updateTimeout = undefined;
|
||||
}, updatingInterval);
|
||||
}
|
||||
|
||||
};
|
||||
const mdUpdatingHandler = typingHandler(updateMD); //why
|
||||
document.getElementById("auto_translate").addEventListener("change", (e) => {
|
||||
if (e.target.checked) {
|
||||
mdUpdatingHandler();
|
||||
realTextarea.addEventListener("input", mdUpdatingHandler);
|
||||
} else {
|
||||
realTextarea.removeEventListener("input", mdUpdatingHandler);
|
||||
}
|
||||
});
|
||||
|
||||
const click_in_the_div = (e) => {
|
||||
divTextarea.style.setProperty("--placeholder-content", "");
|
||||
};
|
||||
const click_out_the_div = (e) => {
|
||||
if (divTextarea.textContent.trim() || divTextarea.innerHTML) {
|
||||
divTextarea.style.setProperty("--placeholder-content", "");
|
||||
} else {
|
||||
divTextarea.style.setProperty("--placeholder-content", placeholderDivText);
|
||||
}
|
||||
};
|
||||
divTextarea.addEventListener("focus", click_in_the_div); // if function () {}
|
||||
divTextarea.addEventListener("blur", click_out_the_div); // i can use this
|
||||
|
||||
// const resizeObserver = new ResizeObserver((mutation) => [
|
||||
// mutation[0].contentRect.width,
|
||||
// mutation[0].contentRect.height,
|
||||
// ]);
|
||||
|
||||
divTextarea.style.setProperty;
|
||||
const toggleDivTextarea = document.getElementById("viewDiv");
|
||||
|
||||
toggleDivTextarea.addEventListener("click", (e) => {
|
||||
divTextarea.toggleAttribute("hidden");
|
||||
});
|
||||
|
||||
document.querySelectorAll('input[type="number"]').forEach((e) => {
|
||||
e.addEventListener("keydown", (evt) => {
|
||||
if (["-", "+", ".", "e", "E"].includes(evt.key)) {
|
||||
// what if regex?
|
||||
block(evt);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const selectorAll = document.getElementById("threeid");
|
||||
const AlertOfAllTime = document.getElementById("i_appear");
|
||||
const optionOfTheYear = document.getElementById("uniqueID");
|
||||
const advancedTypeShit = document.getElementById("rescode");
|
||||
const haxxor = (e) => {
|
||||
if (/^[1-5][0-9][0-9]$/.test(advancedTypeShit.value)) {
|
||||
advancedTypeShit.setCustomValidity("");
|
||||
optionOfTheYear.value = advancedTypeShit.value;
|
||||
} else {
|
||||
advancedTypeShit.setCustomValidity(
|
||||
"seems like its not a valid status code. i think its numbers from 100 to 599"
|
||||
);
|
||||
}
|
||||
};
|
||||
selectorAll.addEventListener("change", function (e) {
|
||||
if (this.value == "301" || this.value == "302") {
|
||||
AlertOfAllTime.hidden = false;
|
||||
} else {
|
||||
AlertOfAllTime.hidden = true;
|
||||
}
|
||||
console.log(
|
||||
selectorAll.selectedOptions[0],
|
||||
optionOfTheYear,
|
||||
selectorAll.selectedOptions[0] == optionOfTheYear
|
||||
);
|
||||
});
|
||||
selectorAll.addEventListener("change", (e) => {
|
||||
if (selectorAll.selectedOptions[0] === optionOfTheYear) {
|
||||
advancedTypeShit.style.display = "inline";
|
||||
selectorAll.style.display = "inline";
|
||||
advancedTypeShit.addEventListener("input", haxxor);
|
||||
} else {
|
||||
advancedTypeShit.style.display = "none";
|
||||
selectorAll.style.display = null;
|
||||
advancedTypeShit.value = null;
|
||||
advancedTypeShit.removeEventListener("input", haxxor);
|
||||
}
|
||||
});
|
||||
const form = document.getElementById("only_form");
|
||||
form.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
const data = new FormData(form);
|
||||
const jsData = Object.fromEntries(data);
|
||||
Object.entries(jsData).forEach(([k, v]) => (jsData[k] = v || undefined));
|
||||
// important here as we are dealing with Strings true/false kinda works how it is.
|
||||
const shippedData = { from: "ldlda", data: jsData };
|
||||
const jsonified_data = JSON.stringify(shippedData);
|
||||
|
||||
// const xhr = new XMLHttpRequest();
|
||||
// xhr.open(form.getAttribute("method"), form.getAttribute("action"));
|
||||
// xhr.setRequestHeader("Content-type", "application/json");
|
||||
// xhr.send(jsonified_custom_data);
|
||||
// xhr.addEventListener(
|
||||
// "load",
|
||||
// (_) => (document.getElementById("what").innerText = xhr.response)
|
||||
// );
|
||||
|
||||
const request = new Request(form.getAttribute("action"), {
|
||||
method: form.getAttribute("method"),
|
||||
headers: new Headers({ "Content-type": "application/json" }),
|
||||
body: jsonified_data,
|
||||
});
|
||||
|
||||
fetch(request)
|
||||
.then((response) => response.text())
|
||||
.then((t) => {
|
||||
const a = document.getElementById("what");
|
||||
a.parentElement.hidden = false;
|
||||
a.textContent = t;
|
||||
GETendp();
|
||||
})
|
||||
.catch((e) => console.error(e));
|
||||
return false;
|
||||
});
|
||||
|
||||
let htmlContent = "";
|
||||
const tableContent = document.getElementById("tbale");
|
||||
const actualTableContent = document.getElementById("updatedget");
|
||||
|
||||
const GETendp = (_) =>
|
||||
fetch(address + "endp")
|
||||
.then((response) => response.json())
|
||||
.then((json) => {
|
||||
console.log(json);
|
||||
// htmlContent = "<tbody>";
|
||||
|
||||
for (let key in json) {
|
||||
const url = json[key]["one"];
|
||||
const responsecode = json[key]["three"];
|
||||
let responsecontent = "something else";
|
||||
switch (responsecode) {
|
||||
case 200:
|
||||
responsecontent = "text";
|
||||
break;
|
||||
// damn
|
||||
case 301:
|
||||
case 302:
|
||||
case 307:
|
||||
case 308: // DONT EVER stick with 302
|
||||
responsecontent = "redirect";
|
||||
break;
|
||||
}
|
||||
htmlContent += `<tr>
|
||||
<th>${key}</th>
|
||||
<td><a href="${"./" + url}">${url}</a></td>
|
||||
<td>${responsecontent}</td>
|
||||
<td>${json[key]["four"] || "Never"}</td>
|
||||
</tr>`;
|
||||
}
|
||||
|
||||
// htmlContent += "</tbody>";
|
||||
actualTableContent.innerHTML = htmlContent;
|
||||
htmlContent = ''
|
||||
})
|
||||
.catch((e) => console.error(e));
|
||||
|
||||
GETendp();
|
||||
tableContent.parentElement.hidden = false;
|
||||
@@ -0,0 +1,235 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-enough: #303030;
|
||||
--color-1: #8bafed;
|
||||
--color-2: #faf3ed;
|
||||
--color-3: #feddcc;
|
||||
--color-4: #ff7100;
|
||||
--challenge: "use dem colors";
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='215' height='215' viewBox='0 0 200 200'%3E%3Cpolygon fill='%23FAF7F5' fill-opacity='0.58' points='100 0 0 100 100 100 100 200 200 100 200 0'/%3E%3C/svg%3E");
|
||||
|
||||
color: var(--dark-enough);
|
||||
background-attachment: fixed;
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
grid-template-columns: fit-content(20%) auto;
|
||||
grid-template-rows: 100px 1fr 300px;
|
||||
grid-template-areas: "head head" "nav main" "nav foot";
|
||||
max-width: 100%;
|
||||
}
|
||||
body,
|
||||
html {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body > * {
|
||||
margin-inline: auto;
|
||||
border-radius: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* why do i have to care about this */
|
||||
nav {
|
||||
grid-area: nav;
|
||||
background-color: azure;
|
||||
min-width: 120px;
|
||||
max-width: 280px;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 2em;
|
||||
transition: height 1s ease-in-out, background-color 1s ease-in-out;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:has(a:active) {
|
||||
height: 7em;
|
||||
background-color: paleturquoise;
|
||||
transition: height 1s ease-in-out, background-color 1s ease-in-out;
|
||||
}
|
||||
> a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: azure;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
grid-area: head;
|
||||
}
|
||||
|
||||
header nav {
|
||||
font-size: xx-large;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
}
|
||||
/* previous design */
|
||||
|
||||
main {
|
||||
grid-area: main;
|
||||
min-height: 100vh;
|
||||
background-color: aliceblue;
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
footer {
|
||||
grid-area: foot;
|
||||
background-color: aliceblue;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: mistyrose;
|
||||
padding: 0.5em;
|
||||
border-radius: 6px;
|
||||
max-width: calc(100% - 1em);
|
||||
margin-inline: auto;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: 1em;
|
||||
justify-content: space-evenly;
|
||||
> * {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
form label,
|
||||
input,
|
||||
select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
label:has(input:valid)::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
label:has(input:invalid)::before {
|
||||
content: "invalid: ";
|
||||
color: red;
|
||||
}
|
||||
|
||||
label:has(input:required:invalid)::before {
|
||||
content: "required: ";
|
||||
color: red;
|
||||
}
|
||||
|
||||
.setting-buttons * {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* *[hidden] { display: none;} */
|
||||
/* why do i have to do that */
|
||||
#the_div::before {
|
||||
content: var(--placeholder-content);
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
#the_div::before,
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
#the_div {
|
||||
background-color: field;
|
||||
border: thin solid var(--dark-enough);
|
||||
border-radius: 6px;
|
||||
width: fit-content;
|
||||
max-height: 86vh;
|
||||
outline: none;
|
||||
overflow: auto;
|
||||
overflow-wrap: break-word;
|
||||
resize: none;
|
||||
min-height: 16rem;
|
||||
height:max-content;
|
||||
}
|
||||
/* ????? */
|
||||
|
||||
img {
|
||||
object-fit: contain;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.why {
|
||||
min-width: 20rem;
|
||||
padding-inline: 4px;
|
||||
max-width: 960px;
|
||||
min-height: 7rem;
|
||||
}
|
||||
|
||||
.table > table {
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
thead {
|
||||
background-color: lavender;
|
||||
border-bottom: var(--dark-enough) 1px solid;
|
||||
}
|
||||
|
||||
tbody > tr:nth-of-type(even) {
|
||||
background-color: snow;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
/* selecting all cells using NOT & > * > * > * */
|
||||
padding: 3px 6px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 820px) {
|
||||
body {
|
||||
gap: 1em;
|
||||
grid-auto-flow: column;
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas: "head " "nav" "main" "foot";
|
||||
}
|
||||
nav {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
nav ul {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
flex: 1;
|
||||
}
|
||||
nav li {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:has(a:active) {
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user