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

-
+

- Current Image +