drop zone, and remove beta tag from mraid checker

standalone/applovin.go

@@ -44,10 +44,13 @@ func ApplovinPage(w http.ResponseWriter, r *http.Request) {
   <div class="panel-header"><h3 class="panel-title">Inputs</h3></div>
   <div class="panel-body">
     <div class="control-group">
-      <div class="file-row">
-        <button id="pickFolder" class="secondary">Select Folder</button>
-        <button id="pick" class="secondary">Select File(s)</button>
-        <button id="clear" class="secondary">Clear</button>
+      <div id="dropZone" class="drop-zone">
+        <div class="file-row">
+          <button id="pickFolder" class="secondary">Select Folder</button>
+          <button id="pick" class="secondary">Select File(s)</button>
+          <button id="clear" class="secondary">Clear</button>
+        </div>
+        <div class="drop-zone-text">or drop HTML files or folders here</div>
       </div>
       <div id="fileName" class="file-name" style="margin-top:8px;">(no files selected)</div>
       <div id="fileList" class="selected-files"></div>
@@ -154,6 +157,15 @@ regenAllBtn.addEventListener('click', () => {
     img.src = base + '&_=' + Date.now();
   });
 });
+setupDropZone('dropZone', statusEl, (j) => {
+  if (j.files && j.files.length) {
+    const added = j.files.map(f => f.path).filter(p => !selectedPaths.includes(p));
+    selectedPaths = selectedPaths.concat(added);
+    selectedPage = Math.max(0, Math.ceil(selectedPaths.length / PAGE_SIZE) - 1);
+    renderSelection();
+  }
+  if (j.skipped) statusEl.textContent = 'Skipped ' + j.skipped + ' non-HTML or unavailable item(s).';
+});
 
 clearBtn.addEventListener('click', () => {
   selectedPaths = [];
@@ -184,12 +196,15 @@ pickBtn.addEventListener('click', async () => {
 
 uploadBtn.addEventListener('click', async () => {
   statusEl.textContent = '';
+  statusEl.classList.remove('is-busy');
   resultsEl.innerHTML = '';
   if (!selectedPaths.length) {
     statusEl.innerHTML = '<span class="err">Pick at least one HTML file first.</span>';
     return;
   }
   uploadBtn.disabled = true;
+  statusEl.textContent = 'Uploading...';
+  statusEl.classList.add('is-busy');
   resultItems = [];
   saveAllBtn.disabled = true;
   regenAllBtn.disabled = true;
@@ -200,6 +215,7 @@ uploadBtn.addEventListener('click', async () => {
       body: JSON.stringify({ paths: selectedPaths }),
     });
     if (!res.ok || !res.body) {
+      statusEl.classList.remove('is-busy');
       statusEl.innerHTML = '<span class="err">Upload failed.</span>';
       uploadBtn.disabled = false;
       return;
@@ -219,6 +235,7 @@ uploadBtn.addEventListener('click', async () => {
       }
     }
   } catch (e) {
+    statusEl.classList.remove('is-busy');
     statusEl.innerHTML = '<span class="err">' + (e.message || e) + '</span>';
   } finally {
     uploadBtn.disabled = false;
@@ -240,6 +257,7 @@ qrModal.addEventListener('click', () => qrModal.classList.remove('open'));
 function handle(m) {
   if (m.type === 'status') {
     statusEl.textContent = m.message;
+    statusEl.classList.add('is-busy');
   } else if (m.type === 'fileError') {
     const tbody = ensureResultsTable();
     resultsEl.querySelector('table').classList.add('has-errors');
@@ -296,6 +314,7 @@ function handle(m) {
     saveAllBtn.disabled = resultItems.length === 0;
     regenAllBtn.disabled = resultItems.length === 0;
   } else if (m.type === 'done') {
+    statusEl.classList.remove('is-busy');
     statusEl.innerHTML = '<span class="ok">Done.</span>';
   }
 }