hslFun.html

﻿<!DOCTYPE html>
<html>
<head>
<title>HSL Fun</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />

<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<style>
	html,body{margin:0;padding:0;width:100%;height:100%;font-size:100%}
	form {margin:0.5em;padding:0.5em;background:rgba(255,255,255,0.5);width:20em;max-width:100%}
	label {display:inline-block;width:3em;max-width:100%}
	input {display:inline-block;width:10em;max-width:100%}
</style>
<script>
var i = 0;
var shift = function(){
	var out = Math.floor(i%360);
	$("body").css('background-color','hsl(' + out + ', '+ $("#s").val()+'%, '+$("#l").val()+'%)');
	i++;
	/* Recursive: writing things twice with excellent penmanship. */
	setTimeout(shift,24);
}
shift();
</script>
</head>
<body>
<form>
<p>
<label for="s">Sat.</label>
<input type="range" id="s" min="0" max="100" value="50" />
</p>
<p>
<label for="l">Lum.</label>
<input type="range" id="l" min="0" max="100" value="50" />
</p>	
</form>
	
</body>
</html>