\n`, css: `/* ASLI FORM CSS Template */\nbody {\n font-family: 'Inter', sans-serif;\n line-height: 1.6;\n margin: 0;\n padding: 20px;\n color: #0f172a;\n background-color: #f8fafc;\n}\n\n.container {\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n background: white;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.05);\n}\n\nh1 { color: #1e40af; }\n\n.btn {\n display: inline-block;\n padding: 10px 20px;\n background-color: #059669;\n color: white;\n text-decoration: none;\n border-radius: 6px;\n transition: background-color 0.3s;\n}\n\n.btn:hover { background-color: #047857; }`, javascript: `// ASLI FORM JavaScript Template\nfunction greet() {\n console.log("Hello from ASLI FORM Code Editor!");\n return "Hello, World!";\n}\n\nfunction calculateFactorial(n) {\n if (n === 0 || n === 1) return 1;\n return n * calculateFactorial(n - 1);\n}\n\n// Execute\ngreet();\nconsole.log("Factorial of 5 is:", calculateFactorial(5));`, python: `# ASLI FORM Python Template\ndef greet():\n print("Hello from ASLI FORM Code Editor!")\n return "Hello, World!"\n\ndef calculate_factorial(n):\n if n == 0 or n == 1:\n return 1\n return n * calculate_factorial(n - 1)\n\n# Execute\ngreet()\nprint(f"Factorial of 5 is: {calculate_factorial(5)}")`, java: `// ASLI FORM Java Template\npublic class Main {\n public static void main(String[] args) {\n System.out.println("Hello from ASLI FORM Code Editor!");\n System.out.println("Factorial of 5 is: " + factorial(5));\n }\n \n public static int factorial(int n) {\n if (n == 0 || n == 1) return 1;\n return n * factorial(n - 1);\n }\n}`, c: `// ASLI FORM C Template\n#include \n\nint factorial(int n) {\n if (n == 0 || n == 1) return 1;\n return n * factorial(n - 1);\n}\n\nint main() {\n printf("Hello from ASLI FORM Code Editor!\\n");\n printf("Factorial of 5 is: %d\\n", factorial(5));\n return 0;\n}`, php: ``, sql: `-- ASLI FORM SQL Template\nCREATE TABLE users (\n id INT PRIMARY KEY,\n name VARCHAR(50),\n email VARCHAR(50)\n);\n\nINSERT INTO users (id, name, email) \nVALUES (1, 'John Doe', 'john@example.com');\n\nSELECT * FROM users;`, markdown: `# ASLI FORM Markdown Template\n\n## Welcome\nThis is a **Markdown** editor with *live preview*.\n\n### Features\n- Real-time rendering\n- Syntax highlighting\n- Clean interface\n\n> "Code is poetry."` }; function initEditor() { editor = CodeMirror.fromTextArea(document.getElementById('code-editor'), { mode: languageModes[currentLanguage].mode, theme: 'default', lineNumbers: true, indentUnit: 4, smartIndent: true, autoCloseBrackets: true, matchBrackets: true, styleActiveLine: true, lint: currentLanguage === 'javascript', gutters: ["CodeMirror-linenumbers", "CodeMirror-lint-markers"], lineWrapping: true, extraKeys: { "Ctrl-Space": "autocomplete", "Ctrl-/": "toggleComment", "Ctrl-F": function(cm) { cm.execCommand("find"); }, "Ctrl-H": function(cm) { cm.execCommand("replace"); }, "Tab": function(cm) { if (cm.somethingSelected()) { cm.indentSelection("add"); } else { cm.replaceSelection(" ", "end"); } } } }); editor.setValue(languageTemplates.html); document.getElementById('filename-input').value = 'index.html'; document.getElementById('preview-type').textContent = 'HTML'; editor.on('change', function() { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { if (isAutoRunning && ['html', 'css', 'javascript', 'markdown'].includes(currentLanguage)) { runCode(); } checkForErrors(); }, 800); // 800ms debounce for performance }); } function runCode() { const code = editor.getValue(); const outputElement = document.getElementById('output-content'); const consoleElement = document.getElementById('console-content'); outputElement.innerHTML = '

Executing...

'; consoleElement.innerHTML = '

Console ready...

'; if (['html', 'css', 'javascript', 'markdown'].includes(currentLanguage)) { handleWebExecution(code, currentLanguage, outputElement, consoleElement); } else { executeViaAPI(currentLanguage, code, outputElement); } } function handleWebExecution(code, lang, outputElement, consoleElement) { const previewFrame = document.getElementById('preview-frame'); const doc = previewFrame.contentDocument || previewFrame.contentWindow.document; if (lang === 'html') { doc.open(); doc.write(code); doc.close(); outputElement.innerHTML = '

Web content executed successfully

'; } else if (lang === 'css') { if (!doc.body || !doc.body.innerHTML.trim()) { doc.open(); doc.write('

CSS Preview

This is a test paragraph

Test Button

'); doc.close(); } const existingStyles = doc.querySelectorAll('style'); existingStyles.forEach(s => s.remove()); const style = doc.createElement('style'); style.textContent = code; doc.head.appendChild(style); outputElement.innerHTML = '

CSS injected successfully

'; } else if (lang === 'javascript') { const jsWin = previewFrame.contentWindow; jsWin.console.log = function(...args) { consoleElement.innerHTML += `

> ${args.join(' ')}

`; outputElement.innerHTML = '

JavaScript executed. Check Console tab.

'; }; jsWin.console.error = function(...args) { consoleElement.innerHTML += `

> Error: ${args.join(' ')}

`; outputElement.innerHTML = '

JavaScript error occurred. Check Console.

'; }; try { jsWin.eval(code); } catch (error) { consoleElement.innerHTML += `

> Error: ${error.message}

`; outputElement.innerHTML = `

Error: ${error.message}

`; } } else if (lang === 'markdown') { // Simple markdown to HTML conversion const html = code .replace(/^### (.*$)/gim, '

$1

') .replace(/^## (.*$)/gim, '

$1

') .replace(/^# (.*$)/gim, '

$1

') .replace(/\*\*(.*)\*\*/gim, '$1') .replace(/\*(.*)\*/gim, '$1') .replace(/^- (.*$)/gim, '

$1

') .replace(/\n/gim, '
'); doc.open(); doc.write(`${html}`); doc.close(); outputElement.innerHTML = '

Markdown rendered successfully

'; } } function parseError(stderr, language) { let line = 'Unknown'; let errorType = 'Error'; let message = stderr; let solution = 'Check your syntax and ensure all variables are defined.';if (language === 'python') { const lineMatch = stderr.match(/line (\d+)/); if (lineMatch) line = lineMatch[1]; if (stderr.includes('SyntaxError')) { errorType = 'Syntax Error'; solution = 'Check for missing colons, parentheses, or incorrect indentation.'; } else if (stderr.includes('NameError')) { errorType = 'Name Error'; solution = 'A variable or function name is misspelled or not defined.'; } else if (stderr.includes('IndentationError')) { errorType = 'Indentation Error'; solution = 'Python requires consistent indentation (use 4 spaces, do not mix tabs and spaces).'; } } else if (language === 'java') { const lineMatch = stderr.match(/Main\.java:(\d+)/); if (lineMatch) line = lineMatch[1]; if (stderr.includes('cannot find symbol')) { errorType = 'Compilation Error'; solution = 'Check for misspelled variable names, missing imports, or incorrect method calls.'; } else if (stderr.includes('expected')) { errorType = 'Syntax Error'; solution = 'Missing semicolon (;), bracket (}), or parenthesis () at the end of a statement.'; } } else if (language === 'c' || language === 'cpp') { const lineMatch = stderr.match(/main\.c:(\d+)/) || stderr.match(/main\.cpp:(\d+)/); if (lineMatch) line = lineMatch[1]; if (stderr.includes('error:')) { errorType = 'Compilation Error'; solution = 'Check for missing semicolons, undeclared variables, or type mismatches.'; } } else if (language === 'php') { const lineMatch = stderr.match(/on line (\d+)/); if (lineMatch) line = lineMatch[1]; if (stderr.includes('Parse error') || stderr.includes('Fatal error')) { errorType = 'Parse/Fatal Error'; solution = 'Check for missing semicolons, unclosed quotes, or undefined functions.'; } }return { line, errorType, message, solution }; }async function executeViaAPI(lang, code, outputElement) { const langMap = { 'python': 'python', 'javascript': 'javascript', 'java': 'java', 'c': 'c', 'cpp': 'cpp', 'php': 'php', 'sql': 'sqlite3' }; const apiLang = langMap[lang] || 'python'; const apiUrl = document.getElementById('modal-api-endpoint').value || 'https://emkc.org/api/v2/piston/execute'; try { const response = await fetch(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ language: apiLang, version: "*", files: [{ content: code }] }) }); const result = await response.json(); if (result.run) { if (result.run.stderr) { const parsed = parseError(result.run.stderr, lang); outputElement.innerHTML = `

${parsed.errorType} on line ${parsed.line}:

${parsed.message}

Solution: ${parsed.solution}

`; document.getElementById('problems-content').innerHTML = `

Line ${parsed.line}: ${parsed.errorType}

${parsed.solution}

`; } else { outputElement.innerHTML = `

Execution successful:

${result.run.stdout || 'No output'}

`; document.getElementById('problems-content').innerHTML = '

No problems detected. Your code looks good!

'; } } else { outputElement.innerHTML = `

API response format unexpected.

`; } } catch (error) { outputElement.innerHTML = `

Network error. Please check your internet connection or API endpoint.

`; } } function checkForErrors() { // CodeMirror linting handles JS errors visually. // The Problems tab is updated during execution for backend languages. } function changeLanguage(lang) { currentLanguage = lang; editor.setOption('mode', languageModes[lang].mode); editor.setOption('lint', lang === 'javascript'); document.getElementById('filename-input').value = `index.${languageModes[lang].ext}`; document.getElementById('preview-type').textContent = languageModes[lang].name; updateDocumentation(); if (isAutoRunning && ['html', 'css', 'javascript', 'markdown'].includes(lang)) { runCode(); } } function updateDocumentation() { const docContent = document.getElementById('documentation-content'); const lang = languageModes[currentLanguage].name; docContent.innerHTML = `

${lang} Documentation

Official resources and guides for ${lang}:

• MDN Web Docs
• W3Schools Tutorial
• Stack Overflow

`; } function toggleTheme() { isDarkMode = !isDarkMode; document.body.classList.toggle('dark-mode', isDarkMode); editor.setOption('theme', isDarkMode ? 'dracula' : 'default'); document.getElementById('theme-toggle').innerHTML = isDarkMode ? ' Light Mode' : ' Dark Mode'; showToast(`${isDarkMode ? 'Dark' : 'Light'} mode enabled`, 'info'); } function toggleFullscreen() { document.body.classList.toggle('fullscreen'); document.getElementById('fullscreen-btn').innerHTML = document.body.classList.contains('fullscreen') ? ' Exit Full Screen' : ' Full Screen'; setTimeout(() => editor.refresh(), 100); } function showToast(message, type = 'info') { const container = document.getElementById('toast-container'); const toast = document.createElement('div'); toast.className = `toast toast-${type}`; const icons = { success: 'check-circle', error: 'exclamation-circle', warning: 'exclamation-triangle', info: 'info-circle' }; toast.innerHTML = `${message}`; container.appendChild(toast); setTimeout(() => toast.remove(), 3000); } function downloadCode() { const code = editor.getValue(); const format = document.getElementById('download-format').value; let filename = document.getElementById('download-filename').value || `code.${languageModes[currentLanguage].ext}`; if (format === 'pdf') { try { const { jsPDF } = window.jspdf; const doc = new jsPDF(); doc.setFontSize(16); doc.text('ASLI FORM Code Export', 105, 15, { align: 'center' }); doc.setFontSize(10); doc.setFont("courier", "normal"); const lines = doc.splitTextToSize(code, 170); doc.text(lines, 20, 25); doc.save(filename.replace(/\.[^/.]+$/, "") + '.pdf'); showToast('Downloaded as PDF', 'success'); } catch (e) { showToast('PDF generation failed: ' + e.message, 'error'); } } else { let blob, ext = filename.split('.').pop(); if (format === 'html') { blob = new Blob([`\n\n\n\n

${code.replace(//g, '>')}

\n\n`], { type: 'text/html' }); ext = 'html'; } else { blob = new Blob([code], { type: 'text/plain' }); } const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showToast(`Downloaded as ${format.toUpperCase()}`, 'success'); } document.getElementById('download-modal').style.display = 'none'; } // Event Listeners document.addEventListener('DOMContentLoaded', () => { initEditor(); document.getElementById('language-selector').addEventListener('change', function(e) { changeLanguage(e.target.value); }); document.getElementById('run-btn').addEventListener('click', runCode); document.getElementById('clear-btn').addEventListener('click', function() { if (confirm('Clear editor?')) { editor.setValue(''); showToast('Editor cleared', 'info'); } }); document.getElementById('clear-output-btn').addEventListener('click', function() { document.getElementById('output-content').innerHTML = '

Output cleared.

'; document.getElementById('console-content').innerHTML = '

Console cleared.

'; }); document.getElementById('theme-toggle').addEventListener('click', toggleTheme); document.getElementById('fullscreen-btn').addEventListener('click', toggleFullscreen); document.getElementById('new-file-btn').addEventListener('click', function() { if (confirm('Create new file? Unsaved changes will be lost.')) { editor.setValue(languageTemplates[currentLanguage] || ''); showToast('New file created', 'success'); } }); document.getElementById('refresh-preview-btn').addEventListener('click', function() { runCode(); showToast('Preview refreshed', 'info'); }); document.getElementById('toggle-preview-btn').addEventListener('click', function() { isPreviewMode = !isPreviewMode; document.getElementById('preview-frame').style.display = isPreviewMode ? 'block' : 'none'; document.getElementById('code-output').style.display = isPreviewMode ? 'none' : 'block'; }); document.getElementById('lint-btn').addEventListener('click', checkForErrors); document.getElementById('format-btn').addEventListener('click', function() { let code = editor.getValue(); code = code.replace(/\n\s*\n/g, '\n'); editor.setValue(code); showToast('Code formatted', 'success'); }); document.getElementById('undo-btn').addEventListener('click', function() { editor.undo(); }); document.getElementById('redo-btn').addEventListener('click', function() { editor.redo(); }); document.getElementById('find-btn').addEventListener('click', function() { editor.execCommand("find"); }); document.getElementById('replace-btn').addEventListener('click', function() { editor.execCommand("replace"); }); // Auto Run Toggle document.getElementById('auto-run-toggle').addEventListener('click', function() { isAutoRunning = !isAutoRunning; if (isAutoRunning) { this.className = 'btn-primary'; this.innerHTML = ' Auto Run: On'; runCode(); } else { this.className = 'btn-secondary'; this.innerHTML = ' Auto Run: Off'; } showToast(`Auto run ${isAutoRunning ? 'enabled' : 'disabled'}`, 'info'); }); // Modals document.getElementById('settings-btn').addEventListener('click', () => { document.getElementById('settings-modal').style.display = 'block'; }); document.getElementById('cancel-settings').addEventListener('click', () => { document.getElementById('settings-modal').style.display = 'none'; }); document.getElementById('save-settings').addEventListener('click', () => { editor.setOption('theme', document.getElementById('modal-theme').value); editor.setOption('lineWrapping', document.getElementById('modal-line-wrapping').checked); editor.setOption('matchBrackets', document.getElementById('modal-match-brackets').checked); editor.setOption('autoCloseBrackets', document.getElementById('modal-auto-completion').checked); const fs = document.getElementById('modal-font-size').value; document.querySelector('.CodeMirror').style.fontSize = fs + 'px'; document.getElementById('modal-font-size-val').textContent = fs + 'px'; document.getElementById('settings-modal').style.display = 'none'; showToast('Settings saved', 'success'); }); document.getElementById('modal-font-size').addEventListener('input', function() { document.getElementById('modal-font-size-val').textContent = this.value + 'px'; }); document.getElementById('download-btn').addEventListener('click', () => { document.getElementById('download-filename').value = document.getElementById('filename-input').value; document.getElementById('download-modal').style.display = 'block'; }); document.getElementById('cancel-download').addEventListener('click', () => { document.getElementById('download-modal').style.display = 'none'; }); document.getElementById('confirm-download').addEventListener('click', downloadCode); document.querySelectorAll('.close-modal').forEach(btn => { btn.addEventListener('click', function() { this.closest('.modal').style.display = 'none'; }); }); window.addEventListener('click', (e) => { if (e.target.classList.contains('modal')) { e.target.style.display = 'none'; } }); // Tabs document.querySelectorAll('.tab-btn').forEach(btn => { btn.addEventListener('click', function() { document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active')); document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active')); this.classList.add('active'); const tabId = 'tab-' + this.dataset.tab; const tabPane = document.getElementById(tabId); if (tabPane) tabPane.classList.add('active'); }); }); // Tab Settings inputs document.getElementById('tab-font-size').addEventListener('change', function() { document.querySelector('.CodeMirror').style.fontSize = this.value + 'px'; }); document.getElementById('tab-tab-size').addEventListener('change', function() { editor.setOption('indentUnit', parseInt(this.value)); }); document.getElementById('tab-line-numbers').addEventListener('change', function() { editor.setOption('lineNumbers', this.checked); }); document.getElementById('tab-auto-close').addEventListener('change', function() { editor.setOption('autoCloseBrackets', this.checked); }); // Terminal Logic const terminalContent = document.getElementById('terminal-content'); let inputLine = document.createElement('div'); inputLine.innerHTML = '> '; terminalContent.appendChild(inputLine); const handleTerminalKey = (e) => { if (e.key === 'Enter') { e.preventDefault(); const inputEl = document.getElementById('terminal-input'); const cmd = inputEl.textContent.trim(); inputLine.innerHTML = `> ${cmd}`; let responseText = ''; let isError = false; if (cmd === 'help') { responseText = 'Available commands: help, clear, run, date, version'; } else if (cmd === 'clear') { terminalContent.innerHTML = ''; responseText = null; } else if (cmd === 'run') { runCode(); responseText = 'Code executed. Check Output/Console tabs.'; } else if (cmd === 'date') { responseText = new Date().toString(); } else if (cmd === 'version') { responseText = 'ASLI FORM Code Editor v1.0.0'; } else if (cmd !== '') { responseText = `Command not found: ${cmd}`; isError = true; } if (responseText !== null) { const respEl = document.createElement('div'); respEl.className = isError ? 'terminal-error' : 'terminal-output'; respEl.textContent = responseText; terminalContent.appendChild(respEl); } inputLine = document.createElement('div'); inputLine.innerHTML = '> '; terminalContent.appendChild(inputLine); const newInput = document.getElementById('terminal-input'); newInput.addEventListener('keydown', handleTerminalKey); newInput.focus(); terminalContent.scrollTop = terminalContent.scrollHeight; } }; document.getElementById('terminal-input').addEventListener('keydown', handleTerminalKey); updateDocumentation(); showToast('Welcome to ASLI FORM Code Editor! Auto-run is enabled.', 'info'); // Initial run setTimeout(runCode, 500); });