Split HTML to make it easier to edit.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bookbinder",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "description": "An app to rearrange PDF pages for printing for bookbinding",
   "type": "module",
   "scripts": {
@@ -27,6 +27,7 @@
     "@cantoo/pdf-lib": "^1.21.0",
     "file-saver": "^2.0.5",
     "jszip": "^3.7.1",
+    "vite-plugin-html-inject": "^1.1.2",
     "zod": "^3.22.4"
   }
 }

src/html/buttons.html

@@ -0,0 +1,28 @@
+<div class="space_out">
+  <button
+    type="button"
+    class="medium_btn"
+    name="preview"
+    id="preview"
+    disabled
+    data-balloon-length="medium"
+    aria-label="Will not show previews if 'Signature Files Only' is selected. Only shows one side for 'Single Sided' printing. Not tested on all browsers (or any browsers other than Chrome really...)"
+    data-balloon-pos="up"
+  >
+    Preview PDF
+  </button>
+  <button type="button" class="large_btn" name="generate" id="generate" disabled>
+    Generate PDF Output
+  </button>
+  <button
+    type="button"
+    class="medium_btn"
+    name="reset_settings"
+    id="reset_settings"
+    data-balloon-length="medium"
+    aria-label="The page is able to save and load your current settings via the site URL. Clicking this button will reset those to the default settings"
+    data-balloon-pos="up"
+  >
+    Reset Settings
+  </button>
+</div>

src/html/file.html

@@ -0,0 +1,21 @@
+<div class="section" id="input">
+  <h2>File Info</h2>
+  <span class="row"
+    ><label>Input File: <input type="file" name="input_file" accept=".pdf" id="input_file" /></label
+  ></span>
+  <!-- <span class="row"><label>Page Size: <span id="page_size"></span></span> -->
+  <!-- <span class="row">Page Ratio: <span id="input_ratio"></span></span> -->
+  <span class="row" style="padding: 10px; font-style: italic"
+    >While some PDF viewers display the first two pages as a spread, be aware the first page, which
+    is odd, will be on the right when printed. The first printed spread are pages 2 & 3 of your PDF
+    document. Evens always on the left, odds always on the right.</span
+  >
+  <span class="row"
+    ><label for="print_file">Generated Files</label>
+    <select name="print_file" id="print_file">
+      <option value="aggregated">Aggregated File Only</option>
+      <option value="both" selected>Both aggregated & per signature files</option>
+      <option value="signatures">Signature Files Only</option>
+    </select>
+  </span>
+</div>

src/html/flyleaf.html

@@ -0,0 +1,12 @@
+<div class="section" id="flyleaf_info">
+  <h2>Flyleafs</h2>
+  <span class="row">
+    <label>Add flyleafs <input type="number" name="flyleafs" value="1" /></label>
+    <span
+      data-balloon-length="medium"
+      aria-label="Extra blank pages at the start and end of the book"
+      data-balloon-pos="up"
+      >ℹ️</span
+    >
+  </span>
+</div>