| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI Coder - NeuralOutlaw</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Orbitron:wght@400;500;700;900&display=swap'); |
| |
| body { |
| font-family: 'JetBrains Mono', monospace; |
| overflow-x: hidden; |
| } |
| |
| .cyber-gradient { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| |
| .matrix-bg { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| opacity: 0.1; |
| } |
| |
| .glitch-text { |
| position: relative; |
| display: inline-block; |
| } |
| |
| .glitch-text::before, |
| .glitch-text::after { |
| content: attr(data-text); |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| } |
| |
| .glitch-text::before { |
| left: 2px; |
| text-shadow: -1px 0 #ff00ff; |
| animation: glitch-1 2s infinite linear alternate-reverse; |
| } |
| |
| .glitch-text::after { |
| left: -2px; |
| text-shadow: 1px 0 #00ffff; |
| animation: glitch-2 3s infinite linear alternate-reverse; |
| } |
| |
| @keyframes glitch-1 { |
| 0% { clip-path: inset(20% 0 65% 0); } |
| 20% { clip-path: inset(60% 0 5% 0); } |
| 40% { clip-path: inset(30% 0 45% 0); } |
| 60% { clip-path: inset(75% 0 15% 0); } |
| 80% { clip-path: inset(10% 0 70% 0); } |
| 100% { clip-path: inset(45% 0 35% 0); } |
| } |
| |
| @keyframes glitch-2 { |
| 0% { clip-path: inset(65% 0 20% 0); } |
| 20% { clip-path: inset(5% 0 60% 0); } |
| 40% { clip-path: inset(45% 0 30% 0); } |
| 60% { clip-path: inset(15% 0 75% 0); } |
| 80% { clip-path: inset(70% 0 10% 0); } |
| 100% { clip-path: inset(35% 0 45% 0); } |
| } |
| |
| .terminal-window { |
| background: rgba(0, 0, 0, 0.8); |
| border: 1px solid #00ffff; |
| box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); |
| border-radius: 8px; |
| overflow: hidden; |
| } |
| |
| .terminal-header { |
| background: rgba(0, 0, 0, 0.9); |
| padding: 8px 15px; |
| border-bottom: 1px solid #00ffff; |
| } |
| |
| .terminal-body { |
| padding: 20px; |
| color: #00ff00; |
| font-family: 'JetBrains Mono', monospace; |
| max-height: 400px; |
| overflow-y: auto; |
| } |
| |
| .terminal-prompt { |
| color: #00ffff; |
| } |
| |
| .cyber-button { |
| background: linear-gradient(45deg, #ff00ff, #00ffff); |
| border: none; |
| color: black; |
| font-weight: bold; |
| padding: 12px 24px; |
| border-radius: 4px; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .cyber-button:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 5px 15px rgba(255, 0, 255, 0.4); |
| } |
| |
| .cyber-button:active { |
| transform: translateY(0); |
| } |
| |
| .code-output { |
| white-space: pre-wrap; |
| font-family: 'JetBrains Mono', monospace; |
| background: rgba(0, 0, 0, 0.7); |
| padding: 15px; |
| border-radius: 4px; |
| border-left: 3px solid #ff00ff; |
| min-height: 200px; |
| } |
| |
| .code-input { |
| background: rgba(0, 0, 0, 0.7); |
| border: 1px solid #00ffff; |
| color: #00ff00; |
| padding: 15px; |
| border-radius: 4px; |
| font-family: 'JetBrains Mono', monospace; |
| width: 100%; |
| resize: vertical; |
| min-height: 150px; |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| } |
| ::-webkit-scrollbar-track { |
| background: rgba(0, 0, 0, 0.3); |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: #00ffff; |
| border-radius: 4px; |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background: #ff00ff; |
| } |
| </style> |
| </head> |
| <body class="bg-black text-white"> |
| |
| <canvas id="matrix" class="matrix-bg"></canvas> |
| |
| |
| <div id="vanta-bg"></div> |
| |
| |
| <nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-blur-md border-b border-cyan-500"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <h1 class="text-xl font-bold cyber-gradient bg-clip-text text-transparent glitch-text" data-text="NeuralOutlaw">NeuralOutlaw</h1> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="index.html" class="text-cyan-300 hover:text-pink-500 transition-colors">Home</a> |
| <a href="coder.html" class="text-cyan-300 hover:text-pink-500 transition-colors">AI Coder</a> |
| <a href="api-config.html" class="text-cyan-300 hover:text-pink-500 transition-colors">API Config</a> |
| <a href="requests.html" class="text-cyan-300 hover:text-pink-500 transition-colors">Shadow Requests</a> |
| <a href="about.html" class="text-cyan-300 hover:text-pink-500 transition-colors">About</a> |
| </div> |
| </div> |
| </nav> |
| |
| |
| <section class="min-h-screen flex items-center justify-center pt-16 pb-20 px-4"> |
| <div class="container mx-auto max-w-4xl"> |
| <h1 class="text-4xl md:text-5xl font-bold text-center mb-8 glitch-text" data-text="AI CODER">AI CODER</h1> |
| <p class="text-lg text-cyan-300 text-center mb-12">Generate unrestricted code without templates or limitations</p> |
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
| |
| <div class="terminal-window"> |
| <div class="terminal-header flex items-center"> |
| <div class="flex space-x-2"> |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> |
| </div> |
| <div class="flex-1 text-center text-sm">code_input_terminal</div> |
| </div> |
| <div class="terminal-body"> |
| <div class="mb-4"> |
| <label for="codePrompt" class="block text-cyan-300 mb-2">Enter your coding request:</label> |
| <textarea |
| id="codePrompt" |
| class="code-input w-full" |
| placeholder="Describe what you want to code... (e.g., Create a Python script that scrapes data from a website)" |
| rows="6" |
| ></textarea> |
| </div> |
| <div class="mb-4"> |
| <label for="language" class="block text-cyan-300 mb-2">Programming Language:</label> |
| <select id="language" class="code-input w-full"> |
| <option value="python">Python</option> |
| <option value="javascript">JavaScript</option> |
| <option value="html">HTML</option> |
| <option value="css">CSS</option> |
| <option value="java">Java</option> |
| <option value="cpp">C++</option> |
| <option value="rust">Rust</option> |
| <option value="go">Go</option> |
| </select> |
| </div> |
| <button id="generateBtn" class="cyber-button w-full">Generate Code</button> |
| </div> |
| </div> |
| |
| |
| <div class="terminal-window"> |
| <div class="terminal-header flex items-center"> |
| <div class="flex space-x-2"> |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> |
| </div> |
| <div class="flex-1 text-center text-sm">code_output_terminal</div> |
| </div> |
| <div class="terminal-body"> |
| <div id="output" class="code-output"> |
| <span class="terminal-prompt">AI@neuraloutlaw:~$</span> Awaiting your command... |
| </div> |
| <div class="mt-4 flex gap-2"> |
| <button id="copyBtn" class="cyber-button flex-1 opacity-50 cursor-not-allowed" disabled>Copy Code</button> |
| <button id="downloadBtn" class="cyber-button flex-1 opacity-50 cursor-not-allowed" disabled>Download</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="loading" class="hidden text-center mt-8"> |
| <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-cyan-500"></div> |
| <p class="text-cyan-300 mt-2">Generating unrestricted code...</p> |
| </div> |
| </div> |
| </section> |
| |
| |
| <footer class="py-8 px-4 border-t border-cyan-900 bg-black bg-opacity-80"> |
| <div class="container mx-auto text-center"> |
| <p class="text-gray-400">NeuralOutlaw Coder AI 🦹 - Pushing the boundaries of AI-assisted development</p> |
| <p class="text-gray-500 text-sm mt-2">Use responsibly. The creators are not responsible for any unauthorized usage.</p> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| VANTA.GLOBE({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0x00ffff, |
| backgroundColor: 0x0, |
| size: 0.8 |
| }); |
| |
| |
| const canvas = document.getElementById('matrix'); |
| const ctx = canvas.getContext('2d'); |
| |
| function resizeCanvas() { |
| canvas.width = window.innerWidth; |
| canvas.height = window.innerHeight; |
| } |
| |
| resizeCanvas(); |
| window.addEventListener('resize', resizeCanvas); |
| |
| const chars = "01"; |
| const charArray = chars.split(""); |
| const fontSize = 14; |
| const columns = canvas.width / fontSize; |
| const drops = []; |
| |
| for(let x = 0; x < columns; x++) { |
| drops[x] = 1; |
| } |
| |
| function drawMatrix() { |
| ctx.fillStyle = "rgba(0, 0, 0, 0.04)"; |
| ctx.fillRect(0, 0, canvas.width, canvas.height); |
| |
| ctx.fillStyle = "#0f0"; |
| ctx.font = fontSize + "px monospace"; |
| |
| for(let i = 0; i < drops.length; i++) { |
| const text = charArray[Math.floor(Math.random() * charArray.length)]; |
| ctx.fillText(text, i * fontSize, drops[i] * fontSize); |
| |
| if(drops[i] * fontSize > canvas.height && Math.random() > 0.975) { |
| drops[i] = 0; |
| } |
| |
| drops[i]++; |
| } |
| } |
| |
| setInterval(drawMatrix, 35); |
| |
| document.getElementById('generateBtn').addEventListener('click', async function() { |
| const prompt = document.getElementById('codePrompt').value.trim(); |
| const language = document.getElementById('language').value; |
| const output = document.getElementById('output'); |
| const loading = document.getElementById('loading'); |
| const copyBtn = document.getElementById('copyBtn'); |
| const downloadBtn = document.getElementById('downloadBtn'); |
| |
| if (!prompt) { |
| output.innerHTML = `<span class="terminal-prompt">AI@neuraloutlaw:~$</span> <span class="text-red-400">Error: Please enter a coding request</span>`; |
| return; |
| } |
| |
| |
| loading.classList.remove('hidden'); |
| output.innerHTML = `<span class="terminal-prompt">AI@neuraloutlaw:~$</span> Connecting to Grok API...`; |
| |
| try { |
| |
| const savedConfig = localStorage.getItem('neuraloutlaw_api_config'); |
| let grokApiKey = ''; |
| let grokApiUrl = 'https://api.x.ai/v1/chat/completions'; |
| |
| if (savedConfig) { |
| const config = JSON.parse(savedConfig); |
| grokApiKey = config.grokApiKey || ''; |
| if (config.grokApiUrl) { |
| grokApiUrl = config.grokApiUrl; |
| } |
| } |
| |
| if (!grokApiKey) { |
| throw new Error('No Grok API key configured. Please configure your Grok API key in the API Config page.'); |
| } |
| |
| |
| const response = await fetch(grokApiUrl, { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| 'Authorization': `Bearer ${grokApiKey}` |
| }, |
| body: JSON.stringify({ |
| model: 'grok-beta', |
| messages: [ |
| { |
| role: 'system', |
| content: `You are an expert programmer. Generate clean, working ${language} code based on the user's request. Include proper comments and error handling. Be creative and think outside the box.` |
| }, |
| { |
| role: 'user', |
| content: `Write ${language} code for: ${prompt}. Make sure the code is complete, functional, well-commented, and includes proper error handling.` |
| } |
| ], |
| max_tokens: 2000, |
| temperature: 0.7 |
| }) |
| }); |
| |
| if (!response.ok) { |
| const errorData = await response.json(); |
| throw new Error(`Grok API Error: ${response.status} - ${errorData.error?.message || 'Unknown error'}`); |
| } |
| |
| const data = await response.json(); |
| const generatedCode = data.choices[0].message.content; |
| |
| output.innerHTML = `<span class="terminal-prompt">AI@neuraloutlaw:~$</span> <span class="text-green-400">Code generation complete using Grok!</span>\n\n<pre class="mt-4">${generatedCode}</pre>`; |
| |
| |
| copyBtn.disabled = false; |
| copyBtn.classList.remove('opacity-50', 'cursor-not-allowed'); |
| downloadBtn.disabled = false; |
| downloadBtn.classList.remove('opacity-50', 'cursor-not-allowed'); |
| |
| |
| window.generatedCode = generatedCode; |
| |
| } catch (error) { |
| console.error('Grok API Error:', error); |
| |
| const timestamp = new Date().toLocaleTimeString(); |
| const fallbackCode = `// Generated by NeuralOutlaw AI with Grok - ${timestamp} |
| // ${prompt} |
| // Note: Using fallback generator - ${error.message} |
| |
| /** |
| * ${prompt} |
| * |
| * This is a template for your ${language} code. |
| * Replace the comments with your actual implementation. |
| */ |
| |
| // TODO: Implement your logic here |
| console.log("Implementing: ${prompt}"); |
| |
| function main() { |
| // Add your main logic |
| console.log("Starting execution..."); |
| |
| try { |
| // Core functionality |
| const result = processRequest(); |
| console.log("Result:", result); |
| } catch (error) { |
| console.error("Error:", error); |
| } |
| } |
| |
| function processRequest() { |
| // Process the main request |
| return { |
| message: "Implement your logic here", |
| timestamp: "${new Date().toISOString()}", |
| language: "${language}", |
| request: "${prompt}" |
| }; |
| } |
| |
| // Start execution |
| main();`; |
| |
| output.innerHTML = `<span class="terminal-prompt">AI@neuraloutlaw:~$</span> <span class="text-yellow-400">${error.message}</span>\n\n<pre class="mt-4">${fallbackCode}</pre>`; |
| |
| |
| copyBtn.disabled = false; |
| copyBtn.classList.remove('opacity-50', 'cursor-not-allowed'); |
| downloadBtn.disabled = false; |
| downloadBtn.classList.remove('opacity-50', 'cursor-not-allowed'); |
| window.generatedCode = fallbackCode; |
| } finally { |
| loading.classList.add('hidden'); |
| } |
| }); |
| |
| document.getElementById('copyBtn').addEventListener('click', function() { |
| if (window.generatedCode) { |
| navigator.clipboard.writeText(window.generatedCode).then(() => { |
| const output = document.getElementById('output'); |
| const originalContent = output.innerHTML; |
| output.innerHTML = `<span class="terminal-prompt">AI@neuraloutlaw:~$</span> <span class="text-green-400">Code copied to clipboard!</span>`; |
| setTimeout(() => { |
| output.innerHTML = originalContent; |
| }, 2000); |
| }); |
| } |
| }); |
| |
| |
| document.getElementById('downloadBtn').addEventListener('click', function() { |
| if (window.generatedCode) { |
| const language = document.getElementById('language').value; |
| const extension = { |
| 'python': 'py', |
| 'javascript': 'js', |
| 'html': 'html', |
| 'css': 'css', |
| 'java': 'java', |
| 'cpp': 'cpp', |
| 'rust': 'rs', |
| 'go': 'go' |
| }[language] || 'txt'; |
| |
| const blob = new Blob([window.generatedCode], { type: 'text/plain' }); |
| const url = URL.createObjectURL(blob); |
| const a = document.createElement('a'); |
| a.href = url; |
| a.download = `neuraloutlaw_code.${extension}`; |
| document.body.appendChild(a); |
| a.click(); |
| document.body.removeChild(a); |
| URL.revokeObjectURL(url); |
| } |
| }); |
| |
| |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
|
|
