149 lines
3.7 KiB
Markdown
149 lines
3.7 KiB
Markdown
# Story 13.3: Subtle Background Pattern Implementation
|
|
|
|
## Story
|
|
|
|
**As a** visitor to the authentication pages
|
|
**I want to** see a subtle, elegant background pattern on the form side
|
|
**So that** the page feels polished and professionally designed
|
|
|
|
## Acceptance Criteria
|
|
|
|
### AC1: Create SVG Pattern Asset
|
|
|
|
**Given** the need for a subtle background pattern
|
|
**When** the pattern is created
|
|
**Then**:
|
|
- SVG format for scalability and performance
|
|
- Uses brand color (Warm Gold #A68966) at 5-8% opacity
|
|
- Pattern type: Geometric or botanical (wheat/leaf motif)
|
|
- Seamlessly tileable
|
|
- File size under 5KB for performance
|
|
|
|
### AC2: Pattern Placement
|
|
|
|
**Given** the SVG pattern is created
|
|
**When** applied to the auth layout
|
|
**Then**:
|
|
- Pattern appears on the form side (right panel desktop, full background mobile)
|
|
- Pattern overlays the Warm Cream background
|
|
- Pattern is fixed/static (doesn't scroll with content)
|
|
- Pattern doesn't interfere with form readability
|
|
|
|
### AC3: Pattern Opacity
|
|
|
|
**Given** readability requirements
|
|
**When** the pattern is displayed
|
|
**Then**:
|
|
- Opacity is subtle (5-8%)
|
|
- Text remains clearly readable
|
|
- Pattern adds visual interest without distraction
|
|
|
|
### AC4: CSS Implementation
|
|
|
|
**Given** the pattern asset
|
|
**When** integrated into CSS
|
|
**Then**:
|
|
- Applied via `background-image` or pseudo-element
|
|
- Uses `background-repeat: repeat` for tiling
|
|
- Background is fixed or positioned appropriately
|
|
- Can be easily disabled if needed
|
|
|
|
### AC5: Performance Consideration
|
|
|
|
**Given** page load performance
|
|
**When** the pattern loads
|
|
**Then**:
|
|
- Pattern is inlined or loaded efficiently
|
|
- No noticeable delay in page rendering
|
|
- Pattern works without JavaScript
|
|
|
|
### AC6: Mobile Compatibility
|
|
|
|
**Given** mobile viewport
|
|
**When** pattern is displayed
|
|
**Then**:
|
|
- Pattern scales appropriately
|
|
- No horizontal scrolling caused by pattern
|
|
- Pattern remains subtle on smaller screens
|
|
|
|
## Technical Notes
|
|
|
|
### Pattern Options
|
|
|
|
**Option A: Geometric (Recommended)**
|
|
- Simple diagonal lines or dots
|
|
- Clean, modern aesthetic
|
|
- Easier to create and maintain
|
|
|
|
**Option B: Botanical**
|
|
- Wheat/leaf silhouettes
|
|
- Aligns with LIBRA brand identity
|
|
- More complex but more unique
|
|
|
|
### SVG Pattern Example (Geometric)
|
|
```svg
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
|
|
<circle cx="2" cy="2" r="1" fill="#A68966" fill-opacity="0.06"/>
|
|
</svg>
|
|
```
|
|
|
|
### CSS Implementation Options
|
|
|
|
**Option 1: Inline SVG in CSS**
|
|
```css
|
|
.auth-pattern {
|
|
background-image: url("data:image/svg+xml,...");
|
|
background-repeat: repeat;
|
|
}
|
|
```
|
|
|
|
**Option 2: Pseudo-element Overlay**
|
|
```css
|
|
.auth-form-side::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: url('/images/pattern.svg');
|
|
background-repeat: repeat;
|
|
opacity: 0.06;
|
|
pointer-events: none;
|
|
}
|
|
```
|
|
|
|
**Option 3: Tailwind Arbitrary Value**
|
|
```html
|
|
<div class="bg-[url('/images/pattern.svg')]">
|
|
```
|
|
|
|
### Files to Create/Modify
|
|
- `public/images/auth-pattern.svg` (new) OR inline in CSS
|
|
- `resources/css/app.css` (if adding pattern class)
|
|
- `resources/views/components/layouts/auth/split.blade.php` (apply pattern)
|
|
|
|
### Pattern Design Guidelines
|
|
- Color: Warm Gold (#A68966)
|
|
- Opacity: 5-8% (0.05-0.08)
|
|
- Size: 20-40px tiles for subtle effect
|
|
- Style: Minimalist, professional
|
|
|
|
## Dev Checklist
|
|
|
|
- [ ] Design/select pattern style (geometric vs botanical)
|
|
- [ ] Create SVG pattern file
|
|
- [ ] Optimize SVG for file size
|
|
- [ ] Add pattern to auth layout CSS
|
|
- [ ] Test pattern visibility at various screen sizes
|
|
- [ ] Verify text readability over pattern
|
|
- [ ] Test in both Arabic and English
|
|
- [ ] Verify no horizontal scroll issues
|
|
- [ ] Check pattern on high-DPI displays
|
|
|
|
## Estimation
|
|
|
|
**Complexity:** Medium
|
|
**Risk:** Low - Decorative enhancement only
|
|
|
|
## Dependencies
|
|
|
|
- Story 13.2 (Auth Split Layout) - Must be completed first
|