208 lines
7.4 KiB
HTML
208 lines
7.4 KiB
HTML
<div class="min-h-screen bg-deep-blue text-text-primary relative">
|
|
<div class="container mx-auto px-4 py-8 sm:py-12">
|
|
<div class="max-w-5xl mx-auto">
|
|
<div class="text-center mb-12 sm:mb-16">
|
|
<h1 class="text-3xl sm:text-4xl lg:text-5xl section-heading mb-2 sm:mb-3">
|
|
Willkommensbonus
|
|
</h1>
|
|
<div class="welcome-bonus">von bis zu €100</div>
|
|
<p class="bonus-description">Fangen Sie an, zu gewinnen!</p>
|
|
|
|
<div class="flex justify-center space-x-4 mt-6">
|
|
@if (authService.isLoggedIn()) {
|
|
<a
|
|
routerLink="/home"
|
|
class="w-full sm:w-auto button-primary px-6 sm:px-8 py-3 shadow-lg"
|
|
>
|
|
Spiele
|
|
</a>
|
|
} @else {
|
|
<button
|
|
(click)="showRegisterForm()"
|
|
class="w-full sm:w-auto button-primary px-6 sm:px-8 py-3 shadow-lg"
|
|
>
|
|
Konto erstellen
|
|
</button>
|
|
<button
|
|
(click)="showLoginForm()"
|
|
class="w-full sm:w-auto bg-slate-700 text-white hover:bg-slate-600 px-6 sm:px-8 py-3 shadow-lg rounded"
|
|
>
|
|
Anmelden
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative mb-16">
|
|
<h2 class="text-xl sm:text-2xl section-heading mb-4 sm:mb-6">Beliebte Spiele</h2>
|
|
<div class="relative group">
|
|
<div class="overflow-hidden rounded-lg">
|
|
<div
|
|
class="slider-container"
|
|
[style.transform]="'translateX(-' + currentSlide * 100 + '%)'"
|
|
>
|
|
<div class="slider-grid">
|
|
<div class="card">
|
|
<div class="game-card-content">
|
|
<h3 class="game-heading-sm">Slots</h3>
|
|
<p class="game-text">Klassische Spielautomaten</p>
|
|
<a
|
|
routerLink="game/slots"
|
|
class="button-primary w-full py-2 inline-block text-center"
|
|
>Jetzt Spielen</a
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="game-card-content">
|
|
<h3 class="game-heading-sm">Plinko</h3>
|
|
<p class="game-text">Spannendes Geschicklichkeitsspiel</p>
|
|
<a
|
|
routerLink="/game/plinko"
|
|
class="button-primary w-full py-2 inline-block text-center"
|
|
>Jetzt Spielen</a
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="hidden lg:block card">
|
|
<div class="game-card-content">
|
|
<h3 class="game-heading-sm">Blackjack</h3>
|
|
<p class="game-text">Klassisches Kartenspiel</p>
|
|
<a
|
|
routerLink="game/blackjack"
|
|
class="button-primary w-full py-2 inline-block text-center"
|
|
>Jetzt Spielen</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slider-grid">
|
|
<div class="card">
|
|
<div class="game-card-content">
|
|
<h3 class="game-heading-sm">Poker</h3>
|
|
<p class="game-text">Texas Hold'em & mehr</p>
|
|
<a
|
|
routerLink="/game/poker"
|
|
class="button-primary w-full py-2 inline-block text-center"
|
|
>Jetzt Spielen</a
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="game-card-content">
|
|
<h3 class="game-heading-sm">Liars Dice</h3>
|
|
<p class="game-text">Würfelspiel mit Strategie</p>
|
|
<a
|
|
routerLink="/game/liars-dice"
|
|
class="button-primary w-full py-2 inline-block text-center"
|
|
>Jetzt Spielen</a
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="hidden lg:block card">
|
|
<div class="game-card-content">
|
|
<h3 class="game-heading-sm">Lootboxen</h3>
|
|
<p class="game-text">Überraschungskisten</p>
|
|
<a
|
|
routerLink="game/lootboxes"
|
|
class="button-primary w-full py-2 inline-block text-center"
|
|
>Jetzt Spielen</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="nav-button left-[-4rem]" (click)="prevSlide()">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-6 w-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M15 19l-7-7 7-7"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button class="nav-button right-[-4rem]" (click)="nextSlide()">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-6 w-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 5l7 7-7 7"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 flex gap-2">
|
|
<button
|
|
*ngFor="let _ of [0, 1]; let i = index"
|
|
[class]="
|
|
'w-2 h-2 rounded-full transition-all duration-300 ' +
|
|
(currentSlide === i ? 'bg-emerald w-4' : 'bg-text-tertiary')
|
|
"
|
|
(click)="goToSlide(i)"
|
|
>
|
|
<span class="sr-only">Slide {{ i + 1 }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6">
|
|
<div class="stat-container">
|
|
<div class="stat-number">50 Mio.€+</div>
|
|
<div class="stat-text">Ausgezahlt</div>
|
|
</div>
|
|
|
|
<div class="stat-container">
|
|
<div class="stat-number">10 Mio.+</div>
|
|
<div class="stat-text">Spiele</div>
|
|
</div>
|
|
|
|
<div class="stat-container">
|
|
<div class="stat-number">24/7</div>
|
|
<div class="stat-text">Support <span class="text-emerald text-xs">*</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if (showLogin() || showRegister()) {
|
|
<div
|
|
class="fixed inset-0 bg-black/50 z-40"
|
|
(click)="hideAuthForms()"
|
|
(keydown.enter)="hideAuthForms()"
|
|
tabindex="0"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
></div>
|
|
<div class="fixed inset-0 flex items-center justify-center z-50 p-4" role="presentation">
|
|
<div class="relative" role="dialog" aria-modal="true">
|
|
@if (showLogin()) {
|
|
<app-login (switchForm)="showRegisterForm()" (closeDialog)="hideAuthForms()"></app-login>
|
|
}
|
|
@if (showRegister()) {
|
|
<app-register
|
|
(switchForm)="showLoginForm()"
|
|
(closeDialog)="hideAuthForms()"
|
|
></app-register>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|