Merge pull request 'feat(landing): add landing component (CAS-8)' (!10) from task/landing-page into main
Reviewed-on: https://git.simonis.lol/projects/casino/pulls/10 Reviewed-by: Huy <ptran@noreply@simonis.lol> Reviewed-by: jank1619 <jan@kjan.email>
This commit is contained in:
Hop In, I Have Puppies AND WiFi
commit
0878ed46db
15 changed files with 558 additions and 42 deletions
|
|
@ -14,6 +14,10 @@
|
|||
"@angular/platform-browser": "^18.2.0",
|
||||
"@angular/platform-browser-dynamic": "^18.2.0",
|
||||
"@angular/router": "^18.2.0",
|
||||
"@fortawesome/angular-fontawesome": "^1.0.0",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.7.2",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.7.2",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.7.2",
|
||||
"@stripe/stripe-js": "^5.6.0",
|
||||
"@tailwindcss/postcss": "^4.0.3",
|
||||
"keycloak-angular": "^16.0.1",
|
||||
|
|
@ -373,6 +377,16 @@
|
|||
|
||||
"@eslint/plugin-kit": ["@eslint/plugin-kit@0.2.5", "", { "dependencies": { "@eslint/core": "^0.10.0", "levn": "^0.4.1" } }, "sha512-lB05FkqEdUg2AA0xEbUz0SnkXT1LcCTa438W4IWTUh4hdOnVbQyOJ81OrDXsJk/LSiJHubgGEFoR5EHq1NsH1A=="],
|
||||
|
||||
"@fortawesome/angular-fontawesome": ["@fortawesome/angular-fontawesome@1.0.0", "", { "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.7.1", "tslib": "^2.8.1" }, "peerDependencies": { "@angular/core": "^19.0.0" } }, "sha512-EC2fYuXIuw2ld1kzJi+zysWus6OeGGfLQtbh0hW9zyyq5aBo8ZJkcJKBsVQ8E6Mg7nHyTWaXn+sdcXTPDWz+UQ=="],
|
||||
|
||||
"@fortawesome/fontawesome-common-types": ["@fortawesome/fontawesome-common-types@6.7.2", "", {}, "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg=="],
|
||||
|
||||
"@fortawesome/fontawesome-svg-core": ["@fortawesome/fontawesome-svg-core@6.7.2", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "6.7.2" } }, "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA=="],
|
||||
|
||||
"@fortawesome/free-brands-svg-icons": ["@fortawesome/free-brands-svg-icons@6.7.2", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "6.7.2" } }, "sha512-zu0evbcRTgjKfrr77/2XX+bU+kuGfjm0LbajJHVIgBWNIDzrhpRxiCPNT8DW5AdmSsq7Mcf9D1bH0aSeSUSM+Q=="],
|
||||
|
||||
"@fortawesome/free-solid-svg-icons": ["@fortawesome/free-solid-svg-icons@6.7.2", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "6.7.2" } }, "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA=="],
|
||||
|
||||
"@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
|
||||
|
||||
"@humanfs/node": ["@humanfs/node@0.16.6", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.3.0" } }, "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw=="],
|
||||
|
|
|
|||
|
|
@ -23,6 +23,10 @@
|
|||
"@angular/platform-browser": "^18.2.0",
|
||||
"@angular/platform-browser-dynamic": "^18.2.0",
|
||||
"@angular/router": "^18.2.0",
|
||||
"@fortawesome/angular-fontawesome": "^1.0.0",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.7.2",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.7.2",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.7.2",
|
||||
"@stripe/stripe-js": "^5.6.0",
|
||||
"@tailwindcss/postcss": "^4.0.3",
|
||||
"keycloak-angular": "^16.0.1",
|
||||
|
|
@ -49,4 +53,4 @@
|
|||
"typescript": "~5.5.2",
|
||||
"typescript-eslint": "8.23.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,6 @@
|
|||
<router-outlet></router-outlet>
|
||||
<div class="min-h-screen flex flex-col">
|
||||
<main class="flex-grow">
|
||||
<router-outlet></router-outlet>
|
||||
</main>
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,12 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
|
|||
import { CommonModule } from '@angular/common';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import { KeycloakAngularModule } from 'keycloak-angular';
|
||||
import { FooterComponent } from './shared/components/footer/footer.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterOutlet, KeycloakAngularModule],
|
||||
imports: [CommonModule, RouterOutlet, KeycloakAngularModule, FooterComponent],
|
||||
providers: [],
|
||||
templateUrl: './app.component.html',
|
||||
styleUrl: './app.component.css',
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import {
|
|||
provideExperimentalZonelessChangeDetection,
|
||||
} from '@angular/core';
|
||||
import { provideRouter } from '@angular/router';
|
||||
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
||||
|
||||
import { routes } from './app.routes';
|
||||
import {
|
||||
|
|
@ -38,6 +39,7 @@ export const appConfig: ApplicationConfig = {
|
|||
providers: [
|
||||
provideRouter(routes),
|
||||
KeycloakAngularModule,
|
||||
FontAwesomeModule,
|
||||
{
|
||||
provide: APP_INITIALIZER,
|
||||
useFactory: initializeApp,
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import { environment } from '../../../environments/environment';
|
|||
import { NgIf } from '@angular/common';
|
||||
import {
|
||||
MatDialogActions,
|
||||
MatDialogClose,
|
||||
MatDialogContent,
|
||||
MatDialogRef,
|
||||
MatDialogTitle,
|
||||
|
|
@ -23,7 +22,6 @@ import { MatButton } from '@angular/material/button';
|
|||
MatDialogTitle,
|
||||
MatDialogContent,
|
||||
MatDialogActions,
|
||||
MatDialogClose,
|
||||
MatButton,
|
||||
],
|
||||
templateUrl: './deposit.component.html',
|
||||
|
|
|
|||
|
|
@ -1,14 +1,4 @@
|
|||
<nav class="bg-black border-b border-amber-600/30 sticky top-0 z-50">
|
||||
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
|
||||
<!-- logo goes here -->
|
||||
<div class="flex gap-4">
|
||||
<button class="btn-primary" (click)="logout()">Ausloggen</button>
|
||||
</div>
|
||||
<div>
|
||||
<button (click)="openDialog()">Einzahlen</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<app-navbar></app-navbar>
|
||||
|
||||
<div class="grid grid-cols-3">
|
||||
<div class="w-1/3 h-1/4">
|
||||
|
|
|
|||
|
|
@ -3,10 +3,11 @@ import { KeycloakService } from 'keycloak-angular';
|
|||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { DepositComponent } from '../deposit/deposit.component';
|
||||
|
||||
import { NavbarComponent } from '../../shared/components/navbar/navbar.component';
|
||||
@Component({
|
||||
selector: 'app-homepage',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
imports: [NavbarComponent],
|
||||
templateUrl: './home.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,5 +1,142 @@
|
|||
@if (isLoggedIn) {
|
||||
<button routerLink="/home">Zur Homepage</button>
|
||||
} @else {
|
||||
<button (click)="login()">Einloggen</button>
|
||||
}
|
||||
<app-navbar></app-navbar>
|
||||
|
||||
<div class="min-h-screen bg-deep-blue !text-text-primary">
|
||||
<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">200% bis zu 500€</div>
|
||||
<p class="bonus-description">+ 200 Freispiele</p>
|
||||
|
||||
<button class="w-full sm:w-auto button-base px-6 sm:px-8 py-3 shadow-lg">
|
||||
Bonus Sichern
|
||||
</button>
|
||||
</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">Slots</h3>
|
||||
<p class="game-text">Klassische Spielautomaten</p>
|
||||
<button class="button-base w-full py-2">Jetzt Spielen</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="game-card-content">
|
||||
<h3 class="game-heading">Plinko</h3>
|
||||
<p class="game-text">Spannendes Geschicklichkeitsspiel</p>
|
||||
<button class="button-base w-full py-2">Jetzt Spielen</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden lg:block card">
|
||||
<div class="game-card-content">
|
||||
<h3 class="game-heading">Blackjack</h3>
|
||||
<p class="game-text">Klassisches Kartenspiel</p>
|
||||
<button class="button-base w-full py-2">Jetzt Spielen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slider-grid">
|
||||
<div class="card">
|
||||
<div class="game-card-content">
|
||||
<h3 class="game-heading">Poker</h3>
|
||||
<p class="game-text">Texas Hold'em & mehr</p>
|
||||
<button class="button-base w-full py-2">Jetzt Spielen</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="game-card-content">
|
||||
<h3 class="game-heading">Liars Dice</h3>
|
||||
<p class="game-text">Würfelspiel mit Strategie</p>
|
||||
<button class="button-base w-full py-2">Jetzt Spielen</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden lg:block card">
|
||||
<div class="game-card-content">
|
||||
<h3 class="game-heading">Lootboxen</h3>
|
||||
<p class="game-text">Überraschungskisten</p>
|
||||
<button class="button-base w-full py-2">Jetzt Spielen</button>
|
||||
</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"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<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"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,55 @@
|
|||
import { Component, inject } from '@angular/core';
|
||||
import { KeycloakService } from 'keycloak-angular';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { ChangeDetectionStrategy, Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { NavbarComponent } from '../../shared/components/navbar/navbar.component';
|
||||
import { NgFor } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing',
|
||||
selector: 'app-landing-page',
|
||||
standalone: true,
|
||||
imports: [RouterLink],
|
||||
imports: [NavbarComponent, NgFor],
|
||||
templateUrl: './landing.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class LandingComponent {
|
||||
private keycloakService: KeycloakService = inject(KeycloakService);
|
||||
export class LandingComponent implements OnInit, OnDestroy {
|
||||
currentSlide = 0;
|
||||
private autoplayInterval: ReturnType<typeof setInterval> | undefined;
|
||||
|
||||
public isLoggedIn = this.keycloakService.isLoggedIn();
|
||||
ngOnInit() {
|
||||
this.startAutoplay();
|
||||
}
|
||||
|
||||
public login() {
|
||||
const baseUrl = window.location.origin;
|
||||
ngOnDestroy() {
|
||||
this.stopAutoplay();
|
||||
}
|
||||
|
||||
this.keycloakService.login({ redirectUri: `${baseUrl}/home` });
|
||||
prevSlide() {
|
||||
this.currentSlide = this.currentSlide === 0 ? 1 : 0;
|
||||
this.resetAutoplay();
|
||||
}
|
||||
|
||||
nextSlide() {
|
||||
this.currentSlide = this.currentSlide === 1 ? 0 : 1;
|
||||
this.resetAutoplay();
|
||||
}
|
||||
|
||||
goToSlide(index: number) {
|
||||
this.currentSlide = index;
|
||||
this.resetAutoplay();
|
||||
}
|
||||
|
||||
private startAutoplay() {
|
||||
this.autoplayInterval = setInterval(() => {
|
||||
this.nextSlide();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
private stopAutoplay() {
|
||||
if (this.autoplayInterval) {
|
||||
clearInterval(this.autoplayInterval);
|
||||
}
|
||||
}
|
||||
|
||||
private resetAutoplay() {
|
||||
this.stopAutoplay();
|
||||
this.startAutoplay();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,80 @@
|
|||
<footer class="bg-deep-blue mt-auto">
|
||||
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8">
|
||||
<div class="footer-section">
|
||||
<h3 class="footer-heading">Casino Spiele</h3>
|
||||
<ul class="space-y-3">
|
||||
<li>
|
||||
<a routerLink="/games" class="footer-link">Slots</a>
|
||||
</li>
|
||||
<li>
|
||||
<a routerLink="/games" class="footer-link">Plinko</a>
|
||||
</li>
|
||||
<li>
|
||||
<a routerLink="/games" class="footer-link">Blackjack</a>
|
||||
</li>
|
||||
<li>
|
||||
<a routerLink="/games" class="footer-link">Poker</a>
|
||||
</li>
|
||||
<li>
|
||||
<a routerLink="/games" class="footer-link">Liars Dice</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3 class="footer-heading">Andere Spiele</h3>
|
||||
<ul class="space-y-3">
|
||||
<li>
|
||||
<a routerLink="/games" class="footer-link">Lootboxen</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-span-2 lg:col-span-2">
|
||||
<h3 class="footer-heading">Einzahlungsmöglichkeiten</h3>
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<div class="footer-payment-method">
|
||||
<fa-icon [icon]="faMoneyBillTransfer" class="footer-payment-icon"></fa-icon>
|
||||
<span class="footer-payment-text">Sofort</span>
|
||||
</div>
|
||||
<div class="footer-payment-method">
|
||||
<fa-icon [icon]="faPaypal" class="footer-payment-icon"></fa-icon>
|
||||
<span class="footer-payment-text">Paypal</span>
|
||||
</div>
|
||||
<div class="footer-payment-method">
|
||||
<fa-icon [icon]="faCreditCard" class="footer-payment-icon"></fa-icon>
|
||||
<span class="footer-payment-text">Kreditkarte</span>
|
||||
</div>
|
||||
<div class="footer-payment-method">
|
||||
<fa-icon [icon]="faWallet" class="footer-payment-icon"></fa-icon>
|
||||
<span class="footer-payment-text">Klara</span>
|
||||
</div>
|
||||
<div class="footer-payment-method">
|
||||
<fa-icon [icon]="faMoneyBillTransfer" class="footer-payment-icon"></fa-icon>
|
||||
<span class="footer-payment-text">Sepa</span>
|
||||
</div>
|
||||
<div class="footer-payment-method">
|
||||
<fa-icon [icon]="faGooglePay" class="footer-payment-icon"></fa-icon>
|
||||
<span class="footer-payment-text">Google Pay</span>
|
||||
</div>
|
||||
<div class="footer-payment-method">
|
||||
<fa-icon [icon]="faApplePay" class="footer-payment-icon"></fa-icon>
|
||||
<span class="footer-payment-text">Apple Pay</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 pt-8 border-t border-deep-blue-light">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center">
|
||||
<div class="footer-copyright">
|
||||
<span class="footer-disclaimer">
|
||||
<span class="text-emerald">*</span> nicht vorhanden.
|
||||
</span>
|
||||
<br />
|
||||
© {{ currentYear }} Trustworthy Casino. Keine Rechte vorbehalten.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
||||
import { faMoneyBillTransfer, faCreditCard, faWallet } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faPaypal, faGooglePay, faApplePay } from '@fortawesome/free-brands-svg-icons';
|
||||
|
||||
@Component({
|
||||
selector: 'app-footer',
|
||||
standalone: true,
|
||||
templateUrl: './footer.component.html',
|
||||
imports: [FontAwesomeModule],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class FooterComponent {
|
||||
currentYear: number = new Date().getFullYear();
|
||||
|
||||
faPaypal = faPaypal;
|
||||
faCreditCard = faCreditCard;
|
||||
faMoneyBillTransfer = faMoneyBillTransfer;
|
||||
faWallet = faWallet;
|
||||
faGooglePay = faGooglePay;
|
||||
faApplePay = faApplePay;
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<nav class="bg-deep-blue border-b border-deep-blue-contrast">
|
||||
<div class="max-w-full mx-auto px-4">
|
||||
<div class="flex justify-between items-center h-14">
|
||||
<div class="flex items-center space-x-6">
|
||||
<a routerLink="/" class="nav-brand">
|
||||
<span>Trustworthy Casino</span>
|
||||
</a>
|
||||
<div class="hidden md:flex items-center space-x-1">
|
||||
<a routerLink="/games" class="nav-link">Games</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden md:flex items-center space-x-4">
|
||||
@if (!isLoggedIn) {
|
||||
<button (click)="login()" class="button-base px-4 py-1.5">Login</button>
|
||||
}
|
||||
@if (isLoggedIn) {
|
||||
<button (click)="logout()" class="button-base px-4 py-1.5">Logout</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="md:hidden">
|
||||
<button (click)="toggleMenu()" class="nav-toggle">
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
[class.hidden]="isMenuOpen"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
[class.hidden]="!isMenuOpen"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div [class]="isMenuOpen ? 'block' : 'hidden'" class="md:hidden">
|
||||
<div class="nav-mobile-menu">
|
||||
<a routerLink="/games" class="nav-mobile-link">Games</a>
|
||||
<div class="pt-2 space-y-2">
|
||||
@if (!isLoggedIn) {
|
||||
<button (click)="login()" class="button-base w-full py-1.5">Login</button>
|
||||
}
|
||||
@if (isLoggedIn) {
|
||||
<button (click)="logout()" class="button-base w-full py-1.5">Logout</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { KeycloakService } from 'keycloak-angular';
|
||||
|
||||
@Component({
|
||||
selector: 'app-navbar',
|
||||
templateUrl: './navbar.component.html',
|
||||
standalone: true,
|
||||
imports: [RouterModule],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class NavbarComponent {
|
||||
isMenuOpen = false;
|
||||
private keycloakService: KeycloakService = inject(KeycloakService);
|
||||
|
||||
isLoggedIn = this.keycloakService.isLoggedIn();
|
||||
|
||||
login() {
|
||||
try {
|
||||
const baseUrl = window.location.origin;
|
||||
this.keycloakService.login({ redirectUri: `${baseUrl}/home` });
|
||||
} catch (error) {
|
||||
console.error('Login failed:', error);
|
||||
}
|
||||
}
|
||||
|
||||
logout() {
|
||||
this.keycloakService.logout();
|
||||
}
|
||||
|
||||
toggleMenu() {
|
||||
this.isMenuOpen = !this.isMenuOpen;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +1,143 @@
|
|||
@import 'tailwindcss';
|
||||
|
||||
@theme {
|
||||
--color-deep-blue: #0f212e;
|
||||
--color-deep-blue-light: #1a2c38;
|
||||
--color-deep-blue-contrast: #1b2c3b;
|
||||
--color-light-blue: #1475e1;
|
||||
--color-deep-blue: #0a1219;
|
||||
--color-deep-blue-light: #121e27;
|
||||
--color-deep-blue-contrast: #1a2835;
|
||||
|
||||
--color-emerald: #10b981;
|
||||
--color-emerald-dark: #059669;
|
||||
--color-emerald-light: #34d399;
|
||||
|
||||
--color-text-primary: #ffffff;
|
||||
--color-text-secondary: #94a3b8;
|
||||
--color-text-tertiary: #64748b;
|
||||
|
||||
--color-accent-yellow: #fbbf24;
|
||||
--color-accent-red: #ef4444;
|
||||
--color-accent-purple: #8b5cf6;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-deep-blue text-gray-100;
|
||||
@apply !bg-deep-blue !text-text-primary h-full;
|
||||
}
|
||||
|
||||
button,
|
||||
a {
|
||||
@apply cursor-pointer active:scale-95 !text-text-primary transition-all duration-200;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300;
|
||||
}
|
||||
|
||||
.button-base {
|
||||
@apply bg-emerald hover:bg-emerald-dark !text-text-primary transition-all duration-300 active:scale-95 rounded;
|
||||
}
|
||||
|
||||
.game-card-content {
|
||||
@apply p-4;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
@apply hidden lg:block absolute top-1/2 -translate-y-1/2 bg-deep-blue-contrast hover:bg-deep-blue-contrast/90 !text-text-primary p-3 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 shadow-lg hover:scale-110;
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
@apply flex transition-transform duration-500 ease-out;
|
||||
}
|
||||
|
||||
.slider-grid {
|
||||
@apply min-w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4;
|
||||
}
|
||||
|
||||
.welcome-bonus {
|
||||
@apply !text-4xl sm:!text-5xl lg:!text-7xl !font-extrabold !text-emerald-light mb-3 sm:mb-4;
|
||||
}
|
||||
|
||||
.bonus-description {
|
||||
@apply !text-text-secondary !text-base sm:!text-lg mb-6 sm:mb-8;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
@apply !font-bold !text-text-primary;
|
||||
}
|
||||
|
||||
.game-heading {
|
||||
@apply !font-bold !text-text-primary !text-sm mb-2;
|
||||
}
|
||||
|
||||
.game-text {
|
||||
@apply !text-text-secondary !text-sm mb-4;
|
||||
}
|
||||
|
||||
.stat-container {
|
||||
@apply bg-deep-blue-contrast rounded-lg shadow-lg p-4 sm:p-6 !text-center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
@apply !text-xl sm:!text-2xl !font-bold !text-emerald;
|
||||
}
|
||||
|
||||
.stat-text {
|
||||
@apply !text-text-secondary !text-sm;
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
@apply flex items-center !text-text-primary !text-xl !font-semibold;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
@apply px-3 py-2 rounded-md !font-normal !text-sm !text-text-secondary hover:!text-text-primary hover:bg-deep-blue-contrast transition-all duration-200;
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
@apply !text-text-secondary hover:!text-text-primary transition-colors duration-200;
|
||||
}
|
||||
|
||||
.nav-mobile-menu {
|
||||
@apply p-2 pt-2 mb-4 space-y-1 bg-deep-blue-contrast rounded-b-lg;
|
||||
}
|
||||
|
||||
.nav-mobile-link {
|
||||
@apply block px-3 py-2 rounded-md !text-sm !text-text-secondary hover:!text-text-primary hover:bg-deep-blue-light transition-all duration-200;
|
||||
}
|
||||
|
||||
.footer-section {
|
||||
@apply col-span-2 md:col-span-1;
|
||||
}
|
||||
|
||||
.footer-heading {
|
||||
@apply !text-text-primary !text-sm !font-semibold mb-4;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
@apply !text-text-secondary hover:!text-text-primary !text-sm transition-all duration-200;
|
||||
}
|
||||
|
||||
.footer-payment-method {
|
||||
@apply bg-deep-blue rounded p-3 flex items-center justify-center space-x-2 hover:bg-deep-blue/50 transition-all duration-200;
|
||||
}
|
||||
|
||||
.footer-payment-icon {
|
||||
@apply !text-text-secondary !text-lg;
|
||||
}
|
||||
|
||||
.footer-payment-text {
|
||||
@apply !text-text-secondary !text-xs !whitespace-nowrap;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
@apply !text-text-secondary !text-sm;
|
||||
}
|
||||
|
||||
.footer-disclaimer {
|
||||
@apply !text-xs;
|
||||
}
|
||||
|
||||
.mat-mdc-dialog-container {
|
||||
--mdc-dialog-container-color: var(--color-deep-blue-light) !important;
|
||||
--mdc-dialog-subhead-color: #ffffff !important;
|
||||
--mdc-dialog-supporting-text-color: #9ca3af !important;
|
||||
--mdc-dialog-container-shape: 6px !important;
|
||||
--mdc-dialog-container-color: var(--color-deep-blue-light) important;
|
||||
--mdc-dialog-subhead-color: var(--color-text-primary) important;
|
||||
--mdc-dialog-supporting-text-color: var(--color-text-secondary) important;
|
||||
--mdc-dialog-container-shape: 6px important;
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue