x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-28 18:41:20 -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 --> <!-- Upload Placeholder -->
<div <div
id="uploadPlaceholder" id="uploadPlaceholder"
class="flex flex-col items-center" class="flex flex-col items-center px-4"
> >
<div <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 <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" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -132,19 +132,20 @@
</svg> </svg>
</div> </div>
<span <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 >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 >or drag and drop here</span
> >
<button <button
type="button" type="button"
onclick="loadSampleVideo(event)" 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 <svg
class="w-4 h-4" class="w-3.5 h-3.5 sm:w-4 sm:h-4"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -162,7 +163,7 @@
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/> />
</svg> </svg>
Try sample video Try sample
</button> </button>
</div> </div>
<!-- Video Preview (shown after file selection) --> <!-- Video Preview (shown after file selection) -->
@@ -216,10 +217,12 @@
</div> </div>
<!-- Network Selection --> <!-- 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> <div>
<label <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 Quality Model
</label> </label>
@@ -228,27 +231,27 @@
</p> </p>
</div> </div>
<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" id="networkToggle"
> >
<button <button
type="button" type="button"
data-network="small" 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 Fast
</button> </button>
<button <button
type="button" type="button"
data-network="medium" 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 Balanced
</button> </button>
<button <button
type="button" type="button"
data-network="large" 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 Quality
</button> </button>
@@ -375,41 +378,49 @@
</div> </div>
<!-- File Info --> <!-- 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 <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 Original
</div> </div>
<div <div
class="text-sm font-medium text-slate-700" class="text-xs sm:text-sm font-medium text-slate-700"
id="originalVideoSize" id="originalVideoSize"
> >
- -
</div> </div>
</div> </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 Upscaled
</div> </div>
<div <div
class="text-sm font-medium text-slate-700" class="text-xs sm:text-sm font-medium text-slate-700"
id="resultVideoSize" id="resultVideoSize"
> >
- -
</div> </div>
</div> </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 Backend
</div> </div>
<div <div
class="text-sm font-medium text-slate-700" class="text-xs sm:text-sm font-medium text-slate-700"
id="backendVideoInfo" id="backendVideoInfo"
> >
- -
@@ -466,7 +477,7 @@
<!-- Footer --> <!-- Footer -->
<footer class="w-full border-t border-slate-200 bg-white"> <footer class="w-full border-t border-slate-200 bg-white">
<div <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>Powered by WebGPU / WebGL</span>
<span <span