🌿 Forever Fields Memorial Template

Try the Demo

View memorial pages with different configurations:

Features

• Beautiful, warm design matching Forever Fields brand
• Responsive layout (mobile, tablet, desktop)
• Full API integration with backend
• Public candle lighting (no auth required)
• Time capsule display (unlocked only)
• Social media links
• Resting place information
• Song playback (YouTube/Spotify integration)
• Privacy-aware rendering (public/link/private)
• Accessible keyboard navigation
• Reduced motion support

Usage

To use this memorial template in your application:

1. Include the Files

<!-- In your HTML head -->
<link rel="stylesheet" href="memorial-template/css/memorial.css">

<!-- Before closing body tag -->
<script src="memorial-template/js/api-client.js"></script>
<script src="memorial-template/js/memorial.js"></script>

2. Configure API URL

Update the API base URL in memorial.js:

const api = new ForeverFieldsAPI('https://your-api.onrender.com');

3. Pass Memorial ID

The template reads the memorial ID from URL parameters:

https://yoursite.com/memorial?id=memorial-id-here

4. Customize Styles

Modify CSS variables in memorial.css to match your brand:

:root {
  --sage-primary: #8B9F82;
  --gold-primary: #C9A962;
  --cream: #F5F1E8;
  /* ... */
}

API Integration

The template automatically handles:

• Loading memorial data from GET /api/memorials/:id
• Fetching candles from GET /api/candles/:memorialId
• Lighting candles via POST /api/candles
• Loading time capsules from GET /api/time-capsules/:memorialId
• Privacy checks (public/link/private)
• Error handling and loading states

Testing

Test the full memorial CRUD flow:

# Set your access token (from magic link auth)
export ACCESS_TOKEN="your-token-here"

# Run memorial CRUD tests
npm run test:memorial

# Or directly:
node tests/memorial-crud.test.js

Tests include:

• Create memorial
• Get user's memorials
• View memorial publicly
• Update memorial
• Unauthorized access prevention
• Privacy settings enforcement
• Duplicate prevention
• Input validation
• Candle lighting
• Memorial deletion

File Structure

memorial-template/
├── index.html              # Memorial page template
├── css/
│   └── memorial.css        # Styles (Forever Fields design)
├── js/
│   ├── api-client.js       # API communication layer
│   └── memorial.js         # Page controller & interactions
└── demo/
    └── index.html          # This demo page