Enhanced Hacker Executor

Customization

Theme:

body { font-family: 'Arial', sans-serif; background-color: #f4f4f4; margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .executor-container { background-color: #fff; border-radius: 8px; box-shadow: 0 0 20px rgba(0,0,0,0.1); overflow: hidden; width: 80%; max-width: 900px; } .header { background-color: #263238; color: #fff; text-align: center; padding: 20px 0; } .controls { padding: 10px 20px; display: flex; gap: 10px; justify-content: flex-start; align-items: center; background-color: #eee; } .control-button, .generator-select { padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; background-color: #007bff; color: #fff; font-size: 14px; transition: background-color 0.3s ease; } .control-button:hover { background-color: #0056b3; } .generator-select { background-color: #fff; color: #333; border: 1px solid #ccc; } .input-output-area { display: flex; padding: 20px; gap: 20px; } .input-area, .output-area { flex: 1; display: flex; flex-direction: column; } textarea { padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; resize: vertical; height: 300px; } textarea:focus { outline: none; border-color: #007bff; box-shadow: 0 0 5px rgba(0,123,255,0.5); } .customization-area { padding: 20px; background-color: #f9f9f9; border-top: 1px solid #ddd; } .customization-options { display: flex; align-items: center; gap: 10px; } /* Dark Theme */ body.dark-theme { background-color: #333; color: #eee; } .executor-container.dark-theme { background-color: #444; box-shadow: 0 0 20px rgba(255,255,255,0.1); color: #eee; } .header.dark-theme { background-color: #555; color: #fff; } .controls.dark-theme { background-color: #555; } .control-button.dark-theme, .generator-select.dark-theme { background-color: #666; color: #eee; border: 1px solid #777; } .control-button.dark-theme:hover { background-color: #777; } .generator-select.dark-theme { background-color: #444; color: #eee; border-color: #777; } .customization-area.dark-theme { background-color: #555; border-top-color: #666; } textarea.dark-theme { background-color: #444; color: #eee; border-color: #777; } textarea.dark-theme:focus { border-color: #00aaff; box-shadow: 0 0 5px rgba(0, 170, 255, 0.5); } /* Animations (Example - Button Click) */ .control-button:active { transform: scale(0.95); } document.addEventListener('DOMContentLoaded', () => { const generateBtn = document.getElementById('generateBtn'); const clearBtn = document.getElementById('clearBtn'); const injectBtn = document.getElementById('injectBtn'); const saveBtn = document.getElementById('saveBtn'); const inputRequest = document.getElementById('inputRequest'); const outputDisplay = document.getElementById('outputDisplay'); const generatorType = document.getElementById('generatorType'); const themeSelector = document.getElementById('themeSelector'); const body = document.body; const executorContainer = document.querySelector('.executor-container'); const header = document.querySelector('.header'); const controls = document.querySelector('.controls'); const controlButtons = document.querySelectorAll('.control-button'); const generatorSelect = document.querySelector('.generator-select'); const customizationArea = document.querySelector('.customization-area'); const textareas = document.querySelectorAll('textarea'); generateBtn.addEventListener('click', () => { const request = inputRequest.value; // In a real scenario, this would call a code generation function // based on the selected generator type. outputDisplay.value = "Generated output for: " + request + "\n\n[Placeholder Output - Replace with actual generation]"; }); clearBtn.addEventListener('click', () => { inputRequest.value = ''; outputDisplay.value = ''; }); injectBtn.addEventListener('click', () => { const generatedCode = outputDisplay.value; // "Inject" functionality is not clearly defined. // This is a placeholder. You might want to: // 1. Execute the code (if it's executable in this context). // 2. Copy it to clipboard. // 3. Display it in a different format. alert("Injecting code (placeholder action):\n\n" + generatedCode); }); saveBtn.addEventListener('click', () => { const textToSave = outputDisplay.value; const filename = 'generated-script.txt'; // Default filename const blob = new Blob([textToSave], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); // Required for Firefox a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }); themeSelector.addEventListener('change', () => { const selectedTheme = themeSelector.value; if (selectedTheme === 'dark') { body.classList.add('dark-theme'); executorContainer.classList.add('dark-theme'); header.classList.add('dark-theme'); controls.classList.add('dark-theme'); controlButtons.forEach(button => button.classList.add('dark-theme')); generatorSelect.classList.add('dark-theme'); customizationArea.classList.add('dark-theme'); textareas.forEach(textarea => textarea.classList.add('dark-theme')); } else { body.classList.remove('dark-theme'); executorContainer.classList.remove('dark-theme'); header.classList.remove('dark-theme'); controls.classList.remove('dark-theme'); controlButtons.forEach(button => button.classList.remove('dark-theme')); generatorSelect.classList.remove('dark-theme'); customizationArea.classList.remove('dark-theme'); textareas.forEach(textarea => textarea.classList.remove('dark-theme')); } }); });