From b9f41a2dde7ab7bcdd2a6eb9430328f2d30e0173 Mon Sep 17 00:00:00 2001
From: Ringo Watanabe <flandre@chiru.no>
Date: Wed, 5 Sep 2018 13:21:09 +0100
Subject: [PATCH] Improved client documentation

---
 www/css/main.css | 12 ++++++++++++
 www/index.html   | 23 ++++++++++++++++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)
diff --git a/www/css/main.css b/www/css/main.css
index 219dcef..2c7c761 100644
--- a/www/css/main.css
+++ b/www/css/main.css
@@ -10,6 +10,18 @@ h1, h2, h3 {
 	color: #f5f8f6;
 }
 
+.info {
+	
+	font-family: Verdana, Geneva, sans-serif;
+	color: #f5f8f6;
+}
+
+.subheader {
+	margin-top: -15px;
+	padding-top: 3px;
+	padding-left: 15px;
+}
+
 em {
 	color: #e5e8e6;
 }
diff --git a/www/index.html b/www/index.html
index caf1ba9..3c96c91 100644
--- a/www/index.html
+++ b/www/index.html
@@ -12,7 +12,27 @@
 	<body onload='begin();'>
 		<div id='status' style="position: fixed; right: 10; top: 5" class='status'>Connecting...</div>
 		
-		<h1>Real-time board watcher readout</h1>
+		<h1>Real-Time Board Watcher readout</h1>
+			
+		<div style='position: relative'>
+			<div class='indentbar' style='background-color: red !important;'> </div>
+			<h4 style='position:relative;' onclick='$("#pageinfo").fadeToggle();' class='subheader'>4chan board statistic aggregator.</h4>
+			<!--TODO: Make it work like this -> $("#pageinfo").slideToggle(1000,function(){$("#_info").fadeToggle();}); but look nicer></-->
+		</div>
+		<div>
+			<div class='expshare2' hidden id='pageinfo'> 
+				<div class='indentbar'> </div>
+				<div style='padding-left: 17px'>
+					<p class='info' id='_info'> <!--TODO: Make this hidden for fade-in></-->
+						This software monitors a 4chan board for various properties, mostly relating to post speed and type, and aggregates them into graphs and charts.<br />
+						The main use is of `Sessions'. When you load the page you start a session, the client then adds all data it receives from the server into a section for the current session until you close the page or lose connection (the top-right text tells the status of the connection). There are also sections containing a server-maintained set of information from the total uptime of the server; and a section of averages over larger timespans (Aggregate section). There is also a `Live' section which shows each `cycle' of the aggregator and has information on a per-cycle basis.<br />
+						A cycle is the interval at which the server receives information from the backend archiver and sends it to the client, a cycle contains the information required to construct a chart or display a piece of information in a statistical way.<br />
+						In the `Aggregate stats' section, a server-maintained average of all cycles in a select timeframe is displayed. The client adds its own data to this when the session starts but a backlog on the server is maintained for an amount of time. <!--TODO: Make the section links that jump to # values in url></-->
+					</p>
+				</div>
+			</div>
+		</div>
+		<hr></hr>
 		<p>
 			Spidering board: <em id='board'></em><br />
 			Server up since: <em id='uptime'></em><br />
@@ -31,6 +51,7 @@
 			<li>Avg. posts per cycle: <em id='at_avg'>0</em></li>
 		</ul>
 		<div style='padding-left: 10px'>
+		<!-- TODO: Change these to expshare2></-->
 			<div class='expshare' hidden id='at_flagshare_container' style="overflow-y: auto; height: 200px;">
 				<ul>
 				</ul>
