feat(procanvas): full light/dark mode redesign with distinct visual identities
Light mode — Energetic & Clean (Duolingo/fitness app aesthetic): - GlassPanel rebuilt as function component using useTheme; light mode gets solid colored header banners per panel (gold=Showdown, fire=Hot Streak, cyan=Weekly, blue=Stats/Leaderboard, purple=Rewards/Badges) with white text on color; dark mode keeps existing glass panel + accent glow line - Page background: zinc-100/80 so white cards float visually - Event cards (Showdown, Hot Streak, 12 Appointments) promoted to use GlassPanel title+icon props — each gets its own colored identity banner - OperatorCard: soft shadow + amber ring in light mode; stays dark (sports card aesthetic intentional); harsh rgba(0,0,0,0.6) shadow removed - Live Event Banner: vibrant emerald-600→green-700 gradient in light mode replacing the always-dark green-900; softer shadow and border - Log Action buttons: clean bg-white with shadow-sm, removed dark inset shadow that made them look dirty in light mode - Neon/cyan on white fixed: #AAFF00→green-600, #00E5FF→sky-500/sky-600 - EnergyBar tracks: bg-zinc-200 in light, bg-black/60 in dark - Leaderboard, badge cards, reward nodes: all adapted with dark: variants - XP badge in header: bg-zinc-100/border-zinc-200 in light mode - Import useTheme added to support GlassPanel and OperatorCard hooks Dark mode — unchanged; all existing glass panel aesthetics preserved.
This commit is contained in:
Satyam
+182
-161
@@ -5,6 +5,7 @@ import { useAuth } from '../context/AuthContext';
|
||||
import { useMockStore } from '../data/mockStore';
|
||||
import { GamificationProvider, useGamification } from '../context/GamificationContext';
|
||||
import { useGamification as useOldGamification } from '../hooks/useGamification';
|
||||
import { useTheme } from '../context/ThemeContext';
|
||||
import FloatingXPManager from '../components/ProCanvas/gamification/FloatingXPManager';
|
||||
import LevelUpModal from '../components/ProCanvas/gamification/LevelUpModal';
|
||||
import profilePic from '../assets/images/Profile_Pic_1_Agent.png';
|
||||
@@ -104,14 +105,23 @@ const HexLevelBadge = ({ level, color = C.gold, size = 100, mobileSize = 85 }) =
|
||||
|
||||
// Fut-style Player Card
|
||||
const OperatorCard = ({ user, gamestate }) => {
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === 'dark';
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ scale: 0.95, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
className="relative w-[90%] sm:w-full aspect-[2.5/3.8] max-w-[340px] sm:max-w-[400px] mx-auto rounded-[1.5rem] sm:rounded-[2rem] overflow-hidden shadow-[0_20px_40px_rgba(0,0,0,0.6)] sm:shadow-[0_30px_60px_rgba(0,0,0,0.7)] cursor-pointer group"
|
||||
className={`relative w-[90%] sm:w-full aspect-[2.5/3.8] max-w-[340px] sm:max-w-[400px] mx-auto rounded-[1.5rem] sm:rounded-[2rem] overflow-hidden cursor-pointer group
|
||||
${isDark
|
||||
? 'shadow-[0_20px_40px_rgba(0,0,0,0.6)] sm:shadow-[0_30px_60px_rgba(0,0,0,0.7)]'
|
||||
: 'shadow-[0_8px_30px_rgba(0,0,0,0.18)] ring-1 ring-amber-200/60'
|
||||
}`}
|
||||
>
|
||||
{/* Card Background (Elite Gold Theme) */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-zinc-800 via-zinc-900 to-black z-0" />
|
||||
<div className={`absolute inset-0 z-0 ${isDark
|
||||
? 'bg-gradient-to-br from-zinc-800 via-zinc-900 to-black'
|
||||
: 'bg-gradient-to-br from-zinc-800 via-zinc-900 to-black'
|
||||
}`} />
|
||||
|
||||
{/* Glossy overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent opacity-50 z-10 pointer-events-none" style={{ clipPath: 'polygon(0 0, 100% 0, 100% 30%, 0 50%)' }} />
|
||||
@@ -194,33 +204,52 @@ const OperatorCard = ({ user, gamestate }) => {
|
||||
};
|
||||
|
||||
// Sleek Glass Panel (base container for UI)
|
||||
const GlassPanel = ({ children, className = '', accentColor = 'transparent', title, icon: Icon, extra }) => (
|
||||
<div className={`relative rounded-[1.5rem] overflow-hidden backdrop-blur-xl border flex flex-col ${className}`}
|
||||
style={{ backgroundColor: C.glass, borderColor: C.border, boxShadow: '0 12px 40px rgba(0,0,0,0.4)' }}>
|
||||
function GlassPanel({ children, className = '', accentColor = 'transparent', title, icon: Icon, extra }) {
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === 'dark';
|
||||
const hasAccent = accentColor !== 'transparent';
|
||||
|
||||
{/* Subtle accent glow at the top */}
|
||||
{accentColor !== 'transparent' && (
|
||||
<div className="absolute top-0 inset-x-0 h-[2px] opacity-70 shadow-[0_0_20px_3px]" style={{ backgroundColor: accentColor, color: accentColor }} />
|
||||
)}
|
||||
return (
|
||||
<div className={`relative rounded-[1.5rem] overflow-hidden border flex flex-col
|
||||
${isDark
|
||||
? 'bg-zinc-900/70 backdrop-blur-xl border-white/[0.08] shadow-[0_12px_40px_rgba(0,0,0,0.4)]'
|
||||
: 'bg-white border-zinc-200/60 shadow-md'
|
||||
} ${className}`}>
|
||||
|
||||
{/* Header if provided */}
|
||||
{(title || Icon || extra) && (
|
||||
<div className="px-6 py-5 flex items-center justify-between border-b" style={{ borderColor: C.border }}>
|
||||
<div className="flex items-center gap-3">
|
||||
{Icon && <Icon size={24} style={{ color: accentColor !== 'transparent' ? accentColor : '#fff' }} />}
|
||||
<h3 className="font-['Barlow_Condensed'] font-black uppercase tracking-widest text-[#E4E4E5] text-xl">
|
||||
{title}
|
||||
</h3>
|
||||
</div>
|
||||
{extra && <div className="text-lg font-bold">{extra}</div>}
|
||||
{/* Dark mode: subtle accent glow line at top */}
|
||||
{isDark && hasAccent && (
|
||||
<div className="absolute top-0 inset-x-0 h-[2px] opacity-70 shadow-[0_0_20px_3px]"
|
||||
style={{ backgroundColor: accentColor, color: accentColor }} />
|
||||
)}
|
||||
|
||||
{/* Header */}
|
||||
{(title || Icon || extra) && (
|
||||
isDark ? (
|
||||
<div className="px-6 py-4 flex items-center justify-between border-b border-white/[0.08]">
|
||||
<div className="flex items-center gap-3">
|
||||
{Icon && <Icon size={20} style={{ color: hasAccent ? accentColor : undefined }} className="text-zinc-300" />}
|
||||
<h3 className="font-['Barlow_Condensed'] font-bold uppercase tracking-widest text-[#E4E4E5] text-sm">{title}</h3>
|
||||
</div>
|
||||
{extra && <div className="text-lg font-bold text-white/80">{extra}</div>}
|
||||
</div>
|
||||
) : (
|
||||
<div className="px-5 py-3 flex items-center justify-between rounded-t-[1.4rem]"
|
||||
style={{ backgroundColor: hasAccent ? accentColor : '#e4e4e7' }}>
|
||||
<div className="flex items-center gap-2.5">
|
||||
{Icon && <Icon size={18} className="text-white" style={{ opacity: 0.9 }} />}
|
||||
<h3 className="font-['Barlow_Condensed'] font-black uppercase tracking-widest text-white text-sm">{title}</h3>
|
||||
</div>
|
||||
{extra && <div className="text-sm font-bold text-white/90">{extra}</div>}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
||||
<div className="relative z-10 p-6 flex-1 flex flex-col">
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="relative z-10 p-6 flex-1 flex flex-col">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
// Progress Bar (Sleek, bright energy bar)
|
||||
const EnergyBar = ({ current, max, color = C.neon, label }) => {
|
||||
@@ -229,11 +258,11 @@ const EnergyBar = ({ current, max, color = C.neon, label }) => {
|
||||
<div className="w-full">
|
||||
{label && (
|
||||
<div className="flex justify-between items-end mb-2 font-['Barlow_Condensed']">
|
||||
<span className="text-sm font-bold text-white/60 tracking-wider uppercase">{label}</span>
|
||||
<span className="text-xl font-black text-white"><CountUp to={current} /> <span className="text-white/40">/ {max}</span></span>
|
||||
<span className="text-sm font-bold text-zinc-500 dark:text-white/60 tracking-wider uppercase">{label}</span>
|
||||
<span className="text-xl font-black text-zinc-900 dark:text-white"><CountUp to={current} /> <span className="text-zinc-400 dark:text-white/40">/ {max}</span></span>
|
||||
</div>
|
||||
)}
|
||||
<div className="h-3 w-full bg-black/60 rounded-full overflow-hidden shadow-inner border border-white/5">
|
||||
<div className="h-3 w-full bg-zinc-200 dark:bg-black/60 rounded-full overflow-hidden shadow-inner border border-zinc-300 dark:border-white/5">
|
||||
<motion.div
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: `${pct}%` }}
|
||||
@@ -289,27 +318,27 @@ const LogActionModal = ({ actionKey, onClose, gs }) => {
|
||||
{actionKey === 'knock' && (
|
||||
<>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Address / Location</label>
|
||||
<input required type="text" placeholder="e.g. 123 Main St" className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Address / Location</label>
|
||||
<input required type="text" placeholder="e.g. 123 Main St" className="w-full bg-zinc-100 dark:bg-black/50 border border-zinc-300 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Client Name (Optional)</label>
|
||||
<input type="text" placeholder="e.g. John Doe" className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Client Name (Optional)</label>
|
||||
<input type="text" placeholder="e.g. John Doe" className="w-full bg-zinc-100 dark:bg-black/50 border border-zinc-300 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Phone Number (Optional)</label>
|
||||
<input type="tel" placeholder="(555) 123-4567" className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Phone Number (Optional)</label>
|
||||
<input type="tel" placeholder="(555) 123-4567" className="w-full bg-zinc-100 dark:bg-black/50 border border-zinc-300 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Interaction Result</label>
|
||||
<select onChange={(e) => setXpReward(e.target.value === 'Pitched' ? 15 : 10)} className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors">
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Interaction Result</label>
|
||||
<select onChange={(e) => setXpReward(e.target.value === 'Pitched' ? 15 : 10)} className="w-full bg-zinc-100 dark:bg-black/50 border border-zinc-300 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-[#AAFF00] transition-colors">
|
||||
<option value="Not Home">Not Home</option>
|
||||
<option value="Pitched">Pitched / Conversation</option>
|
||||
<option value="Follow Up">Follow Up Needed</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Details / Notes</label>
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Details / Notes</label>
|
||||
<textarea rows="2" placeholder="Brief notes about the home or conversation..." className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors resize-none" />
|
||||
</div>
|
||||
</>
|
||||
@@ -317,33 +346,33 @@ const LogActionModal = ({ actionKey, onClose, gs }) => {
|
||||
{(actionKey === 'lead' || actionKey === 'appt' || actionKey === 'meeting') && (
|
||||
<>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Client / Lead Name</label>
|
||||
<input required type="text" placeholder="e.g. John Doe" className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Client / Lead Name</label>
|
||||
<input required type="text" placeholder="e.g. John Doe" className="w-full bg-zinc-100 dark:bg-black/50 border border-zinc-300 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Phone Number</label>
|
||||
<input type="tel" placeholder="(555) 123-4567" className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Phone Number</label>
|
||||
<input type="tel" placeholder="(555) 123-4567" className="w-full bg-zinc-100 dark:bg-black/50 border border-zinc-300 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Address / Location</label>
|
||||
<input type="text" placeholder="e.g. 123 Main St" className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Address / Location</label>
|
||||
<input type="text" placeholder="e.g. 123 Main St" className="w-full bg-zinc-100 dark:bg-black/50 border border-zinc-300 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-[#AAFF00] transition-colors" />
|
||||
</div>
|
||||
{actionKey === 'appt' && (
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Date</label>
|
||||
<input required type="date" className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors" style={{ colorScheme: 'dark' }} />
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Date</label>
|
||||
<input required type="date" className="w-full bg-zinc-100 dark:bg-black/50 border border-zinc-300 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-[#AAFF00] transition-colors" style={{ colorScheme: 'dark' }} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Time</label>
|
||||
<input required type="time" className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors" style={{ colorScheme: 'dark' }} />
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Time</label>
|
||||
<input required type="time" className="w-full bg-zinc-100 dark:bg-black/50 border border-zinc-300 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-[#AAFF00] transition-colors" style={{ colorScheme: 'dark' }} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(actionKey === 'meeting' || actionKey === 'lead') && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Interaction Type</label>
|
||||
<select className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors">
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Interaction Type</label>
|
||||
<select className="w-full bg-zinc-100 dark:bg-black/50 border border-zinc-300 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-[#AAFF00] transition-colors">
|
||||
<option value="Initial">Initial Contact</option>
|
||||
<option value="Follow Up">Follow Up</option>
|
||||
<option value="Closing">Closing Attempt</option>
|
||||
@@ -351,7 +380,7 @@ const LogActionModal = ({ actionKey, onClose, gs }) => {
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-white/60 uppercase">Details / Notes</label>
|
||||
<label className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest text-zinc-500 dark:text-white/60 uppercase">Details / Notes</label>
|
||||
<textarea rows="2" placeholder="Brief notes..." className="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-[#AAFF00] transition-colors resize-none" />
|
||||
</div>
|
||||
</>
|
||||
@@ -379,7 +408,7 @@ const BadgesModal = ({ onClose, gs }) => (
|
||||
<motion.div initial={{ scale: 0.95, opacity: 0, y: 20 }} animate={{ scale: 1, opacity: 1, y: 0 }}
|
||||
className="relative bg-gradient-to-br from-zinc-900 to-black border border-white/20 p-6 sm:p-8 rounded-[2rem] w-full max-w-4xl max-h-[90vh] overflow-y-auto shadow-[0_30px_60px_rgba(0,0,0,0.8)] flex flex-col gap-6 scrollbar-hide">
|
||||
|
||||
<div className="flex items-center justify-between border-b border-white/10 pb-4 sticky top-0 bg-black/50 backdrop-blur-md z-10 -mx-6 px-6 -mt-6 pt-6">
|
||||
<div className="flex items-center justify-between border-b border-zinc-200 dark:border-white/10 pb-4 sticky top-0 bg-white/90 dark:bg-black/50 backdrop-blur-md z-10 -mx-6 px-6 -mt-6 pt-6">
|
||||
<div>
|
||||
<h3 className="font-['Barlow_Condensed'] font-black uppercase text-3xl text-white tracking-widest leading-none flex items-center gap-3"><Award className="text-[#FFD700]" /> Trophy Room</h3>
|
||||
<span className="text-sm font-bold uppercase tracking-widest text-white/50 mt-1 block">View all unlockable badges and progress</span>
|
||||
@@ -410,29 +439,29 @@ const BadgesModal = ({ onClose, gs }) => (
|
||||
</div>
|
||||
|
||||
{/* Locked */}
|
||||
<div className="bg-zinc-900/50 rounded-xl p-5 border border-white/5 flex flex-col items-center text-center">
|
||||
<div className="absolute top-3 right-3 bg-white/10 text-white/40 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-widest flex items-center gap-1"><Lock size={10} /> Locked</div>
|
||||
<div className="w-20 h-20 rounded-full bg-black/50 flex items-center justify-center mb-4 opacity-40 grayscale">
|
||||
<Star size={40} className="text-white" />
|
||||
<div className="bg-zinc-100 dark:bg-zinc-900/50 rounded-xl p-5 border border-zinc-200 dark:border-white/5 flex flex-col items-center text-center">
|
||||
<div className="absolute top-3 right-3 bg-zinc-200 dark:bg-white/10 text-zinc-400 dark:text-white/40 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-widest flex items-center gap-1"><Lock size={10} /> Locked</div>
|
||||
<div className="w-20 h-20 rounded-full bg-zinc-300 dark:bg-black/50 flex items-center justify-center mb-4 opacity-40 grayscale">
|
||||
<Star size={40} className="text-zinc-500 dark:text-white" />
|
||||
</div>
|
||||
<span className="font-['Barlow_Condensed'] font-black text-xl uppercase tracking-widest text-white/50">Star Closer</span>
|
||||
<p className="text-white/40 text-sm mt-2 mb-4">Set 50 total appointments.</p>
|
||||
<span className="font-['Barlow_Condensed'] font-black text-xl uppercase tracking-widest text-zinc-400 dark:text-white/50">Star Closer</span>
|
||||
<p className="text-zinc-400 dark:text-white/40 text-sm mt-2 mb-4">Set 50 total appointments.</p>
|
||||
<div className="w-full">
|
||||
<div className="flex justify-between text-xs font-bold text-white/40 mb-1 uppercase tracking-widest"><span>Progress</span><span>12 / 50</span></div>
|
||||
<div className="h-2 w-full bg-black/60 rounded-full overflow-hidden"><div className="h-full bg-white/20" style={{ width: '24%' }} /></div>
|
||||
<div className="flex justify-between text-xs font-bold text-zinc-400 dark:text-white/40 mb-1 uppercase tracking-widest"><span>Progress</span><span>12 / 50</span></div>
|
||||
<div className="h-2 w-full bg-zinc-200 dark:bg-black/60 rounded-full overflow-hidden"><div className="h-full bg-zinc-400 dark:bg-white/20" style={{ width: '24%' }} /></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-zinc-900/50 rounded-xl p-5 border border-white/5 flex flex-col items-center text-center">
|
||||
<div className="absolute top-3 right-3 bg-white/10 text-white/40 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-widest flex items-center gap-1"><Lock size={10} /> Locked</div>
|
||||
<div className="w-20 h-20 rounded-full bg-black/50 flex items-center justify-center mb-4 opacity-40 grayscale">
|
||||
<MapIcon size={40} className="text-white" />
|
||||
<div className="bg-zinc-100 dark:bg-zinc-900/50 rounded-xl p-5 border border-zinc-200 dark:border-white/5 flex flex-col items-center text-center">
|
||||
<div className="absolute top-3 right-3 bg-zinc-200 dark:bg-white/10 text-zinc-400 dark:text-white/40 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-widest flex items-center gap-1"><Lock size={10} /> Locked</div>
|
||||
<div className="w-20 h-20 rounded-full bg-zinc-300 dark:bg-black/50 flex items-center justify-center mb-4 opacity-40 grayscale">
|
||||
<MapIcon size={40} className="text-zinc-500 dark:text-white" />
|
||||
</div>
|
||||
<span className="font-['Barlow_Condensed'] font-black text-xl uppercase tracking-widest text-white/50">Map Master</span>
|
||||
<p className="text-white/40 text-sm mt-2 mb-4">Cover 10 different neighborhoods entirely.</p>
|
||||
<span className="font-['Barlow_Condensed'] font-black text-xl uppercase tracking-widest text-zinc-400 dark:text-white/50">Map Master</span>
|
||||
<p className="text-zinc-400 dark:text-white/40 text-sm mt-2 mb-4">Cover 10 different neighborhoods entirely.</p>
|
||||
<div className="w-full">
|
||||
<div className="flex justify-between text-xs font-bold text-white/40 mb-1 uppercase tracking-widest"><span>Progress</span><span>3 / 10</span></div>
|
||||
<div className="h-2 w-full bg-black/60 rounded-full overflow-hidden"><div className="h-full bg-white/20" style={{ width: '30%' }} /></div>
|
||||
<div className="flex justify-between text-xs font-bold text-zinc-400 dark:text-white/40 mb-1 uppercase tracking-widest"><span>Progress</span><span>3 / 10</span></div>
|
||||
<div className="h-2 w-full bg-zinc-200 dark:bg-black/60 rounded-full overflow-hidden"><div className="h-full bg-zinc-400 dark:bg-white/20" style={{ width: '30%' }} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -446,7 +475,7 @@ const RewardsModal = ({ onClose, gs }) => (
|
||||
<motion.div initial={{ scale: 0.95, opacity: 0, y: 20 }} animate={{ scale: 1, opacity: 1, y: 0 }}
|
||||
className="relative bg-gradient-to-br from-zinc-900 to-black border border-white/20 p-6 sm:p-8 rounded-[2rem] w-full max-w-2xl max-h-[90vh] overflow-y-auto shadow-[0_30px_60px_rgba(0,0,0,0.8)] flex flex-col gap-6 scrollbar-hide">
|
||||
|
||||
<div className="flex items-center justify-between border-b border-white/10 pb-4 sticky top-0 bg-black/50 backdrop-blur-md z-10 -mx-6 px-6 -mt-6 pt-6">
|
||||
<div className="flex items-center justify-between border-b border-zinc-200 dark:border-white/10 pb-4 sticky top-0 bg-white/90 dark:bg-black/50 backdrop-blur-md z-10 -mx-6 px-6 -mt-6 pt-6">
|
||||
<div>
|
||||
<h3 className="font-['Barlow_Condensed'] font-black uppercase text-3xl text-white tracking-widest leading-none flex items-center gap-3"><Gift className="text-[#B388FF]" /> Season Rewards</h3>
|
||||
<span className="text-sm font-bold uppercase tracking-widest text-white/50 mt-1 block">Your milestone roadmap for the month</span>
|
||||
@@ -455,7 +484,7 @@ const RewardsModal = ({ onClose, gs }) => (
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4 relative">
|
||||
<div className="absolute left-[24px] top-4 bottom-4 w-1 bg-black/50 rounded-full z-0"><div className="w-full bg-gradient-to-b from-[#B388FF] to-[#00E5FF] shadow-[0_0_15px_rgba(179,136,255,0.8)]" style={{ height: '50%' }} /></div>
|
||||
<div className="absolute left-[24px] top-4 bottom-4 w-1 bg-zinc-200 dark:bg-black/50 rounded-full z-0"><div className="w-full bg-gradient-to-b from-[#B388FF] to-[#00E5FF] shadow-[0_0_15px_rgba(179,136,255,0.8)]" style={{ height: '50%' }} /></div>
|
||||
|
||||
{[
|
||||
{ title: 'Daily Grind', target: 'Reach 1,000 XP', reward: '+400 XP Bonus', done: true, claimable: false },
|
||||
@@ -508,11 +537,11 @@ const ProCanvasContent = () => {
|
||||
const [showRewards, setShowRewards] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#09090b] text-white font-sans selection:bg-[#FFD700]/30 overflow-x-hidden pb-40 relative">
|
||||
<div className="min-h-screen bg-zinc-100/80 dark:bg-[#09090b] text-zinc-900 dark:text-white font-sans selection:bg-[#FFD700]/30 overflow-x-hidden pb-40 relative">
|
||||
|
||||
{/* Ambient Background Glows */}
|
||||
<div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
|
||||
<div className="absolute top-[-20%] left-[-10%] w-[60vw] h-[60vw] bg-[#3B82F6]/10 rounded-full blur-[180px]" />
|
||||
<div className="absolute top-[-20%] left-[-10%] w-[60vw] h-[60vw] bg-[#3B82F6]/5 dark:bg-[#3B82F6]/10 rounded-full blur-[180px]" />
|
||||
<div className="absolute bottom-[-10%] right-[-10%] w-[50vw] h-[50vw] bg-[#FFD700]/5 rounded-full blur-[180px]" />
|
||||
</div>
|
||||
|
||||
@@ -520,25 +549,25 @@ const ProCanvasContent = () => {
|
||||
<LevelUpModal />
|
||||
|
||||
{/* TOP NAVIGATION */}
|
||||
<header className="relative z-40 flex items-center justify-between px-8 py-5 backdrop-blur-3xl border-b border-white/5 bg-zinc-950/60 sticky top-0">
|
||||
<header className="relative z-40 flex items-center justify-between px-8 py-5 backdrop-blur-3xl border-b border-zinc-200 dark:border-white/5 bg-white/90 dark:bg-zinc-950/60 sticky top-0">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-[#FFD700] to-[#FF8C00] flex items-center justify-center shadow-[0_0_25px_rgba(255,215,0,0.3)]">
|
||||
<Flame size={24} className="text-black" fill="currentColor" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="font-['Barlow_Condensed'] font-black text-3xl uppercase tracking-widest leading-none text-white drop-shadow-md">
|
||||
<h1 className="font-['Barlow_Condensed'] font-black text-3xl uppercase tracking-widest leading-none text-zinc-900 dark:text-white drop-shadow-md">
|
||||
LynkedUp <span className="text-[#FFD700]">Pro</span>
|
||||
</h1>
|
||||
<span className="text-xs font-bold text-white/50 tracking-widest uppercase mt-0.5">SEASON 3 ACTIVE</span>
|
||||
<span className="text-xs font-bold text-zinc-500 dark:text-white/50 tracking-widest uppercase mt-0.5">SEASON 3 ACTIVE</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Resource Bar (Like Coins/Points in FUT) */}
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="hidden md:flex items-center bg-black/60 border border-white/10 rounded-full px-6 py-2 shadow-inner">
|
||||
<div className="hidden md:flex items-center bg-zinc-100 dark:bg-black/60 border border-zinc-200 dark:border-white/10 rounded-full px-6 py-2 shadow-sm dark:shadow-inner">
|
||||
<Trophy size={20} className="text-[#FFD700] mr-3" />
|
||||
<span className="font-['Barlow_Condensed'] font-black text-2xl tracking-wider text-white">
|
||||
<CountUp to={gs.xp || 3360} /> <span className="text-white/40 text-sm ml-1">XP</span>
|
||||
<span className="font-['Barlow_Condensed'] font-black text-2xl tracking-wider text-zinc-700 dark:text-white">
|
||||
<CountUp to={gs.xp || 3360} /> <span className="text-zinc-400 dark:text-white/40 text-sm ml-1">XP</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-14 h-14 rounded-full p-1 bg-gradient-to-b from-[#FFD700] to-transparent cursor-pointer shadow-lg hover:scale-105 transition-transform">
|
||||
@@ -558,21 +587,21 @@ const ProCanvasContent = () => {
|
||||
<OperatorCard user={mockDbUser} gamestate={gs} />
|
||||
|
||||
{/* Quick Stat Bar (Detailed XP/Streak) */}
|
||||
<GlassPanel className="py-6" accentColor={C.blue}>
|
||||
<GlassPanel title="Season Stats" icon={TrendingUp} accentColor={C.blue}>
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Detailed XP Progress */}
|
||||
<div className="w-full">
|
||||
<div className="flex justify-between items-end mb-2 font-['Barlow_Condensed']">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-bold text-white/60 tracking-wider uppercase">XP Progress</span>
|
||||
<span className="text-xs font-bold text-[#AAFF00] tracking-widest uppercase mt-0.5">Next: {gs.nextLevelTitle || 'Field Trooper'}</span>
|
||||
<span className="text-sm font-bold text-zinc-500 dark:text-white/60 tracking-wider uppercase">XP Progress</span>
|
||||
<span className="text-xs font-bold text-green-600 dark:text-[#AAFF00] tracking-widest uppercase mt-0.5">Next: {gs.nextLevelTitle || 'Field Trooper'}</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-2xl font-black text-white"><CountUp to={gs.xp || 3360} /> <span className="text-white/40 text-lg">/ {4800}</span></span>
|
||||
<span className="text-xs font-bold text-[#00E5FF] tracking-widest uppercase mt-0.5">{4800 - (gs.xp || 3360)} XP TO NEXT LEVEL</span>
|
||||
<span className="text-2xl font-black text-zinc-600 dark:text-white"><CountUp to={gs.xp || 3360} /> <span className="text-zinc-400 dark:text-white/40 text-lg">/ {4800}</span></span>
|
||||
<span className="text-xs font-bold text-sky-500 dark:text-[#00E5FF] tracking-widest uppercase mt-0.5">{4800 - (gs.xp || 3360)} XP TO NEXT LEVEL</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-4 w-full bg-black/60 rounded-full overflow-hidden shadow-inner border border-white/5">
|
||||
<div className="h-4 w-full bg-zinc-200 dark:bg-black/60 rounded-full overflow-hidden shadow-inner border border-zinc-300 dark:border-white/5">
|
||||
<motion.div
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: `${Math.min(((gs.xp || 3360) / 4800) * 100, 100)}%` }}
|
||||
@@ -588,10 +617,10 @@ const ProCanvasContent = () => {
|
||||
{/* Streak Flow */}
|
||||
<div className="w-full">
|
||||
<div className="flex justify-between items-end mb-2 font-['Barlow_Condensed']">
|
||||
<span className="text-sm font-bold text-white/60 tracking-wider uppercase">Streak Flow</span>
|
||||
<span className="text-2xl font-black text-white"><CountUp to={gs.streak || 12} /> <span className="text-white/40 text-lg">/ 30</span></span>
|
||||
<span className="text-sm font-bold text-zinc-500 dark:text-white/60 tracking-wider uppercase">Streak Flow</span>
|
||||
<span className="text-2xl font-black text-zinc-600 dark:text-white"><CountUp to={gs.streak || 12} /> <span className="text-zinc-400 dark:text-white/40 text-lg">/ 30</span></span>
|
||||
</div>
|
||||
<div className="h-4 w-full bg-black/60 rounded-full overflow-hidden shadow-inner border border-white/5">
|
||||
<div className="h-4 w-full bg-zinc-200 dark:bg-black/60 rounded-full overflow-hidden shadow-inner border border-zinc-300 dark:border-white/5">
|
||||
<motion.div
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: `${Math.min(((gs.streak || 12) / 30) * 100, 100)}%` }}
|
||||
@@ -613,10 +642,10 @@ const ProCanvasContent = () => {
|
||||
<motion.button key={key}
|
||||
whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}
|
||||
onClick={() => setLogAction(key)}
|
||||
className="flex flex-col items-center justify-center p-5 rounded-2xl bg-black/40 border border-white/5 hover:bg-white/5 transition-all gap-3 relative overflow-hidden group shadow-[inset_0_0_20px_rgba(0,0,0,0.5)]">
|
||||
className="flex flex-col items-center justify-center p-5 rounded-2xl bg-white dark:bg-black/40 border border-zinc-200 dark:border-white/5 hover:bg-zinc-50 dark:hover:bg-white/5 transition-all gap-3 relative overflow-hidden group shadow-sm dark:shadow-[inset_0_0_20px_rgba(0,0,0,0.5)]">
|
||||
<div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t opacity-0 group-hover:opacity-30 transition-opacity" style={{ backgroundImage: `linear-gradient(to top, ${color}, transparent)` }} />
|
||||
<I size={28} style={{ color }} />
|
||||
<span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-[#E4E4E5] group-hover:text-white">{label}</span>
|
||||
<span className="font-['Barlow_Condensed'] font-bold text-xs uppercase tracking-widest text-zinc-400 dark:text-[#E4E4E5] group-hover:text-zinc-600 dark:group-hover:text-white">{label}</span>
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
@@ -626,7 +655,7 @@ const ProCanvasContent = () => {
|
||||
<GlassPanel title="Daily Missions" icon={Zap} accentColor={C.neon}>
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Weekly Challenge */}
|
||||
<div className="bg-black/30 p-4 rounded-xl border border-white/5">
|
||||
<div className="bg-zinc-100 dark:bg-black/30 p-4 rounded-xl border border-zinc-200 dark:border-white/5">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Trophy size={16} className="text-[#FFD700]" />
|
||||
<span className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest uppercase text-[#FFD700]">Weekly Challenge</span>
|
||||
@@ -637,8 +666,8 @@ const ProCanvasContent = () => {
|
||||
{/* Daily Quests List */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Zap size={16} className="text-[#AAFF00]" />
|
||||
<span className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest uppercase text-[#AAFF00]">Daily Quests</span>
|
||||
<Zap size={16} className="text-green-500 dark:text-[#AAFF00]" />
|
||||
<span className="font-['Barlow_Condensed'] font-bold text-sm tracking-widest uppercase text-green-600 dark:text-[#AAFF00]">Daily Quests</span>
|
||||
</div>
|
||||
<EnergyBar current={gs.dailyQuests?.knocks?.current || 18} max={20} color={C.blue} label="Door Knocks" />
|
||||
<EnergyBar current={gs.dailyQuests?.leads?.current || 4} max={5} color={C.neon} label="New Leads" />
|
||||
@@ -662,12 +691,12 @@ const ProCanvasContent = () => {
|
||||
{/* HERO LIVE EVENT BANNER (Today's Mission) */}
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.01 }}
|
||||
className="relative w-full rounded-[2rem] overflow-hidden cursor-pointer shadow-[0_20px_50px_rgba(0,0,0,0.6)] group border border-white/10"
|
||||
className="relative w-full rounded-[2rem] overflow-hidden cursor-pointer shadow-[0_8px_30px_rgba(0,0,0,0.15)] dark:shadow-[0_20px_50px_rgba(0,0,0,0.6)] group border border-emerald-600/30 dark:border-white/10"
|
||||
onClick={() => navigate('/emp/fa/maps')}
|
||||
>
|
||||
{/* Event Background Image/Gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-green-900 via-[#1A2E1A] to-zinc-900 z-0" />
|
||||
<div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-30 mix-blend-overlay pointer-events-none z-0" />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-emerald-600 via-green-700 to-emerald-800 dark:from-green-900 dark:via-[#1A2E1A] dark:to-zinc-900 z-0" />
|
||||
<div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10 dark:opacity-30 mix-blend-overlay pointer-events-none z-0" />
|
||||
|
||||
<div className="relative z-10 p-8 sm:p-10 flex flex-col sm:flex-row items-start sm:items-center justify-between min-h-[180px] gap-8">
|
||||
<div className="flex flex-col text-center sm:text-left">
|
||||
@@ -697,65 +726,57 @@ const ProCanvasContent = () => {
|
||||
{/* THREE GRID: Showdown, Streak, Challenge */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{/* Showdown Event Card */}
|
||||
<GlassPanel accentColor={C.gold}>
|
||||
<div className="absolute top-0 right-0 p-6 opacity-10"><Trophy size={100} fill={C.gold} /></div>
|
||||
<span className="font-['Barlow_Condensed'] font-bold text-xs text-white/50 tracking-widest uppercase mb-2 block">Leaderboard Event</span>
|
||||
<h4 className="font-['Barlow_Condensed'] font-black text-3xl uppercase tracking-wide text-white mb-auto relative z-10">Showdown</h4>
|
||||
|
||||
<div className="mt-8 flex items-end justify-between relative z-10">
|
||||
<GlassPanel title="Showdown" icon={Trophy} accentColor={C.gold}>
|
||||
<div className="absolute top-0 right-0 p-6 opacity-5 dark:opacity-10"><Trophy size={100} fill={C.gold} /></div>
|
||||
<span className="font-['Barlow_Condensed'] font-bold text-xs text-zinc-400 dark:text-white/50 tracking-widest uppercase mb-3 block">Leaderboard Event</span>
|
||||
<div className="mt-2 flex items-end justify-between relative z-10">
|
||||
<div>
|
||||
<span className="block font-['Barlow_Condensed'] font-black italic text-5xl text-[#FFD700] leading-none drop-shadow-md">1ST</span>
|
||||
<span className="text-sm font-bold text-white/70 uppercase tracking-widest">18 Leads Today</span>
|
||||
<span className="text-sm font-bold text-zinc-400 dark:text-white/70 uppercase tracking-widest mt-1 block">18 Leads Today</span>
|
||||
</div>
|
||||
<div className="bg-[#FFD700]/20 text-[#FFD700] border border-[#FFD700]/50 font-['Barlow_Condensed'] font-black px-3 py-1.5 rounded-lg text-lg shadow-[0_0_15px_rgba(255,215,0,0.2)]">+250 XP</div>
|
||||
<div className="bg-[#FFD700]/20 text-[#ca9a04] dark:text-[#FFD700] border border-[#FFD700]/40 font-['Barlow_Condensed'] font-black px-3 py-1.5 rounded-lg text-lg">+250 XP</div>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
|
||||
{/* Streak Event Card */}
|
||||
<GlassPanel accentColor={C.fire}>
|
||||
<div className="absolute top-0 right-0 p-6 opacity-10"><Flame size={100} fill={C.fire} /></div>
|
||||
<span className="font-['Barlow_Condensed'] font-bold text-xs text-white/50 tracking-widest uppercase mb-2 block">Consistency Tracker</span>
|
||||
<h4 className="font-['Barlow_Condensed'] font-black text-3xl uppercase tracking-wide text-white mb-auto relative z-10">Hot Streak</h4>
|
||||
|
||||
<div className="mt-8 flex items-end justify-between relative z-10">
|
||||
<GlassPanel title="Hot Streak" icon={Flame} accentColor={C.fire}>
|
||||
<div className="absolute top-0 right-0 p-6 opacity-5 dark:opacity-10"><Flame size={100} fill={C.fire} /></div>
|
||||
<span className="font-['Barlow_Condensed'] font-bold text-xs text-zinc-400 dark:text-white/50 tracking-widest uppercase mb-3 block">Consistency Tracker</span>
|
||||
<div className="mt-2 flex items-end justify-between relative z-10">
|
||||
<div className="flex flex-col items-center">
|
||||
{/* The animated numbering user requested */}
|
||||
<motion.span
|
||||
animate={{ scale: [1, 1.05, 1], textShadow: ["0 0 10px rgba(255,69,0,0.5)", "0 0 20px rgba(255,69,0,0.8)", "0 0 10px rgba(255,69,0,0.5)"] }}
|
||||
animate={{ scale: [1, 1.05, 1] }}
|
||||
transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
|
||||
className="block font-['Barlow_Condensed'] font-black italic text-6xl text-[#FF4500] leading-none drop-shadow-lg ml-2 origin-bottom">
|
||||
className="block font-['Barlow_Condensed'] font-black italic text-6xl text-[#FF4500] leading-none ml-2 origin-bottom">
|
||||
<CountUp to={gs.streak || 12} />
|
||||
</motion.span>
|
||||
<span className="text-sm font-bold text-white/70 uppercase tracking-widest mt-1">Days Row</span>
|
||||
<span className="text-sm font-bold text-zinc-400 dark:text-white/70 uppercase tracking-widest mt-1">Days Row</span>
|
||||
</div>
|
||||
<div className="bg-[#4CAF50]/20 text-[#4CAF50] border border-[#4CAF50]/50 font-['Barlow_Condensed'] font-black px-3 py-1.5 rounded-lg text-lg shadow-[0_0_15px_rgba(76,175,80,0.2)]">+50 XP</div>
|
||||
<div className="bg-[#4CAF50]/20 text-[#2e7d32] dark:text-[#4CAF50] border border-[#4CAF50]/40 font-['Barlow_Condensed'] font-black px-3 py-1.5 rounded-lg text-lg">+50 XP</div>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
|
||||
{/* Weekly Challenge Card */}
|
||||
<GlassPanel accentColor={C.cyan} className="md:col-span-2 lg:col-span-1">
|
||||
<div className="absolute top-0 right-0 p-6 opacity-10"><Star size={100} fill={C.cyan} /></div>
|
||||
<span className="font-['Barlow_Condensed'] font-bold text-xs text-white/50 tracking-widest uppercase mb-2 block">Weekly Objective</span>
|
||||
<h4 className="font-['Barlow_Condensed'] font-black text-2xl uppercase tracking-wide text-white mb-auto relative z-10 leading-tight">
|
||||
12 Appointments
|
||||
</h4>
|
||||
<GlassPanel title="12 Appointments" icon={Star} accentColor={C.cyan} className="md:col-span-2 lg:col-span-1">
|
||||
<div className="absolute top-0 right-0 p-6 opacity-5 dark:opacity-10"><Star size={100} fill={C.cyan} /></div>
|
||||
<span className="font-['Barlow_Condensed'] font-bold text-xs text-zinc-400 dark:text-white/50 tracking-widest uppercase mb-3 block">Weekly Objective</span>
|
||||
|
||||
<div className="mt-8 w-full relative z-10">
|
||||
<EnergyBar current={3} max={12} color={C.cyan} />
|
||||
<div className="flex justify-end mt-4">
|
||||
<div className="bg-[#00E5FF]/20 text-[#00E5FF] border border-[#00E5FF]/50 font-['Barlow_Condensed'] font-black px-3 py-1.5 rounded-lg text-lg shadow-[0_0_15px_rgba(0,229,255,0.2)]">+300 XP</div>
|
||||
<div className="bg-[#00E5FF]/20 text-sky-600 dark:text-[#00E5FF] border border-[#00E5FF]/40 font-['Barlow_Condensed'] font-black px-3 py-1.5 rounded-lg text-lg">+300 XP</div>
|
||||
</div>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
|
||||
{/* SEASON PASS / REWARD PATH (Restored to larger size, scrollable on mobile) */}
|
||||
<GlassPanel className="cursor-pointer hover:border-[#B388FF]/50 transition-colors" title="Rewards & Checkpoints" icon={Gift} accentColor={C.purple} extra={<span className="font-['Barlow_Condensed'] text-xl text-[#B388FF]">48%</span>}>
|
||||
<GlassPanel className="cursor-pointer" title="Rewards & Checkpoints" icon={Gift} accentColor={C.purple} extra={<span className="font-['Barlow_Condensed'] font-black text-sm text-white/90">48% Complete</span>}>
|
||||
<div onClick={() => setShowRewards(true)} className="absolute inset-0 z-20" />
|
||||
<div className="relative w-full py-16 min-h-[220px] overflow-x-auto overflow-y-hidden scrollbar-hide z-10 flex items-center">
|
||||
<div className="min-w-[700px] w-full relative px-4">
|
||||
{/* Track Background */}
|
||||
<div className="absolute top-1/2 left-8 right-8 h-2.5 bg-black/60 rounded-full transform -translate-y-1/2 z-0 border border-white/5" />
|
||||
<div className="absolute top-1/2 left-8 right-8 h-2.5 bg-zinc-200 dark:bg-black/60 rounded-full transform -translate-y-1/2 z-0 border border-zinc-300 dark:border-white/5" />
|
||||
{/* Track Fill */}
|
||||
<div className="absolute top-1/2 left-8 h-2.5 bg-gradient-to-r from-[#B388FF] to-[#00E5FF] rounded-full transform -translate-y-1/2 z-0 shadow-[0_0_20px_rgba(179,136,255,0.7)]" style={{ width: '48%' }} />
|
||||
|
||||
@@ -773,21 +794,21 @@ const ProCanvasContent = () => {
|
||||
return (
|
||||
<div key={i} className="flex flex-col items-center relative group">
|
||||
{/* Node Circle */}
|
||||
<div className={`w-14 h-14 sm:w-16 sm:h-16 rounded-full border-4 flex items-center justify-center transition-all bg-zinc-900
|
||||
${done ? 'border-[#00E5FF] shadow-[0_0_20px_rgba(0,229,255,0.5)]' : active ? 'border-[#B388FF] shadow-[0_0_25px_rgba(179,136,255,0.8)] ring-4 ring-[#B388FF]/30 scale-110' : 'border-white/10'}`}>
|
||||
<div className={`w-14 h-14 sm:w-16 sm:h-16 rounded-full border-4 flex items-center justify-center transition-all bg-white dark:bg-zinc-900
|
||||
${done ? 'border-[#00E5FF] shadow-[0_0_20px_rgba(0,229,255,0.5)]' : active ? 'border-[#B388FF] shadow-[0_0_25px_rgba(179,136,255,0.8)] ring-4 ring-[#B388FF]/30 scale-110' : 'border-zinc-300 dark:border-white/10'}`}>
|
||||
{done ? <CheckCircle size={28} className="text-[#00E5FF]" /> :
|
||||
active ? <Gift size={32} className="text-[#B388FF]" /> :
|
||||
<Lock size={24} className="text-white/30" />}
|
||||
<Lock size={24} className="text-zinc-400 dark:text-white/30" />}
|
||||
</div>
|
||||
{/* Reward Label (floating below) */}
|
||||
<div className="absolute top-[80px] w-max text-center flex flex-col gap-1.5 items-center">
|
||||
<span className={`font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest ${active || done ? 'text-white' : 'text-white/40'}`}>
|
||||
<span className={`font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest ${active || done ? 'text-zinc-500 dark:text-white' : 'text-zinc-400 dark:text-white/40'}`}>
|
||||
{node.title}
|
||||
</span>
|
||||
<div className={`px-2 py-0.5 rounded border font-['Barlow_Condensed'] font-bold text-xs uppercase
|
||||
${done ? 'bg-[#00E5FF]/20 border-[#00E5FF]/50 text-[#00E5FF]' :
|
||||
active ? 'bg-[#B388FF]/20 border-[#B388FF]/50 text-[#B388FF]' :
|
||||
'bg-white/5 border-white/10 text-white/30'}`}>
|
||||
'bg-zinc-100 dark:bg-white/5 border-zinc-300 dark:border-white/10 text-zinc-400 dark:text-white/30'}`}>
|
||||
{node.reward}
|
||||
</div>
|
||||
</div>
|
||||
@@ -804,59 +825,59 @@ const ProCanvasContent = () => {
|
||||
<div onClick={() => setShowBadges(true)} className="absolute inset-0 z-20" />
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4 relative z-10">
|
||||
{/* Badge 1 */}
|
||||
<div className="bg-gradient-to-br from-zinc-800 to-black rounded-xl p-4 border border-[#FF4500]/50 flex flex-col items-center text-center relative overflow-hidden group hover:border-[#FF4500] transition-colors shadow-[0_0_15px_rgba(255,69,0,0.2)]">
|
||||
<div className="bg-zinc-100 dark:bg-gradient-to-br dark:from-zinc-800 dark:to-black rounded-xl p-4 border border-[#FF4500]/50 flex flex-col items-center text-center relative overflow-hidden group hover:border-[#FF4500] transition-colors shadow-[0_0_15px_rgba(255,69,0,0.2)]">
|
||||
<div className="absolute top-2 right-2"><CheckCircle size={14} className="text-[#FF4500]" /></div>
|
||||
<div className="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center mb-3">
|
||||
<div className="w-16 h-16 rounded-full bg-[#FF4500]/10 dark:bg-black/50 flex items-center justify-center mb-3">
|
||||
<Crosshair size={32} className="text-[#FF4500]" />
|
||||
</div>
|
||||
<span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-white">Hot Spot Hunter</span>
|
||||
<span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-zinc-500 dark:text-white">Hot Spot Hunter</span>
|
||||
<span className="font-['Barlow_Condensed'] font-bold text-xs uppercase text-[#FF4500] mt-2">Unlocked</span>
|
||||
</div>
|
||||
{/* Badge 2 */}
|
||||
<div className="bg-gradient-to-br from-zinc-800 to-black rounded-xl p-4 border border-[#FFD700]/50 flex flex-col items-center text-center relative overflow-hidden group hover:border-[#FFD700] transition-colors shadow-[0_0_15px_rgba(255,215,0,0.2)]">
|
||||
<div className="bg-zinc-100 dark:bg-gradient-to-br dark:from-zinc-800 dark:to-black rounded-xl p-4 border border-[#FFD700]/50 flex flex-col items-center text-center relative overflow-hidden group hover:border-[#FFD700] transition-colors shadow-[0_0_15px_rgba(255,215,0,0.2)]">
|
||||
<div className="absolute top-2 right-2"><CheckCircle size={14} className="text-[#FFD700]" /></div>
|
||||
<div className="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center mb-3">
|
||||
<div className="w-16 h-16 rounded-full bg-[#FFD700]/10 dark:bg-black/50 flex items-center justify-center mb-3">
|
||||
<Zap size={32} className="text-[#FFD700]" />
|
||||
</div>
|
||||
<span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-white">Storm Chaser</span>
|
||||
<span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-zinc-500 dark:text-white">Storm Chaser</span>
|
||||
<span className="font-['Barlow_Condensed'] font-bold text-xs uppercase text-[#FFD700] mt-2">Unlocked</span>
|
||||
</div>
|
||||
{/* Badge 3 Locked */}
|
||||
<div className="bg-zinc-900/50 rounded-xl p-4 border border-white/5 flex flex-col items-center text-center opacity-60 grayscale hover:grayscale-0 transition-all">
|
||||
<div className="absolute top-2 right-2"><Lock size={14} className="text-white/30" /></div>
|
||||
<div className="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center mb-3">
|
||||
<Star size={32} className="text-white/40" />
|
||||
<div className="bg-zinc-100 dark:bg-zinc-900/50 rounded-xl p-4 border border-zinc-200 dark:border-white/5 flex flex-col items-center text-center opacity-60 grayscale hover:grayscale-0 transition-all">
|
||||
<div className="absolute top-2 right-2"><Lock size={14} className="text-zinc-400 dark:text-white/30" /></div>
|
||||
<div className="w-16 h-16 rounded-full bg-zinc-200 dark:bg-black/50 flex items-center justify-center mb-3">
|
||||
<Star size={32} className="text-zinc-400 dark:text-white/40" />
|
||||
</div>
|
||||
<span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-white/60">Star Closer</span>
|
||||
<span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-zinc-500 dark:text-white/60">Star Closer</span>
|
||||
</div>
|
||||
{/* Badge 4 Locked */}
|
||||
<div className="bg-zinc-900/50 rounded-xl p-4 border border-white/5 flex flex-col items-center text-center opacity-60 grayscale hover:grayscale-0 transition-all hidden md:flex">
|
||||
<div className="absolute top-2 right-2"><Lock size={14} className="text-white/30" /></div>
|
||||
<div className="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center mb-3">
|
||||
<MapIcon size={32} className="text-white/40" />
|
||||
<div className="bg-zinc-100 dark:bg-zinc-900/50 rounded-xl p-4 border border-zinc-200 dark:border-white/5 flex flex-col items-center text-center opacity-60 grayscale hover:grayscale-0 transition-all hidden md:flex">
|
||||
<div className="absolute top-2 right-2"><Lock size={14} className="text-zinc-400 dark:text-white/30" /></div>
|
||||
<div className="w-16 h-16 rounded-full bg-zinc-200 dark:bg-black/50 flex items-center justify-center mb-3">
|
||||
<MapIcon size={32} className="text-zinc-400 dark:text-white/40" />
|
||||
</div>
|
||||
<span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-white/60">Map Master</span>
|
||||
<span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-zinc-500 dark:text-white/60">Map Master</span>
|
||||
</div>
|
||||
{/* Badge 5 Locked */}
|
||||
<div className="bg-zinc-900/50 rounded-xl p-4 border border-white/5 flex flex-col items-center text-center opacity-60 grayscale hover:grayscale-0 transition-all hidden md:flex">
|
||||
<div className="absolute top-2 right-2"><Lock size={14} className="text-white/30" /></div>
|
||||
<div className="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center mb-3">
|
||||
<Shield size={32} className="text-white/40" />
|
||||
<div className="bg-zinc-100 dark:bg-zinc-900/50 rounded-xl p-4 border border-zinc-200 dark:border-white/5 flex flex-col items-center text-center opacity-60 grayscale hover:grayscale-0 transition-all hidden md:flex">
|
||||
<div className="absolute top-2 right-2"><Lock size={14} className="text-zinc-400 dark:text-white/30" /></div>
|
||||
<div className="w-16 h-16 rounded-full bg-zinc-200 dark:bg-black/50 flex items-center justify-center mb-3">
|
||||
<Shield size={32} className="text-zinc-400 dark:text-white/40" />
|
||||
</div>
|
||||
<span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-white/60">First Knock</span>
|
||||
<span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-widest text-zinc-500 dark:text-white/60">First Knock</span>
|
||||
</div>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
|
||||
{/* Restored: Full Leaderboard List */}
|
||||
<GlassPanel title="Leaderboard" icon={Trophy} accentColor={C.blue} extra={<div className="font-['Barlow_Condensed'] font-black text-xl text-[#AAFF00] flex items-center gap-2"><Calendar size={20} /> Resets in {resetCountdown}</div>}>
|
||||
<GlassPanel title="Leaderboard" icon={Trophy} accentColor={C.blue} extra={<div className="font-['Barlow_Condensed'] font-black text-sm text-white/90 flex items-center gap-1.5"><Calendar size={15} /> Resets in {resetCountdown}</div>}>
|
||||
<div className="flex flex-col gap-2 relative mt-4 overflow-x-auto scrollbar-hide">
|
||||
<div className="min-w-[400px]">
|
||||
{/* Table Header */}
|
||||
<div className="grid grid-cols-[40px_1fr_80px] sm:grid-cols-[50px_1fr_100px] gap-2 sm:gap-4 px-4 sm:px-6 py-2 border-b border-white/10 mb-2">
|
||||
<span className="font-['Barlow_Condensed'] font-bold text-xs sm:text-sm tracking-widest uppercase text-white/40">Rank</span>
|
||||
<span className="font-['Barlow_Condensed'] font-bold text-xs sm:text-sm tracking-widest uppercase text-white/40">Agent</span>
|
||||
<span className="font-['Barlow_Condensed'] font-bold text-xs sm:text-sm tracking-widest uppercase text-white/40 text-right">XP Total</span>
|
||||
<div className="grid grid-cols-[40px_1fr_80px] sm:grid-cols-[50px_1fr_100px] gap-2 sm:gap-4 px-4 sm:px-6 py-2 border-b border-zinc-200 dark:border-white/10 mb-2">
|
||||
<span className="font-['Barlow_Condensed'] font-bold text-xs sm:text-sm tracking-widest uppercase text-zinc-400 dark:text-white/40">Rank</span>
|
||||
<span className="font-['Barlow_Condensed'] font-bold text-xs sm:text-sm tracking-widest uppercase text-zinc-400 dark:text-white/40">Agent</span>
|
||||
<span className="font-['Barlow_Condensed'] font-bold text-xs sm:text-sm tracking-widest uppercase text-zinc-400 dark:text-white/40 text-right">XP Total</span>
|
||||
</div>
|
||||
|
||||
{(gs.leaderboard || []).slice(0, 10).map((row, i) => (
|
||||
@@ -866,7 +887,7 @@ const ProCanvasContent = () => {
|
||||
animate={{ x: 0, opacity: 1, scale: row.isUser ? [1, 1.02, 1] : 1 }}
|
||||
transition={{ delay: i * 0.1, duration: 0.5 }}
|
||||
className={`grid grid-cols-[40px_1fr_80px] sm:grid-cols-[50px_1fr_100px] gap-2 sm:gap-4 items-center px-4 sm:px-6 py-3 sm:py-4 rounded-xl transition-all hover:bg-white/5 relative
|
||||
${row.isUser ? 'bg-[#3B82F6]/10 border border-[#3B82F6]/50 shadow-[0_0_20px_rgba(59,130,246,0.15)] z-10' : 'bg-black/30 border border-white/5 z-0'}`}>
|
||||
${row.isUser ? 'bg-[#3B82F6]/10 border border-[#3B82F6]/50 shadow-[0_0_20px_rgba(59,130,246,0.15)] z-10' : 'bg-zinc-100 dark:bg-black/30 border border-zinc-200 dark:border-white/5 z-0'}`}>
|
||||
|
||||
{row.isUser && (
|
||||
<div className="absolute inset-0 border-2 border-[#3B82F6] rounded-xl opacity-0 animate-[pulse_2s_infinite]" />
|
||||
@@ -886,21 +907,21 @@ const ProCanvasContent = () => {
|
||||
<Trophy size={16} className="text-black" />
|
||||
</div>
|
||||
) : (
|
||||
<span className="font-['Barlow_Condensed'] font-black text-2xl text-white/50">{i + 1}.</span>
|
||||
<span className="font-['Barlow_Condensed'] font-black text-2xl text-zinc-400 dark:text-white/50">{i + 1}.</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-zinc-800 flex items-center justify-center font-bold text-white/80 border border-white/10 shrink-0 text-xs sm:text-base">
|
||||
<div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-zinc-200 dark:bg-zinc-800 flex items-center justify-center font-bold text-zinc-700 dark:text-white/80 border border-zinc-300 dark:border-white/10 shrink-0 text-xs sm:text-base">
|
||||
{row.avatar}
|
||||
</div>
|
||||
<span className={`font-['Barlow_Condensed'] font-black text-lg sm:text-xl tracking-wide ${row.isUser ? 'text-[#3B82F6]' : 'text-white'}`}>
|
||||
<span className={`font-['Barlow_Condensed'] font-black text-lg sm:text-xl tracking-wide ${row.isUser ? 'text-[#3B82F6]' : 'text-zinc-500 dark:text-white'}`}>
|
||||
{row.name}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
<span className={`font-['Barlow_Condensed'] font-black text-xl sm:text-2xl ${row.isUser ? 'text-[#3B82F6]' : 'text-white/80'}`}>
|
||||
<span className={`font-['Barlow_Condensed'] font-black text-xl sm:text-2xl ${row.isUser ? 'text-[#3B82F6]' : 'text-zinc-400 dark:text-white/80'}`}>
|
||||
<CountUp to={row.points} duration={1000} />
|
||||
</span>
|
||||
</div>
|
||||
@@ -914,7 +935,7 @@ const ProCanvasContent = () => {
|
||||
</div>
|
||||
|
||||
{/* FIXED BOTTOM NAVIGATION */}
|
||||
<div className="fixed bottom-0 inset-x-0 h-[80px] sm:h-[100px] bg-zinc-950/90 backdrop-blur-2xl border-t border-white/10 z-50 flex items-center justify-center pointer-events-none">
|
||||
<div className="fixed bottom-0 inset-x-0 h-[80px] sm:h-[100px] bg-white/95 dark:bg-zinc-950/90 backdrop-blur-2xl border-t border-zinc-200 dark:border-white/10 z-50 flex items-center justify-center pointer-events-none">
|
||||
<div className="max-w-[1000px] w-full px-2 sm:px-6 flex items-center justify-between pointer-events-auto">
|
||||
{[
|
||||
{ label: 'Map', icon: MapIcon, active: true },
|
||||
@@ -925,12 +946,12 @@ const ProCanvasContent = () => {
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col items-center justify-center gap-1.5 sm:gap-2 cursor-pointer group px-2 sm:px-6 py-2 sm:py-3 w-1/5">
|
||||
<div className={`relative w-10 h-10 sm:w-14 sm:h-14 rounded-full flex items-center justify-center transition-all duration-300
|
||||
${item.active ? 'bg-[#3B82F6] text-white shadow-[0_0_20px_rgba(59,130,246,0.5)] scale-110' : 'bg-transparent text-white/40 group-hover:bg-white/10 group-hover:text-white/80'}`}>
|
||||
${item.active ? 'bg-[#3B82F6] text-white shadow-[0_0_20px_rgba(59,130,246,0.5)] scale-110' : 'bg-transparent text-zinc-400 dark:text-white/40 group-hover:bg-zinc-100 dark:group-hover:bg-white/10 group-hover:text-zinc-700 dark:group-hover:text-white/80'}`}>
|
||||
<item.icon className="w-5 h-5 sm:w-[26px] sm:h-[26px]" />
|
||||
{item.active && <div className="absolute -bottom-2 sm:-bottom-3 w-1 h-1 sm:w-1.5 sm:h-1.5 rounded-full bg-[#3B82F6] shadow-[0_0_10px_#3B82F6]" />}
|
||||
</div>
|
||||
<span className={`font-['Barlow_Condensed'] font-bold text-[10px] sm:text-xs uppercase tracking-widest transition-colors mt-0.5 sm:mt-1 hidden min-[350px]:block
|
||||
${item.active ? 'text-white' : 'text-white/40 group-hover:text-white/80'}`}>
|
||||
${item.active ? 'text-white' : 'text-zinc-400 dark:text-white/40 group-hover:text-zinc-700 dark:group-hover:text-white/80'}`}>
|
||||
{item.label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user