commit bfad4465547caf72bdf0181d0f6b23ca59c4422f Author: rattatwinko Date: Sun Mar 1 16:12:11 2026 +0100 buch of stuff; simple-captcha; mdtable; some more stuff diff --git a/bots/captcha.php b/bots/captcha.php new file mode 100644 index 0000000..acf466c --- /dev/null +++ b/bots/captcha.php @@ -0,0 +1,111 @@ += 0 && $newX < $width && $newY >= 0 && $newY < $height) { + $color = imagecolorat($image, $newX, $newY); + imagesetpixel($distorted, $x, $y, $color); + } + } +} + +header("Content-Type: image/png"); +imagepng($distorted); +imagedestroy($image); // deprectated but who cares +imagedestroy($distorted); // also deprecated + + +/* + +MIT License + +Copyright (c) [2026] [rattatwinko] + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. +*/ + +?> diff --git a/bots/fonts/ComicRelief-Bold.ttf b/bots/fonts/ComicRelief-Bold.ttf new file mode 100644 index 0000000..7b86246 Binary files /dev/null and b/bots/fonts/ComicRelief-Bold.ttf differ diff --git a/bots/fonts/readme.txt b/bots/fonts/readme.txt new file mode 100644 index 0000000..6c1e024 --- /dev/null +++ b/bots/fonts/readme.txt @@ -0,0 +1 @@ +fonts for scaptcha.php diff --git a/bots/index.html b/bots/index.html new file mode 100644 index 0000000..6a3c4c7 --- /dev/null +++ b/bots/index.html @@ -0,0 +1,29 @@ + + + + + + Captcha + + + +
+ + +
+ + + + diff --git a/bots/simple-captcha.js b/bots/simple-captcha.js new file mode 100644 index 0000000..5c09f02 --- /dev/null +++ b/bots/simple-captcha.js @@ -0,0 +1,107 @@ +class SimpleCaptcha extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: "open" }); + } + + connectedCallback() { + this.render(); + } + + render() { + this.shadowRoot.innerHTML = ` + +
+ Captcha + + + +
+ `; + + const img = this.shadowRoot.getElementById("img"); + img.addEventListener("click", () => this.refresh()); + + this.shadowRoot.getElementById("refresh") + .addEventListener("click", () => this.refresh()); + + this.shadowRoot.getElementById("submit") + .addEventListener("click", () => this.handleSubmit()); + } + + refresh() { + const img = this.shadowRoot.getElementById("img"); + img.src = "captcha.php?" + Date.now(); + this.shadowRoot.getElementById("input").value = ""; + } + + async validate() { + const input = this.shadowRoot.getElementById("input").value.trim(); + if (!input) return false; + + const formData = new FormData(); + formData.append("captcha", input); + + try { + const res = await fetch("validate.php", { method: "POST", body: formData }); + const data = await res.json(); + + return data.status === "valid"; + } catch (err) { + console.error("Captcha validation failed:", err); + return false; + } + } + + async handleSubmit() { + const isValid = await this.validate(); + + if (isValid) { + this.dispatchEvent(new CustomEvent("valid")); + this.refresh(); + } else { + this.dispatchEvent(new CustomEvent("invalid")); + this.refresh(); + } + } +} + +customElements.define("simple-captcha", SimpleCaptcha); diff --git a/bots/validate.php b/bots/validate.php new file mode 100644 index 0000000..ca29420 --- /dev/null +++ b/bots/validate.php @@ -0,0 +1,22 @@ + "error"]); + exit; +} + +if (strcasecmp($input, $_SESSION["simple-captcha"]) === 0) { + unset($_SESSION["simple-captcha"]); + echo json_encode(["status" => "valid"]); +} else { + echo json_encode(["status" => "invalid"]); +} + +?> diff --git a/elements/mdtable.js b/elements/mdtable.js new file mode 100644 index 0000000..a7eeb6f --- /dev/null +++ b/elements/mdtable.js @@ -0,0 +1,221 @@ +/* + * mdtable.js - OSS tool for HTML5 Tables + * This Class creates a HTML Tag (md-table) which lets you define a Markdown Table INSIDE + * of your exsisting HTML, you do NOT need any external libraries as this is a vanilla javascript class. + * Example HTML at EOF! + * + * written by rattatwinko@26/02/26 (license: MIT) + */ +class MdTable extends HTMLElement { + constructor() { + super(); + const shadow = this.attachShadow({ mode: "open" }); + const style = document.createElement("style"); + style.textContent = MdTable.styles; + + this._wrapper = document.createElement("div"); + shadow.append(style, this._wrapper); + } + + static get observedAttributes() { + return ["caption"]; + } + + connectedCallback() { + this._render(); + } + + attributeChangedCallback() { + this._render(); + } + + _render() { + const raw = this.textContent.trim(); + if (!raw) return; + const parsed = this._parseMarkdown(raw); + if (!parsed) return; + const { headers, rows, aligns } = parsed; + const table = document.createElement("table"); + const captionText = this.getAttribute("caption"); + + if (captionText) { + const caption = document.createElement("caption"); + caption.textContent = captionText; + table.appendChild(caption); + } + + const thead = document.createElement("thead"); + const tbody = document.createElement("tbody"); + const trHead = document.createElement("tr"); + + headers.forEach((text, i) => { + const th = document.createElement("th"); + th.textContent = text; + th.dataset.align = aligns[i]; + + if (this.hasAttribute("sortable")) { + th.classList.add("sortable"); + th.addEventListener("click", () => { + this._sortTable(tbody, i); + }); + } + + trHead.appendChild(th); + }); + + thead.appendChild(trHead); + + // create table elements based on how many rows there are + rows.forEach(row => { + const tr = document.createElement("tr"); + + row.forEach((text, i) => { + const td = document.createElement("td"); + td.textContent = text; + td.dataset.align = aligns[i]; + tr.appendChild(td); + }); + + tbody.appendChild(tr); + }); + + table.append(thead, tbody); + + this._wrapper.replaceChildren(table); + } + + // parse table + _parseMarkdown(md) { + const lines = md + .split("\n") + .map(l => l.trim()) + .filter(Boolean); + + if (lines.length < 2) return null; + + const headers = lines[0] + .split("|") + .map(c => c.trim()) + .filter(Boolean); + + const alignRow = lines[1] + .split("|") + .map(c => c.trim()) + .filter(Boolean); + + const aligns = alignRow.map(a => { + if (a.startsWith(":") && a.endsWith(":")) return "center"; + if (a.endsWith(":")) return "right"; + if (a.startsWith(":")) return "left"; + return "left"; + }); + + const rows = lines.slice(2).map(line => + line.split("|") + .map(c => c.trim()) + .filter(Boolean) + ); + + return { headers, rows, aligns }; + } + + _sortTable(tbody, columnIndex) { + const rows = Array.from(tbody.querySelectorAll("tr")); + const isNumeric = rows.every(row => + !isNaN(parseFloat(row.children[columnIndex].textContent)) + ); + + const asc = this._lastSortCol !== columnIndex || !this._lastAsc; + this._lastSortCol = columnIndex; + this._lastAsc = asc; + + rows.sort((a, b) => { + let A = a.children[columnIndex].textContent; + let B = b.children[columnIndex].textContent; + + if (isNumeric) { + A = parseFloat(A); + B = parseFloat(B); + } + + return asc ? (A > B ? 1 : -1) : (A < B ? 1 : -1); + }); + + rows.forEach(r => tbody.appendChild(r)); + } + + static styles = ` + :host { + display: block; + font-family: sans-serif; + --border-color: #ccc; + --header-bg: #f5f5f5; + } + + table { + width: 100%; + border-collapse: collapse; + } + + caption { + caption-side: top; + padding: 6px 0; + font-weight: bold; + text-align: left; + } + + th, td { + border: 1px solid var(--border-color); + padding: 6px 10px; + } + + th { + background: var(--header-bg); + font-weight: 600; + } + + th[data-align="right"], + td[data-align="right"] { + text-align: right; + } + + th[data-align="center"], + td[data-align="center"] { + text-align: center; + } + + th.sortable { + cursor: pointer; + } + `; +} + +// define +customElements.define("md-table", MdTable); + +/* Example HTML: + + + + + + html5 mdtable + + + + + | Name | Age | Score | + |:-----|----:|:----:| + | Anna | 22 | 90 | + | Max | 30 | 85 | + + + +*//* +License (MIT): + +Copyright (c) 2026 rattatwinko +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +*/ diff --git a/elements/pole.js b/elements/pole.js new file mode 100644 index 0000000..b673df7 --- /dev/null +++ b/elements/pole.js @@ -0,0 +1,160 @@ +/* + * pole-js - OSS tool for HTML5 Loading Bars + * HTML5-Tags created by This Project are: , + * This Class does NOT rely on any EXTERNAL dependencies. + * Example Script for Incrementing Pole is at EOF! + * written by rattatwinko@25/02/26 for https://rattatwinko.servecounterstrike.com + * + */ +class Pole extends HTMLElement { + constructor() { + super(); + const shadow = this.attachShadow({ mode: "open" }); + const style = document.createElement("style"); + const container = document.createElement("div"); + const valueBar = document.createElement("div"); + const labelDark = document.createElement("span"); + const labelLight = document.createElement("span"); + style.textContent = Pole.styles; + container.classList.add("container"); + valueBar.classList.add("valueBar"); + labelDark.classList.add("label", "label-dark"); + labelLight.classList.add("label", "label-light"); + container.appendChild(valueBar); + container.appendChild(labelDark); + container.appendChild(labelLight); + valueBar.appendChild(labelLight.cloneNode()); + shadow.append(style, container); + this._valueBar = valueBar; + this._labelDark = labelDark; + this._labelLight = labelLight; + this._manualLabel = null; + this._updateLabel(); + } + + attributeChangedCallback(name, oldValue, newValue) { + if (name === "value") { + const val = Math.min(100, Math.max(0, Number(newValue))); + this._valueBar.style.width = val + "%"; + this._labelLight.style.clipPath = `inset(0 0 0 0)`; + this._updateLabel(); + if (val >= 100) { this._valueBar.classList.add("complete"); } + else { this._valueBar.classList.remove("complete"); } + } + if (name === "unit") { this._updateLabel(); } + } + + _updateLabel() { + if (!this._labelDark || !this._labelLight) return; + const text = this._manualLabel !== null + ? this._manualLabel + : this.value + (this.getAttribute("unit") ?? "%"); + this._labelDark.textContent = text; + this._labelLight.textContent = text; + } + + get label() { return this._manualLabel ?? null; } + set label(val) { + this._manualLabel = val === null ? null : String(val); + this._updateLabel(); + } + + get value() { return Number(this.getAttribute("value")) || 0; } + set value(val) { this.setAttribute("value", val); } + + get unit() { return this.getAttribute("unit") ?? "%"; } + set unit(val) { this.setAttribute("unit", val); } + + static get observedAttributes() { return ["value", "unit"]; } + static styles = ` + /* pole-js stylesheet ; variable definitions: --bar-color ; --background-color ; --height (you can define this, but it wont look good); --width */ + :host { display: inline-block; --bar-color: blue; --background-color: #ddd; --width: 300px; --height: 25px; } + .container { + width: var(--width); + height: var(--height); + background: var(--background-color); + border-radius: 4px; + overflow: hidden; + position: relative; + } + .valueBar { + width: 0%; + height: 100%; + background-color: var(--bar-color); + background-image: linear-gradient( + 45deg, + rgba(255,255,255,0.3) 25%, + rgba(255,255,255,0) 25%, + rgba(255,255,255,0) 50%, + rgba(255,255,255,0.3) 50%, + rgba(255,255,255,0.3) 75%, + rgba(255,255,255,0) 75%, + rgba(255,255,255,0) 100% + ); + background-size: 40px 40px; + animation: pole-js 1s linear infinite; + transition: width 0.3s ease; + } + .valueBar.complete { animation: none; } + + .label { + position: absolute; + top: 0; left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: calc(var(--height) * 0.55); + font-family: sans-serif; + font-weight: bold; + white-space: nowrap; + pointer-events: none; + user-select: none; + } + + .label-dark { color: #333; text-shadow: 1px 1px 2px #000000; } + .label-light { text-shadow: 1px 1px 2px #000000; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.3); clip-path: inset(0 100% 0 0); transition: clip-path 0.3s ease; } + + @keyframes pole-js { + from { background-position: 0 0; } + to { background-position: 40px 0; } + } + `; +} +class ProgressBar extends Pole {/* for ease of use */} +customElements.define("pole-js", Pole); +customElements.define("progress-bar", ProgressBar); + +/* Example Script: + + + + + + HTML:5 ProgressBar.js Test + + + + + + + + +*//* +License (MIT): + +Copyright (c) 2026 rattatwinko +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +*/ diff --git a/elements/styles/pole.css b/elements/styles/pole.css new file mode 100644 index 0000000..426ab70 --- /dev/null +++ b/elements/styles/pole.css @@ -0,0 +1,43 @@ +:host { + display: inline-block; + --bar-color: red; +} + +.container { + width: 300px; + height: 25px; + background: #ddd; + border-radius: 4px; + overflow: hidden; + position: relative; +} + +.valueBar { + width: 0%; + height: 100%; + background-color: var(--bar-color); + + background-image: linear-gradient( + 45deg, + rgba(255,255,255,0.3) 25%, + rgba(255,255,255,0) 25%, + rgba(255,255,255,0) 50%, + rgba(255,255,255,0.3) 50%, + rgba(255,255,255,0.3) 75%, + rgba(255,255,255,0) 75%, + rgba(255,255,255,0) 100% + ); + + background-size: 40px 40px; + animation: barberpole 1s linear infinite; + transition: width 0.3s ease; +} + +.valueBar.complete { + animation: none; +} + +@keyframes barberpole { + from { background-position: 0 0; } + to { background-position: 40px 0; } +} diff --git a/examples/mdtable.html b/examples/mdtable.html new file mode 100644 index 0000000..eb5a699 --- /dev/null +++ b/examples/mdtable.html @@ -0,0 +1,17 @@ + + + + + + html5 mdtable + + + + + | Name | Age | Score | + |:-----|----:|:----:| + | Anna | 22 | 90 | + | Max | 30 | 85 | + + + diff --git a/examples/progressbar.html b/examples/progressbar.html new file mode 100644 index 0000000..d0f91cd --- /dev/null +++ b/examples/progressbar.html @@ -0,0 +1,32 @@ + + + + + + HTML:5 ProgressBar.js Test + + + +

HTML:5 progressbar.js script test

+ + + + + + + +