jank/casino
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add footer component and FontAwesome integration

Browse source
This commit is contained in:
Jan-Marlon Leibl 2025-02-12 12:26:48 +01:00
parent 29305a75b1
commit 325bc118ee
No known key found for this signature in database
GPG key ID: E7B6F77BF5EDB6F7
10 changed files with 219 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/bun.lock
View file

@ -12,6 +12,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",
"@tailwindcss/postcss": "^4.0.3",
"keycloak-angular": "^16.0.1",
"keycloak-js": "^25.0.5",
@ -333,6 +337,16 @@
"@esbuild/win32-x64": ["@esbuild/win32-x64@0.23.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Arm+WgUFLUATuoxCJcahGuk6Yj9Pzxd6l11Zb/2aAuv5kWWvvfhLFo2fni4uSK5vzlUdCGZ/BdV5tH8klj8p8g=="],
"@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=="],
"@inquirer/checkbox": ["@inquirer/checkbox@2.5.0", "", { "dependencies": { "@inquirer/core": "^9.1.0", "@inquirer/figures": "^1.0.5", "@inquirer/type": "^1.5.3", "ansi-escapes": "^4.3.2", "yoctocolors-cjs": "^2.1.2" } }, "sha512-sMgdETOfi2dUHT8r7TT1BTKOwNvdDGFDXYWtQ2J69SvlYNntk9I/gJe7r5yvMwwsuKnYbuRs3pNhx4tgNck5aA=="],
"@inquirer/confirm": ["@inquirer/confirm@3.1.22", "", { "dependencies": { "@inquirer/core": "^9.0.10", "@inquirer/type": "^1.5.2" } }, "sha512-gsAKIOWBm2Q87CDfs9fEo7wJT3fwWIJfnDGMn9Qy74gBnNFOACDNfhUzovubbJjWnKLGBln7/NcSmZwj5DuEXg=="],

4
frontend/package.json
View file

@ -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",

9
frontend/src/app/app.component.html
View file

@ -1,2 +1,7 @@
<app-navbar></app-navbar>
<router-outlet></router-outlet>
<div class="min-h-screen flex flex-col">
<app-navbar></app-navbar>
<main class="flex-grow">
<router-outlet></router-outlet>
</main>
<app-footer></app-footer>
</div>

4
frontend/src/app/app.component.ts
View file

@ -3,10 +3,12 @@ import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { KeycloakAngularModule } from 'keycloak-angular';
import { NavbarComponent } from './shared/components/navbar/navbar.component';
import { FooterComponent } from './shared/components/footer/footer.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, KeycloakAngularModule, NavbarComponent],
imports: [CommonModule, RouterOutlet, KeycloakAngularModule, NavbarComponent, FooterComponent],
providers: [],
templateUrl: './app.component.html',
styleUrl: './app.component.css',

2
frontend/src/app/app.config.ts
View file

@ -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,

114
frontend/src/app/shared/components/footer/footer.component.html Normal file
View file

