zzh/2fa-tool
1
0
Fork 0
mirror of https://github.com/handsomezhuzhu/2fa-tool.git synced 2026-02-20 19:50:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: resolve z-index and background issues for canvas visibility

Browse Source 
Remove opaque background, adjust z-index, and add base color for proper theming.

Co-authored-by: Simon <85533298+handsomezhuzhu@users.noreply.github.com>
This commit is contained in:
v0
2026-02-04 15:21:03 +00:00
parent 822c08bda8
commit 7c45e9a868
2 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/page.tsx
View File

@@ -641,10 +641,10 @@ export default function TwoFactorAuth() {
} }
return ( return (
<div className="min-h-screen bg-background flex flex-col"> <div className="min-h-screen flex flex-col relative">
<TechBackground /> <TechBackground />
{/* Header */} {/* Header */}
<header className="border-b bg-card/50 backdrop-blur-sm sticky top-0 z-50"> <header className="border-b bg-background/80 backdrop-blur-sm sticky top-0 z-50">
<div className="max-w-3xl mx-auto px-6 md:px-8 py-4"> <div className="max-w-3xl mx-auto px-6 md:px-8 py-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
@@ -749,7 +749,7 @@ export default function TwoFactorAuth() {
</header> </header>
{/* Main Content */} {/* Main Content */}
<main className="flex-1 max-w-3xl mx-auto w-full px-6 md:px-8 py-6"> <main className="flex-1 max-w-3xl mx-auto w-full px-6 md:px-8 py-6 relative z-10">
{/* Timer Progress */} {/* Timer Progress */}
<div className="mb-6"> <div className="mb-6">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
@@ -1092,7 +1092,7 @@ export default function TwoFactorAuth() {
</Dialog> </Dialog>
{/* Footer */} {/* Footer */}
<footer className="border-t py-6 mt-auto"> <footer className="border-t py-6 mt-auto relative z-10 bg-background/80 backdrop-blur-sm">
<div className="mx-auto flex max-w-4xl flex-col items-center gap-2 text-center md:flex-row md:justify-between md:gap-4 px-4"> <div className="mx-auto flex max-w-4xl flex-col items-center gap-2 text-center md:flex-row md:justify-between md:gap-4 px-4">
<p className="text-xs tracking-wider text-muted-foreground">© 2025 Simon. All rights reserved.</p> <p className="text-xs tracking-wider text-muted-foreground">© 2025 Simon. All rights reserved.</p>
<div className="flex items-center gap-4 text-xs tracking-wider text-muted-foreground/60"> <div className="flex items-center gap-4 text-xs tracking-wider text-muted-foreground/60">

6
components/tech-background.tsx
View File

@@ -111,7 +111,9 @@ export function TechBackground() {
const animate = () => { const animate = () => {
const isDark = document.documentElement.classList.contains("dark") const isDark = document.documentElement.classList.contains("dark")
ctx.clearRect(0, 0, canvas.width, canvas.height) // Fill with base background color
ctx.fillStyle = isDark ? "hsl(224, 71%, 4%)" : "hsl(0, 0%, 100%)"
ctx.fillRect(0, 0, canvas.width, canvas.height)
// Draw subtle gradient overlay // Draw subtle gradient overlay
const gradient = ctx.createRadialGradient( const gradient = ctx.createRadialGradient(
@@ -165,7 +167,7 @@ export function TechBackground() {
return ( return (
<canvas <canvas
ref={canvasRef} ref={canvasRef}
className="fixed inset-0 pointer-events-none -z-10" className="fixed inset-0 pointer-events-none z-0"
aria-hidden="true" aria-hidden="true"
/> />
) )