From 57179e600e7fd82a5c5196c3f8a62c839b5079cc Mon Sep 17 00:00:00 2001
From: CJ_Clippy <cj@futureporn.net>
Date: Tue, 17 Jun 2025 11:10:20 -0800
Subject: [PATCH] reorder uplaods pages

---
 services/our/src/views/uploads/new.hbs | 45 ++++++++-----
 services/our/src/views/vtubers/new.hbs | 88 ++++++++++++++------------
 2 files changed, 75 insertions(+), 58 deletions(-)

diff --git a/services/our/src/views/uploads/new.hbs b/services/our/src/views/uploads/new.hbs
index b0dc414..918b0f6 100644
--- a/services/our/src/views/uploads/new.hbs
+++ b/services/our/src/views/uploads/new.hbs
@@ -10,30 +10,41 @@
 
 <main class="container">
   <h1>Upload Lewdtuber VODs here.</h1>
-  <div id="uploader"></div>
-  <h3></h3>
-  <form id="details" class="pico" method="POST" action="/upload">
-    <!-- VTuber select input -->
-    <label for="vtuberIds">VTuber(s)</label>
-    <select id="vtuberIds" name="vtuberIds" multiple required>
-      {{#each vtubers}}
-      <option value="{{this.id}}">{{this.displayName}}</option>
-      {{/each}}
-    </select>
+
+  <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>
+        {{#each vtubers}}
+        <option value="{{this.id}}">{{this.displayName}}</option>
+        {{/each}}
+      </select>
 
 
-    <!-- Original stream date -->
-    <label for="streamDate">Original Stream Datetime</label>
-    <input type="datetime-local" id="streamDate" name="streamDate" required />
+      <!-- Original stream date -->
+      <label for="streamDate">Original Stream Datetime</label>
+      <input type="datetime-local" id="streamDate" name="streamDate" required />
 
-    <!-- Notes textarea -->
-    <label for="notes">Notes (optional)</label>
-    <textarea id="notes" name="notes" rows="4" placeholder="Any notes about the upload…"></textarea>
+      <!-- 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}}
-    <button>Submit</button>
+    <div class="pico">
+      <button>Submit</button>
+    </div>
 
   </form>
 
diff --git a/services/our/src/views/vtubers/new.hbs b/services/our/src/views/vtubers/new.hbs
index c7bcd37..bf1f369 100644
--- a/services/our/src/views/vtubers/new.hbs
+++ b/services/our/src/views/vtubers/new.hbs
@@ -26,68 +26,74 @@
   </article>
   {{/each}}
 
-  <div id="uploader"></div>
 
   <h3></h3>
-  <form id="details" class="pico" method="POST" action="/vtubers/create">
-    <label for="displayName">VTuber Name <span style="color: red;">*</span></label>
-    <input type="text" id="displayName" name="displayName" required>
+  <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>
 
-    <label for="themeColor">Theme Color <span style="color: red;">*</span></label>
-    <input type="color" id="themeColor" name="themeColor" required>
+      <label for="themeColor">Theme Color <span style="color: red;">*</span></label>
+      <input type="color" id="themeColor" name="themeColor" required>
 
-    <label for="chaturbate">Chaturbate URL</label>
-    <input type="url" id="chaturbate" name="chaturbate">
+      <label for="chaturbate">Chaturbate URL</label>
+      <input type="url" id="chaturbate" name="chaturbate">
 
-    <label for="twitter">Twitter URL</label>
-    <input type="url" id="twitter" name="twitter">
+      <label for="twitter">Twitter URL</label>
+      <input type="url" id="twitter" name="twitter">
 
-    <label for="patreon">Patreon URL</label>
-    <input type="url" id="patreon" name="patreon">
+      <label for="patreon">Patreon URL</label>
+      <input type="url" id="patreon" name="patreon">
 
-    <label for="twitch">Twitch URL</label>
-    <input type="url" id="twitch" name="twitch">
+      <label for="twitch">Twitch URL</label>
+      <input type="url" id="twitch" name="twitch">
 
-    <label for="tiktok">TikTok URL</label>
-    <input type="url" id="tiktok" name="tiktok">
+      <label for="tiktok">TikTok URL</label>
+      <input type="url" id="tiktok" name="tiktok">
 
-    <label for="onlyfans">OnlyFans URL</label>
-    <input type="url" id="onlyfans" name="onlyfans">
+      <label for="onlyfans">OnlyFans URL</label>
+      <input type="url" id="onlyfans" name="onlyfans">
 
-    <label for="youtube">YouTube URL</label>
-    <input type="url" id="youtube" name="youtube">
+      <label for="youtube">YouTube URL</label>
+      <input type="url" id="youtube" name="youtube">
 
-    <label for="linktree">Linktree URL</label>
-    <input type="url" id="linktree" name="linktree">
+      <label for="linktree">Linktree URL</label>
+      <input type="url" id="linktree" name="linktree">
 
-    <label for="carrd">Carrd URL</label>
-    <input type="url" id="carrd" name="carrd">
+      <label for="carrd">Carrd URL</label>
+      <input type="url" id="carrd" name="carrd">
 
-    <label for="fansly">Fansly URL</label>
-    <input type="url" id="fansly" name="fansly">
+      <label for="fansly">Fansly URL</label>
+      <input type="url" id="fansly" name="fansly">
 
-    <label for="pornhub">Pornhub URL</label>
-    <input type="url" id="pornhub" name="pornhub">
+      <label for="pornhub">Pornhub URL</label>
+      <input type="url" id="pornhub" name="pornhub">
 
-    <label for="discord">Discord URL</label>
-    <input type="url" id="discord" name="discord">
+      <label for="discord">Discord URL</label>
+      <input type="url" id="discord" name="discord">
 
-    <label for="reddit">Reddit URL</label>
-    <input type="url" id="reddit" name="reddit">
+      <label for="reddit">Reddit URL</label>
+      <input type="url" id="reddit" name="reddit">
 
-    <label for="throne">Throne URL</label>
-    <input type="url" id="throne" name="throne">
+      <label for="throne">Throne URL</label>
+      <input type="url" id="throne" name="throne">
 
-    <label for="instagram">Instagram URL</label>
-    <input type="url" id="instagram" name="instagram">
+      <label for="instagram">Instagram URL</label>
+      <input type="url" id="instagram" name="instagram">
 
-    <label for="facebook">Facebook URL</label>
-    <input type="url" id="facebook" name="facebook">
+      <label for="facebook">Facebook URL</label>
+      <input type="url" id="facebook" name="facebook">
 
-    <label for="merch">Merch URL</label>
-    <input type="url" id="merch" name="merch">
+      <label for="merch">Merch URL</label>
+      <input type="url" id="merch" name="merch">
+    </div>
 
-    <button type="submit">Submit</button>
+    <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}}