cloud-hosting-platform/site-builder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add templates, tests, and miscellaneous project files

Browse Source 
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>
This commit is contained in:
Josh Knapp
2026-03-01 14:15:58 -08:00
parent 03f573b451
commit b511a6684d
61 changed files with 6919 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
templates/thumbnails/fitness-gym.svg Normal file
View File

@@ -0,0 +1,27 @@
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bg-fitness" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#18181b"/>
<stop offset="100%" style="stop-color:#2d1010"/>
</linearGradient>
</defs>
<rect width="400" height="260" rx="12" fill="url(#bg-fitness)"/>
<!-- Nav bar -->
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.4)"/>
<rect x="12" y="10" width="70" height="12" rx="3" fill="#ef4444" opacity="0.9"/>
<rect x="310" y="8" width="70" height="16" rx="4" fill="#ef4444"/>
<!-- Hero text -->
<rect x="40" y="58" width="240" height="20" rx="4" fill="rgba(255,255,255,0.95)"/>
<rect x="40" y="86" width="180" height="8" rx="3" fill="rgba(255,255,255,0.3)"/>
<!-- CTA -->
<rect x="40" y="108" width="110" height="26" rx="5" fill="#ef4444"/>
<!-- Class cards -->
<rect x="30" y="150" width="80" height="50" rx="6" fill="rgba(239,68,68,0.1)" stroke="#ef4444" stroke-width="0.5" opacity="0.6"/>
<rect x="120" y="150" width="80" height="50" rx="6" fill="rgba(239,68,68,0.1)" stroke="#ef4444" stroke-width="0.5" opacity="0.6"/>
<rect x="210" y="150" width="80" height="50" rx="6" fill="rgba(239,68,68,0.1)" stroke="#ef4444" stroke-width="0.5" opacity="0.6"/>
<rect x="300" y="150" width="80" height="50" rx="6" fill="rgba(239,68,68,0.1)" stroke="#ef4444" stroke-width="0.5" opacity="0.6"/>
<!-- Pricing -->
<rect x="60" y="215" width="80" height="30" rx="4" fill="rgba(255,255,255,0.05)"/>
<rect x="160" y="210" width="80" height="35" rx="4" fill="rgba(239,68,68,0.2)" stroke="#ef4444" stroke-width="0.5"/>
<rect x="260" y="215" width="80" height="30" rx="4" fill="rgba(255,255,255,0.05)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

28
templates/thumbnails/nonprofit-charity.svg Normal file
View File

@@ -0,0 +1,28 @@
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bg-nonprofit" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1e293b"/>
<stop offset="100%" style="stop-color:#14532d"/>
</linearGradient>
</defs>
<rect width="400" height="260" rx="12" fill="url(#bg-nonprofit)"/>
<!-- Nav bar -->
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
<rect x="12" y="10" width="80" height="12" rx="3" fill="#16a34a" opacity="0.8"/>
<rect x="310" y="8" width="70" height="16" rx="4" fill="#16a34a"/>
<!-- Hero text -->
<rect x="60" y="60" width="280" height="18" rx="4" fill="rgba(255,255,255,0.9)"/>
<rect x="90" y="86" width="220" height="8" rx="3" fill="rgba(255,255,255,0.3)"/>
<!-- CTA buttons -->
<rect x="120" y="108" width="80" height="22" rx="5" fill="#16a34a"/>
<rect x="210" y="108" width="70" height="22" rx="5" fill="rgba(255,255,255,0.1)"/>
<!-- Impact stats -->
<rect x="30" y="148" width="75" height="40" rx="4" fill="rgba(22,163,74,0.15)"/>
<rect x="115" y="148" width="75" height="40" rx="4" fill="rgba(22,163,74,0.15)"/>
<rect x="200" y="148" width="75" height="40" rx="4" fill="rgba(22,163,74,0.15)"/>
<rect x="285" y="148" width="75" height="40" rx="4" fill="rgba(22,163,74,0.15)"/>
<!-- Help cards -->
<rect x="40" y="205" width="100" height="35" rx="6" fill="rgba(255,255,255,0.06)"/>
<rect x="150" y="205" width="100" height="35" rx="6" fill="rgba(255,255,255,0.06)"/>
<rect x="260" y="205" width="100" height="35" rx="6" fill="rgba(255,255,255,0.06)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

