Hacker Executor

Customization

Theme: Font: Font Size: px

Hacker Executor

Output

body { margin: 0; padding: 0; background: #111; color: #0f0; font-family: Fira Mono, monospace; min-height: 100vh; display: flex; flex-direction: column; } #main-container { display: flex; flex: 1; height: 90vh; width: 100vw; } #executor-panel, #output-panel { flex: 1; display: flex; flex-direction: column; margin: 20px; border-radius: 10px; box-shadow: 0 0 20px #0f0a, 0 0 5px #000a; background: rgba(10, 20, 10, 0.95); min-width: 0; } #executor-panel { margin-right: 10px; } #output-panel { margin-left: 10px; background: rgba(0, 0, 0, 0.95); } h2 { margin: 0; padding: 16px 0 8px 16px; font-size: 1.3em; letter-spacing: 2px; text-shadow: 0 0 8px #0f0; } #code-input { flex: 1; width: 100%; background: #111; color: #0f0; border: none; resize: none; font-size: 16px; font-family: inherit; padding: 16px; border-radius: 8px; outline: none; box-sizing: border-box; margin-bottom: 10px; min-height: 200px; } #executor-buttons { display: flex; gap: 10px; padding: 0 0 16px 16px; } #executor-buttons button { background: #222; color: #0f0; border: 1px solid #0f0; border-radius: 5px; padding: 8px 16px; font-size: 1em; cursor: pointer; transition: background 0.2s, color 0.2s; } #executor-buttons button:hover { background: #0f0; color: #111; } #output { flex: 1; background: #000; color: #0f0; font-size: 16px; font-family: inherit; padding: 16px; border-radius: 8px; overflow: auto; margin: 0; min-height: 200px; white-space: pre-wrap; word-break: break-word; box-sizing: border-box; } #customization-panel { position: fixed; top: 0; right: 0; background: rgba(10, 20, 10, 0.98); color: #0f0; padding: 18px 24px 18px 24px; border-bottom-left-radius: 16px; box-shadow: 0 0 12px #0f0a; z-index: 100; min-width: 220px; font-size: 1em; } #customization-panel label { display: block; margin-bottom: 12px; font-size: 1em; } #customization-panel select, #customization-panel input[type="number"] { margin-left: 8px; font-size: 1em; border-radius: 4px; border: 1px solid #0f0; background: #111; color: #0f0; padding: 2px 6px; } /* Themes */ body.theme-hacker { background: #111; color: #0f0; } body.theme-hacker #executor-panel, body.theme-hacker #customization-panel { background: rgba(10, 20, 10, 0.95); color: #0f0; box-shadow: 0 0 20px #0f0a; } body.theme-hacker #output-panel { background: rgba(0, 0, 0, 0.95); color: #0f0; } body.theme-matrix { background: #000; color: #39ff14; } body.theme-matrix #executor-panel, body.theme-matrix #customization-panel { background: rgba(0, 0, 0, 0.95); color: #39ff14; box-shadow: 0 0 20px #39ff14a0; } body.theme-matrix #output-panel { background: #111; color: #39ff14; } body.theme-dark { background: #181818; color: #eee; } body.theme-dark #executor-panel, body.theme-dark #customization-panel { background: #232323; color: #eee; box-shadow: 0 0 20px #888a; } body.theme-dark #output-panel { background: #111; color: #eee; } body.theme-light { background: #f5f5f5; color: #222; } body.theme-light #executor-panel, body.theme-light #customization-panel { background: #fff; color: #222; box-shadow: 0 0 20px #aaa; } body.theme-light #output-panel { background: #f0f0f0; color: #222; } body.theme-red { background: #1a0000; color: #ff2222; } body.theme-red #executor-panel, body.theme-red #customization-panel { background: #2a0000; color: #ff2222; box-shadow: 0 0 20px #ff2222a0; } body.theme-red #output-panel { background: #1a0000; color: #ff2222; } @media (max-width: 900px) { #main-container { flex-direction: column; height: auto; } #executor-panel, #output-panel { margin: 10px; } #executor-panel { margin-bottom: 0; } #output-panel { margin-top: 0; } } // Utility: Save file function saveTextAsFile(text, filename) { const blob = new Blob([text], { type: "text/plain" }); const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = filename; document.body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(a.href); }, 100); } // DOM Elements const codeInput = document.getElementById("code-input"); const executeBtn = document.getElementById("execute-btn"); const injectBtn = document.getElementById("inject-btn"); const clearBtn = document.getElementById("clear-btn"); const saveBtn = document.getElementById("save-btn"); const output = document.getElementById("output"); const themeSelect = document.getElementById("theme-select"); const fontSelect = document.getElementById("font-select"); const fontSizeInput = document.getElementById("font-size"); const loadScriptInput = document.getElementById("load-script"); // Customization function applyCustomization() { document.body.className = "theme-" + themeSelect.value; codeInput.style.fontFamily = fontSelect.value; output.style.fontFamily = fontSelect.value; codeInput.style.fontSize = fontSizeInput.value + "px"; output.style.fontSize = fontSizeInput.value + "px"; } themeSelect.addEventListener("change", applyCustomization); fontSelect.addEventListener("change", applyCustomization); fontSizeInput.addEventListener("input", applyCustomization); // Initial customization applyCustomization(); // Code Execution function safeEval(code) { // Capture console.log let logs = []; const originalLog = console.log; console.log = (...args) => { logs.push(args.map(a => typeof a === "object" ? JSON.stringify(a, null, 2) : String(a)).join(" ")); originalLog.apply(console, args); }; let result, error = null; try { result = eval(code); if (result !== undefined) logs.push(String(result)); } catch (e) { error = e; logs.push("Error: " + e.message); } console.log = originalLog; return logs.join("\n"); } executeBtn.addEventListener("click", () => { output.textContent = ""; const code = codeInput.value; if (!code.trim()) { output.textContent = "// No code to execute."; return; } output.textContent = safeEval(code); }); // Optional: Inject code into page (dangerous, for demonstration only) injectBtn.addEventListener("click", () => { const code = codeInput.value; if (!code.trim()) { output.textContent = "// No code to inject."; return; } try { const script = document.createElement("script"); script.textContent = code; document.body.appendChild(script); output.textContent = "// Code injected into page context."; } catch (e) { output.textContent = "Injection Error: " + e.message; } }); // Clear clearBtn.addEventListener("click", () => { codeInput.value = ""; output.textContent = ""; }); // Save Script saveBtn.addEventListener("click", () => { const code = codeInput.value; if (!code.trim()) { output.textContent = "// Nothing to save."; return; } saveTextAsFile(code, "script.js"); output.textContent = "// Script saved as script.js"; }); // Keyboard shortcuts codeInput.addEventListener("keydown", (e) => { if (e.ctrlKey && e.key === "Enter") { executeBtn.click(); e.preventDefault(); } if (e.ctrlKey && e.key === "s") { saveBtn.click(); e.preventDefault(); } if (e.ctrlKey && e.key === "l") { clearBtn.click(); e.preventDefault(); } }); // Drag & drop to load script codeInput.addEventListener("dragover", e => e.preventDefault()); codeInput.addEventListener("drop", e => { e.preventDefault(); if (e.dataTransfer.files.length) { const file = e.dataTransfer.files[0]; const reader = new FileReader(); reader.onload = evt => { codeInput.value = evt.target.result; }; reader.readAsText(file); } }); // Load script from file (hidden input) // (You can add a button to trigger this if you want) // loadScriptInput.addEventListener("change", e => { // const file = e.target.files[0]; // if (file) { // const reader = new FileReader(); // reader.onload = evt => { // codeInput.value = evt.target.result; // }; // reader.readAsText(file); // } // }); // Responsive: update output font size and family on customization applyCustomization();