WebCraft AI Studio

Welcome to My Website

About This Page

Start building your amazing website here!

`; updatePreview(); } function switchEditor(type) { currentEditor = type; const codeEditor = document.getElementById('codeEditor'); // Store current code if (!window.codeStorage) window.codeStorage = {}; window.codeStorage[window.lastEditor || 'html'] = codeEditor.value; // Load new code codeEditor.value = window.codeStorage[type] || ''; window.lastEditor = type; // Update tab styles document.querySelectorAll('.editor-tab').forEach(tab => { tab.classList.remove('ring-2', 'ring-offset-2', 'ring-purple-500'); }); event.target.classList.add('ring-2', 'ring-offset-2', 'ring-purple-500'); } function formatCode() { const codeEditor = document.getElementById('codeEditor'); // Simple formatting - in production, use a proper formatter codeEditor.value = codeEditor.value .replace(/>\n<') .replace(/^\s+|\s+$/gm, ''); showNotification('Code formatted!', 'success'); } function updatePreview() { const preview = document.getElementById('previewFrame'); const code = document.getElementById('codeEditor').value; const blob = new Blob([code], { type: 'text/html' }); preview.src = URL.createObjectURL(blob); } function refreshPreview() { updatePreview(); showNotification('Preview refreshed!', 'info'); } // Drag and Drop document.addEventListener('DOMContentLoaded', function() { const components = document.querySelectorAll('.component-card'); const codeEditor = document.getElementById('codeEditor'); components.forEach(comp => { comp.addEventListener('dragstart', (e) => { e.dataTransfer.setData('component', e.target.dataset.component); }); }); codeEditor.addEventListener('dragover', (e) => { e.preventDefault(); }); codeEditor.addEventListener('drop', (e) => { e.preventDefault(); const component = e.dataTransfer.getData('component'); insertComponent(component); }); }); function insertComponent(component) { const components = { header: '
\n

Your Header

\n
', nav: '', hero: '
\n

Hero Section

\n

Make an impact with your message

\n \n
', card: '
\n Card Image\n

Card Title

\n

Card description goes here...

\n
', footer: '' }; const codeEditor = document.getElementById('codeEditor'); const cursorPos = codeEditor.selectionStart; const textBefore = codeEditor.value.substring(0, cursorPos); const textAfter = codeEditor.value.substring(cursorPos); codeEditor.value = textBefore + '\n' + components[component] + '\n' + textAfter; updatePreview(); showNotification(`${component} component added!`, 'success'); } // AI Chat function sendMessage() { const input = document.getElementById('chatInput'); const message = input.value.trim(); if (!message) return; const chatMessages = document.getElementById('chatMessages'); // Add user message chatMessages.innerHTML += `

You:

${message}

`; // Simulate AI response setTimeout(() => { const aiResponse = generateAIResponse(message); chatMessages.innerHTML += `

AI:

${aiResponse}

`; chatMessages.scrollTop = chatMessages.scrollHeight; }, 1000); input.value = ''; chatMessages.scrollTop = chatMessages.scrollHeight; } function generateAIResponse(message) { const responses = { 'how to add a button': 'You can add a button using: ', 'center text': 'Use Tailwind classes: text-center for horizontal centering, or flex items-center justify-center for perfect centering.', 'add animation': 'Try using CSS animations or Tailwind\'s transition classes. Example: transition-all duration-300 hover:scale-105', 'responsive design': 'Use Tailwind\'s responsive prefixes: sm:, md:, lg:, xl:. Example: w-full md:w-1/2 lg:w-1/3', 'default': 'Great question! Try using modern CSS frameworks like Tailwind CSS for styling, and remember to keep your code semantic and accessible.' }; const lowerMessage = message.toLowerCase(); for (const [key, value] of Object.entries(responses)) { if (lowerMessage.includes(key)) { return value; } } return responses.default; } // Project Management function createNewProject() { const projectName = prompt('Enter project name:'); if (projectName) { projects.push({ id: Date.now(), name: projectName, created: new Date(), code: { html: '', css: '', js: '' } }); showEditor(); showNotification(`Project "${projectName}" created!`, 'success'); } } function importProject() { showNotification('Import feature coming soon!', 'info'); } function openTemplates() { showNotification('Templates gallery coming soon!', 'info'); } function openTutorials() { showNotification('Tutorials section coming soon!', 'info'); } // Notifications function showNotification(message, type = 'info') { const colors = { success: 'bg-green-500', error: 'bg-red-500', info: 'bg-blue-500', warning: 'bg-yellow-500' }; const notification = document.createElement('div'); notification.className = `fixed top-20 right-4 ${colors[type]} text-white px-6 py-3 rounded-lg shadow-lg z-50 animate-pulse`; notification.textContent = message; document.body.appendChild(notification); setTimeout(() => { notification.remove(); }, 3000); } // Auto-save setInterval(() => { if (currentView === 'editor') { const code = document.getElementById('codeEditor').value; localStorage.setItem('autosave', code); } }, 5000); // Load autosaved content window.addEventListener('load', () => { const autosaved = localStorage.getItem('autosave'); if (autosaved && document.getElementById('codeEditor')) { document.getElementById('codeEditor').value = autosaved; } }); // Keyboard shortcuts document.addEventListener('keydown', (e) => { if (e.ctrlKey || e.metaKey) { switch(e.key) { case 's': e.preventDefault(); showNotification('Project saved!', 'success'); break; case 'Enter': if (document.getElementById('chatInput') === document.activeElement) { e.preventDefault(); sendMessage(); } break; } } }); // Initialize dashboard on load showDashboard();