Update card width to max-w-2xl and iframe animation height to 360px. Adjust demo streak data in database seed.
This commit is contained in:
@@ -39,7 +39,7 @@ def seed_local_database():
|
|||||||
city="Patna",
|
city="Patna",
|
||||||
state="Bihar",
|
state="Bihar",
|
||||||
tier=models.TierEnum.FREE,
|
tier=models.TierEnum.FREE,
|
||||||
streak_count=0,
|
streak_count=1,
|
||||||
last_active=datetime.utcnow()
|
last_active=datetime.utcnow()
|
||||||
)
|
)
|
||||||
session.add(free_student)
|
session.add(free_student)
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
--navy-900:#081226; --navy-800:#0c1c39; --navy-700:#13294d;
|
--navy-900:#081226; --navy-800:#0c1c39; --navy-700:#13294d;
|
||||||
--gold-200:#fdeeb8; --gold-300:#f6dd93; --gold-400:#e8c463; --gold-500:#d4af37;
|
--gold-200:#fdeeb8; --gold-300:#f6dd93; --gold-400:#e8c463; --gold-500:#d4af37;
|
||||||
--gold-600:#b1892a; --gold-700:#7d5f18;
|
--gold-600:#b1892a; --gold-700:#7d5f18;
|
||||||
--ink:#e9eefb; --badge:190px; --grow:1.18; --halo-w:170%;
|
--ink:#e9eefb; --badge:220px; --grow:1.18; --halo-w:170%;
|
||||||
--font:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
--font:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||||
}
|
}
|
||||||
*{box-sizing:border-box}
|
*{box-sizing:border-box}
|
||||||
@@ -165,7 +165,7 @@
|
|||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
.stage {
|
.stage {
|
||||||
height: 280px !important;
|
height: 360px !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
max-width: 100% !important;
|
max-width: 100% !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ def port_html():
|
|||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
.stage {
|
.stage {
|
||||||
height: 280px !important;
|
height: 360px !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
max-width: 100% !important;
|
max-width: 100% !important;
|
||||||
padding: 0 !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("Math.max(target,5)/5", "Math.max(target,3)/3")
|
||||||
html = html.replace("(4 - target) / 3", "(3 - target) / 3")
|
html = html.replace("(4 - target) / 3", "(3 - target) / 3")
|
||||||
|
|
||||||
# 5. Adjust badge size from 230px to 190px
|
# 5. Adjust badge size from 230px to 220px
|
||||||
html = html.replace("--badge:230px;", "--badge:190px;")
|
html = html.replace("--badge:230px;", "--badge:220px;")
|
||||||
|
|
||||||
with open(dest_path, 'w', encoding='utf-8') as f:
|
with open(dest_path, 'w', encoding='utf-8') as f:
|
||||||
f.write(html)
|
f.write(html)
|
||||||
|
|||||||
@@ -57,14 +57,14 @@ export function StreakOnboardingModal() {
|
|||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/85 backdrop-blur-md animate-in fade-in duration-300">
|
<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) */}
|
{/* 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-lg 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">
|
<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">
|
||||||
|
|
||||||
{/* Subtle background glow */}
|
{/* 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 -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" />
|
<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 280px, border-b) */}
|
{/* Top Celebration Animation Panel (Iframe with height 360px, border-b) */}
|
||||||
<div className="relative w-full h-[280px] border-b border-border/40 z-10 pointer-events-none overflow-hidden bg-[#0c1c39]/30">
|
<div className="relative w-full h-[360px] border-b border-border/40 z-10 pointer-events-none overflow-hidden bg-[#0c1c39]/30">
|
||||||
<iframe
|
<iframe
|
||||||
src={`/streak-animation.html?streak=${streak}`}
|
src={`/streak-animation.html?streak=${streak}`}
|
||||||
className="w-full h-full border-none"
|
className="w-full h-full border-none"
|
||||||
|
|||||||
Reference in New Issue
Block a user