🌐 AI Website Generator

Erstellen Sie professionelle Websites mit KI-Unterstützung

Website Generator

Wählen Sie Kategorie, Framework und erstellen Sie Ihre Website

💡 KI-Ideen Generator
0 / 5000 Zeichen Detaillierte Beschreibung = bessere Ergebnisse

${sections.title}

${sections.subtitle}

Unsere Leistungen

Entdecken Sie, was unsere Lösung so einzigartig macht

${sections.features.map((feature, index) => `

${feature}

Professionelle Umsetzung mit höchster Qualität und Aufmerksamkeit für Details.

`).join('')}

Über uns

${sections.about}

Höchste Qualitätsstandards
Zuverlässige Betreuung
Innovative Lösungen

Bereit für den nächsten Schritt?

${sections.contact}

`; } function generateBootstrapHTML(sections) { return ` ${sections.title}

${sections.title}

${sections.subtitle}

Unsere Leistungen

Entdecken Sie, was unsere Lösung so einzigartig macht

${sections.features.map((feature, index) => `
${feature}

Professionelle Umsetzung mit höchster Qualität und Aufmerksamkeit für Details.

`).join('')}

Über uns

${sections.about}

  • ✓ Höchste Qualitätsstandards
  • ✓ Zuverlässige Betreuung
  • ✓ Innovative Lösungen

Bereit für den nächsten Schritt?

${sections.contact}

