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>
2026-03-01 14:15:58 -08:00
parent 03f573b451
commit b511a6684d
61 changed files with 6919 additions and 6 deletions
--- a/VIDEO_BG_FIX.md
+++ b/VIDEO_BG_FIX.md
@@ -0,0 +1,168 @@
+# Video Background Section - Fixed!
+
+## Problem
+The "Section (Video BG)" block didn't show the Video URL input field in the Settings panel when selected.
+
+## Root Cause
+The Video URL trait was only on the inner `bg-video-wrapper` element, which is deeply nested and hard to select directly. Users were selecting the outer `<section>` element, which didn't have the trait.
+
+## Solution ✅
+Added a new component type `video-section` that:
+1. Detects the outer section element (`data-video-section="true"`)
+2. Shows the Video URL trait in the Settings panel when selected
+3. Propagates the URL to the inner `bg-video-wrapper` element automatically
+
+## How to Use Now
+
+### Step 1: Add Video Background Section
+1. Open the **Blocks** panel (left sidebar)
+2. Find **"Section (Video BG)"** under Layout category
+3. Drag it onto the canvas
+
+### Step 2: Select the Section
+1. Click anywhere on the video background section
+2. The section should be highlighted/selected
+
+### Step 3: Add Your Video URL
+1. Look at the **right sidebar** → **Settings tab**
+2. You should now see a **"Video URL"** field
+3. Paste your YouTube URL (or Vimeo, or .mp4)
+   - Example: `https://www.youtube.com/watch?v=dQw4w9WgXcQ`
+
+### Step 4: Watch It Load
+1. Video should appear in the background automatically
+2. Click the play button to start playback
+3. The video will loop and be muted (best practice for background videos)
+
+## Supported Video Sources
+
+### YouTube
+```
+https://www.youtube.com/watch?v=VIDEO_ID
+https://youtu.be/VIDEO_ID
+```
+
+### Vimeo
+```
+https://vimeo.com/VIDEO_ID
+https://player.vimeo.com/video/VIDEO_ID
+```
+
+### Direct Video Files
+```
+https://example.com/video.mp4
+https://example.com/video.webm
+```
+
+## Troubleshooting
+
+### "I don't see the Video URL field"
+**Fix:** Make sure you're clicking on the section itself (the outer container), not the text inside it.
+- Look for the section to be highlighted with a blue border
+- Check the Layers panel (left sidebar) - you should see the section selected
+
+### "Video doesn't load"
+**Possible causes:**
+1. **Invalid URL** - Make sure it's a proper YouTube/Vimeo/video file URL
+2. **Embedding restrictions** - Some YouTube videos don't allow embedding
+3. **Network issue** - Check your internet connection
+
+### "Video shows Error 153"
+**This is fixed!** The autoplay parameter has been removed. If you still see this:
+1. Clear your browser cache
+2. Refresh the page
+3. Re-add the video URL
+
+### "I want the video to autoplay"
+Background videos **don't autoplay by default** anymore (to avoid Error 153). They will:
+- Show a placeholder with a play button icon
+- Start playing when clicked
+- Loop continuously once playing
+- Be muted (required for background videos)
+
+## Customization Tips
+
+### Change Overlay Opacity
+1. Select the section
+2. In Layers panel (left), expand the section
+3. Select the `bg-overlay` layer
+4. In Styles panel, adjust the background opacity
+
+### Change Content Styling
+1. The white text is in the `bg-content` layer
+2. Select it in Layers panel
+3. Customize in Styles panel:
+   - Text color
+   - Font size
+   - Background (if you want a box behind the text)
+
+### Adjust Section Height
+1. Select the section
+2. In Styles → Guided panel:
+   - Look for Height controls
+   - Or switch to Advanced tab
+   - Set `min-height` to your desired size (e.g., `600px`, `100vh`)
+
+## Technical Details
+
+### Component Hierarchy
+```
+<section data-video-section="true">  ← Video URL trait here (NEW!)
+  ├── <div data-bg-video="true">    ← Video wrapper (also has trait)
+  │   ├── <iframe>                   ← YouTube/Vimeo iframe
+  │   ├── <video>                    ← Direct video file
+  │   └── <div.placeholder>          ← "Click to add video" message
+  ├── <div.bg-overlay>               ← Dark overlay (adjustable)
+  └── <div.bg-content>               ← Your content (text, buttons, etc.)
+      └── <h2>, <p>, etc.
+```
+
+### How It Works
+1. User enters URL in Settings panel (outer section)
+2. Component detects URL change
+3. Finds inner `bg-video-wrapper` element
+4. Propagates URL to wrapper
+5. Wrapper parses URL (YouTube/Vimeo/file)
+6. Shows correct element (iframe or video tag)
+7. Hides placeholder
+8. Video is ready to play!
+
+## Files Changed
+
+**`/home/jknapp/code/site-builder/js/editor.js`:**
+- Added `video-section` component type (lines ~1207-1230)
+- Updated placeholder text for clarity
+- Propagates Video URL from section → wrapper
+
+## Before vs After
+
+### Before (Broken)
+```
+User clicks section
+→ No Video URL field in Settings
+→ User confused, can't add video
+→ Need to dig into Layers panel to find bg-video-wrapper
+```
+
+### After (Fixed)
+```
+User clicks section
+→ Video URL field shows in Settings ✅
+→ User enters URL
+→ Video loads automatically ✅
+→ Easy and intuitive!
+```
+
+## Next Steps
+
+Want to enhance the video background experience? Future ideas:
+
+1. **Autoplay toggle** - Optional checkbox to enable autoplay (with warning about Error 153)
+2. **Playback controls** - Show/hide play/pause button overlay
+3. **Video presets** - Pre-configured video backgrounds (nature, city, abstract)
+4. **Fallback image** - Show image while video loads or if it fails
+5. **Mobile optimization** - Option to use static image on mobile (saves data/battery)
+
+---
+
+**Enjoy your video backgrounds!** 🎥✨