...
```
3. **Add scripts before closing ``:**
```html
```
## Quick Integration for team-members.html
Same as index.html, but use:
```javascript
const nav = new SpecMemNavigation({
currentPage: 'team-members'
});
```
## Quick Integration for Other Pages
1. **Include theme:**
```html
```
2. **Add basic structure:**
```html
```
3. **Add page-specific styles:**
```html
```
## Using Toast Notifications
Toast is auto-initialized as a global `specmemToast` object:
```javascript
// Success notification
specmemToast.success('Memory saved successfully!');
// Error notification
specmemToast.error('Failed to load data');
// Warning notification
specmemToast.warning('Session will expire soon');
// Info notification
specmemToast.info('New team member connected');
// With custom options
specmemToast.success('Operation completed', {
title: 'Success',
duration: 3000, // 3 seconds
icon: '✓'
});
// Manual dismiss (duration: 0)
const toast = specmemToast.error('Critical error', { duration: 0 });
// Later: specmemToast.dismiss(toast);
```
## Using CSS Variables
Replace hardcoded values with variables:
```css
/* OLD */
color: #FFD700;
background: #1a1a1a;
padding: 16px;
/* NEW */
color: var(--csgo-yellow);
background: var(--csgo-gray);
padding: var(--spacing-md);
```
### Available Variables
**Colors:**
- `--csgo-yellow`, `--csgo-yellow-dark`, `--csgo-yellow-glow`
- `--csgo-black`, `--csgo-dark`, `--csgo-darker`
- `--csgo-gray`, `--csgo-gray-light`
- `--csgo-text`, `--csgo-text-dim`
- `--csgo-success`, `--csgo-error`, `--csgo-warning`
**Spacing:**
- `--spacing-xs` (4px), `--spacing-sm` (8px)
- `--spacing-md` (16px), `--spacing-lg` (24px)
**Transitions:**
- `--transition-fast` (0.15s), `--transition-normal` (0.3s)
**Shadows:**
- `--shadow-sm`, `--shadow-md`, `--shadow-lg`
- `--shadow-yellow`, `--shadow-yellow-strong`
## Using Utility Classes
Add to HTML instead of writing CSS:
```html
Yellow heading
Success message
Error message
Glowing text
Yellow shadow
Fades in on load
Slides up on load
Online
Offline
```
## Migration Checklist
For each page you modernize:
- [ ] Include `shared-theme.css`
- [ ] Include `index-improvements.css` (optional)
- [ ] Replace hardcoded colors with CSS variables
- [ ] Add shared header component
- [ ] Add shared navigation component
- [ ] Add toast notifications
- [ ] Test keyboard navigation (Tab, Arrow keys)
- [ ] Test on mobile (Chrome DevTools)
- [ ] Test on Firefox
- [ ] Verify accessibility (screen reader, keyboard only)
- [ ] Check console for errors
## Benefits Summary
### For Users
- Consistent experience across all pages
- Faster navigation
- Better mobile support
- Accessible to keyboard/screen reader users
- Smoother animations
### For Developers
- Reusable components
- Less code duplication
- Easier maintenance
- Faster development
- Modern CSS practices
## Example: Converting a Button
**Before:**
```html
Save
```
**After:**
```html
Save
```
**With toast feedback:**
```javascript
function saveData() {
try {
// ... save logic ...
specmemToast.success('Data saved successfully!');
} catch (error) {
specmemToast.error('Failed to save: ' + error.message);
}
}
```
## Common Patterns
### Loading State
```javascript
// Show loading
document.getElementById('myCard').classList.add('loading-skeleton');
// After data loads
document.getElementById('myCard').classList.remove('loading-skeleton');
```
### Status Indicator
```html
Team Member Alpha
```
### Animated Card Grid
```html
```
## Testing Your Integration
1. **Visual Test:**
- Open page in browser
- Check header appears correctly
- Verify navigation highlights current page
- Test hover effects
2. **Interaction Test:**
- Click navigation items
- Test keyboard navigation (Tab, Arrow keys)
- Try toast notifications
3. **Responsive Test:**
- Resize browser to mobile size (< 480px)
- Check navigation moves to bottom
- Verify touch interactions work
4. **Accessibility Test:**
- Use keyboard only (no mouse)
- Check focus indicators visible
- Verify ARIA labels present
## Troubleshooting
**Navigation not appearing:**
```javascript
// Check if component loaded
console.log(typeof SpecMemNavigation);
// Should output: 'function'
// Check container exists
console.log(document.getElementById('specmem-nav'));
// Should output:
```
**Toast not working:**
```javascript
// Check global instance
console.log(specmemToast);
// Should output: SpecMemToast {container: div.toast-container, ...}
```
**Styles not applying:**
- Check CSS file paths are correct
- Look for 404 errors in Network tab
- Verify no conflicting styles override
## Need Help?
1. Check **DASHBOARD-README.md** for full documentation
2. Look at **example-page.html** for working example
3. Check browser console for errors
4. Test in isolated environment first
## Future Enhancements
Potential additions (not yet implemented):
- [ ] Dark/light mode toggle
- [ ] User preferences persistence
- [ ] Advanced search component
- [ ] Data visualization components
- [ ] Drag-and-drop utilities
- [ ] Advanced form validation
---
**Last Updated:** 2025-12-13
**Created By:** Beta TeamMember
**Status:** Ready for Integration