Michilis/LightningLotto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Mobile optimization and UI improvements

Browse Source 
- Add mobile hamburger menu in TopBar with slide-in panel
- Optimize all components for mobile (responsive fonts, spacing, touch targets)
- Add proper viewport meta tags and safe area padding
- Fix /jackpot/next API to return active cycles regardless of scheduled time
- Remove BTC display from jackpot pot (show sats only)
- Add setup/ folder to .gitignore
- Improve mobile UX: 16px inputs (no iOS zoom), 44px touch targets
- Add active states for touch feedback on buttons
This commit is contained in:
Michilis
2025-12-08 15:51:13 +00:00
parent 2fea2dc836
commit dd6b26c524
13 changed files with 432 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
front_end/src/components/DrawAnimation.tsx
View File

@@ -147,17 +147,17 @@ export function DrawAnimation({
</div>
)}
<div className="text-center px-6 max-w-lg">
<div className="text-center px-4 sm:px-6 max-w-lg w-full">
{/* Spinning Phase */}
{(phase === 'spinning' || phase === 'revealing') && (
<>
<div className="text-2xl text-yellow-400 mb-4 animate-pulse">
<div className="text-xl sm:text-2xl text-yellow-400 mb-3 sm:mb-4 animate-pulse">
🎰 Drawing Winner...
</div>
<div className="bg-gray-900 rounded-2xl p-8 border-2 border-yellow-500/50 shadow-2xl shadow-yellow-500/20">
<div className="text-gray-400 text-sm mb-2">Ticket Number</div>
<div className="bg-gray-900 rounded-xl sm:rounded-2xl p-5 sm:p-8 border-2 border-yellow-500/50 shadow-2xl shadow-yellow-500/20">
<div className="text-gray-400 text-xs sm:text-sm mb-2">Ticket Number</div>
<div
className={`text-5xl md:text-6xl font-mono font-bold text-bitcoin-orange ${
className={`text-3xl sm:text-5xl md:text-6xl font-mono font-bold text-bitcoin-orange break-all ${
phase === 'spinning' ? 'animate-number-spin' : ''
}`}
>
@@ -170,26 +170,26 @@ export function DrawAnimation({
{/* Winner Phase */}
{phase === 'winner' && hasWinner && (
<div className="animate-winner-reveal">
<div className="text-4xl mb-4">🎉🏆🎉</div>
<div className="text-3xl md:text-4xl font-bold text-yellow-400 mb-6">
<div className="text-3xl sm:text-4xl mb-3 sm:mb-4">🎉🏆🎉</div>
<div className="text-2xl sm:text-3xl md:text-4xl font-bold text-yellow-400 mb-4 sm:mb-6">
We Have a Winner!
</div>
<div className="bg-gradient-to-br from-yellow-900/60 to-orange-900/60 rounded-2xl p-8 border-2 border-yellow-500 shadow-2xl shadow-yellow-500/30">
<div className="text-gray-300 text-sm mb-1">Winner</div>
<div className="text-3xl md:text-4xl font-bold text-white mb-4">
<div className="bg-gradient-to-br from-yellow-900/60 to-orange-900/60 rounded-xl sm:rounded-2xl p-5 sm:p-8 border-2 border-yellow-500 shadow-2xl shadow-yellow-500/30">
<div className="text-gray-300 text-xs sm:text-sm mb-1">Winner</div>
<div className="text-2xl sm:text-3xl md:text-4xl font-bold text-white mb-3 sm:mb-4 break-all">
{winnerName || 'Anon'}
</div>
<div className="text-gray-300 text-sm mb-1">Winning Ticket</div>
<div className="text-2xl font-mono text-bitcoin-orange mb-4">
<div className="text-gray-300 text-xs sm:text-sm mb-1">Winning Ticket</div>
<div className="text-xl sm:text-2xl font-mono text-bitcoin-orange mb-3 sm:mb-4">
#{winningTicket!.toLocaleString()}
</div>
<div className="text-gray-300 text-sm mb-1">Prize</div>
<div className="text-4xl md:text-5xl font-bold text-green-400">
<div className="text-gray-300 text-xs sm:text-sm mb-1">Prize</div>
<div className="text-3xl sm:text-4xl md:text-5xl font-bold text-green-400">
{potAmount!.toLocaleString()} sats
</div>
</div>
<div className="mt-6 text-gray-400 text-sm animate-pulse">
Click anywhere to continue
<div className="mt-4 sm:mt-6 text-gray-400 text-xs sm:text-sm animate-pulse">
Tap anywhere to continue
</div>
</div>
)}
@@ -197,20 +197,20 @@ export function DrawAnimation({
{/* No Winner Phase (no tickets sold) */}
{phase === 'no-winner' && (
<div className="animate-winner-reveal">
<div className="text-4xl mb-4">😔</div>
<div className="text-2xl md:text-3xl font-bold text-gray-400 mb-6">
<div className="text-3xl sm:text-4xl mb-3 sm:mb-4">😔</div>
<div className="text-xl sm:text-2xl md:text-3xl font-bold text-gray-400 mb-4 sm:mb-6">
No Tickets This Round
</div>
<div className="bg-gray-900 rounded-2xl p-8 border-2 border-gray-600 shadow-2xl">
<div className="text-gray-300 text-lg mb-4">
<div className="bg-gray-900 rounded-xl sm:rounded-2xl p-5 sm:p-8 border-2 border-gray-600 shadow-2xl">
<div className="text-gray-300 text-base sm:text-lg mb-3 sm:mb-4">
No tickets were sold for this draw.
</div>
<div className="text-bitcoin-orange text-xl font-semibold">
<div className="text-bitcoin-orange text-lg sm:text-xl font-semibold">
Next draw starting soon!
</div>
</div>
<div className="mt-6 text-gray-400 text-sm animate-pulse">
Click anywhere to continue
<div className="mt-4 sm:mt-6 text-gray-400 text-xs sm:text-sm animate-pulse">
Tap anywhere to continue
</div>
</div>
)}