x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-12 06:26:16 -08:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance layout and styling for improved user experience in upscaler page

Browse Source
This commit is contained in:
Harvey Zhao committed 2026-03-01 19:54:51 +08:00
1 parent 9a73b85fc7
commit f07e51c071
1 file changed
+36 -25
Download Patch File Download Diff File Expand all files Collapse all files
docs/upscaler/index.html
+36 -25
View File
@@ -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