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 c904f8c..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. -![Casino Gaming Platform](/frontend/public/blackjack.webp) +Please refer to our [Style Guide](/frontend/README.md#style-guide) for design guidelines and component standards. ## Features @@ -150,4 +150,4 @@ References: ## License -[License information here] \ 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