diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..27f6edc --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2025 Casino Gaming Platform + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md index 0bafce6..5fa2db4 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ An online gaming platform offering various casino-style games with virtual currency support. This project features a modern tech stack with Angular frontend, Spring Boot backend, and complete user authentication. -Please refer to our [Style Guide](/frontend/styleguide.md) for design guidelines and component standards. +Please refer to our [Style Guide](/frontend/README.md#style-guide) for design guidelines and component standards. ## Features @@ -150,24 +150,4 @@ References: ## License -MIT License - -Copyright (c) 2025 Casino Gaming Platform - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. \ No newline at end of file +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. \ No newline at end of file diff --git a/frontend/README.md b/frontend/README.md index caea2b0..daf35fe 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,3 +1,136 @@ -# Lf12Starter 2024 +# Casino Gaming Platform - Frontend +This is the frontend application for the Casino Gaming Platform. It's built with Angular 18 and TailwindCSS, providing a responsive and modern UI for the casino gaming experience. + +## Development + +### Commands + +- **Build**: `bun run build` or `bunx @angular/cli build` +- **Start Dev Server**: `bun run start` or `bunx @angular/cli serve --proxy-config src/proxy.conf.json` +- **Format Code**: `bun run format` or `prettier --write "src/**/*.{ts,html,css,scss}"` +- **Lint**: `bun run lint` or `ng lint` +- **Test**: `bun run test` or `bunx @angular/cli test` +- **Test Single File**: `bunx @angular/cli test --include=path/to/test.spec.ts` + +## Style Guide + +### Color Palette + +#### Primary Colors +- Deep Blue: `#0a1219` (background) +- Deep Blue Light: `#121e27` (secondary background) +- Deep Blue Contrast: `#1a2835` (cards, elements) + +#### Accent Colors +- Emerald: `#10b981` (primary buttons) +- Emerald Dark: `#059669` (button hover) +- Emerald Light: `#34d399` (highlights) + +#### Text Colors +- Primary Text: `#ffffff` (white) +- Secondary Text: `#94a3b8` (light gray) +- Tertiary Text: `#64748b` (darker gray) + +#### Additional Accents +- Yellow: `#fbbf24` +- Red: `#ef4444` +- Purple: `#8b5cf6` + +### Typography + +#### Font Sizes +- Extra Small: Text-xs (footer disclaimers) +- Small: Text-sm (navigation links, footer links) +- Base: Text-base (general text) +- Large: Text-lg (section headings) +- Extra Large: Text-xl (stat numbers, game headings) +- Display: Text-4xl/5xl/7xl (welcome bonus text) + +#### Font Weights +- Normal: General text +- Medium: Labels +- Semibold: Navigation brand +- Bold: Headings, stats +- Extrabold: Welcome bonus text + +### Components + +#### Buttons +- Primary: Emerald background with hover state +- Secondary: Deep blue light background with hover state +- All buttons have active scale effect (95%) +- Transition duration: 200-300ms + +#### Cards +- Background: Deep blue contrast +- Rounded corners (lg) +- Shadow effects with hover transition +- Consistent padding (p-4) + +#### Navigation +- Desktop: Horizontal links with hover effects +- Mobile: Collapsible menu with toggle +- Links have color and background transitions + +#### Modals +- Backdrop blur with dark overlay +- Card-style container with emerald focus rings +- Consistent form styling with transitions + +### Forms + +#### Inputs +- Dark background with border +- Focus states with emerald accent +- Consistent padding and rounded corners +- Clear label positioning + +### Layout + +#### Grid System +- Mobile-first responsive grid +- Breakpoints: sm, md, lg +- Grid columns: 1 (mobile), 2 (tablet), 3 (desktop) +- Consistent gap spacing (gap-4) + +#### Spacing +- Consistent margin/padding scale +- Mobile-responsive spacing adjustments + +### Animation +- Transitions: 200-500ms duration +- Hover/active state animations +- Scale transformations (95-110%) +- Opacity transitions for navigation elements + +### Components & Classes + +#### Common UI Elements +- `.card` - Base card container +- `.button-primary` - Main CTA buttons +- `.button-secondary` - Alternative action buttons +- `.section-heading` - Section titles +- `.nav-link` - Navigation links +- `.modal-card` - Modal container + +#### Game Elements +- `.game-card-content` - Game information container +- `.game-heading-sm` - Small game titles +- `.game-heading-xl` - Large game titles +- `.game-text` - Game descriptions +- `.slider-container` - Game carousel container + +### Responsive Design +- Mobile-first approach +- Tailwind breakpoints (sm, md, lg) +- Different layouts based on screen size +- Responsive text sizing and spacing +- Hidden/visible elements using responsive classes + +### CSS Framework +- Tailwind CSS for utility classes +- Custom utility classes with @apply directive +- CSS variables for theming +- Component-based styling approach diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 300a61a..89a9650 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -1,22 +1,8 @@ -@import 'tailwindcss'; +@tailwind base; +@tailwind components; +@tailwind utilities; -@theme { - --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; -} +/* Color theme moved to tailwind.config.js */ body { @apply bg-deep-blue text-text-primary h-full; diff --git a/frontend/styleguide.md b/frontend/styleguide.md deleted file mode 100644 index 84dcec4..0000000 --- a/frontend/styleguide.md +++ /dev/null @@ -1,123 +0,0 @@ -# Casino Gaming Platform Style Guide - -## Color Palette - -### Primary Colors -- Deep Blue: `#0a1219` (background) -- Deep Blue Light: `#121e27` (secondary background) -- Deep Blue Contrast: `#1a2835` (cards, elements) - -### Accent Colors -- Emerald: `#10b981` (primary buttons) -- Emerald Dark: `#059669` (button hover) -- Emerald Light: `#34d399` (highlights) - -### Text Colors -- Primary Text: `#ffffff` (white) -- Secondary Text: `#94a3b8` (light gray) -- Tertiary Text: `#64748b` (darker gray) - -### Additional Accents -- Yellow: `#fbbf24` -- Red: `#ef4444` -- Purple: `#8b5cf6` - -## Typography - -### Font Sizes -- Extra Small: Text-xs (footer disclaimers) -- Small: Text-sm (navigation links, footer links) -- Base: Text-base (general text) -- Large: Text-lg (section headings) -- Extra Large: Text-xl (stat numbers, game headings) -- Display: Text-4xl/5xl/7xl (welcome bonus text) - -### Font Weights -- Normal: General text -- Medium: Labels -- Semibold: Navigation brand -- Bold: Headings, stats -- Extrabold: Welcome bonus text - -## Components - -### Buttons -- Primary: Emerald background with hover state -- Secondary: Deep blue light background with hover state -- All buttons have active scale effect (95%) -- Transition duration: 200-300ms - -### Cards -- Background: Deep blue contrast -- Rounded corners (lg) -- Shadow effects with hover transition -- Consistent padding (p-4) - -### Navigation -- Desktop: Horizontal links with hover effects -- Mobile: Collapsible menu with toggle -- Links have color and background transitions - -### Modals -- Backdrop blur with dark overlay -- Card-style container with emerald focus rings -- Consistent form styling with transitions - -## Forms - -### Inputs -- Dark background with border -- Focus states with emerald accent -- Consistent padding and rounded corners -- Clear label positioning - -## Layout - -### Grid System -- Mobile-first responsive grid -- Breakpoints: sm, md, lg -- Grid columns: 1 (mobile), 2 (tablet), 3 (desktop) -- Consistent gap spacing (gap-4) - -### Spacing -- Consistent margin/padding scale -- Mobile-responsive spacing adjustments - -## Animation - -- Transitions: 200-500ms duration -- Hover/active state animations -- Scale transformations (95-110%) -- Opacity transitions for navigation elements - -## Components & Classes - -### Common UI Elements -- `.card` - Base card container -- `.button-primary` - Main CTA buttons -- `.button-secondary` - Alternative action buttons -- `.section-heading` - Section titles -- `.nav-link` - Navigation links -- `.modal-card` - Modal container - -### Game Elements -- `.game-card-content` - Game information container -- `.game-heading-sm` - Small game titles -- `.game-heading-xl` - Large game titles -- `.game-text` - Game descriptions -- `.slider-container` - Game carousel container - -## Responsive Design - -- Mobile-first approach -- Tailwind breakpoints (sm, md, lg) -- Different layouts based on screen size -- Responsive text sizing and spacing -- Hidden/visible elements using responsive classes - -## CSS Framework - -- Tailwind CSS for utility classes -- Custom utility classes with @apply directive -- CSS variables for theming -- Component-based styling approach \ No newline at end of file diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js new file mode 100644 index 0000000..5d41f0f --- /dev/null +++ b/frontend/tailwind.config.js @@ -0,0 +1,32 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + "./src/**/*.{html,ts}", + ], + theme: { + extend: { + colors: { + // Primary Colors + "deep-blue": "#0a1219", // background + "deep-blue-light": "#121e27", // secondary background + "deep-blue-contrast": "#1a2835", // cards, elements + + // Accent Colors + "emerald": "#10b981", // primary buttons + "emerald-dark": "#059669", // button hover + "emerald-light": "#34d399", // highlights + + // Text Colors + "text-primary": "#ffffff", // white + "text-secondary": "#94a3b8", // light gray + "text-tertiary": "#64748b", // darker gray + + // Additional Accents + "accent-yellow": "#fbbf24", + "accent-red": "#ef4444", + "accent-purple": "#8b5cf6", + }, + }, + }, + plugins: [], +}; \ No newline at end of file