Page Templates

Ready-made Templates

Copy full-page layouts built with ColorSnap UI and the Midnight theme. Drop them into any project via CDN.

`; } const TEMPLATES = [ { id: 'landing', name: 'Landing Page', category: 'marketing', description: 'Hero section with badge, gradient headline, and dual CTAs for product launches.', tags: ['Marketing', 'Hero', 'CDN'], body: `
Acme
✨ v1.0 is live

Ship beautiful products faster

ColorSnap UI gives you production-ready components, 52 themes, and a two-line CDN setup.

` }, { id: 'login', name: 'Login Page', category: 'auth', description: 'Centered sign-in card with email, password, and social login divider.', tags: ['Auth', 'Form', 'CDN'], body: `

Welcome back

Sign in to your account

` }, { id: 'dashboard', name: 'Dashboard', category: 'app', description: 'Sidebar navigation with KPI stat cards and a recent activity table.', tags: ['App', 'Dashboard', 'Table'], body: `

Overview

Revenue

$48,290

+12%

Users

12,438

+8%

Orders

3,291

-2%

Churn

1.4%

Stable

Recent orders

CustomerPlanStatus
Alex RiveraProPaid
Jamie ChenTeamPending
` }, { id: 'pricing', name: 'Pricing Page', category: 'marketing', description: 'Three-tier pricing grid with highlighted Pro plan and feature bullets.', tags: ['Marketing', 'Pricing', 'Cards'], body: `

Simple, transparent pricing

No hidden fees. Upgrade or cancel anytime.

Free

$0/mo

  • 5 projects
  • Community support
Popular

Pro

$29/mo

  • Unlimited projects
  • Priority support
  • All themes

Enterprise

Custom

  • SSO & SLA
  • Dedicated support
` }, { id: 'profile', name: 'Profile Page', category: 'app', description: 'User profile header with avatar, bio, and editable account details form.', tags: ['App', 'Profile', 'Avatar'], body: `
AR

Alex Rivera

Product designer · San Francisco

Pro Since 2024

Account details

` }, { id: 'contact', name: 'Contact Page', category: 'content', description: 'Split layout with contact info and a message form with subject field.', tags: ['Content', 'Form', 'Contact'], body: `

Get in touch

We typically respond within one business day.

Email
hello@colorsnap.dev

Office
123 Design St, SF

` }, { id: 'blog', name: 'Blog Layout', category: 'content', description: 'Blog index with featured post hero and a grid of article cards.', tags: ['Content', 'Blog', 'Grid'], body: `

The ColorSnap Blog

Design systems, releases, and tutorials.

Featured

Introducing 52 themes in one CDN line

How we built a zero-config theme engine for vanilla HTML and React.

Read more →
Tutorial

Building a dashboard in 10 minutes

Jan 12, 2025

Release

v1.0 stable is here

Jan 1, 2025

Guide

CLI workflows for teams

Dec 20, 2024

` }, { id: 'settings', name: 'Settings Page', category: 'app', description: 'Tabbed settings panel for profile, notifications, and security preferences.', tags: ['App', 'Settings', 'Tabs'], body: `

Settings

` }, { id: 'empty', name: 'Empty States', category: 'ui', description: 'Friendly empty state with icon, message, and primary action button.', tags: ['UI', 'Empty', 'States'], body: `

No items yet

Create your first project to see it listed here.

` }, { id: '404', name: '404 Page', category: 'ui', description: 'Minimal not-found page with large code, explanation, and home link.', tags: ['UI', 'Error', '404'], body: `

404

Page not found

The page you are looking for does not exist or was moved.

Back to home
` } ]; /* Inline layout helpers for template previews (scoped via srcdoc) */ const TEMPLATE_STYLES = ``; TEMPLATES.forEach((t) => { t.html = wrapTemplate(TEMPLATE_STYLES + t.body); }); const grid = document.getElementById('templates-grid'); const overlay = document.getElementById('modal-overlay'); const modalCode = document.getElementById('modal-code'); const modalTitle = document.getElementById('modal-title'); const modalCopy = document.getElementById('modal-copy'); let activeHtml = ''; function renderCards() { grid.innerHTML = TEMPLATES.map((t) => `

${t.name}

${t.description}

${t.tags.map((tag) => `${tag}`).join('')}
`).join(''); TEMPLATES.forEach((t) => { const frame = grid.querySelector(`iframe[data-srcdoc-id="${t.id}"]`); if (frame) frame.srcdoc = t.html; }); } function openModal(tpl) { activeHtml = tpl.html; modalTitle.textContent = tpl.name + ' — HTML'; modalCode.textContent = tpl.html; overlay.classList.add('open'); overlay.setAttribute('aria-hidden', 'false'); document.body.style.overflow = 'hidden'; } function closeModal() { overlay.classList.remove('open'); overlay.setAttribute('aria-hidden', 'true'); document.body.style.overflow = ''; } function filterTemplates(filter) { document.querySelectorAll('.filter-tab').forEach((tab) => { tab.classList.toggle('active', tab.dataset.filter === filter); }); document.querySelectorAll('.template-card').forEach((card) => { const cat = card.dataset.category; const show = filter === 'all' || cat === filter; card.classList.toggle('hidden', !show); }); } renderCards(); document.querySelectorAll('.filter-tab').forEach((tab) => { tab.addEventListener('click', () => filterTemplates(tab.dataset.filter)); }); grid.addEventListener('click', (e) => { const btn = e.target.closest('.copy-html-btn'); if (!btn) return; const tpl = TEMPLATES.find((t) => t.id === btn.dataset.id); if (tpl) openModal(tpl); }); document.getElementById('modal-close').addEventListener('click', closeModal); overlay.addEventListener('click', (e) => { if (e.target === overlay) closeModal(); }); document.querySelector('.modal').addEventListener('click', (e) => e.stopPropagation()); document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && overlay.classList.contains('open')) closeModal(); }); modalCopy.addEventListener('click', () => { navigator.clipboard.writeText(activeHtml).then(() => { const prev = modalCopy.textContent; modalCopy.textContent = 'Copied!'; setTimeout(() => { modalCopy.textContent = prev; }, 2000); }); });