shows current and max frame. Red for warning

app/frame_handler.ts

@@ -37,9 +37,12 @@ export class FrameHandler {
 	private SetCurrentImageDiv() {
 		this.currentImageDiv.innerHTML = `<img src="${this.filenames[this.currentFrame]}"></img>`;
 		if (this.filenames.length === 0) {
-			this.frameNumberDiv.innerText = 'No images uploaded yet. Drag images onto the page to upload them';
+			this.frameNumberDiv.className = 'warning';
+			this.frameNumberDiv.innerText = 'No images uploaded yet';
 		} else {
-			this.frameNumberDiv.innerText = 'Current Frame: ' + this.currentFrame.toString();
+			this.frameNumberDiv.className = 'instruction';
+			this.frameNumberDiv.innerText =
+				'Frame ' + this.currentFrame.toString() + '/' + (this.filenames.length - 1).toString();
 		}
 	}
 }

dist/assets/stylesheets/main.css

@@ -4,6 +4,18 @@ div {
 	font-family: "Arial", Helvetica, sans-serif;
 }
 
+.instruction {
+	display: block;
+	color: blue;
+	font-family: "Arial", Helvetica, sans-serif;
+}
+
+.warning {
+	display: block;
+	color: red;
+	font-family: "Arial", Helvetica, sans-serif;
+}
+
 main {
 	width: 500px;
 }

dist/index.html

@@ -11,16 +11,16 @@
         <div id="dropZone">
           <div id="output"></div>
 
-          <div id="instructions" class="sub">
-            <p>advance frames with arrow keys</p>
+          <div id="instructions" class="instruction">
+            <p>Drag images onto the page to upload them. Advance frames with arrow keys</p>
           </div>
 
-          <div id="frameNumber" class="sub">
+          <div id="frameNumber" class="warning">
               <p></p>
           </div>
           <!-- canvas -->
           <div id="currentImage">
-            <img alt="Current Image">
+            <img alt="">
           </div>
         </div>