| <!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> |
| |
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| |
| |
| <script src="https://unpkg.com/lucide@latest"></script> |
| |
| |
| <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"> |
| |
| |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.css" /> |
| |
| |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body class="bg-[#2B2B2B] text-gray-300 h-screen flex flex-col overflow-hidden"> |
| |
| <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> |
| |
| |
| <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"> |
| |
| </div> |
| </div> |
| </div> |
| |
| |
| <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> |
| |
| |
| <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> |
| |
| |
| <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> |
|
|
| |
| <div class="flex-1 flex overflow-hidden"> |
| |
| <div class="w-64 bg-[#3C3F41] border-r border-[#4E4E4E] flex flex-col"> |
| |
| <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> |
| |
| |
| <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> |
| |
| |
| <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> |
|
|
| |
| <div class="flex-1 flex flex-col bg-[#2B2B2B]"> |
| |
| <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> |
| |
| |
| <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> |
| |
| |
| <div class="h-48 bg-[#2B2B2B] border-t border-[#4E4E4E] flex flex-col"> |
| |
| <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> |
| |
| |
| <div id="terminal-panel" class="flex-1 bg-black"></div> |
| |
| |
| <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> |
|
|
| |
| <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> |
| |
| |
| <div class="flex-1 p-4 flex items-center justify-center bg-[#1E1E1E]"> |
| <div class="phone-frame android-10" id="phone-preview"> |
| |
| <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> |
| |
| |
| <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> |
| |
| |
| <div class="nav-bar" id="nav-bar"> |
| <div class="nav-handle"></div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <script src="https://cdn.jsdelivr.net/npm/xterm/lib/xterm.js"></script> |
| <script src="script.js"></script> |
| </body> |
| </html> |
