| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>SiteBuilder Pro - Gerador de Sites</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .resizable { |
| resize: both; |
| overflow: auto; |
| min-width: 300px; |
| min-height: 200px; |
| } |
| .component-placeholder { |
| border: 2px dashed #ccc; |
| padding: 20px; |
| text-align: center; |
| margin: 10px 0; |
| border-radius: 8px; |
| background-color: #f9f9f9; |
| } |
| .component-selected { |
| border: 2px solid #3b82f6; |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); |
| } |
| #previewFrame { |
| width: 100%; |
| height: 100%; |
| border: none; |
| background: white; |
| } |
| .sidebar { |
| transition: all 0.3s ease; |
| } |
| .sidebar-collapsed { |
| width: 60px !important; |
| } |
| .sidebar-collapsed .sidebar-text { |
| display: none; |
| } |
| .sidebar-collapsed .fa-lg { |
| font-size: 1.5rem !important; |
| } |
| .draggable-component { |
| cursor: grab; |
| user-select: none; |
| } |
| .draggable-component:active { |
| cursor: grabbing; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 h-screen flex flex-col"> |
| |
| <nav class="bg-blue-600 text-white p-4 shadow-md flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-code fa-lg"></i> |
| <h1 class="text-xl font-bold">SiteBuilder Pro</h1> |
| </div> |
| <div class="flex space-x-4"> |
| <button id="exportBtn" class="bg-white text-blue-600 px-4 py-2 rounded-md hover:bg-blue-50 transition"> |
| <i class="fas fa-download mr-2"></i>Exportar |
| </button> |
| <button id="saveBtn" class="bg-blue-700 px-4 py-2 rounded-md hover:bg-blue-800 transition"> |
| <i class="fas fa-save mr-2"></i>Salvar |
| </button> |
| </div> |
| </nav> |
|
|
| <div class="flex flex-1 overflow-hidden"> |
| |
| <div id="componentsSidebar" class="sidebar bg-gray-800 text-white w-64 flex flex-col transition-all duration-300"> |
| <div class="p-4 border-b border-gray-700 flex justify-between items-center"> |
| <h2 class="text-lg font-semibold sidebar-text">Componentes</h2> |
| <button id="toggleSidebar" class="text-gray-400 hover:text-white"> |
| <i class="fas fa-chevron-left fa-lg"></i> |
| </button> |
| </div> |
| <div class="p-4 overflow-y-auto flex-1"> |
| <div class="mb-6"> |
| <h3 class="text-sm uppercase text-gray-400 mb-2 sidebar-text">Básicos</h3> |
| <div class="space-y-2"> |
| <div class="draggable-component bg-gray-700 p-3 rounded-md cursor-move hover:bg-gray-600 transition flex items-center" |
| draggable="true" data-type="header"> |
| <i class="fas fa-heading mr-3 sidebar-text"></i> |
| <span class="sidebar-text">Cabeçalho</span> |
| </div> |
| <div class="draggable-component bg-gray-700 p-3 rounded-md cursor-move hover:bg-gray-600 transition flex items-center" |
| draggable="true" data-type="paragraph"> |
| <i class="fas fa-paragraph mr-3 sidebar-text"></i> |
| <span class="sidebar-text">Parágrafo</span> |
| </div> |
| <div class="draggable-component bg-gray-700 p-3 rounded-md cursor-move hover:bg-gray-600 transition flex items-center" |
| draggable="true" data-type="button"> |
| <i class="fas fa-square mr-3 sidebar-text"></i> |
| <span class="sidebar-text">Botão</span> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mb-6"> |
| <h3 class="text-sm uppercase text-gray-400 mb-2 sidebar-text">Mídia</h3> |
| <div class="space-y-2"> |
| <div class="draggable-component bg-gray-700 p-3 rounded-md cursor-move hover:bg-gray-600 transition flex items-center" |
| draggable="true" data-type="image"> |
| <i class="fas fa-image mr-3 sidebar-text"></i> |
| <span class="sidebar-text">Imagem</span> |
| </div> |
| <div class="draggable-component bg-gray-700 p-3 rounded-md cursor-move hover:bg-gray-600 transition flex items-center" |
| draggable="true" data-type="video"> |
| <i class="fas fa-video mr-3 sidebar-text"></i> |
| <span class="sidebar-text">Vídeo</span> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mb-6"> |
| <h3 class="text-sm uppercase text-gray-400 mb-2 sidebar-text">Layout</h3> |
| <div class="space-y-2"> |
| <div class="draggable-component bg-gray-700 p-3 rounded-md cursor-move hover:bg-gray-600 transition flex items-center" |
| draggable="true" data-type="section"> |
| <i class="fas fa-square-full mr-3 sidebar-text"></i> |
| <span class="sidebar-text">Seção</span> |
| </div> |
| <div class="draggable-component bg-gray-700 p-3 rounded-md cursor-move hover:bg-gray-600 transition flex items-center" |
| draggable="true" data-type="columns"> |
| <i class="fas fa-columns mr-3 sidebar-text"></i> |
| <span class="sidebar-text">Colunas</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex-1 flex flex-col bg-white"> |
| <div class="border-b p-4 flex space-x-4"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-desktop text-gray-600"></i> |
| <span>Desktop</span> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-tablet-alt text-gray-400"></i> |
| <span>Tablet</span> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-mobile-alt text-gray-400"></i> |
| <span>Mobile</span> |
| </div> |
| </div> |
| <div id="editorArea" class="flex-1 overflow-auto p-8 bg-gray-100"> |
| <div id="canvas" class="bg-white shadow-lg mx-auto w-full max-w-4xl min-h-screen"> |
| |
| <div class="component-placeholder" id="dropZone"> |
| Arraste componentes aqui para começar |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="w-64 bg-white border-l border-gray-200 p-4 overflow-y-auto"> |
| <h2 class="text-lg font-semibold mb-4">Propriedades</h2> |
| <div id="propertyPanel"> |
| <div class="text-gray-500 italic">Selecione um componente para editar suas propriedades</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="exportModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> |
| <div class="bg-white rounded-lg p-6 w-full max-w-2xl"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-bold">Exportar Site</h3> |
| <button id="closeExportModal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Nome do Site</label> |
| <input type="text" id="siteName" class="w-full p-2 border rounded-md" placeholder="Meu Site Incrível"> |
| </div> |
| <div class="mb-6"> |
| <label class="block text-gray-700 mb-2">Formato</label> |
| <div class="flex space-x-4"> |
| <label class="flex items-center"> |
| <input type="radio" name="exportFormat" value="html" checked class="mr-2"> |
| <span>HTML Completo</span> |
| </label> |
| <label class="flex items-center"> |
| <input type="radio" name="exportFormat" value="zip" class="mr-2"> |
| <span>Arquivo ZIP</span> |
| </label> |
| </div> |
| </div> |
| <div class="flex justify-end space-x-3"> |
| <button id="cancelExport" class="px-4 py-2 border rounded-md hover:bg-gray-100">Cancelar</button> |
| <button id="confirmExport" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Exportar</button> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| // Variáveis globais |
| let selectedComponent = null; |
| let components = []; |
| let nextId = 1; |
| |
| // Elementos DOM |
| const canvas = document.getElementById('canvas'); |
| const dropZone = document.getElementById('dropZone'); |
| const propertyPanel = document.getElementById('propertyPanel'); |
| const componentsSidebar = document.getElementById('componentsSidebar'); |
| const toggleSidebar = document.getElementById('toggleSidebar'); |
| const exportBtn = document.getElementById('exportBtn'); |
| const exportModal = document.getElementById('exportModal'); |
| const closeExportModal = document.getElementById('closeExportModal'); |
| const cancelExport = document.getElementById('cancelExport'); |
| const confirmExport = document.getElementById('confirmExport'); |
| |
| // Event listeners para componentes arrastáveis |
| document.querySelectorAll('.draggable-component').forEach(component => { |
| component.addEventListener('dragstart', function(e) { |
| e.dataTransfer.setData('text/plain', this.dataset.type); |
| }); |
| }); |
| |
| // Event listeners para a área de drop |
| canvas.addEventListener('dragover', function(e) { |
| e.preventDefault(); |
| this.classList.add('bg-blue-50'); |
| }); |
| |
| canvas.addEventListener('dragleave', function() { |
| this.classList.remove('bg-blue-50'); |
| }); |
| |
| canvas.addEventListener('drop', function(e) { |
| e.preventDefault(); |
| this.classList.remove('bg-blue-50'); |
| |
| const componentType = e.dataTransfer.getData('text/plain'); |
| if (componentType) { |
| addComponent(componentType, e.clientX, e.clientY); |
| } |
| }); |
| |
| // Função para adicionar um novo componente |
| function addComponent(type, x, y) { |
| const id = 'component-' + nextId++; |
| let componentHtml = ''; |
| let defaultProps = {}; |
| |
| // Criar HTML baseado no tipo de componente |
| switch(type) { |
| case 'header': |
| componentHtml = ` |
| <h1 class="text-4xl font-bold mb-4" contenteditable="true">Título Principal</h1> |
| `; |
| defaultProps = { |
| text: 'Título Principal', |
| size: '4xl', |
| color: '#000000', |
| alignment: 'left' |
| }; |
| break; |
| case 'paragraph': |
| componentHtml = ` |
| <p class="text-gray-700 mb-4" contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p> |
| `; |
| defaultProps = { |
| text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.', |
| color: '#374151', |
| alignment: 'left' |
| }; |
| break; |
| case 'button': |
| componentHtml = ` |
| <button class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 transition">Botão</button> |
| `; |
| defaultProps = { |
| text: 'Botão', |
| bgColor: '#2563eb', |
| textColor: '#ffffff', |
| size: 'medium', |
| rounded: 'md' |
| }; |
| break; |
| case 'image': |
| componentHtml = ` |
| <img src="https://via.placeholder.com/800x400" alt="Imagem de exemplo" class="w-full h-auto"> |
| `; |
| defaultProps = { |
| src: 'https://via.placeholder.com/800x400', |
| alt: 'Imagem de exemplo', |
| width: '100%', |
| alignment: 'center' |
| }; |
| break; |
| case 'section': |
| componentHtml = ` |
| <div class="p-8 bg-gray-100 rounded-lg"> |
| <div class="component-placeholder">Adicione componentes dentro desta seção</div> |
| </div> |
| `; |
| defaultProps = { |
| bgColor: '#f3f4f6', |
| padding: '8', |
| rounded: 'lg' |
| }; |
| break; |
| default: |
| return; |
| } |
| |
| // Criar elemento do componente |
| const componentElement = document.createElement('div'); |
| componentElement.className = 'component mb-6 p-4 relative'; |
| componentElement.id = id; |
| componentElement.innerHTML = componentHtml; |
| componentElement.dataset.type = type; |
| |
| // Adicionar menu de contexto |
| const contextMenu = document.createElement('div'); |
| contextMenu.className = 'absolute top-0 right-0 bg-white shadow-md rounded-md hidden'; |
| contextMenu.innerHTML = ` |
| <button class="component-delete px-3 py-1 text-red-500 hover:bg-red-50 w-full text-left"> |
| <i class="fas fa-trash mr-2"></i>Excluir |
| </button> |
| <button class="component-duplicate px-3 py-1 text-blue-500 hover:bg-blue-50 w-full text-left"> |
| <i class="fas fa-copy mr-2"></i>Duplicar |
| </button> |
| `; |
| componentElement.appendChild(contextMenu); |
| |
| // Mostrar menu de contexto ao clicar com o botão direito |
| componentElement.addEventListener('contextmenu', function(e) { |
| e.preventDefault(); |
| document.querySelectorAll('.component-context-menu').forEach(menu => { |
| menu.classList.add('hidden'); |
| }); |
| contextMenu.classList.remove('hidden'); |
| |
| // Posicionar o menu próximo ao cursor |
| const rect = this.getBoundingClientRect(); |
| contextMenu.style.top = (e.clientY - rect.top) + 'px'; |
| contextMenu.style.left = (e.clientX - rect.left) + 'px'; |
| }); |
| |
| // Esconder menu quando clicar em outro lugar |
| document.addEventListener('click', function() { |
| contextMenu.classList.add('hidden'); |
| }); |
| |
| // Event listeners para os botões do menu de contexto |
| contextMenu.querySelector('.component-delete').addEventListener('click', function() { |
| componentElement.remove(); |
| components = components.filter(c => c.id !== id); |
| if (selectedComponent === id) { |
| selectedComponent = null; |
| updatePropertyPanel(); |
| } |
| }); |
| |
| contextMenu.querySelector('.component-duplicate').addEventListener('click', function() { |
| addComponent(type, x, y); |
| }); |
| |
| // Selecionar componente ao clicar |
| componentElement.addEventListener('click', function(e) { |
| if (e.target.closest('.component-delete, .component-duplicate')) return; |
| |
| // Desselecionar todos os componentes |
| document.querySelectorAll('.component').forEach(c => { |
| c.classList.remove('component-selected'); |
| }); |
| |
| // Selecionar este componente |
| this.classList.add('component-selected'); |
| selectedComponent = id; |
| updatePropertyPanel(); |
| }); |
| |
| // Adicionar ao canvas (removendo o placeholder se for o primeiro componente) |
| if (dropZone && canvas.children.length === 1) { |
| canvas.removeChild(dropZone); |
| } |
| canvas.appendChild(componentElement); |
| |
| // Adicionar aos componentes |
| components.push({ |
| id: id, |
| type: type, |
| props: defaultProps, |
| html: componentElement.innerHTML |
| }); |
| } |
| |
| // Atualizar painel de propriedades |
| function updatePropertyPanel() { |
| if (!selectedComponent) { |
| propertyPanel.innerHTML = '<div class="text-gray-500 italic">Selecione um componente para editar suas propriedades</div>'; |
| return; |
| } |
| |
| const component = components.find(c => c.id === selectedComponent); |
| if (!component) return; |
| |
| let propertiesHtml = ''; |
| |
| switch(component.type) { |
| case 'header': |
| propertiesHtml = ` |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-1">Texto</label> |
| <input type="text" class="w-full p-2 border rounded-md component-prop" |
| data-prop="text" value="${component.props.text}"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-1">Tamanho</label> |
| <select class="w-full p-2 border rounded-md component-prop" data-prop="size"> |
| <option value="xs" ${component.props.size === 'xs' ? 'selected' : ''}>Pequeno</option> |
| <option value="sm" ${component.props.size === 'sm' ? 'selected' : ''}>Médio Pequeno</option> |
| <option value="base" ${component.props.size === 'base' ? 'selected' : ''}>Normal</option> |
| <option value="lg" ${component.props.size === 'lg' ? 'selected' : ''}>Médio Grande</option> |
| <option value="xl" ${component.props.size === 'xl' ? 'selected' : ''}>Grande</option> |
| <option value="2xl" ${component.props.size === '2xl' ? 'selected' : ''}>Extra Grande</option> |
| <option value="3xl" ${component.props.size === '3xl' ? 'selected' : ''}>3XL</option> |
| <option value="4xl" ${component.props.size === '4xl' ? 'selected' : ''}>4XL</option> |
| <option value="5xl" ${component.props.size === '5xl' ? 'selected' : ''}>5XL</option> |
| </select> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-1">Cor do Texto</label> |
| <input type="color" class="w-full p-1 border rounded-md component-prop" |
| data-prop="color" value="${component.props.color}"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-1">Alinhamento</label> |
| <div class="flex space-x-2"> |
| <button class="p-2 border rounded-md ${component.props.alignment === 'left' ? 'bg-blue-100 border-blue-300' : ''}" |
| data-prop="alignment" data-value="left"> |
| <i class="fas fa-align-left"></i> |
| </button> |
| <button class="p-2 border rounded-md ${component.props.alignment === 'center' ? 'bg-blue-100 border-blue-300' : ''}" |
| data-prop="alignment" data-value="center"> |
| <i class="fas fa-align-center"></i> |
| </button> |
| <button class="p-2 border rounded-md ${component.props.alignment === 'right' ? 'bg-blue-100 border-blue-300' : ''}" |
| data-prop="alignment" data-value="right"> |
| <i class="fas fa-align-right"></i> |
| </button> |
| </div> |
| </div> |
| `; |
| break; |
| case 'button': |
| propertiesHtml = ` |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-1">Texto</label> |
| <input type="text" class="w-full p-2 border rounded-md component-prop" |
| data-prop="text" value="${component.props.text}"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-1">Cor de Fundo</label> |
| <input type="color" class="w-full p-1 border rounded-md component-prop" |
| data-prop="bgColor" value="${component.props.bgColor}"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-1">Cor do Texto</label> |
| <input type="color" class="w-full p-1 border rounded-md component-prop" |
| data-prop="textColor" value="${component.props.textColor}"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-1">Tamanho</label> |
| <select class="w-full p-2 border rounded-md component-prop" data-prop="size"> |
| <option value="small" ${component.props.size === 'small' ? 'selected' : ''}>Pequeno</option> |
| <option value="medium" ${component.props.size === 'medium' ? 'selected' : ''}>Médio</option> |
| <option value="large" ${component.props.size === 'large' ? 'selected' : ''}>Grande</option> |
| </select> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-1">Borda Arredondada</label> |
| <select class="w-full p-2 border rounded-md component-prop" data-prop="rounded"> |
| <option value="none" ${component.props.rounded === 'none' ? 'selected' : ''}>Nenhuma</option> |
| <option value="sm" ${component.props.rounded === 'sm' ? 'selected' : ''}>Pouco</option> |
| <option value="md" ${component.props.rounded === 'md' ? 'selected' : ''}>Médio</option> |
| <option value="lg" ${component.props.rounded === 'lg' ? 'selected' : ''}>Grande</option> |
| <option value="full" ${component.props.rounded === 'full' ? 'selected' : ''}>Completo</option> |
| </select> |
| </div> |
| `; |
| break; |
| case 'image': |
| propertiesHtml = ` |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-1">URL da Imagem</label> |
| <input type="text" class="w-full p-2 border rounded-md component-prop" |
| data-prop="src" value="${component.props.src}"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-1">Texto Alternativo</label> |
| <input type="text" class="w-full p-2 border rounded-md component-prop" |
| data-prop="alt" value="${component.props.alt}"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-1">Largura</label> |
| <select class="w-full p-2 border rounded-md component-prop" data-prop="width"> |
| <option value="25%" ${component.props.width === '25%' ? 'selected' : ''}>25%</option> |
| <option value="50%" ${component.props.width === '50%' ? 'selected' : ''}>50%</option> |
| <option value="75%" ${component.props.width === '75%' ? 'selected' : ''}>75%</option> |
| <option value="100%" ${component.props.width === '100%' ? 'selected' : ''}>100%</option> |
| </select> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-1">Alinhamento</label> |
| <div class="flex space-x-2"> |
| <button class="p-2 border rounded-md ${component.props.alignment === 'left' ? 'bg-blue-100 border-blue-300' : ''}" |
| data-prop="alignment" data-value="left"> |
| <i class="fas fa-align-left"></i> |
| </button> |
| <button class="p-2 border rounded-md ${component.props.alignment === 'center' ? 'bg-blue-100 border-blue-300' : ''}" |
| data-prop="alignment" data-value="center"> |
| <i class="fas fa-align-center"></i> |
| </button> |
| <button class="p-2 border rounded-md ${component.props.alignment === 'right' ? 'bg-blue-100 border-blue-300' : ''}" |
| data-prop="alignment" data-value="right"> |
| <i class="fas fa-align-right"></i> |
| </button> |
| </div> |
| </div> |
| `; |
| break; |
| default: |
| propertiesHtml = `<div class="text-gray-500 italic">Nenhuma propriedade editável para este componente</div>`; |
| } |
| |
| propertyPanel.innerHTML = ` |
| <div class="mb-4 pb-2 border-b"> |
| <h3 class="font-medium capitalize">${component.type}</h3> |
| </div> |
| ${propertiesHtml} |
| `; |
| |
| // Adicionar event listeners para as propriedades |
| propertyPanel.querySelectorAll('.component-prop').forEach(input => { |
| input.addEventListener('change', function() { |
| const prop = this.dataset.prop; |
| const value = this.type === 'checkbox' ? this.checked : this.value; |
| |
| // Atualizar propriedade no objeto do componente |
| const component = components.find(c => c.id === selectedComponent); |
| if (component) { |
| component.props[prop] = value; |
| updateComponent(component); |
| } |
| }); |
| }); |
| |
| // Event listeners para botões de alinhamento |
| propertyPanel.querySelectorAll('button[data-prop |
| </html> |
