extension/src/options/index.html

<!DOCTYPE html>
<html>
<head>
	<title>Options</title>
	<link rel="stylesheet" type="text/css" href="../vendor/extensions.css">
	<style>
		body { 
			padding-bottom: 5px; 
		}
		#rct {
			border-top: 1px solid #eee;
			margin-top: 15px;
			padding-top: 15px;

		}
		.op #reportIssue {
			float: right; 
			margin-top: -15px;
		}
		.ba #rct {
			margin-bottom: 15px;
			margin-top: 20px;
		}
		#status, #save {
			float: left;
		}
		#status {
			margin-top: 5px;
			margin-left: 15px;

			display: none;
		}
		#strictnessinfo {
			position: absolute;
			opacity: 0;
			transition: 0.5s opacity;
			background: white;
			padding: 5px;
			z-index: -1;
		}
		#strictness{
			margin-top: 5px;
		}
		#strictnessinfoToggle{
			margin-top: 9px;
			display: inline-block;
		}
		#strictnessinfo p {
			line-height: 1.25em;
			padding: 5px;
		}
		h3 {
			line-height: 1.25em;
		}
	</style>
</head>

<body>
	<h3>Disable Scroll Jacking Settings</h3>
	Strictness Level:
	<select id="strictness">
	 <option value="off">Off</option>
	 <option value="medium">Medium (Recommended)</option>
	 <option value="high">High</option>
	</select>
	<a id="strictnessinfoToggle">What does this mean?</a>
	<div id="strictnessinfo">
		<p>Medium prevents sites changing your scroll position whilst you're scrolling but keep scroll detection.</p>
		<p>High disables all scroll detection, which might break some sites.</p>
	</div>
	<br>
	<br>
	<div id="only-op">
		<label>
			<input type="checkbox" id="debug">
			Debug Mode
		</label>
		<br>
		<br>
		<label>
			<input type="checkbox" id="tracking">
			Allow anonymous usage reports and error tracking. This won't track which websites you go on, only internal things.
		</label>
		<br>
		<br>
	</div>
	<button id="save">Save</button>
	<div id="status">Options saved.</div>
	<br>
	<div id="rct">
		<button id="reportCurrentTab">This page still hijacks my scroll!</button>
		<br>
		<span style="display: block; margin-top: 10px;">
			This will send a link to the website you're currently on to our developers so they can fix it.
		</span>
	</div>

	<button id="reportIssue">Report Issue</button>

	<script src="options.js"></script>
</body>
</html>