feat: add MIT License and update README for clarity
This commit is contained in:
parent
520c8f8343
commit
e9159abf3d
GPG key ID:
22BEAC760B3333D6
6 changed files with 193 additions and 164 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
32
frontend/tailwind.config.js
Normal file
32
frontend/tailwind.config.js
Normal file
|
|
@ -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: [],
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue