diff options
-rw-r--r-- | index.html | 15 | ||||
-rw-r--r-- | style.css | 16 |
2 files changed, 28 insertions, 3 deletions
@@ -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> @@ -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; } |