Desconectado

Explorador de Arquivos

projeto-site
index.html
style.css
script.js
logo.png

index.html /projeto-site/

HTML

Linha 1, Col 1

` }); // ===== VARIÁVEIS DE ESTADO ===== let isConnected = false; let currentFile = 'index.html'; let fileStructure = [ { name: 'projeto-site', type: 'folder', children: [ { name: 'index.html', type: 'file', language: 'html' }, { name: 'style.css', type: 'file', language: 'css' }, { name: 'script.js', type: 'file', language: 'javascript' }, { name: 'logo.png', type: 'file', language: 'image' } ]} ]; // ===== ELEMENTOS DO DOM ===== const sidebar = document.querySelector('.sidebar'); const sidebarToggle = document.getElementById('sidebarToggle'); const statusIndicator = document.getElementById('statusIndicator'); const statusText = document.getElementById('statusText'); const connectBtn = document.getElementById('connectBtn'); const ftpModal = document.getElementById('ftpModal'); const closeModal = document.getElementById('closeModal'); const cancelBtn = document.getElementById('cancelBtn'); const saveConnectionBtn = document.getElementById('saveConnectionBtn'); const newFileBtn = document.getElementById('newFileBtn'); const newFolderBtn = document.getElementById('newFolderBtn'); const refreshFilesBtn = document.getElementById('refreshFilesBtn'); const saveBtn = document.getElementById('saveBtn'); const downloadBtn = document.getElementById('downloadBtn'); const formatBtn = document.getElementById('formatBtn'); const publishBtn = document.getElementById('publishBtn'); const currentFileName = document.getElementById('currentFileName'); const filePath = document.getElementById('filePath'); const languageMode = document.getElementById('languageMode'); const lineCount = document.getElementById('lineCount'); const fileList = document.getElementById('fileList'); const newFileModal = document.getElementById('newFileModal'); const closeNewFileModal = document.getElementById('closeNewFileModal'); const cancelNewFileBtn = document.getElementById('cancelNewFileBtn'); const createFileBtn = document.getElementById('createFileBtn'); // ===== FUNÇÕES DE CONEXÃO FTP ===== function updateConnectionStatus(connected) { isConnected = connected; statusIndicator.className = 'status-indicator ' + (connected ? 'connected' : ''); statusText.textContent = connected ? 'Conectado' : 'Desconectado'; connectBtn.innerHTML = connected ? 'Desconectar' : 'Conectar ao FTP'; // Atualizar estado dos botões saveBtn.disabled = !connected; publishBtn.disabled = !connected; } function connectToFTP(connectionData) { // Simulação de conexão FTP console.log('Conectando ao FTP:', connectionData); // Simular atraso de conexão connectBtn.innerHTML = 'Conectando...'; connectBtn.disabled = true; setTimeout(() => { // Simular conexão bem-sucedida updateConnectionStatus(true); showNotification('Conexão estabelecida com sucesso!', 'success'); // Carregar arquivos do servidor loadRemoteFiles(); // Fechar modal ftpModal.classList.remove('active'); }, 1500); } function loadRemoteFiles() { // Simulação de carregamento de arquivos do servidor FTP console.log('Carregando arquivos do servidor...'); // Atualizar lista de arquivos renderFileList(); showNotification('Arquivos carregados com sucesso!', 'success'); } // ===== FUNÇÕES DE MANIPULAÇÃO DE ARQUIVOS ===== function renderFileList() { fileList.innerHTML = ''; fileStructure.forEach(item => { if (item.type === 'folder') { const folderItem = document.createElement('li'); folderItem.className = 'folder-item'; folderItem.innerHTML = ` ${item.name} `; // Adicionar event listener para expandir/colapsar pasta folderItem.addEventListener('click', (e) => { if (e.target.classList.contains('fa-chevron-down') || e.target.classList.contains('fa-chevron-right')) { const icon = folderItem.querySelector('.fa-chevron-down, .fa-chevron-right'); if (icon.classList.contains('fa-chevron-down')) { icon.classList.remove('fa-chevron-down'); icon.classList.add('fa-chevron-right'); } else { icon.classList.remove('fa-chevron-right'); icon.classList.add('fa-chevron-down'); } } }); fileList.appendChild(folderItem); // Adicionar arquivos dentro da pasta if (item.children) { item.children.forEach(child => { const fileItem = document.createElement('li'); fileItem.className = 'file-item'; if (child.name === currentFile) { fileItem.classList.add('active'); } // Determinar ícone baseado no tipo de arquivo let iconClass = 'fa-file'; if (child.language === 'html') iconClass = 'fa-file-code'; if (child.language === 'css') iconClass = 'fa-file-code'; if (child.language === 'javascript') iconClass = 'fa-file-code'; if (child.language === 'image') iconClass = 'fa-image'; fileItem.innerHTML = ` ${child.name} `; // Adicionar event listener para selecionar arquivo fileItem.addEventListener('click', () => { selectFile(child.name, child.language); }); fileList.appendChild(fileItem); }); } } }); } function selectFile(filename, language) { currentFile = filename; currentFileName.textContent = filename; // Atualizar linguagem const languageMap = { 'html': 'HTML', 'css': 'CSS', 'javascript': 'JavaScript', 'image': 'Imagem' }; languageMode.textContent = languageMap[language] || 'Texto'; // Atualizar modo do CodeMirror const modeMap = { 'html': 'htmlmixed', 'css': 'css', 'javascript': 'javascript', 'image': 'text/plain' }; codeEditor.setOption('mode', modeMap[language] || 'text/plain'); // Remover classe active de todos os itens document.querySelectorAll('.file-item').forEach(item => { item.classList.remove('active'); }); // Adicionar classe active ao item selecionado const fileItems = document.querySelectorAll('.file-item'); fileItems.forEach(item => { if (item.querySelector('.file-name').textContent === filename) { item.classList.add('active'); } }); // Simular carregamento de conteúdo do arquivo const fileContents = { 'index.html': ` Meu Site