30
templates/thumbnails/online-course.svg Normal file
View File

@@ -0,0 +1,30 @@
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bg-course" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#0f172a"/>
<stop offset="100%" style="stop-color:#3b1f7e"/>
</linearGradient>
</defs>
<rect width="400" height="260" rx="12" fill="url(#bg-course)"/>
<!-- Nav bar -->
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
<rect x="12" y="10" width="60" height="12" rx="3" fill="#8b5cf6" opacity="0.8"/>
<rect x="310" y="8" width="70" height="16" rx="4" fill="#8b5cf6"/>
<!-- Hero text -->
<rect x="50" y="58" width="220" height="18" rx="4" fill="rgba(255,255,255,0.9)"/>
<rect x="50" y="84" width="180" height="8" rx="3" fill="rgba(255,255,255,0.3)"/>
<!-- Stats -->
<rect x="50" y="104" width="60" height="10" rx="3" fill="rgba(139,92,246,0.4)"/>
<rect x="120" y="104" width="60" height="10" rx="3" fill="rgba(139,92,246,0.4)"/>
<rect x="190" y="104" width="60" height="10" rx="3" fill="rgba(139,92,246,0.4)"/>
<!-- Curriculum items -->
<rect x="30" y="130" width="160" height="20" rx="4" fill="rgba(255,255,255,0.06)"/>
<rect x="30" y="155" width="160" height="20" rx="4" fill="rgba(255,255,255,0.06)"/>
<rect x="30" y="180" width="160" height="20" rx="4" fill="rgba(255,255,255,0.06)"/>
<!-- Pricing card -->
<rect x="220" y="130" width="150" height="100" rx="8" fill="rgba(139,92,246,0.15)" stroke="#8b5cf6" stroke-width="0.5"/>
<rect x="250" y="150" width="90" height="14" rx="3" fill="#8b5cf6" opacity="0.6"/>
<rect x="255" y="200" width="80" height="20" rx="4" fill="#8b5cf6"/>
<!-- Accent circle -->
<circle cx="360" cy="60" r="30" fill="#8b5cf6" opacity="0.1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

27
templates/thumbnails/photography-studio.svg Normal file
View File

@@ -0,0 +1,27 @@
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bg-photo" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1c1917"/>
<stop offset="100%" style="stop-color:#2d2520"/>
</linearGradient>
</defs>
<rect width="400" height="260" rx="12" fill="url(#bg-photo)"/>
<!-- Nav bar -->
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
<rect x="12" y="10" width="80" height="12" rx="3" fill="#d4a574" opacity="0.8"/>
<rect x="280" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
<rect x="330" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
<!-- Hero text -->
<rect x="80" y="60" width="240" height="16" rx="4" fill="rgba(255,255,255,0.85)"/>
<rect x="110" y="84" width="180" height="8" rx="3" fill="rgba(255,255,255,0.3)"/>
<!-- CTA -->
<rect x="150" y="104" width="100" height="24" rx="5" fill="#d4a574"/>
<!-- Gallery grid -->
<rect x="30" y="145" width="108" height="80" rx="4" fill="rgba(212,165,116,0.15)"/>
<rect x="146" y="145" width="108" height="80" rx="4" fill="rgba(212,165,116,0.1)"/>
<rect x="262" y="145" width="108" height="80" rx="4" fill="rgba(212,165,116,0.15)"/>
<!-- Image placeholders inside gallery -->
<rect x="38" y="153" width="92" height="52" rx="3" fill="rgba(212,165,116,0.2)"/>
<rect x="154" y="153" width="92" height="52" rx="3" fill="rgba(212,165,116,0.25)"/>
<rect x="270" y="153" width="92" height="52" rx="3" fill="rgba(212,165,116,0.2)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

31
templates/thumbnails/real-estate.svg Normal file
View File