@ -0,0 +1,114 @@
<footer class="bg-deep-blue-contrast 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="col-span-2 md:col-span-1">
<h3 class="text-white text-sm font-semibold mb-4">Casino Spiele</h3>
<ul class="space-y-3">
<li>
<a
href="#"
class="text-gray-400 hover:text-white text-sm transition-colors duration-200"
>Slots</a
>
</li>
<li>
<a
href="#"
class="text-gray-400 hover:text-white text-sm transition-colors duration-200"
>Plinko</a
>
</li>
<li>
<a
href="#"
class="text-gray-400 hover:text-white text-sm transition-colors duration-200"
>Blackjack</a
>
</li>
<li>
<a
href="#"
class="text-gray-400 hover:text-white text-sm transition-colors duration-200"
>Poker</a
>
</li>
<li>
<a
href="#"
class="text-gray-400 hover:text-white text-sm transition-colors duration-200"
>Liars Dice</a
>
</li>
</ul>
</div>
<div class="col-span-2 md:col-span-1">
<h3 class="text-white text-sm font-semibold mb-4">Andere Spiele</h3>
<ul class="space-y-3">
<li>
<a
href="#"
class="text-gray-400 hover:text-white text-sm transition-colors duration-200"
>Lootboxen</a
>
</li>
</ul>
</div>
<div class="col-span-2 lg:col-span-2">
<h3 class="text-white text-sm font-semibold mb-4">Einzahlungsmöglichkeiten</h3>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<div
class="bg-deep-blue rounded p-3 flex items-center justify-center space-x-2 hover:bg-deep-blue/50 transition-colors duration-200"
>
<fa-icon [icon]="faMoneyBillTransfer" class="text-gray-400 text-lg"></fa-icon>
<span class="text-gray-400 text-xs whitespace-nowrap">Sofort</span>
</div>
<div
class="bg-deep-blue rounded p-3 flex items-center justify-center space-x-2 hover:bg-deep-blue/50 transition-colors duration-200"
>
<fa-icon [icon]="faPaypal" class="text-gray-400 text-lg"></fa-icon>
<span class="text-gray-400 text-xs whitespace-nowrap">Paypal</span>
</div>
<div
class="bg-deep-blue rounded p-3 flex items-center justify-center space-x-2 hover:bg-deep-blue/50 transition-colors duration-200"
>
<fa-icon [icon]="faCreditCard" class="text-gray-400 text-lg"></fa-icon>
<span class="text-gray-400 text-xs whitespace-nowrap">Kreditkarte</span>
</div>
<div
class="bg-deep-blue rounded p-3 flex items-center justify-center space-x-2 hover:bg-deep-blue/50 transition-colors duration-200"
>
<fa-icon [icon]="faWallet" class="text-gray-400 text-lg"></fa-icon>
<span class="text-gray-400 text-xs whitespace-nowrap">Klara</span>
</div>
<div
class="bg-deep-blue rounded p-3 flex items-center justify-center space-x-2 hover:bg-deep-blue/50 transition-colors duration-200"
>
<fa-icon [icon]="faMoneyBillTransfer" class="text-gray-400 text-lg"></fa-icon>
<span class="text-gray-400 text-xs whitespace-nowrap">Sepa</span>
</div>
<div
class="bg-deep-blue rounded p-3 flex items-center justify-center space-x-2 hover:bg-deep-blue/50 transition-colors duration-200"
>
<fa-icon [icon]="faGooglePay" class="text-gray-400 text-lg"></fa-icon>
<span class="text-gray-400 text-xs whitespace-nowrap">Google Pay</span>
</div>
<div
class="bg-deep-blue rounded p-3 flex items-center justify-center space-x-2 hover:bg-deep-blue/50 transition-colors duration-200"
>
<fa-icon [icon]="faApplePay" class="text-gray-400 text-lg"></fa-icon>
<span class="text-gray-400 text-xs whitespace-nowrap">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="text-gray-400 text-sm mb-4 md:mb-0">
© {{ currentYear }} Trustworthy Casino. Keine Rechte vorbehalten.
</div>
</div>
</div>
</div>
</footer>

23
frontend/src/app/shared/components/footer/footer.component.ts Normal file
View file

@ -0,0 +1,23 @@
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
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],
})
export class FooterComponent {
currentYear: number = new Date().getFullYear();
// Payment method icons
faPaypal = faPaypal;
faCreditCard = faCreditCard;
faMoneyBillTransfer = faMoneyBillTransfer;
faWallet = faWallet;
faGooglePay = faGooglePay;
faApplePay = faApplePay;
}

59
frontend/src/app/shared/components/navbar/navbar.component.html
View file

@ -6,23 +6,54 @@
<span class="text-white text-xl font-semibold">Trustworthy Casino</span>
</a>
<div class="hidden md:flex items-center space-x-1">
<a routerLink="/games"
class="px-3 py-2 rounded-md text-sm hover:bg-deep-blue-contrast transition-colors duration-200">Games</a>
<a
routerLink="/games"
class="px-3 py-2 rounded-md text-sm hover:bg-deep-blue-contrast transition-colors duration-200"
>Games</a
>
</div>
</div>
<div class="hidden md:flex items-center space-x-4">
<button
class="cursor-pointer px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200">Login</button>
class="cursor-pointer px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200"
>
Login
</button>
</div>
<div class="md:hidden">
<button (click)="toggleMenu()" class="text-gray-300 hover:text-white transition-colors duration-200">
<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" />
<button
(click)="toggleMenu()"
class="text-gray-300 hover:text-white transition-colors duration-200"
>
<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
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>
@ -30,11 +61,17 @@
<div [class]="isMenuOpen ? 'block' : 'hidden'" class="md:hidden">
<div class="p-2 pt-2 mb-4 space-y-1 bg-deep-blue-contrast rounded-b-lg">
<a routerLink="/games"
class="block px-3 py-2 rounded-md text-sm hover:bg-deep-blue-light transition-colors duration-200">Games</a>
<a
routerLink="/games"
class="block px-3 py-2 rounded-md text-sm hover:bg-deep-blue-light transition-colors duration-200"
>Games</a
>
<div class="pt-2 space-y-2">
<button
class="cursor-pointer w-full px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200">Login</button>
class="cursor-pointer w-full px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200"
>
Login
</button>
</div>
</div>
</div>

2
frontend/src/app/shared/components/navbar/navbar.component.ts
View file

@ -6,7 +6,7 @@ import { CommonModule } from '@angular/common';
selector: 'app-navbar',
templateUrl: './navbar.component.html',
standalone: true,
imports: [CommonModule, RouterModule]
imports: [CommonModule, RouterModule],
})
export class NavbarComponent {
isMenuOpen = false;

1
frontend/src/styles.css
View file

@ -17,3 +17,4 @@ body {
--mdc-dialog-supporting-text-color: #9ca3af !important;
--mdc-dialog-container-shape: 6px !important;
}