afritsch/HTML Monitor test

## HTML Monitor test
<!doctype html>

<html lang="en-us">

<head>
	<meta charset="utf-8">

	<meta name="description" content="Monitor test in HTML">
	<meta name="keywords" content="Monitor,test,online,html,javascript">
	<meta name="author" content="Aande">

	<title>HTML Monitor Test</title>
	<!-- <link rel="stylesheet" href="css/styles.css?v=1.0"> -->

	<style>
		body {
			background-color: rgb(255,0,0);
			font-family: liberation sans, arial, sans-serif;
			font-size: 10pt;
		}
		#drag {
			background-color: rgba(200,200,200,0.7);
			/* border: 1px solid rgb(0,0,0); */
			padding: 3px 20px 20px 20px;
			width: 360px;
			height: 200px;
			position: relative;
		}
		.tiny {
			font-size: 7pt;
		}
		.btn {
			width: 80px;
			height: 1.4em;
			border: none;
			background-color: rgb(225,225,225);
		}
		.btn:hover {
			background-color: rgb(240,240,240);
		}
		.btn:active {
			background-color: rgb(210,210,210);
		}
	</style>
	<script>
		/* http://stackoverflow.com/a/197761 */
		function changeBackground(color) {
			//document.body.style.backgroundColor = document.getElementById("backg").value;
			document.body.style.backgroundColor = color;
			document.body.style.backgroundImage = "none";
		}
		function chess() {
			document.body.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAAARSURBVBhXYwCC////gzEDAwAp5AX7bk/yfwAAAABJRU5ErkJggg==')";
		}
		function vertical() {
			document.body.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAAARSURBVBhXYwCC////g6n//wEg7QX7HB2JQQAAAABJRU5ErkJggg==')";
		}
		function horizontal() {
			document.body.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAAAPSURBVBhXY4CC/0Dw/z8AFPkF+55iOkQAAAAASUVORK5CYII=')";
		}

		/* first js: http://stackoverflow.com/a/13152737
		   current js: http://jsfiddle.net/tovic/Xcb8d/light/ */
		var selected = null, // Object of the element to be moved
		x_pos = 0, y_pos = 0, // Stores x & y coordinates of the mouse pointer
		x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element
		// Will be called when user starts dragging an element
		function _drag_init(elem) {
			// Store the object of the element which needs to be moved
			selected = elem;
			x_elem = x_pos - selected.offsetLeft;
			y_elem = y_pos - selected.offsetTop;
		}
		// Will be called when user dragging an element
		function _move_elem(e) {
			x_pos = document.all ? window.event.clientX : e.pageX;
			y_pos = document.all ? window.event.clientY : e.pageY;
			if (selected !== null) {
				selected.style.left = (x_pos - x_elem) + 'px';
				selected.style.top = (y_pos - y_elem) + 'px';
			}
		}
		// Destroy the object when we are done
		function _destroy() {
			selected = null;
		}
		// Bind the functions...
		document.addEventListener("DOMContentLoaded", function(event) { // http://stackoverflow.com/a/800010
			document.getElementById('drag').onmousedown = function () {
				_drag_init(this);
				return false;
			};
		});
		document.onmousemove = _move_elem;
		document.onmouseup = _destroy;
		/* http://blog.movalog.com/a/javascript-toggle-visibility/
		   http://javascript.info/tutorial/keyboard-events
		   http://www.w3schools.com/jsref/event_key_keycode.asp */
		document.addEventListener('keydown', function toggle_visibility(event) {
			if(event.code == 'Space') {
				var elem = document.getElementById("drag");
				if(elem.style.display == 'block')
					elem.style.display = 'none';
				else
					elem.style.display = 'block';
			}
		});
	</script>
	<!-- <script src="js/scripts.js"></script> -->
</head>