Bem-vindo ao CodeSync

Editor de código online com conexão FTP

Recursos

Edição de código em tempo real
Conexão com servidor FTP
Suporte para múltiplas linguagens
Interface moderna e responsiva

`, 'style.css': `/* Estilos para o projeto */ :root { --primary-color: #FF6C37; --background: #0F1217; --text-color: #FFFFFF; } body { font-family: 'Segoe UI', sans-serif; background-color: var(--background); color: var(--text-color); margin: 0; padding: 20px; line-height: 1.6; } header { text-align: center; padding: 40px 0; border-bottom: 2px solid var(--primary-color); } h1 { color: var(--primary-color); font-size: 2.5rem; } section { max-width: 800px; margin: 40px auto; padding: 20px; background-color: #1A1D24; border-radius: 12px; } ul { list-style-type: none; padding-left: 0; } li { padding: 10px 0; border-bottom: 1px solid #2D3440; } li:before { content: "✓"; color: var(--primary-color); margin-right: 10px; } footer { text-align: center; padding: 20px; margin-top: 40px; color: #8C95A6; }`, 'script.js': `// Código JavaScript para o projeto document.addEventListener('DOMContentLoaded', function() { console.log('CodeSync Editor - Carregado com sucesso!'); // Exemplo de interatividade const headings = document.querySelectorAll('h1, h2'); headings.forEach(heading => { heading.addEventListener('click', function() { this.style.color = '#FF6C37'; setTimeout(() => { this.style.color = ''; }, 1000); }); }); // Função para atualizar data no footer function updateFooterDate() { const footer = document.querySelector('footer p'); if (footer) { const currentYear = new Date().getFullYear(); footer.innerHTML = `© ${currentYear} - Desenvolvido com CodeSync`; } } updateFooterDate(); });` }; codeEditor.setValue(fileContents[filename] || `// Conteúdo do arquivo ${filename}\n// Este arquivo foi carregado do servidor FTP.`); showNotification(`Arquivo "${filename}" carregado.`, 'info'); } function saveFile() { if (!isConnected) { showNotification('Conecte-se ao FTP antes de salvar.', 'error'); return; } const content = codeEditor.getValue(); console.log(`Salvando arquivo ${currentFile}:`, content.substring(0, 100) + '...'); // Simular salvamento saveBtn.innerHTML = 'Salvando...'; saveBtn.disabled = true; setTimeout(() => { saveBtn.innerHTML = 'Salvar'; saveBtn.disabled = false; showNotification(`Arquivo "${currentFile}" salvo com sucesso no servidor!`, 'success'); }, 1000); } function createNewFile() { const fileName = document.getElementById('fileName').value; const fileType = document.getElementById('fileType').value; if (!fileName) { showNotification('Digite um nome para o arquivo.', 'error'); return; } // Adicionar extensão se não tiver let finalFileName = fileName; const extensions = { 'html': '.html', 'css': '.css', 'js': '.js', 'php': '.php', 'txt': '.txt' }; if (extensions[fileType] && !fileName.endsWith(extensions[fileType])) { finalFileName += extensions[fileType]; } // Adicionar ao estrutura de arquivos const newFile = { name: finalFileName, type: 'file', language: fileType }; // Encontrar a primeira pasta e adicionar o arquivo const folder = fileStructure.find(item => item.type === 'folder'); if (folder) { if (!folder.children) folder.children = []; folder.children.push(newFile); } else { fileStructure.push(newFile); } // Atualizar lista de arquivos renderFileList(); // Selecionar o novo arquivo selectFile(finalFileName, fileType); // Fechar modal newFileModal.classList.remove('active'); // Limpar campo document.getElementById('fileName').value = ''; showNotification(`Arquivo "${finalFileName}" criado com sucesso!`, 'success'); } // ===== FUNÇÕES AUXILIARES ===== function showNotification(message, type = 'info') { // Criar elemento de notificação const notification = document.createElement('div'); notification.className = `notification notification-${type}`; notification.innerHTML = `

${message}

`; // Estilos para notificação notification.style.cssText = ` position: fixed; top: 20px; right: 20px; background-color: var(--surface-card); color: var(--text-primary); padding: var(--space-12) var(--space-16); border-radius: var(--radius-md); border-left: 4px solid ${type === 'success' ? 'var(--status-success)' : type === 'error' ? 'var(--status-error)' : 'var(--status-warning)'}; box-shadow: var(--shadow-lg); z-index: 9999; display: flex; align-items: center; justify-content: space-between; min-width: 300px; max-width: 400px; transform: translateX(120%); transition: transform 0.3s ease; `; document.body.appendChild(notification); // Animar entrada setTimeout(() => { notification.style.transform = 'translateX(0)'; }, 10); // Configurar botão de fechar const closeBtn = notification.querySelector('.close-notification'); closeBtn.addEventListener('click', () => { notification.style.transform = 'translateX(120%)'; setTimeout(() => { document.body.removeChild(notification); }, 300); }); // Auto-remover após 5 segundos setTimeout(() => { if (document.body.contains(notification)) { notification.style.transform = 'translateX(120%)'; setTimeout(() => { if (document.body.contains(notification)) { document.body.removeChild(notification); } }, 300); } }, 5000); } function formatCode() { const mode = codeEditor.getOption('mode'); const content = codeEditor.getValue(); // Simples formatação (em um projeto real, usar uma biblioteca como Prettier) let formatted = content; if (mode === 'htmlmixed' || mode === 'html') { // Formatação básica de HTML formatted = content .replace(/(>)(<)(\/*)/g, "$1\n$2$3") .replace(/^(.*)$/gm, " $1"); } else if (mode === 'css') { // Formatação básica de CSS formatted = content .replace(/\{/g, " {\n ") .replace(/\}/g, "\n}\n") .replace(/;/g, ";\n "); } else if (mode === 'javascript') { // Formatação básica de JavaScript formatted = content .replace(/\{/g, " {\n ") .replace(/\}/g, "\n}\n") .replace(/;/g, ";\n "); } codeEditor.setValue(formatted); showNotification('Código formatado com sucesso!', 'success'); } // ===== EVENT LISTENERS ===== // Sidebar toggle sidebarToggle.addEventListener('click', () => { sidebar.classList.toggle('collapsed'); const icon = sidebarToggle.querySelector('i'); if (sidebar.classList.contains('collapsed')) { icon.classList.remove('fa-chevron-left'); icon.classList.add('fa-chevron-right'); } else { icon.classList.remove('fa-chevron-right'); icon.classList.add('fa-chevron-left'); } }); // Botão de conexão FTP connectBtn.addEventListener('click', () => { if (isConnected) { // Desconectar updateConnectionStatus(false); showNotification('Desconectado do servidor FTP.', 'info'); } else { // Abrir modal de conexão ftpModal.classList.add('active'); } }); // Fechar modal de conexão closeModal.addEventListener('click', () => { ftpModal.classList.remove('active'); }); cancelBtn.addEventListener('click', () => { ftpModal.classList.remove('active'); }); // Salvar configurações de conexão saveConnectionBtn.addEventListener('click', () => { const host = document.getElementById('ftpHost').value; const port = document.getElementById('ftpPort').value; const user = document.getElementById('ftpUser').value; const password = document.getElementById('ftpPassword').value; const path = document.getElementById('ftpPath').value; if (!host || !port || !user) { showNotification('Preencha todos os campos obrigatórios.', 'error'); return; } const connectionData = { host, port, user, password, path }; connectToFTP(connectionData); }); // Botão de salvar arquivo saveBtn.addEventListener('click', saveFile); // Botão de download downloadBtn.addEventListener('click', () => { const content = codeEditor.getValue(); const blob = new Blob([content], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = currentFile; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showNotification(`Arquivo "${currentFile}" baixado.`, 'success'); }); // Botão de formatar código formatBtn.addEventListener('click', formatCode); // Botão de publicar publishBtn.addEventListener('click', () => { if (!isConnected) { showNotification('Conecte-se ao FTP antes de publicar.', 'error'); return; } publishBtn.innerHTML = 'Publicando...'; publishBtn.disabled = true; setTimeout(() => { publishBtn.innerHTML = 'Publicar'; publishBtn.disabled = false; showNotification('Site publicado com sucesso!', 'success'); }, 2000); }); // Atualizar contador de linhas codeEditor.on('cursorActivity', (editor) => { const cursor = editor.getCursor(); lineCount.textContent = `Linha ${cursor.line + 1}, Col ${cursor.ch + 1}`; }); // Novo arquivo newFileBtn.addEventListener('click', () => { newFileModal.classList.add('active'); }); closeNewFileModal.addEventListener('click', () => { newFileModal.classList.remove('active'); }); cancelNewFileBtn.addEventListener('click', () => { newFileModal.classList.remove('active'); }); createFileBtn.addEventListener('click', createNewFile); // Nova pasta (simulação) newFolderBtn.addEventListener('click', () => { showNotification('Funcionalidade de nova pasta em desenvolvimento.', 'info'); }); // Atualizar arquivos refreshFilesBtn.addEventListener('click', () => { if (!isConnected) { showNotification('Conecte-se ao FTP para atualizar os arquivos.', 'error'); return; } refreshFilesBtn.querySelector('i').classList.add('fa-spin'); setTimeout(() => { refreshFilesBtn.querySelector('i').classList.remove('fa-spin'); showNotification('Lista de arquivos atualizada.', 'success'); }, 1000); }); // Permitir fechar modais com ESC document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { ftpModal.classList.remove('active'); newFileModal.classList.remove('active'); } }); // ===== INICIALIZAÇÃO ===== // Renderizar lista de arquivos inicial renderFileList(); // Selecionar o primeiro arquivo selectFile('index.html', 'html'); // Atualizar status de conexão updateConnectionStatus(false); // Mostrar mensagem de boas-vindas setTimeout(() => { showNotification('Bem-vindo ao CodeSync Editor! Conecte-se ao FTP para começar.', 'info'); }, 1000);

Configurações de Conexão FTP

Criar Novo Arquivo

Recursos