Add templates, tests, and miscellaneous project files

Includes new page templates (fitness-gym, nonprofit, online-course,
photography-studio, real-estate, startup-company, travel-blog,
wedding-invitation) with thumbnail SVGs, test specs, documentation
files, and minor updates to index.html, router.php, and playwright config.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

TEMPLATE_UI_FIX.md

@@ -0,0 +1,148 @@
+# Template Display & UI/UX Fix - Complete
+
+## Summary
+Fixed template display issues and improved UI/UX by moving Templates from left panel to top navigation as a full-screen modal.
+
+## Changes Made
+
+### 1. **index.html**
+
+#### Added Templates button to top navigation (between Clear and Export)
+```html
+<button id="btn-templates" class="nav-btn" title="Templates">
+    <svg>...</svg>
+    <span>Templates</span>
+</button>
+<span class="divider"></span>
+```
+
+#### Removed Templates tab from left panel
+- Removed: `<button class="panel-tab" data-panel="templates">Templates</button>`
+- Now only 4 tabs: Blocks, Pages, Layers, Assets (no horizontal scrollbar)
+
+#### Removed templates container from left panel
+- Deleted entire `<div id="templates-container">` section
+
+#### Added new full-screen Templates Browser Modal
+```html
+<div id="templates-browser-modal" class="modal-overlay">
+    <div class="modal export-modal">
+        <!-- Template browser with filters and grid -->
+    </div>
+</div>
+```
+
+### 2. **js/editor.js**
+
+#### Updated panel switching logic
+- Removed `templates-container` display handling
+- Now only handles: blocks, pages, layers, assets
+
+#### Added Templates Browser Modal handlers
+```javascript
+// Open/close modal functions
+function openTemplatesBrowser() { ... }
+function closeTemplatesBrowser() { ... }
+
+// Event listeners
+- Click #btn-templates → opens modal
+- Click close button → closes modal
+- Click outside modal → closes modal
+- Press ESC key → closes modal
+```
+
+#### Improved template loading
+- Added `closeTemplatesBrowser()` call after template confirmation
+- Better error handling with HTTP status checks
+- Enhanced console logging for debugging
+
+#### Enhanced error messages
+- Better error display in template grid
+- Detailed console logging for fetch failures
+- User-friendly error alerts with context
+
+### 3. **css/editor.css**
+
+#### Modal styling for templates browser
+```css
+#templates-browser-modal .modal {
+    width: 80vw;
+    max-width: 1200px;
+    max-height: 85vh;
+}
+```
+
+#### Updated templates grid for modal layout
+```css
+.templates-grid {
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 16px;
+    padding: 20px 0;
+}
+```
+
+#### Fixed modal-overlay display handling
+- Changed from `opacity/visibility` to `display: none/flex`
+- Simplified modal show/hide logic
+
+## Testing Checklist
+
+✅ **Templates Button Visibility**
+- Templates button appears in top navigation
+- Button positioned between Clear and Export
+- Has icon and "Templates" label
+
+✅ **Left Panel Tabs**
+- Only 4 tabs now (Blocks, Pages, Layers, Assets)
+- No horizontal scrollbar
+- Clean, uncrowned UI
+
+✅ **Templates Modal**
+- Click Templates button → modal opens
+- Modal shows full-screen overlay
+- Template grid displays with proper spacing
+- Filter buttons work (All, Business, Portfolio, Personal)
+
+✅ **Template Loading**
+- Click template card → confirmation modal opens
+- Confirm → template loads, both modals close
+- Cancel → confirmation modal closes, browser stays open
+- Success notification appears
+
+✅ **Modal Interactions**
+- ESC key closes templates browser
+- Click outside modal closes it
+- Close button (X) works
+- All interactions feel smooth
+
+✅ **Error Handling**
+- Template index loading errors show friendly message
+- Template file loading errors show alert with details
+- Console logs helpful debugging info
+
+## Files Modified
+1. `/home/jknapp/code/site-builder/index.html`
+2. `/home/jknapp/code/site-builder/js/editor.js`
+3. `/home/jknapp/code/site-builder/css/editor.css`
+
+## Design Pattern
+Follows existing export modal pattern:
+- Full-screen overlay with dark backdrop
+- Large modal centered on screen
+- ESC key / outside click to close
+- Smooth transitions
+- Consistent styling with rest of app
+
+## Benefits
+1. **No horizontal scrollbar** - Left panel now fits comfortably
+2. **Better template browsing** - Large grid view with more space
+3. **Clean interface** - Less crowded left panel
+4. **Consistent UX** - Matches export modal pattern
+5. **Easier template selection** - Full-screen view shows more templates at once
+6. **Better error handling** - Users know when/why things fail
+
+## Notes
+- Templates load via fetch() which works fine with http:// and https://
+- For file:// protocol testing, use `python3 -m http.server` or similar
+- Template thumbnails fallback to colored background if SVG missing
+- All 8 templates in templates/index.json display correctly