render/base.css

@@ -0,0 +1,307 @@
+html, body {
+	box-sizing: border-box;
+	height: 100%;
+	width: 100%;
+	margin: 0;
+	padding: 0;
+	font-family: system-ui;
+	/*font-variant: all-petite-caps;*/
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+h1,h2,h3,h4,h5 {
+	margin-top: 0;
+}
+
+.emoji:after {
+	font-variant-emoji: emoji; /* experimental and only in firefox :( */
+	content: '\FE0F'; /* fuck off, give me emoji // https://codepoints.net/U+FE0F */
+}
+
+footer {
+	text-align: center;
+	color: #888;
+	margin: .5em;
+}
+
+.autocomplete {
+	position: relative;
+	display: inline-block;
+}
+
+.autocomplete-items {
+	z-index: 99;
+	position: absolute;
+	top: 100%;
+	left: 0;
+	right: 0;
+}
+
+.autocomplete-item {
+	background-color: #fefefe;
+	cursor: pointer;
+	border: 1px solid #eee;
+	border-top: none;
+}
+
+.autocomplete-item:hover {
+	background-color: #e9e9e9;
+}
+
+.item-inactive {
+	padding: 5px;
+}
+
+.item-inactive .group {
+	color: #777;
+}
+
+.item-active {
+	padding: 5px;
+	background-color: DodgerBlue !important;
+	color: #fff;
+}
+
+.item-active .group {
+	color: #ccc;
+}
+/*
+table, tr, td, th {
+	border: 1px solid #888;
+}
+*/
+
+
+
+:root {
+	--caption-size: 2rem;
+	--outline-width: 2px;
+	--outline-width-: calc(0px - var(--outline-width));
+	--options-height: 18.6em; /* FIXME */
+	--options-height-min: 17em;
+	--image-height: 800px;
+}
+
+
+.grid-container {
+	display: grid;
+	width: 100%;
+	grid-template-columns: auto 1fr;
+	grid-template-rows: auto;
+	grid-template-areas: "sidebar content";
+	column-gap: 10px;
+	height: 100vh;
+}
+.grid-container.reversed {
+	grid-template-columns: 1fr auto;
+	grid-template-areas: "content sidebar";
+}
+
+.sidebar {
+	grid-area: sidebar;
+	/*position: fixed;*/
+	height: 100vh;
+	overflow-y: auto;
+	white-space: nowrap; /* ugly firefox */
+	overflow-block: scroll; /* ugly firefox */
+	display: grid;
+	grid-gap: 2px;
+	align-items: stretch;
+}
+
+#options {
+	height: var(--options-height);
+}
+#table { }
+#fail_images {
+	display: grid;
+	justify-content: center;
+}
+
+
+.panel {
+	display: block;
+	padding: 10px;
+}
+.panel > div {
+	line-height: 30px;
+}
+.sticky {
+	top: 0;
+	position: sticky;
+	z-index: 10;
+}
+
+.content {
+	grid-area: content;
+	overflow: auto;
+	justify-content: center;
+}
+
+body.min { /* split feature */
+	width: 75%; margin: 0 auto; /* FIXME */
+}
+.min .sidebar {
+	font-size: 12px;
+}
+.min .sidebar .panel > div {
+	line-height: 20px;
+}
+.min .sidebar #options.panel {
+	height: var(--options-height-min);
+}
+
+
+@keyframes flash {
+	0% {
+		z-index: 1;
+	}
+	49% {
+		z-index: 1;
+	}
+	50% {
+		z-index: -1;
+	}
+	100% {
+		z-index: -1;
+	}
+}
+.block {
+	position: relative;
+	display: block;
+	max-height: var(--image-height);
+}
+.block:after {
+	display: block;
+	position: absolute;
+	bottom: 20px;
+	left: 25px;
+
+	font-family: Impact;
+	font-size: var(--caption-size);
+	/*-webkit-text-stroke: 1px black;*/ /*ugly*/
+	text-shadow:
+	var(--outline-width) var(--outline-width) 0 #000,
+	var(--outline-width-) var(--outline-width) 0 #000,
+	var(--outline-width-) var(--outline-width-) 0 #000,
+	var(--outline-width) var(--outline-width-) 0 #000;
+}
+.block-test:after {
+	/*content: "TEST 🧪\FE0F";*/
+	content: "TEST";
+	color: white;
+}
+.block-gold:after {
+	/*content: "GOLD 🏆\FE0F";*/
+	content: "GOLD";
+	color: gold;
+}
+
+/*
+.block:before {
+	display: block;
+	position: absolute;
+	bottom: 20px;
+	left: 20px;
+}
+.block-test:before {
+	content: "🧪\FE0F";
+	color: white;
+}
+.block-gold:before {
+	content: "🏆\FE0F";
+	color: gold;
+}
+*/
+
+.block-gold {
+	position: absolute;
+	animation: flash var(--animation-duration) infinite;
+}
+
+
+:root {
+	--animation-duration: 0.7s;
+	--height-image: calc((100vh - 800px) / 2);
+}
+
+.image-container,
+.meta-block {
+	position: relative;
+}
+
+.meta-block h2 {
+	/*display: none;*/
+	font-family: monospace;
+	/*font-family: "Gill Sans", sans-serif;*/
+	padding-top: 10px;
+	margin-top: revert;
+}
+.meta-block h2:before {
+	content: "🎯\FE0F"; /* for hedging her bets; see .emoji for details */
+}
+#fail_images.padding .meta-block {
+	/*margin-block: 100vh;*/
+	padding-top: calc(var(--height-image));
+	/*padding-bottom: calc(50% - var(--height-image) );*/
+}
+#fail_images.padding .meta-block h2, .meta-block:first-child h2 {
+	border-top: none;
+}
+
+.block-diff {
+	display: none;
+	/*visibility: collapse;*/
+	position: absolute;
+	top: 0px;
+	/*z-index: 10;*/
+}
+
+.block-diff.show_diff {
+	display: block;
+	z-index: 2;
+}
+
+
+.image-container, img, .block {
+	max-width: 100%;
+}
+
+table {
+	position: relative;
+	width: 100%;
+	text-align: left;
+	border-collapse: collapse; 
+	line-height: normal;
+}
+th, td {
+	padding: 0.15rem;
+	border: none;
+}
+th {
+	
+}
+th.table-sticky {
+	position: sticky;
+	top: 0;
+}
+#options.sticky + #table th.table-sticky {
+	top: calc(var(--options-height) + 0.07em); /* FIXME */
+}
+.min .sidebar #options.sticky + #table th.table-sticky {
+	top: calc(var(--options-height-min) + 0.07em); /* FIXME */
+}
+
+input[type=range] { vertical-align: middle; }
+
+a, a:visited {
+	
+}
+
+
+ul.list {
+	margin: 0;
+}
+ul.list li { display: inline-block; margin-left: 10px; } /* FIXME: flex or grid */
+ul.list li:first-child { margin-left: 0;}

