Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026
in Halle (Saale)
Beispiel:URL-Encoder.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL-Encoder</title>
<style>
textarea {
width: 100%;
height: 15em;
font-family: monospace;
font-size: 1em;
margin-bottom: 1rem;
}
body {
max-width: 60em;
margin: 2rem auto;
padding: 0 1rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap:1em;
}
h1,
.controls {grid-column: 1/ -1;}
div {
display: grid;
grid-template-columns: 1fr 2em;
gap:1em;
}
div label {font: bold 1.25em sans-serif;}
svg {border:thin dotted;}
svg,textarea, #preview {
grid-column: 1 / -1;
aspect-ratio: 2/1;
border: thin solid;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
</style>
</head>
<body>
<div>
<label for="input">SVG Input</label>
<button data-copy="input">📋</button>
<textarea id="input"></textarea>
</div>
<div>
<label for="encoded">URL-encoded</label>
<button data-copy="encoded">📋</button>
<textarea id="encoded"></textarea>
</div>
<div>
<label for="css">background-image</label>
<button data-copy="css">📋</button>
<textarea id="css"></textarea>
</div>
<div>
<label for="preview">So sieht's aus</label>
<div id="preview" style="">
</div>
</div>
<script>
const input = document.getElementById('input');
const encoded = document.getElementById('encoded');
const cssOut = document.getElementById('css');
const preview = document.getElementById('preview');
let lock = false;
// --- helpers ---
function clearAll() {
lock = true;
input.value = '';
encoded.value = '';
cssOut.value = '';
preview.style.backgroundImage = '';
lock = false;
}
function compactSVG(svg) {
return svg
.trim()
.replace(/\r?\n|\r/g, '')
.replace(/\t+/g, ' ')
.replace(/\s{2,}/g, ' ')
.replace(/>\s+</g, '><');
}
function encodeSVG(svg) {
return encodeURIComponent(svg)
.replace(/%0A/g, '')
.replace(/%20/g, ' ')
.replace(/%3D/g, '=')
.replace(/%3A/g, ':')
.replace(/%2F/g, '/');
}
function updateFromSVG(svg) {
const compact = compactSVG(svg);
const enc = encodeSVG(compact);
const css = `background-image: url("data:image/svg+xml,${enc}");`;
input.value = compact;
encoded.value = enc;
cssOut.value = css;
preview.style.backgroundImage = `url("data:image/svg+xml,${enc}")`;
}
function updateFromEncoded(enc) {
const svg = decodeURIComponent(enc);
const compact = compactSVG(svg);
const css = `background-image: url("data:image/svg+xml,${enc}");`;
input.value = compact;
encoded.value = enc;
cssOut.value = css;
preview.style.backgroundImage = `url("data:image/svg+xml,${enc}")`;
}
// --- textarea events ---
input.addEventListener('input', () => {
if (lock) return;
if (!input.value.trim()) {
clearAll();
return;
}
lock = true;
updateFromSVG(input.value);
lock = false;
});
encoded.addEventListener('input', () => {
if (lock) return;
if (!encoded.value.trim()) {
clearAll();
return;
}
lock = true;
updateFromEncoded(encoded.value);
lock = false;
});
// --- copy buttons ---
document.querySelectorAll('[data-copy]').forEach(btn => {
btn.addEventListener('click', () => {
const id = btn.dataset.copy;
const el = document.getElementById(id);
if (!el || !el.value) return;
navigator.clipboard.writeText(el.value);
const old = btn.textContent;
btn.textContent = '✔';
setTimeout(() => btn.textContent = old, 800);
});
});
</script>
</body>
</html>
