naman_panwar_gnpl/pragativeer-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update streak onboarding card size to w-[80vw] h-[80vh] and background color of animation and greetings panels to solid black

Browse Source
This commit is contained in:
ectasy663
2026-07-10 16:08:59 +05:30
parent ebc552a8ca
commit f15c260cae
3 changed files with 40 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/streak-animation.html
View File

@@ -9,7 +9,7 @@
--navy-900:#081226; --navy-800:#0c1c39; --navy-700:#13294d;
--gold-200:#fdeeb8; --gold-300:#f6dd93; --gold-400:#e8c463; --gold-500:#d4af37;
--gold-600:#b1892a; --gold-700:#7d5f18;
--ink:#e9eefb; --badge:220px; --grow:1.18; --halo-w:170%;
--ink:#e9eefb; --badge:240px; --grow:1.18; --halo-w:170%;
--font:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
*{box-sizing:border-box}
@@ -165,7 +165,7 @@
display: none !important;
}
.stage {
height: 360px !important;
height: 100vh !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;

6
scratch/port_streak_clean.py
View File

@@ -20,7 +20,7 @@ def port_html():
display: none !important;
}
.stage {
height: 360px !important;
height: 100vh !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
@@ -59,8 +59,8 @@ def port_html():
html = html.replace("Math.max(target,5)/5", "Math.max(target,3)/3")
html = html.replace("(4 - target) / 3", "(3 - target) / 3")
# 5. Adjust badge size from 230px to 220px
html = html.replace("--badge:230px;", "--badge:220px;")
# 5. Adjust badge size from 230px to 240px
html = html.replace("--badge:230px;", "--badge:240px;")
with open(dest_path, 'w', encoding='utf-8') as f:
f.write(html)

18
src/components/Dashboard/StreakOnboardingModal.tsx
View File

@@ -56,15 +56,15 @@ export function StreakOnboardingModal() {
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/85 backdrop-blur-md animate-in fade-in duration-300">
{/* Centered Modal Card Container with Border (containing both the animation and text) */}
<div className="bg-background/95 border border-border shadow-[0_0_60px_-10px_rgba(0,240,255,0.2)] rounded-3xl w-full max-w-2xl relative overflow-hidden animate-in zoom-in-95 slide-in-from-bottom-4 duration-300 z-20 pointer-events-auto mx-4 flex flex-col justify-start">
{/* Centered Modal Card Container covering 80% screen size (w-[80vw] h-[80vh]) */}
<div className="bg-black border border-border/80 shadow-[0_0_60px_-10px_rgba(0,240,255,0.25)] rounded-3xl w-[80vw] max-w-5xl h-[80vh] max-h-[800px] relative overflow-hidden animate-in zoom-in-95 slide-in-from-bottom-4 duration-300 z-20 pointer-events-auto mx-4 flex flex-col justify-start">
{/* Subtle background glow */}
<div className="absolute -right-20 -top-20 size-48 bg-[#00F0FF]/5 rounded-full blur-3xl pointer-events-none" />
<div className="absolute -left-20 -bottom-20 size-48 bg-primary/5 rounded-full blur-3xl pointer-events-none" />
{/* Top Celebration Animation Panel (Iframe with height 360px, border-b) */}
<div className="relative w-full h-[360px] border-b border-border/40 z-10 pointer-events-none overflow-hidden bg-[#0c1c39]/30">
{/* Top Celebration Animation Panel (Iframe with height 60%, border-b, pure black bg) */}
<div className="relative w-full h-[60%] border-b border-border/40 z-10 pointer-events-none overflow-hidden bg-black">
<iframe
src={`/streak-animation.html?streak=${streak}`}
className="w-full h-full border-none"
@@ -73,9 +73,10 @@ export function StreakOnboardingModal() {
/>
</div>
{/* Bottom Greetings & Action Panel */}
<div className="p-6 text-center space-y-4">
{/* Bottom Greetings & Action Panel (height 40%, pure black bg) */}
<div className="p-8 text-center flex-1 flex flex-col justify-between bg-black z-20">
<div className="space-y-4">
{/* Badge Indicators */}
<div className="flex flex-col items-center gap-2">
{streak > 0 ? (
@@ -100,13 +101,14 @@ export function StreakOnboardingModal() {
<h3 className="text-xl md:text-2xl font-black tracking-tight bg-gradient-to-r from-white via-white to-gray-400 bg-clip-text text-transparent">
{wishTitle}
</h3>
<p className="text-gray-400 text-xs md:text-sm leading-relaxed max-w-sm mx-auto">
<p className="text-gray-400 text-xs md:text-sm leading-relaxed max-w-md mx-auto">
{wishMessage}
</p>
</div>
</div>
{/* Action Button */}
<div className="pt-1">
<div className="pt-2 max-w-sm w-full mx-auto">
<Button
onClick={handleEnter}
className="w-full h-12 rounded-xl text-base font-black bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 shadow-[0_0_15px_-3px_#00F0FF] hover:shadow-[0_0_25px_#00F0FF] hover:-translate-y-0.5 transition-all duration-300"