xsl/juzi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(h5): apply fourth feedback and tighten local capture validation

Browse Source
This commit is contained in:
xsl
2026-10-12 20:16:41 +08:00
parent e53c809522
commit 92a3965b7d
33 changed files with 3758 additions and 1385 deletions
Download Patch File Download Diff File Expand all files Collapse all files
h5/css/ui-20261012.css
+22 -3
View File
@@ -72,11 +72,23 @@
.prod-scroll { flex: 0 0 51.219512%; }
.prod-scroll img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: fill; }
/* Exact static PSD waiting image. No fake progress or added scanning animation.
Contain the original composition instead of stretching/cropping faces/icons. */
/* Fourth feedback adds a fast one-second round trip to original PSD pixels.
The stage/mask share one contain transform, including short/landscape screens. */
#p-analyzing { background: #000; overflow: hidden; }
.scan-stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(100vw, 480px, calc(100dvh * 1080 / 2091)); height: min(100dvh, calc(min(100vw, 480px) * 2091 / 1080)); }
@supports not (height: 100dvh) { .scan-stage { width: min(100vw, 480px, calc(100vh * 1080 / 2091)); height: min(100vh, calc(min(100vw, 480px) * 2091 / 1080)); } }
.scan-artwork { width: 100%; height: 100%; object-fit: contain; }
#p-analyzing:not(.scan-artwork-ready) .scan-artwork { visibility: hidden; }
.scan-face { position: absolute; inset: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; overflow: hidden; }
.scan-beam { position: absolute; left: 0; right: 0; top: 20%; height: 18%; background: linear-gradient(to bottom, #F5F078 0%, #F5F078 35%, rgba(245,240,120,0) 100%); }
#p-analyzing:not(.scan-artwork-ready) .scan-stage { visibility: hidden; }
.scan-running .scan-beam { animation: report-scan var(--scan-cycle, 1000ms) ease-in-out infinite; }
@keyframes report-scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(166%); } }
.scan-running:not(.scan-artwork-ready) .scan-status { animation: report-scan-fallback var(--scan-cycle, 1000ms) ease-in-out infinite; }
@keyframes report-scan-fallback { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
.scan-running .scan-beam { animation-name: report-scan-reduced; }
@keyframes report-scan-reduced { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
}
/* A failed/stalled image must not leave an unexplained black screen. The live
status is visually hidden only once the exact PSD artwork has loaded. */
.scan-status { position: absolute; top: 10.5%; left: 0; right: 0; color: #fff; text-align: center; font: 700 23.148148px/1.4 "MiSans Demibold",var(--font); }
@@ -87,3 +99,10 @@
color: #bbb; font: 12px/1.5 "PingFang SC","Microsoft YaHei",sans-serif;
}
.scan-cancel:focus-visible { outline: 1px solid var(--yellow); border-radius: 4px; }
/* Restore only the requested focus area, not the older age-comparison pill. */
#dims-note { display: block !important; margin-top: 12px; padding: 10px 12px 10px 24px; text-align: left; }
#dims-note[hidden] { display: none !important; }
#dims-note::before { left: 12px; top: 10px; bottom: 10px; }
#dims-note .dims-note-l1 { font-size: 12px; line-height: 1.5; }
#dims-note .dims-note-l2 { font-size: 11px; line-height: 1.5; margin-top: 3px; }