/** * Website Builder op Maat - 4 Stappen * Professionele website creator met AI-generatie * Features: KvK integratie, profiel generatie, diensten selectie, preview & thema's */ header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0'); header('Pragma: no-cache'); $current_host = $_SERVER['HTTP_HOST'] ?? 'localhost'; $scheme = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on') ? 'https' : 'http'; $base = $scheme . '://' . $current_host; $is_itlive = in_array(strtolower($current_host), ['www.itlive.nl', 'itlive.nl'], true); $api_url = $base . '/api/lead-generator-website-op-maat.php'; $canonical = $is_itlive ? 'https://itlive.nl/lead-generator-website-op-maat/enhanced-builder' : $base . '/lead-generator-website-op-maat/enhanced-builder'; ?>
🚀

Website op maat – in 4 stappen

Maak direct je eigen website met AI – in 4 stappen

KvK Gegevens Ophalen
AI Profiel Generatie
Diensten Selectie
Live Preview

Kleur Presets

Professional
Blauw & Grijs
Warm
Oranje & Rood
Fresh
Groen & Aqua
Technical
Rood & Donker

Primaire Kleuren

Achtergrond Kleuren

Status Kleuren

Typografie Presets

Modern
Clean & Minimal
Elegant
Classic & Sophisticated
Technical
Professional & Bold
Creative
Bold & Expressive

Lettertype Families

Aa Bb Cc 123
The quick brown fox jumps over the lazy dog.
const code = 'example';

Font Sizes

3rem
2.5rem
2rem
1.5rem
1rem
0.875rem

Font Weights

Foto Upload

Sleep foto's hierheen of klik om te uploaden

Ondersteunde formaten: JPG, PNG, WebP, SVG (Max 5MB per foto)

Zoek Professionele Foto's

Foto Categorieën

Component Presets

Minimal
Clean & Simple
Bold
Strong & Impactful
Soft
Gentle & Rounded
Technical
Professional & Sharp

Knop Stijlen

8px

Card Stijlen

12px
16px
Default Card

Dit is een voorbeeld van de default card stijl.

Elevated Card

Dit is een voorbeeld van de elevated card stijl.

Custom CSS

Custom JavaScript

Theme Metadata

Live Preview

Export Options

