<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CyberForge Executor</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="cyber-container"> <div class="header"> <h1 class="cyber-text" data-text="CYBERFORGE v2.1.5">CYBERFORGE v2.1.5</h1> <div class="controls"> <button class="cyber-button" id="injectBtn">⏻ INJECT</button> <button class="cyber-button" id="clearBtn">✖ PURGE</button> <button class="cyber-button" id="saveBtn">💾 ARCHIVE</button> <button class="cyber-button" id="settingsBtn">⚙ CONFIG</button> </div> </div> <div class="editor-container"> <textarea id="codeEditor" spellcheck="false">// Enter your payload here...</textarea> <div class="output-panel"> <pre id="output"></pre> <div class="scanline"></div> </div> </div> <div class="settings-panel" id="settingsPanel"> <div class="setting-item"> <label>Theme:</label> <select id="themeSelect"> <option value="cyberpunk">Cyberpunk</option> <option value="matrix">Matrix</option> <option value="retro">Retro Terminal</option> </select> </div> <div class="setting-item"> <label>Font Size:</label> <input type="range" id="fontSize" min="12" max="24" value="16"> </div> <div class="setting-item"> <label>Animation Speed:</label> <input type="range" id="animSpeed" min="1" max="10" value="5"> </div> </div> </div> <script src="script.js"></script> </body> </html> :root { --neon-green: #0f0; --neon-blue: #08f; --bg-color: #000; --terminal-bg: rgba(0, 20, 0, 0.9); } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg-color); font-family: 'Courier New', monospace; color: var(--neon-green); overflow: hidden; } .cyber-container { display: grid; grid-template-rows: auto 1fr; height: 100vh; padding: 20px; background: radial-gradient(circle, #001 0%, #000 100%); } .header { border-bottom: 3px solid var(--neon-green); margin-bottom: 20px; padding-bottom: 15px; } .cyber-text { position: relative; font-size: 2.5em; text-shadow: 0 0 10px var(--neon-green); animation: glow 1.5s ease-in-out infinite alternate; } .controls { display: flex; gap: 15px; margin-top: 20px; } .cyber-button { background: var(--terminal-bg); border: 2px solid var(--neon-green); color: var(--neon-green); padding: 12px 25px; cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden; font-family: 'Courier New', monospace; } .cyber-button:hover { background: var(--neon-green); color: #000; box-shadow: 0 0 25px var(--neon-green); } .editor-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; height: calc(100vh - 150px); } #codeEditor { background: var(--terminal-bg); border: 2px solid var(--neon-green); color: var(--neon-green); padding: 20px; font-size: 16px; resize: none; font-family: 'Courier New', monospace; caret-color: var(--neon-green); } .output-panel { background: var(--terminal-bg); border: 2px solid var(--neon-green); padding: 20px; position: relative; overflow: hidden; } #output { height: 100%; white-space: pre-wrap; overflow-y: auto; } .scanline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 50%, rgba(0, 255, 0, 0.1) 51%, transparent 51%); pointer-events: none; animation: scan 5s linear infinite; } .settings-panel { position: fixed; right: -300px; top: 0; width: 280px; height: 100%; background: var(--terminal-bg); border-left: 2px solid var(--neon-green); padding: 20px; transition: right 0.3s; } .settings-panel.active { right: 0; } .setting-item { margin-bottom: 20px; } @keyframes glow { from { text-shadow: 0 0 5px var(--neon-green); } to { text-shadow: 0 0 20px var(--neon-green); } } @keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } class CyberForge { constructor() { this.editor = document.getElementById('codeEditor'); this.output = document.getElementById('output'); this.initEventListeners(); this.loadSettings(); this.initTypeEffect(); } initEventListeners() { document.getElementById('injectBtn').addEventListener('click', () => this.executeCode()); document.getElementById('clearBtn').addEventListener('click', () => this.clearAll()); document.getElementById('saveBtn').addEventListener('click', () => this.saveScript()); document.getElementById('settingsBtn').addEventListener('click', () => document.getElementById('settingsPanel').classList.toggle('active')); document.getElementById('themeSelect').addEventListener('change', (e) => this.setTheme(e.target.value)); document.getElementById('fontSize').addEventListener('input', (e) => this.setFontSize(e.target.value)); document.getElementById('animSpeed').addEventListener('input', (e) => this.setAnimationSpeed(e.target.value)); } executeCode() { try { const result = eval(this.editor.value); this.displayOutput(result); } catch (error) { this.displayOutput(`ERROR: ${error.message}`, true); } } displayOutput(content, isError = false) { this.output.textContent = ''; const text = typeof content === 'object' ? JSON.stringify(content, null, 2) : String(content); this.typeEffect(text, isError ? 'error' : 'success'); } typeEffect(text, type) { let index = 0; const speed = 50 - (document.getElementById('animSpeed').value * 4); const output = this.output; function writeChar() { if (index < text.length) { output.textContent += text.charAt(index); index++; setTimeout(writeChar, speed); } } output.style.color = type === 'error' ? '#f00' : '#0f0'; writeChar(); } clearAll() { this.editor.value = ''; this.output.textContent = ''; } saveScript() { const timestamp = new Date().toISOString().replace(/[:\-T.]/g, ''); localStorage.setItem(`cyberforge_${timestamp}`, this.editor.value); this.displayOutput(`Script archived as CYBERFORGE_${timestamp}`); } setTheme(theme) { document.documentElement.className = theme; localStorage.setItem('cyberforge_theme', theme); } setFontSize(size) { document.documentElement.style.fontSize = `${size}px`; localStorage.setItem('cyberforge_fontSize', size); } setAnimationSpeed(speed) { document.documentElement.style.setProperty('--anim-speed', `${speed}s`); localStorage.setItem('cyberforge_animSpeed', speed); } loadSettings() { const theme = localStorage.getItem('cyberforge_theme') || 'cyberpunk'; const fontSize = localStorage.getItem('cyberforge_fontSize') || '16'; const animSpeed = localStorage.getItem('cyberforge_animSpeed') || '5'; this.setTheme(theme); this.setFontSize(fontSize); this.setAnimationSpeed(animSpeed); document.getElementById('themeSelect').value = theme; document.getElementById('fontSize').value = fontSize; document.getElementById('animSpeed').value = animSpeed; } initTypeEffect() { const phrases = [ '// SYSTEM INITIALIZED', '// CYBERFORGE READY', '// ENTER PAYLOAD...' ]; let index = 0; const typeWelcome = () => { if (index < phrases.length) { this.typeEffect(phrases[index], 'system'); index++; setTimeout(typeWelcome, 3000); } }; typeWelcome(); } } new CyberForge();