zhengkai/jumpcal.html

## jumpcal.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Large Micro Jump Drive Calculator for EVE Online</title>

<style type='text/css'>
h1, form, p, button, input {
  font-family: sans-serif;
	font-size: 18px;
}

h1 {
	font-size: 32px;
}

#calDegInput {
	text-align: center;
	border-width: 0 0 1px;
	border-style: solid;
	border-color: black;
}

div#calBox {
	position: relative;
	display: block;
	width: 600px;
	height: 600px;
	overflow: hidden;
	margin-left: 50px;
}

p#oBase {
	margin: 0;
	padding: 400px 30px 0;
	font-weight: bold;
	font-size: 32px;
}

div#calBox div {
	left: 0;
	top: -300px;
	position: absolute;
	display: block;
	border-color: navy;
	border-style: solid;
	border-width: 0 0 0 1px;
	min-width: 3px;
	height: 1800px;
}
</style>

<script type='text/javascript'>
function calDeg() {
	var oInput = document.getElementById('calDegInput');
	fDistance = oInput.value;
	if (fDistance > 99) {
		fDistance = oInput.value = 99;
	} else if (fDistance < 1) {
		fDistance = oInput.value = 1;
	}
	fDeg = (Math.acos(fDistance / 100) * 180 / Math.PI).toFixed(1);
	oDiv = document.getElementById('oHypotenuse');
	document.getElementById('oBase').innerHTML = fDeg + '°';
	sDegCSS = 'rotate(' + fDeg + 'deg)';
	oDiv.style['transform'] = sDegCSS;
	oDiv.style['-webkit-transform'] = sDegCSS;
	oDiv.style['-ms-transform'] = sDegCSS;
	return false;
}
</script>
</head>
<body>

<h1 style="margin-bottom: 0;">Large Micro Jump Drive Calculator</h1>
<p style="margin: 0 0 32px;">by Zheng Kai (soulogic.com)</p>

<form onsubmit="return calDeg();">
	<p>input Distance(1-99): <input id="calDegInput" onfocus="this.value = ''" type="text" value="50" size="5" />KM <button type="submit">Calculate</button></p>
</form>

<div id="calBox">
	<div><p id="oBase"></p></div>
	<div id="oHypotenuse"></div>
</div>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Large Micro Jump Drive Calculator for EVE Online</title>

	<style type='text/css'>
	h1, form, p, button, input {
	font-family: sans-serif;
	font-size: 18px;
	}

	h1 {
	font-size: 32px;
	}

	#calDegInput {
	text-align: center;
	border-width: 0 0 1px;
	border-style: solid;
	border-color: black;
	}

	div#calBox {
	position: relative;
	display: block;
	width: 600px;
	height: 600px;
	overflow: hidden;
	margin-left: 50px;
	}

	p#oBase {
	margin: 0;
	padding: 400px 30px 0;
	font-weight: bold;
	font-size: 32px;
	}

	div#calBox div {
	left: 0;
	top: -300px;
	position: absolute;
	display: block;
	border-color: navy;
	border-style: solid;
	border-width: 0 0 0 1px;
	min-width: 3px;
	height: 1800px;
	}
	</style>

	<script type='text/javascript'>
	function calDeg() {
	var oInput = document.getElementById('calDegInput');
	fDistance = oInput.value;
	if (fDistance > 99) {
	fDistance = oInput.value = 99;
	} else if (fDistance < 1) {
	fDistance = oInput.value = 1;
	}
	fDeg = (Math.acos(fDistance / 100) * 180 / Math.PI).toFixed(1);
	oDiv = document.getElementById('oHypotenuse');
	document.getElementById('oBase').innerHTML = fDeg + '°';
	sDegCSS = 'rotate(' + fDeg + 'deg)';
	oDiv.style['transform'] = sDegCSS;
	oDiv.style['-webkit-transform'] = sDegCSS;
	oDiv.style['-ms-transform'] = sDegCSS;
	return false;
	}
	</script>
	</head>
	<body>

	<h1 style="margin-bottom: 0;">Large Micro Jump Drive Calculator</h1>
	<p style="margin: 0 0 32px;">by Zheng Kai (soulogic.com)</p>

	<form onsubmit="return calDeg();">
	<p>input Distance(1-99): <input id="calDegInput" onfocus="this.value = ''" type="text" value="50" size="5" />KM <button type="submit">Calculate</button></p>
	</form>

	<div id="calBox">
	<div><p id="oBase"></p></div>
	<div id="oHypotenuse"></div>
	</div>

	</body>

	</html>