feat: various help text

Also added version number to navbar.

Author: hpopp

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tracklist-formatter",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/assets/stormdrain.jpg

@@ -1,7 +1,8 @@
 <template>
   <nav class="navbar">
-    <img src="~@/assets/stormdrain.png" width="44" />
+    <img src="~@/assets/stormdrain.jpg" width="44" />
     <span class="navbar-text">Tracklist Formatter</span>
+    <span class="navbar-text gray">v0.2.1</span>
   </nav>
 </template>
 
@@ -18,6 +19,10 @@ export default {
   text-align: center;
 }
 
+.gray {
+  color: #aaa;
+}
+
 .navbar {
   background-color: #222;
   color: #fff;

src/assets/stormdrain.png

@@ -8,10 +8,18 @@
           placeholder="Paste a CSV..."
           class="textbox"
         />
+        <span>
+          Open your exported tracklist in any text editor of your choice and
+          copypaste the contents here. Supported export formats: Pioneer
+          Rekordbox TXT, Denon Engine DJ CSV, and VirtualDJ CSV.
+        </span>
       </div>
       <div class="flex-item">
         <h3>Output</h3>
         <p class="textbox output">{{ outputTracklist }}</p>
+        <span>
+          Formatted tracklist will show up here as a list of "Artist - Title".
+        </span>
       </div>
     </div>
   </div>
@@ -69,4 +77,8 @@ export default {
 .output {
   background-color: #eee;
 }
+
+span {
+  color: #ccc;
+}
 </style>