🚀 Creador de Páginas Web

Crea páginas web profesionales de forma visual sin conocimiento de código. Editor completo con drag & drop, plantillas y exportación.

📝 Texto

📰 Título H1
📑 Título H2
📄 Párrafo
📝 Texto

🖼️ Media

🖼️ Imagen
🎥 Video
🎵 Audio

🔘 Interactivos

🔘 Botón
🔗 Enlace
📋 Formulario
📝 Input

📦 Layout

📦 Contenedor
📑 Sección
🎯 Header
📄 Footer

Selecciona un elemento para editar sus estilos

⚙️ Configuración de Página

📄 index.html

🚀 ¡Bienvenido al Creador de Páginas Web!

Arrastra elementos desde el panel izquierdo para comenzar a crear tu página web.

🔧 Propiedades

📋

Selecciona un elemento para ver sus propiedades

${document.getElementById('page-title').value} ${content.replace(/class="[^"]*builder-element[^"]*"/g, '').replace(/contenteditable="true"/g, '')} `; const frame = document.getElementById('preview-frame'); frame.srcdoc = html; } function refreshPreview() { generatePreview(); } function openInNewTab() { const canvas = document.getElementById('canvas-content'); const content = canvas.innerHTML; const html = ` ${document.getElementById('page-title').value} ${content.replace(/class="[^"]*builder-element[^"]*"/g, '').replace(/contenteditable="true"/g, '')} `; const newWindow = window.open(); newWindow.document.write(html); newWindow.document.close(); } function toggleCode() { generateCode(); openModal('code-modal'); } function generateCode() { const canvas = document.getElementById('canvas-content'); const content = canvas.innerHTML; // HTML const html = ` ${document.getElementById('page-title').value} ${content.replace(/class="[^"]*builder-element[^"]*"/g, '').replace(/contenteditable="true"/g, '').replace(/\s+/g, ' ')} `; // CSS const css = `/* Estilos generados por TechRecursos Builder */ body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; } * { box-sizing: border-box; } /* Responsive */ @media (max-width: 768px) { body { font-size: 14px; } }`; // JavaScript const js = `// JavaScript generado por TechRecursos Builder document.addEventListener('DOMContentLoaded', function() { console.log('Página cargada correctamente'); // Aquí puedes añadir tu JavaScript personalizado });`; document.querySelector('#html-code code').textContent = html; document.querySelector('#css-code code').textContent = css; document.querySelector('#js-code code').textContent = js; } function copyCode() { const activeTab = document.querySelector('.code-tab.active').dataset.tab; const code = document.querySelector(`#${activeTab}-code code`).textContent; navigator.clipboard.writeText(code).then(() => { alert('Código copiado al portapapeles'); }).catch(() => { alert('Error al copiar el código'); }); } function downloadCode() { const canvas = document.getElementById('canvas-content'); const content = canvas.innerHTML; const title = document.getElementById('page-title').value; // Crear HTML completo const html = ` ${title} ${content.replace(/class="[^"]*builder-element[^"]*"/g, '').replace(/contenteditable="true"/g, '')} `; // Descargar archivo const blob = new Blob([html], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'index.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } // Funciones para las tabs de código document.addEventListener('DOMContentLoaded', function() { const codeTabs = document.querySelectorAll('.code-tab'); codeTabs.forEach(tab => { tab.addEventListener('click', function() { const tabName = this.dataset.tab; // Actualizar tabs codeTabs.forEach(t => t.classList.remove('active')); this.classList.add('active'); // Actualizar contenido document.querySelectorAll('.code-content pre').forEach(pre => { pre.style.display = 'none'; }); document.getElementById(tabName + '-code').style.display = 'block'; }); }); }); function newProject() { if (confirm('¿Estás seguro de que quieres crear un nuevo proyecto? Se perderán los cambios no guardados.')) { clearCanvas(); document.getElementById('page-title').value = 'Mi página web'; document.getElementById('page-description').value = ''; builderState.history = []; builderState.historyIndex = -1; } } function saveProject() { const projectData = { title: document.getElementById('page-title').value, description: document.getElementById('page-description').value, content: document.getElementById('canvas-content').innerHTML, timestamp: new Date().toISOString() }; const dataStr = JSON.stringify(projectData, null, 2); const blob = new Blob([dataStr], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'proyecto-web.json'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } function exportCode() { toggleCode(); } // Función auxiliar para convertir RGB a HEX function rgbToHex(rgb) { if (rgb.startsWith('#')) return rgb; const result = rgb.match(/\d+/g); if (!result) return '#000000'; const r = parseInt(result[0]); const g = parseInt(result[1]); const b = parseInt(result[2]); return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); } // Función para añadir elemento desde botón function addElement(type) { const canvas = document.getElementById('canvas-content'); const welcomeMessage = canvas.querySelector('.welcome-message'); if (welcomeMessage) { welcomeMessage.remove(); } const element = createElement(type); element.style.position = 'relative'; element.style.margin = '1rem 0'; canvas.appendChild(element); selectElement(element); saveToHistory(); }