re-add files

script.js

@@ -0,0 +1,218 @@
+var presets = {
+	// gender
+	trans: ["5BCEFA", "F5A9B8", "FFFFFF", "F5A9B8", "5BCEFA"],
+	transfem: ["73deff","ffe0ed","ffb5d5","ff8cbe","ffb5d5","ffe0ed","73deff"],
+	transmasc: ["FF8ABD","CDF5FE","9AEBFF","74DFFF","9AEBFF","CDF5FE","FF8ABD"],
+	xenogender: ["ff6691","ff9997","ffb782","fbffa6","84bbff","9c84ff","a317ff"],
+	enby: ["FCF434", "FFFFFF", "9C59D1", "2C2C2C"],
+	agender: ["000000", "bababa", "ffffff", "b9f484", "ffffff", "bababa", "000000"],
+	genderfluid: ["FF76A4", "FFFFFF", "C011D7", "000000", "2F3CBE"],
+	opossum: ["2f2f2f","b0bfc6","e0e0e0","ffffff","f1ba94","f19f93","e37671"],
+
+	// sexuality
+	lesbian: ["D52D00", "EF7627", "FF9A56", "FFFFFF", "D162A4", "B55690", "A30262"],
+	asexual: ["000000", "A3A3A3", "FFFFFF", "800080"],
+	sapphic: ["FD8BA8", "FBF2FF", "FD8BA8"],
+	bisexual: ["D60270", "D60270", "9B4F96", "0038A8", "0038A8"],
+	pansexual: ["FF218C", "FFD800", "21B1FF"],
+	omnisexual: ["FE9ACE", "FF53BF", "200044", "6760FE", "8EA6FF"],
+
+	// romantic attraction
+	aromantic: ["3DA542", "A7D379", "FFFFFF", "A9A9A9", "000000"],
+
+	// misc
+	aroace: ["ef9007", "f6d317", "ffffff", "45bcee", "1e3f54"],
+	polyam: ["00c2ff", "ff006a", "0a1027"],
+	pride: ["E40303", "FF8C00", "FFED00", "008026", "24408E", "732982"],
+	custom: [],
+};
+
+var stripediv = document.querySelector("div#stripes");
+
+var add = document.querySelector("#addrow");
+var addColor = add.children[0].children[0];
+var addButton = add.children[1].children[0];
+
+function addstripe(color) {
+	var del = add.cloneNode(true);
+	del.id = "delrow";
+	var removeColor = del.children[0].children[0];
+	removeColor.readonly = removeColor.disabled = true;
+	removeColor.value = color;
+	var removeButton = del.children[1].children[0];
+	removeButton.children[0].icon = "ph:minus";
+	removeButton.onclick = () => {
+		del.parentElement.removeChild(del);
+		updatestripes();
+	};
+	stripediv.appendChild(del);
+}
+
+addButton.onclick = () => {
+	if (!/^#[0-9A-F]{6}$/i.test(addColor.value)) {
+		alert("Invalid color: " + addColor.value);
+		return false;
+	}
+	addstripe(addColor.value);
+	addColor.value = "#ff00ff";
+
+	updatestripes();
+};
+
+function updatestripes() {
+	var stripes = [];
+	for (var stripe of document.querySelectorAll("#delrow")) {
+		stripes.push(stripe.children[0].children[0].value);
+	}
+
+	var svgStripes = document.querySelector("g#stripes");
+	var newStripes = [];
+	var count = stripes.length;
+	var height = (24 - 10 / 3) / count;
+	for (var stripe in stripes) {
+		var color = stripes[stripe];
+		var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+		rect.setAttribute("fill", color);
+		rect.setAttribute("width", 25);
+		rect.setAttribute("height", height + 0.1);
+		rect.setAttribute("x", 0);
+		rect.setAttribute("y", 10 / 6 + stripe * height);
+		newStripes.push(rect);
+	}
+	svgStripes.replaceChildren(...newStripes);
+}
+
+function defaultcolors() {
+	if (location.host == "localhost") {
+		// opossumgender pride
+		addstripe("#2f2f2f");
+		addstripe("#b0bfc6");
+		addstripe("#e0e0e0");
+		addstripe("#ffffff");
+		addstripe("#f1ba94");
+		addstripe("#f19f93");
+		addstripe("#e37671");
+	} else {
+		// trans pride
+		addstripe();
+		addstripe();
+		addstripe();
+		addstripe();
+		addstripe();
+	}
+}
+
+defaultcolors();
+updatestripes();
+
+var presetDropdown = document.querySelector("#preset");
+for (var preset of Object.keys(presets).sort()) {
+	if(preset == "custom")
+		continue;
+	var option = document.createElement("option");
+	option.value = option.innerText = preset;
+	presetDropdown.appendChild(option);
+}
+
+
+var option = document.createElement("option");
+option.value = option.innerText = "custom";
+presetDropdown.appendChild(option);
+
+presetDropdown.onchange = () => {
+	stripediv.replaceChildren([]);
+	for (var stripe of presets[presetDropdown.value]) {
+		addstripe("#" + stripe.toLowerCase());
+	}
+	updatestripes();
+};
+
+presetDropdown.onchange();
+
+var svg = document.querySelector("svg");
+
+var resolutionDropdown = document.querySelector("#res");
+var resolutions = [
+	"16",
+	"32",
+	"64",
+	"128",
+	"256",
+	"512",
+	"1024",
+	"2048",
+	"4096",
+];
+
+for (var res of resolutions) {
+	var option = document.createElement("option");
+	option.value = res;
+	option.innerText = res + "px";
+	if (res == "64") {
+		option.selected = true;
+		option.innerText += " *";
+	} else if (parseInt(res) > 256) {
+		option.innerText += " !";
+	}
+	resolutionDropdown.appendChild(option);
+}
+
+resolutionDropdown.onchange = () => {
+	var res = resolutionDropdown.value;
+	svg.setAttribute("width", res);
+	svg.setAttribute("height", res);
+};
+
+resolutionDropdown.onchange();
+
+var download = function (href, name) {
+	var link = document.createElement("a");
+	link.download = name;
+	link.style.opacity = "0";
+	document.body.appendChild(link);
+	link.href = href;
+	link.click();
+	link.remove();
+};
+
+var downloadButton = document.querySelector("#dl");
+downloadButton.onclick = () => {
+	svgToPng(svg, (imgData) => {
+		download(imgData, "verified" + presetDropdown.value + ".png");
+	});
+};
+
+function svgToPng(svg, callback) {
+	svgUrlToPng(svg, (imgData) => {
+		callback(imgData);
+	});
+}
+
+function getSvgUrl(svg) {
+	return `data:image/svg+xml;base64,${btoa(
+		new XMLSerializer().serializeToString(svg)
+	)}`;
+}
+
+function svgUrlToPng(svg, callback) {
+	const svgUrl = getSvgUrl(svg);
+	const svgImage = document.createElement("img");
+	svgImage.style.opacity = 0;
+	svgImage.style.position = "absolute";
+	svgImage.style.zIndex = -1;
+	svgImage.style.top = "-1000vh";
+	document.body.appendChild(svgImage);
+	svgImage.onload = function () {
+		document.body.removeChild(svgImage);
+		const canvas = document.createElement("canvas");
+		canvas.width = svg.getAttribute("width");
+		canvas.height = svg.getAttribute("height");
+		// document.body.appendChild(canvas);
+		const canvasCtx = canvas.getContext("2d");
+		canvasCtx.drawImage(svgImage, 0, 0);
+		const imgData = canvas.toDataURL("image/png");
+		callback(imgData);
+		// document.body.removeChild(imgPreview);
+	};
+	svgImage.src = svgUrl;
+}