Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeStream | AI Code Generator</title> | |
| <!-- Import Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Import Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-dark: #0f1117; | |
| --bg-panel: #161b22; | |
| --bg-editor: #0d1117; | |
| --accent: #2f81f7; | |
| --accent-glow: rgba(47, 129, 247, 0.4); | |
| --text-main: #c9d1d9; | |
| --text-muted: #8b949e; | |
| --border: #30363d; | |
| --syntax-keyword: #ff7b72; | |
| --syntax-string: #a5d6ff; | |
| --syntax-function: #d2a8ff; | |
| --syntax-comment: #8b949e; | |
| --terminal-bg: #010409; | |
| --success: #238636; | |
| } | |
| * { | |
| box-sizing: box-sizing; | |
| margin: 0; | |
| padding: 0; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--border) var(--bg-dark); | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--bg-dark); | |
| color: var(--text-main); | |
| height: 100vh; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* --- Header --- */ | |
| header { | |
| height: 60px; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 20px; | |
| background: var(--bg-panel); | |
| z-index: 10; | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-weight: 700; | |
| font-size: 1.1rem; | |
| letter-spacing: -0.5px; | |
| } | |
| .brand i { color: var(--accent); } | |
| .anycoder-link { | |
| background: rgba(255, 255, 255, 0.05); | |
| padding: 8px 16px; | |
| border-radius: 6px; | |
| text-decoration: none; | |
| color: var(--text-main); | |
| font-size: 0.85rem; | |
| border: 1px solid var(--border); | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .anycoder-link:hover { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| color: white; | |
| box-shadow: 0 0 15px var(--accent-glow); | |
| } | |
| /* --- Main Layout --- */ | |
| .workspace { | |
| display: grid; | |
| grid-template-columns: 250px 1fr 350px; | |
| flex-grow: 1; | |
| height: 100%; | |
| } | |
| /* --- Sidebar --- */ | |
| .sidebar { | |
| border-right: 1px solid var(--border); | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .file-tree-header { | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| color: var(--text-muted); | |
| margin-bottom: 10px; | |
| } | |
| .file-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 8px 10px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| color: var(--text-main); | |
| font-size: 0.9rem; | |
| transition: 0.2s; | |
| } | |
| .file-item:hover { background: rgba(255,255,255, 0.05); } | |
| .file-item.active { background: rgba(47, 129, 247, 0.1); color: var(--accent); } | |
| .file-item i { width: 20px; text-align: center; } | |
| /* --- Editor Area --- */ | |
| .editor-container { | |
| position: relative; | |
| background: var(--bg-editor); | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .editor-tabs { | |
| display: flex; | |
| background: var(--bg-panel); | |
| border-bottom: 1px solid var(--border); | |
| height: 35px; | |
| } | |
| .tab { | |
| padding: 0 15px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| border-right: 1px solid var(--border); | |
| background: var(--bg-editor); | |
| color: var(--text-main); | |
| } | |
| .tab i { color: #e34c26; } /* JS color */ | |
| .toolbar { | |
| padding: 10px 20px; | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 10px; | |
| } | |
| .btn { | |
| padding: 6px 12px; | |
| border-radius: 4px; | |
| border: 1px solid var(--border); | |
| background: transparent; | |
| color: var(--text-main); | |
| cursor: pointer; | |
| font-size: 0.8rem; | |
| transition: 0.2s; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .btn-primary { | |
| background: var(--success); | |
| border-color: var(--success); | |
| color: white; | |
| } | |
| .btn-primary:hover { opacity: 0.9; } | |
| /* Code Editor Logic */ | |
| .code-area { | |
| position: relative; | |
| flex-grow: 1; | |
| font-family: 'Fira Code', monospace; | |
| font-size: 14px; | |
| line-height: 1.6; | |
| padding: 20px; | |
| overflow: auto; | |
| } | |
| /* The textarea is transparent and sits on top */ | |
| #code-input { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| padding: 20px; | |
| background: transparent; | |
| color: transparent; /* Text is invisible, we see the highlight layer */ | |
| caret-color: var(--accent); | |
| border: none; | |
| resize: none; | |
| outline: none; | |
| z-index: 2; | |
| white-space: pre; | |
| overflow: hidden; | |
| } | |
| /* The highlight layer sits behind */ | |
| #code-highlight { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| padding: 20px; | |
| pointer-events: none; | |
| z-index: 1; | |
| white-space: pre; | |
| overflow: hidden; | |
| color: var(--text-main); | |
| } | |
| /* Syntax Highlighting Classes */ | |
| .keyword { color: var(--syntax-keyword); font-weight: bold; } | |
| .string { color: var(--syntax-string); } | |
| .function { color: var(--syntax-function); } | |
| .comment { color: var(--syntax-comment); font-style: italic; } | |
| /* --- Terminal/Preview --- */ | |
| .terminal-panel { | |
| background: var(--terminal-bg); | |
| border-left: 1px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| font-family: 'Fira Code', monospace; | |
| } | |
| .terminal-header { | |
| padding: 10px 20px; | |
| border-bottom: 1px solid var(--border); | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .terminal-content { | |
| padding: 20px; | |
| flex-grow: 1; | |
| overflow-y: auto; | |
| color: var(--text-main); | |
| font-size: 0.85rem; | |
| } | |
| .log-entry { | |
| margin-bottom: 10px; | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .log-entry.error { color: var(--syntax-keyword); } | |
| .log-entry.success { color: var(--success); } | |
| .log-time { color: var(--text-muted); opacity: 0.5; } | |
| .cursor-blink { | |
| display: inline-block; | |
| width: 8px; | |
| height: 15px; | |
| background: var(--accent); | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| /* Responsive */ | |
| @media (max-width: 900px) { | |
| .workspace { | |
| grid-template-columns: 1fr; | |
| grid-template-rows: auto 1fr 300px; | |
| } | |
| .sidebar { display: none; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="brand"> | |
| <i class="fa-solid fa-code"></i> | |
| <span>CodeStream</span> | |
| </div> | |
| <!-- CRITICAL LINK --> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank"> | |
| <i class="fa-solid fa-robot"></i> Built with anycoder | |
| </a> | |
| </header> | |
| <div class="workspace"> | |
| <!-- Sidebar --> | |
| <aside class="sidebar"> | |
| <div class="file-tree-header">Explorer</div> | |
| <div class="file-item active"> | |
| <i class="fa-brands fa-js"></i> main.js | |
| </div> | |
| <div class="file-item"> | |
| <i class="fa-brands fa-css3-alt"></i> styles.css | |
| </div> | |
| <div class="file-item"> | |
| <i class="fa-brands fa-html5"></i> index.html | |
| </div> | |
| <div class="file-item"> | |
| <i class="fa-solid fa-gear"></i> config.json | |
| </div> | |
| </aside> | |
| <!-- Editor --> | |
| <main class="editor-container"> | |
| <div class="editor-tabs"> | |
| <div class="tab"><i class="fa-brands fa-js"></i> main.js</div> | |
| </div> | |
| <div class="toolbar"> | |
| <button class="btn" onclick="clearTerminal()"><i class="fa-solid fa-trash"></i> Clear</button> | |
| <button class="btn btn-primary" onclick="runCode()"><i class="fa-solid fa-play"></i> Run Code</button> | |
| </div> | |
| <div class="code-area"> | |
| <div id="code-highlight"></div> | |
| <textarea id="code-input" spellcheck="false"></textarea> | |
| </div> | |
| </main> | |
| <!-- Terminal --> | |
| <aside class="terminal-panel"> | |
| <div class="terminal-header"> | |
| <span>Output Console</span> | |
| <i class="fa-solid fa-terminal"></i> | |
| </div> | |
| <div class="terminal-content" id="terminal-output"> | |
| <div class="log-entry"> | |
| <span class="log-time">System</span> | |
| <span>Ready for input...</span> | |
| </div> | |
| </div> | |
| </aside> | |
| </div> | |
| <script> | |
| const textarea = document.getElementById('code-input'); | |
| const highlight = document.getElementById('code-highlight'); | |
| const terminal = document.getElementById('terminal-output'); | |
| // Sample code to simulate "AI Generation" | |
| const sampleCode = `// AI Code Generation Simulation | |
| // Initializing environment... | |
| const initSystem = () => { | |
| console.log("System Booting..."); | |
| const modules = ['Core', 'UI', 'Logic']; | |
| modules.forEach(m => { | |
| loadModule(m); | |
| }); | |
| }; | |
| const loadModule = (name) => { | |
| // Simulating async load | |
| return Promise.resolve(name); | |
| }; | |
| // Execute | |
| initSystem();`; | |
| // 1. Auto-Resize Textarea | |
| textarea.addEventListener('input', () => { | |
| textarea.style.height = 'auto'; | |
| textarea.style.height = textarea.scrollHeight + 'px'; | |
| highlightCode(); | |
| }); | |
| // 2. Syntax Highlighting Logic | |
| function highlightCode() { | |
| let text = textarea.value; | |
| // Escape HTML | |
| text = text.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); | |
| // Regex for syntax highlighting (Simple implementation) | |
| // Keywords | |
| text = text.replace(/\b(const|let|var|function|return|if|else|for|while|import|from)\b/g, '<span class="keyword">$1</span>'); | |
| // Functions | |
| text = text.replace(/\b(console\.log|initSystem|loadModule|forEach|resolve)\b/g, '<span class="function">$1</span>'); | |
| // Strings | |
| text = text.replace(/(["'])(?:(?=(\\?))\2.)*?\1/g, '<span class="string">$&</span>'); | |
| // Comments | |
| text = text.replace(/\/\/.*$/gm, '<span class="comment">$&</span>'); | |
| highlight.innerHTML = text; | |
| } | |
| // 3. Typing Effect (Simulate AI writing code) | |
| let typeIndex = 0; | |
| function typeCode() { | |
| if (typeIndex < sampleCode.length) { | |
| textarea.value += sampleCode.charAt(typeIndex); | |
| textarea.style.height = 'auto'; | |
| textarea.style.height = textarea.scrollHeight + 'px'; | |
| highlightCode(); | |
| typeIndex++; | |
| setTimeout(typeCode, 30 + Math.random() * 50); // Random typing speed | |
| } | |
| } | |
| // 4. Terminal Logic | |
| function logToTerminal(msg, type = 'normal') { | |
| const entry = document.createElement('div'); | |
| entry.className = `log-entry ${type}`; | |
| const time = new Date().toLocaleTimeString(); | |
| entry.innerHTML = `<span class="log-time">[${time}]</span> <span>${msg}</span>`; | |
| terminal.appendChild(entry); | |
| terminal.scrollTop = terminal.scrollHeight; | |
| } | |
| function clearTerminal() { | |
| terminal.innerHTML = ''; | |
| } | |
| // 5. Run Code Logic (Simulation) | |
| function runCode() { | |
| logToTerminal("Compiling...", "normal"); | |
| setTimeout(() => { | |
| logToTerminal("Build successful.", "success"); | |
| // Try to actually execute the JS if it's safe/simple | |
| try { | |
| // We use a safe wrapper to prevent breaking the UI | |
| const code = textarea.value; | |
| // Replace console.log to capture output | |
| const wrappedCode = code.replace(/console\.log/g, 'window.mockLog'); | |
| window.mockLog = (arg) => { | |
| logToTerminal(`> ${arg}`, 'success'); | |
| }; | |
| // Create a function from the string | |
| const runFunc = new Function(wrappedCode); | |
| runFunc(); | |
| logToTerminal("Process finished with exit code 0", "normal"); | |
| } catch (e) { | |
| logToTerminal(`Error: ${e.message}`, "error"); | |
| } | |
| }, 800); | |
| } | |
| // Initialize | |
| window.onload = () => { | |
| // Start typing the code automatically when page loads | |
| setTimeout(typeCode, 500); | |
| }; | |
| </script> | |
| </body> | |
| </html> |