355 lines
16 KiB
HTML
355 lines
16 KiB
HTML
<div class="min-h-screen bg-gradient-to-br from-slate-950 via-black to-slate-950 relative">
|
||
<div class="fixed top-0 left-0 right-0 z-50 transform-gpu">
|
||
<div
|
||
class="bg-gradient-to-r from-emerald-600 to-emerald-500 text-white transition-all duration-500 ease-in-out"
|
||
[class.py-1]="isScrolled"
|
||
[class.py-1.5]="!isScrolled"
|
||
>
|
||
<div class="container mx-auto px-4 overflow-hidden">
|
||
<app-winner-ticker [winners]="(recentWinners$ | async) ?? []"></app-winner-ticker>
|
||
</div>
|
||
</div>
|
||
|
||
<nav
|
||
class="w-full transition-all duration-500 ease-in-out transform-gpu will-change-transform"
|
||
[ngClass]="{
|
||
'bg-black/80 backdrop-blur-xl border-b border-white/5 py-3': isScrolled,
|
||
'bg-transparent py-4': !isScrolled,
|
||
}"
|
||
>
|
||
<div class="container mx-auto px-6">
|
||
<div
|
||
class="flex justify-between items-center transition-all duration-500 ease-in-out transform-gpu"
|
||
>
|
||
<div class="flex items-center gap-6">
|
||
<div
|
||
class="text-3xl font-black tracking-tight bg-gradient-to-r from-white via-yellow-200 to-white bg-clip-text text-transparent animate-shimmer will-change-transform"
|
||
>
|
||
TRUSTWORTHY
|
||
</div>
|
||
<div
|
||
class="px-3 py-1 bg-emerald-500/10 rounded-full border border-emerald-500/20 transition-all duration-300 hover:bg-emerald-500/20"
|
||
>
|
||
<span class="text-emerald-400 text-sm font-medium">Licensed & Regulated</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-8 items-center">
|
||
<div class="flex flex-col items-end">
|
||
<div class="animate-pulseGlow will-change-transform">
|
||
<span class="text-emerald-400 font-bold"
|
||
>🔥 {{ onlinePlayers$ | async | number }} Players Online</span
|
||
>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-white/60 text-sm"
|
||
>{{ totalWinnersToday | number }} Winners Today</span
|
||
>
|
||
<span class="text-emerald-500 text-xs font-semibold">(78.9% Win Rate)</span>
|
||
</div>
|
||
</div>
|
||
<app-animated-button (buttonClick)="claimBonus()"> START PLAYING </app-animated-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
|
||
<div class="h-[100px] transition-all duration-500 ease-in-out"></div>
|
||
|
||
<div class="relative overflow-hidden">
|
||
<div #particleContainer class="absolute inset-0 pointer-events-none"></div>
|
||
|
||
<div
|
||
class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(76,29,149,0.1),rgba(0,0,0,0))] animate-[pulse_4s_ease-in-out_infinite]"
|
||
>
|
||
<div class="absolute inset-0">
|
||
<div class="absolute opacity-20 animate-float" style="top: 10%; left: 5%">🎰</div>
|
||
<div class="absolute opacity-20 animate-float delay-100" style="top: 30%; left: 15%">
|
||
💎
|
||
</div>
|
||
<div class="absolute opacity-20 animate-float delay-200" style="top: 50%; left: 25%">
|
||
7️⃣
|
||
</div>
|
||
<div class="absolute opacity-20 animate-float delay-300" style="top: 70%; left: 35%">
|
||
🃏
|
||
</div>
|
||
<div class="absolute opacity-20 animate-float delay-400" style="top: 20%; right: 15%">
|
||
💰
|
||
</div>
|
||
<div class="absolute opacity-20 animate-float delay-500" style="top: 40%; right: 25%">
|
||
🎲
|
||
</div>
|
||
<div class="absolute opacity-20 animate-float" style="top: 60%; right: 35%">👑</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div #heroSection class="relative z-10">
|
||
<div class="container mx-auto px-6 pt-16">
|
||
<div class="text-center mb-12">
|
||
<div
|
||
class="inline-block bg-black/40 backdrop-blur-xl rounded-2xl px-10 py-6 border border-white/5 animate-tiltAndGlow"
|
||
>
|
||
<div class="text-lg text-white/80 mb-3 font-medium">🏆 MEGA JACKPOT GROWING</div>
|
||
<div class="flex items-center justify-center gap-2">
|
||
<span
|
||
#jackpotCounter
|
||
class="text-6xl font-bold text-white tracking-tight animate-pulseGlow drop-shadow-[0_0_8px_rgba(34,197,94,0.3)]"
|
||
>
|
||
€{{ currentJackpot$ | async | number }}
|
||
</span>
|
||
<span class="text-emerald-500 text-lg animate-bounce">↑</span>
|
||
</div>
|
||
<div class="text-sm text-white/60 mt-3 font-medium">Must drop before €2,000,000</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mb-20 relative max-w-4xl mx-auto">
|
||
<div
|
||
class="absolute -inset-1 bg-gradient-to-r from-emerald-600/20 via-emerald-500/20 to-emerald-600/20 rounded-2xl blur-2xl animate-morphBackground"
|
||
></div>
|
||
<div class="relative bg-black/40 backdrop-blur-xl p-10 rounded-2xl border border-white/5">
|
||
<div
|
||
class="inline-block px-4 py-1.5 bg-gradient-to-r from-emerald-500 to-emerald-400 rounded-full text-black text-sm mb-6 font-bold tracking-wide animate-pulseGlow"
|
||
>
|
||
EXCLUSIVE VIP OFFER
|
||
</div>
|
||
<h1 class="text-7xl font-black text-white tracking-tight mb-8">
|
||
<div class="text-3xl text-white/80 mb-4 font-bold">START WITH</div>
|
||
<div
|
||
class="text-8xl bg-gradient-to-r from-white via-yellow-200 to-white bg-clip-text text-transparent animate-shimmer"
|
||
>
|
||
€10,000
|
||
</div>
|
||
<div class="text-2xl text-emerald-400 mt-4 font-bold">GUARANTEED WINNINGS*</div>
|
||
</h1>
|
||
|
||
<div class="mb-10">
|
||
<div class="text-4xl font-bold text-white mb-3 tracking-tight">
|
||
1000% FIRST DEPOSIT MATCH
|
||
<div class="text-xl text-yellow-400 mt-2">+ 1000 FREE SPINS</div>
|
||
</div>
|
||
<div
|
||
class="text-lg text-red-400 font-semibold animate-pulseGlow drop-shadow-[0_0_8px_rgba(239,68,68,0.3)]"
|
||
>
|
||
<span>⚠️ Offer expires in: {{ timeLeft$ | async }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-center">
|
||
<app-animated-button variant="primary" size="large" (buttonClick)="claimBonus()">
|
||
CLAIM YOUR €10,000 NOW
|
||
</app-animated-button>
|
||
</div>
|
||
|
||
<div class="flex justify-center gap-12 mt-10">
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-emerald-500">✓</span>
|
||
<span class="text-white/60 font-medium">Instant Withdrawals</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-emerald-500">✓</span>
|
||
<span class="text-white/60 font-medium">24/7 VIP Support</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-emerald-500">✓</span>
|
||
<span class="text-white/60 font-medium">100% Win Guarantee*</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="bg-black/40 backdrop-blur-xl rounded-xl p-4 mb-16 overflow-hidden border border-white/5"
|
||
>
|
||
<app-winner-ticker [winners]="(recentWinners$ | async) ?? []"></app-winner-ticker>
|
||
</div>
|
||
|
||
<div #gamesGrid class="mb-20">
|
||
<h2 class="text-4xl font-black text-white mb-12 text-center tracking-tight">
|
||
<span
|
||
class="bg-gradient-to-r from-white via-yellow-200 to-white bg-clip-text text-transparent animate-shimmer"
|
||
>
|
||
TOP WINNING GAMES
|
||
</span>
|
||
</h2>
|
||
<div class="grid md:grid-cols-3 gap-8">
|
||
<app-game-card
|
||
*ngFor="let game of games$ | async"
|
||
[game]="game"
|
||
(play)="playNow(game.id)"
|
||
>
|
||
</app-game-card>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-4 gap-8 text-center mb-20">
|
||
<div
|
||
class="bg-black/40 backdrop-blur-xl p-8 rounded-2xl border border-white/5 transition-all duration-500 hover:scale-[1.02] hover:border-emerald-500/20 hover:shadow-2xl hover:shadow-emerald-500/10 animate-elasticScale"
|
||
>
|
||
<div class="text-4xl mb-6 animate-float">💎</div>
|
||
<h3 class="text-xl font-bold text-white mb-3 tracking-tight">Elite VIP Status</h3>
|
||
<p class="text-white/60 font-medium">Up to €50,000 monthly rewards</p>
|
||
</div>
|
||
<div
|
||
class="bg-black/40 backdrop-blur-xl p-8 rounded-2xl border border-white/5 transition-all duration-500 hover:scale-[1.02] hover:border-emerald-500/20 hover:shadow-2xl hover:shadow-emerald-500/10 animate-elasticScale delay-100"
|
||
>
|
||
<div class="text-4xl mb-6 animate-float delay-100">⚡️</div>
|
||
<h3 class="text-xl font-bold text-white mb-3 tracking-tight">Instant Cashouts</h3>
|
||
<p class="text-white/60 font-medium">Get paid in 5 minutes!</p>
|
||
</div>
|
||
<div
|
||
class="bg-black/40 backdrop-blur-xl p-8 rounded-2xl border border-white/5 transition-all duration-500 hover:scale-[1.02] hover:border-emerald-500/20 hover:shadow-2xl hover:shadow-emerald-500/10 animate-elasticScale delay-200"
|
||
>
|
||
<div class="text-4xl mb-6 animate-float delay-200">🎁</div>
|
||
<h3 class="text-xl font-bold text-white mb-3 tracking-tight">Daily Rewards</h3>
|
||
<p class="text-white/60 font-medium">Win up to €5,000 daily!</p>
|
||
</div>
|
||
<div
|
||
class="bg-black/40 backdrop-blur-xl p-8 rounded-2xl border border-white/5 transition-all duration-500 hover:scale-[1.02] hover:border-emerald-500/20 hover:shadow-2xl hover:shadow-emerald-500/10 animate-elasticScale delay-300"
|
||
>
|
||
<div class="text-4xl mb-6 animate-float delay-300">🏆</div>
|
||
<h3 class="text-xl font-bold text-white mb-3 tracking-tight">99.9% Win Rate*</h3>
|
||
<p class="text-white/60 font-medium">Highest odds in the industry!</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Fine Print -->
|
||
<div class="text-center text-xs text-white/40 max-w-2xl mx-auto mb-20">
|
||
*Terms and conditions apply. Guaranteed winnings based on maximum bonus utilization. Win
|
||
rate calculated on minimum bets. Withdrawal restrictions and wagering requirements apply.
|
||
Please gamble responsibly.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
*ngIf="showPopup$ | async"
|
||
[@fadeSlide]
|
||
class="fixed inset-0 z-50 flex items-center justify-center px-4"
|
||
>
|
||
<div
|
||
class="absolute inset-0 bg-black/90 backdrop-blur-md animate-backdropBlur"
|
||
(click)="closePopup()"
|
||
></div>
|
||
<div
|
||
*ngIf="currentPopup$ | async as popup"
|
||
class="relative bg-black/80 rounded-2xl p-10 border border-white/10 max-w-lg w-full transform animate-bounceAndFade"
|
||
>
|
||
<div
|
||
class="absolute -inset-1 bg-gradient-to-r from-emerald-600/20 via-emerald-500/20 to-emerald-600/20 rounded-2xl blur-2xl opacity-50 animate-glow"
|
||
></div>
|
||
<div class="relative">
|
||
<button
|
||
(click)="closePopup(); onButtonClick($event)"
|
||
class="absolute -top-2 -right-2 w-8 h-8 flex items-center justify-center bg-black/80 rounded-full border border-white/10 text-white/40 hover:text-white/60 hover:scale-110 hover:border-white/20 transition-all duration-300 group"
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
class="h-4 w-4 transform group-hover:rotate-90 transition-transform duration-300"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
>
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"
|
||
d="M6 18L18 6M6 6l12 12"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
<h2 class="text-3xl font-black text-white mb-4 tracking-tight animate-slideDown">
|
||
{{ popup.title }}
|
||
</h2>
|
||
<p class="text-xl text-white/80 mb-3 font-medium animate-slideDown delay-100">
|
||
{{ popup.message }}
|
||
</p>
|
||
<p
|
||
*ngIf="popup.subMessage"
|
||
class="text-sm text-emerald-400 mb-8 font-medium animate-slideDown delay-200"
|
||
>
|
||
{{ popup.subMessage }}
|
||
</p>
|
||
<img
|
||
*ngIf="popup.imageUrl"
|
||
[src]="popup.imageUrl"
|
||
[alt]="popup.title"
|
||
class="w-full h-48 object-cover rounded-xl mb-8 animate-scaleIn"
|
||
/>
|
||
<div class="flex justify-between items-center animate-slideUp delay-300">
|
||
<button
|
||
(click)="closePopup(); onButtonClick($event)"
|
||
class="text-white/40 hover:text-white/60 transition-all duration-300 font-medium hover:transform hover:translate-x-1"
|
||
>
|
||
Maybe later
|
||
</button>
|
||
<app-animated-button (buttonClick)="claimBonus()">
|
||
{{ popup.cta }}
|
||
</app-animated-button>
|
||
</div>
|
||
<div
|
||
*ngIf="popup.expires"
|
||
class="mt-6 text-sm text-red-400 font-semibold animate-slideUp delay-400 drop-shadow-[0_0_8px_rgba(239,68,68,0.3)]"
|
||
>
|
||
<span class="animate-pulseGlow inline-block">⏰ Expires in: {{ popup.expires }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
*ngIf="nearMiss"
|
||
[@fadeSlide]
|
||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/95 backdrop-blur-xl"
|
||
>
|
||
<div class="absolute inset-0 animate-backdropBlur" (click)="nearMiss = false"></div>
|
||
<div
|
||
class="relative bg-black/80 rounded-2xl p-10 border border-white/10 max-w-lg w-full transform animate-bounceAndFade"
|
||
>
|
||
<button
|
||
(click)="nearMiss = false; onButtonClick($event)"
|
||
class="absolute -top-2 -right-2 w-8 h-8 flex items-center justify-center bg-black/80 rounded-full border border-white/10 text-white/40 hover:text-white/60 hover:scale-110 hover:border-white/20 transition-all duration-300 group"
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
class="h-4 w-4 transform group-hover:rotate-90 transition-transform duration-300"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
>
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"
|
||
d="M6 18L18 6M6 6l12 12"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
<div class="text-center">
|
||
<div
|
||
class="text-7xl mb-6 animate-spinAndBounce drop-shadow-[0_0_15px_rgba(234,179,8,0.5)]"
|
||
>
|
||
🎰
|
||
</div>
|
||
<h2 class="text-4xl font-black text-white mb-4 tracking-tight animate-slideDown">
|
||
SO CLOSE!
|
||
</h2>
|
||
<p class="text-xl text-white/80 mb-6 font-medium animate-slideDown delay-100">
|
||
Just one more spin to win the MEGA JACKPOT!
|
||
</p>
|
||
<div class="text-emerald-400 font-semibold mb-8 animate-slideDown delay-200">
|
||
<span class="animate-pulseGlow inline-block">
|
||
Hot streak detected - Increased win probability activated!
|
||
</span>
|
||
</div>
|
||
<app-animated-button
|
||
variant="primary"
|
||
size="normal"
|
||
(buttonClick)="playNow('mega-fortune')"
|
||
>
|
||
SPIN AGAIN
|
||
</app-animated-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|