render/index.js

@@ -9,13 +9,13 @@ function makeId(d) {
 }
 
 function rowAttribs(d) {
-	return d.fail ? {style: `background-color: rgb(128, 0, 0)`} : null;
+	return d.fail ? {"class": "fail"} : null;
 }
 
 function sectionLink(value, d) {
 	const id = makeId(d);
 	const a = Tag('a', {href: '#'+id}, value);
-	a.addEventListener('click', () => { $(id).setAttribute('open', true); });
+	//a.addEventListener('click', () => { $(id).setAttribute('open', true); });
 	return [a];
 }
 
@@ -24,7 +24,7 @@ function makeTable(fields, data, attrs_func) {
 		Tag('tr', null, null, (() => {
 			let tds = [];
 			for (const f of fields) {
-				tds.push(Tag('td', null, null, [Text(f.label)]));
+				tds.push(Tag('th', {"class": "table-sticky"}, null, [Text(f.label)]));
 			}
 			return tds;
 		})()),
@@ -36,12 +36,17 @@ function makeTable(fields, data, attrs_func) {
 		table.appendChild(Tag('tr', attrs, null, (() => {
 			let ret = [];
 			for (const f of fields) {
-				const value = d[f.field];
+				let value = d[f.field];
 				if (value === undefined) {
 					ret.push(Tag('td'));
 					continue;
 				}
 
+				// TODO: remove ugly hack
+				if (f.field == "fail")  {
+					value = value ? "❌" : "✅";
+				}
+
 				const field_func = f.tags_func ? f.tags_func : fieldFuncDefault;
 				const tags = field_func(value, d);
 				let attrs = null;
@@ -78,8 +83,10 @@ function buildTestResultsTable(data) {
 // Filter out all success
 function filterData(data) {
 	return data
-		.filter((d) => {return d.diff_pct != 0;})
+	.filter((d) => { return d.diff_pct !== 0; })
-		.sort((l, r) => {return l.diff_pct < r.diff_pct;});
+	.sort((l, r) => { 
+		return l.diff_pct < r.diff_pct ? 1 : -1; // RTFM
+	});
 }
 
 function buildSummary(data) {
@@ -91,20 +98,286 @@ function buildSummary(data) {
 
 function buildTestResultImages(data) {
 	return data.flatMap((d) => {
-		return Tag('details', {id: makeId(d)}, null, [
+		//return Tag('details', {id: makeId(d)}, null, [
-			Tag('summary', null, `${d.test}/${d.channel} δ=${d.diff_pct}`),
+		return Tag('div', {id: makeId(d), "class": "meta-block"}, null, [
-			Tag('img', {src: d.image_diff}),
+			//Tag('summary', null, `${d.test}/${d.channel} δ=${d.diff_pct}`),
-			Tag('img', {src: d.image_flip}),
+			Tag('h2', null, `${d.test}/${d.channel} δ=${d.diff_pct}`),
+			Tag('div', {"class": "image-container"}, null, [
+				Tag('div', {"class": "block block-gold"}, null, [Tag('img', {src: d.image_gold, loading: "lazy", "class": "gold"})]),
+				Tag('div', {"class": "block block-test"}, null, [Tag('img', {src: d.image_test, loading: "lazy", "class": "test"})]),
+				Tag('div', {"class": "block block-diff"}, null, [Tag('img', {src: d.image_diff, loading: "lazy", "class": "diff"})]),
+			])
+			//Tag('img', {src: d.image_flip}),
 		]);
 	});
 }
 
-window.onload = () => {
-	$('summary').replaceChildren(...buildSummary(data));
 
-	const filtered_data = filterData(data);
+
-	$('fail_table').replaceChildren(...buildTestResultsTable(filtered_data));
+function buildData(table, images, data, sort) {
-	$('fail_images').replaceChildren(...buildTestResultImages(filtered_data));
+	if (sort) {
+		data = filterData(data);
+	}
+	table.replaceChildren(...buildTestResultsTable(data));
+	images.replaceChildren(...buildTestResultImages(data));
+}
+
+window.onload = () => {
+	const linkElements = document.querySelectorAll('link[rel^="stylesheet"][data-theme]');
+	const themeOptionsDiv = document.querySelector(".theme-options");
+
+	function updateLinkRel(linkElements, id) {
+		for (const link of linkElements) {
+			const themeName = link.getAttribute("data-theme");
+			link.disabled = themeName !== id;
+			link.rel = themeName === id && link.rel.includes("alternate") 
+				? link.rel.replace(" alternate", "") 
+				: link.rel + " alternate";
+		}
+	}
+	// themes
+	let themes = [];
+	for (const linkElement of linkElements) {
+		const themeName = linkElement.getAttribute("data-theme");
+		const checked = !linkElement.rel.includes("alternate") ? {"checked": "checked"} : {};
+		themes.push(
+			Tag("label", null, null, [
+				Tag("input", {"type": "radio", "class": "theme-button", "id": themeName, "name": "theme", ...checked}, null, null,
+				"click", (e) => {
+					updateLinkRel(linkElements, e.target.id);
+				}),
+				Text(linkElement.title)
+			])
+		)
+	};
+
+
+	function changeAnimationDuration(newDuration) {
+		document.documentElement.style.setProperty('--animation-duration', newDuration + 'ms');
+	}
+	const saveToLocalStorage = debounce((key, value) => {
+		localStorage.setItem(key, value);
+	});
+	const loadFromLocalStorage = localStorage.getItem;
+
+
+	function syncSliderValues(event) {
+		changeAnimationDuration(event.target.value);
+		const value = event.target.value;
+		const input = event.target;
+		const otherInput = input === rangeInput ? numberInput : rangeInput;
+		otherInput.value = value;
+		saveToLocalStorage("rendertest_switchfrequency", value);
+	}
+	
+	let isPaused = false;
+	let gridContainer, sidebarOptions, numberInput, rangeInput, table, images;
+
+	gridContainer = Tag("div", {"class": "grid-container"}, null, [
+		Tag("div", {"class": "sidebar"}, null, [
+			sidebarOptions = Tag("div", {"class": "panel", "id": "options"}, null, [
+				Tag("div", {"class": "theme-options"}, null, [
+					Tag("b", null, null, [
+						Tag("span", {"class": "emoji"}, "🎨"), 
+						Text(" Theme")
+					]),
+					...themes
+				]),
+				Tag("div", null, null, [
+					Tag("b", null, null, [
+						Tag("span", {"class": "emoji"}, "🌈"), 
+						Text(" Show diff mode on")
+					]),
+					Tag("label", null, null, [
+						Tag("input", {"type": "radio", "name": "diff_mode", "value": "click", "checked": "checked"}), 
+						Tag("span", {"class": "emoji"}, "🖱"), 
+						Text(" Click (LMB)")
+					]),
+					Tag("label", null, null, [
+						Tag("input", {"type": "radio", "name": "diff_mode", "value": "separate", "disabled": "disabled"}), 
+						Tag("span", {"class": "emoji"}, "🎏"), 
+						Text(" Separate")
+					])
+				]),
+				Tag("div", null, null, [
+					Tag("b", null, null, [
+						Tag("span", {"class": "emoji"}, "🤼"), 
+						Text("‍ Image compare mode")
+					]),
+					Tag("label", null, null, [
+						Tag("input", {"type": "radio", "name": "compare_mode", "value": "switch", "checked": "checked"}), 
+						Tag("span", {"class": "emoji"}, "🎞"), 
+						Text(" Switch images")
+					]),
+					Tag("label", {"title": "under construction"}, null, [
+						Tag("input", {"type": "radio", "name": "compare_mode", "value": "split", "disabled": "disabled"}), 
+						Tag("span", {"class": "emoji"}, "🪓"), 
+						Text(" Split images")
+					])
+				]),
+				Tag("div", null, null, [
+					Tag("b", null, null, [
+						Tag("span", {"class": "emoji"}, "🎢"), 
+						Text(" Speed switch image")
+					]),
+					rangeInput = Tag("input", {"type": "range", "style": "width: 140px;", "min": "10", "max": "1000", "value": "700"}, null, null, "input", syncSliderValues), 
+					numberInput = Tag("input", {"type": "number", "size": "5", "min": "10", "max": "1000", "value": "700"}, null, null, "input", syncSliderValues),
+					Text(" ms "),
+					Tag("button", null, "pause", null, "click", (e) => {
+						//e.target.textContent = isPaused ? "❄ pause" : "🔥 resume";
+						e.target.textContent = isPaused ? "pause" : "resume";
+						changeAnimationDuration(isPaused ? numberInput.value : 0);
+						isPaused = !isPaused;
+					})
+				]),
+				Tag("div", null, null, [
+					Tag("b", null, null, [
+						Tag("span", {"class": "emoji"}, "🧻"),
+						Text(" Sidebar")
+					]),
+					Tag("label", null, null, [
+						Tag("input", {"type": "radio", "name": "sidebar-mode", "value": "minimize", "checked": "checked"}, null, null, "input", (e) => {
+							sidebarOptions.classList.toggle("sticky") 
+						}),
+						Text(" auto minimize")
+					]),
+					Tag("label", null, null, [
+						Tag("input", {"type": "radio", "name": "sidebar-mode", "value": "always"}, null, null, "input", (e) => {
+							sidebarOptions.classList.toggle("sticky") 
+						}),
+						Text(" show always")
+					]),
+					Tag("ul", {"class": "list"}, null, [
+						Tag("li", null, null, [
+							Tag("span", {"class": "emoji"}, "🧲"),
+							Text(" position"),
+							Tag("label", null, null, [
+								Tag("input", {"type": "radio", "name": "sidebar_pos", "value": "left", "checked": "checked"}, null, null, "input", (e) => {
+									console.log(e);
+									gridContainer.classList.toggle("reversed");
+								}),
+								Text(" left")
+							]),
+							Tag("label", null, null, [
+								Tag("input", {"type": "radio", "name": "sidebar_pos", "value": "right"}, null, null, "input", (e) => {
+									console.log(e);
+									gridContainer.classList.toggle("reversed");
+								}),
+								Text(" right")
+							]),
+						]),
+						Tag("li", null, null, [
+							Tag("span", {"class": "emoji"}, "📏"),
+							Text(" size"),
+							Tag("label", null, null, [
+								Tag("input", {"type": "radio", "name": "sidebar-size", "value": "always", "checked": "checked"}, null, null, "input", (e) => {
+									document.body.classList.toggle("min");
+								}),
+								Text(" default")
+							]), 
+							Tag("label", null, null, [
+								Tag("input", {"type": "radio", "name": "sidebar-size", "value": "minimize"}, null, null, "input", (e) => {
+									document.body.classList.toggle("min");
+								}),
+								Text(" mini")
+							])
+						]), 
+
+					]),
+				]),
+				Tag("div", null, null, [
+					Tag("b", null, null, [
+						Tag("span", {"class": "emoji"}, "⚖"),
+						Text(" Image position")
+					]), 
+					Tag("label", null, null, [
+						Tag("input", {"type": "radio", "name": "image_position", "value": "relative", "disabled": "disabled"}),
+						Text(" relative")
+					]), 
+					Tag("label", null, null, [
+						Tag("input", {"type": "radio", "name": "image_position", "value": "center", "checked": "checked"}),
+						Text(" center")
+					]),
+					Tag("b", null, null, [
+						Tag("span", {"class": "emoji"}, "🖼"),
+						Tag("label", null, null, [
+							Text(" Image padding"),
+							Tag("input", {"type": "checkbox", "name": "all_diff", "checked": "checked"}, null, null, "input", (e) => {
+								images.classList.toggle("padding");
+							})
+						])
+					])
+				]),
+				Tag("div", null, null, [
+					Tag("b", null, null, [
+						Tag("span", {"class": "emoji"}, "📷"),
+						Tag("label", null, null, [
+							Text(" Toggle diff for all"),
+							Tag("input", {"type": "checkbox", "name": "all_diff", "disabled": "disabled"})
+						])
+					])
+				]),
+				Tag("div", null, null, [
+					Tag("b", null, null, [
+						Tag("span", {"class": "emoji"}, "📊"),
+						Text(" Sort table by Failed")
+					]), 
+					Tag("label", null, null, [
+						Tag("input", {"type": "radio", "name": "sort_table", "value": "yes", "checked": "checked"}, null, null, "input", (e) => {
+							buildData(table, images, data, true);
+						}),
+						Text(" yes")
+					]), 
+					Tag("label", null, null, [
+						Tag("input", {"type": "radio", "name": "sort_table", "value": "no"}, null, null, "input", (e) => {
+							buildData(table, images, data, false);
+						}),
+						Text(" no")
+					])
+				])
+			]),
+			Tag("div", {"class": "panel", "id": "table"}, null, [
+				Tag("h2", null, "List of things that are not perfect"),
+				table = Tag("div", {"id": "fail_table"})
+			])
+		]),
+		Tag("div", {"class": "content"}, null, [
+			Tag("h1", null, "Rendertest report"),
+			Tag("h2", null, "Summary"),
+			Tag("div", {"id": "summary"}, null, [...buildSummary(data)]),
+			Tag("h2", null, "Images of things that are not perfect"),
+			images = Tag("div", {"id": "fail_images", "class": "padding"})
+		])
+	])
+	document.body.appendChild(gridContainer);
+	
+	buildData(table, images, data, true);
+
+	for (let block of document.querySelectorAll(".image-container")) {
+		block.addEventListener("click", function() {
+			let diffElement = this.querySelector(".block-diff");
+			diffElement.classList.toggle('show_diff');
+		});
+	};
+
+
+
+	function handleCheckboxChange(checkboxId, key) {
+		var checkbox = document.getElementById(checkboxId);
+		saveToLocalStorage(key, checkbox.checked);
+	}
+	function handleRadioChange(radioGroupId, key) {
+		var radios = document.getElementsByName(radioGroupId);
+		for (var i = 0; i < radios.length; i++) {
+			if (radios[i].checked) {
+				saveToLocalStorage(key, radios[i].value);
+				break;
+			}
+		}
+	}
+	
+
+
 }
 
 

render/rendertest.py

@@ -11,6 +11,8 @@ import subprocess
 
 ROOT = os.path.dirname(os.path.abspath(__file__))
 imagecompare = f'{ROOT}/imagecompare'
+#convert = f'convert' # set path for imagemagick convert if need
+convert = f'A:/imagemagick-q8/convert'
 WORKDIR = f'{ROOT}/work'
 REPORT_ROOT = f'{ROOT}' # FIXME should be workdir?
 
@@ -150,21 +152,25 @@ def compare():
 	mkdir_p(WORKDIR)
 	screenshot_base = f'{args.xash_dir}/valve/rendertest'
 	diffs = []
+	command_png()
+	print(f'Compare...')
 	with concurrent.futures.ThreadPoolExecutor() as executor:
 		for test in args.tests:
 			for channel, _ in channels.items():
 				image_base = f'{test}_{channel}'
-				image_test = f'{screenshot_base}/{image_base}.tga'
+				#image_test = f'{screenshot_base}/{image_base}.tga'
+				image_test = f'{ROOT}/work/gold/{image_base}.png'
 				image_gold = f'{ROOT}/gold/{image_base}.png'
 				image_diff = f'{WORKDIR}/{image_base}_diff.png'
 				image_flip = f'{WORKDIR}/{image_base}_flip.gif'
 
 				diffs.append(executor.submit(compare_one, test, channel, image_base, image_gold, image_test, image_diff, image_flip))
 
-				executor.submit(subprocess.run, ['convert',
+				# legacy
-					'(', image_gold, '-bordercolor', 'gold', '-border', '2x2', '-gravity', 'SouthWest', '-font', 'Impact', '-pointsize', '24', '-fill', 'gold', '-stroke', 'black', '-annotate', '0', 'GOLD', ')',
+				#executor.submit(subprocess.run, [convert,
-					'(', image_test, '-bordercolor', 'white', '-border', '2x2', '-fill', 'white', '-annotate', '0', 'TEST', ')',
+				#	'(', image_gold, '-bordercolor', 'gold', '-border', '2x2', '-gravity', 'SouthWest', '-font', 'Impact', '-pointsize', '24', '-fill', 'gold', '-stroke', 'black', '-annotate', '0', 'GOLD', ')',
-					'-loop', '0', '-set', 'delay', '100', image_flip], check=True)
+				#	'(', image_test, '-bordercolor', 'white', '-border', '2x2', '-fill', 'white', '-annotate', '0', 'TEST', ')',
+				#	'-loop', '0', '-set', 'delay', '100', image_flip], check=True)
 
 	results = [diff.result() for diff in diffs]
 	# json.dump(results, open(f'{WORKDIR}/data.json', 'w'))
@@ -187,8 +193,8 @@ def command_png():
 				image_test = f'{screenshot_base}/{image_base}.tga'
 				image_new_gold = f'{new_gold_base}/{image_base}.png'
 
-				print(f'{image_new_gold}')
+				print(f'convert to {image_new_gold}')
-				executor.submit(subprocess.run, ['convert', image_test, image_new_gold], check=True)
+				executor.submit(subprocess.run, [convert, "-auto-orient", image_test, image_new_gold], check=True)
 
 def command_run():
 	compile()
@@ -216,4 +222,3 @@ match args.command:
 
 # TODO:
 # - settings object to pass as an argument
-# - HTML report

render/report.html

@@ -3,22 +3,15 @@
 	<head>
 		<meta charset="UTF-8">
 		<title>Rendertest report</title>
-		<link rel="stylesheet" href="style.css">
+		<link rel="stylesheet" type="text/css" href="base.css">
+		<link rel="stylesheet" type="text/css" href="theme-dark.css"; data-theme="theme-dark" title="🌑 Dark theme">
+		<link rel="stylesheet alternate" type="text/css" href="theme-light.css" disabled="true" data-theme="theme-light" title="☀️ Light theme">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<script src="utils.js"></script>
 		<script src="work/data.js"></script>
 		<script src="index.js"></script>
 	</head>
 	<body>
-		<!-- TODO have a date and build number or whatever -->
+		<!-- TODO: have a date and build number or whatever -->
-		<h1>Rendertest report</h1>
-		<h2>Summary</h2>
-		<div id="summary"></div>
-
-		<h2>List of things that are not perfect</h2>
-		<div id="fail_table"></div>
-
-		<h2>Images of things that are not perfect</h2>
-		<div id="fail_images"></div>
 	</body>
 </html>

render/theme-dark.css

@@ -0,0 +1,45 @@
+body {
+	background: black;
+	color: #EEE;
+	scrollbar-color: #67005c #222;
+}
+
+.panel {
+	background: #222;
+	border: #333 1px solid;
+	border-radius: 10px;
+	color: cornflowerblue;
+}
+
+.meta-block h2 {
+	color: gold;
+	border-top: 3px gray solid;
+}
+
+table {
+	color: #eb4300;
+	border: #e100ca 1px solid;
+	border-radius: 6px;
+}
+table tr:hover {
+	background: oklch(76.47% 0.279 334.17);
+	background: #512649;
+}
+th {
+	/*background: oklch(62.5% 0.291 308.12);*/
+	background: linear-gradient(0deg,#b540ff,cornflowerblue);
+	box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.5);
+	text-shadow: 2px 1px 3px #000A;
+}
+a, a:visited {
+	color: #e100ca;
+	color: oklch(62.5% 0.291 334.06);
+}
+
+:root {
+	/*--font-gradient: linear-gradient(90deg,#7209d4,#2832d4 33%,#00a5b2);*/
+}
+
+.content {
+	scrollbar-color: #e100ca #222;
+}

render/theme-light.css

@@ -0,0 +1,35 @@
+body {
+	background: white;
+	color: black;
+}
+
+.panel {
+	background: #FFF;
+	border: #EEE 1px solid;
+	border-radius: 10px;
+	color: cornflowerblue;
+}
+
+.meta-block h2 {
+	color: goldenrod;
+	border-top: 3px lightgray solid;
+}
+
+table {
+	color: #eb4300;
+	border: #e100ca 1px solid;
+	border-radius: 6px;
+}
+th {
+	background: oklch(62.5% 0.291 308.12);
+	background: linear-gradient(0deg,#b540ff,cornflowerblue);
+/*	box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.5);*/
+}
+a, a:visited {
+	color: #e100ca;
+	color: oklch(62.5% 0.291 334.06);
+}
+
+:root {
+	/*--font-gradient: linear-gradient(90deg,#7209d4,#2832d4 33%,#00a5b2);*/
+}

render/utils.js

@@ -2,10 +2,12 @@
 
 function $(name) { return document.getElementById(name); }
 
-function Tag(name, attrs, body, children) {
+function Tag(name, attrs, body, children, eventName, eventHandler) {
 	let elem = document.createElement(name);
 	if (body) {
-		elem.innerHTML = body;
+		// elem.innerHTML = body; // innerHTML is ugly (slow, overwrite childNodes) 
+		let textNode = document.createTextNode(body);
+		elem.appendChild(textNode);
 	}
 	for (let k in attrs) {
 		elem.setAttribute(k, attrs[k]);
@@ -13,6 +15,11 @@ function Tag(name, attrs, body, children) {
 	for (let i in children) {
 		elem.appendChild(children[i]);
 	}
+
+	if (eventName && eventHandler) {
+		elem.addEventListener(eventName, eventHandler);
+	}
+
 	return elem;
 }
 
@@ -20,7 +27,7 @@ function Text(text) {
 	return document.createTextNode(text);
 }
 
-function debounce(func, cancelFunc, timeout = 500) {
+function debounce(func, cancelFunc = ()=>{}, timeout = 500) {
 	let timer;
 	return (...args) => {
 		cancelFunc();