Add "About" pane to options page

benburrill · Dec 22, 2017 · 89b36b0 · 89b36b0
1 parent db6bbdf
commit 89b36b0
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 10 deletions.
diff --git a/options.css b/options.css
@@ -10,17 +10,28 @@ body {
 	font-size: 14px;
 }
 
-hr {
-	background-color: #888;
-	color: #888;
-	border: none;
-	height: 1px;
+.ui-widget hr {
+	height: 0px;
+	margin: 0px;
+	border-top: none;
+	border-left: none;
+	border-right: none;
+	border-bottom: 1px solid #888;
 }
 
-legend {
+.ui-widget legend {
 	font-weight: bold;
 }
 
+.ui-widget a {
+    color: #2ca089;
+    text-decoration: none;
+}
+
+.ui-widget a:hover {
+    text-decoration: underline;
+}
+
 #form-container {
 	display: flex;
 	justify-content: center;
@@ -31,6 +42,12 @@ legend {
 	display: inline-block;
 }
 
+#paneAbout {
+	color: #2e3436;
+	text-align: center;
+	line-height: 1.5em;
+}
+
 #promptAccessCodeText {
 	font: normal 14px monospace;
 	user-select: none;

diff --git a/options.html b/options.html
@@ -20,7 +20,8 @@
 				<div id="tabs">
 					<ul>
 						<li id="tabBlockSet1"><a href="#blockSet1"><span id="blockSetName1">Block Set 1</span></a></li>
-						<li id="tabGeneral"><a href="#generalOptions">General</a></li>
+						<li id="tabGeneral"><a href="#paneGeneral">General</a></li>
+						<li id="tabAbout"><a href="#paneAbout">About</a></li>
 					</ul>
 					<div id="blockSet1">
 						<fieldset>
@@ -78,6 +79,7 @@
 									<option>within time periods OR after time limit</option>
 									<option>within time periods AND after time limit</option>
 								</select>
+								&nbsp;&nbsp;<a href="http://www.proginosko.com/leechblock/faq/difference-or-and/" target="_blank">What's the difference?</a>
 							</p>
 							<p>
 								<label>Select the days on which to block these sites:</label>
@@ -158,15 +160,16 @@
 							<hr>
 							<p>
 								<label>Load list of sites from URL:</label>
-								<div><input id="sitesURL1" type="text" size="60" title="Use $S to pass block set number and $T to pass UTC timestamp in milliseconds"></div>
+								<div><input id="sitesURL1" type="text" size="60" title="Use $S to pass block set number and $T to pass UTC timestamp in milliseconds">
+								&nbsp;&nbsp;<a href="http://www.proginosko.com/leechblock/faq/load-from-url/" target="_blank">What does this do?</a></div>
 							</p>
 							<hr>
 							<p>
 								<button id="cancelLockdown1" type="button" disabled="true">Cancel Active Lockdown</button>
 							</p>
 						</fieldset>
 					</div>
-					<div id="generalOptions">
+					<div id="paneGeneral">
 						<fieldset>
 							<legend>Access Control</legend>
 							<p>
@@ -232,6 +235,25 @@
 							</p>
 						</fieldset>
 					</div>
+					<div id="paneAbout">
+						<p>
+							<a href="http://www.proginosko.com/leechblock/" target="_blank"><img src="images/leechblock_logo.png" alt="LeechBlock logo" title="LeechBlock"></a>
+						</p>
+						<p>
+							<a href="http://www.proginosko.com/leechblock/" target="_blank">LeechBlock NG</a>
+							(Next Generation) is a simple productivity tool designed to<br>
+							block those time-wasting sites that can suck the life out of your working day.<br>
+							All you need to do is specify which sites to block and when to block them.
+						</p>
+						<p><strong>Author:</strong> James Anderson</p>
+						<p><strong>Contributor:</strong> Dario Kolac (graphics)</p>
+						<p><strong>Examples:</strong>
+						<a href="http://www.proginosko.com/leechblock/examples/" target="_blank">http://www.proginosko.com/leechblock/examples/</a></p>
+						<p><strong>FAQ:</strong>
+						<a href="http://www.proginosko.com/leechblock/faq/" target="_blank">http://www.proginosko.com/leechblock/faq/</a></p>
+						<p><strong>Support:</strong>
+						<a href="http://www.proginosko.com/leechblock/support/" target="_blank">http://www.proginosko.com/leechblock/support/</a></p>
+					</div>
 				</div>
 
 				<p style="text-align: center;">

diff --git a/options.js b/options.js
@@ -694,7 +694,7 @@ for (let set = 2; set <= NUM_SETS; set++) {
 	let nextSetHTML = setHTML
 			.replace(/(id|for)="(\w+)1"/g, `$1="$2${set}"`);
 	$("#tabGeneral").before(`<li id="tabBlockSet${set}">${nextTabHTML}</li>`);
-	$("#generalOptions").before(`<div id="blockSet${set}">${nextSetHTML}</div>`);
+	$("#paneGeneral").before(`<div id="blockSet${set}">${nextSetHTML}</div>`);
 }
 
 // Set up JQuery UI widgets