Add hint about downloading converted files

I've received quite a bit of feedback from people confused by this.

I should probably redesign the UI at some point.

public/style.css

@@ -424,6 +424,15 @@ section#try .file:not(:focus):not(:hover) > .file__status {
 section#try .file > .file__status:not(:focus):not(:hover) {
     white-space: nowrap;
 }
+section#try .hint {
+    font-size: 0.75em;
+    padding: .25rem;
+    text-align: center;
+    opacity: 0.75;
+}
+section#try .hint.hint--hidden {
+    display: none;
+}
 section#try > .try__pane.try__pane--options {
     flex: 1;
 }

src/kepubify-try/app.ts

@@ -11,6 +11,7 @@ export class KepubifyApp {
         files: HTMLElement,
         options: HTMLFormElement,
         placeholder?: HTMLElement,
+        hint?: HTMLElement,
     }
     #initializedUI = false
 
@@ -70,6 +71,11 @@ export class KepubifyApp {
             ? "Choose a file..."
             : "Drop your files here, or click to browse..."
 
+        this.#ref.hint = this.#ref.files.appendChild(document.createElement("div"))
+        this.#ref.hint.classList.add("hint")
+        this.#ref.hint.classList.add("hint--hidden")
+        this.#ref.hint.textContent = "Each file will turn green when the conversion is complete. Click the blue filename link to download the converted file."
+
         this.#ref.placeholder = el
 
         this.#ref.placeholder.addEventListener("click", () => {
@@ -116,6 +122,8 @@ export class KepubifyApp {
             message: `Enqueuing ${epub.name} (size=${epub.size}, type=${epub.type})`,
         })
 
+        this.#ref.hint!.classList.remove("hint--hidden")
+
         const el = this.#ref.placeholder!.insertAdjacentElement("beforebegin", document.createElement("div"))!
         el.classList.add("file")
         el.setAttribute("tabindex", "0")