@@ -0,0 +1,31 @@
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bg-realestate" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#0f172a"/>
<stop offset="100%" style="stop-color:#0c3547"/>
</linearGradient>
</defs>
<rect width="400" height="260" rx="12" fill="url(#bg-realestate)"/>
<!-- Nav bar -->
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
<rect x="12" y="10" width="80" height="12" rx="3" fill="#0ea5e9" opacity="0.8"/>
<rect x="280" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
<rect x="330" y="10" width="50" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
<!-- Hero text -->
<rect x="60" y="55" width="200" height="18" rx="4" fill="rgba(255,255,255,0.9)"/>
<rect x="80" y="80" width="160" height="8" rx="3" fill="rgba(255,255,255,0.3)"/>
<!-- Search bar -->
<rect x="80" y="100" width="240" height="28" rx="6" fill="rgba(255,255,255,0.1)" stroke="rgba(14,165,233,0.3)" stroke-width="1"/>
<rect x="260" y="104" width="54" height="20" rx="4" fill="#0ea5e9"/>
<!-- Property cards -->
<rect x="30" y="148" width="108" height="90" rx="6" fill="rgba(255,255,255,0.06)"/>
<rect x="30" y="148" width="108" height="50" rx="6" fill="rgba(14,165,233,0.12)"/>
<rect x="146" y="148" width="108" height="90" rx="6" fill="rgba(255,255,255,0.06)"/>
<rect x="146" y="148" width="108" height="50" rx="6" fill="rgba(14,165,233,0.1)"/>
<rect x="262" y="148" width="108" height="90" rx="6" fill="rgba(255,255,255,0.06)"/>
<rect x="262" y="148" width="108" height="50" rx="6" fill="rgba(14,165,233,0.12)"/>
<!-- Price tags -->
<rect x="38" y="208" width="50" height="10" rx="3" fill="#0ea5e9" opacity="0.7"/>
<rect x="154" y="208" width="50" height="10" rx="3" fill="#0ea5e9" opacity="0.7"/>
<rect x="270" y="208" width="50" height="10" rx="3" fill="#0ea5e9" opacity="0.7"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

31
templates/thumbnails/startup-company.svg Normal file
View File

@@ -0,0 +1,31 @@
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bg-startup" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#0f172a"/>
<stop offset="100%" style="stop-color:#312e81"/>
</linearGradient>
</defs>
<rect width="400" height="260" rx="12" fill="url(#bg-startup)"/>
<!-- Nav bar -->
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
<rect x="12" y="10" width="65" height="12" rx="3" fill="#6366f1" opacity="0.8"/>
<rect x="310" y="8" width="70" height="16" rx="4" fill="#6366f1"/>
<!-- Hero text -->
<rect x="40" y="58" width="240" height="18" rx="4" fill="rgba(255,255,255,0.9)"/>
<rect x="40" y="84" width="200" height="8" rx="3" fill="rgba(255,255,255,0.3)"/>
<rect x="40" y="98" width="160" height="8" rx="3" fill="rgba(255,255,255,0.2)"/>
<!-- CTA buttons -->
<rect x="40" y="120" width="90" height="24" rx="5" fill="#6366f1"/>
<rect x="140" y="120" width="80" height="24" rx="5" fill="rgba(255,255,255,0.1)"/>
<!-- Decorative circle -->
<circle cx="340" cy="85" r="45" fill="#6366f1" opacity="0.1"/>
<circle cx="350" cy="75" r="25" fill="#818cf8" opacity="0.08"/>
<!-- Feature cards -->
<rect x="40" y="165" width="100" height="70" rx="6" fill="rgba(99,102,241,0.1)"/>
<rect x="150" y="165" width="100" height="70" rx="6" fill="rgba(99,102,241,0.1)"/>
<rect x="260" y="165" width="100" height="70" rx="6" fill="rgba(99,102,241,0.1)"/>
<!-- Feature icons -->
<circle cx="90" cy="185" r="8" fill="#6366f1" opacity="0.4"/>
<circle cx="200" cy="185" r="8" fill="#6366f1" opacity="0.4"/>
<circle cx="310" cy="185" r="8" fill="#6366f1" opacity="0.4"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

