diff --git a/frontend/bun.lock b/frontend/bun.lock index 5011117..8a74659 100644 --- a/frontend/bun.lock +++ b/frontend/bun.lock @@ -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=="], diff --git a/frontend/package.json b/frontend/package.json index 921ca25..c79aae0 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -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", diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 6659729..67fc2d4 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,2 +1,7 @@ - - +
+ +
+ +
+ +
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 0a852aa..14626aa 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -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', diff --git a/frontend/src/app/app.config.ts b/frontend/src/app/app.config.ts index c6b9f77..8401ece 100644 --- a/frontend/src/app/app.config.ts +++ b/frontend/src/app/app.config.ts @@ -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, diff --git a/frontend/src/app/shared/components/footer/footer.component.html b/frontend/src/app/shared/components/footer/footer.component.html new file mode 100644 index 0000000..c5709d3 --- /dev/null +++ b/frontend/src/app/shared/components/footer/footer.component.html @@ -0,0 +1,114 @@ + diff --git a/frontend/src/app/shared/components/footer/footer.component.ts b/frontend/src/app/shared/components/footer/footer.component.ts new file mode 100644 index 0000000..006a23b --- /dev/null +++ b/frontend/src/app/shared/components/footer/footer.component.ts @@ -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; +} diff --git a/frontend/src/app/shared/components/navbar/navbar.component.html b/frontend/src/app/shared/components/navbar/navbar.component.html index 61447ad..fa990e6 100644 --- a/frontend/src/app/shared/components/navbar/navbar.component.html +++ b/frontend/src/app/shared/components/navbar/navbar.component.html @@ -6,23 +6,54 @@ Trustworthy Casino
-
@@ -30,13 +61,19 @@
- Games + Games
+ 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 +
- \ No newline at end of file + diff --git a/frontend/src/app/shared/components/navbar/navbar.component.ts b/frontend/src/app/shared/components/navbar/navbar.component.ts index 338201c..43053a3 100644 --- a/frontend/src/app/shared/components/navbar/navbar.component.ts +++ b/frontend/src/app/shared/components/navbar/navbar.component.ts @@ -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; @@ -14,4 +14,4 @@ export class NavbarComponent { toggleMenu() { this.isMenuOpen = !this.isMenuOpen; } -} \ No newline at end of file +} diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 12c08a1..eacf745 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -17,3 +17,4 @@ body { --mdc-dialog-supporting-text-color: #9ca3af !important; --mdc-dialog-container-shape: 6px !important; } +