reorder uplaods pages

services/our/src/views/uploads/new.hbs

@@ -10,9 +10,15 @@
 
 <main class="container">
   <h1>Upload Lewdtuber VODs here.</h1>
-  <div id="uploader"></div>
-  <h3></h3>
-  <form id="details" class="pico" method="POST" action="/upload">
+
+  <article>
+    <p><strong>Instructions:</strong> Enter the metadata first. Vtuber name and original VOD date is required. Then
+      upload the vod
+      segment(s). Wait for the vod segment(s) to fully upload before you press the submit button.</p>
+  </article>
+
+  <form id="details" method="POST" action="/upload">
+    <div class="pico">
       <!-- VTuber select input -->
       <label for="vtuberIds">VTuber(s)</label>
       <select id="vtuberIds" name="vtuberIds" multiple required>
@@ -29,11 +35,16 @@
       <!-- Notes textarea -->
       <label for="notes">Notes (optional)</label>
       <textarea id="notes" name="notes" rows="4" placeholder="Any notes about the upload…"></textarea>
+    </div>
 
+    <div id="uploader"></div>
+    <h3></h3>
 
 
     {{#if message}}<p id="messages" hx-swap-oob="true">{{message}}</p>{{/if}}
+    <div class="pico">
       <button>Submit</button>
+    </div>
 
   </form>
 

services/our/src/views/vtubers/new.hbs

@@ -26,10 +26,10 @@
   </article>
   {{/each}}
 
-  <div id="uploader"></div>
 
   <h3></h3>
-  <form id="details" class="pico" method="POST" action="/vtubers/create">
+  <form id="details" method="POST" action="/vtubers/create">
+    <div class="pico">
       <label for="displayName">VTuber Name <span style="color: red;">*</span></label>
       <input type="text" id="displayName" name="displayName" required>
 
@@ -86,8 +86,14 @@
 
       <label for="merch">Merch URL</label>
       <input type="url" id="merch" name="merch">
+    </div>
 
+    <div id="uploader"></div>
+
+    <h3></h3>
+    <div class="pico">
       <button type="submit">Submit</button>
+    </div>
   </form>
   {{#if message}}<p id="messages" hx-swap-oob="true">{{message}}</p>{{/if}}