| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Site Builder Pro</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> |
| .builder-container { |
| display: grid; |
| grid-template-columns: 250px 1fr 300px; |
| gap: 1rem; |
| height: calc(100vh - 80px); |
| } |
| .component-list { |
| background-color: #f8fafc; |
| border-right: 1px solid #e2e8f0; |
| overflow-y: auto; |
| } |
| .site-canvas { |
| background-color: #ffffff; |
| overflow-y: auto; |
| padding: 1rem; |
| min-height: 100%; |
| position: relative; |
| } |
| .component-settings { |
| background-color: #f8fafc; |
| border-left: 1px solid #e2e8f0; |
| overflow-y: auto; |
| } |
| .draggable-component { |
| cursor: grab; |
| transition: all 0.2s; |
| } |
| .draggable-component:active { |
| cursor: grabbing; |
| } |
| .site-component { |
| position: relative; |
| transition: all 0.2s; |
| } |
| .site-component:hover { |
| box-shadow: 0 0 0 2px #3b82f6; |
| } |
| .site-component.selected { |
| box-shadow: 0 0 0 2px #3b82f6; |
| background-color: #eff6ff; |
| } |
| .component-actions { |
| position: absolute; |
| right: 0; |
| top: 0; |
| display: none; |
| } |
| .site-component:hover .component-actions { |
| display: flex; |
| } |
| .site-component.selected .component-actions { |
| display: flex; |
| } |
| .empty-state { |
| border: 2px dashed #cbd5e1; |
| border-radius: 0.5rem; |
| padding: 2rem; |
| text-align: center; |
| color: #64748b; |
| } |
| #sitePreviewModal { |
| transition: opacity 0.3s ease; |
| } |
| .site-preview { |
| width: 100%; |
| margin: 0 auto; |
| background: white; |
| border-radius: 0.5rem; |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| .layout-container { |
| border: 2px dashed #cbd5e1; |
| border-radius: 0.5rem; |
| padding: 1rem; |
| margin-bottom: 1rem; |
| background-color: #f8fafc; |
| } |
| .layout-row { |
| border: 2px dashed #a5b4fc; |
| border-radius: 0.5rem; |
| padding: 0.75rem; |
| margin-bottom: 0.5rem; |
| background-color: #eef2ff; |
| } |
| .layout-column { |
| border: 2px dashed #93c5fd; |
| border-radius: 0.5rem; |
| padding: 0.5rem; |
| margin-bottom: 0.25rem; |
| background-color: #eff6ff; |
| } |
| .layout-placeholder { |
| border: 2px dashed #d1d5db; |
| border-radius: 0.25rem; |
| padding: 1rem; |
| text-align: center; |
| color: #6b7280; |
| background-color: #f9fafb; |
| margin-bottom: 0.5rem; |
| } |
| .layout-actions { |
| position: absolute; |
| right: 0; |
| top: 0; |
| display: none; |
| } |
| .layout-container:hover .layout-actions, |
| .layout-row:hover .layout-actions, |
| .layout-column:hover .layout-actions { |
| display: flex; |
| } |
| .grid-resize-handle { |
| position: absolute; |
| right: 5px; |
| bottom: 5px; |
| width: 12px; |
| height: 12px; |
| cursor: nwse-resize; |
| opacity: 0; |
| transition: opacity 0.2s; |
| } |
| .layout-column:hover .grid-resize-handle { |
| opacity: 1; |
| } |
| .drop-zone { |
| min-height: 50px; |
| transition: background-color 0.2s; |
| } |
| .drop-zone.active { |
| background-color: #dbeafe; |
| } |
| .navbar-preview { |
| background-color: #ffffff; |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
| } |
| .hero-preview { |
| background: linear-gradient(135deg, #6b7280, #1e40af); |
| color: white; |
| } |
| .section-preview { |
| background-color: #f9fafb; |
| } |
| .footer-preview { |
| background-color: #1f2937; |
| color: white; |
| } |
| .template-card { |
| transition: all 0.2s; |
| } |
| .template-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
| .color-option { |
| width: 24px; |
| height: 24px; |
| border-radius: 50%; |
| cursor: pointer; |
| border: 2px solid transparent; |
| } |
| .color-option.selected { |
| border-color: #1e40af; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| <header class="bg-white shadow-sm"> |
| <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center"> |
| <h1 class="text-2xl font-bold text-gray-900">Site Builder Pro</h1> |
| <div class="flex space-x-3"> |
| <button id="templatesBtn" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
| <i class="fas fa-th-large mr-2"></i> Templates |
| </button> |
| <button id="previewBtn" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
| <i class="fas fa-eye mr-2"></i> Preview |
| </button> |
| <button id="publishBtn" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
| <i class="fas fa-cloud-upload-alt mr-2"></i> Publicar |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> |
| <div class="builder-container"> |
| |
| <div class="component-list p-4"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-lg font-semibold text-gray-800">Componentes</h2> |
| <div class="relative"> |
| <button id="toggleComponents" class="p-1 rounded-md hover:bg-gray-200"> |
| <i class="fas fa-chevron-down"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div id="componentsAccordion" class="space-y-4"> |
| <div class="space-y-2"> |
| <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">Layout</h3> |
| <div class="space-y-2"> |
| <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="container"> |
| <div class="flex items-center"> |
| <i class="fas fa-square-full text-indigo-500 mr-2"></i> |
| <span>Container</span> |
| </div> |
| </div> |
| <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="row"> |
| <div class="flex items-center"> |
| <i class="fas fa-grip-lines text-indigo-500 mr-2"></i> |
| <span>Row</span> |
| </div> |
| </div> |
| <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="column"> |
| <div class="flex items-center"> |
| <i class="fas fa-columns text-indigo-500 mr-2"></i> |
| <span>Column</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="space-y-2"> |
| <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">Seções</h3> |
| <div class="space-y-2"> |
| <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="navbar"> |
| <div class="flex items-center"> |
| <i class="fas fa-bars text-blue-500 mr-2"></i> |
| <span>Navbar</span> |
| </div> |
| </div> |
| <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="hero"> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-blue-500 mr-2"></i> |
| <span>Hero Section</span> |
| </div> |
| </div> |
| <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="section"> |
| <div class="flex items-center"> |
| <i class="fas fa-square text-blue-500 mr-2"></i> |
| <span>Content Section</span> |
| </div> |
| </div> |
| <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="footer"> |
| <div class="flex items-center"> |
| <i class="fas fa-window-minimize text-blue-500 mr-2"></i> |
| <span>Footer</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="space-y-2"> |
| <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">Elementos</h3> |
| <div class="space-y-2"> |
| <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="heading"> |
| <div class="flex items-center"> |
| <i class="fas fa-heading text-blue-500 mr-2"></i> |
| <span>Heading</span> |
| </div> |
| </div> |
| <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="paragraph"> |
| <div class="flex items-center"> |
| <i class="fas fa-paragraph text-blue-500 mr-2"></i> |
| <span>Paragraph</span> |
| </div> |
| </div> |
| <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="button"> |
| <div class="flex items-center"> |
| <i class="fas fa-square text-blue-500 mr-2"></i> |
| <span>Button</span> |
| </div> |
| </div> |
| <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="image"> |
| <div class="flex items-center"> |
| <i class="fas fa-image text-blue-500 mr-2"></i> |
| <span>Image</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="space-y-2"> |
| <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">Formulários</h3> |
| <div class="space-y-2"> |
| <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="text"> |
| <div class="flex items-center"> |
| <i class="fas fa-font text-blue-500 mr-2"></i> |
| <span>Text Input</span> |
| </div> |
| </div> |
| <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="email"> |
| <div class="flex items-center"> |
| <i class="fas fa-envelope text-blue-500 mr-2"></i> |
| <span>Email Input</span> |
| </div> |
| </div> |
| <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="textarea"> |
| <div class="flex items-center"> |
| <i class="fas fa-align-left text-blue-500 mr-2"></i> |
| <span>Text Area</span> |
| </div> |
| </div> |
| <div draggable="true" class="draggable-component p-3 bg-white rounded border border-gray-200 shadow-sm" data-type="select"> |
| <div class="flex items-center"> |
| <i class="fas fa-list-ul text-blue-500 mr-2"></i> |
| <span>Dropdown</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="site-canvas" id="siteCanvas"> |
| <div id="siteContainer" class="drop-zone"> |
| <div class="empty-state"> |
| <i class="fas fa-mouse-pointer text-4xl mb-3 text-gray-400"></i> |
| <h3 class="font-medium text-gray-500">Arraste componentes aqui</h3> |
| <p class="text-sm text-gray-400 mt-1">Comece construindo seu site arrastando componentes do painel esquerdo</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="component-settings p-4"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-lg font-semibold text-gray-800">Configurações</h2> |
| <div class="flex space-x-2"> |
| <button id="pageSettingsBtn" class="p-1 rounded-md hover:bg-gray-200" title="Configurações da Página"> |
| <i class="fas fa-cog"></i> |
| </button> |
| <button id="themeSettingsBtn" class="p-1 rounded-md hover:bg-gray-200" title="Configurações de Tema"> |
| <i class="fas fa-palette"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div id="componentSettings"> |
| <p class="text-gray-500 italic">Selecione um componente para editar suas propriedades</p> |
| </div> |
| |
| <div id="pageSettings" class="hidden"> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Título da Página</label> |
| <input type="text" id="pageTitle" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" value="Meu Site"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Favicon</label> |
| <div class="mt-1 flex items-center"> |
| <span class="inline-block h-8 w-8 rounded-full overflow-hidden bg-gray-100"> |
| <svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24"> |
| <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" /> |
| </svg> |
| </span> |
| <button type="button" class="ml-3 bg-white py-1 px-2 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
| Alterar |
| </button> |
| </div> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Meta Description</label> |
| <textarea class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" rows="3">Descrição do meu site para motores de busca</textarea> |
| </div> |
| </div> |
| </div> |
| |
| <div id="themeSettings" class="hidden"> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-2">Cores do Tema</label> |
| <div class="flex space-x-2"> |
| <div class="color-option bg-blue-600 selected" data-color="blue"></div> |
| <div class="color-option bg-indigo-600" data-color="indigo"></div> |
| <div class="color-option bg-purple-600" data-color="purple"></div> |
| <div class="color-option bg-pink-600" data-color="pink"></div> |
| <div class="color-option bg-red-600" data-color="red"></div> |
| <div class="color-option bg-green-600" data-color="green"></div> |
| </div> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Fonte Principal</label> |
| <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"> |
| <option>Inter (sans-serif)</option> |
| <option>Roboto (sans-serif)</option> |
| <option>Lora (serif)</option> |
| <option>Montserrat (sans-serif)</option> |
| <option>Open Sans (sans-serif)</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Estilo de Botão</label> |
| <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"> |
| <option>Padrão</option> |
| <option>Arredondado</option> |
| <option>Outline</option> |
| <option>Minimalista</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="templatesModal" class="fixed inset-0 z-50 hidden overflow-y-auto"> |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
| </div> |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"> |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
| <div class="sm:flex sm:items-start"> |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Escolha um Template</h3> |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> |
| <div class="template-card p-4 border border-gray-200 rounded-md cursor-pointer"> |
| <div class="bg-gray-100 h-40 rounded-md mb-2 flex items-center justify-center"> |
| <span class="text-gray-400">Template 1</span> |
| </div> |
| <h4 class="font-medium text-gray-900">Landing Page</h4> |
| <p class="text-sm text-gray-500">Página inicial simples</p> |
| </div> |
| <div class="template-card p-4 border border-gray-200 rounded-md cursor-pointer"> |
| <div class="bg-gray-100 h-40 rounded-md mb-2 flex items-center justify-center"> |
| <span class="text-gray-400">Template 2</span> |
| </div> |
| <h4 class="font-medium text-gray-900">Portfolio</h4> |
| <p class="text-sm text-gray-500">Para mostrar seu trabalho</p> |
| </div> |
| <div class="template-card p-4 border border-gray-200 rounded-md cursor-pointer"> |
| <div class="bg-gray-100 h-40 rounded-md mb-2 flex items-center justify-center"> |
| <span class="text-gray-400">Template 3</span> |
| </div> |
| <h4 class="font-medium text-gray-900">Blog</h4> |
| <p class="text-sm text-gray-500">Para publicar artigos</p> |
| </div> |
| <div class="template-card p-4 border border-gray-200 rounded-md cursor-pointer"> |
| <div class="bg-gray-100 h-40 rounded-md mb-2 flex items-center justify-center"> |
| <span class="text-gray-400">Template 4</span> |
| </div> |
| <h4 class="font-medium text-gray-900">E-commerce</h4> |
| <p class="text-sm text-gray-500">Loja virtual simples</p> |
| </div> |
| <div class="template-card p-4 border border-gray-200 rounded-md cursor-pointer"> |
| <div class="bg-gray-100 h-40 rounded-md mb-2 flex items-center justify-center"> |
| <span class="text-gray-400">Template 5</span> |
| </div> |
| <h4 class="font-medium text-gray-900">Serviços</h4> |
| <p class="text-sm text-gray-500">Para empresas de serviços</p> |
| </div> |
| <div class="template-card p-4 border border-gray-200 rounded-md cursor-pointer"> |
| <div class="bg-gray-100 h-40 rounded-md mb-2 flex items-center justify-center"> |
| <span class="text-gray-400">Template 6</span> |
| </div> |
| <h4 class="font-medium text-gray-900">Em branco</h4> |
| <p class="text-sm text-gray-500">Comece do zero</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
| <button type="button" id="applyTemplate" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"> |
| Aplicar Template |
| </button> |
| <button type="button" id="closeTemplates" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
| Cancelar |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="sitePreviewModal" class="fixed inset-0 z-50 hidden overflow-y-auto"> |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
| </div> |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"> |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
| <div class="sm:flex sm:items-start"> |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Visualização do Site</h3> |
| <div class="site-preview"> |
| <div id="previewSiteContainer" class="w-full"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
| <button type="button" id="closePreview" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
| Fechar |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="publishModal" class="fixed inset-0 z-50 hidden overflow-y-auto"> |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
| </div> |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
| <div class="sm:flex sm:items-start"> |
| <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"> |
| <i class="fas fa-cloud-upload-alt text-blue-600"></i> |
| </div> |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Publicar Site</h3> |
| <div class="mt-2"> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Domínio</label> |
| <div class="mt-1 flex rounded-md shadow-sm"> |
| <input type="text" class="focus:ring-blue-500 focus:border-blue-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300" placeholder="meusite"> |
| <span class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">.meudominio.com</span> |
| </div> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Plano</label> |
| <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> |
| <option>Básico (R$ 29/mês)</option> |
| <option>Profissional (R$ 59/mês)</option> |
| <option>Premium (R$ 99/mês)</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
| <button type="button" id="confirmPublish" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"> |
| Publicar Agora |
| </button> |
| <button type="button" id="cancelPublish" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
| Cancelar |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| // Site data structure |
| let siteData = { |
| title: 'Meu Site', |
| description: 'Descrição do meu site', |
| theme: { |
| color: 'blue', |
| font: 'Inter', |
| buttonStyle: 'default' |
| }, |
| pages: [ |
| { |
| id: 'page-1', |
| name: 'Home', |
| components: [] |
| } |
| ], |
| currentPage: 'page-1' |
| }; |
| |
| let selectedComponent = null; |
| let nextComponentId = 1; |
| let isResizing = false; |
| let currentResizeColumn = null; |
| let startX, startWidth; |
| let draggedElement = null; |
| |
| // DOM elements |
| const draggableComponents = document.querySelectorAll('.draggable-component'); |
| const siteCanvas = document.getElementById('siteCanvas'); |
| const siteContainer = document.getElementById('siteContainer'); |
| const componentSettings = document.getElementById('componentSettings'); |
| const pageSettings = document.getElementById('pageSettings'); |
| const themeSettings = document.getElementById('themeSettings'); |
| const previewSiteContainer = document.getElementById('previewSiteContainer'); |
| const templatesBtn = document.getElementById('templatesBtn'); |
| const previewBtn = document.getElementById('previewBtn'); |
| const publishBtn = document.getElementById('publishBtn'); |
| const pageSettingsBtn = document.getElementById('pageSettingsBtn'); |
| const themeSettingsBtn = document.getElementById('themeSettingsBtn'); |
| const templatesModal = document.getElementById('templatesModal'); |
| const sitePreviewModal = document.getElementById('sitePreviewModal'); |
| const publishModal = document.getElementById('publishModal'); |
| const closeTemplates = document.getElementById('closeTemplates'); |
| const applyTemplate = document.getElementById('applyTemplate'); |
| const closePreview = document.getElementById('closePreview'); |
| const confirmPublish = document.getElementById('confirmPublish'); |
| const cancelPublish = document.getElementById('cancelPublish'); |
| const colorOptions = document.querySelectorAll('.color-option'); |
| const toggleComponents = document.getElementById('toggleComponents'); |
| const componentsAccordion = document.getElementById('componentsAccordion'); |
| |
| // Set up drag events for all draggable components |
| draggableComponents.forEach(component => { |
| component.addEventListener('dragstart', function(e) { |
| e.dataTransfer.setData('text/plain', component.dataset.type); |
| draggedElement = component; |
| e.dataTransfer.effectAllowed = 'copy'; |
| }); |
| }); |
| |
| // Set up drop zones |
| function setupDropZones() { |
| // Main container drop zone |
| siteContainer.addEventListener('dragover', function(e) { |
| e.preventDefault(); |
| e.dataTransfer.dropEffect = 'copy'; |
| this.classList.add('active'); |
| }); |
| |
| siteContainer.addEventListener('dragleave', function() { |
| this.classList.remove('active'); |
| }); |
| |
| siteContainer.addEventListener('drop', function(e) { |
| e.preventDefault(); |
| this.classList.remove('active'); |
| |
| const componentType = e.dataTransfer.getData('text/plain'); |
| addComponentToSite(componentType, this); |
| }); |
| |
| // Container drop zones (can accept rows or components) |
| document.querySelectorAll('.layout-container').forEach(container => { |
| container.addEventListener('dragover', function(e) { |
| e.preventDefault(); |
| e.dataTransfer.dropEffect = 'copy'; |
| this.classList.add('active'); |
| }); |
| |
| container.addEventListener('dragleave', function() { |
| this.classList.remove('active'); |
| }); |
| |
| container.addEventListener('drop', function(e) { |
| e.preventDefault(); |
| this.classList.remove('active'); |
| |
| const componentType = e.dataTransfer.getData('text/plain'); |
| // Containers can accept rows or components directly |
| if (componentType === 'row' || componentType === 'container' || |
| ['navbar', 'hero', 'section', 'footer', 'heading', 'paragraph', |
| 'button', 'image', 'text', 'email', 'textarea', 'select'].includes(componentType)) { |
| addComponentToSite(componentType, this); |
| } |
| }); |
| }); |
| |
| // Row drop zones (can accept columns) |
| document.querySelectorAll('.layout-row').forEach(row => { |
| row.addEventListener('dragover', function(e) { |
| e.preventDefault(); |
| e.dataTransfer.dropEffect = 'copy'; |
| this.classList.add('active'); |
| }); |
| |
| row.addEventListener('dragleave', function() { |
| this.classList.remove('active'); |
| }); |
| |
| row.addEventListener('drop', function(e) { |
| e.preventDefault(); |
| this.classList.remove('active'); |
| |
| const componentType = e.dataTransfer.getData('text/plain'); |
| // Rows can only accept columns |
| if (componentType === 'column') { |
| addComponentToSite(componentType, this); |
| } |
| }); |
| }); |
| |
| // Column drop zones (can accept components) |
| document.querySelectorAll('.layout-column').forEach(column => { |
| column.addEventListener('dragover', function(e) { |
| e.preventDefault(); |
| e.dataTransfer.dropEffect = 'copy'; |
| this.classList.add('active'); |
| }); |
| |
| column.addEventListener('dragleave', function() { |
| this.classList.remove('active'); |
| }); |
| |
| column.addEventListener('drop', function(e) { |
| e.preventDefault(); |
| this.classList.remove('active'); |
| |
| const componentType = e.dataTransfer.getData('text/plain'); |
| // Columns can accept components but not layout elements |
| if (['navbar', 'hero', 'section', 'footer', 'heading', 'paragraph', |
| 'button', 'image', 'text', 'email', 'textarea', 'select'].includes(componentType)) { |
| addComponentToSite(componentType, this); |
| } |
| }); |
| }); |
| } |
| |
| // Add a new component to the site at a specific drop zone |
| function addComponentToSite(type, dropZone) { |
| // Remove empty state if it exists |
| const emptyState = dropZone.querySelector('.empty-state'); |
| if (emptyState) { |
| emptyState.remove(); |
| } |
| |
| const componentId = `component-${nextComponentId++}`; |
| let componentHtml = ''; |
| let defaultSettings = {}; |
| |
| switch(type) { |
| case 'container': |
| componentHtml = ` |
| <div class="site-component layout-container mb-4 relative drop-zone" data-id="${componentId}" data-type="container"> |
| <div class="layout-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1"> |
| <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50"> |
| <i class="fas fa-pencil-alt text-xs"></i> |
| </button> |
| <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50"> |
| <i class="fas fa-trash-alt text-xs"></i> |
| </button> |
| </div> |
| <div class="layout-placeholder"> |
| <i class="fas fa-square-full text-indigo-300 text-xl mb-2"></i> |
| <p class="text-sm">Drop rows or components here</p> |
| </div> |
| </div> |
| `; |
| defaultSettings = { |
| padding: '1rem', |
| margin: '0 0 1rem 0', |
| background: '#f8fafc' |
| }; |
| break; |
| |
| case 'row': |
| componentHtml = ` |
| <div class="site-component layout-row mb-2 relative drop-zone" data-id="${componentId}" data-type="row"> |
| <div class="layout-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1"> |
| <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50"> |
| <i class="fas fa-pencil-alt text-xs"></i> |
| </button> |
| <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50"> |
| <i class="fas fa-trash-alt text-xs"></i> |
| </button> |
| </div> |
| <div class="layout-placeholder"> |
| <i class="fas fa-grip-lines text-indigo-300 text-xl mb-2"></i> |
| <p class="text-sm">Drop columns here</p> |
| </div> |
| </div> |
| `; |
| defaultSettings = { |
| columns: 1, |
| gap: '0.5rem' |
| }; |
| break; |
| |
| case 'column': |
| componentHtml = ` |
| <div class="site-component layout-column relative drop-zone" data-id="${componentId}" data-type="column"> |
| <div class="layout-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1"> |
| <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50"> |
| <i class="fas fa-pencil-alt text-xs"></i> |
| </button> |
| <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50"> |
| <i class="fas fa-trash-alt text-xs"></i> |
| </button> |
| </div> |
| <div class="grid-resize-handle"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 text-gray-400"> |
| <path fill-rule="evenodd" d="M12 1.586l-4 4v3.586l4-4V1.586zm4 4l-4 4h3.586l4-4V5.586zm-4 9.414l4-4v3.586l-4 4v-3.586zm-4-4l4-4H8.414l-4 4v3.586z" clip-rule="evenodd" /> |
| </svg> |
| </div> |
| <div class="layout-placeholder"> |
| <i class="fas fa-columns text-indigo-300 text-xl mb-2"></i> |
| <p class="text-sm">Drop components here</p> |
| </div> |
| </div> |
| `; |
| defaultSettings = { |
| width: '100%', |
| minWidth: '200px' |
| }; |
| break; |
| |
| case 'navbar': |
| componentHtml = ` |
| <div class="site-component mb-4 relative" data-id="${componentId}" data-type="navbar"> |
| <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1"> |
| <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50"> |
| <i class="fas fa-pencil-alt text-xs"></i> |
| </button> |
| <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50"> |
| <i class="fas fa-trash-alt text-xs"></i> |
| </button> |
| </div> |
| <div class="navbar-preview py-4 px-6"> |
| <div class="flex justify-between items-center"> |
| <div class="text-xl font-bold">Logo</div> |
| <div class="hidden md:flex space-x-6"> |
| <a href="#" class="text-gray-700 hover:text-blue-600">Home</a> |
| <a href="#" class="text-gray-700 hover:text-blue-600">Sobre</a> |
| <a href="#" class="text-gray-700 hover:text-blue-600">Serviços</a> |
| <a href="#" class="text-gray-700 hover:text-blue-600">Contato</a> |
| </div> |
| <button class="md:hidden text-gray-700"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| `; |
| defaultSettings = { |
| logoText: 'Logo', |
| menuItems: ['Home', 'Sobre', 'Serviços', 'Contato'], |
| backgroundColor: '#ffffff', |
| textColor: '#374151' |
| }; |
| break; |
| |
| case 'hero': |
| componentHtml = ` |
| <div class="site-component mb-4 relative" data-id="${componentId}" data-type="hero"> |
| <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1"> |
| <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50"> |
| <i class="fas fa-pencil-alt text-xs"></i> |
| </button> |
| <button class="delete-component p-1 text-red-500 hover:text-blue-700 rounded-full hover:bg-red-50"> |
| <i class="fas fa-trash-alt text-xs"></i> |
| </button> |
| </div> |
| <div class="hero-preview py-16 px-6 text-center"> |
| <h1 class="text-4xl font-bold mb-4">Título Principal</h1> |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Uma frase impactante que resume seu negócio ou proposta de valor.</p> |
| <div class="flex justify-center space-x-4"> |
| <button class="px-6 py-3 bg-white text-blue-600 font-medium rounded-md shadow-sm hover:bg-gray-100">Botão Primário</button> |
| <button class="px-6 py-3 border border-white text-white font-medium rounded-md shadow-sm hover:bg-white hover:text-blue-600">Botão Secundário</button> |
| </div> |
| </div> |
| </div> |
| `; |
| defaultSettings = { |
| title: 'Título Principal', |
| subtitle: 'Uma frase impactante que resume seu negócio ou proposta de valor.', |
| primaryButtonText: 'Botão Primário', |
| secondaryButtonText: 'Botão Secundário', |
| background: 'linear-gradient(135deg, #6b7280, #1e40af)', |
| textColor: '#ffffff' |
| }; |
| break; |
| |
| case 'section': |
| componentHtml = ` |
| <div class="site-component mb-4 relative" data-id="${componentId}" data-type="section"> |
| <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1"> |
| <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50"> |
| <i class="fas fa-pencil-alt text-xs"></i> |
| </button> |
| <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50"> |
| <i class="fas fa-trash-alt text-xs"></i> |
| </button> |
| </div> |
| <div class="section-preview py-12 px-6"> |
| <div class="max-w-4xl mx-auto text-center"> |
| <h2 class="text-3xl font-bold mb-4">Título da Seção</h2> |
| <p class="text-lg text-gray-600 mb-8">Descrição da seção. Adicione conteúdo relevante aqui para informar seus visitantes.</p> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <div class="text-blue-600 text-3xl mb-4"> |
| <i class="fas fa-star"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Recurso 1</h3> |
| <p class="text-gray-600">Descrição breve do recurso ou benefício.</p> |
| </div> |
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <div class="text-blue-600 text-3xl mb-4"> |
| <i class="fas fa-heart"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Recurso 2</h3> |
| <p class="text-gray-600">Descrição breve do recurso ou benefício.</p> |
| </div> |
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <div class="text-blue-600 text-3xl mb-4"> |
| <i class="fas fa-flag"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Recurso 3</h3> |
| <p class="text-gray-600">Descrição breve do recurso ou benefício.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| `; |
| defaultSettings = { |
| title: 'Título da Seção', |
| description: 'Descrição da seção. Adicione conteúdo relevante aqui para informar seus visitantes.', |
| backgroundColor: '#f9fafb', |
| textColor: '#111827', |
| features: [ |
| { icon: 'star', title: 'Recurso 1', description: 'Descrição breve do recurso ou benefício.' }, |
| { icon: 'heart', title: 'Recurso 2', description: 'Descrição breve do recurso ou benefício.' }, |
| { icon: 'flag', title: 'Recurso 3', description: 'Descrição breve do recurso ou benefício.' } |
| ] |
| }; |
| break; |
| |
| case 'footer': |
| componentHtml = ` |
| <div class="site-component mb-4 relative" data-id="${componentId}" data-type="footer"> |
| <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1"> |
| <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50"> |
| <i class="fas fa-pencil-alt text-xs"></i> |
| </button> |
| <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50"> |
| <i class="fas fa-trash-alt text-xs"></i> |
| </button> |
| </div> |
| <div class="footer-preview py-12 px-6"> |
| <div class="max-w-6xl mx-auto"> |
| <div class="grid md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-xl font-bold mb-4">Empresa</h3> |
| <p class="text-gray-400 mb-4">Uma breve descrição sobre sua empresa e o que você oferece.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-4">Links</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Sobre</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Serviços</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Contato</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-4">Contato</h3> |
| <ul class="space-y-2"> |
| <li class="text-gray-400">email@exemplo.com</li> |
| <li class="text-gray-400">(11) 99999-9999</li> |
| <li class="text-gray-400">Rua Exemplo, 123 - São Paulo, SP</li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-4">Newsletter</h3> |
| <p class="text-gray-400 mb-4">Assine nossa newsletter para receber atualizações.</p> |
| <div class="flex"> |
| <input type="email" placeholder="Seu email" class="px-4 py-2 w-full rounded-l-md focus:outline-none"> |
| <button class="bg-blue-600 px-4 py-2 rounded-r-md hover:bg-blue-700">Enviar</button> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> |
| <p>© 2023 Empresa. Todos os direitos reservados.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| `; |
| defaultSettings = { |
| companyDescription: 'Uma breve descrição sobre sua empresa e o que você oferece.', |
| links: ['Home', 'Sobre', 'Serviços', 'Contato'], |
| contactInfo: { |
| email: 'email@exemplo.com', |
| phone: '(11) 99999-9999', |
| address: 'Rua Exemplo, 123 - São Paulo, SP' |
| }, |
| socialLinks: ['facebook-f', 'twitter', 'instagram', 'linkedin-in'], |
| copyrightText: '© 2023 Empresa. Todos os direitos reservados.', |
| backgroundColor: '#1f2937', |
| textColor: '#ffffff' |
| }; |
| break; |
| |
| case 'heading': |
| componentHtml = ` |
| <div class="site-component mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${componentId}" data-type="heading"> |
| <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1"> |
| <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50"> |
| <i class="fas fa-pencil-alt text-xs"></i> |
| </button> |
| <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50"> |
| <i class="fas fa-trash-alt text-xs"></i> |
| </button> |
| </div> |
| <h2 class="text-2xl font-bold">Título</h2> |
| </div> |
| `; |
| defaultSettings = { |
| text: 'Título', |
| level: 'h2', |
| alignment: 'left', |
| color: '#111827' |
| }; |
| break; |
| |
| case 'paragraph': |
| componentHtml = ` |
| <div class="site-component mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${componentId}" data-type="paragraph"> |
| <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1"> |
| <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50"> |
| <i class="fas fa-pencil-alt text-xs"></i> |
| </button> |
| <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50"> |
| <i class="fas fa-trash-alt text-xs"></i> |
| </button> |
| </div> |
| <p class="text-gray-700">Este é um parágrafo de texto. Você pode editar o conteúdo, tamanho, cor e alinhamento nas configurações.</p> |
| </div> |
| `; |
| defaultSettings = { |
| text: 'Este é um parágrafo de texto. Você pode editar o conteúdo, tamanho, cor e alinhamento nas configurações.', |
| size: 'base', |
| alignment: 'left', |
| color: '#374151' |
| }; |
| break; |
| |
| case 'button': |
| componentHtml = ` |
| <div class="site-component mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${componentId}" data-type="button"> |
| <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1"> |
| <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50"> |
| <i class="fas fa-pencil-alt text-xs"></i> |
| </button> |
| <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50"> |
| <i class="fas fa-trash-alt text-xs"></i> |
| </button> |
| </div> |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md shadow-sm hover:bg-blue-700">Botão</button> |
| </div> |
| `; |
| defaultSettings = { |
| text: 'Botão', |
| link: '#', |
| style: 'primary', |
| size: 'medium', |
| color: '#2563eb' |
| }; |
| break; |
| |
| case 'image': |
| componentHtml = ` |
| <div class="site-component mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${componentId}" data-type="image"> |
| <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1"> |
| <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50"> |
| <i class="fas fa-pencil-alt text-xs"></i> |
| </button> |
| <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50"> |
| <i class="fas fa-trash-alt text-xs"></i> |
| </button> |
| </div> |
| <div class="bg-gray-100 h-40 rounded-md flex items-center justify-center"> |
| <span class="text-gray-400">Imagem</span> |
| </div> |
| </div> |
| `; |
| defaultSettings = { |
| src: '', |
| alt: 'Imagem', |
| width: '100%', |
| height: 'auto', |
| alignment: 'center' |
| }; |
| break; |
| |
| case 'text': |
| componentHtml = ` |
| <div class="site-component mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${componentId}" data-type="text"> |
| <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1"> |
| <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50"> |
| <i class="fas fa-pencil-alt text-xs"></i> |
| </button> |
| <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50"> |
| <i class="fas fa-trash-alt text-xs"></i> |
| </button> |
| </div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Text Input</label> |
| <input type="text" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="Enter text"> |
| </div> |
| `; |
| defaultSettings = { |
| label: 'Text Input', |
| placeholder: 'Enter text', |
| required: false |
| }; |
| break; |
| |
| case 'email': |
| componentHtml = ` |
| <div class="site-component mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${componentId}" data-type="email"> |
| <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1"> |
| <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50"> |
| <i class="fas fa-pencil-alt text-xs"></i> |
| </button> |
| <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50"> |
| <i class="fas fa-trash-alt text-xs"></i> |
| </button> |
| </div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Email Input</label> |
| <input type="email" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="Enter email"> |
| </div> |
| `; |
| defaultSettings = { |
| label: 'Email Input', |
| placeholder: 'Enter email', |
| required: false |
| }; |
| break; |
| |
| case 'textarea': |
| componentHtml = ` |
| <div class="site-component mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${componentId}" data-type="textarea"> |
| <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1"> |
| <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50"> |
| <i class="fas fa-pencil-alt text-xs"></i> |
| </button> |
| <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50"> |
| <i class="fas fa-trash-alt text-xs"></i> |
| </button> |
| </div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Text Area</label> |
| <textarea rows="3" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="Enter text"></textarea> |
| </div> |
| `; |
| defaultSettings = { |
| label: 'Text Area', |
| placeholder: 'Enter text', |
| required: false, |
| rows: 3 |
| }; |
| break; |
| |
| case 'select': |
| componentHtml = ` |
| <div class="site-component mb-4 p-4 bg-white rounded border border-gray-200 shadow-sm relative" data-id="${componentId}" data-type="select"> |
| <div class="component-actions absolute -top-3 -right-3 bg-white rounded-full shadow-md p-1 space-x-1"> |
| <button class="edit-component p-1 text-blue-500 hover:text-blue-700 rounded-full hover:bg-blue-50"> |
| <i class="fas fa-pencil-alt text-xs"></i> |
| </button> |
| <button class="delete-component p-1 text-red-500 hover:text-red-700 rounded-full hover:bg-red-50"> |
| <i class="fas fa-trash-alt text-xs"></i> |
| </button> |
| </div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Dropdown</label> |
| <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> |
| <option>Option 1</option> |
| <option>Option 2</option> |
| <option>Option 3</option> |
| </select> |
| </div> |
| `; |
| defaultSettings = { |
| label: 'Dropdown', |
| options: ['Option 1', 'Option 2', 'Option 3'], |
| required: false |
| }; |
| break; |
| } |
| |
| // Create a temporary element to parse the HTML |
| const tempDiv = document.createElement('div'); |
| tempDiv.innerHTML = componentHtml.trim(); |
| const newComponent = tempDiv.firstChild; |
| |
| // Add to site |
| if (dropZone === siteContainer) { |
| // Adding to main container |
| dropZone.appendChild(newComponent); |
| } else { |
| // Adding to a layout element (container, row, or column) |
| const placeholder = dropZone.querySelector('.layout-placeholder'); |
| if (placeholder) { |
| dropZone.insertBefore(newComponent, placeholder); |
| } else { |
| dropZone.appendChild(newComponent); |
| } |
| } |
| |
| // Add to site data |
| const currentPage = siteData.pages.find(page => page.id === siteData.currentPage); |
| if (currentPage) { |
| currentPage.components.push({ |
| id: componentId, |
| type: type, |
| settings: defaultSettings, |
| parentId: dropZone !== siteContainer ? dropZone.dataset.id : null |
| }); |
| } |
| |
| // Set up component interactions |
| setupComponentInteractions(newComponent); |
| |
| // Set up drop zones for the new element if it's a layout element |
| if (['container', 'row', 'column'].includes(type)) { |
| setupDropZones(); |
| } |
| |
| // If it's a column, set up resize handle |
| if (type === 'column') { |
| setupColumnResize(newComponent); |
| } |
| |
| // Select the new component |
| selectComponent(newComponent); |
| } |
| |
| // Set up column resize functionality |
| function setupColumnResize(columnElement) { |
| const resizeHandle = columnElement.querySelector('.grid-resize-handle'); |
| |
| resizeHandle.addEventListener('mousedown', function(e) { |
| e.preventDefault(); |
| isResizing = true; |
| currentResizeColumn = columnElement; |
| startX = e.clientX; |
| startWidth = parseInt(document.defaultView.getComputedStyle(columnElement).width, 10); |
| |
| document.documentElement.style.cursor = 'nwse-resize'; |
| document.addEventListener('mousemove', handleResize); |
| document.addEventListener('mouseup', stopResize); |
| }); |
| |
| function handleResize(e) { |
| if (!isResizing) return; |
| |
| const width = startWidth + e.clientX - startX; |
| currentResizeColumn.style.width = `${width}px`; |
| currentResizeColumn.style.minWidth = `${width}px`; |
| |
| // Update site data |
| const componentId = currentResizeColumn.dataset.id; |
| const currentPage = siteData.pages.find(page => page.id === siteData.currentPage); |
| if (currentPage) { |
| const componentData = currentPage.components.find(comp => comp.id === componentId); |
| if (componentData) { |
| componentData.settings.width = `${width}px`; |
| componentData.settings.minWidth = `${width}px`; |
| } |
| } |
| } |
| |
| function stopResize() { |
| isResizing = false; |
| currentResizeColumn = null; |
| document.documentElement.style.cursor = ''; |
| document.removeEventListener('mousemove', handleResize); |
| document.removeEventListener('mouseup', stopResize); |
| } |
| } |
| |
| // Set up component interactions (click, delete, etc.) |
| function setupComponentInteractions(componentElement) { |
| // Select component on click |
| componentElement.addEventListener('click', function(e) { |
| if (!e.target.closest('.component-actions') && !e.target.closest('.layout-actions')) { |
| selectComponent(componentElement); |
| } |
| }); |
| |
| // Delete component |
| const deleteBtn = componentElement.querySelector('.delete-component'); |
| if (deleteBtn) { |
| deleteBtn.addEventListener('click', function() { |
| const componentId = componentElement.dataset.id; |
| |
| // Remove from DOM |
| componentElement.remove(); |
| |
| // Remove from site data |
| const currentPage = siteData.pages.find(page => page.id === siteData.currentPage); |
| if (currentPage) { |
| currentPage.components = currentPage.components.filter(comp => comp.id !== componentId); |
| } |
| |
| // Clear selection |
| selectedComponent = null; |
| renderComponentSettings(null); |
| |
| // Show empty state if no components left in container |
| const containers = document.querySelectorAll('.layout-container, .layout-row, .layout-column'); |
| containers.forEach(container => { |
| if (container.children.length === 1 && container.querySelector('.layout-placeholder')) { |
| container.innerHTML = ` |
| <div class="layout-placeholder"> |
| <i class="fas fa-square-full text-indigo-300 text-xl mb-2"></i> |
| <p class="text-sm">Drop ${container.classList.contains('layout-container') ? 'rows or components' : |
| container.classList.contains('layout-row') ? 'columns' : 'components'} here</p> |
| </div> |
| `; |
| } |
| }); |
| |
| // Show empty state if no components left in main container |
| if (siteContainer.children.length === 0) { |
| siteContainer.innerHTML = ` |
| <div class="empty-state"> |
| <i class="fas fa-mouse-pointer text-4xl mb-3 text-gray-400"></i> |
| <h3 class="font-medium text-gray-500">Arraste componentes aqui</h3> |
| <p class="text-sm text-gray-400 mt-1">Comece construindo seu site arrastando componentes do painel esquerdo</p> |
| </div> |
| `; |
| } |
| }); |
| } |
| |
| // Edit component (same as select for now) |
| const editBtn = componentElement.querySelector('.edit-component'); |
| if (editBtn) { |
| editBtn.addEventListener('click', function() { |
| selectComponent(componentElement); |
| }); |
| } |
| } |
| |
| // Select a component and show its settings |
| function selectComponent(componentElement) { |
| // Deselect previously selected component |
| if (selectedComponent) { |
| selectedComponent.classList.remove('selected'); |
| } |
| |
| // Select new component |
| selectedComponent = componentElement; |
| if (selectedComponent) { |
| selectedComponent.classList.add('selected'); |
| |
| // Scroll to show the selected component |
| selectedComponent.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); |
| |
| // Find the component in site data |
| const componentId = selectedComponent.dataset.id; |
| const currentPage = siteData.pages.find(page => page.id === siteData.currentPage); |
| const componentData = currentPage ? currentPage.components.find(comp => comp.id === componentId) : null; |
| |
| // Show component settings |
| renderComponentSettings(componentData); |
| } else { |
| renderComponentSettings(null); |
| } |
| } |
| |
| // Render component settings panel |
| function renderComponentSettings(componentData) { |
| // Hide page and theme settings |
| pageSettings.classList.add('hidden'); |
| themeSettings.classList.add('hidden'); |
| componentSettings.classList.remove('hidden'); |
| |
| if (!componentData) { |
| componentSettings.innerHTML = '<p class="text-gray-500 italic">Selecione um componente para editar suas propriedades</p>'; |
| return; |
| } |
| |
| let settingsHtml = ''; |
| |
| switch(componentData.type) { |
| case 'container': |
| settingsHtml = ` |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Padding</label> |
| <input type="text" class="component-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="padding" value="${componentData.settings.padding}"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Margin</label> |
| <input type="text" class="component-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="margin" value="${componentData.settings.margin}"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Background Color</label> |
| <input type="color" class="component-setting w-full h-10 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" data-setting="background" value="${componentData.settings.background}"> |
| </div> |
| </div> |
| `; |
| break; |
| |
| case 'row': |
| settingsHtml = ` |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Number of Columns</label> |
| <select class="component-setting w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" data-setting="columns"> |
| <option value="1" ${componentData.settings.columns === 1 ? 'selected' : ''}>1 Column</ |
| </html> |
