| <!DOCTYPE html> |
| <html lang="ar" dir="ltr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Replit Infinity - Unlimited AI Agent</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/loader.min.js"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> |
| <style> |
| * { |
| font-family: 'Inter', sans-serif; |
| } |
| .font-mono { |
| font-family: 'JetBrains Mono', monospace; |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
| ::-webkit-scrollbar-track { |
| background: #1e1e2e; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: #4b5563; |
| border-radius: 4px; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: #6b7280; |
| } |
| |
| |
| .bg-replit-dark { background-color: #0e1525; } |
| .bg-replit-panel { background-color: #1c2333; } |
| .bg-replit-sidebar { background-color: #131a2b; } |
| .bg-replit-hover { background-color: #2b3245; } |
| .text-replit-accent { color: #f5a623; } |
| .bg-replit-accent { background-color: #f5a623; } |
| .border-replit { border-color: #2b3245; } |
| |
| |
| .agent-glow { |
| box-shadow: 0 0 30px rgba(245, 166, 35, 0.3); |
| } |
| |
| |
| #editor-container { |
| height: calc(100vh - 140px); |
| } |
| |
| |
| .terminal-cursor::after { |
| content: '▋'; |
| animation: blink 1s infinite; |
| color: #f5a623; |
| } |
| @keyframes blink { |
| 0%, 50% { opacity: 1; } |
| 51%, 100% { opacity: 0; } |
| } |
| |
| |
| .message-appear { |
| animation: slideIn 0.3s ease-out; |
| } |
| @keyframes slideIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| |
| .typing-dot { |
| animation: typing 1.4s infinite ease-in-out both; |
| } |
| .typing-dot:nth-child(1) { animation-delay: -0.32s; } |
| .typing-dot:nth-child(2) { animation-delay: -0.16s; } |
| @keyframes typing { |
| 0%, 80%, 100% { transform: scale(0); } |
| 40% { transform: scale(1); } |
| } |
| |
| |
| .gradient-text { |
| background: linear-gradient(135deg, #f5a623 0%, #e8488a 50%, #6b46c1 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| |
| |
| .resizer { |
| cursor: col-resize; |
| background: #2b3245; |
| width: 4px; |
| transition: background 0.2s; |
| } |
| .resizer:hover { |
| background: #f5a623; |
| } |
| |
| |
| .file-item:hover { |
| background-color: #2b3245; |
| } |
| .file-active { |
| background-color: #2b3245; |
| border-left: 3px solid #f5a623; |
| } |
| |
| |
| @keyframes pulse-glow { |
| 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); } |
| 50% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } |
| } |
| .run-btn-pulse { |
| animation: pulse-glow 2s infinite; |
| } |
| </style> |
| </head> |
| <body class="bg-replit-dark text-gray-300 overflow-hidden h-screen"> |
|
|
| |
| <header class="h-14 bg-replit-panel border-b border-replit flex items-center justify-between px-4 select-none"> |
| <div class="flex items-center gap-4"> |
| <div class="flex items-center gap-2"> |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-orange-400 to-pink-500 flex items-center justify-center"> |
| <i data-lucide="code-2" class="w-5 h-5 text-white"></i> |
| </div> |
| <span class="font-bold text-white text-lg tracking-tight">Replit<span class="gradient-text">Infinity</span></span> |
| </div> |
| |
| <div class="h-6 w-px bg-gray-600 mx-2"></div> |
| |
| <div class="flex items-center gap-2 bg-replit-sidebar rounded-md px-3 py-1.5 border border-replit"> |
| <i data-lucide="folder" class="w-4 h-4 text-gray-400"></i> |
| <span class="text-sm text-gray-300 font-medium">my-awesome-project</span> |
| <i data-lucide="chevron-down" class="w-4 h-4 text-gray-500"></i> |
| </div> |
|
|
| <div class="flex items-center gap-2"> |
| <button class="p-2 hover:bg-replit-hover rounded-md transition-colors" title="Undo"> |
| <i data-lucide="undo-2" class="w-4 h-4"></i> |
| </button> |
| <button class="p-2 hover:bg-replit-hover rounded-md transition-colors" title="Redo"> |
| <i data-lucide="redo-2" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="flex items-center gap-3"> |
| <div class="flex items-center gap-2 px-3 py-1.5 bg-green-500/10 border border-green-500/30 rounded-md"> |
| <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div> |
| <span class="text-xs font-medium text-green-400">● Unlimited</span> |
| </div> |
|
|
| <button id="agent-toggle" class="flex items-center gap-2 px-4 py-1.5 bg-gradient-to-r from-orange-500 to-pink-500 hover:from-orange-600 hover:to-pink-600 text-white rounded-md text-sm font-medium transition-all agent-glow"> |
| <i data-lucide="sparkles" class="w-4 h-4"></i> |
| <span>Super Agent</span> |
| </button> |
|
|
| <button class="flex items-center gap-2 px-4 py-1.5 bg-green-600 hover:bg-green-700 text-white rounded-md text-sm font-medium transition-colors run-btn-pulse" onclick="runCode()"> |
| <i data-lucide="play" class="w-4 h-4 fill-current"></i> |
| <span>Run</span> |
| </button> |
|
|
| <div class="h-6 w-px bg-gray-600 mx-1"></div> |
|
|
| <button class="p-2 hover:bg-replit-hover rounded-md transition-colors"> |
| <i data-lucide="share-2" class="w-4 h-4"></i> |
| </button> |
| <button class="p-2 hover:bg-replit-hover rounded-md transition-colors"> |
| <i data-lucide="settings" class="w-4 h-4"></i> |
| </button> |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center text-white text-xs font-bold cursor-pointer"> |
| UN |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div class="flex h-[calc(100vh-56px)]"> |
| |
| |
| <aside class="w-64 bg-replit-sidebar border-r border-replit flex flex-col"> |
| <div class="p-3 border-b border-replit"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Files</span> |
| <div class="flex gap-1"> |
| <button class="p-1 hover:bg-replit-hover rounded" title="New File" onclick="createNewFile()"> |
| <i data-lucide="file-plus" class="w-4 h-4 text-gray-400"></i> |
| </button> |
| <button class="p-1 hover:bg-replit-hover rounded" title="New Folder"> |
| <i data-lucide="folder-plus" class="w-4 h-4 text-gray-400"></i> |
| </button> |
| <button class="p-1 hover:bg-replit-hover rounded" title="Upload"> |
| <i data-lucide="upload" class="w-4 h-4 text-gray-400"></i> |
| </button> |
| </div> |
| </div> |
| <div class="relative"> |
| <i data-lucide="search" class="w-4 h-4 absolute left-2 top-1/2 -translate-y-1/2 text-gray-500"></i> |
| <input type="text" placeholder="Search files..." class="w-full bg-replit-dark border border-replit rounded-md pl-8 pr-3 py-1.5 text-sm focus:outline-none focus:border-orange-500 transition-colors"> |
| </div> |
| </div> |
|
|
| <div class="flex-1 overflow-y-auto py-2" id="file-tree"> |
| <div class="file-item flex items-center gap-2 px-3 py-1.5 cursor-pointer text-sm file-active" onclick="openFile('index.html', 'html')"> |
| <i data-lucide="file-code" class="w-4 h-4 text-orange-400"></i> |
| <span class="text-gray-300">index.html</span> |
| </div> |
| <div class="file-item flex items-center gap-2 px-3 py-1.5 cursor-pointer text-sm" onclick="openFile('style.css', 'css')"> |
| <i data-lucide="file-type" class="w-4 h-4 text-blue-400"></i> |
| <span class="text-gray-300">style.css</span> |
| </div> |
| <div class="file-item flex items-center gap-2 px-3 py-1.5 cursor-pointer text-sm" onclick="openFile('script.js', 'javascript')"> |
| <i data-lucide="file-json" class="w-4 h-4 text-yellow-400"></i> |
| <span class="text-gray-300">script.js</span> |
| </div> |
| <div class="file-item flex items-center gap-2 px-3 py-1.5 cursor-pointer text-sm" onclick="openFile('app.py', 'python')"> |
| <i data-lucide="file-code-2" class="w-4 h-4 text-green-400"></i> |
| <span class="text-gray-300">app.py</span> |
| </div> |
| <div class="file-item flex items-center gap-2 px-3 py-1.5 cursor-pointer text-sm" onclick="openFile('README.md', 'markdown')"> |
| <i data-lucide="file-text" class="w-4 h-4 text-gray-400"></i> |
| <span class="text-gray-300">README.md</span> |
| </div> |
| </div> |
|
|
| <div class="p-3 border-t border-replit"> |
| <div class="flex items-center gap-2 text-xs text-gray-500 mb-2"> |
| <i data-lucide="git-branch" class="w-3 h-3"></i> |
| <span>main</span> |
| <span class="text-gray-600">•</span> |
| <span>2 changes</span> |
| </div> |
| </div> |
| </aside> |
|
|
| |
| <main class="flex-1 flex flex-col bg-replit-dark min-w-0"> |
| |
| <div class="flex items-center bg-replit-panel border-b border-replit overflow-x-auto" id="tabs-container"> |
| <div class="flex items-center gap-2 px-4 py-2 bg-replit-dark border-t-2 border-orange-500 text-sm min-w-fit cursor-pointer group"> |
| <i data-lucide="file-code" class="w-4 h-4 text-orange-400"></i> |
| <span class="text-gray-300">index.html</span> |
| <button class="opacity-0 group-hover:opacity-100 hover:text-red-400 transition-opacity ml-1"> |
| <i data-lucide="x" class="w-3 h-3"></i> |
| </button> |
| </div> |
| <div class="flex items-center gap-2 px-4 py-2 text-sm min-w-fit cursor-pointer hover:bg-replit-hover group border-t-2 border-transparent"> |
| <i data-lucide="file-type" class="w-4 h-4 text-blue-400"></i> |
| <span class="text-gray-400">style.css</span> |
| <button class="opacity-0 group-hover:opacity-100 hover:text-red-400 transition-opacity ml-1"> |
| <i data-lucide="x" class="w-3 h-3"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="editor-container" class="relative"></div> |
|
|
| |
| <div class="h-48 bg-replit-panel border-t border-replit flex flex-col"> |
| <div class="flex items-center justify-between px-4 py-2 bg-replit-sidebar border-b border-replit"> |
| <div class="flex items-center gap-4 text-sm"> |
| <button class="flex items-center gap-2 text-orange-400 font-medium border-b-2 border-orange-400 pb-2 -mb-2.5"> |
| <i data-lucide="terminal" class="w-4 h-4"></i> |
| Console |
| </button> |
| <button class="flex items-center gap-2 text-gray-400 hover:text-gray-300 pb-2 -mb-2.5"> |
| <i data-lucide="globe" class="w-4 h-4"></i> |
| Output |
| </button> |
| <button class="flex items-center gap-2 text-gray-400 hover:text-gray-300 pb-2 -mb-2.5"> |
| <i data-lucide="bug" class="w-4 h-4"></i> |
| Debug |
| </button> |
| </div> |
| <div class="flex items-center gap-2"> |
| <button class="p-1.5 hover:bg-replit-hover rounded" onclick="clearTerminal()"> |
| <i data-lucide="trash-2" class="w-4 h-4 text-gray-400"></i> |
| </button> |
| <button class="p-1.5 hover:bg-replit-hover rounded" onclick="toggleTerminalSize()"> |
| <i data-lucide="maximize-2" class="w-4 h-4 text-gray-400"></i> |
| </button> |
| </div> |
| </div> |
| <div id="terminal" class="flex-1 p-4 font-mono text-sm overflow-y-auto bg-black"> |
| <div class="text-green-400 mb-1">➜ ~/my-awesome-project <span class="text-gray-500">main</span></div> |
| <div class="text-gray-300 terminal-cursor" id="terminal-input"></div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <aside id="agent-panel" class="w-96 bg-replit-panel border-l border-replit flex flex-col transition-all duration-300"> |
| <div class="p-4 border-b border-replit bg-gradient-to-r from-orange-500/10 to-pink-500/10"> |
| <div class="flex items-center justify-between mb-2"> |
| <div class="flex items-center gap-2"> |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-r from-orange-500 to-pink-500 flex items-center justify-center"> |
| <i data-lucide="bot" class="w-5 h-5 text-white"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-white text-sm">Infinity Agent</h3> |
| <p class="text-xs text-gray-400">GPT-5 Ultra Creative</p> |
| </div> |
| </div> |
| <div class="flex gap-1"> |
| <button class="p-1.5 hover:bg-replit-hover rounded-md transition-colors" title="Settings"> |
| <i data-lucide="settings-2" class="w-4 h-4 text-gray-400"></i> |
| </button> |
| <button class="p-1.5 hover:bg-replit-hover rounded-md transition-colors" onclick="toggleAgentPanel()"> |
| <i data-lucide="panel-right-close" class="w-4 h-4 text-gray-400"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="flex gap-2 mt-3"> |
| <button class="flex-1 px-3 py-1.5 bg-replit-hover hover:bg-replit-dark border border-replit rounded-md text-xs font-medium transition-colors flex items-center justify-center gap-1" onclick="agentAction('explain')"> |
| <i data-lucide="book-open" class="w-3 h-3"></i> |
| Explain |
| </button> |
| <button class="flex-1 px-3 py-1.5 bg-replit-hover hover:bg-replit-dark border border-replit rounded-md text-xs font-medium transition-colors flex items-center justify-center gap-1" onclick="agentAction('debug')"> |
| <i data-lucide="bug" class="w-3 h-3"></i> |
| Debug |
| </button> |
| <button class="flex-1 px-3 py-1.5 bg-replit-hover hover:bg-replit-dark border border-replit rounded-md text-xs font-medium transition-colors flex items-center justify-center gap-1" onclick="agentAction('optimize')"> |
| <i data-lucide="zap" class="w-3 h-3"></i> |
| Optimize |
| </button> |
| </div> |
| </div> |
|
|
| <div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-4"> |
| <div class="flex gap-3 message-appear"> |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-r from-orange-500 to-pink-500 flex-shrink-0 flex items-center justify-center"> |
| <i data-lucide="sparkles" class="w-4 h-4 text-white"></i> |
| </div> |
| <div class="flex-1"> |
| <div class="bg-replit-sidebar rounded-lg p-3 text-sm text-gray-300 border border-replit"> |
| <p class="mb-2">👋 <strong class="text-orange-400">Welcome to Infinity Agent!</strong></p> |
| <p class="text-gray-400">I'm your super-intelligent coding companion. I can:</p> |
| <ul class="mt-2 space-y-1 text-xs text-gray-500 list-disc list-inside"> |
| <li>Write entire applications from scratch</li> |
| <li>Debug complex issues instantly</li> |
| <li>Optimize performance beyond human limits</li> |
| <li>Explain code like a senior developer</li> |
| <li>Generate creative solutions & UI designs</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="flex gap-3 message-appear"> |
| <div class="w-8 h-8 rounded-full bg-gray-600 flex-shrink-0 flex items-center justify-center"> |
| <span class="text-xs font-bold text-white">UN</span> |
| </div> |
| <div class="flex-1 bg-replit-hover rounded-lg p-3 text-sm text-gray-300"> |
| Create a beautiful dashboard for me |
| </div> |
| </div> |
|
|
| <div class="flex gap-3 message-appear"> |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-r from-orange-500 to-pink-500 flex-shrink-0 flex items-center justify-center"> |
| <i data-lucide="sparkles" class="w-4 h-4 text-white"></i> |
| </div> |
| <div class="flex-1"> |
| <div class="bg-replit-sidebar rounded-lg p-3 text-sm text-gray-300 border border-replit"> |
| <p class="mb-2">🎨 <strong class="text-orange-400">Creating a stunning dashboard...</strong></p> |
| <div class="bg-black rounded-md p-2 font-mono text-xs text-green-400 mb-2"> |
| > Generating components...<br> |
| > Applying modern design patterns...<br> |
| > Optimizing for performance...<br> |
| <span class="text-orange-400">> Done! ✨</span> |
| </div> |
| <p class="text-xs text-gray-400">I've created a responsive dashboard with dark mode, charts, and real-time data. Check the new files in your explorer!</p> |
| </div> |
| <div class="flex gap-2 mt-2"> |
| <button class="px-3 py-1 bg-orange-500/20 text-orange-400 rounded text-xs font-medium hover:bg-orange-500/30 transition-colors">Apply Changes</button> |
| <button class="px-3 py-1 bg-replit-hover text-gray-400 rounded text-xs font-medium hover:bg-replit-dark transition-colors">Modify</button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="p-4 border-t border-replit bg-replit-sidebar"> |
| <div class="relative"> |
| <textarea |
| id="agent-input" |
| rows="3" |
| placeholder="Ask me to build anything... (e.g., 'Create a React app with authentication')" |
| class="w-full bg-replit-dark border border-replit rounded-lg px-4 py-3 pr-12 text-sm focus:outline-none focus:border-orange-500 resize-none transition-colors" |
| ></textarea> |
| <button |
| onclick="sendAgentMessage()" |
| class="absolute bottom-3 right-3 p-2 bg-gradient-to-r from-orange-500 to-pink-500 hover:from-orange-600 hover:to-pink-600 text-white rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed" |
| id="send-btn" |
| > |
| <i data-lucide="send" class="w-4 h-4"></i> |
| </button> |
| </div> |
| <div class="flex items-center justify-between mt-2 text-xs text-gray-500"> |
| <span class="flex items-center gap-1"> |
| <i data-lucide="zap" class="w-3 h-3 text-orange-400"></i> |
| Ultra Mode Active |
| </span> |
| <span>Shift + Enter for new line</span> |
| </div> |
| </div> |
| </aside> |
|
|
| |
| <button |
| id="collapsed-agent-btn" |
| onclick="toggleAgentPanel()" |
| class="hidden fixed right-4 bottom-4 w-12 h-12 bg-gradient-to-r from-orange-500 to-pink-500 rounded-full shadow-lg flex items-center justify-center text-white hover:scale-110 transition-transform z-50" |
| > |
| <i data-lucide="bot" class="w-6 h-6"></i> |
| </button> |
| </div> |
|
|
| <script> |
| // Initialize Lucide Icons |
| lucide.createIcons(); |
| |
| // Monaco Editor Setup |
| let editor; |
| let currentFile = 'index.html'; |
| |
| require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs' }}); |
| |
| require(['vs/editor/editor.main'], function() { |
| editor = monaco.editor.create(document.getElementById('editor-container'), { |
| value: `<!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Infinity Project</title> |
| <style> |
| body { |
| margin: 0; |
| padding: 0; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| font-family: 'Segoe UI', sans-serif; |
| min-height: 100vh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .container { |
| text-align: center; |
| color: white; |
| } |
| |
| h1 { |
| font-size: 4rem; |
| margin-bottom: 1rem; |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.3); |
| } |
| |
| .badge { |
| background: rgba(255,255,255,0.2); |
| padding: 1rem 2rem; |
| border-radius: 50px; |
| backdrop-filter: blur(10px); |
| display: inline-block; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <h1>✨ Infinity Unlocked</h1> |
| <div class="badge">Built with Replit Infinity AI</div> |
| </div> |
| |
| <script> |
| console.log("Welcome to unlimited possibilities!"); |
| |
| |
| document.addEventListener('mousemove', (e) => { |
| const x = e.clientX / window.innerWidth; |
| const y = e.clientY / window.innerHeight; |
| |
| document.body.style.background = \` |
| linear-gradient(\${135 + x * 45}deg, |
| rgb(\${100 + x * 50}, \${120 + y * 50}, \${234}) 0%, |
| rgb(\${120 + x * 30}, \${50 + y * 30}, \${162}) 100%) |
| \`; |
| }); |
| <\/script> |
| </body> |
| </html>`, |
| language: 'html', |
| theme: 'vs-dark', |
| fontSize: 14, |
| fontFamily: 'JetBrains Mono', |
| minimap: { enabled: true }, |
| automaticLayout: true, |
| scrollBeyondLastLine: false, |
| roundedSelection: false, |
| padding: { top: 16 }, |
| folding: true, |
| lineNumbers: 'on', |
| renderLineHighlight: 'all', |
| matchBrackets: 'always', |
| bracketPairColorization: { enabled: true } |
| }); |
| }); |
| |
| |
| const files = { |
| 'index.html': { content: '', language: 'html' }, |
| 'style.css': { content: '/* Styles here */', language: 'css' }, |
| 'script.js': { content: '// JavaScript here', language: 'javascript' }, |
| 'app.py': { content: '# Python code here', language: 'python' }, |
| 'README.md': { content: '# Project README', language: 'markdown' } |
| }; |
| |
| function openFile(filename, language) { |
| |
| if (editor && currentFile) { |
| files[currentFile].content = editor.getValue(); |
| } |
| |
| |
| document.querySelectorAll('.file-item').forEach(item => { |
| item.classList.remove('file-active'); |
| if (item.textContent.trim() === filename) { |
| item.classList.add('file-active'); |
| } |
| }); |
| |
| |
| currentFile = filename; |
| if (editor) { |
| editor.setValue(files[filename].content || ''); |
| monaco.editor.setModelLanguage(editor.getModel(), language); |
| } |
| |
| |
| updateActiveTab(filename); |
| } |
| |
| function updateActiveTab(filename) { |
| const container = document.getElementById('tabs-container'); |
| const tabs = container.querySelectorAll('div[class*="border-t-2"]'); |
| |
| tabs.forEach(tab => { |
| const isTarget = tab.textContent.includes(filename); |
| if (isTarget) { |
| tab.classList.remove('border-transparent'); |
| tab.classList.add('border-orange-500', 'bg-replit-dark'); |
| tab.querySelector('span').classList.remove('text-gray-400'); |
| tab.querySelector('span').classList.add('text-gray-300'); |
| } else { |
| tab.classList.add('border-transparent'); |
| tab.classList.remove('border-orange-500', 'bg-replit-dark'); |
| tab.querySelector('span').classList.add('text-gray-400'); |
| tab.querySelector('span').classList.remove('text-gray-300'); |
| } |
| }); |
| } |
| |
| function createNewFile() { |
| const name = prompt('Enter file name:'); |
| if (name) { |
| const tree = document.getElementById('file-tree'); |
| const div = document.createElement('div'); |
| div.className = 'file-item flex items-center gap-2 px-3 py-1.5 cursor-pointer text-sm'; |
| div.onclick = () => openFile(name, 'plaintext'); |
| div.innerHTML = ` |
| <i data-lucide="file" class="w-4 h-4 text-gray-400"></i> |
| <span class="text-gray-300">${name}</span> |
| `; |
| tree.appendChild(div); |
| files[name] = { content: '', language: 'plaintext' }; |
| lucide.createIcons(); |
| } |
| } |
| |
| |
| let terminalOutput = []; |
| |
| function runCode() { |
| const terminal = document.getElementById('terminal'); |
| const code = editor ? editor.getValue() : ''; |
| |
| const timestamp = new Date().toLocaleTimeString(); |
| const output = document.createElement('div'); |
| output.className = 'mb-2 message-appear'; |
| output.innerHTML = ` |
| <div class="text-gray-500 mb-1">[${timestamp}] Running ${currentFile}...</div> |
| <div class="text-green-400">✓ Build successful</div> |
| <div class="text-gray-300 mt-1">Output preview ready in new tab</div> |
| `; |
| |
| terminal.insertBefore(output, terminal.lastElementChild); |
| terminal.scrollTop = terminal.scrollHeight; |
| |
| |
| setTimeout(() => { |
| showNotification('Code executed successfully! 🚀'); |
| }, 500); |
| } |
| |
| function clearTerminal() { |
| const terminal = document.getElementById('terminal'); |
| terminal.innerHTML = ` |
| <div class="text-green-400 mb-1">➜ ~/my-awesome-project <span class="text-gray-500">main</span></div> |
| <div class="text-gray-300 terminal-cursor" id="terminal-input"></div> |
| `; |
| } |
| |
| function toggleTerminalSize() { |
| const panel = document.getElementById('terminal').parentElement; |
| const currentHeight = panel.style.height; |
| panel.style.height = currentHeight === '400px' ? '192px' : '400px'; |
| } |
| |
| |
| let agentOpen = true; |
| let isAgentProcessing = false; |
| |
| function toggleAgentPanel() { |
| const panel = document.getElementById('agent-panel'); |
| const btn = document.getElementById('collapsed-agent-btn'); |
| |
| agentOpen = !agentOpen; |
| |
| if (agentOpen) { |
| panel.style.width = '24rem'; |
| panel.style.opacity = '1'; |
| panel.style.marginRight = '0'; |
| btn.classList.add('hidden'); |
| } else { |
| panel.style.width = '0'; |
| panel.style.opacity = '0'; |
| panel.style.marginRight = '-24rem'; |
| btn.classList.remove('hidden'); |
| } |
| } |
| |
| function sendAgentMessage() { |
| if (isAgentProcessing) return; |
| |
| const input = document.getElementById('agent-input'); |
| const message = input.value.trim(); |
| |
| if (!message || message === 'undefined' || message === 'null') { |
| console.warn('Invalid message input blocked'); |
| return; |
| } |
| |
| isAgentProcessing = true; |
| |
| |
| addMessage(message, 'user'); |
| input.value = ''; |
| |
| |
| showTypingIndicator(); |
| |
| |
| const capturedMessage = String(message); |
| |
| |
| setTimeout(() => { |
| removeTypingIndicator(); |
| generateAIResponse(capturedMessage); |
| isAgentProcessing = false; |
| }, 1500 + Math.random() * 1000); |
| } |
| |
| function addMessage(text, sender) { |
| |
| if (text === undefined || text === null) { |
| console.warn('Blocked undefined/null message'); |
| return null; |
| } |
| |
| |
| const safeText = String(text); |
| |
| |
| if (safeText === 'undefined' || safeText === 'null' || safeText.trim() === '') { |
| console.warn('Blocked invalid string message:', safeText); |
| return null; |
| } |
| |
| const container = document.getElementById('chat-messages'); |
| |
| const div = document.createElement('div'); |
| div.className = 'flex gap-3 message-appear'; |
| |
| if (sender === 'user') { |
| div.innerHTML = ` |
| <div class="w-8 h-8 rounded-full bg-gray-600 flex-shrink-0 flex items-center justify-center"> |
| <span class="text-xs font-bold text-white">UN</span> |
| </div> |
| <div class="flex-1 bg-replit-hover rounded-lg p-3 text-sm text-gray-300"> |
| ${escapeHtml(safeText)} |
| </div> |
| `; |
| } else { |
| div.innerHTML = ` |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-r from-orange-500 to-pink-500 flex-shrink-0 flex items-center justify-center"> |
| <i data-lucide="sparkles" class="w-4 h-4 text-white"></i> |
| </div> |
| <div class="flex-1 content-container"> |
| <div class="bg-replit-sidebar rounded-lg p-3 text-sm text-gray-300 border border-replit content-text"> |
| ${safeText} |
| </div> |
| </div> |
| `; |
| } |
| |
| container.appendChild(div); |
| container.scrollTop = container.scrollHeight; |
| lucide.createIcons(); |
| |
| return div; |
| } |
| |
| function showTypingIndicator() { |
| const container = document.getElementById('chat-messages'); |
| const div = document.createElement('div'); |
| div.id = 'typing-indicator'; |
| div.className = 'flex gap-3 message-appear'; |
| div.innerHTML = ` |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-r from-orange-500 to-pink-500 flex-shrink-0 flex items-center justify-center"> |
| <i data-lucide="sparkles" class="w-4 h-4 text-white"></i> |
| </div> |
| <div class="flex-1 bg-replit-sidebar rounded-lg p-3 border border-replit"> |
| <div class="flex gap-1"> |
| <div class="w-2 h-2 bg-orange-400 rounded-full typing-dot"></div> |
| <div class="w-2 h-2 bg-orange-400 rounded-full typing-dot"></div> |
| <div class="w-2 h-2 bg-orange-400 rounded-full typing-dot"></div> |
| </div> |
| </div> |
| `; |
| container.appendChild(div); |
| container.scrollTop = container.scrollHeight; |
| } |
| |
| function removeTypingIndicator() { |
| const indicator = document.getElementById('typing-indicator'); |
| if (indicator) indicator.remove(); |
| } |
| |
| function generateAIResponse(message) { |
| |
| let safeMessage = ''; |
| if (message && typeof message === 'string') { |
| safeMessage = message; |
| } |
| |
| const responses = { |
| 'explain': '🔍 <strong class="text-orange-400">Code Analysis:</strong><br><br>This code creates a modern web application with:<br>• Responsive design using CSS Grid/Flexbox<br>• Dynamic gradient backgrounds<br>• Event-driven interactions<br><br>The architecture follows best practices with clear separation of concerns.', |
| 'debug': '🐛 <strong class="text-red-400">Debug Complete:</strong><br><br>Found 0 errors! Your code is clean. However, I suggest:<br>• Adding error handling for edge cases<br>• Implementing input validation<br>• Consider adding loading states for better UX', |
| 'optimize': '⚡ <strong class="text-yellow-400">Optimization Applied:</strong><br><br>Improved performance by 300%:<br>• Reduced render cycles<br>• Optimized DOM queries<br>• Implemented lazy loading<br>• Minified assets automatically', |
| 'default': `🎯 <strong class="text-orange-400">Infinity Agent Response:</strong><br><br>I've analyzed your request: "<em>${escapeHtml(safeMessage.substring(0, 50))}${safeMessage.length > 50 ? '...' : ''}</em>"<br><br>Here's my creative solution:<br><br>1. <strong>Architecture:</strong> Modular component-based design<br>2. <strong>Performance:</strong> Optimized for sub-100ms load times<br>3. <strong>UX:</strong> Intuitive interactions with micro-animations<br>4. <strong>Code Quality:</strong> Production-ready with full type safety<br><br>Would you like me to implement this now?` |
| }; |
| |
| let responseText; |
| const lowerMsg = safeMessage.toLowerCase(); |
| if (lowerMsg.includes('explain')) responseText = responses.explain; |
| else if (lowerMsg.includes('debug')) responseText = responses.debug; |
| else if (lowerMsg.includes('optimize')) responseText = responses.optimize; |
| else responseText = responses.default; |
| |
| |
| if (!responseText || responseText === 'undefined' || responseText === 'null') { |
| console.error('Invalid response generated:', responseText); |
| return; |
| } |
| |
| const messageDiv = addMessage(responseText, 'agent'); |
| |
| |
| if (messageDiv) { |
| const contentContainer = messageDiv.querySelector('.content-container'); |
| if (contentContainer) { |
| const btnDiv = document.createElement('div'); |
| btnDiv.className = 'flex gap-2 mt-2'; |
| btnDiv.innerHTML = ` |
| <button class="px-3 py-1 bg-orange-500/20 text-orange-400 rounded text-xs font-medium hover:bg-orange-500/30 transition-colors" onclick="applyAIChanges()">Apply Changes</button> |
| <button class="px-3 py-1 bg-replit-hover text-gray-400 rounded text-xs font-medium hover:bg-replit-dark transition-colors">Tell me more</button> |
| `; |
| contentContainer.appendChild(btnDiv); |
| } |
| } |
| } |
| |
| function agentAction(action) { |
| document.getElementById('agent-input').value = action; |
| sendAgentMessage(); |
| } |
| |
| function applyAIChanges() { |
| showNotification('✨ AI changes applied successfully!'); |
| |
| |
| if (editor && currentFile === 'index.html') { |
| const currentValue = editor.getValue(); |
| const enhancedCode = currentValue.replace('</body>', ` |
| <!-- AI Enhanced Features --> |
| <div id="ai-toast" class="fixed bottom-4 right-4 bg-gradient-to-r from-orange-500 to-pink-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-0 transition-transform"> |
| 🚀 Enhanced by Infinity Agent |
| </div> |
| </body>`); |
| editor.setValue(enhancedCode); |
| } |
| } |
| |
| function escapeHtml(text) { |
| if (text == null || text === undefined) return ''; |
| |
| const map = { |
| '&': '&', |
| '<': '<', |
| '>': '>', |
| '"': '"', |
| "'": ''' |
| }; |
| return String(text).replace(/[&<>"']/g, m => map[m]); |
| } |
| |
| |
| document.addEventListener('keydown', (e) => { |
| |
| if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { |
| runCode(); |
| } |
| |
| |
| if (e.shiftKey && e.key === 'Enter' && document.activeElement.id === 'agent-input') { |
| e.preventDefault(); |
| const input = document.getElementById('agent-input'); |
| input.value += '\n'; |
| } |
| |
| |
| if (e.key === 'Enter' && !e.shiftKey && document.activeElement.id === 'agent-input') { |
| e.preventDefault(); |
| sendAgentMessage(); |
| } |
| }); |
| |
| |
| function showNotification(message) { |
| const notif = document.createElement('div'); |
| notif.className = 'fixed top-20 right-4 bg-replit-panel border border-orange-500/50 text-white px-6 py-3 rounded-lg shadow-2xl z-50 message-appear flex items-center gap-2'; |
| notif.innerHTML = ` |
| <i data-lucide="check-circle" class="w-5 h-5 text-green-400"></i> |
| <span>${message}</span> |
| `; |
| document.body.appendChild(notif); |
| lucide.createIcons(); |
| |
| setTimeout(() => { |
| notif.style.opacity = '0'; |
| notif.style.transform = 'translateX(100%)'; |
| setTimeout(() => notif.remove(), 300); |
| }, 3000); |
| } |
| |
| |
| window.addEventListener('resize', () => { |
| if (editor) editor.layout(); |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| |
| setTimeout(() => { |
| showNotification('Welcome to Replit Infinity! 🌟'); |
| }, 1000); |
| }); |
| </script> |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
| </body> |
| </html> |
