Spaces:

proti0070
/

Ando

Build error

App Files Files Community

proti0070 commited on about 1 month ago

Commit

22be007

verified ·

1 Parent(s): a6119c0

Upload 7 files

Browse files

Files changed (6) hide show

.hf-space.yaml +8 -0
index.html +266 -0
package.json +21 -0
script.js +648 -0
server.js +473 -0
style.css +265 -0

.hf-space.yaml ADDED Viewed

	@@ -0,0 +1,8 @@

+---
+title: Android Studio Web - Real Build with Android 10 Preview
+emoji: 🚀
+colorFrom: blue
+colorTo: green
+sdk: docker
+app_port: 7860
+---

index.html ADDED Viewed

	@@ -0,0 +1,266 @@

+<!DOCTYPE html>
+<html lang="bn">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Android Studio Web - Real Build + Android 10 Preview</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Icons -->
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <!-- Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <!-- xterm.js for terminal -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.css" />
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-[#2B2B2B] text-gray-300 h-screen flex flex-col overflow-hidden">
+    <!-- Top Toolbar -->
+    <div class="h-12 bg-[#3C3F41] border-b border-[#4E4E4E] flex items-center px-4 justify-between select-none">
+        <div class="flex items-center space-x-4">
+            <div class="flex items-center space-x-2">
+                <i data-lucide="smartphone" class="w-5 h-5 text-[#3DDC84]"></i>
+                <span class="font-semibold text-white text-sm">Android Studio Web</span>
+                <span class="text-xs text-gray-500">Real Build + Android 10</span>
+            </div>
+            <!-- Project Dropdown -->
+            <div class="relative">
+                <button onclick="toggleProjectDropdown()" class="flex items-center space-x-1 bg-[#2B2B2B] px-3 py-1 rounded text-sm">
+                    <i data-lucide="folder" class="w-4 h-4 text-yellow-500"></i>
+                    <span id="current-project">Select Project</span>
+                    <i data-lucide="chevron-down" class="w-4 h-4"></i>
+                </button>
+                <div id="project-dropdown" class="absolute top-full left-0 mt-1 bg-[#3C3F41] border border-[#4E4E4E] rounded shadow-lg hidden z-50">
+                    <div class="p-2 min-w-[200px]" id="project-list">
+                        <!-- Projects will load here -->
+                    </div>
+                </div>
+            </div>
+            <!-- File Operations -->
+            <div class="h-4 w-px bg-gray-600"></div>
+            <div class="flex items-center space-x-1">
+                <button class="p-1.5 hover:bg-gray-600 rounded text-gray-400 hover:text-white" onclick="createNewFile()" title="New File">
+                    <i data-lucide="file-plus" class="w-4 h-4"></i>
+                </button>
+                <button class="p-1.5 hover:bg-gray-600 rounded text-gray-400 hover:text-white" onclick="saveCurrentFile()" title="Save (Ctrl+S)">
+                    <i data-lucide="save" class="w-4 h-4"></i>
+                </button>
+                <button class="p-1.5 hover:bg-gray-600 rounded text-gray-400 hover:text-white" onclick="refreshFiles()" title="Refresh">
+                    <i data-lucide="refresh-cw" class="w-4 h-4"></i>
+                </button>
+            </div>
+            <!-- Build & Run -->
+            <div class="h-4 w-px bg-gray-600"></div>
+            <div class="flex items-center space-x-1">
+                <button class="p-1.5 hover:bg-gray-600 rounded text-gray-400 hover:text-white" onclick="startBuild()" title="Build APK">
+                    <i data-lucide="play" class="w-4 h-4 text-[#3DDC84]"></i>
+                </button>
+                <button class="p-1.5 hover:bg-gray-600 rounded text-gray-400 hover:text-white" onclick="downloadAPK()" title="Download APK">
+                    <i data-lucide="download" class="w-4 h-4 text-blue-400"></i>
+                </button>
+                <button class="p-1.5 hover:bg-gray-600 rounded text-gray-400 hover:text-white" onclick="installOnPreview()" title="Install on Preview">
+                    <i data-lucide="smartphone" class="w-4 h-4 text-green-400"></i>
+                </button>
+            </div>
+        </div>
+        <!-- Right side -->
+        <div class="flex items-center space-x-3">
+            <div class="flex items-center space-x-2 px-3 py-1 bg-[#2B2B2B] rounded-full text-xs">
+                <i data-lucide="git-branch" class="w-3 h-3"></i>
+                <span>main</span>
+            </div>
+            <button class="p-1.5 hover:bg-gray-600 rounded" onclick="openSettings()">
+                <i data-lucide="settings" class="w-4 h-4"></i>
+            </button>
+        </div>
+    </div>
+    <!-- Main Content -->
+    <div class="flex-1 flex overflow-hidden">
+        <!-- Left Sidebar - Project Files -->
+        <div class="w-64 bg-[#3C3F41] border-r border-[#4E4E4E] flex flex-col">
+            <!-- Project Header -->
+            <div class="p-3 border-b border-[#4E4E4E]">
+                <div class="flex items-center justify-between mb-2">
+                    <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Project</span>
+                    <button onclick="createNewProject()" class="hover:bg-gray-600 p-1 rounded" title="New Project">
+                        <i data-lucide="folder-plus" class="w-4 h-4"></i>
+                    </button>
+                </div>
+                <div class="flex items-center space-x-2 text-sm">
+                    <i data-lucide="folder" class="w-4 h-4 text-yellow-600"></i>
+                    <span class="font-medium text-white" id="project-name-display">No Project</span>
+                </div>
+            </div>
+            <!-- File Tree -->
+            <div class="flex-1 overflow-y-auto py-2" id="file-tree">
+                <div class="px-3 py-1 text-xs text-gray-500">Open a project to see files</div>
+            </div>
+            <!-- Bottom Tools -->
+            <div class="border-t border-[#4E4E4E] p-2">
+                <div class="flex items-center justify-around">
+                    <button class="p-2 hover:bg-gray-600 rounded text-gray-400 hover:text-white" title="Project Structure">
+                        <i data-lucide="structure" class="w-4 h-4"></i>
+                    </button>
+                    <button class="p-2 hover:bg-gray-600 rounded text-gray-400 hover:text-white" title="Search">
+                        <i data-lucide="search" class="w-4 h-4"></i>
+                    </button>
+                    <button class="p-2 hover:bg-gray-600 rounded text-gray-400 hover:text-white" title="Version Control">
+                        <i data-lucide="git-commit" class="w-4 h-4"></i>
+                    </button>
+                    <button class="p-2 hover:bg-gray-600 rounded text-gray-400 hover:text-white" title="Logcat">
+                        <i data-lucide="terminal" class="w-4 h-4"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Center - Editor Area -->
+        <div class="flex-1 flex flex-col bg-[#2B2B2B]">
+            <!-- Editor Tabs -->
+            <div class="flex bg-[#3C3F41] border-b border-[#4E4E4E] overflow-x-auto" id="editor-tabs">
+                <div class="px-4 py-2 flex items-center space-x-2 text-sm text-gray-400">
+                    <i data-lucide="file" class="w-4 h-4"></i>
+                    <span>No file open</span>
+                </div>
+            </div>
+            <!-- Editor with Line Numbers -->
+            <div class="flex-1 flex overflow-hidden">
+                <div class="line-numbers code-font text-sm py-4 select-none bg-[#313335]" id="line-numbers">
+                    <div class="leading-6">1</div>
+                </div>
+                <div class="flex-1 editor-content code-font text-sm p-4 overflow-auto"
+                     id="code-editor"
+                     contenteditable="true"
+                     spellcheck="false"
+                     oninput="updateLineNumbers()"
+                     onscroll="syncScroll()">
+                    {/* Open a file to start editing */}
+                </div>
+            </div>
+            <!-- Bottom Panel with Terminal & Build Output -->
+            <div class="h-48 bg-[#2B2B2B] border-t border-[#4E4E4E] flex flex-col">
+                <!-- Panel Tabs -->
+                <div class="flex items-center border-b border-[#4E4E4E] bg-[#3C3F41]">
+                    <button class="px-4 py-2 text-sm text-white border-b-2 border-[#3DDC84] panel-tab" onclick="switchPanel('terminal')">
+                        <div class="flex items-center space-x-2">
+                            <i data-lucide="terminal" class="w-4 h-4"></i>
+                            <span>Terminal</span>
+                        </div>
+                    </button>
+                    <button class="px-4 py-2 text-sm text-gray-400 hover:text-white panel-tab" onclick="switchPanel('build')">
+                        <div class="flex items-center space-x-2">
+                            <i data-lucide="package" class="w-4 h-4"></i>
+                            <span>Build Output</span>
+                        </div>
+                    </button>
+                </div>
+                <!-- Terminal Panel -->
+                <div id="terminal-panel" class="flex-1 bg-black"></div>
+                <!-- Build Output Panel (hidden by default) -->
+                <div id="build-panel" class="flex-1 p-3 code-font text-sm overflow-auto hidden">
+                    <div class="text-gray-400">▶ Click Build button to compile your app</div>
+                </div>
+            </div>
+        </div>
+        <!-- Right Panel - Android 10 Preview -->
+        <div class="w-80 bg-[#2B2B2B] border-l border-[#4E4E4E] flex flex-col">
+            <div class="h-10 border-b border-[#4E4E4E] flex items-center px-4 justify-between bg-[#3C3F41]">
+                <span class="text-sm font-medium text-white">Android 10 Preview</span>
+                <div class="flex items-center space-x-2">
+                    <button class="p-1 hover:bg-gray-600 rounded" onclick="rotatePreview()" title="Rotate">
+                        <i data-lucide="rotate-ccw" class="w-4 h-4"></i>
+                    </button>
+                    <button class="p-1 hover:bg-gray-600 rounded" onclick="toggleTheme()" title="Toggle Theme">
+                        <i data-lucide="moon" class="w-4 h-4"></i>
+                    </button>
+                </div>
+            </div>
+            <!-- Android 10 Phone Frame -->
+            <div class="flex-1 p-4 flex items-center justify-center bg-[#1E1E1E]">
+                <div class="phone-frame android-10" id="phone-preview">
+                    <!-- Status Bar (Android 10 style) -->
+                    <div class="status-bar" id="status-bar">
+                        <div class="time">9:41</div>
+                        <div class="status-icons">
+                            <i data-lucide="signal" class="w-3 h-3"></i>
+                            <i data-lucide="wifi" class="w-3 h-3"></i>
+                            <i data-lucide="battery-full" class="w-3 h-3"></i>
+                        </div>
+                    </div>
+                    <!-- App Content -->
+                    <div class="app-screen" id="app-screen">
+                        <div class="logo-container">
+                            <img id="preview-logo" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' fill='%233DDC84'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z'/%3E%3C/svg%3E" alt="App Logo">
+                            <h3 id="preview-app-name">My Android App</h3>
+                            <p class="app-version">Android 10 (API 29)</p>
+                        </div>
+                    </div>
+                    <!-- Navigation Bar (Android 10 gesture) -->
+                    <div class="nav-bar" id="nav-bar">
+                        <div class="nav-handle"></div>
+                    </div>
+                </div>
+            </div>
+            <!-- Preview Controls -->
+            <div class="h-16 border-t border-[#4E4E4E] bg-[#3C3F41] flex items-center justify-center space-x-4">
+                <button class="p-2 rounded-full hover:bg-gray-600" onclick="simulateBack()">
+                    <i data-lucide="arrow-left" class="w-5 h-5"></i>
+                </button>
+                <button class="p-2 rounded-full hover:bg-gray-600" onclick="simulateHome()">
+                    <i data-lucide="circle" class="w-5 h-5"></i>
+                </button>
+                <button class="p-2 rounded-full hover:bg-gray-600" onclick="simulateRecent()">
+                    <i data-lucide="square" class="w-5 h-5"></i>
+                </button>
+                <button class="p-2 rounded-full hover:bg-gray-600" onclick="uploadLogo()">
+                    <i data-lucide="image" class="w-5 h-5"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- Status Bar -->
+    <div class="h-6 bg-[#3DDC84] text-black text-xs flex items-center px-3 justify-between">
+        <div class="flex items-center space-x-4">
+            <span id="status-message" class="font-medium">Ready</span>
+            <span id="build-status" class="hidden md:inline">● Gradle sync</span>
+        </div>
+        <div class="flex items-center space-x-4">
+            <span class="flex items-center space-x-1">
+                <i data-lucide="code" class="w-3 h-3"></i>
+                <span>Android 10 (API 29)</span>
+            </span>
+            <span class="flex items-center space-x-1 cursor-pointer hover:underline">
+                <i data-lucide="download" class="w-3 h-3"></i>
+                <span>Download APK</span>
+            </span>
+        </div>
+    </div>
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/xterm/lib/xterm.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>

package.json ADDED Viewed

	@@ -0,0 +1,21 @@

+{
+  "name": "android-studio-web-real",
+  "version": "1.0.0",
+  "description": "Real Android Studio Web with Android 10 Preview",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "nodemon server.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "ws": "^8.14.2",
+    "node-pty": "^1.0.0",
+    "multer": "^1.4.5-lts.1",
+    "adm-zip": "^0.5.10",
+    "archiver": "^6.0.1"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

script.js ADDED Viewed

	@@ -0,0 +1,648 @@

+// Android Studio Web - Complete JavaScript with Real Build
+// ==================== Global Variables ====================
+let currentProject = null;
+let currentFile = null;
+let currentFilePath = null;
+let terminal = null;
+let ws = null;
+let activeBuildId = null;
+let files = [];
+let projects = [];
+// ==================== Initialize on Load ====================
+document.addEventListener('DOMContentLoaded', function() {
+    // Load Lucide icons
+    lucide.createIcons();
+    // Initialize terminal
+    initTerminal();
+    // Load projects
+    loadProjects();
+    // Setup event listeners
+    setupEventListeners();
+    // Update status
+    updateStatus('Ready', 'success');
+});
+// ==================== Terminal Functions ====================
+function initTerminal() {
+    const terminalContainer = document.getElementById('terminal-panel');
+    terminal = new Terminal({
+        theme: {
+            background: '#1E1E1E',
+            foreground: '#A9B7C6',
+            cursor: '#3DDC84',
+            selection: '#214283'
+        },
+        fontFamily: 'JetBrains Mono, monospace',
+        fontSize: 12,
+        cursorBlink: true,
+        scrollback: 5000
+    });
+    terminal.open(terminalContainer);
+    // Connect WebSocket
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${window.location.host}`;
+    ws = new WebSocket(wsUrl);
+    ws.onopen = () => {
+        terminal.write('\x1b[32mAndroid Studio Web Terminal\x1b[0m\r\n');
+        terminal.write('\x1b[32mProject workspace: /workspace\x1b[0m\r\n');
+        terminal.write('$ ');
+    };
+    ws.onmessage = (event) => {
+        const data = JSON.parse(event.data);
+        if (data.type === 'data') {
+            terminal.write(data.data);
+        }
+    };
+    ws.onerror = (error) => {
+        terminal.write('\x1b[31mTerminal connection error\x1b[0m\r\n');
+    };
+    terminal.onData((data) => {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ type: 'input', data }));
+        }
+    });
+    terminal.onResize((size) => {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ type: 'resize', data: size }));
+        }
+    });
+}
+// ==================== Project Functions ====================
+async function loadProjects() {
+    try {
+        const response = await fetch('/api/projects');
+        const data = await response.json();
+        projects = data.projects || [];
+        renderProjectList();
+    } catch (error) {
+        console.error('Failed to load projects:', error);
+    }
+}
+function renderProjectList() {
+    const projectList = document.getElementById('project-list');
+    if (!projectList) return;
+    if (projects.length === 0) {
+        projectList.innerHTML = '<div class="p-2 text-gray-400">No projects found</div>';
+        return;
+    }
+    let html = '';
+    projects.forEach(project => {
+        html += `
+            <div class="project-item" onclick="openProject('${project}')">
+                <i data-lucide="folder" class="w-4 h-4 text-yellow-500"></i>
+                <span>${project}</span>
+            </div>
+        `;
+    });
+    projectList.innerHTML = html;
+    lucide.createIcons();
+}
+function toggleProjectDropdown() {
+    const dropdown = document.getElementById('project-dropdown');
+    dropdown.classList.toggle('hidden');
+}
+async function createNewProject() {
+    const name = prompt('Enter project name:');
+    if (!name) return;
+    updateStatus('Creating project...', 'building');
+    try {
+        const response = await fetch('/api/project/create', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ name })
+        });
+        const data = await response.json();
+        if (data.success) {
+            await loadProjects();
+            await openProject(name);
+            updateStatus('Project created', 'success');
+        } else {
+            updateStatus('Failed to create project', 'error');
+        }
+    } catch (error) {
+        updateStatus('Error creating project', 'error');
+    }
+    toggleProjectDropdown();
+}
+async function openProject(projectName) {
+    currentProject = projectName;
+    document.getElementById('current-project').textContent = projectName;
+    document.getElementById('project-name-display').textContent = projectName;
+    document.getElementById('preview-app-name').textContent = projectName;
+    toggleProjectDropdown();
+    await loadProjectFiles();
+}
+async function loadProjectFiles() {
+    if (!currentProject) return;
+    try {
+        const response = await fetch(`/api/files/${currentProject}/`);
+        const data = await response.json();
+        if (data.type === 'directory') {
+            files = data.files || [];
+            renderFileTree();
+        }
+    } catch (error) {
+        console.error('Failed to load files:', error);
+    }
+}
+function renderFileTree() {
+    const treeElement = document.getElementById('file-tree');
+    if (files.length === 0) {
+        treeElement.innerHTML = '<div class="px-3 py-1 text-xs text-gray-500">No files found</div>';
+        return;
+    }
+    let html = '<div class="px-3 py-1 text-xs text-gray-500 uppercase">app/src/main</div>';
+    // Simple file tree - you can make this recursive for full structure
+    files.forEach(file => {
+        if (file.includes('.')) {
+            const icon = file.endsWith('.kt') ? 'file-code' :
+                        file.endsWith('.xml') ? 'file-text' : 'file';
+            const color = file.endsWith('.kt') ? 'text-blue-300' :
+                         file.endsWith('.xml') ? 'text-orange-300' : 'text-gray-400';
+            html += `
+                <div class="file-item px-3 py-1.5 flex items-center space-x-2 cursor-pointer text-sm"
+                     onclick="openFile('${file}')">
+                    <i data-lucide="${icon}" class="w-4 h-4 ${color}"></i>
+                    <span>${file}</span>
+                </div>
+            `;
+        }
+    });
+    treeElement.innerHTML = html;
+    lucide.createIcons();
+}
+// ==================== File Functions ====================
+async function openFile(filename) {
+    if (!currentProject) {
+        alert('Please open a project first');
+        return;
+    }
+    currentFile = filename;
+    currentFilePath = filename;
+    try {
+        const response = await fetch(`/api/files/${currentProject}/${filename}`);
+        const data = await response.json();
+        if (data.type === 'file') {
+            document.getElementById('code-editor').innerHTML = data.content;
+            updateLineNumbers();
+            addTab(filename);
+        }
+    } catch (error) {
+        console.error('Failed to open file:', error);
+    }
+    // Update active state
+    document.querySelectorAll('.file-item').forEach(el => {
+        el.classList.remove('active');
+        if (el.textContent.trim() === filename) {
+            el.classList.add('active');
+        }
+    });
+}
+function addTab(filename) {
+    const tabs = document.getElementById('editor-tabs');
+    // Check if tab already exists
+    const existingTab = Array.from(tabs.children).find(
+        tab => tab.dataset.file === filename
+    );
+    if (existingTab) return;
+    const icon = filename.endsWith('.kt') ? 'file-code' :
+                filename.endsWith('.xml') ? 'file-text' : 'file';
+    const color = filename.endsWith('.kt') ? 'text-blue-300' :
+                 filename.endsWith('.xml') ? 'text-orange-300' : 'text-gray-400';
+    const tabHtml = `
+        <div class="px-4 py-2 flex items-center space-x-2 text-sm text-white bg-[#2B2B2B] border-t-2 border-[#3DDC84] cursor-pointer"
+             data-file="${filename}"
+             onclick="switchToTab('${filename}')">
+            <i data-lucide="${icon}" class="w-4 h-4 ${color}"></i>
+            <span>${filename}</span>
+            <i data-lucide="x" class="w-3 h-3 hover:text-red-400 cursor-pointer ml-2"
+               onclick="closeTab(event, '${filename}')"></i>
+        </div>
+    `;
+    tabs.insertAdjacentHTML('beforeend', tabHtml);
+    lucide.createIcons();
+}
+function switchToTab(filename) {
+    openFile(filename);
+}
+function closeTab(event, filename) {
+    event.stopPropagation();
+    const tab = event.target.closest('[data-file]');
+    if (tab) {
+        tab.remove();
+        if (currentFile === filename) {
+            const firstTab = document.querySelector('[data-file]');
+            if (firstTab) {
+                openFile(firstTab.dataset.file);
+            } else {
+                currentFile = null;
+                document.getElementById('code-editor').innerHTML = '// No file open';
+                updateLineNumbers();
+            }
+        }
+    }
+}
+async function saveCurrentFile() {
+    if (!currentProject || !currentFile) {
+        alert('No file open');
+        return;
+    }
+    const content = document.getElementById('code-editor').innerText;
+    try {
+        const response = await fetch(`/api/file/${currentProject}/${currentFile}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ content })
+        });
+        const data = await response.json();
+        if (data.success) {
+            updateStatus('File saved', 'success');
+        }
+    } catch (error) {
+        updateStatus('Save failed', 'error');
+    }
+}
+function createNewFile() {
+    if (!currentProject) {
+        alert('Please open a project first');
+        return;
+    }
+    const filename = prompt('Enter file name (e.g., NewFile.kt):');
+    if (filename) {
+        currentFile = filename;
+        document.getElementById('code-editor').innerHTML = getDefaultContent(filename);
+        updateLineNumbers();
+        addTab(filename);
+        saveCurrentFile();
+    }
+}
+function getDefaultContent(filename) {
+    if (filename.endsWith('.kt')) {
+        return `package com.example.app
+import android.os.Bundle
+import androidx.appcompat.app.AppCompatActivity
+class MainActivity : AppCompatActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.activity_main)
+    }
+}`;
+    } else if (filename.endsWith('.xml')) {
+        return `<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:orientation="vertical">
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="Hello World!" />
+</LinearLayout>`;
+    }
+    return '';
+}
+function refreshFiles() {
+    if (currentProject) {
+        loadProjectFiles();
+    }
+}
+// ==================== Build Functions ====================
+async function startBuild() {
+    if (!currentProject) {
+        alert('Please open a project first');
+        return;
+    }
+    switchPanel('build');
+    const buildPanel = document.getElementById('build-panel');
+    buildPanel.innerHTML = '<div class="building">🔨 Building APK...</div>';
+    updateStatus('Building...', 'building');
+    try {
+        const response = await fetch(`/api/build/${currentProject}`, {
+            method: 'POST'
+        });
+        const data = await response.json();
+        activeBuildId = data.buildId;
+        // Poll for build status
+        checkBuildStatus(activeBuildId);
+    } catch (error) {
+        buildPanel.innerHTML = '<div class="build-error">❌ Build failed to start</div>';
+        updateStatus('Build failed', 'error');
+    }
+}
+async function checkBuildStatus(buildId) {
+    const buildPanel = document.getElementById('build-panel');
+    try {
+        const response = await fetch(`/api/build/${buildId}`);
+        const data = await response.json();
+        if (data.output) {
+            let html = data.output.replace(/\n/g, '<br>')
+                .replace(/SUCCESS/g, '<span class="build-success">SUCCESS</span>')
+                .replace(/FAILED/g, '<span class="build-error">FAILED</span>')
+                .replace(/warning/g, '<span class="build-warning">warning</span>');
+            buildPanel.innerHTML = html;
+        }
+        if (data.success !== undefined) {
+            if (data.success) {
+                buildPanel.innerHTML += '<br><br><div class="build-success">✅ Build successful! APK ready.</div>';
+                updateStatus('Build successful', 'success');
+            } else {
+                buildPanel.innerHTML += '<br><br><div class="build-error">❌ Build failed</div>';
+                updateStatus('Build failed', 'error');
+            }
+        } else {
+            // Still building, check again
+            setTimeout(() => checkBuildStatus(buildId), 1000);
+        }
+    } catch (error) {
+        buildPanel.innerHTML = '<div class="build-error">Error checking build status</div>';
+    }
+}
+async function downloadAPK() {
+    if (!currentProject) {
+        alert('Please open a project first');
+        return;
+    }
+    window.location.href = `/api/apk/${currentProject}`;
+}
+// ==================== Preview Functions ====================
+async function uploadLogo() {
+    if (!currentProject) {
+        alert('Please open a project first');
+        return;
+    }
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/*';
+    input.onchange = async (e) => {
+        const file = e.target.files[0];
+        const formData = new FormData();
+        formData.append('logo', file);
+        updateStatus('Uploading logo...', 'building');
+        try {
+            const response = await fetch(`/api/logo/upload/${currentProject}`, {
+                method: 'POST',
+                body: formData
+            });
+            const data = await response.json();
+            if (data.success) {
+                // Update preview logo
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    document.getElementById('preview-logo').src = e.target.result;
+                };
+                reader.readAsDataURL(file);
+                updateStatus('Logo updated', 'success');
+            }
+        } catch (error) {
+            updateStatus('Logo upload failed', 'error');
+        }
+    };
+    input.click();
+}
+function installOnPreview() {
+    const appScreen = document.getElementById('app-screen');
+    const logo = document.getElementById('preview-logo');
+    const appName = document.getElementById('preview-app-name');
+    // Simulate app installation
+    updateStatus('Installing on Android 10...', 'building');
+    setTimeout(() => {
+        appScreen.innerHTML = `
+            <div class="logo-container">
+                <img id="preview-logo" src="${logo.src}" alt="App Logo" style="width: 96px; height: 96px; border-radius: 20px;">
+                <h3 id="preview-app-name" style="font-size: 20px; font-weight: 600; color: #333; margin-top: 16px;">${appName.textContent}</h3>
+                <p style="font-size: 12px; color: #666; margin-top: 4px;">Running on Android 10</p>
+                <div style="margin-top: 20px; padding: 8px 16px; background: #3DDC84; color: white; border-radius: 20px; font-size: 12px;">
+                    App installed
+                </div>
+            </div>
+        `;
+        updateStatus('App installed on preview', 'success');
+    }, 2000);
+}
+function rotatePreview() {
+    const phone = document.getElementById('phone-preview');
+    phone.classList.toggle('rotated');
+}
+function toggleTheme() {
+    const statusBar = document.getElementById('status-bar');
+    const appScreen = document.getElementById('app-screen');
+    const navBar = document.getElementById('nav-bar');
+    statusBar.classList.toggle('light');
+    appScreen.classList.toggle('dark');
+    navBar.classList.toggle('light');
+}
+function simulateBack() {
+    updateStatus('Back button pressed', 'info');
+}
+function simulateHome() {
+    updateStatus('Home button pressed', 'info');
+    // Reset to home screen
+    const appScreen = document.getElementById('app-screen');
+    appScreen.innerHTML = `
+        <div class="logo-container">
+            <img id="preview-logo" src="${document.getElementById('preview-logo').src}" alt="App Logo" style="width: 96px; height: 96px; border-radius: 20px;">
+            <h3 id="preview-app-name" style="font-size: 20px; font-weight: 600; color: #333; margin-top: 16px;">${document.getElementById('preview-app-name').textContent}</h3>
+            <p class="app-version">Android 10 (API 29)</p>
+        </div>
+    `;
+}
+function simulateRecent() {
+    updateStatus('Recent apps button pressed', 'info');
+}
+// ==================== UI Functions ====================
+function updateLineNumbers() {
+    const editor = document.getElementById('code-editor');
+    const lines = editor.innerText.split('\n').length;
+    const lineNumbers = document.getElementById('line-numbers');
+    let html = '';
+    for (let i = 1; i <= lines; i++) {
+        html += `<div class="leading-6">${i}</div>`;
+    }
+    lineNumbers.innerHTML = html;
+}
+function syncScroll() {
+    const editor = document.getElementById('code-editor');
+    const lineNumbers = document.getElementById('line-numbers');
+    lineNumbers.scrollTop = editor.scrollTop;
+}
+function switchPanel(panel) {
+    // Hide all panels
+    document.getElementById('terminal-panel').classList.add('hidden');
+    document.getElementById('build-panel').classList.add('hidden');
+    // Show selected panel
+    document.getElementById(`${panel}-panel`).classList.remove('hidden');
+    // Update tab styles
+    document.querySelectorAll('.panel-tab').forEach(tab => {
+        tab.classList.remove('border-[#3DDC84]', 'text-white');
+        tab.classList.add('text-gray-400');
+    });
+    event.currentTarget.classList.add('border-[#3DDC84]', 'text-white');
+    event.currentTarget.classList.remove('text-gray-400');
+}
+function updateStatus(message, type) {
+    const statusEl = document.getElementById('status-message');
+    statusEl.textContent = message;
+    const colors = {
+        success: '#3DDC84',
+        error: '#CF6679',
+        building: '#FBC02D',
+        info: '#64B5F6'
+    };
+    statusEl.style.color = colors[type] || '#000000';
+}
+function openSettings() {
+    alert('Settings dialog would open here');
+}
+function setupEventListeners() {
+    // Keyboard shortcuts
+    document.addEventListener('keydown', (e) => {
+        if (e.ctrlKey && e.key === 's') {
+            e.preventDefault();
+            saveCurrentFile();
+        }
+        if (e.key === 'F5') {
+            e.preventDefault();
+            startBuild();
+        }
+    });
+    // Click outside to close dropdown
+    document.addEventListener('click', (e) => {
+        if (!e.target.closest('.relative')) {
+            document.getElementById('project-dropdown').classList.add('hidden');
+        }
+    });
+}
+// Export functions for HTML
+window.toggleProjectDropdown = toggleProjectDropdown;
+window.createNewProject = createNewProject;
+window.openProject = openProject;
+window.openFile = openFile;
+window.saveCurrentFile = saveCurrentFile;
+window.createNewFile = createNewFile;
+window.refreshFiles = refreshFiles;
+window.startBuild = startBuild;
+window.downloadAPK = downloadAPK;
+window.installOnPreview = installOnPreview;
+window.rotatePreview = rotatePreview;
+window.toggleTheme = toggleTheme;
+window.uploadLogo = uploadLogo;
+window.simulateBack = simulateBack;
+window.simulateHome = simulateHome;
+window.simulateRecent = simulateRecent;
+window.switchPanel = switchPanel;
+window.updateLineNumbers = updateLineNumbers;
+window.syncScroll = syncScroll;
+window.openSettings = openSettings;
+window.switchToTab = switchToTab;
+window.closeTab = closeTab;

server.js ADDED Viewed

	@@ -0,0 +1,473 @@

+const express = require('express');
+const http = require('http');
+const WebSocket = require('ws');
+const { exec, spawn } = require('child_process');
+const fs = require('fs').promises;
+const path = require('path');
+const multer = require('multer');
+const AdmZip = require('adm-zip');
+const archiver = require('archiver');
+const app = express();
+const server = http.createServer(app);
+const wss = new WebSocket.Server({ server });
+const upload = multer({ dest: 'uploads/' });
+// Store active builds and terminals
+const activeBuilds = new Map();
+const activeTerminals = new Map();
+// Middleware
+app.use(express.json({ limit: '50mb' }));
+app.use(express.urlencoded({ extended: true, limit: '50mb' }));
+// Serve all static files from root
+app.use(express.static(__dirname));
+// ==================== API Routes ====================
+// 1. Home page
+app.get('/', (req, res) => {
+    res.sendFile(path.join(__dirname, 'index.html'));
+});
+// 2. Get all projects
+app.get('/api/projects', async (req, res) => {
+    try {
+        const projects = await fs.readdir('/workspace');
+        res.json({ projects });
+    } catch (error) {
+        res.json({ projects: [] });
+    }
+});
+// 3. Create new project
+app.post('/api/project/create', async (req, res) => {
+    const { name, template = 'empty' } = req.body;
+    const projectPath = path.join('/workspace', name);
+    try {
+        await fs.mkdir(projectPath, { recursive: true });
+        await createAndroidProject(projectPath, name);
+        res.json({ success: true, message: 'Project created', path: projectPath });
+    } catch (error) {
+        res.status(500).json({ error: error.message });
+    }
+});
+// 4. Get project files
+app.get('/api/files/:project/*', async (req, res) => {
+    const { project, '0': filePath } = req.params;
+    const fullPath = path.join('/workspace', project, filePath || '');
+    try {
+        const stat = await fs.stat(fullPath);
+        if (stat.isDirectory()) {
+            const files = await fs.readdir(fullPath);
+            res.json({ type: 'directory', files });
+        } else {
+            const content = await fs.readFile(fullPath, 'utf-8');
+            res.json({ type: 'file', content });
+        }
+    } catch (error) {
+        res.status(404).json({ error: 'Not found' });
+    }
+});
+// 5. Save file
+app.post('/api/file/:project/*', async (req, res) => {
+    const { project, '0': filePath } = req.params;
+    const { content } = req.body;
+    const fullPath = path.join('/workspace', project, filePath);
+    try {
+        await fs.mkdir(path.dirname(fullPath), { recursive: true });
+        await fs.writeFile(fullPath, content);
+        res.json({ success: true });
+    } catch (error) {
+        res.status(500).json({ error: error.message });
+    }
+});
+// 6. Build project
+app.post('/api/build/:project', (req, res) => {
+    const { project } = req.params;
+    const projectPath = path.join('/workspace', project);
+    const buildId = Date.now().toString();
+    const buildProcess = spawn('./gradlew', ['assembleDebug'], {
+        cwd: projectPath,
+        env: {
+            ...process.env,
+            ANDROID_HOME: '/android-sdk',
+            JAVA_HOME: '/usr/lib/jvm/java-17-openjdk-amd64'
+        }
+    });
+    let output = '';
+    buildProcess.stdout.on('data', (data) => {
+        output += data.toString();
+    });
+    buildProcess.stderr.on('data', (data) => {
+        output += data.toString();
+    });
+    buildProcess.on('close', (code) => {
+        const success = code === 0;
+        const apkPath = path.join(projectPath, 'app/build/outputs/apk/debug/app-debug.apk');
+        activeBuilds.set(buildId, {
+            success,
+            output,
+            apkPath: success ? apkPath : null,
+            project
+        });
+        res.json({
+            buildId,
+            success,
+            output,
+            message: success ? 'Build successful!' : 'Build failed'
+        });
+    });
+});
+// 7. Get build status
+app.get('/api/build/:buildId', (req, res) => {
+    const { buildId } = req.params;
+    const build = activeBuilds.get(buildId);
+    if (build) {
+        res.json(build);
+    } else {
+        res.status(404).json({ error: 'Build not found' });
+    }
+});
+// 8. Download APK
+app.get('/api/apk/:project', async (req, res) => {
+    const { project } = req.params;
+    const apkPath = path.join('/workspace', project, 'app/build/outputs/apk/debug/app-debug.apk');
+    try {
+        await fs.access(apkPath);
+        res.download(apkPath, `${project}.apk`);
+    } catch (error) {
+        res.status(404).json({ error: 'APK not found. Build first!' });
+    }
+});
+// 9. Upload logo
+app.post('/api/logo/upload/:project', upload.single('logo'), async (req, res) => {
+    const { project } = req.params;
+    const logoPath = req.file.path;
+    try {
+        // Convert to Android icon sizes and copy to project
+        const resDir = path.join('/workspace', project, 'app/src/main/res');
+        // Create mipmap directories
+        const sizes = {
+            'mipmap-hdpi': 72,
+            'mipmap-mdpi': 48,
+            'mipmap-xhdpi': 96,
+            'mipmap-xxhdpi': 144,
+            'mipmap-xxxhdpi': 192
+        };
+        for (const [dir, size] of Object.entries(sizes)) {
+            const destDir = path.join(resDir, dir);
+            await fs.mkdir(destDir, { recursive: true });
+            // Copy and rename to ic_launcher.png
+            const destPath = path.join(destDir, 'ic_launcher.png');
+            await fs.copyFile(logoPath, destPath);
+        }
+        res.json({ success: true, message: 'Logo updated successfully' });
+    } catch (error) {
+        res.status(500).json({ error: error.message });
+    }
+});
+// 10. Terminal WebSocket
+wss.on('connection', (ws) => {
+    console.log('Terminal connected');
+    const { spawn } = require('node-pty');
+    const shell = spawn('bash', [], {
+        name: 'xterm-color',
+        cols: 80,
+        rows: 24,
+        cwd: '/workspace',
+        env: process.env
+    });
+    const terminalId = Date.now().toString();
+    activeTerminals.set(terminalId, shell);
+    shell.on('data', (data) => {
+        ws.send(JSON.stringify({ type: 'data', data: data.toString() }));
+    });
+    ws.on('message', (msg) => {
+        try {
+            const { type, data } = JSON.parse(msg);
+            if (type === 'input') {
+                shell.write(data);
+            } else if (type === 'resize') {
+                shell.resize(data.cols, data.rows);
+            }
+        } catch (e) {
+            console.error('Terminal error:', e);
+        }
+    });
+    ws.on('close', () => {
+        shell.kill();
+        activeTerminals.delete(terminalId);
+    });
+});
+// ==================== Helper Functions ====================
+async function createAndroidProject(projectPath, name) {
+    const packageName = `com.${name.toLowerCase().replace(/[^a-z]/g, '')}.app`;
+    // Create directory structure
+    const mainPath = path.join(projectPath, 'app/src/main');
+    const javaPath = path.join(mainPath, 'java', ...packageName.split('.'));
+    const resPath = path.join(mainPath, 'res');
+    const layoutPath = path.join(resPath, 'layout');
+    const drawablePath = path.join(resPath, 'drawable');
+    const valuesPath = path.join(resPath, 'values');
+    const mipmapPath = path.join(resPath, 'mipmap-hdpi');
+    await fs.mkdir(javaPath, { recursive: true });
+    await fs.mkdir(layoutPath, { recursive: true });
+    await fs.mkdir(drawablePath, { recursive: true });
+    await fs.mkdir(valuesPath, { recursive: true });
+    await fs.mkdir(mipmapPath, { recursive: true });
+    // 1. settings.gradle
+    await fs.writeFile(path.join(projectPath, 'settings.gradle'),
+        `rootProject.name = "${name}"\ninclude ':app'`);
+    // 2. build.gradle (project)
+    await fs.writeFile(path.join(projectPath, 'build.gradle'), `
+// Top-level build file
+buildscript {
+    ext.kotlin_version = '1.9.0'
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:8.0.0'
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+    }
+}
+allprojects {
+    repositories {
+        google()
+        mavenCentral()
+    }
+}
+task clean(type: Delete) {
+    delete rootProject.buildDir
+}
+    `);
+    // 3. gradle.properties
+    await fs.writeFile(path.join(projectPath, 'gradle.properties'), `
+org.gradle.jvmargs=-Xmx2048m
+android.useAndroidX=true
+kotlin.code.style=official
+    `);
+    // 4. gradlew wrapper
+    const gradlew = `#!/usr/bin/env bash
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+$DIR/gradlew "$@"
+`;
+    await fs.writeFile(path.join(projectPath, 'gradlew'), gradlew);
+    await fs.chmod(path.join(projectPath, 'gradlew'), 0o755);
+    // 5. app/build.gradle
+    await fs.writeFile(path.join(projectPath, 'app/build.gradle'), `
+plugins {
+    id 'com.android.application'
+    id 'org.jetbrains.kotlin.android'
+}
+android {
+    compileSdk 34
+    defaultConfig {
+        applicationId "${packageName}"
+        minSdk 29
+        targetSdk 34
+        versionCode 1
+        versionName "1.0"
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
+        }
+    }
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_17
+        targetCompatibility JavaVersion.VERSION_17
+    }
+    kotlinOptions {
+        jvmTarget = '17'
+    }
+}
+dependencies {
+    implementation 'androidx.core:core-ktx:1.12.0'
+    implementation 'androidx.appcompat:appcompat:1.6.1'
+    implementation 'com.google.android.material:material:1.11.0'
+    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
+}
+    `);
+    // 6. AndroidManifest.xml
+    await fs.writeFile(path.join(mainPath, 'AndroidManifest.xml'), `
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="${packageName}">
+    <application
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="${name}"
+        android:theme="@style/Theme.${name}">
+        <activity
+            android:name=".MainActivity"
+            android:exported="true">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+        </activity>
+    </application>
+</manifest>
+    `);
+    // 7. MainActivity.kt
+    await fs.writeFile(path.join(javaPath, 'MainActivity.kt'), `
+package ${packageName}
+import android.os.Bundle
+import androidx.appcompat.app.AppCompatActivity
+class MainActivity : AppCompatActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.activity_main)
+        // Your app starts here
+        supportActionBar?.title = "${name}"
+    }
+}
+    `);
+    // 8. activity_main.xml
+    await fs.writeFile(path.join(layoutPath, 'activity_main.xml'), `
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:orientation="vertical"
+    android:gravity="center"
+    android:padding="20dp">
+    <ImageView
+        android:id="@+id/app_logo"
+        android:layout_width="120dp"
+        android:layout_height="120dp"
+        android:src="@drawable/ic_launcher_foreground"
+        android:layout_marginBottom="20dp" />
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="${name}"
+        android:textSize="28sp"
+        android:textStyle="bold"
+        android:textColor="#3DDC84"
+        android:layout_marginBottom="8dp" />
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="Android 10 (API 29)"
+        android:textSize="16sp"
+        android:textColor="#666666"
+        android:layout_marginBottom="24dp" />
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="Welcome to your Android app!"
+        android:textSize="14sp"
+        android:textColor="#333333" />
+</LinearLayout>
+    `);
+    // 9. strings.xml
+    await fs.writeFile(path.join(valuesPath, 'strings.xml'), `
+<resources>
+    <string name="app_name">${name}</string>
+</resources>
+    `);
+    // 10. colors.xml
+    await fs.writeFile(path.join(valuesPath, 'colors.xml'), `
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="purple_200">#FFBB86FC</color>
+    <color name="purple_500">#FF6200EE</color>
+    <color name="purple_700">#FF3700B3</color>
+    <color name="teal_200">#FF03DAC5</color>
+    <color name="teal_700">#FF018786</color>
+    <color name="black">#FF000000</color>
+    <color name="white">#FFFFFFFF</color>
+</resources>
+    `);
+    // 11. themes.xml
+    await fs.writeFile(path.join(valuesPath, 'themes.xml'), `
+<resources xmlns:tools="http://schemas.android.com/tools">
+    <style name="Theme.${name}" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
+        <item name="colorPrimary">@color/purple_500</item>
+        <item name="colorPrimaryVariant">@color/purple_700</item>
+        <item name="colorOnPrimary">@color/white</item>
+        <item name="colorSecondary">@color/teal_200</item>
+        <item name="colorSecondaryVariant">@color/teal_700</item>
+        <item name="colorOnSecondary">@color/black</item>
+        <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
+    </style>
+</resources>
+    `);
+}
+// Start server
+server.listen(7860, () => {
+    console.log('🚀 Server running on http://localhost:7860');
+    console.log('📱 Android 10 Preview Ready');
+    console.log('🔧 Build System Active');
+});

style.css ADDED Viewed

	@@ -0,0 +1,265 @@

+/* Android Studio Web - Complete Styles with Android 10 Preview */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+::selection {
+    background-color: #214283;
+    color: white;
+}
+body {
+    font-family: 'Inter', sans-serif;
+    overflow: hidden;
+}
+.code-font {
+    font-family: 'JetBrains Mono', monospace;
+}
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #2B2B2B;
+}
+::-webkit-scrollbar-thumb {
+    background: #4E4E4E;
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #5E5E5E;
+}
+::-webkit-scrollbar-corner {
+    background: #2B2B2B;
+}
+/* Editor Styles */
+.line-numbers {
+    background-color: #313335;
+    color: #808080;
+    text-align: right;
+    padding-right: 12px;
+    user-select: none;
+    min-width: 40px;
+    line-height: 1.5rem;
+    font-size: 12px;
+}
+.editor-content {
+    background-color: #1E1E1E;
+    color: #A9B7C6;
+    outline: none;
+    white-space: pre;
+    tab-size: 4;
+    font-size: 12px;
+    line-height: 1.5rem;
+}
+/* File Tree */
+.file-item {
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    font-size: 13px;
+}
+.file-item:hover {
+    background-color: #4E4E4E;
+}
+.file-item.active {
+    background-color: #4E4E4E;
+    color: white;
+}
+/* Android 10 Phone Frame */
+.phone-frame {
+    width: 280px;
+    height: 560px;
+    background: #121212;
+    border-radius: 40px;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
+    transition: transform 0.3s ease;
+}
+.phone-frame.rotated {
+    transform: rotate(90deg);
+    width: 560px;
+    height: 280px;
+}
+/* Android 10 Status Bar */
+.status-bar {
+    display: flex;
+    justify-content: space-between;
+    padding: 12px 20px;
+    background: #121212;
+    color: white;
+    font-size: 12px;
+    font-weight: 500;
+}
+.status-bar.light {
+    background: #FFFFFF;
+    color: black;
+}
+.status-bar .status-icons {
+    display: flex;
+    gap: 4px;
+}
+/* App Screen */
+.app-screen {
+    height: calc(100% - 80px);
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: #F5F5F5;
+}
+.app-screen.dark {
+    background: #1E1E1E;
+}
+.logo-container {
+    text-align: center;
+}
+#preview-logo {
+    width: 96px;
+    height: 96px;
+    border-radius: 20px;
+    margin-bottom: 16px;
+    object-fit: cover;
+}
+#preview-app-name {
+    font-size: 20px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 4px;
+}
+.dark #preview-app-name {
+    color: white;
+}
+.app-version {
+    font-size: 12px;
+    color: #666;
+}
+.dark .app-version {
+    color: #999;
+}
+/* Android 10 Navigation */
+.nav-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #121212;
+}
+.nav-bar.light {
+    background: #FFFFFF;
+}
+.nav-handle {
+    width: 120px;
+    height: 5px;
+    background: #4E4E4E;
+    border-radius: 3px;
+}
+/* Terminal */
+.xterm {
+    padding: 8px;
+    height: 100%;
+}
+.xterm-viewport {
+    overflow-y: auto !important;
+}
+/* Build Output */
+.build-success {
+    color: #3DDC84;
+}
+.build-error {
+    color: #CF6679;
+}
+.build-warning {
+    color: #FBC02D;
+}
+.build-info {
+    color: #64B5F6;
+}
+/* Animations */
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+.building {
+    animation: pulse 1.5s infinite;
+}
+/* Project Dropdown */
+#project-dropdown {
+    max-height: 300px;
+    overflow-y: auto;
+}
+.project-item {
+    padding: 8px 12px;
+    cursor: pointer;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.project-item:hover {
+    background: #4E4E4E;
+}
+/* Responsive */
+@media (max-width: 1024px) {
+    .w-64 {
+        width: 200px;
+    }
+    .w-80 {
+        width: 240px;
+    }
+}
+@media (max-width: 768px) {
+    .w-64, .w-80 {
+        display: none;
+    }
+}