averyfelts/Stop_smoking_website_ver2
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Final surgical fix for iPhone XR - 480p Baseline 3.0, CSS filter removal, and structure repair

Browse Source
This commit is contained in:
Avery Felts 2026-01-31 19:54:10 -07:00
parent c3f9a4fc9a
commit 5f87c79b58
3 changed files with 214 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/videos/smoke-poster.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
public/videos/smoke.mp4
View File

Binary file not shown.

14
src/components/UserHeader.tsx
View File

@ -291,19 +291,19 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
onLoadedData={() => setIsVideoLoaded(true)}
onPlay={() => setIsVideoPlaying(true)}
className={cn(
"absolute inset-0 w-full h-full object-cover scale-110 brightness-[1.1] dark:brightness-[0.85] transition-all duration-[2000ms] ease-in-out",
"absolute inset-0 w-full h-full object-cover scale-110 transition-opacity duration-[1500ms] ease-in-out",
isVideoPlaying
? "opacity-70 dark:opacity-50 blur-0"
? "opacity-70 dark:opacity-50"
: isVideoLoaded
? "opacity-30 blur-[4px]"
: "opacity-10 blur-sm"
? "opacity-30"
: "opacity-10"
)}
>
<source src="/videos/smoke.mp4" type="video/mp4" />
</video>
{/* Vignette/Readability Overlay */}
<div className="absolute inset-0 bg-gradient-to-b from-black/10 via-transparent to-black/30 dark:from-black/40 dark:via-transparent dark:to-black/50" />
{/* Vignette/Readability Overlay - Reinforced for contrast */}
<div className="absolute inset-0 bg-gradient-to-b from-black/30 via-transparent to-black/50 dark:from-black/60 dark:via-transparent dark:to-black/70 mix-blend-multiply" />
</div>
<div className="container mx-auto px-4 h-16 sm:h-20 flex items-center justify-between relative z-50">
@ -381,6 +381,7 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
</button>
</div>
</div>
</header>
{/* Side Menu Integration */}
<SideMenu
@ -600,7 +601,6 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
</div>
</DialogContent>
</Dialog>
</header>
</>
);
}