Fix OG image, CBT filters, syllabus split, and trial duration
This commit is contained in:
@@ -12,7 +12,9 @@ export async function GET(req: NextRequest) {
|
||||
const accuracy = searchParams.get('accuracy') || '0';
|
||||
const name = searchParams.get('name') || 'Student';
|
||||
|
||||
// Renders a high-end, minimalist graphic using pure Tailwind and React
|
||||
const target = searchParams.get('target') || 'JEE';
|
||||
const plan = searchParams.get('plan') || 'Free';
|
||||
|
||||
return new ImageResponse(
|
||||
(
|
||||
<div
|
||||
@@ -21,38 +23,60 @@ export async function GET(req: NextRequest) {
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#0a0a0a', // Deep premium dark mode
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: '#0a0a0a',
|
||||
color: '#ffffff',
|
||||
fontFamily: 'sans-serif',
|
||||
padding: '40px',
|
||||
border: '8px solid #333',
|
||||
padding: '60px',
|
||||
border: '8px solid #222',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', fontSize: 60, fontWeight: 800, marginBottom: 20, letterSpacing: '-0.05em' }}>
|
||||
PragatiVeer
|
||||
</div>
|
||||
<div style={{ display: 'flex', fontSize: 32, color: '#a3a3a3', marginBottom: 60 }}>
|
||||
{name}'s JEE Preparation Progress
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', width: '100%', justifyContent: 'space-around' }}>
|
||||
{/* Streak Metric */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||||
<span style={{ fontSize: 80, fontWeight: 900, color: '#f59e0b' }}>{streak}🔥</span>
|
||||
<span style={{ fontSize: 24, color: '#d4d4d4', marginTop: 10 }}>Day Streak</span>
|
||||
{/* Header */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', width: '100%' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<div style={{ width: 40, height: 40, backgroundColor: '#06b6d4', borderRadius: 8, marginRight: 16 }} />
|
||||
<span style={{ fontSize: 32, fontWeight: 900, letterSpacing: '0.05em' }}>PRAGATIVEER</span>
|
||||
</div>
|
||||
<div style={{ fontSize: 20, fontWeight: 700, color: '#06b6d4', backgroundColor: 'rgba(6,182,212,0.1)', padding: '8px 16px', borderRadius: 20, border: '1px solid rgba(6,182,212,0.2)' }}>
|
||||
Weekly Report
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%', marginTop: 20 }}>
|
||||
<h3 style={{ fontSize: 48, fontWeight: 900, marginBottom: 40 }}>You crushed it this week!</h3>
|
||||
|
||||
{/* Accuracy Metric */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||||
<span style={{ fontSize: 80, fontWeight: 900, color: '#10b981' }}>{accuracy}%</span>
|
||||
<span style={{ fontSize: 24, color: '#d4d4d4', marginTop: 10 }}>Top Accuracy</span>
|
||||
{/* 2x2 Grid */}
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', width: '600px', justifyContent: 'center', gap: '24px' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '280px', height: '160px', backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 24, border: '1px solid rgba(255,255,255,0.1)' }}>
|
||||
<span style={{ fontSize: 48, fontWeight: 900, color: '#f59e0b', marginBottom: 8 }}>{streak}</span>
|
||||
<span style={{ fontSize: 16, color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.05em' }}>Day Streak</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '280px', height: '160px', backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 24, border: '1px solid rgba(255,255,255,0.1)' }}>
|
||||
<span style={{ fontSize: 48, fontWeight: 900, color: '#4ade80', marginBottom: 8 }}>{accuracy}%</span>
|
||||
<span style={{ fontSize: 16, color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.05em' }}>Accuracy</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '280px', height: '160px', backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 24, border: '1px solid rgba(255,255,255,0.1)' }}>
|
||||
<span style={{ fontSize: 48, fontWeight: 900, color: '#22d3ee', marginBottom: 8 }}>4</span>
|
||||
<span style={{ fontSize: 16, color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.05em' }}>Tests Taken</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '280px', height: '160px', backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 24, border: '1px solid rgba(255,255,255,0.1)' }}>
|
||||
<span style={{ fontSize: 48, fontWeight: 900, color: '#c084fc', marginBottom: 8 }}>78%</span>
|
||||
<span style={{ fontSize: 16, color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.05em' }}>Avg Score</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', position: 'absolute', bottom: 40, fontSize: 20, color: '#525252' }}>
|
||||
Join me on pragativeer.com/invite
|
||||
{/* Footer */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', width: '100%', marginTop: 20 }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{ fontSize: 24, fontWeight: 800 }}>{name}</div>
|
||||
<div style={{ fontSize: 18, color: 'rgba(255,255,255,0.7)', marginTop: 8 }}>{plan} Plan</div>
|
||||
<div style={{ fontSize: 18, color: '#06b6d4', marginTop: 4 }}>{target} Aspirant</div>
|
||||
</div>
|
||||
<div style={{ fontSize: 18, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.05em' }}>
|
||||
contact@pragativeer.com
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user