Spaces:
Running
Running
Download index.html from SSeek/android-studio-webapp: direct link, hf CLI and curl.
- Browser
- Download file 30.7 kB
-
https://huggingface.co/spaces/SSeek/android-studio-webapp/resolve/main/index.html
- Command line
-
hf download hf://spaces/SSeek/android-studio-webapp/index.html
-
curl -L -o index.html https://huggingface.co/spaces/SSeek/android-studio-webapp/resolve/main/index.html
30.7 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AndroCode - Collaborative Android IDE</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .editor-container { | |
| grid-template-columns: 250px 1fr 300px; | |
| } | |
| .code-editor { | |
| font-family: 'Fira Code', monospace; | |
| } | |
| .android-studio-theme { | |
| background-color: #2b2b2b; | |
| color: #a9b7c6; | |
| } | |
| .android-green { | |
| background-color: #3ddc84; | |
| } | |
| .android-blue { | |
| background-color: #4285f4; | |
| } | |
| .xml-tag { | |
| color: #e8bf6a; | |
| } | |
| .xml-attr { | |
| color: #a5c261; | |
| } | |
| .kotlin-keyword { | |
| color: #cc7832; | |
| } | |
| .kotlin-function { | |
| color: #ffc66d; | |
| } | |
| .preview-container { | |
| background: linear-gradient(45deg, #2b2b2b 25%, #3c3f41 25%, #3c3f41 50%, #2b2b2b 50%, #2b2b2b 75%, #3c3f41 75%, #3c3f41 100%); | |
| background-size: 10px 10px; | |
| } | |
| .device-frame { | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="600" viewBox="0 0 300 600"><rect x="10" y="10" width="280" height="580" rx="20" fill="none" stroke="%23ffffff20" stroke-width="2"/></svg>'); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| } | |
| .tab-active { | |
| border-bottom: 2px solid #3ddc84; | |
| } | |
| .cm-scroller { | |
| overflow: auto; | |
| height: 100%; | |
| } | |
| .chat-message.ai { | |
| background-color: #2d3748; | |
| } | |
| .chat-message.user { | |
| background-color: #3c3f41; | |
| } | |
| .gradient-border { | |
| border: 1px solid transparent; | |
| background-clip: padding-box, border-box; | |
| background-origin: padding-box, border-box; | |
| background-image: linear-gradient(#2b2b2b, #2b2b2b), linear-gradient(to right, #3ddc84, #4285f4); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-200 h-screen overflow-hidden"> | |
| <div class="flex flex-col h-full"> | |
| <!-- Top Navigation --> | |
| <header class="bg-gray-800 py-2 px-4 flex items-center justify-between border-b border-gray-700"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <i class="fab fa-android text-2xl text-green-400 mr-2"></i> | |
| <h1 class="text-xl font-bold">AndroCode</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-4"> | |
| <button class="hover:text-green-400">File</button> | |
| <button class="hover:text-green-400">Edit</button> | |
| <button class="hover:text-green-400">View</button> | |
| <button class="hover:text-green-400">Build</button> | |
| <button class="hover:text-green-400">Run</button> | |
| <button class="hover:text-green-400">Tools</button> | |
| <button class="hover:text-green-400">Help</button> | |
| </nav> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search (Ctrl+P)" class="bg-gray-700 px-3 py-1 rounded text-sm w-64 focus:outline-none focus:ring-1 focus:ring-green-400"> | |
| <i class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i> | |
| </div> | |
| <button class="bg-green-500 hover:bg-green-600 px-3 py-1 rounded text-sm flex items-center"> | |
| <i class="fas fa-play mr-1"></i> Run | |
| </button> | |
| <button class="bg-blue-500 hover:bg-blue-600 px-3 py-1 rounded text-sm flex items-center"> | |
| <i class="fas fa-share-alt mr-1"></i> Share | |
| </button> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Left Sidebar - Project Files --> | |
| <div class="w-64 bg-gray-800 border-r border-gray-700 flex flex-col"> | |
| <div class="p-3 border-b border-gray-700 flex justify-between items-center"> | |
| <h2 class="font-medium">PROJECT</h2> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto"> | |
| <div class="p-2"> | |
| <div class="flex items-center justify-between py-1 px-2 hover:bg-gray-700 rounded cursor-pointer"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-folder text-yellow-400 mr-2"></i> | |
| <span>app</span> | |
| </div> | |
| <i class="fas fa-chevron-down text-xs text-gray-400"></i> | |
| </div> | |
| <div class="pl-6"> | |
| <div class="flex items-center py-1 px-2 hover:bg-gray-700 rounded cursor-pointer"> | |
| <i class="fas fa-folder text-yellow-400 mr-2"></i> | |
| <span>src</span> | |
| </div> | |
| <div class="pl-6"> | |
| <div class="flex items-center py-1 px-2 hover:bg-gray-700 rounded cursor-pointer"> | |
| <i class="fas fa-folder text-yellow-400 mr-2"></i> | |
| <span>main</span> | |
| </div> | |
| <div class="pl-6"> | |
| <div class="flex items-center py-1 px-2 hover:bg-gray-700 rounded cursor-pointer"> | |
| <i class="fas fa-folder text-yellow-400 mr-2"></i> | |
| <span>java</span> | |
| </div> | |
| <div class="flex items-center py-1 px-2 hover:bg-gray-700 rounded cursor-pointer"> | |
| <i class="fas fa-folder text-yellow-400 mr-2"></i> | |
| <span>res</span> | |
| </div> | |
| <div class="flex items-center py-1 px-2 hover:bg-gray-700 rounded cursor-pointer bg-gray-700"> | |
| <i class="fab fa-android text-green-400 mr-2"></i> | |
| <span>AndroidManifest.xml</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center py-1 px-2 hover:bg-gray-700 rounded cursor-pointer"> | |
| <i class="fas fa-file-code text-blue-400 mr-2"></i> | |
| <span>build.gradle</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-3 border-t border-gray-700"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h3 class="text-sm font-medium">ANDROID STUDIO</h3> | |
| <i class="fas fa-plug text-green-400"></i> | |
| </div> | |
| <div class="text-xs text-gray-400 mb-2">Connected to: Local Studio</div> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 py-1 rounded text-sm flex items-center justify-center"> | |
| <i class="fas fa-sync-alt mr-2"></i> Sync Now | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Editor Area --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Editor Tabs --> | |
| <div class="bg-gray-800 border-b border-gray-700 flex items-center overflow-x-auto"> | |
| <div class="flex"> | |
| <div class="px-3 py-2 flex items-center border-r border-gray-700 tab-active"> | |
| <i class="fab fa-android text-green-400 mr-2"></i> | |
| <span>MainActivity.kt</span> | |
| <button class="ml-2 text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="px-3 py-2 flex items-center border-r border-gray-700"> | |
| <i class="fas fa-file-code text-blue-400 mr-2"></i> | |
| <span>activity_main.xml</span> | |
| <button class="ml-2 text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="px-3 py-2 flex items-center border-r border-gray-700"> | |
| <i class="fas fa-file-alt text-purple-400 mr-2"></i> | |
| <span>build.gradle</span> | |
| <button class="ml-2 text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Code Editor and Preview --> | |
| <div class="flex-1 flex overflow-hidden"> | |
| <!-- Code Editor --> | |
| <div class="flex-1 overflow-hidden flex flex-col android-studio-theme"> | |
| <div class="code-editor flex-1 overflow-auto p-4"> | |
| <div class="text-sm"> | |
| <div><span class="kotlin-keyword">package</span> com.example.myapplication</div> | |
| <br> | |
| <div><span class="kotlin-keyword">import</span> androidx.appcompat.app.AppCompatActivity</div> | |
| <div><span class="kotlin-keyword">import</span> android.os.Bundle</div> | |
| <div><span class="kotlin-keyword">import</span> androidx.lifecycle.ViewModelProvider</div> | |
| <div><span class="kotlin-keyword">import</span> com.example.myapplication.databinding.ActivityMainBinding</div> | |
| <br> | |
| <div><span class="kotlin-keyword">class</span> <span class="text-white">MainActivity</span> : <span class="text-blue-400">AppCompatActivity</span>() {</div> | |
| <div class="ml-4"><span class="kotlin-keyword">private</span> <span class="kotlin-keyword">lateinit</span> <span class="kotlin-keyword">var</span> binding: ActivityMainBinding</div> | |
| <div class="ml-4"><span class="kotlin-keyword">private</span> <span class="kotlin-keyword">lateinit</span> <span class="kotlin-keyword">var</span> viewModel: MainViewModel</div> | |
| <br> | |
| <div class="ml-4"><span class="kotlin-keyword">override</span> <span class="kotlin-keyword">fun</span> <span class="kotlin-function">onCreate</span>(savedInstanceState: Bundle?) {</div> | |
| <div class="ml-8"><span class="kotlin-keyword">super</span>.<span class="kotlin-function">onCreate</span>(savedInstanceState)</div> | |
| <div class="ml-8">binding = ActivityMainBinding.<span class="kotlin-function">inflate</span>(layoutInflater)</div> | |
| <div class="ml-8"><span class="kotlin-function">setContentView</span>(binding.root)</div> | |
| <br> | |
| <div class="ml-8">viewModel = ViewModelProvider(<span class="kotlin-keyword">this</span>).<span class="kotlin-function">get</span>(MainViewModel::<span class="kotlin-keyword">class</span>.java)</div> | |
| <br> | |
| <div class="ml-8"><span class="kotlin-function">setupRecyclerView</span>()</div> | |
| <div class="ml-8"><span class="kotlin-function">observeViewModel</span>()</div> | |
| <div class="ml-4">}</div> | |
| <br> | |
| <div class="ml-4"><span class="kotlin-keyword">private</span> <span class="kotlin-keyword">fun</span> <span class="kotlin-function">setupRecyclerView</span>() {</div> | |
| <div class="ml-8"><span class="kotlin-keyword">val</span> adapter = ItemAdapter { item -></div> | |
| <div class="ml-12"><span class="kotlin-function">showItemDetails</span>(item)</div> | |
| <div class="ml-8">}</div> | |
| <div class="ml-8">binding.recyclerView.adapter = adapter</div> | |
| <div class="ml-8">binding.recyclerView.layoutManager = LinearLayoutManager(<span class="kotlin-keyword">this</span>)</div> | |
| <div class="ml-4">}</div> | |
| <br> | |
| <div class="ml-4"><span class="kotlin-keyword">private</span> <span class="kotlin-keyword">fun</span> <span class="kotlin-function">observeViewModel</span>() {</div> | |
| <div class="ml-8">viewModel.items.observe(<span class="kotlin-keyword">this</span>) { items -></div> | |
| <div class="ml-12">(binding.recyclerView.adapter <span class="kotlin-keyword">as</span> ItemAdapter).<span class="kotlin-function">submitList</span>(items)</div> | |
| <div class="ml-8">}</div> | |
| <div class="ml-4">}</div> | |
| <div>}</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 border-t border-gray-700 p-2 flex justify-between items-center"> | |
| <div class="text-xs text-gray-400"> | |
| <span>UTF-8</span> | |
| <span class="mx-2">|</span> | |
| <span>Kotlin</span> | |
| <span class="mx-2">|</span> | |
| <span>Android</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="text-xs text-gray-400"> | |
| <span>Ln 24, Col 12</span> | |
| </div> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-terminal"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-bug"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar - Preview and Chat --> | |
| <div class="w-80 bg-gray-800 border-l border-gray-700 flex flex-col"> | |
| <!-- Preview Tabs --> | |
| <div class="flex border-b border-gray-700"> | |
| <button class="flex-1 py-2 text-center border-b-2 border-green-400"> | |
| <i class="fas fa-mobile-screen mr-1"></i> Preview | |
| </button> | |
| <button class="flex-1 py-2 text-center text-gray-400 hover:text-white"> | |
| <i class="fas fa-comment-dots mr-1"></i> Chat | |
| </button> | |
| <button class="flex-1 py-2 text-center text-gray-400 hover:text-white"> | |
| <i class="fas fa-users mr-1"></i> Collab | |
| </button> | |
| </div> | |
| <!-- Preview Content --> | |
| <div class="flex-1 overflow-auto preview-container p-4"> | |
| <div class="bg-gray-900 rounded-lg p-4 mb-4"> | |
| <h3 class="text-sm font-medium mb-2">XML Preview</h3> | |
| <div class="text-xs bg-gray-800 p-2 rounded overflow-x-auto"> | |
| <div><span class="xml-tag"><<span class="text-white">androidx.constraintlayout.widget.ConstraintLayout</span></span></div> | |
| <div class="ml-4"><span class="xml-attr">xmlns:android</span>=<span class="text-blue-300">"http://schemas.android.com/apk/res/android"</span></div> | |
| <div class="ml-4"><span class="xml-attr">xmlns:app</span>=<span class="text-blue-300">"http://schemas.android.com/apk/res-auto"</span></div> | |
| <div class="ml-4"><span class="xml-attr">android:layout_width</span>=<span class="text-blue-300">"match_parent"</span></div> | |
| <div class="ml-4"><span class="xml-attr">android:layout_height</span>=<span class="text-blue-300">"match_parent"</span><span class="xml-tag">></span></div> | |
| <br> | |
| <div class="ml-4"><span class="xml-tag"><<span class="text-white">androidx.recyclerview.widget.RecyclerView</span></span></div> | |
| <div class="ml-8"><span class="xml-attr">android:id</span>=<span class="text-blue-300">"@+id/recyclerView"</span></div> | |
| <div class="ml-8"><span class="xml-attr">android:layout_width</span>=<span class="text-blue-300">"match_parent"</span></div> | |
| <div class="ml-8"><span class="xml-attr">android:layout_height</span>=<span class="text-blue-300">"match_parent"</span></div> | |
| <div class="ml-8"><span class="xml-attr">app:layoutManager</span>=<span class="text-blue-300">"androidx.recyclerview.widget.LinearLayoutManager"</span></div> | |
| <div class="ml-8"><span class="xml-attr">app:layout_constraintBottom_toBottomOf</span>=<span class="text-blue-300">"parent"</span></div> | |
| <div class="ml-8"><span class="xml-attr">app:layout_constraintLeft_toLeftOf</span>=<span class="text-blue-300">"parent"</span></div> | |
| <div class="ml-8"><span class="xml-attr">app:layout_constraintRight_toRightOf</span>=<span class="text-blue-300">"parent"</span></div> | |
| <div class="ml-8"><span class="xml-attr">app:layout_constraintTop_toTopOf</span>=<span class="text-blue-300">"parent"</span> <span class="xml-tag">/></span></div> | |
| <br> | |
| <div><span class="xml-tag"></<span class="text-white">androidx.constraintlayout.widget.ConstraintLayout</span>></span></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-lg p-4"> | |
| <h3 class="text-sm font-medium mb-2">Device Preview</h3> | |
| <div class="device-frame h-64 flex items-center justify-center relative"> | |
| <div class="bg-gray-800 rounded-lg w-48 h-80 p-2"> | |
| <div class="bg-gray-700 rounded h-full flex flex-col"> | |
| <div class="p-2 bg-gray-600 rounded-t flex justify-between items-center"> | |
| <span class="text-xs font-medium">My App</span> | |
| <i class="fas fa-ellipsis-v text-xs"></i> | |
| </div> | |
| <div class="flex-1 overflow-auto p-2"> | |
| <div class="bg-gray-800 rounded p-2 mb-2"> | |
| <div class="text-sm font-medium">Item 1</div> | |
| <div class="text-xs text-gray-400">Description for item 1</div> | |
| </div> | |
| <div class="bg-gray-800 rounded p-2 mb-2"> | |
| <div class="text-sm font-medium">Item 2</div> | |
| <div class="text-xs text-gray-400">Description for item 2</div> | |
| </div> | |
| <div class="bg-gray-800 rounded p-2"> | |
| <div class="text-sm font-medium">Item 3</div> | |
| <div class="text-xs text-gray-400">Description for item 3</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Input --> | |
| <div class="border-t border-gray-700 p-3"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Ask AndroCode to generate code..." class="w-full bg-gray-700 rounded py-2 px-3 pr-10 focus:outline-none focus:ring-1 focus:ring-green-400"> | |
| <button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-green-400"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Status Bar --> | |
| <footer class="bg-gray-800 py-1 px-3 text-xs flex justify-between items-center border-t border-gray-700"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-branch text-gray-400 mr-1"></i> | |
| <span>main</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-plug text-green-400 mr-1"></i> | |
| <span>Android Studio Connected</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-1"></i> | |
| <span>No errors</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-mobile-alt text-blue-400 mr-1"></i> | |
| <span>Pixel 5 API 33</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-code text-purple-400 mr-1"></i> | |
| <span>Kotlin 1.8.0</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-terminal text-yellow-400 mr-1"></i> | |
| <span>Gradle 7.4</span> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Simulate Android Studio connection | |
| document.querySelector('.fa-plug').addEventListener('click', function() { | |
| const status = document.querySelector('footer span:nth-child(2)'); | |
| if (status.textContent === 'Android Studio Connected') { | |
| status.textContent = 'Android Studio Disconnected'; | |
| this.classList.remove('text-green-400'); | |
| this.classList.add('text-red-400'); | |
| } else { | |
| status.textContent = 'Android Studio Connected'; | |
| this.classList.remove('text-red-400'); | |
| this.classList.add('text-green-400'); | |
| } | |
| }); | |
| // Simulate chat functionality | |
| const chatInput = document.querySelector('input[placeholder="Ask AndroCode to generate code..."]'); | |
| chatInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| const message = this.value; | |
| if (message.trim() !== '') { | |
| // In a real app, this would call the DeepSeek API | |
| simulateAIResponse(message); | |
| this.value = ''; | |
| } | |
| } | |
| }); | |
| function simulateAIResponse(message) { | |
| const previewContainer = document.querySelector('.preview-container'); | |
| // Create user message | |
| const userMsg = document.createElement('div'); | |
| userMsg.className = 'chat-message user p-3 mb-2 rounded'; | |
| userMsg.innerHTML = `<div class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center mr-2"> | |
| <i class="fas fa-user text-xs"></i> | |
| </div> | |
| <div>${message}</div> | |
| </div>`; | |
| previewContainer.insertBefore(userMsg, previewContainer.lastElementChild); | |
| // Simulate AI thinking | |
| const thinking = document.createElement('div'); | |
| thinking.className = 'chat-message ai p-3 mb-2 rounded text-gray-400 italic'; | |
| thinking.textContent = 'AndroCode is thinking...'; | |
| previewContainer.insertBefore(thinking, previewContainer.lastElementChild); | |
| // Scroll to bottom | |
| previewContainer.scrollTop = previewContainer.scrollHeight; | |
| // After delay, show response | |
| setTimeout(() => { | |
| previewContainer.removeChild(thinking); | |
| const aiMsg = document.createElement('div'); | |
| aiMsg.className = 'chat-message ai p-3 mb-2 rounded'; | |
| let response = ''; | |
| if (message.toLowerCase().includes('recyclerview')) { | |
| response = `Here's how to improve your RecyclerView setup:<br><br> | |
| <div class="bg-gray-700 p-2 rounded text-sm font-mono"> | |
| // Add this to your ViewModel<br> | |
| private val _items = MutableLiveData<List<Item>>()<br> | |
| val items: LiveData<List<Item>> = _items<br><br> | |
| // Then in your Activity<br> | |
| binding.recyclerView.addItemDecoration(DividerItemDecoration(this, LinearLayoutManager.VERTICAL))<br> | |
| binding.recyclerView.setHasFixedSize(true)<br> | |
| </div>`; | |
| } else if (message.toLowerCase().includes('viewmodel')) { | |
| response = `For better ViewModel implementation, consider using Kotlin property delegation:<br><br> | |
| <div class="bg-gray-700 p-2 rounded text-sm font-mono"> | |
| // Add this to your Activity<br> | |
| private val viewModel: MainViewModel by viewModels()<br><br> | |
| // Requires this dependency in build.gradle:<br> | |
| implementation "androidx.activity:activity-ktx:1.6.1"<br> | |
| </div>`; | |
| } else { | |
| response = `I can help you with Android development tasks. Try asking about:<br> | |
| - Creating a new Activity<br> | |
| - Setting up Retrofit for API calls<br> | |
| - Implementing Room database<br> | |
| - Jetpack Compose layouts`; | |
| } | |
| aiMsg.innerHTML = `<div class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center mr-2"> | |
| <i class="fab fa-android text-xs"></i> | |
| </div> | |
| <div>${response}</div> | |
| </div>`; | |
| previewContainer.insertBefore(aiMsg, previewContainer.lastElementChild); | |
| previewContainer.scrollTop = previewContainer.scrollHeight; | |
| }, 1500); | |
| } | |
| // Simulate tab switching | |
| const tabs = document.querySelectorAll('.flex-1.py-2.text-center'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| tabs.forEach(t => t.classList.remove('border-green-400', 'text-white')); | |
| tabs.forEach(t => t.classList.add('text-gray-400')); | |
| this.classList.remove('text-gray-400'); | |
| this.classList.add('border-green-400', 'text-white'); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SSeek/android-studio-webapp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |