BrainWart/testing.html

## testing.html
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body> div {
margin: 10px 0 0 10px;
float: left;
padding: 10px;
}

#settings {
width: 250px;
text-align: center;
border: 1px solid black;
}

#display {
width: 500px;
border: 1px solid black;
}

#display > div {
position: relative;
height: 1.5em;
width: 100%;
border: 1px solid black;
}
#display > div > div {
position: absolute;
text-align: center;
}

.input {
background-color: #729fcf;
}
.output {
background-color: #999999;
}

</style>
</head>
<body>
	<div id="settings">
		<div>
			<label for"timeout">timeout</label><br>
			0ms <input type="range" min="0" max"4000" id="timeout"> 4000ms
		</div>
		<div>
			<label for"mt_down">mt(shft f) down</label><br>
			0ms <input type="range" min="0" max"4000" id="mt_down"> 4000ms
		</div>
		<div>
			<label for"mt_up">mt(shift f) up</label><br>
			0ms <input type="range" min="0" max"4000" id="mt_up"> 4000ms
		</div>
		<div>
			<label for"other_key_down">j down</label><br>
			0ms <input type="range" min="0" max"4000" id="other_key_down"> 4000ms
		</div>
		<div>
			<label for"other_key_up">j up</label><br>
			0ms <input type="range" min="0" max"4000" id="other_key_up"> 4000ms
		</div>
		<div>
			<label for"PERMISSIVE_HOLD">PERMISSIVE_HOLD</label>
			<input type="checkbox" id="PERMISSIVE_HOLD">
		</div>
		<div>
			<label for"IGNORE_INTERRUPT">IGNORE_INTERRUPT</label>
			<input type="checkbox" id="IGNORE_INTERRUPT">
		</div>
	</div>
	<div id="display">
		<div>
			<div id="timeout-display" class="input">timeout</div>
		</div>
		<div>
			<div id="mt-in" class="input">MT LSFT F</div>
		</div>
		<div>
			<div id="j-in" class="input">j</div>
		</div>
		<div>
			<div id="mt-out" class="output">shift</div>
		</div>
		<div>
			<div id="j-out" class="output">J</div>
		</div>
	</div>
<script>
let timeoutInput = document.getElementById("timeout");
let mtDownInput = document.getElementById("mt_down");
let mtUpInput = document.getElementById("mt_up");
let otherDownInput = document.getElementById("other_key_down");
let otherUpInput = document.getElementById("other_key_up");
let permHold = document.getElementById("PERMISSIVE_HOLD");
let ignoreInt = document.getElementById("IGNORE_INTERRUPT");

let timeoutdisplay = document.getElementById("timeout-display");
let mtin = document.getElementById("mt-in");
let mtout = document.getElementById("mt-out");
let otherin = document.getElementById("j-in");
let otherout = document.getElementById("j-out");

function update() {
	timeoutdisplay.style.left = mtDownInput.value + "%";
	timeoutdisplay.style.right = 100 - mtDownInput.value - timeoutInput.value + "%";
	mtin.style.left = mtDownInput.value + "%";
	mtin.style.right = 100 - mtUpInput.value + "%";
	otherin.style.left = otherDownInput.value + "%";
	otherin.style.right = 100 - otherUpInput.value + "%";

}

timeoutInput.addEventListener('input', update);
mtDownInput.addEventListener('input', update);
mtUpInput.addEventListener('input', update);
otherDownInput.addEventListener('input', update);
otherUpInput.addEventListener('input', update);
permHold.addEventListener('input', update);
ignoreInt.addEventListener('input', update);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Testing</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	}
	body> div {
	margin: 10px 0 0 10px;
	float: left;
	padding: 10px;
	}

	#settings {
	width: 250px;
	text-align: center;
	border: 1px solid black;
	}

	#display {
	width: 500px;
	border: 1px solid black;
	}

	#display > div {
	position: relative;
	height: 1.5em;
	width: 100%;
	border: 1px solid black;
	}
	#display > div > div {
	position: absolute;
	text-align: center;
	}

	.input {
	background-color: #729fcf;
	}
	.output {
	background-color: #999999;
	}

	</style>
	</head>
	<body>
	<div id="settings">
	<div>
	<label for"timeout">timeout</label><br>
	0ms <input type="range" min="0" max"4000" id="timeout"> 4000ms
	</div>
	<div>
	<label for"mt_down">mt(shft f) down</label><br>
	0ms <input type="range" min="0" max"4000" id="mt_down"> 4000ms
	</div>
	<div>
	<label for"mt_up">mt(shift f) up</label><br>
	0ms <input type="range" min="0" max"4000" id="mt_up"> 4000ms
	</div>
	<div>
	<label for"other_key_down">j down</label><br>
	0ms <input type="range" min="0" max"4000" id="other_key_down"> 4000ms
	</div>
	<div>
	<label for"other_key_up">j up</label><br>
	0ms <input type="range" min="0" max"4000" id="other_key_up"> 4000ms
	</div>
	<div>
	<label for"PERMISSIVE_HOLD">PERMISSIVE_HOLD</label>
	<input type="checkbox" id="PERMISSIVE_HOLD">
	</div>
	<div>
	<label for"IGNORE_INTERRUPT">IGNORE_INTERRUPT</label>
	<input type="checkbox" id="IGNORE_INTERRUPT">
	</div>
	</div>
	<div id="display">
	<div>
	<div id="timeout-display" class="input">timeout</div>
	</div>
	<div>
	<div id="mt-in" class="input">MT LSFT F</div>
	</div>
	<div>
	<div id="j-in" class="input">j</div>
	</div>
	<div>
	<div id="mt-out" class="output">shift</div>
	</div>
	<div>
	<div id="j-out" class="output">J</div>
	</div>
	</div>
	<script>
	let timeoutInput = document.getElementById("timeout");
	let mtDownInput = document.getElementById("mt_down");
	let mtUpInput = document.getElementById("mt_up");
	let otherDownInput = document.getElementById("other_key_down");
	let otherUpInput = document.getElementById("other_key_up");
	let permHold = document.getElementById("PERMISSIVE_HOLD");
	let ignoreInt = document.getElementById("IGNORE_INTERRUPT");

	let timeoutdisplay = document.getElementById("timeout-display");
	let mtin = document.getElementById("mt-in");
	let mtout = document.getElementById("mt-out");
	let otherin = document.getElementById("j-in");
	let otherout = document.getElementById("j-out");

	function update() {
	timeoutdisplay.style.left = mtDownInput.value + "%";
	timeoutdisplay.style.right = 100 - mtDownInput.value - timeoutInput.value + "%";
	mtin.style.left = mtDownInput.value + "%";
	mtin.style.right = 100 - mtUpInput.value + "%";
	otherin.style.left = otherDownInput.value + "%";
	otherin.style.right = 100 - otherUpInput.value + "%";

	}

	timeoutInput.addEventListener('input', update);
	mtDownInput.addEventListener('input', update);
	mtUpInput.addEventListener('input', update);
	otherDownInput.addEventListener('input', update);
	otherUpInput.addEventListener('input', update);
	permHold.addEventListener('input', update);
	ignoreInt.addEventListener('input', update);
	</script>
	</body>
	</html>