Increase Share Card logo size and reduce number font size to prevent overflow

This commit is contained in:
2026-09-22 19:36:20 +05:30
parent bf43841da2
commit dab148b942

View File

@@ -61,7 +61,7 @@ export async function GET(req: NextRequest) {
<div style={{ display: 'flex', flexDirection: 'column', width: '880px', height: '100%', justifyContent: 'space-between', zIndex: 10 }}> <div style={{ display: 'flex', flexDirection: 'column', width: '880px', height: '100%', justifyContent: 'space-between', zIndex: 10 }}>
{/* Header */} {/* Header */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
<img src={logoUrl} width={340} height={85} style={{ objectFit: 'contain', marginLeft: '-24px' }} /> <img src={logoUrl} width={450} height={110} style={{ objectFit: 'contain', marginLeft: '-32px' }} />
<div style={{ display: 'flex', alignItems: 'center', background: 'linear-gradient(90deg, rgba(6,182,212,0.15) 0%, rgba(6,182,212,0.05) 100%)', padding: '12px 28px', borderRadius: 100, border: '1px solid rgba(6,182,212,0.3)' }}> <div style={{ display: 'flex', alignItems: 'center', background: 'linear-gradient(90deg, rgba(6,182,212,0.15) 0%, rgba(6,182,212,0.05) 100%)', padding: '12px 28px', borderRadius: 100, border: '1px solid rgba(6,182,212,0.3)' }}>
<div style={{ width: 12, height: 12, borderRadius: 6, backgroundColor: '#06b6d4', marginRight: 12 }} /> <div style={{ width: 12, height: 12, borderRadius: 6, backgroundColor: '#06b6d4', marginRight: 12 }} />
@@ -76,22 +76,22 @@ export async function GET(req: NextRequest) {
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)', borderRadius: 36, border: '1px solid rgba(255,255,255,0.1)' }}> <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)', borderRadius: 36, border: '1px solid rgba(255,255,255,0.1)' }}>
<span style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Today's Score</span> <span style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Today's Score</span>
<span style={{ fontSize: 76, fontWeight: 900, color: '#facc15', letterSpacing: '-0.02em' }}>{score}</span> <span style={{ fontSize: 64, fontWeight: 900, color: '#facc15', letterSpacing: '-0.02em' }}>{score}</span>
</div> </div>
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)', borderRadius: 36, border: '1px solid rgba(255,255,255,0.1)' }}> <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)', borderRadius: 36, border: '1px solid rgba(255,255,255,0.1)' }}>
<span style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Accuracy</span> <span style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Accuracy</span>
<span style={{ fontSize: 76, fontWeight: 900, color: '#34d399', letterSpacing: '-0.02em' }}>{accuracy}</span> <span style={{ fontSize: 64, fontWeight: 900, color: '#34d399', letterSpacing: '-0.02em' }}>{accuracy}</span>
</div> </div>
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)', borderRadius: 36, border: '1px solid rgba(255,255,255,0.1)' }}> <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)', borderRadius: 36, border: '1px solid rgba(255,255,255,0.1)' }}>
<span style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Qs Attempted</span> <span style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>Qs Attempted</span>
<span style={{ fontSize: 76, fontWeight: 900, color: '#38bdf8', letterSpacing: '-0.02em' }}>{qs}</span> <span style={{ fontSize: 64, fontWeight: 900, color: '#38bdf8', letterSpacing: '-0.02em' }}>{qs}</span>
</div> </div>
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)', borderRadius: 36, border: '1px solid rgba(255,255,255,0.1)' }}> <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 48, width: '424px', height: '240px', background: 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)', borderRadius: 36, border: '1px solid rgba(255,255,255,0.1)' }}>
<span style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>City Rank</span> <span style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 800, letterSpacing: '0.15em', marginBottom: 12 }}>City Rank</span>
<span style={{ fontSize: 76, fontWeight: 900, color: '#a78bfa', letterSpacing: '-0.02em' }}>{rank}</span> <span style={{ fontSize: 64, fontWeight: 900, color: '#a78bfa', letterSpacing: '-0.02em' }}>{rank}</span>
</div> </div>
</div> </div>