31
templates/thumbnails/travel-blog.svg Normal file
View File

@@ -0,0 +1,31 @@
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bg-travel" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1e293b"/>
<stop offset="100%" style="stop-color:#422006"/>
</linearGradient>
</defs>
<rect width="400" height="260" rx="12" fill="url(#bg-travel)"/>
<!-- Nav bar -->
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
<rect x="12" y="10" width="90" height="12" rx="3" fill="#f59e0b" opacity="0.8"/>
<rect x="280" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
<rect x="330" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
<!-- Hero with image overlay feel -->
<rect x="0" y="32" width="400" height="100" fill="rgba(245,158,11,0.05)"/>
<rect x="80" y="55" width="240" height="18" rx="4" fill="rgba(255,255,255,0.9)"/>
<rect x="100" y="80" width="200" height="8" rx="3" fill="rgba(255,255,255,0.3)"/>
<!-- CTA -->
<rect x="150" y="100" width="100" height="22" rx="5" fill="#f59e0b"/>
<!-- Blog post cards -->
<rect x="25" y="148" width="110" height="90" rx="6" fill="rgba(255,255,255,0.06)"/>
<rect x="25" y="148" width="110" height="55" rx="6" fill="rgba(245,158,11,0.12)"/>
<rect x="145" y="148" width="110" height="90" rx="6" fill="rgba(255,255,255,0.06)"/>
<rect x="145" y="148" width="110" height="55" rx="6" fill="rgba(245,158,11,0.1)"/>
<rect x="265" y="148" width="110" height="90" rx="6" fill="rgba(255,255,255,0.06)"/>
<rect x="265" y="148" width="110" height="55" rx="6" fill="rgba(245,158,11,0.12)"/>
<!-- Post titles -->
<rect x="33" y="212" width="70" height="8" rx="2" fill="rgba(255,255,255,0.5)"/>
<rect x="153" y="212" width="70" height="8" rx="2" fill="rgba(255,255,255,0.5)"/>
<rect x="273" y="212" width="70" height="8" rx="2" fill="rgba(255,255,255,0.5)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

28
templates/thumbnails/wedding-invitation.svg Normal file
View File

@@ -0,0 +1,28 @@
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bg-wedding" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1a1a2e"/>
<stop offset="100%" style="stop-color:#2d2348"/>
</linearGradient>
</defs>
<rect width="400" height="260" rx="12" fill="url(#bg-wedding)"/>
<!-- Nav bar -->
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
<rect x="160" y="10" width="80" height="12" rx="3" fill="#d4a574" opacity="0.8"/>
<!-- Decorative border -->
<rect x="60" y="50" width="280" height="170" rx="8" fill="none" stroke="#d4a574" stroke-width="1" opacity="0.3"/>
<!-- Couple names -->
<rect x="120" y="75" width="160" height="16" rx="4" fill="#d4a574" opacity="0.9"/>
<!-- Ampersand -->
<rect x="185" y="98" width="30" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
<!-- Date -->
<rect x="140" y="118" width="120" height="8" rx="3" fill="rgba(255,255,255,0.4)"/>
<!-- Divider -->
<rect x="170" y="135" width="60" height="1" fill="#d4a574" opacity="0.5"/>
<!-- Details cards -->
<rect x="80" y="148" width="70" height="40" rx="4" fill="rgba(212,165,116,0.1)" stroke="#d4a574" stroke-width="0.5" opacity="0.5"/>
<rect x="165" y="148" width="70" height="40" rx="4" fill="rgba(212,165,116,0.1)" stroke="#d4a574" stroke-width="0.5" opacity="0.5"/>
<rect x="250" y="148" width="70" height="40" rx="4" fill="rgba(212,165,116,0.1)" stroke="#d4a574" stroke-width="0.5" opacity="0.5"/>
<!-- RSVP button -->
<rect x="155" y="200" width="90" height="24" rx="5" fill="#d4a574"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB