# [FEATURE] Random landscape background image ## Description Use a random open licensed landscape image as the background, and replace it with a new one each refresh. ## User Story As a user, I want a fresh landscape background on each visit for visual variety. ## Technical Context - Affects page container/body styling - Needs external image source with open license - Consider performance and loading states ## Test Strategy ### Integration Test (Red) Test image endpoint returns valid image URL with appropriate license. ```go func TestGetRandomBackgroundURL(t *testing.T) { url := GetRandomBackgroundURL() assert.NotEmpty(t, url) assert.Contains(t, url, "unsplash") // or other source // Verify URL is accessible resp, err := http.Head(url) assert.NoError(t, err) assert.Equal(t, 200, resp.StatusCode) } ``` ## Proposed Approach 1. **Image Source Options:** - **Unsplash Source API:** `https://source.unsplash.com/1920x1080/?landscape,nature` - Free, no API key needed for basic use - Redirects to random image - **Pexels API:** Requires API key - **Local curated set:** Bundle images, no external dependency 2. **Implementation:** - Set CSS `background-image` on body or main container - Add loading state (solid color) while image loads - Use `background-size: cover` and `background-position: center` 3. **Template change:** ```html ``` Or with CSS class and CSS variable. 4. **Handler:** - Generate/fetch random URL on each page load - Pass to template context ## Traps to Avoid - **Slow loads:** Large images can delay page render - Use appropriate resolution (1920x1080 max) - Consider lazy loading or progressive enhancement - **Image fails to load:** Have solid color fallback - **Caching:** Browser may cache image; ensure URL changes per request - **Dark text visibility:** May need overlay or text shadow for readability ## Affected Components - `internal/handlers/handlers.go` (add background URL to context) - `web/templates/index.html` (apply background style) - `web/static/css/` (fallback and loading styles) ## Definition of Done - [ ] Background image displays on page load - [ ] Different image on each refresh - [ ] Images are openly licensed - [ ] Fallback color while loading - [ ] Text remains readable over images - [ ] Integration test verifies URL validity