Theme Information
Bericht
`; } exportTheme() { return { theme: this.currentTheme, css: this.generateCSS(), html: this.generateHTML() }; } importTheme(themeData) { try { this.currentTheme = JSON.parse(JSON.stringify(themeData)); return true; } catch (error) { console.error('Import failed:', error); return false; } } } // Initialize Advanced Theme Builder const advancedThemeBuilder = new AdvancedThemeBuilder(); // Tab Switching function switchBuilderTab(tabName) { // Update tab buttons document.querySelectorAll('.theme-builder-tab').forEach(tab => { tab.classList.remove('active'); }); event.target.classList.add('active'); // Update panels document.querySelectorAll('.theme-builder-panel-content').forEach(panel => { panel.classList.remove('active'); }); document.getElementById(tabName + '-panel').classList.add('active'); // Initialize specific tab content if (tabName === 'photos') { renderPhotoCategories(); } } // Color Functions function updateThemeColor(colorName, value) { advancedThemeBuilder.updateThemeProperty(`colors.${colorName}`, value); // Update hex input const hexInput = document.getElementById(colorName + '-hex'); if (hexInput) hexInput.value = value; // Update color picker const colorPicker = document.getElementById(colorName + '-color'); if (colorPicker) colorPicker.value = value; updatePreview(); } function applyColorPreset(presetName) { const presets = { professional: { primary: '#1e40af', secondary: '#64748b', accent: '#0ea5e9', background: '#ffffff', surface: '#f8fafc', text: '#1e293b', success: '#10b981', warning: '#f59e0b', error: '#ef4444' }, warm: { primary: '#ea580c', secondary: '#dc2626', accent: '#f97316', background: '#ffffff', surface: '#fef2f2', text: '#1e293b', success: '#10b981', warning: '#f59e0b', error: '#ef4444' }, fresh: { primary: '#059669', secondary: '#0891b2', accent: '#10b981', background: '#ffffff', surface: '#ecfdf5', text: '#1e293b', success: '#10b981', warning: '#f59e0b', error: '#ef4444' }, technical: { primary: '#dc2626', secondary: '#991b1b', accent: '#ef4444', background: '#ffffff', surface: '#fef2f2', text: '#1e293b', success: '#10b981', warning: '#f59e0b', error: '#ef4444' } }; const preset = presets[presetName]; if (preset) { Object.keys(preset).forEach(colorName => { updateThemeColor(colorName, preset[colorName]); }); showNotification(`Color preset "${presetName}" toegepast!`, 'success'); } } // Typography Functions function updateTypography(property, value) { advancedThemeBuilder.updateThemeProperty(`typography.${property}`, value); // Update preview if (property === 'font_heading') { document.getElementById('heading-preview').style.fontFamily = value; } else if (property === 'font_body') { document.getElementById('body-preview').style.fontFamily = value; } else if (property === 'font_mono') { document.getElementById('mono-preview').style.fontFamily = value; } updatePreview(); } function updateFontSize(size, value) { advancedThemeBuilder.updateThemeProperty(`typography.font_sizes.${size}`, value); document.getElementById(size + '-value').textContent = value; updatePreview(); } function updateFontWeight(weight, value) { advancedThemeBuilder.updateThemeProperty(`typography.font_weights.${weight}`, value); updatePreview(); } function applyTypographyPreset(presetName) { const presets = { modern: { font_heading: 'Inter, sans-serif', font_body: 'Inter, sans-serif', font_mono: 'JetBrains Mono, monospace', font_sizes: { h1: '3rem', h2: '2.5rem', h3: '2rem', h4: '1.5rem', body: '1rem', small: '0.875rem' }, font_weights: { heading: '700', body: '400', bold: '600' } }, elegant: { font_heading: 'Playfair Display, serif', font_body: 'Source Sans 3, sans-serif', font_mono: 'JetBrains Mono, monospace', font_sizes: { h1: '3.5rem', h2: '3rem', h3: '2.5rem', h4: '2rem', body: '1rem', small: '0.875rem' }, font_weights: { heading: '700', body: '400', bold: '600' } }, technical: { font_heading: 'DM Sans, sans-serif', font_body: 'Inter, sans-serif', font_mono: 'JetBrains Mono, monospace', font_sizes: { h1: '2.5rem', h2: '2rem', h3: '1.5rem', h4: '1.25rem', body: '1rem', small: '0.875rem' }, font_weights: { heading: '700', body: '500', bold: '700' } }, creative: { font_heading: 'Montserrat, sans-serif', font_body: 'Open Sans, sans-serif', font_mono: 'Space Grotesk, sans-serif', font_sizes: { h1: '3.5rem', h2: '3rem', h3: '2.5rem', h4: '2rem', body: '1rem', small: '0.875rem' }, font_weights: { heading: '800', body: '400', bold: '700' } } }; const preset = presets[presetName]; if (preset) { Object.keys(preset).forEach(category => { if (typeof preset[category] === 'object') { Object.keys(preset[category]).forEach(key => { advancedThemeBuilder.updateThemeProperty(`typography.${category}.${key}`, preset[category][key]); }); } else { advancedThemeBuilder.updateThemeProperty(`typography.${category}`, preset[category]); } }); // Update UI document.getElementById('heading-font').value = preset.font_heading; document.getElementById('body-font').value = preset.font_body; document.getElementById('mono-font').value = preset.font_mono; Object.keys(preset.font_sizes).forEach(size => { const slider = document.getElementById(size + '-size'); const valueSpan = document.getElementById(size + '-value'); if (slider) { slider.value = parseFloat(preset.font_sizes[size]); if (valueSpan) valueSpan.textContent = preset.font_sizes[size]; } }); updatePreview(); showNotification(`Typography preset "${presetName}" toegepast!`, 'success'); } } // Photo Functions function handlePhotoUpload(event) { const files = event.target.files; const uploadPromises = []; for (let file of files) { uploadPromises.push(advancedThemeBuilder.photoManager.uploadPhoto(file)); } Promise.all(uploadPromises) .then(photos => { photos.forEach(photo => { advancedThemeBuilder.addPhotoToTheme(photo, 'custom'); }); renderPhotoCategories(); updatePreview(); showNotification(`${photos.length} foto('s) geüpload!`, 'success'); }) .catch(error => { showNotification('Upload mislukt: ' + error.message, 'error'); }); } function searchPhotos() { const query = document.getElementById('photo-search').value; const category = document.getElementById('photo-category').value; if (!query) { showNotification('Voer een zoekterm in', 'error'); return; } advancedThemeBuilder.photoManager.searchPhotos(query, category) .then(photos => { const resultsContainer = document.getElementById('photo-search-results'); resultsContainer.innerHTML = photos.map(photo => `
${photo.alt}
${photo.alt}
`).join(''); }); } function addPhotoToTheme(id, url, alt, category) { const photo = { id, url, alt, category, added_at: new Date().toISOString() }; if (advancedThemeBuilder.addPhotoToTheme(photo, category)) { renderPhotoCategories(); updatePreview(); showNotification('Foto toegevoegd aan thema!', 'success'); } else { showNotification('Maximum aantal foto\'s bereikt', 'error'); } } function removePhoto(photoId, category) { advancedThemeBuilder.removePhotoFromTheme(photoId, category); renderPhotoCategories(); updatePreview(); showNotification('Foto verwijderd!', 'info'); } function renderPhotoCategories() { const categories = ['hero', 'services', 'about', 'gallery', 'testimonials', 'custom']; const container = document.getElementById('photo-categories'); container.innerHTML = categories.map(category => { const photos = advancedThemeBuilder.currentTheme.photos[category] || []; return `
${category}
${photos.length} foto's
${photos.slice(0, 6).map(photo => `
${photo.alt || ''}
`).join('')} ${photos.length === 0 ? `
Nog geen foto's in deze categorie
` : ''}
`; }).join(''); } // Component Functions function updateComponent(path, value) { advancedThemeBuilder.updateThemeProperty(`components.${path}`, value); // Update preview const parts = path.split('.'); if (parts[0] === 'buttons' && parts[1] === 'primary') { if (parts[2] === 'background') { document.getElementById('btn-primary-preview').style.background = value; } else if (parts[2] === 'color') { document.getElementById('btn-primary-preview').style.color = value; } else if (parts[2] === 'radius') { document.getElementById('btn-primary-preview').style.borderRadius = value; document.getElementById('btn-secondary-preview').style.borderRadius = value; } } else if (parts[0] === 'buttons' && parts[1] === 'secondary') { if (parts[2] === 'background') { document.getElementById('btn-secondary-preview').style.background = value; } else if (parts[2] === 'color') { document.getElementById('btn-secondary-preview').style.color = value; } else if (parts[2] === 'border') { document.getElementById('btn-secondary-preview').style.border = value; } } else if (parts[0] === 'cards') { const previewId = parts[1] + '-preview'; const preview = document.getElementById(previewId); if (preview) { if (parts[2] === 'background') { preview.style.background = value; } else if (parts[2] === 'border') { preview.style.border = value; } else if (parts[2] === 'radius') { preview.style.borderRadius = value; } else if (parts[2] === 'shadow') { preview.style.boxShadow = value; } } } updatePreview(); } function applyComponentPreset(presetName) { const presets = { minimal: { buttons: { primary: { background: '#000000', color: '#ffffff', border: 'none', padding: '8px 16px', radius: '4px' }, secondary: { background: 'transparent', color: '#000000', border: '1px solid #000000', padding: '8px 16px' } }, cards: { default: { background: '#ffffff', border: '1px solid #e5e7eb', radius: '4px', shadow: 'none' }, elevated: { background: '#ffffff', border: 'none', radius: '4px', shadow: '0 1px 3px rgba(0,0,0,0.1)' } } }, bold: { buttons: { primary: { background: '#000000', color: '#ffffff', border: 'none', padding: '16px 32px', radius: '8px' }, secondary: { background: 'transparent', color: '#000000', border: '3px solid #000000', padding: '16px 32px' } }, cards: { default: { background: '#ffffff', border: '2px solid #000000', radius: '12px', shadow: '0 4px 6px rgba(0,0,0,0.1)' }, elevated: { background: '#ffffff', border: 'none', radius: '16px', shadow: '0 20px 25px -5px rgba(0,0,0,0.1)' } } }, soft: { buttons: { primary: { background: '#6366f1', color: '#ffffff', border: 'none', padding: '12px 24px', radius: '24px' }, secondary: { background: 'transparent', color: '#6366f1', border: '2px solid #6366f1', padding: '12px 24px' } }, cards: { default: { background: '#ffffff', border: '1px solid #e5e7eb', radius: '16px', shadow: '0 1px 3px rgba(0,0,0,0.1)' }, elevated: { background: '#ffffff', border: 'none', radius: '20px', shadow: '0 10px 15px -3px rgba(0,0,0,0.1)' } } }, technical: { buttons: { primary: { background: '#dc2626', color: '#ffffff', border: 'none', padding: '12px 20px', radius: '6px' }, secondary: { background: 'transparent', color: '#dc2626', border: '2px solid #dc2626', padding: '12px 20px' } }, cards: { default: { background: '#ffffff', border: '1px solid #e5e7eb', radius: '8px', shadow: '0 4px 6px -1px rgba(0,0,0,0.1)' }, elevated: { background: '#ffffff', border: 'none', radius: '8px', shadow: '0 10px 15px -3px rgba(0,0,0,0.1)' } } } }; const preset = presets[presetName]; if (preset) { Object.keys(preset).forEach(category => { Object.keys(preset[category]).forEach(component => { Object.keys(preset[category][component]).forEach(property => { updateComponent(`${category}.${component}.${property}`, preset[category][component][property]); }); }); }); showNotification(`Component preset "${presetName}" toegepast!`, 'success'); } } // Advanced Functions function updateCustomCSS(css) { advancedThemeBuilder.updateThemeProperty('custom_css', css); updatePreview(); } function updateCustomJS(js) { advancedThemeBuilder.updateThemeProperty('custom_js', js); } function updateThemeMetadata(property, value) { advancedThemeBuilder.updateThemeProperty(`metadata.${property}`, value); if (property === 'name') { advancedThemeBuilder.updateThemeProperty('name', value); } updateThemeInfo(); } function updateThemeTags(tagsString) { const tags = tagsString.split(',').map(tag => tag.trim()).filter(tag => tag); advancedThemeBuilder.updateThemeProperty('metadata.tags', tags); } function formatCSS() { const cssTextarea = document.getElementById('custom-css'); if (cssTextarea) { let css = cssTextarea.value; css = css.replace(/\s*{\s*/g, ' {\n '); css = css.replace(/;\s*/g, ';\n '); css = css.replace(/\s*}\s*/g, '\n}\n'); cssTextarea.value = css; updateCustomCSS(css); showNotification('CSS geformatteerd!', 'success'); } } function validateCSS() { const css = document.getElementById('custom-css').value; if (css.includes('{') && css.includes('}')) { showNotification('CSS is geldig!', 'success'); } else { showNotification('CSS bevat fouten!', 'error'); } } function clearCustomCSS() { if (confirm('Weet je zeker dat je de custom CSS wilt wissen?')) { document.getElementById('custom-css').value = ''; updateCustomCSS(''); showNotification('Custom CSS gewist!', 'info'); } } function formatJS() { const jsTextarea = document.getElementById('custom-js'); if (jsTextarea) { let js = jsTextarea.value; js = js.replace(/;\s*/g, ';\n'); js = js.replace(/{\s*/g, ' {\n '); js = js.replace(/\s*}/g, '\n}'); jsTextarea.value = js; updateCustomJS(js); showNotification('JavaScript geformatteerd!', 'success'); } } function validateJS() { const js = document.getElementById('custom-js').value; try { new Function(js); showNotification('JavaScript is geldig!', 'success'); } catch (error) { showNotification('JavaScript bevat fouten: ' + error.message, 'error'); } } function clearCustomJS() { if (confirm('Weet je zeker dat je de custom JavaScript wilt wissen?')) { document.getElementById('custom-js').value = ''; updateCustomJS(''); showNotification('Custom JavaScript gewist!', 'info'); } } // Preview Functions function updatePreview() { const iframe = document.getElementById('previewFrame'); const themeData = advancedThemeBuilder.exportTheme(); if (iframe && themeData) { iframe.srcdoc = themeData.html; updateThemeInfo(); } } function openPreviewInNewTab() { const themeData = advancedThemeBuilder.exportTheme(); if (themeData) { const newWindow = window.open(); newWindow.document.write(themeData.html); newWindow.document.close(); } } // Export Functions function exportThemeAs(format) { const themeData = advancedThemeBuilder.exportTheme(); if (!themeData) return; let content, filename, mimeType; switch(format) { case 'json': content = JSON.stringify(themeData.theme, null, 2); filename = `${themeData.theme.name.replace(/\s+/g, '_')}_theme.json`; mimeType = 'application/json'; break; case 'css': content = themeData.css; filename = `${themeData.theme.name.replace(/\s+/g, '_')}_theme.css`; mimeType = 'text/css'; break; case 'html': content = themeData.html; filename = `${themeData.theme.name.replace(/\s+/g, '_')}_theme.html`; mimeType = 'text/html'; break; case 'zip': showNotification('ZIP export wordt binnenkort ontwikkeld!', 'info'); return; } const blob = new Blob([content], { type: mimeType }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; a.click(); URL.revokeObjectURL(url); showNotification(`Thema geëxporteerd als ${format.toUpperCase()}!`, 'success'); } // Theme Info function updateThemeInfo() { const theme = advancedThemeBuilder.currentTheme; const infoContainer = document.getElementById('theme-info'); if (infoContainer) { const photoCount = Object.values(theme.photos).flat().length; infoContainer.innerHTML = `
ID: ${theme.id}
Created: ${new Date(theme.metadata.created_at).toLocaleDateString()}
Updated: ${new Date(theme.metadata.updated_at).toLocaleDateString()}
Photos: ${photoCount}
`; } } // Utility Functions function showNotification(message, type = 'success') { const toast = document.getElementById('toast'); const toastMessage = document.getElementById('toastMessage'); toast.className = 'toast ' + type; toastMessage.textContent = message; toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 3000); } function startBuilding() { advancedThemeBuilder.createNewTheme('Mijn Nieuwe Thema'); updatePreview(); document.getElementById('builder').scrollIntoView({ behavior: 'smooth' }); showNotification('Nieuw thema aangemaakt! Begin met bouwen.', 'success'); } function loadExampleTheme() { // Load Alpha Flame theme as example advancedThemeBuilder.createNewTheme('Alpha Flame Technical Pro'); // Apply Alpha Flame colors applyColorPreset('technical'); // Apply technical typography applyTypographyPreset('technical'); // Apply technical components applyComponentPreset('technical'); // Update metadata updateThemeMetadata('name', 'Alpha Flame Technical Pro'); updateThemeMetadata('description', 'Professioneel thema voor technische installatiebedrijven'); document.getElementById('theme-tags').value = 'technical, professional, installation, alpha flame'; updateThemeTags('technical, professional, installation, alpha flame'); updatePreview(); document.getElementById('builder').scrollIntoView({ behavior: 'smooth' }); showNotification('Alpha Flame thema geladen!', 'success'); } function saveTheme() { const themeData = advancedThemeBuilder.exportTheme(); const json = JSON.stringify(themeData.theme, null, 2); const blob = new Blob([json], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `${themeData.theme.name.replace(/\s+/g, '_')}_theme.json`; a.click(); URL.revokeObjectURL(url); showNotification('Thema opgeslagen!', 'success'); } function publishTheme() { showNotification('Publiceren wordt binnenkort ontwikkeld!', 'info'); } // Initialize on page load document.addEventListener('DOMContentLoaded', function() { updatePreview(); updateThemeInfo(); });
🚀

Enhanced Website Builder

Maak professionele websites met 90+ sectie types, hero animaties, en AI-powered content generatie

90+ Sectie Types
AI Content Generator
15+ Thema's
Mobile Responsive

Kies Sectie Types

AI Sectie Generator

Beschrijf wat voor secties je nodig hebt en AI genereert ze voor je

AI Tips

  • Wees specifiek over je bedrijf type
  • Vermeld belangrijke functies die je nodig hebt
  • Beschrijf je doelgroep
  • AI kan ook content en afbeeldingen suggereren

Content Bewerken

Selecteer een sectie in de preview om de content te bewerken

Layout Instellingen

Geavanceerde Opties

Thema Presets

Kleur Aanpassingen

Live Preview

Bericht