From f07e51c0715df0f98a5495ed339cc9593720cd98 Mon Sep 17 00:00:00 2001
From: Harvey Zhao <laozhaochaguan@gmail.com>
Date: Sun, 1 Mar 2026 19:54:51 +0800
Subject: [PATCH] feat: enhance layout and styling for improved user experience
 in upscaler page

---
 docs/upscaler/index.html | 61 ++++++++++++++++++++++++----------------
 1 file changed, 36 insertions(+), 25 deletions(-)

diff --git a/docs/upscaler/index.html b/docs/upscaler/index.html
index a5e1cd5de..7eb3ecc2d 100644
--- a/docs/upscaler/index.html
+++ b/docs/upscaler/index.html
@@ -112,13 +112,13 @@
                             <!-- Upload Placeholder -->
                             <div
                                 id="uploadPlaceholder"
-                                class="flex flex-col items-center"
+                                class="flex flex-col items-center px-4"
                             >
                                 <div
-                                    class="w-14 h-14 rounded-full bg-slate-100 flex items-center justify-center mb-4"
+                                    class="w-12 h-12 sm:w-14 sm:h-14 rounded-full bg-slate-100 flex items-center justify-center mb-3 sm:mb-4"
                                 >
                                     <svg
-                                        class="w-7 h-7 text-slate-400"
+                                        class="w-6 h-6 sm:w-7 sm:h-7 text-slate-400"
                                         fill="none"
                                         stroke="currentColor"
                                         viewBox="0 0 24 24"
@@ -132,19 +132,20 @@
                                     </svg>
                                 </div>
                                 <span
-                                    class="text-slate-700 font-medium text-base mb-1"
+                                    class="text-slate-700 font-medium text-sm sm:text-base mb-1"
                                     >Choose a video file</span
                                 >
-                                <span class="text-slate-400 text-sm mb-4"
+                                <span
+                                    class="text-slate-400 text-xs sm:text-sm mb-3 sm:mb-4"
                                     >or drag and drop here</span
                                 >
                                 <button
                                     type="button"
                                     onclick="loadSampleVideo(event)"
-                                    class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-blue-500 hover:bg-blue-600 rounded-lg transition-all"
+                                    class="inline-flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-semibold text-white bg-blue-500 hover:bg-blue-600 rounded-lg transition-all"
                                 >
                                     <svg
-                                        class="w-4 h-4"
+                                        class="w-3.5 h-3.5 sm:w-4 sm:h-4"
                                         fill="none"
                                         stroke="currentColor"
                                         viewBox="0 0 24 24"
@@ -162,7 +163,7 @@
                                             d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                                         />
                                     </svg>
-                                    Try sample video
+                                    Try sample
                                 </button>
                             </div>
                             <!-- Video Preview (shown after file selection) -->
@@ -216,10 +217,12 @@
                     </div>
 
                     <!-- Network Selection -->
-                    <div class="flex items-center justify-between gap-4 mb-6">
+                    <div
+                        class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4 mb-6"
+                    >
                         <div>
                             <label
-                                class="block text-sm font-medium text-slate-700 mb-1"
+                                class="block text-sm font-medium text-slate-700 mb-0.5 sm:mb-1"
                             >
                                 Quality Model
                             </label>
@@ -228,27 +231,27 @@
                             </p>
                         </div>
                         <div
-                            class="inline-flex items-center gap-1 rounded-lg bg-slate-100 p-1"
+                            class="inline-flex items-center gap-0.5 sm:gap-1 rounded-lg bg-slate-100 p-1 self-start sm:self-auto"
                             id="networkToggle"
                         >
                             <button
                                 type="button"
                                 data-network="small"
-                                class="rounded-md px-3 py-1.5 text-sm font-medium text-slate-600 transition-all duration-150"
+                                class="rounded-md px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm font-medium text-slate-600 transition-all duration-150"
                             >
                                 Fast
                             </button>
                             <button
                                 type="button"
                                 data-network="medium"
-                                class="rounded-md px-3 py-1.5 text-sm font-medium bg-slate-800 text-white shadow-sm transition-all duration-150"
+                                class="rounded-md px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm font-medium bg-slate-800 text-white shadow-sm transition-all duration-150"
                             >
                                 Balanced
                             </button>
                             <button
                                 type="button"
                                 data-network="large"
-                                class="rounded-md px-3 py-1.5 text-sm font-medium text-slate-600 transition-all duration-150"
+                                class="rounded-md px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm font-medium text-slate-600 transition-all duration-150"
                             >
                                 Quality
                             </button>
@@ -375,41 +378,49 @@
                         </div>
 
                         <!-- File Info -->
-                        <div class="grid grid-cols-3 gap-3 mb-5 text-center">
+                        <div
+                            class="grid grid-cols-3 gap-2 sm:gap-3 mb-5 text-center"
+                        >
                             <div
-                                class="bg-white rounded-lg px-3 py-3 border border-slate-200"
+                                class="bg-white rounded-lg px-2 sm:px-3 py-2.5 sm:py-3 border border-slate-200"
                             >
-                                <div class="text-xs text-slate-400 mb-1">
+                                <div
+                                    class="text-[10px] sm:text-xs text-slate-400 mb-0.5 sm:mb-1"
+                                >
                                     Original
                                 </div>
                                 <div
-                                    class="text-sm font-medium text-slate-700"
+                                    class="text-xs sm:text-sm font-medium text-slate-700"
                                     id="originalVideoSize"
                                 >
                                     -
                                 </div>
                             </div>
                             <div
-                                class="bg-white rounded-lg px-3 py-3 border border-slate-200"
+                                class="bg-white rounded-lg px-2 sm:px-3 py-2.5 sm:py-3 border border-slate-200"
                             >
-                                <div class="text-xs text-slate-400 mb-1">
+                                <div
+                                    class="text-[10px] sm:text-xs text-slate-400 mb-0.5 sm:mb-1"
+                                >
                                     Upscaled
                                 </div>
                                 <div
-                                    class="text-sm font-medium text-slate-700"
+                                    class="text-xs sm:text-sm font-medium text-slate-700"
                                     id="resultVideoSize"
                                 >
                                     -
                                 </div>
                             </div>
                             <div
-                                class="bg-white rounded-lg px-3 py-3 border border-slate-200"
+                                class="bg-white rounded-lg px-2 sm:px-3 py-2.5 sm:py-3 border border-slate-200"
                             >
-                                <div class="text-xs text-slate-400 mb-1">
+                                <div
+                                    class="text-[10px] sm:text-xs text-slate-400 mb-0.5 sm:mb-1"
+                                >
                                     Backend
                                 </div>
                                 <div
-                                    class="text-sm font-medium text-slate-700"
+                                    class="text-xs sm:text-sm font-medium text-slate-700"
                                     id="backendVideoInfo"
                                 >
                                     -
@@ -466,7 +477,7 @@
         <!-- Footer -->
         <footer class="w-full border-t border-slate-200 bg-white">
             <div
-                class="max-w-4xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between text-sm text-slate-500"
+                class="max-w-4xl mx-auto px-4 sm:px-6 py-3 sm:py-4 flex flex-col sm:flex-row items-center justify-center sm:justify-between gap-1 sm:gap-0 text-xs sm:text-sm text-slate-500"
             >
                 <span>Powered by WebGPU / WebGL</span>
                 <span