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,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>lđa testing</title>
|
||||
<link type="text/css" rel="stylesheet" href="./index/style.css" />
|
||||
<!-- huh? what? -->
|
||||
<script type="module" src="./index/script.js" defer></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" />
|
||||
<!-- real -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>front end design:</h1>
|
||||
</header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a>about</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#oneid">view</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">read</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>write</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="box">
|
||||
<form action="./endp" method="post" id="only_form" enctype="text/plain">
|
||||
<label for="oneid">url (no space please thanks)
|
||||
<div style>
|
||||
<a id="woah" style="text-align: right; min-width: 240px"></a>
|
||||
<input style="display: inline" required type="text" name="one" id="oneid" placeholder="url"
|
||||
maxlength="15" pattern="\S+" />
|
||||
</div>
|
||||
</label>
|
||||
<label for="the_Textarea">content (idk how it works anymore):
|
||||
</label>
|
||||
<span id="i_appear" hidden>so uh if you choose redirect then this should be a complete link and nothing
|
||||
else uh example <a target="_blank" href="https://ldlda.com">https://ldlda.com</a> uh</span>
|
||||
<div>
|
||||
<div class="setting-buttons">
|
||||
<!-- <input type="button" id="viewTextarea" value="show textarea" /> -->
|
||||
<input type="button" id="viewDiv" value="show rendered" />
|
||||
<input type="button" value="markdown to html" id="translateMD" />
|
||||
<label for="auto_translate"><input type="checkbox" id="auto_translate" /> auto (lag)</label>
|
||||
</div>
|
||||
<textarea required class="why" name="two" id="the_Textarea" placeholder="what"></textarea>
|
||||
<!-- <div class="why" name="two" id="the_div" placeholder="type in here"></div> -->
|
||||
</div>
|
||||
<label for="threeid"><span style="display: block;">response code if path visited. Default 200</span>
|
||||
<select required name="three" id="threeid">
|
||||
<option value="" disabled>-- CHOOSE --</option>
|
||||
<optgroup label="content">
|
||||
<option selected value="200">text file</option>
|
||||
</optgroup>
|
||||
<optgroup label="redirect">
|
||||
<option value="302">shortlinks</option>
|
||||
<option value="301">shortlinks permanent</option>
|
||||
</optgroup>
|
||||
<option id="uniqueID">do NOT:</option>
|
||||
</select>
|
||||
<input type="number" id="rescode" placeholder="advanced type shi" style="width: 5em; display: none;"
|
||||
min="100" max="599" step="1">
|
||||
</label>
|
||||
<label for="fourid">expiration time for anything (todo idk how to do )<input type="number" name="four"
|
||||
id="fourid" placeholder="expiration in days" pattern="\d{1,3}" min="0" max="255"
|
||||
step="1" /></label>
|
||||
<!-- bulletproof -->
|
||||
<p>leave empty for none / default</p>
|
||||
<input type="submit" value="Sumit rn" />
|
||||
</form>
|
||||
<div>
|
||||
<p>html from markdown:</p>
|
||||
<div class="why" name="two" id="the_div" placeholder="press the translate button"></div>
|
||||
<div id="errorfrommd"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p>if bugs tell me how to solve cuz im bad</p>
|
||||
<div hidden>
|
||||
<p>what post got (sensitive):</p>
|
||||
<div id="what"></div>
|
||||
</div>
|
||||
<div hidden class="table">
|
||||
what is present:
|
||||
<table id="tbale">
|
||||
<thead>
|
||||
<th>no.</th>
|
||||
<th>url</th>
|
||||
<th>it is a</th>
|
||||
<th>exp time</th>
|
||||
</thead>
|
||||
<tbody id="updatedget"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<h1>by <a href="//ldlda.com">lđa</a></h1>
|
||||
<p>very fragile</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -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