summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--index.html15
-rw-r--r--style.css16
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;
}