<body>
	<div id="drag">
		<h3>Monitor Test</h3>
		This is a simple test to check your monitor for <i>faulty pixels</i>.<br>
		- To enter (and leave) fullscreen in your browser press <b>F11</b>.<br>
		- Click the buttons to change the background color.<br>
		- This box is draggable to check everything.<br>
		- Press the <b>Space key</b> to hide and show this box.
		<table>
			<tr>
				<td><button class="btn" onclick="changeBackground('rgb(255,0,0)');">Red</button></td>
				<td><button class="btn" onclick="changeBackground('rgb(0,255,0)');">Green</button></td>
				<td><button class="btn" onclick="changeBackground('rgb(0,0,255)');">Blue</button></td>
				<td><button class="btn" onclick="chess();">Chess</button></td>
			</tr>
			<tr>
				<td><button class="btn" onclick="changeBackground('rgb(0,255,255)');">Cyan</button><br/>
					<span class="tiny">(Absence of red)</span>
				</td>
				<td><button class="btn" onclick="changeBackground('rgb(255,0,255)');">Magenta</button><br/>
					<span class="tiny">(Absence of green)</span>
				</td>
				<td><button class="btn" onclick="changeBackground('rgb(255,255,0)');">Yellow</button><br/>
					<span class="tiny">(Absence of blue)</span>
				</td>
				<td><button class="btn" onclick="vertical();">Vertic.</button></td>
			</tr>
			<tr>
				<td><button class="btn" onclick="changeBackground('rgb(255,255,255)');">White</button></td>
				<td><button class="btn" onclick="changeBackground('rgb(127,127,127)');">Grey</button></td>
				<td><button class="btn" onclick="changeBackground('rgb(0,0,0)');">Black</button></td>
				<td><button class="btn" onclick="horizontal();">Horiz.</button></td>
			</tr>
		</table>
		<!-- <a href="#" onclick="toggle_visibility('drag');">hide</a> -->
		<!-- <select id="backg" onchange="changeBackground();">
			<option value="rgb(255,0,0)">Red</option>
			<option value="rgb(0,255,0)">Green</option>
			<option value="rgb(0,0,255)">Blue</option>
			<option value="rgb(0,255,255)">Cyan (Absence of red)</option>
			<option value="rgb(255,0,255)">Magenta (Absence of green)</option>
			<option value="rgb(255,255,0)">Yellow (Absence of blue)</option>
		</select> -->
	</div>
</body>

