Files

index.html ×
styles.css ×
script.js ×
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Document

Hello, World!

Ln 15, Col 45 | UTF-8 | LF | JS
`, "styles.css": `:root { --background-color: #f0f0f0; --text-color: #333; } body { font-family: sans-serif; background-color: var(--background-color); color: var(--text-color); padding: 20px; } h1 { color: #007bff; }`, "script.js": `console.log("Hello from script.js!"); function greet(name) { return "Hello, " + name + "!"; } console.log(greet("Developer"));` }; function updateEditor(fileName) { const activeFileLi = document.querySelector('.file-list li.active'); if (activeFileLi) { activeFileLi.classList.remove('active'); } const clickedFileLi = Array.from(fileListItems).find(li => li.textContent === fileName); if (clickedFileLi) { clickedFileLi.classList.add('active'); } const activeTab = document.querySelector('.tab-bar .tab.active'); if (activeTab) { activeTab.classList.remove('active'); } const clickedTab = Array.from(tabs).find(tab => tab.textContent.trim() === fileName); if (clickedTab) { clickedTab.classList.add('active'); } const content = fileContents[fileName] || `// File not found: ${fileName}`; editor.innerHTML = highlightSyntax(content, fileName); updateLineNumbers(); updateFooterInfo(fileName); } function highlightSyntax(code, fileName) { let highlightedCode = code; if (fileName.endsWith('.html')) { highlightedCode = highlightedCode.replace(/<!\s*DOCTYPE\s+html>/gi, '<!DOCTYPE html>'); highlightedCode = highlightedCode.replace(/<([a-zA-Z\/][a-zA-Z0-9_-]*)([^>]*)>/g, '<$1$2>'); highlightedCode = highlightedCode.replace(/([a-zA-Z\/][a-zA-Z0-9_-]*)<\/span>/g, '$1'); highlightedCode = highlightedCode.replace(/([^<]*)/g, '$1'); // Fix for self-closing tags highlightedCode = highlightedCode.replace(/<([a-zA-Z\/][a-zA-Z0-9_-]*) ([^>]*)>/g, '<$1 $2>'); highlightedCode = highlightedCode.replace(/([a-zA-Z-]+)="([^"]*)"/g, '$1="$2"'); highlightedCode = highlightedCode.replace(/<!--(.*?)-->/gs, '<!--$1-->'); } else if (fileName.endsWith('.css')) { highlightedCode = highlightedCode.replace(/(:root|\.)([a-zA-Z-]+)/g, '$1$2'); highlightedCode = highlightedCode.replace(/([a-zA-Z-]+)\s*:/g, '$1:'); highlightedCode = highlightedCode.replace(/#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g, '#$1'); highlightedCode = highlightedCode.replace(/;/, ';'); highlightedCode = highlightedCode.replace(/\/\*(.*?)\*\//gs, '/*$1*/'); } else if (fileName.endsWith('.js')) { highlightedCode = highlightedCode.replace(/\b(const|let|var|function|return|console|log|if|else|for|while|new|class|import|export)\b/g, '$1'); highlightedCode = highlightedCode.replace(/".*?"|'.*?'|\`.*?\`/g, '$&'); highlightedCode = highlightedCode.replace(/\/\/.*$/gm, '$&'); highlightedCode = highlightedCode.replace(/\/\*[\s\S]*?\*\//g, '$&'); highlightedCode = highlightedCode.replace(/\b[0-9]+\b/g, '$&'); highlightedCode = highlightedCode.replace(/\b[a-zA-Z_][a-zA-Z0-9_]*\s*\(/g, '$&'); } return highlightedCode; } function updateLineNumbers() { const lines = editor.textContent.split('\n').length; let lineNumberHtml = ''; for (let i = 1; i <= lines; i++) { lineNumberHtml += `${i}
`; } lineNumbers.innerHTML = lineNumberHtml; } function updateFooterInfo(fileName) { const lines = editor.textContent.split('\n').length; const currentCol = getCaretPosition(editor); const fileType = fileName.split('.').pop().toUpperCase() || 'TXT'; footer.textContent = `Ln ${lines}, Col ${currentCol} | UTF-8 | LF | ${fileType}`; } function getCaretPosition(element) { let position = 0; if (typeof element.selectionStart === "number") { position = element.selectionStart; } const lines = element.value.split('\n'); let currentLine = 1; let currentCol = 1; for (let i = 0; i < position; i++) { if (element.textContent[i] === '\n') { currentLine++; currentCol = 1; } else { currentCol++; } } return currentCol; } fileListItems.forEach(item => { item.addEventListener('click', () => { const fileName = item.textContent; updateEditor(fileName); }); }); tabs.forEach(tab => { tab.addEventListener('click', (event) => { if (!event.target.classList.contains('close-tab')) { const fileName = tab.textContent.trim(); updateEditor(fileName); } }); }); document.querySelectorAll('.tab .close-tab').forEach(closeBtn => { closeBtn.addEventListener('click', (event) => { event.stopPropagation(); const tabToRemove = closeBtn.closest('.tab'); const fileName = tabToRemove.textContent.trim(); // Remove from tabs tabToRemove.remove(); // Remove from file list (optional, but good for consistency) const fileListItem = Array.from(fileListItems).find(li => li.textContent === fileName); if (fileListItem) { fileListItem.classList.remove('active'); } // If the closed tab was active, activate the next one or clear editor if (tabToRemove.classList.contains('active')) { const firstTab = document.querySelector('.tab-bar .tab'); if (firstTab) { firstTab.classList.add('active'); updateEditor(firstTab.textContent.trim()); } else { editor.textContent = ''; lineNumbers.innerHTML = '1
'; footer.textContent = 'Ln 1, Col 1 | UTF-8 | LF | TXT'; } } }); }); editor.addEventListener('input', () => { updateLineNumbers(); const activeTab = document.querySelector('.tab-bar .tab.active'); if (activeTab) { updateFooterInfo(activeTab.textContent.trim()); } }); editor.addEventListener('keyup', () => { const activeTab = document.querySelector('.tab-bar .tab.active'); if (activeTab) { updateFooterInfo(activeTab.textContent.trim()); } }); editor.addEventListener('keydown', (e) => { if (e.key === 'Tab') { e.preventDefault(); document.execCommand('insertText', false, ' '); // Insert 4 spaces for tab } }); // Initial load updateEditor('index.html');