From 197c505fa40a3e2b939e7b97968765abd4e9e3f7 Mon Sep 17 00:00:00 2001
From: jetson <jetson@zenai-jetson-kantor.lan>
Date: Thu, 17 Sep 2026 15:56:55 +0700
Subject: [PATCH] =?UTF-8?q?fix(ui):=20upload=20page=20=E2=80=94=20fix=20do?=
 =?UTF-8?q?uble-toggle=20bug,=20replace=20hardcoded=20colors,=20improve=20?=
 =?UTF-8?q?error=20handling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/app.js        | 20 +++++++++-----------
 templates/index.html |  8 ++++----
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/static/app.js b/static/app.js
index 3bfb8b8..0b10894 100644
--- a/static/app.js
+++ b/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,13 +127,13 @@
     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;
-        card.classList.toggle('selected', checkbox.checked);
-        updateSubmitState();
+        requestAnimationFrame(function () {
+          card.classList.toggle('selected', checkbox.checked);
+          updateSubmitState();
+        });
       });
 
       checkbox.addEventListener('change', function () {
@@ -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();
 })();
diff --git a/templates/index.html b/templates/index.html
index 97fb266..b439436 100644
--- a/templates/index.html
+++ b/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);
   }