fix(ui): upload page — fix double-toggle bug, replace hardcoded colors, improve error handling

static/app.js

@@ -71,10 +71,6 @@
   /* ------------------------------------------------
      Video Preview & File Info
   ------------------------------------------------ */
-  function initVideoPreview() {
-    // Handled inside handleFile
-  }
-
   function handleFile(file) {
     if (!file || !file.type.startsWith('video/')) return;
 
@@ -86,6 +82,9 @@
 
     // Video preview via FileReader
     var reader = new FileReader();
+    reader.onerror = function () {
+      fileDuration.textContent = 'unknown';
+    };
     reader.onload = function (e) {
       previewVideo.src = e.target.result;
       previewVideo.load();
@@ -128,14 +127,14 @@
     cards.forEach(function (card) {
       var checkbox = card.querySelector('.model-card-check');
 
-      // Click card body to toggle (avoid double-toggle when clicking checkbox directly)
+      // <label> auto-toggles the checkbox on click; just sync the UI
       card.addEventListener('click', function (e) {
-        if (e.target === checkbox) return;
         if (e.target.tagName === 'SELECT') return;
-        checkbox.checked = !checkbox.checked;
+        requestAnimationFrame(function () {
           card.classList.toggle('selected', checkbox.checked);
           updateSubmitState();
         });
+      });
 
       checkbox.addEventListener('change', function () {
         card.classList.toggle('selected', checkbox.checked);
@@ -171,7 +170,7 @@
      Submit — enable/disable, loading state
   ------------------------------------------------ */
   function initFormSubmit() {
-    submitBtn.addEventListener('click', function () {
+    form.addEventListener('submit', function () {
       submitBtn.disabled = true;
       submitBtn.textContent = 'Starting...';
       submitHint.textContent = 'Uploading and starting analysis...';
@@ -192,7 +191,6 @@
      Init
   ------------------------------------------------ */
   initUploadZone();
-  initVideoPreview();
   initModelCards();
   initFormSubmit();
 })();

templates/index.html

@@ -49,7 +49,7 @@
   .file-info {
     margin-top: var(--space-4);
     padding: var(--space-4);
-    background: #fff;
+    background: var(--color-neutral-50);
     border: 1px solid var(--color-neutral-200);
     border-radius: var(--radius-md);
     display: none;
@@ -103,7 +103,7 @@
     gap: var(--space-4);
   }
   .model-card {
-    background: #fff;
+    background: var(--color-neutral-50);
     border: 2px solid var(--color-neutral-200);
     border-radius: var(--radius-lg);
     padding: var(--space-5);
@@ -116,7 +116,7 @@
   }
   .model-card.selected {
     border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
   }
   .model-card-header {
     display: flex;
@@ -161,7 +161,7 @@
     font-size: var(--text-xs);
     border: 1px solid var(--color-neutral-300);
     border-radius: var(--radius-sm);
-    background: #fff;
+    background: var(--color-neutral-50);
     color: var(--color-neutral-700);
   }