Added simple instruction

2 files changed, 28 insertions, 3 deletions

diff --git a/index.html b/index.html
index 1a2f1bd..345aa9a 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,22 @@
 <div id="wrapper">
 	<div id="container"></div>
 	<div id="toolbar">
+		<h1>Derelict</h1>
+		<p>LMB and drag in space to rotate camera.<br>RMB and drag in space to move camera.
+		<p>LMB wreck to open killmail.<br>RMB wreck to focus camera.
+		<p>Address must contain <code>related</code> parameter to show some wrecks.
+		<br>Currently there is no service that would offer an API to acquire battle reports, so only battles that I
+		uploaded manually are available as of now:
+		<ul>
+			<li><a href="?related=30002016_202012141900">Random nano gang</a>
+			<li><a href="?related=30002537_202104060300">Battle in Amamake</a>
+			<li><a href="?related=31000376_202103301800">Another nano gang</a>
+			<li><a href="?related=31001761_202012040000">Foxholers eviction defense</a>
+		</ul>
+		<p>I plan to address this issue.
+		<h2>Grid</h2>
 		<select id="grid"></select>
+		<h2>Timeline</h2>
 		<input type="range" id="timeline">
 	</div>
 </div>
diff --git a/style.css b/style.css
index dd7cb07..2011038 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,5 @@
 body {
+	color: #eee;
 	margin: 0;
 	font-family: sans-serif;
 	font-size: 12px;
@@ -12,7 +13,6 @@ body {
 }
 
 .label {
-	color: #eee;
 	position: absolute;
 	top: -0.2em;
 	left: calc(100% + 0.4em);
@@ -73,7 +73,7 @@ body {
 	display: flex;
 	width: 100vw;
 	height: 100vh;
-	flex-direction: column;
+	flex-direction: row;
 }
 
 #container {
@@ -83,6 +83,16 @@ body {
 }
 
 #toolbar {
-	background: #eee;
+	background: #222;
 	padding: 1em;
+	width: 20%;
+	max-width: 24em;
+	min-width: 12em;
+	border-left: 1px solid #444;
+	overflow: auto;
+}
+
+#toolbar a:link,
+#toolbar a:visited {
+	color: #aaa;
 }