frontend/src/app/app.component.html

@@ -1 +1,2 @@
+<app-navbar></app-navbar>
 <router-outlet></router-outlet>

frontend/src/app/app.component.ts

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

frontend/src/app/shared/components/navbar/navbar.component.html

@@ -0,0 +1,42 @@
+<nav class="bg-deep-blue text-gray-300 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="flex items-center">
+          <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>
+        </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>
+      </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" />
+          </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="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>
+        <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>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>

frontend/src/app/shared/components/navbar/navbar.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  standalone: true,
+  imports: [CommonModule, RouterModule]
+})
+export class NavbarComponent {
+  isMenuOpen = false;
+
+  toggleMenu() {
+    this.isMenuOpen = !this.isMenuOpen;
+  }
+} 

frontend/src/styles.css

@@ -1 +1,12 @@
-@import 'tailwindcss';
+@import "tailwindcss";
+
+@theme {
+    --color-deep-blue: #0F212E;
+    --color-deep-blue-light: #1A2C38;
+    --color-deep-blue-contrast: #1B2C3B;
+    --color-light-blue: #1475E1;
+}
+
+body {
+    @apply bg-deep-blue text-gray-100;
+}

frontend/tailwind.config.js

@@ -1,218 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./src/**/*.{html,ts}",
-  ],
-  theme: {
-    extend: {
-      animation: {
-        'fadeIn': 'fadeIn 0.3s ease-out',
-        'backdropBlur': 'backdropBlur 0.4s ease-out',
-        'modalSlideIn': 'modalSlideIn 0.5s cubic-bezier(0.16,1,0.3,1)',
-        'slideDown': 'slideDown 0.6s ease-out',
-        'slideUp': 'slideUp 0.6s ease-out',
-        'scaleIn': 'scaleIn 0.8s cubic-bezier(0.16,1,0.3,1)',
-        'spinAndBounce': 'spinAndBounce 3s ease-in-out infinite',
-        'glow': 'glow 4s ease-in-out infinite',
-        'marquee': 'marquee 30s linear infinite',
-        'float': 'float 6s ease-in-out infinite',
-        'tiltAndGlow': 'tiltAndGlow 3s ease-in-out infinite',
-        'shimmer': 'shimmer 2s linear infinite',
-        'morphBackground': 'morphBackground 10s ease-in-out infinite',
-        'elasticScale': 'elasticScale 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
-        'bounceAndFade': 'bounceAndFade 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
-        'rotateAndScale': 'rotateAndScale 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
-        'pulseGlow': 'pulseGlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-      },
-      keyframes: {
-        fadeIn: {
-          'from': { opacity: '0' },
-          'to': { opacity: '1' }
-        },
-        backdropBlur: {
-          'from': { 
-            'backdrop-filter': 'blur(0px)',
-            'background-color': 'rgba(0,0,0,0)'
-          },
-          'to': { 
-            'backdrop-filter': 'blur(16px)',
-            'background-color': 'rgba(0,0,0,0.95)'
-          }
-        },
-        modalSlideIn: {
-          'from': {
-            opacity: '0',
-            transform: 'scale(0.95) translateY(10px)'
-          },
-          'to': {
-            opacity: '1',
-            transform: 'scale(1) translateY(0)'
-          }
-        },
-        slideDown: {
-          'from': {
-            opacity: '0',
-            transform: 'translateY(-20px)'
-          },
-          'to': {
-            opacity: '1',
-            transform: 'translateY(0)'
-          }
-        },
-        slideUp: {
-          'from': {
-            opacity: '0',
-            transform: 'translateY(20px)'
-          },
-          'to': {
-            opacity: '1',
-            transform: 'translateY(0)'
-          }
-        },
-        scaleIn: {
-          'from': {
-            opacity: '0',
-            transform: 'scale(0.9)'
-          },
-          'to': {
-            opacity: '1',
-            transform: 'scale(1)'
-          }
-        },
-        spinAndBounce: {
-          '0%': {
-            transform: 'scale(1) rotate(0deg)'
-          },
-          '50%': {
-            transform: 'scale(1.2) rotate(180deg)'
-          },
-          '100%': {
-            transform: 'scale(1) rotate(360deg)'
-          }
-        },
-        glow: {
-          '0%, 100%': {
-            opacity: '0.3',
-            transform: 'scale(1)'
-          },
-          '50%': {
-            opacity: '0.5',
-            transform: 'scale(1.05)'
-          }
-        },
-        marquee: {
-          '0%': { transform: 'translateX(0)' },
-          '100%': { transform: 'translateX(-100%)' }
-        },
-        float: {
-          '0%, 100%': { transform: 'translateY(0)' },
-          '50%': { transform: 'translateY(-20px)' }
-        },
-        tiltAndGlow: {
-          '0%, 100%': {
-            transform: 'perspective(1000px) rotateX(0deg) rotateY(0deg)',
-            'box-shadow': '0 0 20px rgba(34,197,94,0.2)'
-          },
-          '50%': {
-            transform: 'perspective(1000px) rotateX(2deg) rotateY(5deg)',
-            'box-shadow': '0 0 40px rgba(34,197,94,0.4)'
-          }
-        },
-        shimmer: {
-          '0%': {
-            'background-position': '-1000px 0'
-          },
-          '100%': {
-            'background-position': '1000px 0'
-          }
-        },
-        morphBackground: {
-          '0%, 100%': {
-            'border-radius': '60% 40% 30% 70%/60% 30% 70% 40%'
-          },
-          '50%': {
-            'border-radius': '30% 60% 70% 40%/50% 60% 30% 60%'
-          }
-        },
-        elasticScale: {
-          '0%': {
-            transform: 'scale(0)'
-          },
-          '60%': {
-            transform: 'scale(1.1)'
-          },
-          '100%': {
-            transform: 'scale(1)'
-          }
-        },
-        bounceAndFade: {
-          '0%': {
-            transform: 'scale(0.3)',
-            opacity: '0'
-          },
-          '50%': {
-            transform: 'scale(1.05)',
-            opacity: '0.8'
-          },
-          '100%': {
-            transform: 'scale(1)',
-            opacity: '1'
-          }
-        },
-        rotateAndScale: {
-          '0%': {
-            transform: 'rotate(-180deg) scale(0)'
-          },
-          '100%': {
-            transform: 'rotate(0) scale(1)'
-          }
-        },
-        pulseGlow: {
-          '0%, 100%': {
-            opacity: '1',
-            transform: 'scale(1)',
-            filter: 'brightness(1)'
-          },
-          '50%': {
-            opacity: '0.8',
-            transform: 'scale(1.05)',
-            filter: 'brightness(1.2)'
-          }
-        }
-      },
-      transitionDelay: {
-        '100': '100ms',
-        '200': '200ms',
-        '300': '300ms',
-        '400': '400ms',
-        '500': '500ms',
-      },
-      transitionTimingFunction: {
-        'bounce': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
-        'smooth': 'cubic-bezier(0.4, 0, 0.2, 1)',
-        'elastic': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
-        'spring': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
-      },
-      backdropBlur: {
-        'xs': '2px',
-        '4xl': '72px',
-        '5xl': '96px',
-      },
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-        'shimmer': 'linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent)',
-      }
-    },
-  },
-  plugins: [
-    require('@tailwindcss/aspect-ratio'),
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
-    require('tailwindcss-animated'),
-    require('tailwindcss-gradients'),
-    require('tailwindcss-transforms'),
-    require('tailwindcss-filters'),
-    require('tailwind-scrollbar-hide'),
-  ],
-}