`; } async function generateWebsite(title, websiteType, framework, content) { try { updateProgress(10, 'Content wird an KI gesendet...'); // Send request to AI const aiContent = await generateContentWithAI(content, websiteType, framework); updateProgress(30, 'Content wird verarbeitet...'); // Parse AI content to remove prompt artifacts const parsedContent = parseAIContent(aiContent); console.log('✅ Content parsed successfully'); updateProgress(50, 'Website wird generiert...'); // Generate HTML using advanced templates with parsed content generatedHTML = generateAdvancedHTML(parsedContent, websiteType, framework, title); console.log('✅ HTML generated, length:', generatedHTML.length); updateProgress(85, 'Finalisierung...'); // Store current website data currentWebsite = { title: title, websiteType: websiteType, framework: framework, content: aiContent, html: generatedHTML, createdAt: new Date().toISOString() }; updateProgress(100, 'Fertig!'); // Add to website history addToWebsiteHistory(title, websiteType, framework, generatedHTML); setTimeout(() => { hideProgress(); showResult(`Ihre Website "${title}" wurde erfolgreich erstellt und ist bereit zum Download.`); }, 500); } catch (error) { console.error('Website generation failed:', error); throw new Error(`Fehler bei der Website-Erstellung: ${error.message}`); } } // ==== 🤖 AI Content Generation ==== async function generateContentWithAI(prompt, websiteType, framework) { const response = await fetch(GENERATE_CONTENT_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: prompt, websiteType: websiteType, framework: framework }) }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(errorData.error || `Server-Fehler (${response.status})`); } const data = await response.json(); if (!data.content) { throw new Error('Keine Inhalte vom Server erhalten.'); } return data.content; } // ==== 👁️ Preview Handler ==== function handlePreview() { if (!generatedHTML) { showError('Keine Vorschau verfügbar. Bitte generieren Sie zuerst eine Website.'); return; } const previewSection = document.getElementById('preview-section'); const previewContent = document.getElementById('preview-content'); if (previewSection && previewContent) { // Create iframe with proper sandbox settings const iframe = document.createElement('iframe'); iframe.style.width = '100%'; iframe.style.height = '600px'; iframe.style.border = 'none'; iframe.style.borderRadius = '4px'; iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts'); // Set iframe content iframe.onload = function() { const iframeDoc = iframe.contentDocument || iframe.contentWindow.document; iframeDoc.open(); iframeDoc.write(generatedHTML); iframeDoc.close(); }; // Clear previous content and add iframe previewContent.innerHTML = ''; previewContent.appendChild(iframe); previewSection.classList.remove('hidden'); previewSection.scrollIntoView({ behavior: 'smooth' }); } } // ==== ❌ Close Preview Handler ==== function handleClosePreview() { const previewSection = document.getElementById('preview-section'); if (previewSection) { previewSection.classList.add('hidden'); } } // ==== 📥 Download Handler ==== function handleDownload() { if (!generatedHTML) { showError('Keine Website zum Download verfügbar.'); return; } try { const blob = new Blob([generatedHTML], { type: 'text/html;charset=utf-8' }); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); const filename = currentWebsite ? `${currentWebsite.title.replace(/[^a-z0-9]/gi, '-').toLowerCase()}-${currentWebsite.websiteType}.html` : 'website.html'; a.style.display = 'none'; a.href = url; a.download = filename; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); console.log('✅ Website downloaded successfully'); } catch (error) { console.error('Download failed:', error); showError('Download fehlgeschlagen. Bitte versuchen Sie es erneut.'); } } // ==== 🔄 New Website Handler ==== function handleNewWebsite() { // Reset form document.getElementById('website-form').reset(); updateCharacterCount(); // Clear state generatedHTML = ''; currentWebsite = null; // Hide sections hideAllSections(); // Scroll to form document.getElementById('website-form').scrollIntoView({ behavior: 'smooth' }); } // ==== 🔄 Retry Handler ==== function handleRetry() { hideAllSections(); // Re-enable form submission const submitBtn = document.querySelector('#website-form button[type="submit"]'); if (submitBtn) { submitBtn.disabled = false; } } // ==== 📋 Website History Management ==== function initializeWebsiteList() { const websiteHero = document.getElementById('website-hero'); const websiteList = document.getElementById('website-list'); if (websiteHistory.length > 0 && websiteHero && websiteList) { websiteList.innerHTML = ''; websiteHistory.slice(-5).reverse().forEach((website, index) => { const websiteItem = createWebsiteListItem(website, index); websiteList.appendChild(websiteItem); }); websiteHero.classList.remove('hidden'); } } function createWebsiteListItem(website, index) { const item = document.createElement('div'); item.className = 'flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors'; const typeColors = { landing: 'bg-blue-100 text-blue-800', webapp: 'bg-green-100 text-green-800', portfolio: 'bg-purple-100 text-purple-800', business: 'bg-gray-100 text-gray-800', ecommerce: 'bg-yellow-100 text-yellow-800', blog: 'bg-red-100 text-red-800' }; const typeColor = typeColors[website.websiteType] || 'bg-gray-100 text-gray-800'; item.innerHTML = `
🌐
${website.title}
${website.websiteType} ${website.framework} ${new Date(website.createdAt).toLocaleDateString('de-DE')}
`; return item; } function addToWebsiteHistory(title, websiteType, framework, html) { const website = { title, websiteType, framework, html, createdAt: new Date().toISOString() }; websiteHistory.unshift(website); // Keep only last 10 websites if (websiteHistory.length > 10) { websiteHistory = websiteHistory.slice(0, 10); } localStorage.setItem('websiteHistory', JSON.stringify(websiteHistory)); initializeWebsiteList(); } function previewWebsiteFromHistory(index) { const website = websiteHistory[index]; if (website) { generatedHTML = website.html; currentWebsite = website; handlePreview(); } } function downloadWebsiteFromHistory(index) { const website = websiteHistory[index]; if (website) { generatedHTML = website.html; currentWebsite = website; handleDownload(); } } function handleClearWebsites() { if (confirm('Möchten Sie wirklich alle generierten Websites löschen?')) { websiteHistory = []; localStorage.removeItem('websiteHistory'); const websiteHero = document.getElementById('website-hero'); if (websiteHero) { websiteHero.classList.add('hidden'); } } } // ==== 🎨 UI Management ==== function showProgress() { const progressSection = document.getElementById('progress-section'); if (progressSection) { progressSection.classList.remove('hidden'); } } function hideProgress() { const progressSection = document.getElementById('progress-section'); if (progressSection) { progressSection.classList.add('hidden'); } } function updateProgress(percentage, text) { const progressBar = document.getElementById('progress-bar'); const progressText = document.getElementById('progress-text'); if (progressBar) { progressBar.style.width = `${percentage}%`; } if (progressText) { progressText.textContent = text; } } function showResult(message) { const resultSection = document.getElementById('result-section'); const resultText = document.getElementById('result-text'); if (resultSection && resultText) { resultText.textContent = message; resultSection.classList.remove('hidden'); resultSection.scrollIntoView({ behavior: 'smooth' }); } } function showError(message) { const errorSection = document.getElementById('error-section'); const errorText = document.getElementById('error-text'); if (errorSection && errorText) { errorText.textContent = message; errorSection.classList.remove('hidden'); errorSection.scrollIntoView({ behavior: 'smooth' }); } } function hideAllSections() { const sections = ['progress-section', 'result-section', 'error-section', 'preview-section']; sections.forEach(sectionId => { const section = document.getElementById(sectionId); if (section) { section.classList.add('hidden'); } }); } console.log('🚀 Website Generator JavaScript loaded successfully');