diff --git a/app/frame_handler.ts b/app/frame_handler.ts
index c81c45e..0aec0b8 100644
--- a/app/frame_handler.ts
+++ b/app/frame_handler.ts
@@ -37,9 +37,12 @@ export class FrameHandler {
private SetCurrentImageDiv() {
this.currentImageDiv.innerHTML = ``;
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();
}
}
}
diff --git a/dist/assets/stylesheets/main.css b/dist/assets/stylesheets/main.css
index 35e050f..60a679f 100644
--- a/dist/assets/stylesheets/main.css
+++ b/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;
}
diff --git a/dist/index.html b/dist/index.html
index 1b2694c..e039779 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -11,16 +11,16 @@
advance frames with arrow keys
+Drag images onto the page to upload them. Advance frames with arrow keys