Spaces:

Lintottq
/

anycoder-36b47e50

Running

File size: 15,015 Bytes

d3bbabf

<!DOCTYPE html>
<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, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");

            // 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>