implemented better ui and pseudo data
This commit is contained in:
parent
44c7d8be57
commit
1fc38de35e
@ -1,19 +1,84 @@
|
||||
<app-navbar></app-navbar>
|
||||
<div class="container mx-auto px-4 py-6 space-y-8">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center space-x-4">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3">
|
||||
<div class="w-1/3 h-1/4">
|
||||
<p>Spiel Vorschau</p>
|
||||
<p>Spiel Name</p>
|
||||
<button type="button" class="btn-primary">Jetzt spielen</button>
|
||||
</div>
|
||||
<div class="w-1/3 h-1/4">
|
||||
<p>Spiel Vorschau</p>
|
||||
<p>Spiel Name</p>
|
||||
<button type="button" class="btn-primary">Jetzt spielen</button>
|
||||
</div>
|
||||
<div class="w-1/3 h-1/4">
|
||||
<p>Spiel Vorschau</p>
|
||||
<p>Spiel Name</p>
|
||||
<button type="button" class="btn-primary">Jetzt spielen</button>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||||
<div class="lg:col-span-3">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="section-heading text-2xl">Beliebte Spiele</h3>
|
||||
<div class="flex space-x-2">
|
||||
<button class="nav-button left-0">
|
||||
<span class="material-icons">chevron_left</span>
|
||||
</button>
|
||||
<button class="nav-button right-0">
|
||||
<span class="material-icons">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slider-container">
|
||||
<div class="slider-grid">
|
||||
<div class="card group" *ngFor="let game of featuredGames">
|
||||
<div class="relative">
|
||||
<img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-deep-blue/90 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<div class="absolute bottom-4 left-4 right-4">
|
||||
<h4 class="game-heading">{{game.name}}</h4>
|
||||
<button class="button-base w-full py-2">Jetzt Spielen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<h3 class="section-heading text-2xl mb-6">Alle Spiele</h3>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
<div class="card group" *ngFor="let game of allGames">
|
||||
<div class="relative">
|
||||
<img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-deep-blue/90 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<div class="absolute bottom-4 left-4 right-4">
|
||||
<h4 class="game-heading">{{game.name}}</h4>
|
||||
<button class="button-base w-full py-2">Jetzt Spielen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-1 space-y-6">
|
||||
<div class="card p-4">
|
||||
<h3 class="section-heading text-xl mb-4">Konto</h3>
|
||||
<div class="space-y-4">
|
||||
<button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded">Transaktionen</button>
|
||||
<button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded">Kontoeinstellungen</button>
|
||||
<button class="bg-accent-red hover:bg-accent-red/90 w-full py-2 rounded">Abmelden</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-4">
|
||||
<h3 class="section-heading text-xl mb-4">Letzte Transaktionen</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-center" *ngFor="let transaction of recentTransactions">
|
||||
<div>
|
||||
<p class="text-sm font-medium">{{transaction.type}}</p>
|
||||
<p class="text-xs text-text-secondary">{{transaction.date}}</p>
|
||||
</div>
|
||||
<span [class]="transaction.amount > 0 ? 'text-emerald' : 'text-accent-red'">
|
||||
{{transaction.amount | currency:'EUR'}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,12 +2,25 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
|
||||
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';
|
||||
import {CurrencyPipe, NgFor} from "@angular/common";
|
||||
|
||||
interface Game {
|
||||
id: string;
|
||||
name: string;
|
||||
image: string;
|
||||
}
|
||||
interface Transaction {
|
||||
id: string;
|
||||
type: string;
|
||||
amount: number;
|
||||
date: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-homepage',
|
||||
standalone: true,
|
||||
imports: [NavbarComponent],
|
||||
imports: [NavbarComponent, CurrencyPipe, NgFor],
|
||||
templateUrl: './home.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
@ -15,6 +28,67 @@ export class HomeComponent {
|
||||
private keycloakService: KeycloakService = inject(KeycloakService);
|
||||
public dialog: MatDialog = inject(MatDialog);
|
||||
|
||||
userAvatar = '/assets/images/default-avatar.png';
|
||||
username = this.keycloakService.getUsername();
|
||||
vipLevel = 1;
|
||||
balance = 1000.00;
|
||||
|
||||
featuredGames: Game[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Poker',
|
||||
image: '/assets/images/games/poker.jpg',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Blackjack',
|
||||
image: '/assets/images/games/blackjack.jpg',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Slots',
|
||||
image: '/assets/images/games/slots.jpg',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'Plinko',
|
||||
image: '/assets/images/games/plinko.jpg',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'Liars Dice',
|
||||
image: '/assets/images/games/liars-dice.jpg',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'Lootboxen',
|
||||
image: '/assets/images/games/lootboxen.jpg',
|
||||
}
|
||||
];
|
||||
|
||||
allGames: Game[] = [...this.featuredGames];
|
||||
|
||||
recentTransactions: Transaction[] = [
|
||||
{
|
||||
id: '1',
|
||||
type: 'Deposit',
|
||||
amount: 100.00,
|
||||
date: '2024-03-20'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
type: 'Withdrawal',
|
||||
amount: -50.00,
|
||||
date: '2024-03-19'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
type: 'Bonus',
|
||||
amount: 25.00,
|
||||
date: '2024-03-18'
|
||||
}
|
||||
];
|
||||
|
||||
public logout() {
|
||||
const baseUrl = window.location.origin;
|
||||
|
||||
|
||||
@ -26,21 +26,21 @@
|
||||
<div class="slider-grid">
|
||||
<div class="card">
|
||||
<div class="game-card-content">
|
||||
<h3 class="game-heading">Slots</h3>
|
||||
<h3 class="game-heading-sm">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>
|
||||
<h3 class="game-heading-sm">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>
|
||||
<h3 class="game-heading-sm">Blackjack</h3>
|
||||
<p class="game-text">Klassisches Kartenspiel</p>
|
||||
<button class="button-base w-full py-2">Jetzt Spielen</button>
|
||||
</div>
|
||||
@ -50,21 +50,21 @@
|
||||
<div class="slider-grid">
|
||||
<div class="card">
|
||||
<div class="game-card-content">
|
||||
<h3 class="game-heading">Poker</h3>
|
||||
<h3 class="game-heading-sm">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>
|
||||
<h3 class="game-heading-sm">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>
|
||||
<h3 class="game-heading-sm">Lootboxen</h3>
|
||||
<p class="game-text">Überraschungskisten</p>
|
||||
<button class="button-base w-full py-2">Jetzt Spielen</button>
|
||||
</div>
|
||||
|
||||
@ -63,10 +63,14 @@ a {
|
||||
@apply font-bold text-text-primary;
|
||||
}
|
||||
|
||||
.game-heading {
|
||||
.game-heading-sm {
|
||||
@apply font-bold text-text-primary text-sm mb-2;
|
||||
}
|
||||
|
||||
.game-heading-xl {
|
||||
@apply font-bold text-text-primary text-xl mb-2;
|
||||
}
|
||||
|
||||
.game-text {
|
||||
@apply text-text-secondary text-sm mb-4;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user