</html>
	<!doctype html>

	<html lang="en-us">

	<head>
	<meta charset="utf-8">

	<meta name="description" content="Monitor test in HTML">
	<meta name="keywords" content="Monitor,test,online,html,javascript">
	<meta name="author" content="Aande">

	<title>HTML Monitor Test</title>
	<!-- <link rel="stylesheet" href="css/styles.css?v=1.0"> -->

	<style>
	body {
	background-color: rgb(255,0,0);
	font-family: liberation sans, arial, sans-serif;
	font-size: 10pt;
	}
	#drag {
	background-color: rgba(200,200,200,0.7);
	/* border: 1px solid rgb(0,0,0); */
	padding: 3px 20px 20px 20px;
	width: 360px;
	height: 200px;
	position: relative;
	}
	.tiny {
	font-size: 7pt;
	}
	.btn {
	width: 80px;
	height: 1.4em;
	border: none;
	background-color: rgb(225,225,225);
	}
	.btn:hover {
	background-color: rgb(240,240,240);
	}
	.btn:active {
	background-color: rgb(210,210,210);
	}
	</style>
	<script>
	/* http://stackoverflow.com/a/197761 */
	function changeBackground(color) {
	//document.body.style.backgroundColor = document.getElementById("backg").value;
	document.body.style.backgroundColor = color;
	document.body.style.backgroundImage = "none";
	}
	function chess() {
	document.body.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAAARSURBVBhXYwCC////gzEDAwAp5AX7bk/yfwAAAABJRU5ErkJggg==')";
	}
	function vertical() {
	document.body.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAAARSURBVBhXYwCC////g6n//wEg7QX7HB2JQQAAAABJRU5ErkJggg==')";
	}
	function horizontal() {
	document.body.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAAAPSURBVBhXY4CC/0Dw/z8AFPkF+55iOkQAAAAASUVORK5CYII=')";
	}

	/* first js: http://stackoverflow.com/a/13152737
	current js: http://jsfiddle.net/tovic/Xcb8d/light/ */
	var selected = null, // Object of the element to be moved
	x_pos = 0, y_pos = 0, // Stores x & y coordinates of the mouse pointer
	x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element
	// Will be called when user starts dragging an element
	function _drag_init(elem) {
	// Store the object of the element which needs to be moved
	selected = elem;
	x_elem = x_pos - selected.offsetLeft;
	y_elem = y_pos - selected.offsetTop;
	}
	// Will be called when user dragging an element
	function _move_elem(e) {
	x_pos = document.all ? window.event.clientX : e.pageX;
	y_pos = document.all ? window.event.clientY : e.pageY;
	if (selected !== null) {
	selected.style.left = (x_pos - x_elem) + 'px';
	selected.style.top = (y_pos - y_elem) + 'px';
	}
	}
	// Destroy the object when we are done
	function _destroy() {
	selected = null;
	}
	// Bind the functions...
	document.addEventListener("DOMContentLoaded", function(event) { // http://stackoverflow.com/a/800010
	document.getElementById('drag').onmousedown = function () {
	_drag_init(this);
	return false;
	};
	});
	document.onmousemove = _move_elem;
	document.onmouseup = _destroy;
	/* http://blog.movalog.com/a/javascript-toggle-visibility/
	http://javascript.info/tutorial/keyboard-events
	http://www.w3schools.com/jsref/event_key_keycode.asp */
	document.addEventListener('keydown', function toggle_visibility(event) {
	if(event.code == 'Space') {
	var elem = document.getElementById("drag");
	if(elem.style.display == 'block')
	elem.style.display = 'none';
	else
	elem.style.display = 'block';
	}
	});
	</script>
	<!-- <script src="js/scripts.js"></script> -->
	</head>

	<body>
	<div id="drag">
	<h3>Monitor Test</h3>
	This is a simple test to check your monitor for <i>faulty pixels</i>.<br>
	- To enter (and leave) fullscreen in your browser press <b>F11</b>.<br>
	- Click the buttons to change the background color.<br>
	- This box is draggable to check everything.<br>
	- Press the <b>Space key</b> to hide and show this box.
	<table>
	<tr>
	<td><button class="btn" onclick="changeBackground('rgb(255,0,0)');">Red</button></td>
	<td><button class="btn" onclick="changeBackground('rgb(0,255,0)');">Green</button></td>
	<td><button class="btn" onclick="changeBackground('rgb(0,0,255)');">Blue</button></td>
	<td><button class="btn" onclick="chess();">Chess</button></td>
	</tr>
	<tr>
	<td><button class="btn" onclick="changeBackground('rgb(0,255,255)');">Cyan</button><br/>
	<span class="tiny">(Absence of red)</span>
	</td>
	<td><button class="btn" onclick="changeBackground('rgb(255,0,255)');">Magenta</button><br/>
	<span class="tiny">(Absence of green)</span>
	</td>
	<td><button class="btn" onclick="changeBackground('rgb(255,255,0)');">Yellow</button><br/>
	<span class="tiny">(Absence of blue)</span>
	</td>
	<td><button class="btn" onclick="vertical();">Vertic.</button></td>
	</tr>
	<tr>
	<td><button class="btn" onclick="changeBackground('rgb(255,255,255)');">White</button></td>
	<td><button class="btn" onclick="changeBackground('rgb(127,127,127)');">Grey</button></td>
	<td><button class="btn" onclick="changeBackground('rgb(0,0,0)');">Black</button></td>
	<td><button class="btn" onclick="horizontal();">Horiz.</button></td>
	</tr>
	</table>
	<!-- <a href="#" onclick="toggle_visibility('drag');">hide</a> -->
	<!-- <select id="backg" onchange="changeBackground();">
	<option value="rgb(255,0,0)">Red</option>
	<option value="rgb(0,255,0)">Green</option>
	<option value="rgb(0,0,255)">Blue</option>
	<option value="rgb(0,255,255)">Cyan (Absence of red)</option>
	<option value="rgb(255,0,255)">Magenta (Absence of green)</option>
	<option value="rgb(255,255,0)">Yellow (Absence of blue)</option>
	</select> -->
	</div>
	</body>

	</html>