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

Refactor streak modal into a single card with top border-b iframe animation and bottom greetings, daily check-in Snapchat-like streak update/reset logic

Browse Source
This commit is contained in:
ectasy663
2026-07-10 14:29:34 +05:30
parent 96cf5f6dc1
commit 89c704c02c
5 changed files with 109 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -44,52 +44,76 @@ export function StreakOnboardingModal() {
setIsOpen(false);
};
return (
<div className="fixed inset-0 z-50 flex flex-col items-center justify-end pb-12 bg-black/90 backdrop-blur-lg animate-in fade-in duration-300">
{/* Celebration Animation Canvas & Logo Iframe */}
<iframe
src={`/streak-animation.html?streak=${streak}`}
className="absolute inset-0 w-full h-full border-none pointer-events-none z-10"
title="Streak Celebration"
allowtransparency="true"
/>
// Calculate trial days left
let trialDaysLeft = 0;
if (user.trial_end) {
const end = new Date(user.trial_end);
const now = new Date();
const diffTime = end.getTime() - now.getTime();
trialDaysLeft = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
}
{/* Adaptive Modal Content Card (positioned at the bottom to let the animated logo shine in the center) */}
<div className="bg-background/85 backdrop-blur-md border border-border/60 shadow-[0_0_50px_-15px_rgba(0,240,255,0.1)] rounded-3xl w-full max-w-lg p-6 text-center space-y-4 relative overflow-hidden animate-in zoom-in-95 slide-in-from-bottom-4 duration-300 z-20 pointer-events-auto mx-4">
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-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">
{/* 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" />
{/* Text Greetings */}
<div className="space-y-2">
{streak > 0 ? (
<div className="inline-flex items-center gap-1.5 px-3 py-0.5 bg-orange-500/10 border border-orange-500/20 text-orange-500 text-xs font-extrabold rounded-full tracking-wider uppercase">
<Flame size={12} className="fill-current animate-bounce" /> {streak} Day Streak Active
</div>
) : (
<div className="inline-flex items-center gap-1.5 px-3 py-0.5 bg-blue-500/10 border border-blue-500/20 text-blue-400 text-xs font-extrabold rounded-full tracking-wider uppercase">
<Sparkles size={12} className="animate-spin" style={{ animationDuration: '4s' }} /> Day 1 Awaits
</div>
)}
<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">
{wishMessage}
</p>
{/* Top Celebration Animation Panel (Iframe with height 280px, border-b) */}
<div className="relative w-full h-[280px] border-b border-border/40 z-10 pointer-events-none overflow-hidden bg-[#0c1c39]/30">
<iframe
src={`/streak-animation.html?streak=${streak}`}
className="w-full h-full border-none"
title="Streak Celebration"
allowtransparency="true"
/>
</div>
{/* Action Button */}
<div className="pt-1">
<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"
>
Enter Workspace
</Button>
{/* Bottom Greetings & Action Panel */}
<div className="p-6 text-center space-y-4">
{/* Badge Indicators */}
<div className="flex flex-col items-center gap-2">
{streak > 0 ? (
<div className="inline-flex items-center gap-1.5 px-3 py-0.5 bg-orange-500/10 border border-orange-500/20 text-orange-500 text-xs font-extrabold rounded-full tracking-wider uppercase">
<Flame size={12} className="fill-current animate-bounce" /> {streak} Day Streak Active
</div>
) : (
<div className="inline-flex items-center gap-1.5 px-3 py-0.5 bg-blue-500/10 border border-blue-500/20 text-blue-400 text-xs font-extrabold rounded-full tracking-wider uppercase">
<Sparkles size={12} className="animate-spin" style={{ animationDuration: '4s' }} /> Day 1 Awaits
</div>
)}
{trialDaysLeft > 0 && (
<div className="inline-flex items-center gap-1.5 px-3 py-0.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-semibold rounded-full tracking-wider">
🎁 Free Trial: {trialDaysLeft} {trialDaysLeft === 1 ? "day" : "days"} remaining
</div>
)}
</div>
{/* Greetings Text */}
<div className="space-y-2">
<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">
{wishMessage}
</p>
</div>
{/* Action Button */}
<div className="pt-1">
<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"
>
Enter Workspace
</Button>
</div>
</div>
</div>
</div>

1
src/hooks/useActiveUser.ts
View File

@@ -18,6 +18,7 @@ export interface UserProfile {
longest_streak: number;
active_session_token?: string;
created_at?: string;
trial_end?: string;
}
export const DEFAULT_USER_ID = "b0e17378-864d-439e-8806-708dc48a891b"; // AI Coach