Skip to content

Commit f07e51c

Browse files
zhw2590582zhw2590582
committed
feat: enhance layout and styling for improved user experience in upscaler page
1 parent 9a73b85 commit f07e51c

1 file changed

Lines changed: 36 additions & 25 deletions

File tree

‎docs/upscaler/index.html‎

Lines changed: 36 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -112,13 +112,13 @@
112112
<!-- Upload Placeholder -->
113113
<div
114114
id="uploadPlaceholder"
115-
class="flex flex-col items-center"
115+
class="flex flex-col items-center px-4"
116116
>
117117
<div
118-
class="w-14 h-14 rounded-full bg-slate-100 flex items-center justify-center mb-4"
118+
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"
119119
>
120120
<svg
121-
class="w-7 h-7 text-slate-400"
121+
class="w-6 h-6 sm:w-7 sm:h-7 text-slate-400"
122122
fill="none"
123123
stroke="currentColor"
124124
viewBox="0 0 24 24"
@@ -132,19 +132,20 @@
132132
</svg>
133133
</div>
134134
<span
135-
class="text-slate-700 font-medium text-base mb-1"
135+
class="text-slate-700 font-medium text-sm sm:text-base mb-1"
136136
>Choose a video file</span
137137
>
138-
<span class="text-slate-400 text-sm mb-4"
138+
<span
139+
class="text-slate-400 text-xs sm:text-sm mb-3 sm:mb-4"
139140
>or drag and drop here</span
140141
>
141142
<button
142143
type="button"
143144
onclick="loadSampleVideo(event)"
144-
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"
145+
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"
145146
>
146147
<svg
147-
class="w-4 h-4"
148+
class="w-3.5 h-3.5 sm:w-4 sm:h-4"
148149
fill="none"
149150
stroke="currentColor"
150151
viewBox="0 0 24 24"
@@ -162,7 +163,7 @@
162163
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
163164
/>
164165
</svg>
165-
Try sample video
166+
Try sample
166167
</button>
167168
</div>
168169
<!-- Video Preview (shown after file selection) -->
@@ -216,10 +217,12 @@
216217
</div>
217218

218219
<!-- Network Selection -->
219-
<div class="flex items-center justify-between gap-4 mb-6">
220+
<div
221+
class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4 mb-6"
222+
>
220223
<div>
221224
<label
222-
class="block text-sm font-medium text-slate-700 mb-1"
225+
class="block text-sm font-medium text-slate-700 mb-0.5 sm:mb-1"
223226
>
224227
Quality Model
225228
</label>
@@ -228,27 +231,27 @@
228231
</p>
229232
</div>
230233
<div
231-
class="inline-flex items-center gap-1 rounded-lg bg-slate-100 p-1"
234+
class="inline-flex items-center gap-0.5 sm:gap-1 rounded-lg bg-slate-100 p-1 self-start sm:self-auto"
232235
id="networkToggle"
233236
>
234237
<button
235238
type="button"
236239
data-network="small"
237-
class="rounded-md px-3 py-1.5 text-sm font-medium text-slate-600 transition-all duration-150"
240+
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"
238241
>
239242
Fast
240243
</button>
241244
<button
242245
type="button"
243246
data-network="medium"
244-
class="rounded-md px-3 py-1.5 text-sm font-medium bg-slate-800 text-white shadow-sm transition-all duration-150"
247+
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"
245248
>
246249
Balanced
247250
</button>
248251
<button
249252
type="button"
250253
data-network="large"
251-
class="rounded-md px-3 py-1.5 text-sm font-medium text-slate-600 transition-all duration-150"
254+
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"
252255
>
253256
Quality
254257
</button>
@@ -375,41 +378,49 @@
375378
</div>
376379

377380
<!-- File Info -->
378-
<div class="grid grid-cols-3 gap-3 mb-5 text-center">
381+
<div
382+
class="grid grid-cols-3 gap-2 sm:gap-3 mb-5 text-center"
383+
>
379384
<div
380-
class="bg-white rounded-lg px-3 py-3 border border-slate-200"
385+
class="bg-white rounded-lg px-2 sm:px-3 py-2.5 sm:py-3 border border-slate-200"
381386
>
382-
<div class="text-xs text-slate-400 mb-1">
387+
<div
388+
class="text-[10px] sm:text-xs text-slate-400 mb-0.5 sm:mb-1"
389+
>
383390
Original
384391
</div>
385392
<div
386-
class="text-sm font-medium text-slate-700"
393+
class="text-xs sm:text-sm font-medium text-slate-700"
387394
id="originalVideoSize"
388395
>
389396
-
390397
</div>
391398
</div>
392399
<div
393-
class="bg-white rounded-lg px-3 py-3 border border-slate-200"
400+
class="bg-white rounded-lg px-2 sm:px-3 py-2.5 sm:py-3 border border-slate-200"
394401
>
395-
<div class="text-xs text-slate-400 mb-1">
402+
<div
403+
class="text-[10px] sm:text-xs text-slate-400 mb-0.5 sm:mb-1"
404+
>
396405
Upscaled
397406
</div>
398407
<div
399-
class="text-sm font-medium text-slate-700"
408+
class="text-xs sm:text-sm font-medium text-slate-700"
400409
id="resultVideoSize"
401410
>
402411
-
403412
</div>
404413
</div>
405414
<div
406-
class="bg-white rounded-lg px-3 py-3 border border-slate-200"
415+
class="bg-white rounded-lg px-2 sm:px-3 py-2.5 sm:py-3 border border-slate-200"
407416
>
408-
<div class="text-xs text-slate-400 mb-1">
417+
<div
418+
class="text-[10px] sm:text-xs text-slate-400 mb-0.5 sm:mb-1"
419+
>
409420
Backend
410421
</div>
411422
<div
412-
class="text-sm font-medium text-slate-700"
423+
class="text-xs sm:text-sm font-medium text-slate-700"
413424
id="backendVideoInfo"
414425
>
415426
-
@@ -466,7 +477,7 @@
466477
<!-- Footer -->
467478
<footer class="w-full border-t border-slate-200 bg-white">
468479
<div
469-
class="max-w-4xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between text-sm text-slate-500"
480+
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"
470481
>
471482
<span>Powered by WebGPU / WebGL</span>
472483
<span

0 commit comments

Comments
 (0)